@font-face{font-family:RussoOne;src:url('/assets/russo-one.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;font-family:'Trebuchet MS',Arial,sans-serif;color:#462c18;--paper:#ffe2a0;--gold:#bc7e2c;--ink:#462c18;--green:#397b23}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{overflow:hidden;min-width:320px;background:#34704e url('/assets/arena.webp') center/cover no-repeat fixed}button,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{opacity:.58;cursor:default}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #fff3cb;outline-offset:4px}input:focus-visible{outline-color:#41772a}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}.app,main,.play-area{width:100%;height:100%}.court-wrap{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}#court{display:block;width:100%;height:100%;touch-action:none;outline:0}#welcome{display:none!important}
.parchment{border:4px solid var(--gold);border-radius:18px;background:radial-gradient(ellipse at 30% 0,#fff0c4aa,transparent 65%),linear-gradient(105deg,#f6cf83,#ffe4a9 46%,#f8d994);box-shadow:0 5px 0 #82521fc9,0 10px 25px #173d272e,inset 0 0 0 2px #ffeec3}
h1,h2,button,.score-numbers,.room-ticket{font-family:RussoOne,'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;font-weight:400}h2{font-size:23px;line-height:1.12;margin:0 0 19px;text-align:center}p{line-height:1.5}
.utility-bar{position:fixed;z-index:60;top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:flex;align-items:center;gap:9px}.icon-button,.help-button{width:39px;height:39px;display:grid;place-items:center;border:2px solid #b97925;border-radius:50%;background:#ffe2a0eb;box-shadow:0 3px 0 #79511d8c;font-size:24px;line-height:1;padding:0}.icon-button:hover,.help-button:hover{background:#fff0c6}.connection{font-size:11px;font-weight:700;background:#ffe2a0e3;border:1px solid #b97925;border-radius:14px;padding:6px 10px}.connection:before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#54842a}.connection.disconnected:before{background:#bd3d26}body[data-mode='menu'] .connection{display:none}
.menu-panel{position:absolute;z-index:30;top:24%;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:.9fr 1.14fr 1fr;align-items:start;gap:17px;width:min(960px,calc(100% - 70px))}.menu-panel>.parchment{padding:24px 20px 22px}.controls-panel{margin-top:16px}.controls-panel h2{color:var(--green)}.control-strip{display:grid;gap:13px}.control-row{display:grid;grid-template-columns:75px 1fr;align-items:center;gap:9px;font-size:15px;font-weight:700;line-height:1.18}.control-row>span:first-child{display:flex;justify-content:flex-end;white-space:nowrap}.control-row small{font-size:10px;font-weight:400}kbd{display:inline-grid;place-items:center;min-width:31px;height:30px;margin:0 3px 0 0;padding:0 4px;font:900 20px 'Trebuchet MS',Arial,sans-serif;color:#51321a;background:#fff0c6;border:2px solid #b78337;border-radius:6px;box-shadow:0 2px 0 #9e6e2c}.controls-note{font-size:11px;margin:19px 0 0;text-align:center}.rules-line{margin:18px -4px 0;padding-top:14px;border-top:1px solid #cfa158;font-size:10px;text-align:center;line-height:1.7}.main-menu{text-align:center}.game-logo{position:relative;padding:6px 0 17px;margin:0 -12px 11px}.game-logo h1{margin:0;font-size:clamp(35px,4.4vw,55px);line-height:1;letter-spacing:-2.4px;text-shadow:1px 3px 0 #b8863d;transform:rotate(-3deg)}.brand-ball{display:block;width:42px;height:42px;border:2px solid #a36c27;border-radius:50%;background:conic-gradient(#f9d529 0 17%,#3b99d2 17% 33%,#fff6d9 33% 50%,#ec5130 50% 67%,#66a32a 67% 83%,#fff6d9 83%);box-shadow:inset -6px -5px 8px #6c41094a,1px 3px 0 #8e632e3d;margin:-45px auto 16px;transform:rotate(-22deg)}
.button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:45px;padding:10px 12px;border:2px solid #ba822d;border-radius:8px;background:#ffeab7;box-shadow:0 3px 0 #bd8639;font-size:15px;text-decoration:none;line-height:1.2}.button:hover:not(:disabled),.join-button:hover{background:#fff2d1}.primary{color:#2e611d;background:linear-gradient(#fff0b8,#f6ce71);font-size:22px;min-height:53px;border-color:#a76d24;text-shadow:0 1px #fff1b3}.primary:hover:not(:disabled){background:#ffe695}.button-hint{display:block;font-size:10px;margin:9px 0 23px;color:#795530}.menu-choice{font-size:16px;margin:13px 0 0;background:#ffe7a9}.keyboard-note{font-size:10px;margin:18px 0 0;color:#76512b}.local-note{font-size:9px;color:#876539;margin:15px 0 -4px;line-height:1.4}.character-panel{margin-top:16px}.character-panel h2{margin-bottom:14px;font-size:21px}.character-picker{display:grid;grid-template-columns:1fr 1fr;gap:7px}.character-choice{display:flex;flex-direction:column;align-items:center;min-width:0;padding:4px 3px 7px;border:2px solid transparent;border-radius:10px;background:#d9a24729;font-size:10px;line-height:1.1}.character-choice img{display:block;width:74px;max-width:100%;height:70px;object-fit:contain;margin-bottom:1px;filter:drop-shadow(0 3px 1px #73532345)}.character-choice:hover{background:#fff2c78c}.character-choice.selected,.character-choice[aria-pressed='true']{border-color:#688b2d;background:#fff3bc;box-shadow:inset 0 0 0 1px #d3dd6e}.join-divider{height:1px;background:#c99448;margin:16px 0 12px}.join-label{display:block;text-align:center;font-size:12px;font-weight:700;margin-bottom:9px}.join-form{display:flex;gap:5px}.join-form input{width:100%;min-width:0;height:36px;padding:6px 8px;border:2px solid #c18c3d;border-radius:5px;background:#fff3d0;color:var(--ink);text-transform:uppercase;letter-spacing:2px;font-size:13px}.join-form input::placeholder{text-transform:none;letter-spacing:0;color:#9a754a;font-size:11px}.join-button{border:2px solid #b57a2d;border-radius:5px;background:#f6d586;box-shadow:0 2px 0 #b57a2d;padding:0 8px;font-size:11px}
.scorebar{position:absolute;z-index:20;top:max(17px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:20px;width:min(500px,62vw);padding:9px 20px 12px;border-width:3px;border-radius:13px}.score-player{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:900;flex:1;min-width:0}.score-player.left{justify-content:flex-end;text-align:right}.score-player.right{justify-content:flex-start}.score-player>span:not(.player-dot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-dot{flex-shrink:0;display:inline-block;width:10px;height:10px;border:1px solid #774b22;border-radius:50%}.coral{background:#e97536}.teal{background:#76a443}.score-center{text-align:center;flex-shrink:0}.score-numbers{display:flex;align-items:center;justify-content:center;gap:12px;font-size:39px;font-variant-numeric:tabular-nums;line-height:1}.score-separator{font-size:24px}#score-caption{display:block;font-size:10px;margin-top:5px}body[data-mode='menu'] .scorebar,body[data-mode='online'][data-active='false'] .scorebar{display:none}
.game-overlay{position:absolute;z-index:25;inset:0;display:grid;place-items:center;padding:14px;pointer-events:none}.overlay-card{text-align:center;padding:18px 29px 20px;max-width:min(420px,85vw);min-width:180px}.overlay-card>span{font-size:12px;font-weight:700}.overlay-card h2{font-size:38px;margin:8px 0;line-height:1.08}.overlay-card p{font-size:12px;margin:7px 0 0}.overlay-card .button{pointer-events:auto;margin-top:18px;font-size:17px;min-height:43px}body[data-mode='online'][data-active='false'] .game-overlay{display:none}.point-banner{position:absolute;z-index:24;top:25%;left:50%;transform:translateX(-50%) rotate(-3deg);font-family:RussoOne,sans-serif;font-size:35px;color:#fff3b8;text-shadow:-2px -2px 0 #6d421c,2px -2px 0 #6d421c,-2px 2px 0 #6d421c,2px 2px 0 #6d421c,0 5px 0 #70431f;white-space:nowrap;pointer-events:none}
.room-panel{position:absolute;z-index:35;top:23%;left:50%;transform:translateX(-50%);width:min(350px,calc(100% - 28px));padding:24px}.room-panel h2{font-size:26px}.room-ticket{display:flex;align-items:center;justify-content:center;gap:20px;padding:10px 12px;background:#fff1c0;border:2px dashed #bc8739;border-radius:7px;margin-bottom:13px}.room-ticket>span{font-size:29px;letter-spacing:3px}.copy-button{border:0;background:none;font-size:27px;line-height:1;padding:0 4px}.room-panel .secondary{font-size:13px;min-height:39px}.room-hint{font-size:10px;margin:12px 0 18px;text-align:center;color:#75532e}.player-slot{display:flex;align-items:center;gap:7px;font-size:13px;margin:14px 0}.ready-label{margin-left:auto;font-size:11px;font-weight:700;color:#54752a}.room-panel .primary{margin-top:22px;font-size:20px;min-height:45px}.quiet{background:transparent;border-color:transparent;box-shadow:none;font-size:12px;min-height:34px;margin-top:8px}
body[data-mode='online'][data-active='true'] .room-panel{display:flex;align-items:center;gap:7px;top:auto;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));transform:none;width:auto;max-width:calc(100% - 90px);padding:6px 9px;border-width:2px;border-radius:10px}body[data-mode='online'][data-active='true'] .room-panel :is(h2,.room-hint,.player-slot,#ready){display:none}body[data-mode='online'][data-active='true'] .room-ticket{padding:0 5px;margin:0;border:0;background:transparent;gap:6px}body[data-mode='online'][data-active='true'] .room-ticket>span{font-size:16px;letter-spacing:2px}body[data-mode='online'][data-active='true'] .copy-button{font-size:24px}body[data-mode='online'][data-active='true'] .room-panel .button{width:auto;min-height:30px;padding:5px 9px;font-size:10px;margin:0;box-shadow:none}
.match-panel{position:fixed;z-index:35;display:flex;gap:9px;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left))}.match-panel .button{width:auto;min-height:37px;padding:6px 12px;font-size:12px;background:#ffe2a0e8}.match-panel kbd{min-width:20px;height:20px;font-size:11px;border-width:1px;border-radius:3px;margin-left:4px}.second-controls{position:fixed;z-index:22;bottom:20px;left:50%;transform:translateX(-50%);font-size:10px;background:#ffe2a0e6;border:1px solid #b87c31;border-radius:6px;padding:5px 9px;white-space:nowrap}.second-controls kbd{min-width:20px;height:20px;font-size:13px;border-width:1px}.help-anchor{position:fixed;z-index:40;right:max(20px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}.help-button{width:34px;height:34px;font-size:21px}.help-text{position:fixed;z-index:70;bottom:63px;right:20px;width:min(340px,calc(100% - 40px));margin:0;padding:18px 20px;font-size:12px}.notice{position:fixed;z-index:80;top:max(20px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:min(520px,calc(100% - 40px));margin:0;padding:11px 18px;font-size:12px;text-align:center;border-width:2px;border-radius:9px;overflow-wrap:anywhere}
.touch-controls{position:fixed;z-index:30;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(78px,env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:20px;pointer-events:none;user-select:none;touch-action:none}.touch-controls>div{display:flex;gap:10px}.touch-controls button{pointer-events:auto;width:60px;height:55px;border:2px solid #a8752d;border-radius:13px;background:#ffe2a0dc;box-shadow:0 4px 0 #79511d88;font-size:29px;touch-action:none;user-select:none}.touch-controls .jump-touch{background:#f4ce66eb}.touch-controls button.pressed{transform:translateY(3px);background:#fff1bb;box-shadow:0 1px 0 #79511d88}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(pointer:coarse){.touch-controls{display:flex}}
@media(max-width:1050px) and (orientation:landscape){.menu-panel{width:calc(100% - 42px);gap:12px;grid-template-columns:.91fr 1.12fr 1fr}.menu-panel>.parchment{padding:20px 15px}.control-row{grid-template-columns:68px 1fr;gap:6px;font-size:13px}.character-choice img{width:65px;height:61px}.character-panel h2{font-size:18px}.menu-choice{font-size:14px}.primary{font-size:20px}.second-controls{bottom:67px}}
@media(max-height:620px) and (orientation:landscape){.menu-panel{top:50%;transform:translate(-50%,-50%);width:min(860px,calc(100% - 34px))}.menu-panel>.parchment{padding:16px 13px}.controls-panel,.character-panel{margin-top:0}.game-logo{padding-bottom:11px;margin-bottom:6px}.game-logo h1{font-size:39px}.brand-ball{width:32px;height:32px;margin:-25px auto 12px}h2{font-size:20px;margin-bottom:13px}.control-strip{gap:8px}.control-row{font-size:12px;grid-template-columns:61px 1fr}kbd{min-width:26px;height:25px;font-size:17px}.controls-note{margin-top:12px;font-size:10px}.rules-line{margin-top:10px;padding-top:10px;font-size:9px}.primary{min-height:43px;font-size:18px}.button-hint{margin:7px 0 13px}.menu-choice{min-height:38px;font-size:13px;margin-top:9px}.keyboard-note{margin-top:11px;font-size:9px}.local-note{font-size:8px;margin-top:9px}.character-picker{gap:4px}.character-choice{padding:2px 3px 5px;font-size:9px}.character-choice img{width:53px;height:49px}.join-divider{margin:10px 0 9px}.join-label{font-size:11px;margin-bottom:6px}.join-form input{height:31px}.utility-bar{top:10px;right:12px;gap:6px}.icon-button{width:31px;height:31px;font-size:20px}.connection{display:none}.scorebar{top:9px;padding:5px 14px 7px;width:min(430px,62vw)}.score-numbers{font-size:30px}.score-player{font-size:12px}#score-caption{margin-top:2px;font-size:9px}.room-panel{top:50%;transform:translate(-50%,-50%);padding:15px 20px;width:320px}.room-panel h2{font-size:21px;margin-bottom:12px}.room-ticket{padding:5px 10px;margin-bottom:9px}.room-ticket>span{font-size:24px}.room-hint{margin:8px 0 10px;font-size:9px}.player-slot{margin:9px 0;font-size:11px}.room-panel .primary{margin-top:12px;min-height:37px}.room-panel .quiet{margin-top:5px;min-height:27px}.overlay-card{padding:13px 23px}.overlay-card h2{font-size:31px}.overlay-card p{font-size:10px}.touch-controls{bottom:69px}.touch-controls button{width:48px;height:44px;font-size:25px}.point-banner{top:24%;font-size:27px}}
@media(max-width:700px) and (orientation:portrait){html,body{min-height:100%;height:auto}body{overflow-x:hidden;overflow-y:auto;background-size:auto 100dvh}.app,main,.play-area{min-height:100dvh;height:auto}.play-area{position:absolute;inset:0;min-height:0;pointer-events:none}.court-wrap{position:absolute;top:0;left:0;right:0;bottom:auto;height:auto;aspect-ratio:12/7;pointer-events:auto}.utility-bar{top:10px;right:10px;gap:5px}.icon-button{width:30px;height:30px;font-size:20px}.connection{display:none}.menu-panel{position:relative;top:auto;left:auto;transform:none;display:flex;flex-direction:column;align-items:stretch;gap:16px;width:min(400px,calc(100% - 28px));margin:calc(58.333vw + 15px) auto 24px}.menu-panel>.parchment{padding:20px;margin:0}.main-menu{order:0}.character-panel{order:1}.controls-panel{order:2}.game-logo h1{font-size:46px}.brand-ball{width:33px;height:33px;margin-top:-37px;margin-bottom:12px}.character-picker{grid-template-columns:repeat(4,1fr);gap:4px}.character-choice img{width:60px;height:57px}.character-choice{font-size:8px}.control-strip{max-width:250px;margin:auto}.scorebar{top:9px;width:min(280px,calc(100% - 90px));padding:5px 8px 7px;gap:8px;left:10px;transform:none;border-width:2px;border-radius:9px}.score-player{font-size:9px;gap:4px}.player-dot{width:7px;height:7px}.score-numbers{font-size:24px;gap:7px}.score-separator{font-size:16px}#score-caption{font-size:7px;margin-top:2px}.game-overlay{padding-top:40px}.overlay-card{border-width:2px;border-radius:10px;min-width:145px;padding:9px 16px}.overlay-card>span{font-size:9px}.overlay-card h2{font-size:24px;margin:4px 0}.overlay-card p{font-size:9px;margin-top:4px}.overlay-card .button{font-size:12px;min-height:32px;margin-top:8px}.point-banner{top:31%;font-size:23px}.touch-controls{position:absolute;top:calc(58.333vw + 15px);bottom:auto;left:16px;right:16px;display:flex}.touch-controls>div{gap:7px}.touch-controls button{width:55px;height:50px;font-size:27px}.match-panel{position:absolute;top:calc(58.333vw + 92px);bottom:auto;left:16px}body[data-mode='local'] .match-panel{top:calc(58.333vw + 20px)}.second-controls{position:absolute;top:calc(58.333vw + 80px);bottom:auto;left:16px;transform:none;font-size:9px;white-space:normal;max-width:calc(100% - 32px)}.room-panel{top:calc(58.333vw + 16px);padding:21px;width:min(350px,calc(100% - 28px))}body[data-mode='online'][data-active='true'] .room-panel{top:calc(58.333vw + 90px);bottom:auto;left:14px;max-width:calc(100% - 28px);flex-wrap:wrap;gap:5px}body[data-mode='online'][data-active='true'] .room-panel .button{font-size:9px}.help-anchor{right:12px;bottom:12px}.help-text{right:12px;bottom:57px;width:calc(100% - 24px)}.notice{top:65px;max-width:calc(100% - 30px);font-size:10px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}