/* 기획서 9.UI: 휴대용 게임기 본체, 액정 베젤, 각진 버튼 */
:root { --aqua:#9ad0d2; --ink:#163f44; --pale:#e6f4f2; --yellow:#ffdf57; background:var(--aqua); }
body { background:#9ad0d2; }
#app { background:var(--aqua); }
button { border-radius:0; }




.screen { min-height:calc(100svh - 36px - env(safe-area-inset-top)); }
.title-screen { padding:0 6% max(24px,env(safe-area-inset-bottom)); }
.title-logo { margin-top:clamp(50px,20svh,190px); width:280px; max-width:88%; aspect-ratio:1; background:url('assets/title-pixel-slide-transparent.png') center/contain no-repeat; }
.title-logo > span { display:none; }
.pixel-word { display:flex; }
.pixel-word i { font-style:normal; color:#00acc3; }
.pixel-word i:nth-child(2) { color:#14bba5; }
.pixel-word i:nth-child(3) { color:#ffd146; }
.pixel-word i:nth-child(4) { color:#ff615d; }
.pixel-word i:nth-child(5) { color:#fa74ad; }
.start-area { margin:40px 0 7svh; }
.start-slider { border:3px solid var(--ink); border-radius:0; box-shadow:5px 5px 0 #5f999e; background:#e6f4f2; }
.start-caption { font-size:clamp(21px,6vw,29px); font-weight:700; letter-spacing:normal; line-height:1.3; text-shadow:2px 2px 0 #285e65; }
.title-footnote { display:none; }
.icon { width:44px; height:44px; border:2px solid var(--ink); background:#f5f4e8; color:var(--ink); box-shadow:3px 4px 0 var(--ink); font-size:29px; font-weight:700; line-height:1; }
/* SVG의 형태에 현재 버튼 색을 적용하여 글꼴에 따른 기호 차이를 없앱니다. */
.ui-icon { display:inline-block; width:24px; height:24px; flex-shrink:0; vertical-align:middle; fill:currentColor; pointer-events:none; }
.ui-left { transform:rotate(180deg); }
.start-handle .ui-icon { width:20px; height:20px; }
.action.compact .ui-icon { width:28px; height:28px; }
.sound-options .ui-icon { display:block; margin:0 auto 4px; }
.stage-header { padding:14px 18px 6px; display:grid; grid-template-columns:44px 1fr 44px; gap:12px; text-align:center; }
.stage-header h1 { min-width:0; font-size:24px; font-weight:700; line-height:1.3; letter-spacing:.02em; overflow-wrap:anywhere; }
#collection-count { display:block; margin:6px auto 0; width:fit-content; background:none; padding:0; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.stage-instruction { margin:10px 12px 16px; min-height:18px; font-size:12px; line-height:1.5; }
.stage-grid { width:min(100%,calc((100svh - 245px) * .8)); margin:0 auto; padding:0 16px 10px; gap:20px 16px; }
.stage-tile {
  --tile-frame:#d7edfa; --tile-shadow:#8fb4cd;
  border:0; border-radius:14px; padding:9px; background:none; box-shadow:none;
  isolation:isolate;
}
/* 둥근 프레임과 얕은 아래쪽 그림자로 수집 배지처럼 표현합니다. */
.stage-tile::before, .stage-tile::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  border-radius:inherit;
}
.stage-tile::before { inset:2px 0 -4px; background:var(--tile-shadow); }
.stage-tile::after { inset:0; border:9px solid var(--tile-frame); background:#f5f8f6; }
.stage-tile canvas { border-radius:6px; }
.stage-tile.cleared { box-shadow:none; }
.stage-tile.current { --tile-frame:#ffe65a; --tile-shadow:#d4ad12; outline:none; box-shadow:none; }
.stage-tile.locked { --tile-frame:#e2e5e3; --tile-shadow:#afb9b8; opacity:1; }
.stage-tile:not(:disabled):active { transform:translateY(2px); box-shadow:none; }
.stage-tile:not(:disabled):active::before { bottom:-2px; }
.stage-tile:focus-visible { outline:3px solid #2864bd; outline-offset:4px; }
.stage-tile.locked canvas { opacity:.55; }






.tile-number { right:4px; bottom:3px; border:1px solid #83a5b5; border-radius:0; font-size:10px; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums; min-width:18px; padding:0 2px; color:#345864; background:#f4ffff; }
.page-nav { display:flex; justify-content:center; align-items:center; gap:18px; margin:14px 0 20px; color:white; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.page-nav button { border:0; background:none; color:#fff; min-width:44px; min-height:44px; font-size:26px; }
.page-nav button:disabled { opacity:.25; }
.game-header { padding:14px 18px 8px; gap:12px; }
.game-header > div { min-width:0; }
.game-header h1 { font-size:18px; font-weight:700; line-height:1.3; letter-spacing:normal; overflow-wrap:anywhere; }
.game-header .eyebrow { font-size:11px; font-weight:600; letter-spacing:.06em; }
.reference-area { gap:16px; padding:12px 12px 18px; }
.reference-frame { border:2px solid #12383d; border-radius:0; background:#29565a; padding:12px; box-shadow:0 5px 0 #bfdeda; }
#target-board { border:2px solid #12383d; }
.play-info { padding:4px 14px 12px; }
#board-size { font-size:12px; opacity:.7; }
#move-label { border:2px solid var(--ink); background:#2e6064; color:#fffef1; border-radius:0; padding:5px 10px; }
#move-label.urgent { color:#673e25; background:#ffe179; }
.board-wrap { max-width:calc(100% - 16px); box-shadow:0 0 0 6px #29565a; outline:2px solid #12383d; }
.play-hint { font-size:12px; font-weight:400; line-height:1.5; }
dialog { border:3px solid var(--ink); border-radius:0; padding:22px 18px; width:min(88vw,380px); max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); background:#fafffd; box-shadow:6px 6px 0 #28565b; }
dialog::backdrop { background:rgb(15 48 53 / 62%); }
dialog h2 { font-size:21px; margin:5px 0 18px; }
dialog[data-kind="clear"] h2 { letter-spacing:.02em; }
dialog[data-kind="clear"], dialog[data-kind="collection"] { animation:retro-appear .45s ease-out; }
@keyframes retro-appear { from { opacity:0; } to { opacity:1; } }
.action { border:2px solid var(--ink); border-radius:0; background:#e8f3ef; min-height:48px; padding:10px; box-shadow:4px 4px 0 var(--ink); }
.action.primary { background:#78b9d4; box-shadow:4px 4px 0 var(--ink); }
.action.reward { background:#ffe268; color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.action.quiet { border:0; box-shadow:none; }
.action.compact { width:68px; min-height:50px; align-self:center; font-size:26px; padding:6px; }
.collection-picture { width:min(100%,220px,32svh); height:auto; aspect-ratio:1; border:3px solid var(--ink); box-shadow:0 0 0 5px #e2f3f3; margin:16px auto 20px; }
dialog .picture-name { font-size:18px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; margin:14px 0; }
.sound-options { display:flex; align-items:center; justify-content:center; gap:24px; min-height:min(28svh,200px); }
.sound-options button { white-space:pre-line; min-width:92px; min-height:78px; border:3px solid var(--ink); background:#f5f4e8; color:var(--ink); box-shadow:4px 4px 0 #28565b; font-weight:600; line-height:1.5; }
.sound-options button[aria-pressed="false"] { background:#ccd8d3; color:#647879; box-shadow:1px 1px 0 #28565b; }


@media (orientation:portrait) and (max-height:750px) {
  .game-header { padding:7px 14px 5px; }
  .reference-area { padding:4px 12px 10px; }
  .reference-frame { width:min(49vw,18svh,230px); padding:8px; }
  .play-info { padding:2px 12px 8px; }
}
@media (orientation:landscape) and (max-height:500px) {
  .game-header { padding:4px; gap:6px; }
  .game-header h1 { font-size:14px; }
  .reference-area { gap:10px; padding:8px 4px; }
  .reference-frame { width:min(20svh,90px); padding:5px; }
  .play-info { font-size:9px; padding:5px 2px; }
  .stage-grid { width:100%; }
  .collection-picture { width:min(140px,30svh); }
  dialog { padding:12px 18px; }
  dialog h2 { margin:0 0 10px; font-size:18px; }
  dialog .picture-name { margin:8px 0; font-size:14px; }
  .modal-actions { margin-top:12px; }
  .sound-options { min-height:100px; }
}
@media (prefers-reduced-motion:reduce) {
  dialog[data-kind="clear"], dialog[data-kind="collection"] { animation:none; }
}