/* 홈 테트리스 B안 — 스코어시트 (2026-10-13). js/home-tetris.js 공유(data-skin="sheet"). 토큰은 index.php :root 공유
   원칙: 패널·카드 없음. 종이 위에 먹선 판 하나, 글자는 상자 없이 기준선 정렬, 기록은 점선 리더 장부 */
/* 섹션 띠 — 내 도구(종이) / 테트리스(한 톤 어두운 종이 전폭 띠 + 위아래 가는 선) / 모션 템플릿(종이) */
.arcade{--rule:#7a6b51; /* 진한 선 색 (2026-10-14 대장님 지정) */
margin-top:56px;padding:52px 0 64px;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.arcade .ar-inner{padding:0 40px}
@media(max-width:760px){.arcade .ar-inner{padding:0 22px}.arcade{margin-top:40px;padding:40px 0 48px}}

.ar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ar-head h2{font-weight:600;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.3}
.ar-sub{margin-top:8px;color:var(--ink-mute);font-size:14px;word-break:keep-all}
.ar-tools{display:flex;align-items:center;gap:14px}
.ar-best{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-mute);display:inline-flex;align-items:center;gap:8px}
.ar-best b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ar-link{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--ink-mute);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.ar-link:hover{color:var(--ink)}
.ar-link[hidden]{display:none}

/* 게임 탭 — 제목 아래 먹선 한 줄 위에 글자 탭 */
.ar-tabs{margin-top:22px;display:flex;gap:22px;border-bottom:1px solid var(--line)}
.ar-tabs button{border:0;background:none;padding:0 2px 10px;font:inherit;font-size:14px;font-weight:600;color:var(--ink-mute);cursor:pointer;position:relative;transition:color .15s ease}
.ar-tabs button:hover{color:var(--ink)}
.ar-tabs button.is-on{color:var(--ink)}
.ar-tabs button.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rule)}

/* 시트: [다른 게임 미니 순위] [게임: 판 + 띠] [장부] — 가운데 모음, 테두리 없음 */
.ar-sheet{margin-top:32px;display:grid;grid-template-columns:200px auto 320px;gap:0 44px;justify-content:center;align-items:start}
.arcade.is-wide .ar-sheet{grid-template-columns:240px auto 380px;gap:0 56px}
.ar-game{display:flex;gap:0 24px;align-items:start}
.ar-game[hidden]{display:none}
.arcade.is-wide .ar-game{gap:0 28px}

/* 왼쪽 미니 순위표 — 지금 하는 게임을 뺀 나머지 게임, 상위 5 */
.ar-minis{display:flex;flex-direction:column;gap:28px;padding-top:0}
.ar-mini h4{margin:0 0 10px;height:30px;line-height:30px;border-bottom:1px solid var(--rule);font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline}
.ar-mini h4 .ar-link{font-size:12px;line-height:1}
.ar-mini ol{list-style:none;margin:0;padding:0}
.ar-mini li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:8px 2px;border-bottom:1px solid var(--line-soft);font-size:13px}
.ar-mini li:last-child{border-bottom:0}
.ar-mini .ar-rk{font-family:var(--mono);font-size:11px;color:var(--ink-mute);text-align:right}
.ar-mini li:first-child .ar-rk{color:var(--accent)}
.ar-mini .ar-nm-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.ar-mini .ar-sc{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.ar-mini .ar-rec-empty{display:block;padding:10px 2px;font-size:12.5px;color:var(--ink-mute)}

/* 판 열은 판 폭에 딱 맞춤(각주가 열을 넓히지 않게) */
.ar-main{width:min-content}

/* 판 위 한 줄 수치 */
.ar-topline{display:flex;flex-wrap:nowrap;align-items:baseline;gap:4px 22px;height:30px;line-height:30px;margin:0 0 10px} /* 먹선 없음 — 판 테두리가 있어 선이 겹치면 어수선(2026-10-14) */
.ar-topline .ar-stat{display:inline-flex;align-items:baseline;gap:7px}
.ar-topline .lb{font-size:12px;color:var(--ink-mute)}
.ar-topline .v{font-size:16px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* 목숨: 테라코타 작은 원 */
.ar-lives{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.ar-lives i{display:block;width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* 콤보 표시기 — 연속으로 줄을 지우는 동안만 */
.ar-combo{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:#d9933f}
.ar-combo[hidden]{display:none}
.ar-combo.pulse{animation:ar-combo .4s cubic-bezier(.2,.8,.25,1)}
@keyframes ar-combo{0%{transform:scale(1.35)}100%{transform:none}}
.ar-stats-line{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.04em;color:var(--ink-mute)}

/* 판: 얇은 먹선, 거의 각진 모서리 */
.ar-stage{position:relative;border:1px solid var(--rule);border-radius:2px;background:#faf8f4;overflow:hidden}
.ar-stage canvas{display:block}
/* 바로 내리기 손맛 — 판이 4px 내려앉았다 튕겨 돌아옴 (ms-feel-spec: 과장값·ease-out 220ms) */
.ar-stage.is-thud{animation:ar-thud .22s cubic-bezier(.2,.8,.25,1)}
@keyframes ar-thud{0%{transform:none}30%{transform:translateY(4px)}100%{transform:none}}
/* 테트리스·T-스핀·퍼펙트 때 먹선이 잠깐 굵어짐 */
.ar-stage.is-big{animation:ar-big .3s ease-out}
@keyframes ar-big{0%{box-shadow:0 0 0 3px var(--ink) inset}100%{box-shadow:0 0 0 0 transparent inset}}
@media(prefers-reduced-motion:reduce){.ar-stage.is-thud,.ar-stage.is-big{animation:none}}
/* 점수 숫자 굴러갈 때 폭이 흔들리지 않게 */
.ar-topline .v{min-width:3ch}
.ar-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:rgba(250,248,244,.9)}
.ar-overlay[hidden]{display:none}
.ar-overlay strong{font-size:18px;font-weight:600;letter-spacing:-.015em}
.ar-overlay p{font-size:13px;line-height:1.6;color:var(--ink-mute);word-break:keep-all}
.ar-overlay p[hidden],.ar-overlay .ar-score-line[hidden]{display:none}
.ar-overlay .ar-score-line{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ar-overlay .ar-score-line em{font-style:normal;color:var(--accent)}
.ar-overlay .pill{height:42px;padding:0 20px;font-size:13.5px;margin-top:4px}
.ar-overlay .pill[hidden]{display:none}
.ar-record{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.ar-record[hidden]{display:none}
.ar-record input{width:100%;max-width:170px;height:36px;padding:0 4px;border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);font-family:var(--sans);font-size:15px;text-align:center;outline:0;border-radius:0}
.ar-record input::placeholder{color:var(--ink-mute)}
.ar-record input#arSite,.ar-record input#arPr{font-size:13px;height:32px;max-width:200px}
.ar-record input#arSite{margin-top:4px}
.ar-form-note{font-size:11px;line-height:1.5;color:var(--ink-mute);word-break:keep-all;margin:0}
.ar-record input:focus{border-bottom-color:var(--accent)}

/* 판 아래 사용법 — 항목(회색) | 키캡, 두 쌍씩 한 줄 */
.ar-keys{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;font-size:11.5px;color:var(--ink-mute);line-height:1.4}
.ar-keys dt{margin:0;white-space:nowrap}
.ar-keys dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-width:0}
.ar-keys dd.txt{grid-column:2/-1;color:var(--ink-soft);word-break:keep-all}
.ar-keys dd:not(.txt){white-space:nowrap}
.ar-keys dd i{font-style:normal;margin:0 3px;color:var(--ink-mute)}
.ar-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:#fff;font-family:var(--mono);font-size:10px;color:var(--ink);line-height:1}
.arcade.is-wide .ar-keys{grid-template-columns:auto 1fr auto 1fr;font-size:12.5px;gap:8px 14px}
.arcade.is-wide .ar-keys kbd{min-width:20px;height:20px;font-size:11px}
.ar-footnote{display:none}

/* 보관·다음 띠 — 상자 없이 글자+조각 */
.ar-strip{display:flex;flex-direction:column;gap:14px;padding-top:40px}
.ar-strip > div{border:1px solid var(--rule);border-radius:2px;background:#faf8f4;padding:7px 8px 9px;min-width:82px}
.ar-strip .lb{font-size:11px;color:var(--ink-mute);margin-bottom:7px;letter-spacing:.02em}
.ar-strip canvas{display:block;margin:0 auto}
.arcade.is-wide .ar-strip > div{min-width:98px;padding:8px 9px 10px}

/* 장부 — 인쇄된 순위표: 점선 리더 없이 행 여백 + 가는 구분선, 점수 아래 날짜 */
.ar-ledger{padding-top:0}
.ar-ledger h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;height:30px;line-height:30px;margin:0 0 10px;padding-bottom:0;border-bottom:1px solid var(--rule);font-size:13px;font-weight:600;color:var(--ink)}
.ar-ledger h3 > span:last-child{font-size:11.5px;font-weight:400;color:var(--ink-mute);letter-spacing:0}
.ar-records{list-style:none;margin:0;padding:0}
.ar-records li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:12px;align-items:start;padding:11px 4px 11px 2px;border-bottom:1px solid var(--line-soft);font-size:14px;line-height:1.35;transition:background .2s ease}
.ar-records li:last-child{border-bottom:0}
.ar-records li.is-new::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:2px;background:var(--accent)}
.ar-records li.is-new{animation:ar-new .9s ease}
@keyframes ar-new{0%{background:rgba(183,92,42,.14)}100%{background:transparent}}
.ar-records .ar-rk{font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);text-align:right;padding-top:2px;font-variant-numeric:tabular-nums}
.ar-records li:nth-child(-n+3) .ar-rk{color:var(--accent);font-weight:500}
.ar-records .ar-nm{min-width:0;display:flex;flex-direction:column;gap:3px;font-weight:500;letter-spacing:-.01em}
.ar-records .ar-nm-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-records .ar-nm a{color:inherit;display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;text-decoration:none;transition:color .15s ease}
.ar-records .ar-nm a:hover{color:var(--accent)}
.ar-records .ar-nm a svg{flex:none;width:11px;height:11px;color:var(--ink-mute);opacity:.8}
.ar-records .ar-nm a:hover svg{color:var(--accent);opacity:1}
.ar-records .ar-pr{display:block;font-size:11.5px;font-weight:400;color:var(--ink-mute);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 1위 특권: 소개를 세 줄까지 그대로 보여 줌 (다른 순위는 한 줄 말줄임), 이름도 한 단계 크게 */
.ar-records li:first-child .ar-nm{font-size:15px}
.ar-records li:first-child .ar-pr{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere;text-overflow:clip}
.arcade.is-wide .ar-records li:first-child .ar-nm{font-size:16px}
/* 긴 이름·소개: 마우스를 올리면 그 줄이 펼쳐져 전부 보임 (툴팁에도 전문) */
.ar-records li:hover .ar-nm-t,.ar-records li:hover .ar-pr{white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;overflow-wrap:anywhere;display:block;-webkit-line-clamp:unset}
.ar-records .ar-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.ar-records .ar-sc{font-family:var(--mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:.01em}
.ar-records .ar-dt{font-family:var(--mono);font-size:10px;color:var(--ink-mute);letter-spacing:.02em}
.ar-records .ar-ln{display:none}
.ar-records .ar-rec-empty{display:block;font-size:13px;color:var(--ink-mute);line-height:1.6;word-break:keep-all;padding:14px 2px}
.ar-ledger-note{margin:16px 0 0;font-size:11px;color:var(--ink-mute);line-height:1.5;word-break:keep-all;text-align:center}

/* 터치 조작 — 상자 없이 먹선 */
.ar-touch{display:none;margin-top:18px;grid-template-columns:repeat(3,64px);gap:10px;justify-content:center;grid-column:1/-1}
.ar-touch button{height:48px;border-radius:2px;border:1px solid var(--rule);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}
.ar-touch button:active{background:var(--rule);color:var(--paper)}
.ar-touch button svg{width:22px;height:22px}
.ar-dpad{grid-template-columns:repeat(3,56px);gap:8px}
.ar-dpad span{display:block}
@media(hover:none),(max-width:760px){.ar-touch{display:grid}}

@media(max-width:760px){
  .ar-tabs{gap:18px;margin-top:16px}
  .ar-sheet{grid-template-columns:1fr;gap:0;justify-items:center;margin-top:22px}
  .ar-game{flex-direction:column;align-items:center;width:100%}
  .ar-main{width:auto;display:flex;flex-direction:column;align-items:center}
  .ar-topline{width:100%;justify-content:center;height:auto;line-height:1.4;margin-bottom:8px}
  .ar-strip > div{border:0;background:transparent;padding:0;min-width:0}
  .ar-strip{order:-1;flex-direction:row;gap:28px;padding:0 0 12px;align-items:flex-start}
  .ar-keys{display:none}
  .ar-ledger{width:100%;margin-top:22px}
  .ar-minis{order:3;width:100%;padding-top:0;margin-top:28px}
}