@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');
:root{--paper:#f6f4ef;--ink:#20242d;--muted:#777c89;--line:#ddd9cf;--yellow:#ffd543;--pink:#ff5d80;--cyan:#58d4de;--violet:#8e7bff;--night:#171c28;--green:#44c986}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.topbar{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1250px)/2));position:relative;z-index:4}.logo{color:var(--ink);text-decoration:none;display:grid;grid-template-columns:30px auto;grid-template-rows:17px 11px;column-gap:10px}.logo span{grid-row:1/3;background:var(--yellow);border-radius:8px;display:grid;place-items:center;font-size:19px}.logo strong{font-size:14px;letter-spacing:-.02em}.logo small{font:8px 'DM Mono';letter-spacing:.14em;color:#99958c}.link-state{font:11px 'DM Mono';color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:8px 12px}.link-state i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#aaa;margin-right:6px}.link-state.online{color:var(--ink)}.link-state.online i{background:var(--green)}main{max-width:1250px;margin:auto;padding:0 max(22px,calc((100vw - 1250px)/2))}.screen{display:none}.screen.active{display:block}.home-hero{height:420px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font:10px 'DM Mono';letter-spacing:.14em;color:var(--violet);margin:0 0 18px}.home-hero h1{font-size:clamp(45px,6.1vw,80px);line-height:1.02;letter-spacing:-.08em;margin:0 0 20px}.home-hero h1 em{color:var(--pink);font-style:normal;position:relative}.home-hero h1 em:after{content:'';position:absolute;z-index:-1;left:2px;right:-5px;bottom:4px;height:9px;background:var(--yellow);transform:rotate(-2deg)}.lede{color:var(--muted);font-size:13px;line-height:1.8;max-width:520px}.button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:12px 16px;font-size:12px;font-weight:700;color:var(--ink)}.button.primary{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 8px 18px #20242d20}.button.primary b{color:var(--yellow);font-size:17px;margin-left:16px}.hero-machine{height:310px;width:370px;position:relative}.orbit{position:absolute;border:1px solid #d4d0c5;border-radius:50%;width:365px;height:155px;top:78px;transform:rotate(-23deg)}.orbit.two{height:235px;width:280px;left:45px;top:38px;transform:rotate(55deg)}.machine{position:absolute;left:117px;top:106px;width:140px;height:98px;background:var(--yellow);border:7px solid var(--ink);border-radius:20px;display:grid;place-items:center;font-size:35px;font-weight:800;transform:rotate(-8deg);box-shadow:9px 12px 0 var(--ink)}.machine span{color:var(--pink)}.float-bubble{position:absolute;width:42px;height:42px;border-radius:50%;box-shadow:inset 7px 7px #fff5,inset -7px -7px #0002}.float-bubble.pink{left:22px;top:35px;background:var(--pink)}.float-bubble.cyan{right:13px;top:64px;background:var(--cyan)}.float-bubble.violet{right:32px;bottom:32px;background:var(--violet)}.section-head{display:flex;align-items:center;gap:13px;margin:10px 0 18px}.section-head span{font:10px 'DM Mono';color:#9c998f}.section-head b{font-size:13px}.section-head i{height:1px;background:var(--line);flex:1}.section-head small{font:10px 'DM Mono';color:#9c998f}.arcade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.arcade-card{border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left;overflow:hidden;padding:0;transition:.2s;box-shadow:0 2px #fff}.arcade-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px #26333418}.card-top{display:flex;justify-content:space-between;padding:15px 18px 8px;font:10px 'DM Mono';color:#999}.card-top b{font-size:17px}.arcade-card .art{height:180px;position:relative;overflow:hidden}.pop2 .art{background:#d9f2ef}.pop3 .art{background:#292641}.surge .art{background:#ffd2c0}.arcade-card h2{font-size:20px;letter-spacing:-.05em;margin:17px 18px 5px}.arcade-card p{margin:0 18px 20px;color:var(--muted);font-size:12px}.arcade-card>small{display:block;margin:0 18px 20px;font:10px 'DM Mono';color:#5b5c65}.arcade-card>small b{float:right;color:var(--pink);font-size:17px}.art-bubble{position:absolute;width:75px;height:75px;border-radius:50%;box-shadow:inset 8px 8px #fff5,inset -8px -8px #0002}.art-bubble.a{background:var(--pink);left:38px;top:22px}.art-bubble.b{background:var(--yellow);left:111px;top:61px}.art-bubble.c{background:var(--violet);left:185px;top:25px}.art-cross{position:absolute;right:24px;bottom:18px;font-size:45px}.art-line{position:absolute;left:0;right:0;top:53px;height:8px;background:#8e7bff;transform:rotate(-15deg)}.art-bubble.d{background:var(--cyan);left:77px;top:45px}.art-bubble.e{background:var(--pink);left:154px;top:70px}.art-stone{position:absolute;right:28px;bottom:23px;color:#fff;font-size:45px;transform:rotate(18deg)}.art-sun{position:absolute;width:142px;height:142px;border-radius:50%;background:#f78e72;right:-15px;top:-32px}.art-rabbit{position:absolute;left:45px;bottom:18px;color:#745565;font-size:87px}.art-rabbit.two{left:137px;bottom:42px;font-size:63px}.art-target{position:absolute;right:24px;bottom:20px;color:#fff;font-size:64px}.notice{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding:17px 0;margin-top:25px;color:var(--muted);font-size:11px}.notice>span{font-size:24px;color:var(--violet)}.notice p{margin:0;flex:1}.notice code{font-family:'DM Mono';font-size:10px}.text-button{background:transparent;border:0;text-decoration:underline;color:var(--ink);font-size:11px}.game-nav{height:120px;display:flex;align-items:center;justify-content:space-between}.back{border:0;background:transparent;color:var(--muted);font-size:12px}.game-name{text-align:center}.game-name span{font:10px 'DM Mono';color:var(--violet)}.game-name h1{font-size:28px;letter-spacing:-.06em;margin:4px 0 0}.stage{background:var(--night);border-radius:19px;box-shadow:0 25px 60px #17202b30;min-height:600px;padding:26px;color:#fff;overflow:hidden}.stage-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font:11px 'DM Mono';color:#aeb5c4}.stage-top strong{font-size:20px;color:#fff}.stage-top button{border:1px solid #ffffff26;background:#ffffff12;color:#fff;padding:8px 11px;border-radius:7px}.canvas-wrap{max-width:860px;margin:auto;position:relative}.game-canvas{width:100%;height:auto;display:block;border-radius:13px;touch-action:none;background:#111824}.mobile-controls{display:flex;justify-content:center;gap:12px;margin-top:13px;flex-wrap:wrap}.mobile-controls button{min-width:110px;min-height:46px;border:1px solid #ffffff35;background:#ffffff14;color:#fff;border-radius:10px;font-weight:700}.mobile-controls .color-dot{min-width:44px;width:44px;padding:0;border-radius:50%}.mobile-controls .selected{box-shadow:0 0 0 3px #fff}.game-help{text-align:center;color:#aeb5c4;font-size:11px;margin:12px 0 0}.modal{display:none;position:fixed;inset:0;background:#1d2533aa;backdrop-filter:blur(8px);z-index:9;align-items:center;justify-content:center;padding:17px}.modal.active{display:flex}.modal-card{background:var(--paper);width:min(900px,100%);max-height:calc(100vh - 34px);overflow:auto;border-radius:17px;padding:31px;position:relative}.close{position:absolute;right:18px;top:12px;border:0;background:transparent;font-size:28px;color:#888}.modal-card h2{font-size:34px;letter-spacing:-.07em;margin:0 0 8px}.modal-copy,.hint{font-size:12px;line-height:1.7;color:var(--muted);max-width:660px}.lan-tabs{display:flex;gap:10px;border-bottom:1px solid var(--line);margin-top:22px}.tab{border:0;background:transparent;padding:10px 2px;color:var(--muted);font-size:12px}.tab.active{color:var(--ink);font-weight:800;border-bottom:2px solid var(--pink)}.panel{display:none;padding-top:18px}.panel.active{display:block}.join-row{display:grid;grid-template-columns:auto 1fr auto;gap:9px}.join-row input{min-width:0;border:1px solid var(--line);border-radius:8px;padding:11px 12px;text-transform:uppercase;letter-spacing:.15em;background:#fff}.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.signal-grid label{font-size:11px;font-weight:700}.signal-grid textarea{height:85px;width:100%;display:block;border:1px solid var(--line);border-radius:8px;margin:7px 0;padding:8px;font:10px 'DM Mono';resize:vertical;background:#fff}.link-hint{min-height:18px;color:#bc5d6d;font-size:11px}.network-button{padding:8px 12px;font-size:11px}footer{max-width:1250px;margin:0 auto;padding:0 max(22px,calc((100vw - 1250px)/2)) 23px;display:flex;justify-content:space-between;color:#9c998f;font:9px 'DM Mono'}
@media(max-width:800px){.home-hero{height:auto;min-height:430px;padding:35px 0}.hero-machine{display:none}.arcade-grid{grid-template-columns:1fr}.arcade-card .art{height:155px}.notice{align-items:flex-start;line-height:1.7}.notice .text-button{display:none}.stage{padding:14px;border-radius:14px;min-height:calc(100vh - 180px)}.game-nav{height:93px}.game-name h1{font-size:22px}.game-name span{font-size:9px}.game-nav .back{font-size:11px}.game-nav .network-button{font-size:10px;padding:8px}.stage-top{margin-bottom:10px}.signal-grid{grid-template-columns:1fr}.modal-card{padding:26px 18px}.join-row{grid-template-columns:1fr 1fr}.join-row input{grid-column:1/-1;grid-row:1}.join-row .primary{grid-column:1}.join-row #join-room{grid-column:2}.link-state{font-size:9px}footer{display:block;line-height:1.8}.section-head small{display:none}}
@media(orientation:landscape) and (max-height:600px){.home-hero{min-height:320px}.game-nav{height:80px}.stage{min-height:calc(100vh - 110px)}}

.server-url{display:block;color:var(--muted);font-size:11px;margin-bottom:12px}.server-url input{display:block;width:min(520px,100%);margin-top:6px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff;font:11px "DM Mono"}

/* Game stage: the whole board and its controls stay on one screen, in either orientation. */
.canvas-wrap{width:min(100%,860px,max(260px,calc(100vh - 330px)));width:min(100%,860px,max(260px,calc(100dvh - 330px)))}
.stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.game-canvas{-webkit-tap-highlight-color:transparent}
.mobile-controls button{touch-action:manipulation;padding:0 16px}
.mobile-controls button:disabled{opacity:.4}
.mobile-controls .beat{min-width:150px;min-height:58px;background:#58d4de30;border-color:#58d4de;font-size:16px}
.mobile-controls .player-toggle{background:transparent;color:#aeb5c4}
body.playing{overscroll-behavior:none}
@media(max-width:800px){body.playing .topbar,body.playing footer{display:none}body.playing main{padding:0 10px}.stage{min-height:0;padding-bottom:max(14px,env(safe-area-inset-bottom))}.canvas-wrap{width:min(100%,max(260px,calc(100vh - 290px)));width:min(100%,max(260px,calc(100dvh - 290px)))}.mobile-controls{gap:8px}.mobile-controls button{min-width:0;flex:1 1 30%}.mobile-controls .player-toggle{flex-basis:100%;min-height:38px}}
@media(orientation:landscape) and (max-height:600px){body.playing .topbar,body.playing footer{display:none}body.playing main{padding:0 max(10px,env(safe-area-inset-left))}.game-nav{height:48px}.game-name h1{font-size:17px;margin:0}.game-name span{display:none}.stage{min-height:0;padding:10px;display:grid;grid-template-columns:auto minmax(150px,1fr);grid-template-rows:auto auto 1fr;column-gap:14px}.canvas-wrap{grid-column:1;grid-row:1/4;margin:0;width:max(200px,calc(100vh - 78px));width:max(200px,calc(100dvh - 78px))}.stage-top{grid-column:2;flex-direction:column;align-items:flex-start;gap:8px}.mobile-controls{grid-column:2;justify-content:flex-start;margin-top:0}.mobile-controls button{flex:1 1 40%}.game-help{grid-column:2;text-align:left;align-self:start}}
.stage-top>div{min-width:0}.stage-top span{display:block;margin-bottom:3px}.stage-top button{flex:none;white-space:nowrap}
@media(max-width:800px){.stage-top strong{font-size:15px}}