/* M5Stack ARCADE 共通スタイル（メインサイトのドット／レトロOS風） */
:root {
    --blue:#0085CA; --chrome:#0A3D5C; --green:#00FF41; --paper:#FCFEFF; --ink:#0E1B26; --sub:#5B7186; --line:#BFDDF0; --sky:#EAF6FF;
    --fdot:'DotGothic16','Zen Kaku Gothic New',sans-serif;
    --fjp:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
    --fmono:'JetBrains Mono',Consolas,monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { background:#0b1224; color:var(--ink); font-family:var(--fjp); overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
button { font-family:inherit; }

/* 街並みの背景（akiba.js が画像を差し込む） */
#city { position:fixed; inset:0; z-index:0; background-repeat:repeat-x; background-position:center bottom; background-size:auto 100%; image-rendering:pixelated; opacity:.5; pointer-events:none; }

/* ウィンドウ */
.a-win { background:#fff; border:1.5px solid var(--chrome); box-shadow:4px 4px 0 var(--chrome); color:var(--ink); }
.a-bar { display:flex; align-items:center; gap:8px; background:var(--chrome); color:#fff; font-family:var(--fmono); font-size:.72rem; letter-spacing:.06em; padding:4px 10px; line-height:1.4; user-select:none; }
.a-bar::before { content:''; width:9px; height:9px; background:#fff; flex-shrink:0; }
.a-bar .r { margin-left:auto; opacity:.75; white-space:nowrap; }
.a-body { padding:14px 16px 16px; }

/* ボタン */
.a-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--fdot); font-size:1.3rem; letter-spacing:.05em; padding:10px 20px; border:2px solid var(--chrome); box-shadow:4px 4px 0 var(--chrome); background:var(--green); color:#000; cursor:pointer; text-decoration:none; touch-action:manipulation; }
.a-btn:hover { background:#7dff9b; }
.a-btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--chrome); }
.a-btn.alt { background:#fff; color:var(--chrome); }
.a-btn.alt:hover { background:var(--sky); }
.a-btn.sm { font-size:1rem; padding:6px 14px; box-shadow:3px 3px 0 var(--chrome); }
.a-btn.x { background:#000; color:#fff; border-color:#fff; box-shadow:3px 3px 0 var(--chrome); font-family:var(--fjp); font-weight:700; font-size:.95rem; padding:8px 16px; }
.a-btn[disabled] { opacity:.5; pointer-events:none; }

/* HUD */
.a-box { background:#fff; border:1.5px solid var(--chrome); box-shadow:3px 3px 0 var(--chrome); padding:3px 10px; font-family:var(--fmono); font-size:.68rem; letter-spacing:.06em; color:var(--sub); text-align:center; line-height:1.3; }
.a-box b { display:block; font-family:var(--fdot); font-size:1.25rem; font-weight:400; color:var(--ink); letter-spacing:.02em; }
.a-back { font-family:var(--fmono); font-size:.72rem; color:#cfe6ff; text-decoration:none; letter-spacing:.06em; background:rgba(10,61,92,.75); padding:3px 8px; border:1px solid rgba(255,255,255,.35); touch-action:manipulation; }
.a-back:hover { color:var(--green); }

/* ゲームオーバー */
.a-overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(5,9,18,.55); touch-action:pan-y; }
.a-dlg { width:min(420px,100%); max-height:100%; overflow-y:auto; text-align:center; }
.a-big { font-family:var(--fdot); font-size:2.2rem; line-height:1.1; color:var(--ink); text-shadow:2px 2px 0 var(--blue); }
.a-big small { display:block; font-family:var(--fmono); font-size:.7rem; letter-spacing:.12em; color:var(--sub); text-shadow:none; }
.a-sum { font-family:var(--fmono); font-size:.8rem; color:var(--sub); margin:6px 0 12px; }
.a-sum b { color:var(--blue); }
.a-row { display:flex; gap:10px; justify-content:center; align-items:center; margin:8px 0; flex-wrap:wrap; }
.a-name { font-family:var(--fjp); font-size:16px; border:2px solid var(--chrome); padding:7px 10px; width:180px; background:var(--sky); color:var(--ink); outline:none; -webkit-user-select:text; user-select:text; }
.a-name:focus { background:#fff; box-shadow:2px 2px 0 var(--blue); }
.a-msg { min-height:1.3em; font-family:var(--fmono); font-size:.82rem; color:#b45309; font-weight:700; }
.a-rank { text-align:left; margin:8px 0 10px; max-height:190px; overflow-y:auto; border:1.5px dashed var(--line); padding:4px 6px; }
.a-rank table { width:100%; border-collapse:collapse; font-family:var(--fmono); font-size:.76rem; }
.a-rank th { color:var(--sub); font-weight:400; letter-spacing:.08em; padding:2px 6px; border-bottom:1px solid var(--line); text-align:left; }
.a-rank td { padding:3px 6px; border-bottom:1px dotted var(--line); }
.a-rank td:nth-child(2) { color:var(--blue); font-weight:700; }
.a-rank tr.you td { background:#fff7cc; }
.a-rank .none { color:var(--sub); text-align:center; padding:8px; font-family:var(--fmono); font-size:.76rem; }

/* モード選択 */
.a-modes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.a-modes .a-btn { flex-direction:column; gap:2px; font-size:1.15rem; padding:12px 6px; line-height:1.2; }
.a-btn small { font-family:var(--fmono); font-size:.6rem; letter-spacing:.03em; opacity:.8; }
.a-btn em { font-style:normal; font-family:var(--fmono); font-size:.58rem; letter-spacing:.02em; opacity:.75; min-height:1.2em; word-break:break-all; }
.a-btn.wide { display:flex; width:100%; font-size:1rem; font-family:var(--fjp); font-weight:700; }
.a-linkline { display:block; margin-top:10px; font-family:var(--fjp); font-weight:700; font-size:.9rem; color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; touch-action:manipulation; }
.a-linkline:hover { color:var(--blue); }