/* 배치는 위에서 잡고, 손으로 그린 듯한 겉모습은 아래 손맛 칸에서 입힘 */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  color: #2c2b31;
  background: #b3a892;
  font-family: "Yomogi", "Zen Kurenaido", "UD Digi Kyokasho N-R", "Yu Gothic UI",
    "Hiragino Maru Gothic ProN", Meiryo, sans-serif;
  font-size: 15px;
}

#app {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* 캔버스를 흐름에서 빼야 자기 크기로 레이아웃을 밀지 않음 */
#gameCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#protoTag {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 14;
  font-size: 12px;
  color: #666;
  pointer-events: none;
}

#statusBar {
  padding: 0 0 4px;
}

.stat {
  display: inline;
}

.stat span {
  color: #666;
}

.stat b {
  margin: 0 10px 0 3px;
  font-weight: normal;
}

/* 네 귀퉁이에 앉는 사람 판 */
.seatBox {
  position: absolute;
  z-index: 8;
  width: 214px;
}

#seatTL { top: 24px; left: 8px; }
#seatBL { bottom: 24px; left: 8px; }
#seatTR { top: 8px; right: 8px; }
#seatBR { bottom: 8px; right: 8px; }

.playerRow {
  padding: 2px 4px;
  background: #fff;
  line-height: 1.4;
}

.prowTop {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.prowTop .pname {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.prowBot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  color: #666;
}

/* 차례인 사람은 굵기로만 구분 */
.playerRow.active {
  font-weight: bold;
}

.playerRow.dead {
  color: #999;
}

.playerRow.dead .pname {
  text-decoration: line-through;
}

/* 자리 번호 */
.chip {
  flex: none;
  min-width: 16px;
}

.pname {
  display: inline;
}

.pmeta {
  white-space: nowrap;
}

.pips .pip {
  margin-left: 5px;
}

.pcash {
  white-space: nowrap;
}

#actions {
  margin-top: 4px;
}

/* 좌우 가운데 세로 줄 */
#leftCol,
#rightCol {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 252px;
  max-height: 80vh;
}

#leftCol { left: 8px; transform: translateY(-50%); }
#rightCol { right: 8px; transform: translateY(-50%); }

#leftCol[hidden],
#rightCol[hidden] {
  display: none;
}

#dicePop {
  width: 344px;
  max-height: 100%;
  overflow: hidden auto;
  padding: 8px;
  background: #fff;
  text-align: center;
}

#dicePop[hidden] {
  display: none;
}

#dicePop.clickable {
  cursor: pointer;
}

/* 굴리는 중이라는 표시만 남김 */
@keyframes dieShake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, -3px); }
  50%  { transform: translate(3px, 1px); }
  75%  { transform: translate(-1px, 3px); }
  100% { transform: translate(0, 0); }
}

.die.shaking {
  animation: dieShake 0.24s linear infinite;
}

#die1.shaking {
  animation-delay: -0.12s;
  animation-duration: 0.2s;
}

#diceBtns {
  margin-top: 8px;
}

#diceBtns[hidden] {
  display: none;
}

#diceTitle {
  margin: 2px 0 8px;
  font-size: 15px;
  font-weight: normal;
}

#diceNote {
  margin-top: 6px;
  color: #666;
}

#diceNote[hidden] {
  display: none;
}

.diceRow {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.die {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 56px;
  height: 56px;
  padding: 6px;
  border: 1px solid #000;
  background: #fff;
}

.die.blank {
  background: #fff;
}

.die .pip {
  width: 9px;
  height: 9px;
  align-self: center;
  justify-self: center;
  background: #000;
}

.diceTotal {
  margin-top: 6px;
}

.diceTotal[hidden] {
  display: none;
}

.diceTotal b {
  margin: 0 4px;
  font-weight: normal;
}

.act,
.mini,
.toggle {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.act:disabled {
  cursor: default;
}

.act {
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 3px;
}

.act[hidden] {
  display: none;
}

#waiting {
  padding: 2px 0;
  color: #666;
}

#waiting[hidden] {
  display: none;
}

/* 안내판, 주사위, 고르는 창이 판 가운데에 섬 */
#centerStack {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  pointer-events: none;
}

#centerStack #choice,
#centerStack #dicePop {
  flex: 0 1 auto;
  min-height: 0;
  pointer-events: auto;
}

#banner {
  max-width: 70%;
  padding: 4px 8px;
  background: #fff;
}

#banner[hidden] {
  display: none;
}

#bannerWho {
  margin-right: 6px;
}

#bannerWho[hidden] {
  display: none;
}

#choice {
  width: 344px;
  max-height: 100%;
  overflow: hidden auto;
  padding: 8px;
  background: #fff;
}

#choice[hidden] {
  display: none;
}

#choiceTitle {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: normal;
}

#choiceLines div {
  display: flex;
  justify-content: space-between;
}

#choiceBtns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* 봇 속도와 멈춤, 규칙 버튼 */
#pace {
  margin: 5px 0;
}

.mini {
  margin-right: 2px;
}

/* 켜진 상태를 굵기로만 표시 */
.mini.on {
  font-weight: bold;
}

/* 돈이 바뀌면 잠깐 뜨는 숫자 */
.flash {
  margin-left: 4px;
}

/* 오른쪽 줄에 붙는 기록 */
#logWrap {
  height: 40vh;
  overflow-y: auto;
}

#log {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}

#log li {
  padding: 0;
}

#log li b {
  margin-right: 4px;
  font-weight: normal;
}

#log li.ev-turn {
  margin-top: 5px;
}

#log li.ev-bust,
#log li.ev-win {
  font-weight: bold;
}

/* 칸을 눌렀을 때 뜨는 상세 정보 */
#tileInfo {
  max-height: 40vh;
  overflow: auto;
  margin-bottom: 8px;
  padding: 0 0 4px;
}

#tileInfo[hidden] {
  display: none;
}

#tileInfo h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: bold;
}

#tileInfo table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#tileInfo td {
  border: 0;
  padding: 1px 0;
  overflow-wrap: break-word;
  vertical-align: top;
}

#tileInfo td:first-child {
  width: 42%;
  color: #666;
}

#tileInfo .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

#tileInfo .btns .act {
  width: auto;
  flex: 1 1 45%;
  margin: 0;
}

/* 규칙과 로비 같은 덮개 화면 */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 35%);
}

.overlay[hidden] {
  display: none;
}

.panel {
  position: relative;
  width: 700px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 16px;
  background: #fff;
}

.panel h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.panel .sub {
  margin: 0 0 10px;
}

.panel ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

.panel .act {
  margin-top: 12px;
}

.seatRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.seatRow .chip {
  padding: 0 4px;
}

.seatRow > div:nth-child(2) {
  flex: 1;
}

#finalStanding {
  line-height: 1.6;
}

.mini[hidden] {
  display: none;
}

.seatWho.me {
  font-weight: bold;
}

.seatWho.empty {
  color: var(--pencil, #888);
}

#shareBox {
  margin-top: 12px;
}

.shareLabel {
  font-size: 0.9em;
  margin-bottom: 4px;
}

.shareRow {
  display: flex;
  gap: 6px;
}

#shareLink {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  font: inherit;
  font-size: 0.85em;
  border: 1px dashed var(--pencil, #888);
  background: var(--paper-lit, #fff);
  color: var(--ink, #222);
}

#lobbyNote {
  margin-top: 10px;
  min-height: 1.4em;
  color: var(--pencil, #888);
}

@media (max-width: 1180px) {
  .seatBox { width: 182px; }
  #leftCol, #rightCol { width: 212px; }
}

@media (max-width: 880px) {
  #logWrap { display: none; }
}

/* ---------------------------------------------------------------
   손맛. 갱지 쪽지, 자 없이 그은 테두리, 삐뚤어진 글씨
   --------------------------------------------------------------- */

:root {
  --paper: #f4f1e6;
  --paper-lit: #fbf9f2;
  --ink: #2c2b31;
  --pencil: #6f6a5c;
}

/* 자 없이 그은 네모. 모서리마다 휘어 있음 */
.seatBox,
#leftCol,
#rightCol,
#dicePop,
#choice,
#banner {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 225px 14px 255px 16px / 16px 245px 14px 235px;
  background: var(--paper);
  /* 책상 위에 종이 쪽지를 얹어둔 것처럼 옅은 그림자 */
  box-shadow: 2px 3px 0 rgb(70 60 40 / 7%), 5px 7px 12px rgb(70 60 40 / 24%);
}

/* 종이 한 장을 더 대고 그은 것처럼 테두리를 두 번 긋는 자국 */
.seatBox::after,
#leftCol::after,
#rightCol::after,
#dicePop::after,
#choice::after {
  content: "";
  position: absolute;
  inset: 2px 3px 4px 2px;
  border: 1px solid rgb(44 43 49 / 40%);
  border-radius: 14px 235px 16px 245px / 225px 16px 245px 14px;
  pointer-events: none;
}

.seatBox, #leftCol, #rightCol { position: absolute; }

#protoTag {
  top: 10px;
  left: 14px;
  padding: 2px 8px;
  transform: rotate(-2.4deg);
  color: #4a4234;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgb(255 255 255 / 25%);
}

/* 네 귀퉁이 사람 판과 좌우 세로 줄은 종이 쪽지로 */
#statusBar,
#tileInfo,
#logWrap,
#actions {
  position: relative;
}

.seatBox {
  padding: 4px 6px;
  transform: rotate(-0.8deg);
}

#seatTL { top: 46px; }

#seatTR, #seatBL { transform: rotate(1deg); }


.playerRow {
  padding: 3px 5px;
  border-bottom: 1px dashed rgb(111 106 92 / 45%);
  background: none;
  line-height: 1.45;
}

.playerRow:last-child { border-bottom: 0; }

.playerRow.dead { color: #9d9684; }

/* 자리 번호는 손으로 그린 동그라미 안에 */
.chip {
  display: inline-block;
  min-width: 20px;
  padding: 0 4px;
  border: 2px solid currentcolor;
  border-radius: 48% 52% 55% 45% / 55% 45% 52% 48%;
  text-align: center;
  transform: rotate(-3deg);
}

#leftCol,
#rightCol {
  padding: 6px;
  transform: translateY(-50%) rotate(-0.9deg);
}

#rightCol { transform: translateY(-50%) rotate(1.1deg); }

#statusBar {
  padding: 2px 2px 6px;
  border-bottom: 2px solid rgb(44 43 49 / 55%);
  border-radius: 0 0 60% 40% / 0 0 14px 12px;
}

.stat span { color: var(--pencil); }

.stat b { font-weight: bold; }

#waiting, #diceNote, .prowBot, #tileInfo td:first-child, #log li b {
  color: var(--pencil);
}

/* 가운데에 뜨는 쪽지들 */
#dicePop {
  transform: rotate(-1.4deg);
}

#choice {
  transform: rotate(1.2deg);
}

#banner {
  padding: 5px 12px;
  transform: rotate(-0.8deg);
  background: var(--paper-lit);
}

#tileInfo {
  margin-bottom: 8px;
  padding: 6px 4px;
  border-bottom: 1px dashed rgb(111 106 92 / 55%);
}

/* 버튼도 손으로 네모를 그려 글씨를 넣은 모양 */
.act,
.mini,
.toggle {
  border: 2px solid var(--ink);
  border-radius: 225px 14px 255px 16px / 16px 245px 14px 235px;
  background: var(--paper-lit);
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.act {
  padding: 4px 6px;
  transform: rotate(-0.5deg);
}

.act.primary {
  border-width: 3px;
  font-weight: bold;
}

.act:hover:not(:disabled),
.mini:hover,
.toggle:hover {
  background: #fffdf6;
}

.act:active:not(:disabled) {
  transform: rotate(-0.5deg) translate(1px, 1px);
}

.act:disabled {
  border-color: rgb(44 43 49 / 35%);
  color: #9d9684;
  cursor: default;
}

.mini,
.toggle {
  padding: 2px 7px;
  border-width: 2px;
  border-radius: 18px 200px 20px 190px / 190px 20px 200px 18px;
  transform: rotate(0.7deg);
}

.mini.on {
  background: #e8e1c8;
  font-weight: bold;
}

/* 주사위도 손으로 그린 네모에 동그란 점 */
.die {
  width: 58px;
  height: 58px;
  border: 2.5px solid var(--ink);
  border-radius: 22% 18% 24% 16% / 18% 24% 16% 22%;
  background: var(--paper-lit);
  box-shadow: 2px 3px 0 rgb(70 60 40 / 10%);
  transform: rotate(-3deg);
}

#die1 { transform: rotate(4deg); }

.die.blank { background: var(--paper); }

.die .pip {
  width: 10px;
  height: 10px;
  border-radius: 52% 48% 45% 55% / 48% 55% 45% 52%;
  background: var(--ink);
}

/* 자리 표시 점은 색연필로 찍은 동그라미 */
.pips .pip {
  display: inline-block;
  padding: 0 3px;
  border-bottom: 2px solid currentcolor;
}

/* 덮개 화면도 종이 위에 얹은 종이 */
.overlay {
  background: rgb(60 50 30 / 45%);
}

.panel {
  padding: 20px 22px;
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--paper);
  box-shadow: 4px 6px 0 rgb(40 32 18 / 10%), 8px 12px 22px rgb(30 24 12 / 35%);
  transform: rotate(-0.6deg);
}

.panel h2 {
  font-size: 22px;
}

.panel .sub {
  color: var(--pencil);
}

/* 규칙 종이는 위쪽에 테이프 조각을 붙여서 판에 붙여둔 것처럼 */
#rules .panel {
  transform: rotate(0.7deg);
}

#rules .panel::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 118px;
  height: 36px;
  border: 1px solid rgb(196 182 144 / 80%);
  border-top-style: dashed;
  border-bottom-style: dashed;
  background: linear-gradient(
    115deg,
    rgb(240 235 216 / 90%) 0%,
    rgb(226 220 196 / 82%) 45%,
    rgb(240 235 216 / 90%) 100%
  );
  box-shadow: 0 2px 5px rgb(40 32 18 / 35%);
  transform: translateX(-50%) rotate(-4deg);
}

#rules .panel ol li {
  margin-bottom: 4px;
}

#lobby .panel { transform: rotate(-1deg); }

.seatRow {
  border-bottom: 1px dashed rgb(111 106 92 / 45%);
}

@media (max-width: 880px) {
  #protoTag { font-size: 13px; }
}

/* 판 한가운데 뜨는 쪽지는 크게. 눈이 제일 오래 머무는 자리라서 */
#dicePop,
#choice {
  width: 430px;
  padding: 14px 16px;
}

#diceTitle,
#choiceTitle {
  margin-bottom: 10px;
  font-size: 19px;
}

.diceRow {
  gap: 20px;
}

.die {
  width: 76px;
  height: 76px;
  padding: 9px;
}

.die .pip {
  width: 13px;
  height: 13px;
}

.diceTotal,
#diceNote,
#choiceLines {
  font-size: 17px;
}

.diceTotal b {
  font-size: 21px;
  font-weight: bold;
}

#dicePop .act,
#choice .act {
  padding: 8px;
  font-size: 17px;
}

#choiceBtns .act,
#diceBtns .act {
  margin: 6px 0 0;
}

#banner {
  padding: 7px 16px;
  font-size: 17px;
}