@font-face{font-family:Galmuri;src:url('../assets/fonts/Galmuri11-game.woff2') format('woff2');font-display:swap}@font-face{font-family:Galmuri9;src:url('../assets/fonts/Galmuri9-game.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;font-family:Galmuri,monospace;background:#202329;color:#b6babd}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 38%,#363b42,#1e2127 78%);display:grid;place-items:center}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:2px solid #f3bd65;outline-offset:4px}

/* Handheld body: a plastic shell with the screen in the middle and real controls either side. */
.console{width:min(1060px,calc(100% - 26px));margin:24px auto 16px}
.console-rim{background:linear-gradient(#3c424c,#2c313a 58%,#242930);border:1px solid #474e59;border-radius:24px 24px 38px 38px;padding:15px 20px 18px;box-shadow:0 28px 64px -20px #05070ad0,inset 0 1px 0 #646d7a,inset 0 -3px 0 #1a1e24}
.console-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 4px 13px}
.shoulder{font-size:9px;letter-spacing:2px;color:#98a1ac;background:linear-gradient(#545c68,#454c57);border-radius:9px 9px 3px 3px;padding:7px 20px 9px;box-shadow:inset 0 1px 0 #737c8a,0 2px 0 #1c2027}
.console-brand{font-size:11px;letter-spacing:3px;color:#aeb6c0;white-space:nowrap}
.console-brand small{font-size:7px;letter-spacing:2px;color:#7f8893;margin-left:7px}
.console-deck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"left screen right" "left system right";align-items:center;column-gap:20px;row-gap:12px}
.pad-left{grid-area:left}.pad-right{grid-area:right}.screen-zone{grid-area:screen}.system-controls{grid-area:system}
.console-rim,.console-rim button,#game{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pad-zone{display:grid;place-items:center}
.screen-zone{width:100%;min-width:0;max-width:max(300px,calc((100dvh - 340px)*1.5));margin-inline:auto}
.bezel{background:#1a1f26;border-radius:13px;padding:11px 13px 13px;box-shadow:inset 0 2px 9px #000a,0 1px 0 #4d545e}
.bezel-head{display:flex;align-items:center;gap:9px;padding:0 3px 8px;font-size:7px;letter-spacing:2px;color:#79828d}
.led{width:7px;height:7px;border-radius:50%;background:#e0584f;box-shadow:0 0 7px #e0584fcc}
.bezel-tag{margin-left:auto;color:#6d7681}
.game-frame{position:relative;width:100%;aspect-ratio:3/2;background:#080e14;border:4px solid #0d1318;border-radius:3px;box-shadow:inset 0 0 0 1px #2d343c;overflow:hidden}
#game{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;touch-action:none}
.game-actions{position:absolute;inset:0;pointer-events:none}
/* The CARD screen shows the shared card face (src/cards.css) over the canvas, in the space above the menu box. */
.card-layer{position:absolute;inset:0;pointer-events:none}
.card-view{position:absolute;left:50%;top:4%;height:70%;aspect-ratio:63/88;transform:translateX(-50%);pointer-events:auto}
.card-view[hidden]{display:none}
.card-view .tcg{width:100%}
.game-actions button{position:absolute;background:transparent;border:0;color:transparent;pointer-events:auto;padding:0;font-size:0;touch-action:manipulation}
.game-actions[data-list] button{touch-action:none}
.game-actions button:focus-visible{outline:2px dashed #ddb959;outline-offset:-3px}
.game-actions button:disabled{pointer-events:none}

.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);filter:drop-shadow(0 4px 1px #11151b88)}
.dpad button,.dpad span{background:#444b56;border:0;color:#aab3bf;border-radius:3px;font-size:16px;touch-action:none}
.dpad button:active{background:#667283;color:#e4e7eb}
.dpad [data-dir=up]{grid-row:1;grid-column:2}.dpad [data-dir=left]{grid-row:2;grid-column:1}.dpad>span{grid-row:2;grid-column:2}.dpad [data-dir=right]{grid-row:2;grid-column:3}.dpad [data-dir=down]{grid-row:3;grid-column:2}
.ab-buttons{display:flex;gap:16px;transform:rotate(-18deg)}
.ab-buttons button{border:0;width:58px;height:58px;background:#8a5468;border-radius:50%;color:#f0dce4;box-shadow:0 4px 0 #4d3543;font-size:18px;touch-action:none}
.ab-buttons button:active{transform:translateY(3px);box-shadow:none;background:#95657c}
.system-controls{display:flex;gap:10px;justify-self:center;transform:rotate(-4deg)}
.system-controls button{font-size:9px;letter-spacing:1px;color:#c2c9d2;background:#3a424d;border:0;border-radius:9px;padding:8px 14px;box-shadow:0 3px #171d25}
.system-controls button:active{transform:translateY(2px);box-shadow:0 1px #171d25}

.console-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:15px;padding:12px 4px 0;border-top:1px solid #3a414b;font-size:9px;color:#858d95}
.keyboard-guide{display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.keyboard-guide span{white-space:nowrap}
kbd{font:8px Galmuri,monospace;color:#a4aab0;border:1px solid #555e66;border-radius:2px;padding:3px 5px;margin-right:4px;background:#292f34}
.utility-buttons{display:flex;align-items:center;gap:14px;margin-left:auto}
.utility-buttons button{border:0;background:transparent;color:#969fa7;font-size:9px;padding:5px}
.utility-buttons button:last-child{font-size:17px}
.utility-buttons #start{display:none}
.speaker{width:70px;height:15px;border-radius:3px;background:repeating-linear-gradient(100deg,#1f242b 0 4px,transparent 4px 9px)}
.prototype-note{text-align:center;margin:18px 0 0}
.stock-receipt{text-align:center;color:#f3d9a4;font-size:10px;line-height:1.7;margin:6px 0 0}.stock-receipt a{color:#ffd27a;text-decoration:underline}.token-note{text-align:center;margin:4px 0 0}.prototype-note,.token-note{font-size:11px;line-height:1.7;color:#9aa3ad;letter-spacing:0}.token-note code{font-family:ui-monospace,Menlo,monospace}.ca{overflow-wrap:anywhere;word-break:break-all}.token-note a{color:#e8a0a0}
.loading{position:absolute;inset:0;background:#f8f8d8;display:grid;place-items:center;color:#42534b;font-size:15px}
.hidden{display:none!important}
.sr-only{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.game-frame:fullscreen{width:100vw;height:100dvh;background:#15191c;display:flex;align-items:center;justify-content:center;border:0}
.game-frame:fullscreen #game{object-fit:contain;width:100%;height:100%}
.game-frame:fullscreen .game-actions,.game-frame:fullscreen .card-layer{aspect-ratio:3/2;width:min(100vw,150dvh);height:auto;max-height:100%;inset:auto;align-self:center}

/* Below this width the shell stacks: screen on top, controls underneath like a phone pad. */
@media(max-width:820px){
  .console{width:calc(100% - 18px);margin:16px auto 12px}
  .console-rim{padding:12px 13px 15px;border-radius:20px 20px 30px 30px}
  .console-top{padding-bottom:10px}
  .shoulder{padding:6px 14px 8px;font-size:8px}
  .console-brand{font-size:9px;letter-spacing:2px}
  .console-brand small{display:none}
  .console-deck{grid-template-columns:auto 1fr auto;grid-template-areas:"screen screen screen" "left system right";column-gap:10px;row-gap:0;align-items:end}
  .screen-zone{max-width:100%}
  .bezel{padding:9px 10px 11px;border-radius:10px}
  .bezel-head{font-size:6px;padding-bottom:6px}
  .game-frame{border-width:3px}
  .pad-zone{padding-top:22px}
  .dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px)}
  .dpad button{font-size:18px}
  .ab-buttons{gap:20px}
  .ab-buttons button{width:62px;height:62px;font-size:19px}
  .system-controls{align-self:end;margin-bottom:6px;gap:8px}
  .system-controls button{padding:8px 11px}
  .console-foot{margin-top:13px;gap:8px}
  .keyboard-guide{gap:10px;font-size:8px}
  .utility-buttons{gap:10px}
  .speaker{display:none}
}
@media(max-width:480px){
  .console{width:calc(100% - 12px)}
  .console-rim{padding:10px 9px 13px}
  .console-deck{column-gap:4px}
  .keyboard-guide{gap:8px}
  .keyboard-guide span{font-size:7px}
  .keyboard-guide span:nth-child(n+4){display:none}
  kbd{font-size:6px;padding:3px;margin-right:3px}
  .utility-buttons{gap:7px}
  .utility-buttons button:last-child{font-size:15px}
  .pad-zone{padding-top:18px}
  .dpad{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px)}
  .dpad button{font-size:15px}
  .ab-buttons{gap:10px}
  .ab-buttons button{width:52px;height:52px;font-size:17px}
  .system-controls{gap:5px}
  .system-controls button{font-size:7px;padding:6px 8px}
  .prototype-note{margin-top:14px}
  .loading{font-size:11px}
}
/* Below 380px (360px Androids, 320px phones) SELECT/START drop under the pads, as on the original Game Boy,
   so the D-pad and A/B keep their size and the console stops pushing the page sideways. */
@media(max-width:380px){
  .console-deck{grid-template-areas:"screen screen screen" "left . right" "system system system"}
  .system-controls{margin:12px 0 2px}
}
/* Touch devices get the pads, not the keyboard legend, and the sound and fullscreen buttons get a thumb-sized target. */
@media(hover:none) and (pointer:coarse){
  .keyboard-guide{display:none}
  .utility-buttons button{min-width:44px;min-height:44px;font-size:11px}
}
/* Landscape phones: the shell gets out of the way and the pads float over the edges. */
@media(max-height:500px) and (orientation:landscape){
  .console{width:min(680px,calc((100dvh - 40px)*1.5));margin:8px auto}
  .console-rim{background:none;border:0;box-shadow:none;padding:0}
  .console-top,.console-foot,.prototype-note,.bezel-head{display:none}
  .bezel{padding:0;background:none;box-shadow:none}
  .console-deck{display:block}
  .pad-zone,.system-controls{position:fixed;pointer-events:none;z-index:2}
  .pad-zone>*,.system-controls button{pointer-events:auto}
  .pad-left{left:10px;top:50%;transform:translateY(-50%);padding:0}
  .pad-right{right:10px;top:50%;transform:translateY(-50%);padding:0}
  .system-controls{bottom:8px;left:50%;transform:translateX(-50%);margin:0}
  .dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}
  .ab-buttons{gap:10px}
  .ab-buttons button{width:50px;height:50px}
}

.loading{align-content:center;gap:16px;padding:25px;text-align:center}.loading p{margin:0;font-size:clamp(10px,2vw,15px);line-height:1.6}.loading button{background:#e0e8c8;border:2px solid #506070;padding:10px 16px;color:#304850;font-size:12px}