@font-face{font-family:BubbleLocal;src:local("Hannotate SC"),local("Yuanti SC");font-display:swap}
:root{--ink:#243e37;--muted:#81918a;--paper:#f6f4e9;--green:#237461;--mint:#7acbb1;--line:#e0e4d6;--coral:#e98170;--yellow:#efc76e;--body:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;--display:BubbleLocal,"Hiragino Maru Gothic ProN","PingFang SC",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 var(--body);background-image:radial-gradient(#788e6020 .7px,transparent .7px);background-size:7px 7px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--coral);outline-offset:4px}button{transition:transform .15s,background .15s,box-shadow .15s}button:not(:disabled):active{transform:translateY(2px)}[hidden]{display:none!important}.page-shell{max-width:1336px;margin:auto;padding:0 48px}.site-header{height:93px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center;color:var(--ink);text-decoration:none}.brand>span{font-size:20px;letter-spacing:1px;font-weight:850;line-height:1.15}.brand small{display:block;letter-spacing:2.2px;font-size:8px;font-weight:650;margin-top:7px}.brand img{transform:rotate(-8deg)}nav{display:flex;gap:26px;align-items:center}.connection{display:flex;align-items:center;gap:7px;font-size:11px;color:#778b80}.connection i,.arena-chip i{display:inline-block;width:6px;height:6px;background:#a4ac99;border-radius:50%}.connection.online i{background:#5caa7e;box-shadow:0 0 0 3px #5caa7e14}.text-button{border:0;background:none;font-size:12px;font-weight:700;padding:8px 0}.text-button span{padding-left:6px;color:var(--muted)}.sound-button{position:relative;border:1px solid #d8dfce;width:33px;height:33px;border-radius:50%;background:transparent;font-size:18px}.sound-off{position:absolute;left:8px;top:2px;font-size:22px;color:var(--coral)}.intro{display:flex;justify-content:space-between;align-items:center;padding:32px 7px 34px}.eyebrow{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:2.3px;font-weight:750;margin:0 0 10px;color:#7c9784}.eyebrow>span{width:7px;height:7px;border:1.5px solid #8aa386;border-radius:50%}h1{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);letter-spacing:1px;line-height:1.25;margin:0;font-weight:800}h1 em{font-style:normal;color:var(--green)}.title-spark{display:inline-block;font-family:serif;font-size:43px;color:var(--coral);margin-left:12px;transform:rotate(12deg)}.intro-copy{font-size:12px;color:#829186;margin:12px 0 0;letter-spacing:.3px}.postmark{width:99px;height:99px;border:1px solid #8caa8c;border-radius:50%;position:relative;transform:rotate(12deg);display:flex;align-items:center;justify-content:center;flex-direction:column;margin-right:15px;outline:1px dashed #9fb69b;outline-offset:-6px;color:#759775}.postmark span{font-size:8px;letter-spacing:1.4px;text-align:center;line-height:1.3}.postmark strong{font:italic 25px Georgia,serif;letter-spacing:1px}.postmark i{position:absolute;right:-6px;bottom:5px;font-size:27px;background:var(--paper);line-height:1;font-style:normal}.game-layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:24px;align-items:start}.party-panel{background:#fffefa;border:1px solid #e1e6da;border-radius:21px;padding:24px 22px;box-shadow:0 6px 0 #e4e8d7,0 12px 25px #57775508}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}.tiny-label{font-size:8px;font-weight:800;letter-spacing:1.3px;color:#8b9c8b}.tag{border:1px solid #e2e7da;border-radius:5px;background:#f7f8f0;font-size:9px;white-space:nowrap;padding:2px 6px;color:#879880}h2{font-size:20px;margin:15px 0 18px;font-weight:850;font-family:var(--display)}.skin-picker{display:flex;gap:10px;margin:0 0 20px}.skin{flex:1;height:57px;border:1.5px solid #e5e9df;border-radius:13px;position:relative;display:flex;align-items:center;justify-content:center;background:#f9faf5}.skin.selected{border-color:var(--green);background:#eaf5ec;box-shadow:0 0 0 2px #2374610a}.skin-check{position:absolute;right:-4px;bottom:-4px;background:var(--green);color:white;width:17px;height:17px;font-size:11px;border-radius:50%;border:2px solid #fffefa;display:none}.skin.selected .skin-check{display:block}.mini-buddy{display:block;width:29px;height:28px;background:var(--buddy,#83cbb1);border:1.5px solid #38594830;border-radius:45% 45% 38% 38%;position:relative;box-shadow:0 3px 0 #0000000d}.mini-buddy:before{content:"";position:absolute;left:7px;top:11px;width:3px;height:5px;background:#2e5546;border-radius:50%;box-shadow:9px 0 #2e5546}.mini-buddy:after{content:"";position:absolute;width:9px;height:5px;border-bottom:1.5px solid #2e5546;border-radius:50%;left:9px;top:15px}.mint{--buddy:#83cbb1}.peach{--buddy:#efa795}.honey{--buddy:#efd18a}.sky{--buddy:#9fc9dc}.field-label{font-size:11px;font-weight:700;display:block;margin-bottom:7px}input{width:100%;border:1px solid #dfe5d9;border-radius:10px;background:#fbfcf6;height:42px;padding:0 12px;color:var(--ink);font-size:12px;outline:none}input::placeholder{color:#a5b0a0}.choose-label{margin-top:22px}.mode-picker{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}.mode{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:1px solid #e3e8dd;background:#fffefa;border-radius:11px;text-align:left}.mode.selected{background:#edf5e9;border-color:#93b695}.mode-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:#d6e8c4;font-size:21px;color:#639351}.duel-icon{background:#fae8d8;color:#ca8c57}.mode strong{font-size:12px;display:block}.mode small{font-size:9px;color:#91a08e;display:block;margin-top:3px}.mode i{width:13px;height:13px;border:1px solid #d2dbcb;border-radius:50%;margin-left:auto}.mode.selected i{border:4px solid var(--green)}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 16px;height:46px;background:var(--green);color:white;border:1px solid #1d6857;border-radius:11px;font-size:12px;font-weight:700;box-shadow:0 3px 0 #185946;letter-spacing:.5px}.primary:not(:disabled):hover{background:#2b836e;transform:translateY(-1px);box-shadow:0 4px 0 #185946}.primary span{font-size:21px;font-weight:400}.divider{display:flex;align-items:center;gap:9px;margin:23px 0 12px}.divider:before,.divider:after{content:"";height:1px;background:#e7eade;flex:1}.divider span{font-size:9px;color:#9ba793;white-space:nowrap}.join-form{display:flex;gap:7px}.join-form input{min-width:0;font-size:11px;text-transform:uppercase;letter-spacing:1px;height:38px}.join-form button{background:#f1f3e8;border:1px solid #dfe5d2;border-radius:9px;min-width:56px;font-size:11px;font-weight:700}.panel-footnote{text-align:center;font-size:9px;color:#a4af9c;margin:15px 0 0}.arena-heading{display:flex;align-items:center;justify-content:space-between;padding:0 3px 15px;height:56px}.arena-heading>div{display:flex;align-items:center;gap:12px}.map-number{display:flex;align-items:center;justify-content:center;width:34px;height:37px;background:#e9edda;color:#7c956a;border:1px solid #d7dfc5;border-radius:9px;font-size:12px;letter-spacing:1px;font-weight:600}.arena-heading h2{font:800 16px/1.2 var(--display);margin:0 0 5px}.arena-heading p{font-size:9px;color:#97a28f;margin:0}.arena-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:#ebefe0;border:1px solid #dce4d1;border-radius:20px;font-size:9px;white-space:nowrap;color:#819775}.arena-chip i{background:#86a277}.arena-shell{position:relative;border-radius:21px;border:5px solid #b5cba0;box-shadow:0 6px 0 #829e76,0 12px 0 #dfe5d1,0 20px 35px #54785a0c;background:#a7bd85;overflow:hidden;isolation:isolate}.arena-shell canvas{display:block;width:100%;height:auto;touch-action:none;outline-offset:-7px}.arena-corner{position:absolute;bottom:6px;left:20px;font-size:6px;letter-spacing:1.3px;color:#435c3960;pointer-events:none}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#e7efd711;pointer-events:none}.overlay-card{background:#fffdf0f2;box-shadow:0 8px 0 #395b3233,0 14px 38px #365c3625;border:2px solid #fffef7;border-radius:22px;text-align:center;padding:23px 29px 18px;max-width:85%;min-width:245px;transform:rotate(-1deg)}.overlay-icon{display:block;margin:-47px auto 15px;width:53px;height:53px;border-radius:17px;transform:rotate(8deg);background:#efd288;color:#906e36;box-shadow:0 4px 0 #d3b465;border:3px solid #fffdf0;font-size:29px;line-height:47px}.overlay-card h2{margin:9px 0;font-size:21px;color:#42633c}.overlay-card p:not(.tiny-label){font-size:10px;color:#8c9877;margin:0;max-width:275px;line-height:1.8}.overlay-card .tiny-label{font-size:6px;color:#a1ab8a;margin:0}.overlay-dots{display:flex;justify-content:center;gap:5px;margin-top:16px}.overlay-dots i{width:5px;height:5px;background:#aac48d;border-radius:50%}.overlay-dots i:nth-child(2){background:#e6bd7a}.overlay-dots i:nth-child(3){background:#e2a198}.game-bottom{display:flex;align-items:center;justify-content:space-between;margin:23px 3px 0;gap:10px}.keyboard-legend{display:flex;gap:15px}.keyboard-legend>span{display:flex;align-items:center;gap:6px}kbd{font:9px var(--body);letter-spacing:.4px;padding:3px 6px;border:1px solid #d7decd;border-bottom:2px solid #c8d2ba;border-radius:5px;background:#fcfcf4;color:#7c8e70;white-space:nowrap}.keyboard-legend small{font-size:9px;color:#93a087}.live-note{font-size:9px;color:#99a58d;text-align:right}.page-footer{display:flex;justify-content:space-between;align-items:center;padding:33px 3px 22px;font-size:9px;color:#a0aa94}.page-footer i{font-size:14px;color:#91a47c;font-style:normal;margin-right:5px}.room-ticket{background:#f2f6e9;border:1px dashed #becbb0;border-radius:12px;padding:13px;text-align:center;position:relative;margin-bottom:24px}.room-ticket>span{font-size:10px;color:#859577}.room-ticket>strong{display:block;font-size:29px;letter-spacing:6px;padding-left:6px;font-weight:650;margin:3px 0 11px}.ticket-actions{display:flex;gap:5px}.ticket-actions button{background:#fffef7;border:1px solid #dce4cf;border-radius:7px;font-size:10px;padding:6px}.ticket-actions button:first-child{flex:1}.ticket-actions button:last-child{width:32px}.squad-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:10px}.squad-heading small{font-size:9px;color:#98a48c;font-weight:400}.squad{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}.squad li{display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 9px;border:1px solid #e5e9de;border-radius:10px}.squad .mini-buddy{flex:0 0 29px}.squad .player-name{font-size:11px;max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.squad .player-name small{display:block;font-size:8px;color:#9ca890}.squad .player-state{font-size:9px;color:#729c72;margin-left:auto;white-space:nowrap}.squad li.empty{border-style:dashed;background:#fcfdf8;color:#b1bbaa;font-size:10px}.empty-circle{width:27px;height:27px;border:1px dashed #c7d2b9;border-radius:50%;display:grid;place-items:center;color:#b7c1ab;font-size:17px}.room-hint{font-size:10px;color:#8e9e85;line-height:1.7;min-height:34px;margin:18px 0 13px}.leave-button{display:block;width:100%;margin-top:20px;text-align:center;background:none;border:0;font-size:10px;color:#98a48c;padding:7px}.my-stats{display:flex;justify-content:space-around;background:#f2f5e9;padding:12px 4px;border-radius:10px}.my-stats>span{color:#689479;text-align:center;font-size:14px}.my-stats small{display:block;font-size:9px;color:#98a48c}.my-stats b{font-weight:650}.boss-bar{position:absolute;top:10px;left:16%;right:16%;border:1px solid #a4513650;background:#fff9e9ed;border-radius:10px;padding:7px 11px;box-shadow:0 3px 0 #763e2920}.boss-bar>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.boss-bar strong{font-size:10px;color:#9a5942}.boss-bar span{font-size:9px;color:#a17954}.boss-track{height:6px;background:#ecdcca;border-radius:8px;overflow:hidden}.boss-track>div{height:100%;width:100%;background:#df8961;border-radius:8px;transition:width .2s}.stage-toast{position:absolute;top:22%;left:50%;transform:translateX(-50%);background:#fffbeef0;border:1px solid #fff5e2;border-radius:20px;padding:7px 16px;box-shadow:0 3px 0 #536a3420;color:#728854;font-size:12px;white-space:nowrap;pointer-events:none}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#254f43;color:#fffef5;border-radius:12px;padding:12px 20px;box-shadow:0 6px 24px #183a3325;font-size:12px;z-index:10;max-width:90vw;text-align:center}.touch-controls{display:none;align-items:center;justify-content:space-between;padding:20px 15px 0;touch-action:none;user-select:none}.touch-actions{display:flex;align-items:center;gap:12px}.touch-actions button{border:1px solid #c5d6bd;border-radius:50%;width:62px;height:62px;background:#edf4e4;box-shadow:0 4px 0 #b5c5a9;font-size:9px;touch-action:none}.touch-actions #touch-bomb{width:82px;height:82px;background:#77b7a0;color:white;border-color:#69a48e;box-shadow:0 5px 0 #4e8e78;font-size:28px}.touch-actions #touch-bomb span{display:block;font-size:10px;margin-top:-4px}dialog{width:min(510px,92vw);border:1px solid #d8e2cb;border-radius:22px;padding:32px;background:#fffdf3;color:var(--ink);box-shadow:0 20px 100px #24432f30}dialog::backdrop{background:#233f3160;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:18px;top:13px;border:0;background:none;font-size:26px;color:#8b9b80}dialog h2{font-size:23px;margin:13px 0 25px}.help-row{display:flex;gap:14px;margin-bottom:18px}.help-row>b{font-size:12px;color:#91ac7e;background:#edf2e0;border-radius:7px;height:29px;padding:5px 7px}.help-row h3{margin:0 0 5px;font-size:13px}.help-row p,.help-tip{font-size:11px;color:#87967b;line-height:1.85;margin:0}.help-tip{background:#f2f3e7;padding:13px;border-radius:10px;margin:4px 0 22px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:761px){body:has(.in-game) .intro{display:none}body:has(.in-game) .site-header{height:66px;margin-bottom:22px}.in-game .arena-shell{max-width:calc((100dvh - 192px) * 1.1818);margin-inline:auto}.in-game .arena-heading,.in-game .game-bottom{max-width:calc((100dvh - 192px) * 1.1818);margin-inline:auto}.in-game .room-ticket,.in-game #room-panel>h2{display:none}.in-game .squad-heading{margin-top:19px}.in-game .my-stats{margin-top:20px}.in-game .party-panel{max-height:calc(100dvh - 118px);overflow:auto}.in-game .game-bottom{margin-top:19px}body:has(.in-game) .page-footer{padding-top:24px}}
@media(min-width:1450px){.page-shell{max-width:1430px}.game-layout{grid-template-columns:300px minmax(0,1fr)}.party-panel{padding:26px}.arena-shell{max-width:920px}.intro{padding-bottom:40px}}
@media(max-width:1050px){.page-shell{padding:0 27px}.game-layout{grid-template-columns:257px minmax(0,1fr);gap:20px}.party-panel{padding:21px 17px}.intro{padding:28px 2px}.postmark{width:82px;height:82px}.postmark strong{font-size:21px}.postmark span{font-size:7px}.live-note{display:none}.arena-heading p{max-width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.overlay-card{min-width:210px;padding:19px}.overlay-card h2{font-size:17px}.overlay-card p:not(.tiny-label){font-size:9px}.arena-heading h2{font-size:14px}.keyboard-legend{gap:10px}.skin-picker{gap:8px}.tiny-label{font-size:7px}}
@media(max-width:760px){.page-shell{padding:0 18px}.site-header{height:73px}.brand>span{font-size:17px}.brand img{width:37px;height:37px}.brand small{font-size:6px;letter-spacing:1.9px}.site-header nav{gap:14px}.connection{font-size:9px}.text-button{font-size:10px}.sound-button{display:none}.intro{padding:25px 2px 25px}.intro h1{font-size:30px}.eyebrow{font-size:7px;letter-spacing:1.7px}.title-spark{font-size:29px;margin-left:6px}.intro-copy{font-size:10px;max-width:330px;line-height:1.9}.postmark{display:none}.game-layout{grid-template-columns:1fr;gap:27px}.party-panel{padding:21px}.party-panel h2{margin-bottom:14px}.skin-picker{float:right;width:48%;gap:6px;margin:0}.skin{height:49px}.skin .mini-buddy{width:23px;height:25px}.skin .mini-buddy:before{left:5px}.skin .mini-buddy:after{left:7px}.field-label{margin-top:0;width:47%}#nickname{width:47%}.choose-label{clear:both;padding-top:18px;margin-top:0;margin-bottom:8px}.mode-picker{flex-direction:row;gap:10px;margin-bottom:15px}.mode{padding:10px;gap:8px}.mode i{display:none}.mode-icon{width:28px;height:29px}.mode strong{font-size:11px}.mode small{font-size:8px}.divider{margin:21px 0 11px}.panel-footnote{margin-top:12px}.panel-heading .tiny-label{font-size:8px}.arena-heading{height:49px;padding-bottom:12px}.arena-shell{border-width:4px;border-radius:17px}.overlay-card{padding:16px 20px}.overlay-card h2{font-size:18px}.keyboard-legend kbd{font-size:8px}.game-bottom{margin-top:20px}.keyboard-legend{gap:14px}.touch-controls{display:flex}.page-footer{font-size:8px;padding-top:26px;gap:10px}.page-footer>span:last-child{font-size:7px}.squad{display:grid;grid-template-columns:1fr 1fr;gap:7px}.squad li{padding:8px;gap:6px}.squad .player-name{max-width:90px;font-size:10px}.squad .player-state{font-size:8px}.room-ticket{padding:10px 13px;margin-bottom:16px}.room-ticket>strong{font-size:25px;margin:0 0 6px}.room-hint{min-height:0;margin:13px 0}.leave-button{margin-top:13px}.my-stats{padding:8px}.game-layout.in-game .party-panel{padding:14px 17px}.game-layout.in-game #room-panel>h2,.game-layout.in-game .room-ticket,.game-layout.in-game .squad-heading,.game-layout.in-game .room-hint{display:none}.game-layout.in-game .panel-heading{margin-bottom:11px}.game-layout.in-game .my-stats{margin-top:12px}.game-layout.in-game .squad li.empty{display:none}.game-layout.in-game .leave-button{margin-top:6px;padding:3px}.boss-bar{left:10%;right:10%}.boss-bar strong{font-size:9px}.boss-bar span{font-size:8px}.stage-toast{font-size:10px}.arena-heading p{max-width:225px}.arena-chip{font-size:8px}.game-layout.in-game{gap:22px}}
@media(max-width:370px){.page-shell{padding:0 12px}.intro h1{font-size:26px}.connection{display:none}.mode{padding:9px 7px;gap:6px}.mode small{font-size:7px}.mode-icon{width:25px}.touch-controls{padding-left:3px;padding-right:3px}.squad .player-name{max-width:67px}.keyboard-legend{gap:9px}}
@media(prefers-reduced-motion:no-preference){.intro{animation:arrive .45s both}.party-panel{animation:arrive .5s .08s both}.play-area{animation:arrive .5s .15s both}.postmark{animation:stamp .65s .2s both}.overlay-dots i{animation:bob 1.8s ease-in-out infinite}.overlay-dots i:nth-child(2){animation-delay:.15s}.overlay-dots i:nth-child(3){animation-delay:.3s}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes stamp{from{opacity:0;transform:rotate(28deg) scale(1.1)}to{opacity:1;transform:rotate(12deg) scale(1)}}@keyframes bob{50%{transform:translateY(-3px)}}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

#invite-link{display:block;width:100%;resize:vertical;border:1px solid #dfe5d9;border-radius:10px;background:#fbfcf6;padding:12px;color:var(--ink);font:16px/1.5 var(--body);overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}#invite-link:focus-visible{outline:3px solid var(--coral);outline-offset:3px}#invite .field-label{width:100%}#invite-status{margin:14px 0 20px;min-height:64px}
#spectator-note{margin:19px 3px 0;padding:9px 12px;border:1px solid #dce4d1;border-radius:10px;background:#edf3e5;color:#53784e;font-size:11px;line-height:1.7;text-align:center}#spectator-note:not([hidden])+.game-bottom{margin-top:10px}

/* 浮动摇杆由左半屏触点唤出，技能按钮留在右侧。 */
.in-game .play-area,.in-game .party-panel{animation:none;transform:none}
#joystick-layer{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
#joystick{position:absolute;transform:translate(-50%,-50%);pointer-events:none;width:134px;height:134px;border:2px solid #c7d5b6;border-radius:50%;background:#e8efdcbf;box-shadow:inset 0 3px 12px #758a5420,0 3px 0 #c8d5b9;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:4px}
#move-hint{display:grid;place-items:center;width:134px;min-height:134px;color:#8a9b7e;font-size:11px;line-height:2;text-align:center}#move-hint:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:14px}
#joystick-knob{position:absolute;left:calc(50% - 29px);top:calc(50% - 29px);width:58px;height:58px;border:2px solid #f5f8e9;border-radius:50%;background:#a9c68f;box-shadow:0 5px 0 #87a36f,0 8px 15px #65874a28;pointer-events:none;transition:transform .12s}
#joystick.active #joystick-knob{transition:none;background:#8eb875;box-shadow:0 3px 0 #73965e,0 5px 10px #65874a30}
.joystick-arrows{position:absolute;inset:0;color:#87a072;pointer-events:none;font-size:17px}.joystick-arrows i{position:absolute;font-style:normal}.joystick-arrows i:nth-child(1){left:calc(50% - 5px);top:5px}.joystick-arrows i:nth-child(2){right:7px;top:calc(50% - 13px)}.joystick-arrows i:nth-child(3){left:calc(50% - 5px);bottom:4px}.joystick-arrows i:nth-child(4){left:7px;top:calc(50% - 13px)}
.touch-actions button{display:flex;flex-direction:column;justify-content:center;align-items:center;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;transition:transform .08s,filter .08s}
.touch-actions button strong{font-size:12px}.touch-actions button small{font-size:8px;line-height:1.4;margin-top:4px;font-weight:500;white-space:nowrap}.touch-actions #touch-bomb{width:94px;height:94px}.touch-actions #touch-bomb span{font-size:12px;margin-top:-2px}.touch-actions #touch-bomb small{font-size:9px}
.touch-actions button.pressed{transform:translateY(4px) scale(.96);filter:brightness(1.13)}
.touch-actions button[aria-disabled=true],#move-hint[aria-disabled=true]{opacity:.52}
#control-hint{margin:0;grid-column:1/-1;color:#71856a;font-size:10px;text-align:center;line-height:1.7;min-height:18px}
@media(max-width:760px),(pointer:coarse){
  html:has(.in-game):not(:has(dialog[open])),body:has(.in-game):not(:has(dialog[open])){touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  body:has(.in-game){padding-bottom:calc(180px + env(safe-area-inset-bottom,0px))}
  body:has(.in-game) .intro,body:has(.in-game) .site-header,body:has(.in-game) .page-footer{display:none}
  body:has(.in-game) .page-shell{padding:10px 14px 0}
  .game-layout.in-game{grid-template-columns:1fr;gap:12px}
  .in-game .party-panel{padding:10px 12px;max-height:none;overflow:visible}
  .in-game #room-panel>h2,.in-game .room-ticket,.in-game .squad-heading,.in-game .room-hint,.in-game .my-stats{display:none}
  .in-game .panel-heading{margin-bottom:6px}.in-game .squad{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0}.in-game .squad li{padding:5px 7px;gap:6px}.in-game .squad li.empty{display:none}.in-game .squad .player-name small{display:none}.in-game .squad .mini-buddy{transform:scale(.7);margin:-3px}.in-game .squad .player-name{max-width:105px;font-size:10px}.in-game .squad .player-state{font-size:9px}
  .in-game .leave-button{padding:2px;margin-top:5px;font-size:9px}
  .in-game .arena-heading{height:37px;padding-bottom:9px}.in-game .arena-heading p{font-size:8px}.in-game .arena-heading h2{font-size:14px}
  .in-game .arena-shell{max-width:min(100%,calc((100dvh - 380px - env(safe-area-inset-bottom,0px)) * 1.1818));margin-inline:auto}
  .in-game .game-bottom{display:none}
  .touch-controls{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 8px;position:fixed;left:0;right:0;bottom:0;z-index:5;padding:9px max(18px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,#f6f4e9 20%);pointer-events:none}
  .joystick-wrap,.touch-actions{pointer-events:auto}.touch-actions{gap:12px}
  #spectator-note{margin-top:15px;padding:6px 9px;font-size:10px}
}
@media(max-width:370px){#move-hint{width:118px;min-height:118px}#joystick{width:118px;height:118px}.touch-controls{padding-inline:13px}.touch-actions{gap:9px}.touch-actions #touch-interact{width:54px;height:54px}.touch-actions #touch-bomb{width:82px;height:82px}.touch-actions button strong{font-size:10px}#control-hint{font-size:9px}}
@media(orientation:landscape) and (max-height:600px) and (pointer:coarse){
  body:has(.in-game){padding-bottom:0}body:has(.in-game) .page-shell{padding:5px 165px 0 155px}
  .in-game .party-panel,.in-game #room-panel{display:contents}.in-game #room-panel>*{display:none!important}.in-game #room-panel>#leave{display:block!important;position:fixed;left:18px;top:12px;width:120px;margin:0;padding:7px;font-size:11px}
  .in-game .arena-heading{height:30px}.in-game .arena-heading p,.in-game .map-number{display:none}.in-game .arena-heading h2{font-size:12px}.in-game .arena-shell{max-width:min(100%,calc((100dvh - 80px) * 1.1818))}
  .touch-controls{display:block;padding:0;background:none;height:0}.joystick-wrap{position:fixed;left:18px;bottom:46px}.touch-actions{position:fixed;right:22px;bottom:43px;flex-direction:column;gap:14px}.touch-actions #touch-bomb{width:84px;height:84px}.touch-actions #touch-interact{width:58px;height:58px}
  #control-hint{position:fixed;bottom:8px;left:145px;right:145px;font-size:9px}#spectator-note{position:fixed;bottom:29px;left:155px;right:165px;margin:0;padding:2px 6px;border:0;background:none;font-size:9px}
}