@font-face{font-family:"TankJP";src:url("../assets/fonts/TankJP.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{--paper:#f7f7ed;--ink:#263c38;--muted:#6d7b70;--line:#d6ddd0;--blue:#2586dc;--green:#325c48;--yellow:#f5cc6a;--shadow:0 18px 45px #31493212;font-family:"TankJP",ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;color:var(--ink);background:#edf2e7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 10%,#fff9e7,transparent 50%),#edf2e7}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #2586dc;outline-offset:3px}button:hover:not(:disabled){filter:brightness(1.06)}[hidden]{display:none!important}.app{max-width:1200px;margin:auto;padding:0 32px}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-size:13px;font-weight:800;letter-spacing:1px}.brand-mark{display:grid;place-items:center;background:var(--green);color:var(--paper);width:38px;height:38px;border-radius:10px;font-size:22px}.brand-sub{display:block;font-size:9px;font-weight:600;letter-spacing:1.5px;color:var(--muted);margin-top:3px}.top-actions{display:flex;gap:9px;align-items:center}.badge,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--muted)}.badge{background:#e1e8db;padding:7px 10px;border-radius:99px}.quiet{padding:9px 13px;background:#ffffff80;border:1px solid var(--line);color:var(--ink);border-radius:8px;font-size:12px}.site-footer{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1px;color:var(--muted);padding:28px 0;border-top:1px solid var(--line);margin-top:28px}.hero{display:grid;grid-template-columns:.93fr 1.07fr;align-items:center;gap:28px;padding:52px 0 32px}.hero h1{font-size:clamp(32px,4vw,51px);letter-spacing:-2px;line-height:1.2;margin:18px 0 10px}.hero .english{font-size:13px;letter-spacing:5px;font-weight:700;color:var(--green)}.hero .lead{font-size:15px;line-height:2;color:var(--muted);max-width:370px;margin:24px 0}.title-actions{display:flex;gap:12px;flex-wrap:wrap}.primary,.secondary{border-radius:10px;padding:14px 22px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:49px}.primary{background:var(--green);color:#fff}.secondary{background:var(--paper);color:var(--ink);border:1px solid var(--line)}.title-links{display:flex;gap:24px;margin-top:25px}.text-button{padding:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px}.hero-art{position:relative;background:#e3e9d8;border:1px solid #d1dbc6;border-radius:25px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(-2deg)}.hero-art canvas{width:100%;display:block}.art-label{position:absolute;top:18px;left:20px;font-size:10px;color:var(--green);font-weight:800;letter-spacing:2px}.art-bottom{position:absolute;bottom:15px;right:20px;font-size:9px;letter-spacing:1px;color:#6f795f}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:28px 0}.feature-item{padding:20px 24px;border:1px solid var(--line);border-radius:12px;background:#ffffff44}.feature-number{font-size:10px;letter-spacing:2px;color:#9aa587}.feature-item h3{font-size:15px;margin:9px 0}.feature-item p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.page{padding:35px 0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}.page h2{font-size:27px;margin:7px 0}.page p{font-size:13px;color:var(--muted);line-height:1.9}.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}.stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.stage-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:120px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--ink)}.stage-card .num{font-size:24px;font-weight:800}.stage-card .name{font-size:12px;font-weight:700;margin-top:8px}.stage-card small{font-size:10px;margin-top:6px;color:var(--muted)}.stage-card.cleared{border-color:#8cbea1}.stage-card.cleared:after{content:'✓';position:absolute;right:12px;top:14px;color:#4a9270}.stage-card:disabled{opacity:.5}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.control-list{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:13px}.control-list dt{font-weight:800}.control-list dd{margin:0;color:var(--muted)}.rule-note{background:#e8eddf;border-radius:10px;padding:15px;font-size:13px;line-height:1.8}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.online-options{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:850px}.join-row{display:flex;gap:10px;flex-wrap:wrap}input,select{border:1px solid var(--line);border-radius:8px;background:#fff;padding:11px;color:var(--ink)}input{width:170px;font-size:20px;letter-spacing:3px}.room-code{font-size:42px;font-weight:800;letter-spacing:8px;line-height:1.2}.lobby-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}.slot{padding:20px 16px;min-height:180px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--slot,#ccd4c4);border-radius:10px}.slot h3{font-size:18px;margin:14px 0 8px}.slot .slot-meta{font-size:10px;letter-spacing:1px;color:var(--muted)}.slot select{width:100%;font-size:12px}.slot .text-button{margin-top:14px}.lobby-settings{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}.lobby-settings label{display:flex;flex-direction:column;gap:9px;font-size:12px;font-weight:700}.lobby-settings .primary{margin-left:auto}.settings-list{display:flex;flex-direction:column;gap:22px;max-width:460px}.settings-list label{display:flex;gap:20px;align-items:center;justify-content:space-between}.settings-list input[type=checkbox]{width:22px;height:22px}.settings-list input[type=range]{width:200px;letter-spacing:0}.play-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0}#hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}.hud-stage{font-size:13px;font-weight:800}.hud-counter{color:var(--muted);font-size:11px}.score-chip{border-radius:6px;border:1px solid var(--line);border-left:4px solid var(--color);padding:5px 9px;background:var(--paper);font-size:12px;font-weight:700}.score-chip.dead{opacity:.38}.arena-wrap{position:relative;width:100%;max-width:960px;margin:auto;aspect-ratio:8/5;border-radius:14px;box-shadow:0 12px 24px #32443125;overflow:hidden;background:#dce2ca;border:2px solid #b3bfa1}#canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.arena-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#213c3480;backdrop-filter:blur(3px);padding:18px}.result-card{background:var(--paper);border-radius:16px;text-align:center;max-width:480px;padding:30px;box-shadow:var(--shadow)}.result-card h2{font-size:30px;margin:12px 0;letter-spacing:1px}.result-card p{font-size:13px;color:var(--muted);line-height:1.8}.result-card .button-row{justify-content:center}.result-card button{font-size:12px;padding:12px 17px}.play-footer{display:flex;justify-content:space-between;gap:15px;padding:12px 0;font-size:10px;color:var(--muted)}.play-footer b{margin:0 4px;color:var(--ink);font-size:10px}.touch-controls{display:none}.stick{width:100px;height:100px;border-radius:50%;border:1px solid #87977788;background:#eef3e298;position:relative;touch-action:none;user-select:none}.stick:before,.stick:after{content:'';position:absolute;background:#83957555;left:20%;right:20%;height:1px;top:50%}.stick:after{height:60%;width:1px;top:20%;left:50%;right:auto}.stick i{display:block;position:absolute;width:40%;height:40%;top:30%;left:30%;border-radius:50%;background:#536e5299;z-index:1}.stick span{position:absolute;bottom:-15px;left:0;right:0;text-align:center;font-size:8px;font-weight:800;letter-spacing:2px}.touch-right{display:flex;align-items:center;gap:12px}.touch-buttons{display:flex;flex-direction:column;gap:9px}.touch-buttons button{border-radius:50%;width:64px;height:64px;background:var(--green);border:2px solid #fff8;color:#fff;font-size:11px;font-weight:800;touch-action:none}.touch-buttons #mineButton{width:50px;height:50px;margin:auto;background:#c29337}#rotateNotice{display:none}#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#253f37;color:#fff;padding:13px 20px;border-radius:10px;max-width:90vw;font-size:13px;z-index:30}.stage-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:25px}.preview{width:100%;border-radius:12px;background:#dce2ca}.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.legend span{font-size:10px;background:#e6ecdd;padding:6px 9px;border-radius:5px}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}.progress{font-size:12px;color:var(--green)}
@media(max-width:850px){.app{padding:0 20px}.hero{gap:18px;padding:35px 0 20px}.hero h1{font-size:32px}.hero .lead{font-size:12px;margin:18px 0}.primary,.secondary{padding:12px 15px}.feature-strip{gap:12px}.feature-item{padding:16px}.stage-grid{grid-template-columns:repeat(4,1fr)}.slots{gap:8px}.slot{padding:14px 10px}.badge{display:none}.topbar{height:75px}.online-options{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hero{grid-template-columns:1fr}.hero h1{font-size:39px}.hero-art{order:-1;max-height:250px;transform:rotate(-1deg)}.hero-art canvas{margin-top:-35px}.feature-strip{grid-template-columns:1fr}.feature-item{padding:14px 18px}.feature-item p{font-size:12px}.stage-grid{grid-template-columns:repeat(3,1fr)}.stage-card{padding:13px;min-height:110px}.online-options,.info-grid,.stage-intro{grid-template-columns:1fr}.slots{grid-template-columns:1fr 1fr}.lobby-head{align-items:flex-start}.room-code{font-size:30px;letter-spacing:4px}.site-footer span:last-child{display:none}.topbar{gap:8px}.brand{font-size:10px}.brand-sub{font-size:7px}.top-actions{gap:4px}.quiet{padding:7px 9px;font-size:10px}.page-heading h2{font-size:23px}.result-card{padding:20px}.result-card h2{font-size:23px}}
@media(pointer:coarse){body.playing{overflow:hidden;overscroll-behavior:none;touch-action:none}.playing .site-footer,.playing .topbar,.playing .play-footer{display:none}.playing .app{padding:0 12px}.playing #play{height:100dvh;padding:0}.playing .play-top{height:40px;padding:4px 0}.playing .arena-wrap{height:calc(100dvh - 48px);width:auto;max-width:calc((100dvh - 48px)*1.6);margin:auto}.touch-controls{display:flex;position:fixed;bottom:20px;left:22px;right:22px;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:5}.touch-controls>*{pointer-events:auto}.playing #hud{font-size:10px;gap:5px}.playing .score-chip{font-size:10px;padding:3px 5px}.playing .hud-counter{font-size:9px}.playing .result-card{padding:20px}.playing .result-card h2{font-size:24px}.playing .result-card .button-row{margin-top:12px}.playing .result-card button{padding:9px 12px}}
@media(pointer:coarse) and (orientation:portrait){.playing #rotateNotice{position:fixed;inset:0;background:#edf2e7;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center}.rotate-icon{font-size:75px;color:var(--green)}#rotateNotice strong{font-size:19px}#rotateNotice p{font-size:12px;color:var(--muted)}}
@media(max-height:420px) and (pointer:coarse){.stick{width:78px;height:78px}.touch-controls{bottom:16px;left:16px;right:16px}.touch-buttons button{width:53px;height:53px}.touch-buttons #mineButton{width:42px;height:42px}.touch-right{gap:9px}}

body:has(#arenaOverlay:not([hidden])) .touch-controls{display:none}