/* スタート画面: ロボスタディオン本体のドット／レトロOS風デザインを踏襲 */
.menu {
    --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;
    position:fixed; inset:0; z-index:100; overflow-y:auto; overflow-x:hidden;
    touch-action:pan-y; color:var(--ink); font-family:var(--fjp);
    background-color:var(--sky);
    background-image:
        radial-gradient(var(--line) 1.6px, transparent 1.8px),
        linear-gradient(180deg, #CFE9FB 0%, var(--paper) 62%);
    background-size:20px 20px, 100% 100%;
}
.menu #menuCanvas { position:fixed; left:0; top:0; z-index:0; image-rendering:crisp-edges; image-rendering:pixelated; cursor:pointer; }
.m-ui {
    position:relative; z-index:1; min-height:100%; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:14px 16px calc(16px + env(safe-area-inset-bottom));
}
.m-ui > * { pointer-events:auto; }
.m-spacer { flex:1 1 auto; min-height:170px; pointer-events:none; width:100%; }

.m-head { display:flex; align-items:center; justify-content:space-between; width:min(540px,100%); gap:10px; }
.m-logo img { height:24px; width:auto; display:block; }
.m-kicker { font-family:var(--fmono); font-size:.68rem; letter-spacing:.12em; color:var(--sub); white-space:nowrap; }

/* ウィンドウ（メインサイトの .win と同じ見た目） */
.m-win { background:#fff; border:1.5px solid var(--chrome); box-shadow:4px 4px 0 var(--chrome); width:min(540px,100%); }
.m-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; }
.m-bar::before { content:''; width:9px; height:9px; background:#fff; flex-shrink:0; }
.m-bar .r { margin-left:auto; opacity:.75; white-space:nowrap; }
.m-body { padding:16px 18px 18px; text-align:center; }

.m-sub { font-family:var(--fmono); font-size:.76rem; letter-spacing:.08em; color:var(--sub); margin-bottom:6px; }
.m-h1 { margin:0; font-family:var(--fdot); font-weight:400; font-size:clamp(2.7rem, 14vw, 5.4rem); line-height:1.02; letter-spacing:-.01em; color:var(--ink); text-shadow:3px 3px 0 var(--blue); }
.m-h1 span { display:inline-block; animation:m-drop .7s steps(9) both; animation-delay:calc(var(--i) * .08s); }
.m-h1 .g { background:var(--green); color:#000; text-shadow:none; padding:0 .08em; margin-right:.04em; }
.m-lead { font-size:.92rem; line-height:1.7; color:var(--ink); margin:10px 0 0; font-weight:700; }
@keyframes m-drop {
    0% { transform:translateY(-190px) rotate(-24deg); opacity:0; }
    55% { transform:translateY(0) rotate(5deg); opacity:1; }
    75% { transform:translateY(-16px) rotate(-3deg); }
    100% { transform:none; }
}

/* スタートボタン */
.m-start {
    display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
    font-family:var(--fdot); font-size:clamp(1.5rem, 6vw, 2rem); letter-spacing:.06em;
    padding:14px 24px; border:2px solid var(--chrome); box-shadow:4px 4px 0 var(--chrome);
    background:var(--green); color:#000; cursor:pointer; animation:m-pulse 1.1s steps(2) infinite;
}
.m-start .arrow { display:inline-block; animation:m-blink .55s steps(2) infinite; }
.m-start:hover { background:#7dff9b; }
.m-start:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--chrome); animation:none; }
@keyframes m-pulse { 0% { box-shadow:4px 4px 0 var(--chrome); } 50% { box-shadow:6px 6px 0 var(--chrome); } }
@keyframes m-blink { 50% { opacity:0; } }

.m-links { display:flex; justify-content:center; gap:22px; margin-top:14px; flex-wrap:wrap; }
.m-link { background:none; border:0; cursor:pointer; font-family:var(--fjp); font-weight:700; font-size:1rem; color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; padding:2px 0; }
.m-link:hover { color:var(--blue); text-decoration-color:var(--green); }

.m-hi { margin-top:14px; font-family:var(--fmono); font-size:.76rem; text-align:left; border:1.5px dashed var(--line); padding:8px 10px; min-height:3.2em; }
.m-hi .t { color:var(--sub); letter-spacing:.1em; margin-bottom:3px; display:block; }
.m-hi .row { display:flex; gap:8px; justify-content:space-between; border-bottom:1px dotted var(--line); padding:2px 0; }
.m-hi .row:last-child { border-bottom:0; }
.m-hi .row b { color:var(--blue); }
.m-hi .no { color:var(--sub); }

.m-how { margin-top:12px; text-align:left; font-size:.82rem; line-height:1.75; border-left:4px solid var(--green); padding:2px 0 2px 10px; background:var(--sky); }
.m-how b { font-family:var(--fmono); background:var(--chrome); color:#fff; padding:0 5px; font-size:.74rem; }
.m-back { display:inline-block; margin-top:12px; font-family:var(--fmono); font-size:.72rem; color:var(--sub); text-decoration:none; letter-spacing:.04em; }
.m-back:hover { color:var(--blue); }
.m-tap { font-family:var(--fmono); font-size:.66rem; color:var(--sub); letter-spacing:.1em; text-align:center; margin-top:8px; }

@media (max-height:640px) { .m-spacer { min-height:80px; } .m-h1 { font-size:clamp(2.2rem,10vw,3.6rem); } }
@media (prefers-reduced-motion: reduce) {
    .m-h1 span, .m-start, .m-start .arrow { animation:none; }
}

/* モード選択 */
.m-modes { display:grid; grid-template-columns:1.1fr 1fr; gap:12px; }
.m-modes .m-start { padding:14px 8px; font-size:clamp(1.15rem, 5vw, 1.6rem); letter-spacing:.03em; }
.m-start.dot { background:#fff; color:var(--chrome); animation:none; }
.m-start.dot:hover { background:var(--sky); }
.m-modehint { font-family:var(--fmono); font-size:.64rem; color:var(--sub); letter-spacing:.04em; margin-top:9px; text-align:center; }

.m-hi2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.m-hi2 .t { display:block; color:var(--sub); letter-spacing:.08em; margin-bottom:3px; font-size:.68rem; }
.m-hi2 .row { font-size:.72rem; }

.m-backbtn { display:flex; align-items:center; justify-content:center; margin-top:12px; padding:9px 12px; border:2px solid var(--chrome); box-shadow:3px 3px 0 var(--chrome); background:#fff; color:var(--chrome); font-family:var(--fjp); font-weight:700; font-size:.95rem; text-decoration:none; }
.m-backbtn:hover { background:var(--sky); }
.m-backbtn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--chrome); }