/* FM3 WebGL site. Visual language of the game's hub: black field, red
   honeycomb, grey title bars, slate buttons, pixel type. */
:root{
 --black:#000;--ink:#05070a;
 --red:#a3161b;--red-hot:#e0353b;--red-dim:#2a0709;
 --panel:#2b2b25;--panel-2:#33332c;--bar:#77776b;--bar-hi:#9a9a8c;--bar-lo:#1a1a16;--edge:#4b4a42;
 --btn:#1b242e;--btn-hi:#26323f;
 --text:#ecebe2;--soft:#d9d7cb;--dim:#a7a698;--mute:#77766a;
 --amber:#ffb347;--amber-hi:#ffd27a;--blue:#6ec1ff;--ok:#6bd68f;--bad:#ff8a80;
 --pix:"Pixelify Sans","DotGothic16",ui-monospace,"Cascadia Mono",Consolas,monospace;
 --body:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;
 color-scheme:dark;
}
:lang(ja){--pix:"DotGothic16","Pixelify Sans",ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 42 24' shape-rendering='crispEdges'%3E%3Cpath d='M7 0h14l7 12-7 12H7L0 12zM28 12h14' fill='none' stroke='%23240608' stroke-width='1'/%3E%3C/svg%3E");color:var(--text);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
button{font:inherit}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1200px;overflow:hidden;background:var(--ink);isolation:isolate}
#hero-canvas{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;z-index:0}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.45) 30%,rgba(0,0,0,0) 52%)}
.hero[data-layout=portrait] .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.5) 34%,rgba(0,0,0,0) 52%)}
.topbar{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) max(16px,4vw) 12px}
.brand{display:flex;align-items:center;gap:8px;font:700 18px/1 var(--pix);color:var(--text);text-decoration:none;letter-spacing:.06em}
.brand b{color:var(--amber);font-weight:600}
.brand i{width:16px;height:14px;background:var(--red-hot);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.langs{display:flex;gap:4px}
.langs button{font:600 13px/1 var(--pix);color:var(--dim);background:rgba(0,0,0,.55);border:2px solid var(--edge);padding:7px 8px;cursor:pointer;min-width:38px}
.langs button[aria-pressed=true]{color:#1b1206;background:var(--amber);border-color:var(--amber-hi)}
.langs button:hover{color:var(--text);border-color:var(--bar-hi)}
.copy{position:absolute;z-index:2;left:max(16px,6vw);top:clamp(84px,16%,220px);width:min(560px,42vw)}
.hero[data-layout=portrait] .copy{left:16px;right:16px;width:auto;top:calc(76px + env(safe-area-inset-top));text-align:center}
.kicker{margin:0 0 12px;font:600 13px/1.3 var(--pix);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.title{margin:0;font-family:var(--pix);line-height:.84;display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 .22em}
.hero[data-layout=portrait] .title{justify-content:center}
.t-big{font-size:clamp(76px,11vw,156px);font-weight:700;color:#f4f1e6;text-shadow:.04em .04em 0 var(--red),.08em .08em 0 #000;letter-spacing:.02em}
.t-small{font-size:clamp(26px,3.1vw,44px);font-weight:600;color:var(--amber);padding-bottom:.32em;letter-spacing:.08em;text-shadow:3px 3px 0 #000}
.lead{margin:20px 0 24px;max-width:34em;color:var(--soft);font-size:clamp(16px,1.35vw,19px);text-shadow:0 1px 0 #000}
.hero[data-layout=portrait] .lead{margin-left:auto;margin-right:auto;font-size:16px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.hero[data-layout=portrait] .cta{justify-content:center}
.live{display:flex;align-items:center;gap:10px;margin:20px 0 0;font:15px/1.3 var(--pix);color:var(--dim);text-shadow:0 1px 0 #000}
.hero[data-layout=portrait] .live{justify-content:center}
.dot{flex:none;width:10px;height:10px;background:#555}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(107,214,143,.22)}
.dot.bad{background:var(--red-hot)}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:28px;height:28px;border:2px solid var(--edge);background:rgba(0,0,0,.6);display:grid;place-items:center;color:var(--dim);text-decoration:none;font:700 14px/1 var(--pix)}
.scroll-cue:hover{color:var(--text);border-color:var(--bar-hi)}

/* ---------------------------------------------------------------- buttons */
.btn{--cut:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;font:600 16px/1.1 var(--pix);letter-spacing:.04em;color:var(--text);background:var(--btn);border:2px solid var(--edge);cursor:pointer;text-decoration:none;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.btn:hover{background:var(--btn-hi);border-color:var(--bar-hi)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;border-color:#fff;background:var(--btn-hi)}
.btn.primary{background:var(--amber);color:#1b1206;border-color:var(--amber-hi)}
.btn.primary:hover,.btn.primary:focus-visible{background:#ffc46b;border-color:#fff}
.btn.danger{background:#3a0d10;border-color:#7a1d22}
.btn.danger:hover{background:#561318}
.btn.small{min-height:36px;padding:6px 14px;font-size:14px;--cut:5px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link{background:none;border:0;padding:6px 0;color:var(--blue);font:15px/1.3 var(--pix);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:#a9dcff}

/* ---------------------------------------------------------------- content */
main{max-width:1120px;margin:0 auto;padding:44px 16px 20px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px;background:linear-gradient(#26261f,#1d1d18);border:2px solid var(--edge);box-shadow:inset 0 2px 0 #3a3a32}
.feature canvas{display:block;width:96px;height:80px;image-rendering:pixelated;background:#000;border:2px solid #000;outline:2px solid var(--edge)}
.feature h3{margin:0 0 6px;font:600 19px/1.2 var(--pix);color:#f4f1e6}
.feature p{margin:0;color:var(--dim);font-size:15px}
.panel{background:var(--panel);border:2px solid var(--bar-hi);box-shadow:0 0 0 2px #000}
.panel>.bar{margin:0;padding:5px 12px;background:var(--bar);border-bottom:2px solid var(--bar-lo);font:600 16px/1.3 var(--pix);color:#f4f1e6;text-shadow:1px 1px 0 #34342c;letter-spacing:.03em}
.panel-body{padding:14px 16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.empty{color:var(--dim);font:15px/1.4 var(--pix)}
table{width:100%;border-collapse:collapse;font:15px/1.3 var(--pix)}
th,td{text-align:left;padding:7px 6px;border-bottom:2px solid #22221d}
th{color:var(--dim);font-weight:400}
td.num,th.num{text-align:right}
tr.me td{color:var(--amber)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:12px}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;color:var(--soft)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;background:var(--btn);border:2px solid var(--edge);font:700 17px/1 var(--pix);color:var(--amber)}
.addr{display:flex;gap:8px;margin:18px 0 0}
.addr code{flex:1;min-width:0;display:flex;align-items:center;padding:8px 12px;background:#0b0e12;border:2px solid var(--edge);font:16px/1.3 var(--pix);color:var(--amber);overflow-wrap:anywhere}
.note{margin:14px 0 0;color:var(--dim);font-size:14px}
footer{max-width:1120px;margin:0 auto;padding:22px 16px calc(40px + env(safe-area-inset-bottom));color:var(--mute);font-size:13px;border-top:2px solid #1d1d19}
footer p{margin:4px 0}

@media (max-width:900px){.features{grid-template-columns:1fr}.two{grid-template-columns:1fr}}
@media (max-width:420px){.feature{grid-template-columns:1fr}.feature canvas{width:144px;height:120px}.addr{flex-direction:column}}

/* ---------------------------------------------------------------- window */
dialog.win{width:540px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;background:transparent;color:var(--text);overflow:visible}
dialog.win::backdrop{background:rgba(0,0,0,.74)}
.win .frame{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);background:var(--panel);border:2px solid var(--bar-hi);box-shadow:0 0 0 2px #000,10px 10px 0 rgba(163,22,27,.5)}
.win .bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 6px 4px 12px;background:var(--bar);border-bottom:2px solid var(--bar-lo);font:600 16px/1.3 var(--pix);color:#f4f1e6;text-shadow:1px 1px 0 #34342c}
.win .x{width:32px;height:30px;display:grid;place-items:center;background:var(--panel);border:2px solid var(--bar-lo);color:#f4f1e6;font:700 16px/1 var(--pix);cursor:pointer}
.win .x:hover,.win .x:focus-visible{background:var(--red);outline:none}
.banner-wrap{flex:none;display:flex;justify-content:center;background:#000;border-bottom:2px solid var(--bar-lo)}
.banner-wrap canvas{display:block;image-rendering:pixelated}
.win-body{padding:18px 18px 20px;overflow:auto}
.win h2{outline:none;margin:0 0 8px;font:600 24px/1.2 var(--pix);color:#f4f1e6}
.win p{margin:0 0 12px;color:var(--soft)}
.ticks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.ticks li{display:flex;gap:10px;align-items:baseline;color:var(--soft)}
.ticks li::before{content:"";flex:none;width:8px;height:8px;background:var(--amber);transform:translateY(-1px)}
.field{margin:12px 0 0}
.field label{display:block;margin:0 0 5px;font:15px/1.2 var(--pix);color:var(--dim)}
.field input{width:100%;padding:10px 12px;font:17px/1.3 var(--body);color:var(--text);background:#0e1216;border:2px solid var(--edge);border-radius:0}
.field input:focus{outline:none;border-color:var(--amber)}
.field .pw{display:flex}
.field .pw input{flex:1;min-width:0}
.field .pw button{flex:none;padding:0 12px;background:var(--btn);color:var(--dim);border:2px solid var(--edge);border-left:0;font:14px var(--pix);cursor:pointer}
.code-input{letter-spacing:.5em;font-family:var(--pix)!important;font-size:24px!important;text-align:center}
.err{min-height:1.5em;margin:12px 0 0;color:var(--bad);font-size:15px}
.ok-msg{margin:12px 0 0;color:var(--ok);font-size:15px}
.warn{margin:12px 0 0;padding:10px 12px;border:2px solid #6a4c10;background:#2a1f08;color:var(--amber-hi);font-size:14px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.row.spread{justify-content:space-between}
.stats{display:grid;gap:12px;margin:14px 0 4px}
.stat{padding:10px 12px;background:#22221d;border:2px solid #1a1a16}
.stat h3{margin:0 0 6px;font:600 15px/1.2 var(--pix);color:var(--dim);display:flex;justify-content:space-between;gap:8px}
.stat h3 span{color:var(--amber)}
.energy{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.energy i{height:16px;background:#0e1216;border:2px solid #000}
.energy i.on{background:var(--amber);box-shadow:inset 0 -3px 0 #c97a1c}
.mechs{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:10px}
.mech{background:#0c0f14;border:2px solid #1a1a16;padding:6px;display:flex;flex-direction:column;align-items:center}
.mech canvas{display:block;image-rendering:pixelated}
.mech b{font:600 15px/1.2 var(--pix);margin-top:6px;color:#f4f1e6}
.mech small{font:13px/1.2 var(--pix);color:var(--dim)}
.chip{display:inline-block;padding:1px 6px;margin-left:4px;font:600 12px/1.4 var(--pix);background:#2f3b47;color:#cfe3f5}
.chip.r{background:#13476a;color:#cfe8ff}.chip.sr{background:#6b1115;color:#ffd6d6}