.mode-screen{height:100%;min-height:0;padding:24px 3.2vw 8px;display:flex;flex-direction:column;gap:16px}.mode-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;position:relative;padding-top:19px}.mode-intro>.eyebrow{position:absolute;top:0;left:0;font:7px var(--mono);letter-spacing:1.6px;color:var(--stage-accent);margin:0}.mode-intro h1{font:900 italic clamp(56px,10vh,104px)/.84 var(--head);letter-spacing:-1px;margin:0}.mode-intro h1 em{color:#f3d9b1}.mode-intro>p:last-child{font:12px/1.7 var(--sans);color:#ded9cf;margin:0 8px 0 0}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-height:0}.mode-card{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:26px 28px 22px;border:1px solid #d7dfd256;border-radius:2px;background:linear-gradient(145deg,#142236b8,#102b3444);backdrop-filter:blur(8px);overflow:hidden;transition:border-color .2s,background .2s}.mode-card:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 25%,#8cdce51c,transparent 65%)}.mode-card:hover,.mode-card:focus-visible{border-color:#f5d6a0;background:#233d4b99;box-shadow:inset 0 0 0 1px #f4d5a733}.mode-card:disabled{opacity:.55}.mode-number{position:absolute;top:18px;left:22px;font:8px var(--mono);letter-spacing:1px;color:#c3d1d7}.mode-card canvas{width:100%;height:0;flex:1;min-height:0;object-fit:contain}.mode-card-copy{display:flex;flex-direction:column;gap:9px;position:relative;z-index:1}.mode-kicker{font:6px var(--mono);letter-spacing:1.6px;color:#bed3d4}.mode-card-copy>strong{font:900 italic clamp(29px,3.7vw,54px)/1 var(--head);color:#ffedce;white-space:nowrap}.mode-card-copy>strong i{font-size:.65em;font-style:normal;color:#8bbbc8;margin:0 3px}.mode-card-copy>span:not(.mode-kicker){font:11px var(--sans);color:#c9d8d9}.mode-card-copy>b{align-self:flex-start;font:8px var(--mono);letter-spacing:1px;color:#f6d9a6;border-top:1px solid #e1d4bb40;padding-top:10px;margin-top:2px}.mode-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:0 0 22px}.mode-bottom>button{font:7px var(--mono);padding:4px 0;color:#f0dcc0;letter-spacing:.7px}.mode-bottom>span{font:6px var(--mono);letter-spacing:1px;color:#cec7b6}.mode-join{display:flex;align-items:center;gap:9px;flex:0 0 auto}.mode-join input{flex:1;min-width:0;background:#132333a8;border:1px solid #c1dbdb66;padding:12px;color:#fff2d9;height:40px;font:9px var(--mono)}.mode-join>button{font-size:9px;min-height:36px;padding:8px 15px}.form-error:empty{display:none}.mode-screen>.form-error{margin:0;font-size:11px}.stage-flow{flex:0 0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.stage-flow>span{font:7px var(--mono);letter-spacing:1px;color:#e9dac0}.stage-card:disabled{opacity:.4;filter:saturate(.4);cursor:default;transform:skew(-3deg);box-shadow:none}.pick-to-play{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 40px;margin-top:9px}.pick-to-play>span{font:6px/1.8 var(--mono);letter-spacing:1px;color:#becbd4}.pick-to-play strong{font-size:7px;color:#f3dbaf;font-weight:500}.pick-to-play>.random-button{height:38px;font-size:19px;min-width:52px}.selection-shell{position:relative}.selection-wait{position:absolute;inset:12px 0 4px;z-index:7;background:#0d1b2de0;backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid #c9dfce55;padding:25px}.selection-wait h2{font:900 italic clamp(35px,6vw,78px)/.95 var(--head);color:#f5deaf;margin:14px 0}.selection-wait p{font:12px/1.8 var(--sans);color:#d9dfd6;max-width:390px}.selection-wait>button{margin-top:20px;min-height:38px}.room-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#12263cbb;border-bottom:1px solid #f5e2be30;padding:0 3.2vw;height:34px;color:#e3dccb}.room-strip>#copy-room{background:transparent;border:0;padding:0;font:7px var(--mono);color:#ead8b9;letter-spacing:.8px}.room-strip strong{font-size:11px;margin:0 6px;color:#f8dfac}.room-strip>#room-status{font:9px var(--sans);flex:1;text-align:center;color:#b9cfd4}.room-strip>.text-button{font:6px var(--mono);padding:4px 0}body.in-room{grid-template-rows:68px 34px minmax(0,1fr) 25px}.fight-overlay.briefing{padding:18px;background:#101a29b8}.ready-countdown{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;max-height:100%;max-width:100%}.ready-countdown>p:first-child{font:700 14px var(--head);letter-spacing:1px;color:#f0dec0;margin:0}.ready-countdown em{font-style:italic;color:#b9b0dd;margin:0 10px}.ready-countdown>strong{font:900 italic clamp(70px,17vh,150px)/.82 var(--head);color:#ffdfa3;text-shadow:4px 5px 0 #8a4a6655}.ready-countdown h2{font:800 26px/1 var(--head);letter-spacing:2px;margin:0;color:#fff0d2}.ready-controls{font:7px/1.9 var(--mono);color:#e5dfd1;margin:0;text-align:center}.ready-countdown .briefing-meter{width:220px;max-width:90%;height:3px;margin:0}.ready-countdown .briefing-meter i{display:block;height:100%;background:#f1d8a9}
@media(max-width:900px){body.in-room{grid-template-rows:60px 32px minmax(0,1fr) 21px}.room-strip{height:32px;padding:0 20px}.mode-screen{padding:17px 25px 6px;gap:12px}.mode-intro h1{font-size:clamp(50px,9vh,80px)}.mode-intro>p:last-child{font-size:10px}.mode-card{padding:22px 18px 18px}.mode-card-copy>strong{font-size:32px}.mode-card-copy>span:not(.mode-kicker){font-size:9px}.mode-options{gap:14px}.mode-bottom>button{font-size:6px}.mode-bottom>span{font-size:5px}.mode-card-copy{gap:7px}}
@media(max-width:620px) and (orientation:portrait){body.in-room{grid-template-rows:54px 30px minmax(0,1fr) 0}.room-strip{height:30px;padding:0 14px;gap:8px}.room-strip>#room-status{display:none}.room-strip>#copy-room{font-size:6px;letter-spacing:.2px}.room-strip strong{font-size:10px;margin:0 4px}.room-strip>.text-button{font-size:5px}.mode-screen{padding:15px 17px 8px;gap:12px}.mode-intro{display:block;padding-top:15px}.mode-intro h1{font-size:clamp(48px,8vh,70px)}.mode-intro>.eyebrow{font-size:5px;letter-spacing:1px}.mode-intro>p:last-child{font-size:9px;line-height:1.5;margin-top:11px}.mode-options{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:12px}.mode-card{display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:4px;padding:24px 12px 13px;min-height:0}.mode-card canvas{width:100%;height:100%;min-height:0;object-fit:contain}.mode-number{top:12px;left:13px;font-size:6px}.mode-card-copy{align-self:center;gap:7px}.mode-kicker{font-size:4px;letter-spacing:.7px}.mode-card-copy>strong{font-size:clamp(20px,6.3vw,29px);white-space:normal;line-height:.98}.mode-card-copy>strong i{font-size:.65em;margin:0 2px}.mode-card-copy>span:not(.mode-kicker){font-size:8px;line-height:1.5}.mode-card-copy>b{font-size:6px;padding-top:7px;margin-top:0;letter-spacing:.4px}.mode-bottom{flex-basis:22px;gap:6px}.mode-bottom>button{font-size:5px;letter-spacing:.2px}.mode-bottom>span{font-size:4px;letter-spacing:.4px;max-width:82px;text-align:right;line-height:1.7}.mode-join{flex-wrap:wrap;gap:7px}.mode-join input{flex-basis:100%;height:35px;padding:8px;font-size:8px}.mode-join>button{font-size:8px;padding:7px 13px;min-height:31px}.stage-flow{flex-basis:18px}.stage-flow>span{font-size:5px}.stage-card:disabled{transform:none}.pick-to-play{flex-basis:33px;margin-top:7px}.pick-to-play>span{font-size:5px;letter-spacing:.5px}.pick-to-play strong{font-size:5px}.pick-to-play>.random-button{height:31px;min-width:43px;font-size:17px}.selection-wait{inset:6px 0}.selection-wait h2{font-size:39px}.selection-wait p{font-size:11px;line-height:1.7}.ready-countdown{gap:10px}.ready-countdown>p:first-child{font-size:10px}.ready-countdown>strong{font-size:85px}.ready-countdown h2{font-size:22px}.ready-controls{font-size:5px;line-height:1.9}.ready-countdown .briefing-meter{width:175px}}
@media(max-height:600px) and (orientation:landscape){body.in-room{grid-template-rows:46px 26px minmax(0,1fr) 0}.room-strip{height:26px}.room-strip strong{font-size:9px}.room-strip>#copy-room{font-size:6px}.mode-screen{padding-top:9px;gap:8px}.mode-intro{padding-top:0}.mode-intro>.eyebrow{display:none}.mode-intro h1{font-size:46px;line-height:.83}.mode-intro>p:last-child{font-size:9px;line-height:1.5}.mode-card{padding:14px 16px 10px}.mode-number{top:10px;left:12px;font-size:5px}.mode-card-copy{gap:4px}.mode-kicker{display:none}.mode-card-copy>strong{font-size:29px}.mode-card-copy>span:not(.mode-kicker){font-size:8px}.mode-card-copy>b{font-size:6px;padding-top:5px}.mode-bottom{flex-basis:16px}.mode-join input{height:30px;padding:7px;font-size:8px}.mode-join>button{min-height:28px;font-size:8px;padding:5px 11px}.stage-flow{flex-basis:15px}.stage-flow>span{font-size:5px}.pick-to-play{flex-basis:26px;margin-top:4px}.pick-to-play>span{font-size:4px;line-height:1.4}.pick-to-play strong{font-size:5px}.pick-to-play>.random-button{height:25px;min-width:39px;font-size:16px}.pick-to-play .random-button>span{display:none}.selection-wait{inset:6px 0}.selection-wait h2{font-size:39px;margin:10px 0}.selection-wait p{font-size:10px;margin:0;line-height:1.5}.selection-wait>button{margin-top:12px;min-height:30px;font-size:8px}.ready-countdown{gap:6px}.ready-countdown>strong{font-size:70px}.ready-countdown h2{font-size:19px}.ready-countdown>p:first-child{font-size:10px}.ready-controls{font-size:5px}.ready-countdown .briefing-meter{width:170px}.fight-overlay.briefing{padding-top:55px;padding-bottom:10px}}
@media(max-width:355px){.mode-card{grid-template-columns:35% minmax(0,1fr)}.mode-card-copy>strong{font-size:20px}.mode-card-copy>span:not(.mode-kicker){font-size:7px}.mode-card-copy>b{font-size:5px}.mode-intro>p:last-child{font-size:8px}.mode-bottom>span{display:none}}
@media(max-width:620px) and (min-height:700px) and (orientation:portrait){.mode-card{display:flex;flex-direction:column;padding:25px 17px 13px}.mode-card canvas{height:0;flex:1;width:100%;min-height:0;object-fit:contain}.mode-card-copy{align-self:stretch;gap:5px}.mode-card-copy>strong{font-size:29px;white-space:nowrap}.mode-kicker{font-size:5px;letter-spacing:1px}.mode-card-copy>b{padding-top:6px}.mode-card-copy>span:not(.mode-kicker){font-size:8px}}
/* Keep controls clear of notches and home indicators in standalone/fullscreen views. */
body{box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.mode-screen:has(.mode-join:not([hidden])) .mode-options,.mode-screen:has(.mode-join:not([hidden])) .mode-bottom{display:none}.mode-screen:has(.mode-join:not([hidden])){justify-content:flex-start}.mode-screen:has(.mode-join:not([hidden])) .mode-join{margin-top:18px}.mode-screen:has(.mode-join:not([hidden])) .mode-intro h1{font-size:clamp(38px,7vh,68px)}
@media(max-height:400px){.mode-screen:has(.mode-join:not([hidden])) .mode-intro>p:last-child{display:none}.mode-screen:has(.mode-join:not([hidden])) .mode-intro h1{font-size:38px}.mode-screen:has(.mode-join:not([hidden])) .mode-join{margin-top:5px}}
/* Prevent Safari from zooming the page when a room code or chat field receives focus. */
#room-code,#chat-input{font-size:16px}button{touch-action:manipulation}.toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}