:root{color-scheme:dark;font-family:Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:#e9e9df;font-synthesis:none}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#10151d;
 /* ダブルタップ拡大を止める。ピンチは game.js の gesture イベント抑止で止める */
 touch-action:manipulation;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
button:focus-visible{outline:2px solid #f1c67d;outline-offset:3px}
[hidden]{display:none!important}

/* 画面全体が筐体。外側にゲーム機の絵や机、カード枠は置かない。 */
.shell{position:fixed;inset:0;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto auto;
 padding:env(safe-area-inset-top) env(safe-area-inset-right) max(8px,env(safe-area-inset-bottom)) env(safe-area-inset-left);
 background:linear-gradient(165deg,#1b2230,#10151d 45%,#141a24);
 user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:6px 14px 4px}
.wordmark{font-size:12px;letter-spacing:1.4px;color:#c2c8d1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wordmark b{font-weight:400;font-size:10px;letter-spacing:1px;margin-left:10px;color:#6d7b89}
.bar-buttons{display:flex;align-items:center;gap:6px}
.chip{background:none;border:0;min-height:36px;padding:4px 8px;font-size:10px;letter-spacing:1px;color:#93a0ad;border-radius:8px;white-space:nowrap}
.chip span{color:#e8c68f;margin-left:3px}
.chip.round{min-width:36px;border:1px solid #333f4d;font-size:13px;line-height:1;color:#aeb9c4}
.chip.wide{display:block;position:sticky;bottom:0;width:100%;margin-top:18px;min-height:46px;border:1px solid #3f4c5a;border-radius:10px;font-size:13px;letter-spacing:2px;color:#e6e3da;background:#1a222d;box-shadow:0 -10px 12px #17202b}

.display{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden;padding:8px 0 4px}

/* 画面まわりのモニター筐体。GBC の窓のように、枠と POWER / COLOR の帯を持たせる。 */
.monitor{--bezel:12px;position:relative;display:flex;flex-direction:column;align-items:center;
 padding:var(--bezel) var(--bezel) 0;border:1px solid #212a35;border-radius:16px;
 background:#141a23}
.screen{line-height:0;border:2px solid #0c121a;border-radius:2px;background:#081821}
canvas{display:block;background:#081821;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
.monitor-foot{display:flex;align-items:center;justify-content:space-between;width:100%;
 padding:8px 3px 7px;font-size:10px;letter-spacing:2.6px;color:#77828f}
.power{display:flex;align-items:center;gap:7px}
.power::before{content:"";width:5px;height:5px;border-radius:50%;background:#e3b063;box-shadow:0 0 6px #e3b06399}
.brand{font-style:italic;font-weight:700;letter-spacing:1.4px;color:#b9c3cd}
#load-error{position:absolute;inset:14px;background:#081821;color:#f7efd6;line-height:1.6;padding:28px 16px;font-size:14px;z-index:2}


.controls{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:2px 16px 0;touch-action:none}
.dpad{position:relative;width:150px;height:150px;flex-shrink:0;touch-action:none;filter:drop-shadow(0 3px 2px #0b0f15)}
.dpad-base{position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(#0b0f1544,transparent 68%);pointer-events:none}
.dpad button,.dpad-center{position:absolute;width:50px;height:50px;background:linear-gradient(115deg,#2b3644,#1a212c);border:1px solid #0d1219;box-shadow:inset 1px 1px 1px #55647555;touch-action:none}
.dpad button{padding:0;display:flex;align-items:center;justify-content:center}
.dpad .up{left:50px;top:0;border-bottom:0;border-radius:5px 5px 0 0}
.dpad .down{left:50px;top:100px;border-top:0;border-radius:0 0 5px 5px}
.dpad .left{left:0;top:50px;border-right:0;border-radius:5px 0 0 5px}
.dpad .right{left:100px;top:50px;border-left:0;border-radius:0 5px 5px 0}
.dpad-center{left:50px;top:50px;border:0;box-shadow:none;pointer-events:none}
.dpad-center:after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid #0d1219;box-shadow:0 1px 1px #52627255,inset 0 1px 2px #06090d}
.dpad i{width:0;height:0;border:6px solid transparent;opacity:.7}
.up i{border-bottom-color:#8d9caa;transform:translateY(-4px)}
.down i{border-top-color:#8d9caa;transform:translateY(4px)}
.left i{border-right-color:#8d9caa;transform:translateX(-4px)}
.right i{border-left-color:#8d9caa;transform:translateX(4px)}

.actions{display:flex;gap:18px;transform:rotate(-24deg);padding-right:4px}
.action{text-align:center;transform:rotate(24deg)}
.action button{width:64px;height:64px;border-radius:50%;border:2px solid #0c1117;background:linear-gradient(140deg,#3a4655,#1e2732 70%);
 box-shadow:inset 1px 2px 2px #7a889755,0 5px 0 #0e131a,0 7px 8px #0008;touch-action:none;font-size:21px;font-weight:700;color:#e9e6dc}
.action.a button{background:linear-gradient(140deg,#e6cb9c,#c2a274 70%);color:#17212c;border-color:#8d7550;box-shadow:inset 1px 2px 2px #fff6,0 5px 0 #6d5a3d,0 7px 8px #0008}
.action span{display:block;font-size:10px;color:#8a97a4;letter-spacing:1.2px;margin-top:10px}
.dpad button.pressed{background:#141a23;box-shadow:inset 1px 2px 3px #05080c}
.action button.pressed{transform:translateY(3px);box-shadow:inset 0 2px 3px #12171e,0 2px 0 #0c1016,0 3px 3px #0006;background:#222b36}
.action.a button.pressed{background:#f3d69f;box-shadow:inset 0 2px 3px #a98d61,0 2px 0 #6d5a3d,0 3px 3px #0006}

.utility{display:flex;align-items:center;justify-content:center;gap:26px;padding:10px 0 2px}
.utility button{border:0;background:none;min-width:64px;min-height:48px;padding:4px 0;color:#93a0ad;letter-spacing:1.1px;font-size:9px;touch-action:manipulation}
.utility button span{display:block;width:38px;height:11px;border-radius:7px;background:linear-gradient(#39434f,#1e2630);border:1px solid #0b1016;box-shadow:0 2px 3px #06090d;margin:0 auto 8px}
.utility button:active span{transform:translateY(1px)}
#start{color:#e6cb9c}

.help{position:fixed;inset:0;z-index:9;background:#0a0e1499;display:flex;align-items:flex-end;justify-content:center;padding:env(safe-area-inset-top) 0 0}
.help-sheet{width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;background:#161e28;border:1px solid #313d4b;border-radius:16px 16px 0 0;
 padding:22px 20px max(24px,env(safe-area-inset-bottom));font-size:14px;line-height:1.8;color:#c3ccd5}
.help-sheet h2{margin:0 0 12px;font-size:15px;letter-spacing:2px;color:#e6e3da}
.help-sheet p{margin:4px 0 16px}
.help-sheet dl{display:grid;grid-template-columns:96px 1fr;gap:7px;margin:0 0 18px}
.help-sheet dt{color:#e8c68f}
.help-sheet dd{margin:0}
.help-sheet .keyboard,.help-sheet .note{font-size:12px;color:#93a3b1}

.finale-sheet{text-align:center;border-color:#4a4030;background:#1a1a18;max-height:84dvh}
.finale-date{margin:0 0 10px;font-size:11px;letter-spacing:4px;color:#8a7a5c}
.finale-sheet h2{margin:0 0 16px;font-size:14px;letter-spacing:1.5px;line-height:1.9;color:#e8dcc2}
.finale-sheet h2 b{display:block;margin-top:6px;font-size:19px;letter-spacing:1px;color:#f0c179}
.finale-lead{margin:0 0 16px;color:#cfc7b6}
.finale-shards{display:inline-block;margin-top:8px;font-size:12px;color:#9a917f}
.finale-shards b{font-weight:700;color:#f0c179}
.finale-nights{list-style:none;margin:0 0 18px;padding:14px 0;font-size:13px;letter-spacing:1.6px;line-height:2.1;color:#c8c0af;
 border-top:1px solid #33302a;border-bottom:1px solid #33302a}
.finale-nights li::before{content:attr(data-night);display:inline-block;width:26px;font-size:10px;letter-spacing:1px;color:#8a7a5c}
.finale-close{margin:0 0 14px;font-size:15px;color:#f0c179}
.finale-sheet .note{margin-bottom:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 幅が狭い端末では日付を畳む（見出しの省略記号を出さない） */
@media (max-width:379px){.wordmark b{display:none}}

/* 背の高い端末では操作系を大きく取り、画面まわりの余白を締める */
@media (min-height:780px) and (orientation:portrait){
 .controls{padding-top:8px}
 .dpad{width:168px;height:168px}
 .dpad button,.dpad-center{width:56px;height:56px}
 .dpad .up,.dpad .down,.dpad-center{left:56px}
 .dpad .down{top:112px}
 .dpad .left,.dpad .right,.dpad-center{top:56px}
 .dpad .right{left:112px}
 .dpad-center:after{inset:16px}
 .action button{width:72px;height:72px;font-size:23px}
 .utility{padding:18px 0 6px}
}

/* 縦の余裕が少ない端末では操作系を詰める */
@media (max-height:700px) and (orientation:portrait){
 .bar{padding-top:2px}
 .monitor{--bezel:8px;border-radius:14px}
 .monitor-foot{padding:6px 3px 5px;font-size:9px;letter-spacing:2px}
 .dpad{width:132px;height:132px}
 .dpad button,.dpad-center{width:44px;height:44px}
 .dpad .up,.dpad .down,.dpad-center{left:44px}
 .dpad .down{top:88px}
 .dpad .left,.dpad .right,.dpad-center{top:44px}
 .dpad .right{left:88px}
 .action button{width:56px;height:56px}
 .action span{margin-top:6px}
 .utility{padding:6px 0 0}
}

/* 横持ち: 十字キー / 画面 / A・B の3カラム */
@media (orientation:landscape) and (max-height:560px){
 .shell{grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
 .bar{grid-column:1/-1;grid-row:1}
 .controls{display:contents}
 .dpad{grid-column:1;grid-row:2;justify-self:start;align-self:center}
 .actions{grid-column:3;grid-row:2;justify-self:end;align-self:center}
 .display{grid-column:2;grid-row:2;padding:0 6px}
 /* 横持ちは高さが命。枠は残し、POWER / COLOR の帯だけ畳んで画面を大きく取る。 */
 .monitor{--bezel:4px;border-radius:9px;padding-bottom:var(--bezel)}
 .monitor-foot{display:none}
 .bar{padding:0 10px}
 .chip{min-height:28px}
 .wordmark b{display:none}
 .utility{grid-column:1/-1;grid-row:3;justify-self:center;padding:0}
 .utility button{min-height:34px;padding:0}
 .utility button span{margin-bottom:5px}
}

/* PC: スマホ幅の縦筐体を中央に置く */
@media (min-width:900px) and (min-height:561px) and (pointer:fine){
 body{background:radial-gradient(ellipse at 50% 0%,#232c3a,#0b0e13)}
 .shell{left:50%;right:auto;width:520px;transform:translateX(-50%);border-left:1px solid #2b3543;border-right:1px solid #2b3543;box-shadow:0 0 60px #0009}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}