/* Game modes guide page (#121, redesigned in #123, interactive controls #125, controls-only #127). Builds on .f1-home in style.css. */
.modes-page{--mz-line:rgba(255,255,255,.1);--mz-card:rgba(255,255,255,.035);--mz-dim:var(--text-dim,#9aa1b0);--mz-red:#e10600}
html{scroll-padding-top:1rem}

/* Hero */
.modes-hero{max-width:68rem;margin:0 auto;padding:max(1.2rem,env(safe-area-inset-top)) 1.25rem 1.8rem}
.modes-back{display:inline-block;margin-bottom:2.2rem;color:var(--mz-dim);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.modes-back:hover{color:#fff}
.modes-title{margin:0;font-size:clamp(2.6rem,8vw,5rem);line-height:.9;letter-spacing:-.05em}
.modes-lead{margin:.9rem 0 1.4rem;color:var(--mz-dim);font-size:clamp(1rem,2.4vw,1.25rem)}
.modes-lead em{color:#fff;font-style:normal;font-weight:700}
.modes-block{margin-bottom:3rem}

/* Detail cards */
.modes-card{margin-top:1rem;padding:1.3rem 1.3rem 1.1rem;border:1px solid var(--mz-line);border-radius:16px;background:var(--mz-card)}
.modes-card-head{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem}
.modes-card-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.06);font-size:1.4rem}
.modes-card-head h3{margin:0;font-size:1.15rem}
.modes-card-head p{margin:.15rem 0 0;color:var(--mz-dim);font-size:.85rem;line-height:1.4}
.modes-card p,.modes-card li{font-size:.92rem;line-height:1.55}
.modes-card a{color:#ff6b61}
.modes-card code{padding:.05rem .3rem;border-radius:4px;background:rgba(255,255,255,.07);font:500 .82em ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}

.modes-note{color:var(--mz-dim);font-size:.85rem}
/* Friends pointer to the room page */
.modes-friends{display:flex;gap:.9rem;align-items:center;padding:1rem 1.1rem;border:1px solid rgba(225,6,0,.5);border-radius:16px;background:linear-gradient(125deg,rgba(225,6,0,.14),rgba(255,255,255,.02));color:#fff;text-decoration:none;font-size:.92rem;line-height:1.5;transition:border-color .15s}
.modes-friends:hover,.modes-friends:focus-visible{border-color:#fff;outline:none}
.modes-friends-arrow{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--mz-red);font-size:1.2rem}
.modes-block>.modes-note a{color:#ff6b61}

/* Controls */
.controls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.control-card{display:flex;flex-direction:column;margin-top:0}
.control-card .modes-note{margin:auto 0 0;padding-top:.8rem}
kbd{display:inline-grid;place-items:center;min-width:1.9em;height:1.9em;padding:0 .4rem;border:1px solid rgba(255,255,255,.28);border-bottom-width:3px;border-radius:6px;background:#161a22;color:#fff;font:700 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.bind-list{list-style:none;margin:0;padding:0}
.bind-list li{display:grid;grid-template-columns:6.4rem 1fr;gap:.8rem;align-items:center;margin:0 -.5rem;padding:.5rem;border-top:1px solid var(--mz-line);border-radius:8px;cursor:pointer;transition:background .15s,box-shadow .15s}
.bind-list li>span{display:flex;flex-wrap:wrap;gap:4px}
.bind-list li>p{margin:0;font-size:.86rem;line-height:1.35}
.bind-list li.is-lit{background:rgba(225,6,0,.16);box-shadow:inset 3px 0 0 var(--mz-red)}

/* Drawn controls: every drawn key is a button that lights its rows */
.ctl-visual{display:grid;place-items:center;min-height:132px;margin-bottom:.9rem;padding:14px;border-radius:12px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.06),transparent 70%),#0b0d12}
.ctl-visual button{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .15s,box-shadow .15s,background .15s}
.ctl-visual button:active{transform:translateY(1px)}
.ctl-visual button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ctl-visual .is-lit{border-color:#fff !important;background:var(--mz-red) !important;color:#fff !important;box-shadow:0 0 22px rgba(225,6,0,.55)}
.kb{display:grid;place-items:center;min-width:42px;height:42px;padding:0 .5rem;border:1px solid rgba(255,255,255,.28);border-bottom-width:3px;border-radius:7px;background:#161a22;color:#fff;font:700 .95rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.kb-hot{border-color:rgba(225,6,0,.8)}
.kb-visual{grid-auto-flow:column;gap:22px}
.kb-group,.kb-row{display:flex;gap:6px;justify-content:center}
.kb-group{flex-direction:column;align-items:center}

.pad-visual{gap:12px}
.pad-shoulders{display:flex;gap:6px}
.pad-sh{min-width:48px;height:32px;font-size:.8rem;border-radius:10px 10px 6px 6px}
.pad-sh--hot{border-color:rgba(225,6,0,.8)}
.pad-body{display:flex;align-items:center;gap:30px}
.pad-stick{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:radial-gradient(circle,#232834 55%,#12151c 56%);color:var(--mz-dim);font-weight:900}
.pad-face{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:2px}
.pad-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;background:#161a22;border:1px solid rgba(255,255,255,.18);font-size:1rem;font-weight:900}
.pad-tri{grid-area:1/2}.pad-sq{grid-area:2/1}.pad-ci{grid-area:2/3;opacity:.35}.pad-face .pad-x{grid-area:3/2}
.pad-tri{color:#3ad1a0}.pad-sq{color:#e57ad8}.pad-ci{color:#ff5a64}.pad-x{color:#6ea8ff}

.phone-visual{padding:10px}
.phone-frame{position:relative;width:100%;max-width:300px;height:118px;border:2px solid rgba(255,255,255,.22);border-radius:18px;background:linear-gradient(180deg,#141821,#0d1016)}
.phone-wheel{position:absolute;left:16px;bottom:14px;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:#161a22;color:#fff;font-size:1.7rem;line-height:1}
.phone-pedals{position:absolute;right:16px;bottom:14px;display:flex;gap:6px;align-items:flex-end}
.phone-pedal{width:48px;height:40px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:#2a303c;color:#fff;font-size:.56rem;font-weight:900;letter-spacing:.05em}
.phone-pedal.phone-gas{height:58px;background:#8f0400}

@media(max-width:860px){.controls-grid{grid-template-columns:1fr}}
@media(max-width:560px){.modes-card{padding:1.1rem 1rem 1rem}.bind-list li{gap:.6rem}}