/* SPDX-License-Identifier: GPL-3.0-or-later */
:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:#0c1319;
  color:#f6f3ec;
}
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#0c1319; color:#f6f3ec; }
button, a { font:inherit; }
button { color:inherit; }
button:focus-visible, a:focus-visible { outline:2px solid #8fd3f4; outline-offset:2px; }
#app { height:100dvh; width:100vw; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; padding:8px; }
.topbar { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:980px; width:100%; margin:0 auto; }
#title { margin:0; font-size:clamp(16px,2.5vw,22px); font-weight:780; letter-spacing:.01em; white-space:nowrap; }
.actions { display:flex; gap:6px; flex:0 0 auto; }
.actions button, #primary, .secondary-button, .icon-button {
  border:1px solid #53616d; background:#1b2a35; border-radius:9px; padding:7px 12px; cursor:pointer; min-height:34px;
}
.actions #audio, .actions #credits, .actions #lang { min-width:38px; padding-inline:9px; }
.actions button:active, #primary:active, .secondary-button:active, .icon-button:active, .touch button.pressed { transform:translateY(1px); background:#294150; }
.stage { min-height:0; display:grid; place-items:center; position:relative; }
.canvas-wrap { position:relative; width:min(100%, calc((100dvh - 118px) * 4 / 3), 960px); aspect-ratio:4/3; max-height:100%; container-type:size; container-name:board; }
canvas { display:block; width:100%; height:100%; border:1px solid #234f5d; border-radius:2px; background:#000; image-rendering:pixelated; image-rendering:crisp-edges; box-shadow:0 14px 40px rgba(0,0,0,.28); }
.overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(7,12,16,.60); border-radius:2px; backdrop-filter:blur(1px); }
.overlay[hidden] { display:none; }
.card { width:min(82%,430px); max-height:92%; overflow:auto; text-align:center; padding:20px; border:1px solid #53616d; border-radius:14px; background:rgba(19,31,40,.97); box-shadow:0 10px 40px rgba(0,0,0,.28); }
.card h2 { margin:0 0 8px; font-size:21px; }
.card p { margin:0 0 16px; line-height:1.4; font-size:14px; color:#d8e0e5; }
.card .answer-rule { margin:0 0 16px; padding:8px 10px; border:1px solid #53616d; border-radius:6px; background:rgba(8,16,22,.72); color:#f2f5f7; font-size:12px; line-height:1.35; }
#primary { min-width:120px; background:#25475a; position:sticky; bottom:0; box-shadow:0 0 0 6px rgba(19,31,40,.97); }
.controls { width:100%; max-width:980px; margin:0 auto; display:flex; justify-content:center; align-items:center; min-height:40px; }
#hint { margin:0; font-size:12px; color:#aebbc4; text-align:center; }
.touch { display:none; grid-template-columns:52px 52px 52px; grid-template-rows:42px 42px; gap:5px; touch-action:none; user-select:none; }
.touch button { border:1px solid #53616d; background:#1a2832; border-radius:10px; min-width:52px; min-height:42px; }
.touch [data-dir="UP"] { grid-column:2; grid-row:1; }
.touch [data-dir="LEFT"] { grid-column:1; grid-row:2; }
.touch [data-dir="DOWN"] { grid-column:2; grid-row:2; }
.touch [data-dir="RIGHT"] { grid-column:3; grid-row:2; }
.touch-buttons { display:none; grid-template-columns:44px 44px; grid-template-rows:26px 44px; gap:5px; touch-action:none; user-select:none; }
.touch-buttons button { border:1px solid #53616d; background:#1a2832; border-radius:50%; padding:0; font-weight:700; font-size:15px; }
.touch-buttons [data-btn="SELECT"] { grid-column:1 / 3; grid-row:1; border-radius:13px; font-size:10px; letter-spacing:.06em; }
.touch-buttons [data-btn="B"] { grid-column:1; grid-row:2; }
.touch-buttons [data-btn="A"] { grid-column:2; grid-row:2; }
.touch-buttons button.pressed { transform:translateY(1px); background:#294150; }

.credits-dialog { width:min(92vw,560px); max-height:min(82dvh,650px); padding:0; border:1px solid #53616d; border-radius:14px; color:#edf2f4; background:#13212b; box-shadow:0 24px 70px rgba(0,0,0,.55); }
.credits-dialog::backdrop { background:rgba(4,8,11,.72); backdrop-filter:blur(2px); }
.credits-card { padding:18px; overflow:auto; max-height:min(82dvh,650px); }
.credits-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.credits-heading h2 { margin:0; font-size:21px; }
.icon-button { padding:2px 10px; min-width:36px; font-size:24px; line-height:1; }
.credits-card p { margin:10px 0; line-height:1.42; color:#d6e0e5; font-size:14px; }
.credits-card a { color:#8fd3f4; }
.secondary-button { margin-top:6px; background:#1a2d39; }

@media (pointer:coarse), (max-width:700px) {
  #app { grid-template-rows:auto minmax(0,1fr) 91px; padding:6px; gap:5px; }
  .canvas-wrap { width:min(100%, calc((100dvh - 142px) * 4 / 3)); }
  .controls { justify-content:space-between; padding:0 4px; }
  #hint { display:none; }
  .touch { display:grid; }
  .touch-buttons { display:grid; }
  .topbar { min-height:32px; }
  .actions button { padding:6px 8px; min-height:32px; }
}
@media (max-width:430px) {
  #title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .topbar { justify-content:center; }
  .actions { width:100%; justify-content:center; }
}
@media (max-height:520px) and (orientation:landscape) {
  #app { grid-template-rows:auto minmax(0,1fr); }
  .controls { display:none; }
  .canvas-wrap { width:min(100%, calc((100dvh - 52px) * 4 / 3)); }
}

@media (max-height:520px) and (orientation:landscape) and (pointer:coarse) {
  #app { grid-template-rows:auto minmax(0,1fr) 72px; }
  .controls { display:flex; min-height:66px; padding:0; }
  .touch { display:grid; grid-template-columns:46px 46px 46px; grid-template-rows:32px 32px; gap:3px; }
  .touch button { min-width:46px; min-height:32px; border-radius:8px; padding:0; }
  .touch-buttons { grid-template-columns:36px 36px; grid-template-rows:20px 36px; gap:3px; }
  .touch-buttons button { font-size:13px; }
  .touch-buttons [data-btn="SELECT"] { font-size:9px; border-radius:10px; }
  .canvas-wrap { width:min(100%, calc((100dvh - 112px) * 4 / 3)); }
  .card { max-height:94%; padding:10px 12px; }
  .card h2 { font-size:17px; margin-bottom:4px; }
  .card p { font-size:12px; line-height:1.28; margin-bottom:8px; }
  .card .answer-rule { padding:5px 7px; font-size:11px; line-height:1.2; }
  #primary { min-height:30px; padding:5px 10px; }
}

/* The card is made smaller as the board gets lower, so that its text and its button fit without scrolling. */
@container board (max-height:360px) {
  .card { width:min(94%,520px); max-height:96%; padding:12px 14px; }
  .card h2 { font-size:18px; margin-bottom:5px; }
  .card p { font-size:13px; line-height:1.3; margin-bottom:10px; }
  .card .answer-rule { padding:6px 8px; font-size:11.5px; line-height:1.25; margin-bottom:10px; }
  #primary { min-height:32px; padding:5px 12px; }
}
@container board (max-height:290px) {
  .card { padding:8px 10px; }
  .card h2 { font-size:16px; margin-bottom:3px; }
  .card p { font-size:12px; line-height:1.24; margin-bottom:6px; }
  .card .answer-rule { padding:4px 6px; font-size:11px; line-height:1.18; margin-bottom:6px; }
  #primary { min-height:30px; padding:4px 10px; }
}
@container board (max-height:235px) {
  .card { padding:6px 8px; }
  .card h2 { font-size:14px; margin-bottom:2px; }
  .card p { font-size:11px; line-height:1.18; margin-bottom:4px; }
  .card .answer-rule { padding:3px 5px; font-size:10px; line-height:1.12; margin-bottom:4px; }
  #primary { min-height:26px; padding:3px 9px; }
}
@container board (max-height:215px) {
  .card { width:min(97%,520px); padding:4px 8px; }
  .card h2 { font-size:13px; margin-bottom:1px; }
  .card p { font-size:10.5px; line-height:1.14; margin-bottom:3px; }
  .card .answer-rule { padding:2px 4px; font-size:9.5px; line-height:1.1; margin-bottom:3px; }
  #primary { min-height:24px; padding:2px 8px; }
}

/* M31 clean-room title screen: NES-like composition without historical logo or art. */
.title-screen { position:absolute; inset:1px; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:#000; border-radius:1px; cursor:pointer; user-select:none; }
.title-screen[hidden] { display:none; }
.title-logo { display:flex; flex-direction:column; align-items:center; gap:1px; margin-top:-18px; font-family:"Courier New",ui-monospace,monospace; font-weight:900; font-size:clamp(25px,6.4vw,48px); line-height:.86; letter-spacing:.05em; color:#38d9f5; text-shadow:3px 0 #1769c2,-3px 0 #e64aa5; transform:scaleY(1.06); }
.title-logo span:last-child { color:#f7f4e8; text-shadow:3px 0 #e64aa5,-3px 0 #087f9c; }
.title-office { position:relative; width:170px; height:58px; margin:18px 0 12px; image-rendering:pixelated; }
.title-desk { position:absolute; left:24px; right:24px; bottom:11px; height:8px; background:#38d9f5; box-shadow:0 -3px 0 #f7f4e8,0 8px 0 -3px #e64aa5; }
.title-desk::before,.title-desk::after { content:""; position:absolute; top:8px; width:7px; height:24px; background:#1769c2; }
.title-desk::before { left:8px; } .title-desk::after { right:8px; }
.title-phone { position:absolute; left:38px; bottom:22px; width:25px; height:13px; background:#f4d445; box-shadow:5px -6px 0 -2px #f4d445,-3px -6px 0 -2px #f4d445; }
.title-phone::after { content:""; position:absolute; left:6px; top:5px; width:13px; height:4px; background:#000; }
.title-worker { position:absolute; right:40px; bottom:19px; width:20px; height:27px; background:#e34f55; box-shadow:0 -12px 0 -5px #f2b36f,0 -17px 0 -5px #f08a2d,-6px 17px 0 -6px #f7f4e8,6px 17px 0 -6px #f7f4e8; }
.title-start { border:0; border-radius:0; padding:5px 11px; min-height:0; background:transparent; color:#f4d445; font-family:"Courier New",ui-monospace,monospace; font-weight:800; font-size:clamp(14px,2vw,18px); letter-spacing:.08em; cursor:pointer; animation:titleBlink 1.05s steps(1,end) infinite; }
.title-start:focus-visible { outline:2px solid #38d9f5; outline-offset:3px; }
.title-start:disabled { color:#9fb3bd; animation:none; cursor:default; }
.title-hint,.title-restoration { margin:4px 0 0; font-family:"Courier New",ui-monospace,monospace; text-transform:uppercase; text-align:center; }
.title-hint { font-size:clamp(9px,1.3vw,11px); color:#9fb3bd; }
.title-restoration { position:absolute; bottom:10px; font-size:9px; color:#087f9c; letter-spacing:.08em; }
.title-screen.starting .title-logo { opacity:.75; }
.title-screen.starting .title-office { animation:titlePulse .18s steps(2,end) infinite; }
@keyframes titleBlink { 0%,54%{opacity:1} 55%,100%{opacity:.2} }
@keyframes titlePulse { 0%{transform:translateX(0)} 50%{transform:translateX(1px)} }
@media (max-height:520px) and (orientation:landscape) {
  .title-logo { margin-top:-6px; font-size:clamp(22px,8vh,36px); }
  .title-office { height:42px; margin:8px 0 5px; transform:scale(.82); }
  .title-restoration { bottom:5px; }
}