.pad>.joystick,.arena-tools,.rotate-hint{display:none}
[hidden]{display:none!important}
.pad>.local-chat-dock{display:block;flex:1;min-width:0;max-width:500px;padding:12px;border:1px solid #d5deca;border-radius:12px;background:#edf1e5;color:#43543d;touch-action:auto}
.local-chat-dock>strong{display:block;font-size:11px;margin-bottom:6px}.local-chat-dock .messages{height:60px;background:#ffffff80}.local-chat-dock #chat{margin-top:6px}.local-chat-dock #chat input{padding:8px;font-size:14px}.pad .local-chat-dock button{min-width:44px;min-height:38px;padding:8px;font-size:12px;touch-action:manipulation}
#chat{position:relative;flex-wrap:wrap}#chat input{flex:1;min-width:40px}.emoji-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;flex-basis:100%;width:100%;padding:8px;border-radius:10px;background:#fffefa;border:1px solid #d8dfce}
#chat .emoji-picker button,#cheer-form .emoji-picker button{font-size:22px;min-width:0;min-height:36px;padding:3px;background:#eff2e9;color:#34374c;border-radius:7px;touch-action:manipulation}
#chat .emoji-toggle,#cheer-form .emoji-toggle{font-size:22px;min-width:36px;min-height:38px;padding:4px;background:#e9efdf;color:#34374c}
@media(max-width:480px){.emoji-picker{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;padding:4px}}
@media(pointer:coarse),(max-width:760px){
 .arena-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:4px 6px}
 .arena-tools>span{margin-right:auto;font-size:10px;color:#747c6b}
 .arena-tools button{font-size:11px;min-height:32px;padding:7px 10px}
 .pad>.dpad{display:none}
 .pad{padding:14px 10px;gap:14px;justify-content:space-between;align-items:flex-end;touch-action:none}
 .pad>.joystick:first-child{display:block;position:relative;flex:0 0 104px;width:104px;height:104px;min-width:104px;max-width:104px;min-height:104px;max-height:104px;aspect-ratio:1;border-radius:50%;border:2px solid #82917870;background:radial-gradient(circle,#a0b09230 0 36%,#d8e0ce80 37% 66%,#9cae8c50 67%);box-shadow:inset 0 2px 12px #52694422,0 4px 16px #39482715;touch-action:none;user-select:none;-webkit-user-select:none}
 .joystick>span{position:absolute;pointer-events:none;font-size:9px;font-weight:800;color:#506443}
 .joy-up{top:6px;left:0;right:0;text-align:center}.joy-down{bottom:6px;left:0;right:0;text-align:center}.joy-left{left:8px;top:44px}.joy-right{right:8px;top:44px}
 .joystick .joy-thumb{width:38px;height:38px;border-radius:50%;left:calc(50% - 19px);top:calc(50% - 19px);background:linear-gradient(145deg,#fbfdf2,#bac9a9);border:2px solid #fff9;box-shadow:0 4px 10px #30432633;transform:translate(var(--jx,0px),var(--jy,0px))}
 .joystick.engaged .joy-thumb{background:linear-gradient(145deg,#e1edd4,#8da477)}
 .pad>.actions:last-child{display:flex;flex:0 0 auto;align-self:flex-end;width:auto;height:48px;gap:8px;align-items:center;margin-left:auto;margin-bottom:4px}
 .pad>.actions button,.pad>.actions button:last-child{flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;padding:0;grid-column:auto;font-size:11px;border:2px solid #ffffff80;box-shadow:0 4px 0 #313e3140,0 7px 14px #28342420;touch-action:none}
 .pad>.actions button:nth-child(1){background:#647851b3}.pad>.actions button:nth-child(2){background:#708ea0b3}.pad>.actions button:nth-child(3){background:#bd8059b3}
 .pad>.actions button{transition:background-color .1s,box-shadow .1s;text-shadow:0 1px 2px #22301b66;box-shadow:0 2px 0 #313e3126,0 3px 8px #28342415}.pad>.actions button:nth-child(1).pressed{background:#647851f2}.pad>.actions button:nth-child(2).pressed{background:#708ea0f2}.pad>.actions button:nth-child(3).pressed{background:#bd8059f2}.pad .actions small{display:none}.pad>.actions button.pressed{transform:translateY(3px);filter:brightness(1.2);box-shadow:0 1px 0 #313e3140}
 .stage{margin-left:-10px;margin-right:-10px;border-radius:14px;padding:4px}
 .rotate-hint{display:block;text-align:center;font-size:10px;color:#7c8475;margin:2px}
 body.arena-expanded{overflow:hidden;overscroll-behavior:none;background:#e8eddf}
 body.arena-expanded main{padding:0;max-width:none}
 body.arena-expanded header,body.arena-expanded .controls,body.arena-expanded .below,body.arena-expanded footer{display:none}
 body.arena-expanded .stage,.stage:fullscreen{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border:0;border-radius:0;display:flex;flex-direction:column;background:#e8eddf;z-index:20}
 body.arena-expanded .hud,.stage:fullscreen .hud{padding:4px 14px;gap:12px;flex:none}
 body.arena-expanded .hud small,.stage:fullscreen .hud small{display:none}
 body.arena-expanded canvas,.stage:fullscreen canvas{width:100%;height:0;min-height:0;flex:1;object-fit:contain;max-height:none;border-radius:0;background:#e8eddf}
 body.arena-expanded #status,.stage:fullscreen #status{flex:none;min-height:26px;padding:6px;font-size:11px}
 body.arena-expanded .pad,.stage:fullscreen .pad{flex:none;padding:12px 18px max(16px,env(safe-area-inset-bottom));margin:0}
 body.arena-expanded .stage,.stage:fullscreen{touch-action:none;user-select:none;-webkit-user-select:none}
 body.arena-expanded .pad::before,.stage:fullscreen .pad::before{content:'';flex:0 0 104px;width:104px;height:104px;pointer-events:none}
 body.arena-expanded .pad>.joystick:first-child,.stage:fullscreen .pad>.joystick:first-child{position:fixed;left:var(--stick-left,18px);top:var(--stick-top,70vh);opacity:0;pointer-events:none;z-index:4}
 body.arena-expanded .pad>.joystick.engaged,.stage:fullscreen .pad>.joystick.engaged{opacity:1}
}
@media(orientation:landscape) and (max-height:600px) and (pointer:coarse){
 body.arena-expanded .arena-tools,.stage:fullscreen .arena-tools{position:absolute;right:max(8px,env(safe-area-inset-right));top:max(3px,env(safe-area-inset-top));z-index:3}
 .arena-tools>span,.rotate-hint{display:none}
 body.arena-expanded .hud,.stage:fullscreen .hud{padding:5px 170px 0 16px;z-index:2}
 body.arena-expanded .hud strong{font-size:24px}body.arena-expanded .hud span{font-size:11px}
 body.arena-expanded canvas,.stage:fullscreen canvas{object-fit:cover;object-position:center}
 body.arena-expanded .pad,.stage:fullscreen .pad{position:absolute;left:0;right:0;bottom:0;padding:8px max(20px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));pointer-events:none;z-index:2}
 .pad>.joystick,.pad>.actions{pointer-events:auto}
 body.arena-expanded #status,.stage:fullscreen #status{padding:4px 180px;min-height:24px}
}
