:root{--bg:#100b0d;--panel:#191115;--border:#78422c;--gold:#f8ca7e;--red:#fa453f;--muted:#b9a3a1;--txt:#fff1dd;--lime:#ffb357;--pink:#fa6b50}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;color:var(--txt);min-height:100vh;font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 50% -5%,#80341f7a 0%,transparent 48%),radial-gradient(ellipse at 5% 70%,#6920154a 0%,transparent 32%),#100b0d}body:before{content:"";pointer-events:none;position:fixed;inset:0;opacity:.13;background:repeating-linear-gradient(105deg,transparent 0 4px,#bf7640 5px 5.5px,transparent 6px 33px);z-index:-1}.wash{pointer-events:none;position:fixed;z-index:-1;left:0;right:0;bottom:0;height:32vh;background:radial-gradient(ellipse at bottom,#a0471640,transparent 70%)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}a{color:inherit}.app{max-width:520px;min-height:100dvh;margin:auto;padding:0 16px;display:flex;flex-direction:column}.topbar{padding:19px 0 14px;display:flex;justify-content:space-between;align-items:center;gap:8px}.brand{text-decoration:none;font-size:21px;font-weight:1000;font-style:italic;color:var(--gold);letter-spacing:-1px;text-shadow:0 1px #3d0d06,0 3px 12px #c949353b}.brand span{color:#e05b45}.top-right{display:flex;gap:9px;align-items:center}.beta{font-size:9px;letter-spacing:1px;color:#ffb879;border:1px solid #714730;padding:5px 7px;border-radius:3px}.connection{color:#b9aaa0;font-size:11px;white-space:nowrap}.intro{text-align:center;padding:8px 0 23px}.kicker{color:var(--gold);font-size:10px;letter-spacing:3px;font-weight:900}.wordmark{display:flex;flex-direction:column;align-items:center;gap:0;margin:12px 0 13px;font-family:Impact,"Arial Black",sans-serif;font-weight:1000;font-style:italic;letter-spacing:-1.8px;line-height:.91;font-size:clamp(43px,10.5vw,59px);transform:skew(-4deg)}.wordmark span{display:block;width:max-content;padding:0 8px 5px;-webkit-text-stroke:1px #2d1311;filter:drop-shadow(2px 5px 0 #160c0a) drop-shadow(0 0 12px #f47c2933)}.word-rock{background:linear-gradient(175deg,#fff0d6 0%,#b6aaa4 25%,#62504a 50%,#f7bb78 70%,#6e3526 94%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}.word-paper{background:linear-gradient(180deg,#fff6cf 6%,#e2cb98 42%,#aa6941 80%,#fff1c6);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}.word-scissors{background:linear-gradient(170deg,#fff2ed 0%,#f55b4a 26%,#a71e22 58%,#f89060 76%,#5e1420);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}.intro p{margin:0;color:#d7ac89;font-size:10px;font-weight:850;letter-spacing:1.7px}.panel,.invite-box,.game-box{background:linear-gradient(150deg,#291b1b 0%,#191216 50%,#130e11);border:1px solid #8b4829;box-shadow:0 20px 50px #0009,0 0 0 1px #df6d2714 inset;border-radius:13px}.panel{padding:17px}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;background:#130d10;border:1px solid #4d2d24;border-radius:8px;margin-bottom:19px}.tab{border:0;border-radius:5px;background:transparent;color:#aa8981;font-weight:1000;font-size:12px;letter-spacing:1px;padding:12px 4px}.tab.selected{color:#ffe6b6;background:linear-gradient(125deg,#542523,#822b20);box-shadow:inset 0 0 0 1px #ca6943}.field{margin-bottom:16px}.field>label{display:block;color:#f1b774;font-weight:950;font-size:11px;letter-spacing:1.4px;margin-bottom:8px}.field>input:not([type=hidden]),.field select{width:100%;height:49px;padding:10px 14px;color:#f9e4d1;background:#1a1012;border:1px solid #80513d;border-radius:6px;outline:none}.field input::placeholder{color:#97786f}.field input:focus,.field select:focus{border-color:#ffd58b;box-shadow:0 0 0 2px #fe9c3c30}.select-wrap{position:relative}.select-wrap:after{content:'⌄';position:absolute;right:14px;top:5px;color:#ffc278;font-size:26px;pointer-events:none}.field select{appearance:none;padding-right:33px;cursor:pointer}.field #stakeCustom{margin-top:8px}.length-row{display:flex;gap:8px}.length{flex:1;min-width:0;color:#ddad8d;background:#181013;border:1px solid #704634;border-radius:5px;padding:11px 3px;font-size:11px;font-weight:900;letter-spacing:.2px}.length.selected{border-color:#f6a753;background:linear-gradient(140deg,#60321e,#3a1e1d);color:#ffe5ab;box-shadow:0 0 14px #f2722a23}.primary{width:100%;display:flex;justify-content:center;align-items:center;gap:17px;border:1px solid #ff9750;border-radius:7px;padding:15px 17px;color:#fff0cd;background:linear-gradient(#d94c28,#831c1c 62%,#5d1a1c);box-shadow:inset 0 1px #ffdc7b,0 5px 0 #3e1718,0 14px 30px #d23f202a;font-family:Impact,"Arial Black",sans-serif;font-size:21px;letter-spacing:1px;font-style:italic;text-shadow:1px 2px #5c160d}.primary:hover:not(:disabled){filter:brightness(1.1)}.primary span{font-family:system-ui;font-size:23px}.foot,.note{font-size:11px;color:#aa938b;line-height:1.45;text-align:center;margin:18px 0 0}.local{display:flex;justify-content:space-between;padding:23px 2px;font-size:12px;color:#bda19a}.local a{color:#ffca80;font-weight:800;text-decoration:none}.alert,.error{border:1px solid #ac6037;background:#361d1b;color:#ffdcac;padding:12px;margin-top:12px;border-radius:7px;font-size:12px}.site-footer{margin-top:auto;padding:30px 0 20px;color:#876862;font-weight:850;letter-spacing:1.2px;font-size:9px;text-align:center}.room{padding-top:8px}.room-brand{display:flex;justify-content:center;gap:9px;align-items:center;margin:5px auto 17px;font:italic 1000 clamp(16px,4.3vw,22px)/1 Impact,"Arial Black",sans-serif;letter-spacing:0}.pill-label{text-align:center;color:#f0a559;font-size:11px;font-weight:1000;letter-spacing:1.8px}.room-title{text-align:center;font:italic 1000 clamp(30px,8vw,43px)/1.07 Impact,"Arial Black",sans-serif;color:#ffe1b0;text-transform:uppercase;margin:13px 0 9px;text-shadow:0 3px 0 #4d2119}.room-subtitle{color:#c0a59c;font-size:13px;line-height:1.5;text-align:center}.invite-box,.game-box{padding:15px;margin:17px 0 0}.invite-label{text-align:center;font-size:10px;color:#eab373;font-weight:900;letter-spacing:2px}.invite-code{color:#ffe4ba;word-break:break-all;text-align:center;font:1000 21px/1.2 ui-monospace,monospace;letter-spacing:2px;margin:15px 0}.invite-hint{text-align:center;font-size:11px;color:#a98f87}.action-row{display:flex;gap:8px}.secondary{flex:1;min-width:0;border:1px solid #a7613a;border-radius:7px;padding:12px 7px;background:#312023;color:#ffdfb3;font-size:11px;font-weight:900}.lobby-wait{display:flex;justify-content:center;align-items:center;gap:12px;margin:22px 0 3px;color:#cfb0a1;font-size:12px}.spinner{display:inline-block;width:17px;height:17px;border-radius:50%;border:2px solid #694339;border-top-color:#ffbf78;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.scoreboard{display:grid;grid-template-columns:1fr 63px 1fr;margin-top:16px;align-items:center}.player{text-align:center}.player-name{font-size:12px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-score{font:italic 1000 45px/1 Impact,sans-serif;color:#ffdc9c}.score-mid{text-align:center;color:#bd8c76;font-size:10px;font-weight:900}.round-marker{text-align:center;margin:14px auto 0;color:#f4b573;letter-spacing:1.5px;font-size:11px;font-weight:900}.stake-card{border:1px solid #653e2e;border-radius:7px;padding:12px;text-align:center;background:#150e11;margin:0 0 16px}.stake-card small{display:block;color:#b88f76;font-size:10px;letter-spacing:1.5px;margin-bottom:5px}.stake-card strong{color:#ffdeba;font-size:16px}.prompt{font:italic 1000 clamp(29px,8vw,42px)/1 Impact,"Arial Black",sans-serif;text-transform:uppercase;text-align:center;letter-spacing:1px;margin:15px 0 6px;color:#ffcb81;text-shadow:0 4px 0 #4f1a12}.help-text{text-align:center;color:#bc9f95;font-size:12px;line-height:1.4;margin:4px 0 15px}.hands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.hand{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0;overflow:hidden;min-height:183px;border-radius:8px;border:2px solid #9b5434;background:linear-gradient(#282023,#110e11);color:#ffebd0;transition:transform .12s,filter .12s,border-color .12s;box-shadow:0 6px 0 #10090a}.hand img{display:block;object-fit:cover;object-position:center center;width:100%;height:150px;padding:0;filter:drop-shadow(0 4px 8px #0007)}.hand .label{display:block;width:100%;margin-top:auto;text-align:center;padding:6px 0;background:linear-gradient(90deg,#5e251e,#9e3925,#492022);font:italic 1000 clamp(13px,3.3vw,18px)/1 Impact,"Arial Black",sans-serif;letter-spacing:0.5px;text-shadow:1px 2px #3e1712}.hand.rock{border-color:#ba774c;background:radial-gradient(ellipse at bottom,#64361d,#1d1717 80%)}.hand.paper{border-color:#d8b37c;background:radial-gradient(ellipse at bottom,#715843,#1b1616 80%)}.hand.paper .label{background:linear-gradient(90deg,#8c6538,#ccad72,#7a522f);color:#261814;text-shadow:none}.hand.scissors{border-color:#e34443;background:radial-gradient(ellipse at bottom,#5b1a22,#1e1418 80%)}.hand.scissors .label{background:linear-gradient(90deg,#73222a,#d43a40,#69222a)}.hand:hover,.hand:focus-visible{transform:translateY(-3px);filter:brightness(1.12);border-color:#ffdc9c}.choice-timer{text-align:center;display:flex;justify-content:center;align-items:center;gap:10px;color:#d9b1a0;font-size:11px;letter-spacing:1.1px;font-weight:900;margin:0 0 15px}.timer-number{font:italic 1000 32px/1 Impact,sans-serif;color:#ffe0a2;min-width:36px;text-align:center}.choice-timer.urgent .timer-number{color:#fa4840;animation:pulse .5s infinite alternate}@keyframes pulse{to{transform:scale(1.18)}}.locked{text-align:center;font-size:60px}.result-hands{display:flex;justify-content:center;align-items:center;gap:15px;font-size:48px}.result-hands .versus{font:italic 1000 17px Impact,sans-serif;color:#ed664c}.result-word{text-align:center;font:italic 1000 40px Impact,sans-serif;margin:12px 0 0}.result-word.win{color:#ffdb83}.result-word.lose{color:#f2675a}.result-word.tie{color:#f7c99c}.outcome,.standoff{text-align:center;color:#d3aca1;font-size:12px;margin:10px 0 17px}.room-footer{display:flex;justify-content:space-between;gap:10px;margin:19px 0;flex-wrap:wrap}.small-muted{border:0;background:transparent;color:#bb9488;font-size:11px;padding:5px 2px}.small-muted:hover{color:#fff}.note{margin:14px 0}#toast{position:fixed;z-index:10;bottom:23px;left:50%;max-width:92%;transform:translate(-50%,18px);opacity:0;pointer-events:none;background:#ffca7a;color:#30150e;border:1px solid #fff1ba;padding:12px 15px;border-radius:7px;box-shadow:0 10px 30px #0008;font-weight:850;font-size:12px;text-align:center;transition:.18s}#toast.visible{transform:translate(-50%,0);opacity:1}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffd889;outline-offset:3px}@media(max-width:370px){.app{padding:0 9px}.panel{padding:12px}.hand{min-height:164px}.hand img{height:133px}.beta{display:none}}

/* v0.4 arena visual design — one style across setup, selection, and combat. */
:root{--bg:#090a11;--panel:#1a1015;--border:#9b5735;--gold:#ffd68d;--red:#f34c3b;--txt:#fff0d5}
html{background:#08080e}body{background:radial-gradient(ellipse 90% 36% at 50% -5%,#96391c60 0%,transparent 75%),linear-gradient(180deg,#0b0a13 0%,#170c13 51%,#100b0e 100%)}
body:before{z-index:0;opacity:.25;background:repeating-linear-gradient(113deg,transparent 0px,transparent 39px,#ba52360a 40px,transparent 44px),radial-gradient(ellipse at 50% 100%,#ff592644,transparent 45%)}
.wash{z-index:0;height:25vh;opacity:.7;background:radial-gradient(ellipse 44% 14% at 50% 84%,transparent 50%,#de7d3e 54%,transparent 59%),radial-gradient(ellipse at bottom,#c44a1a33,transparent 70%)}
.app{position:relative;isolation:isolate;max-width:530px;padding:0 17px}
.app:before,.app:after{content:'';position:absolute;top:100px;width:44px;height:142px;background:linear-gradient(0deg,#4f161a,#af4d37 55%,#4b151d);box-shadow:0 0 0 2px #9b582b,0 0 24px #f34d2429;clip-path:polygon(0 0,100% 0,100% 100%,50% 77%,0 100%);z-index:-1;opacity:.76}
.app:before{left:6px;transform:rotate(-5deg)}.app:after{right:6px;transform:rotate(5deg)}
.topbar{padding:17px 0 6px}.brand{font-size:16px;letter-spacing:.3px}.beta{color:#f6c68a;background:#251419;border-color:#9d4b35}.connection{color:#f0c8a7}
.intro{position:relative;padding:11px 0 22px}.kicker{font-size:9px;letter-spacing:2.6px;color:#e99554}
.wordmark{font-family:Impact,"Arial Black",sans-serif;display:flex;flex-direction:column;align-items:center;gap:0;transform:skew(-9deg) rotate(-1deg);font-style:italic;margin:10px 0 14px;font-size:clamp(41px,10.7vw,69px);line-height:.88;letter-spacing:-1px;filter:drop-shadow(0 4px 0 #50150d) drop-shadow(0 8px 11px #000)}
.wordmark:before{content:'';position:absolute;z-index:-1;width:86%;height:85%;border:4px solid #d45428;top:3%;transform:skew(16deg) rotate(-8deg);border-radius:50%;box-shadow:0 0 14px #ff481444;opacity:.95}
.logo-top{display:flex;justify-content:center;gap:12px;white-space:nowrap;font-size:.86em}.logo-bottom{font-size:1.2em;position:relative}.logo-bottom:after{content:'';position:absolute;left:4%;right:2%;bottom:-8px;height:4px;transform:rotate(-3deg);background:linear-gradient(90deg,transparent,#ff612b,#f9e3b1,#ff4928,transparent);box-shadow:0 0 12px #f34c3b}
.wordmark span span,.wordmark>.word-scissors{width:auto;padding:4px 2px 8px;-webkit-text-stroke:1.5px #41211c}
.word-rock{background:linear-gradient(165deg,#fff6e1 0%,#a8aab3 19%,#5c5a63 39%,#c0a693 58%,#514c4f 79%,#e3c3a7 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:2px 3px 0 #292329}
.word-paper{background:linear-gradient(165deg,#fff8e8 6%,#d9b87c 38%,#fbddad 48%,#b78057 73%,#ffecce 97%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:2px 3px 0 #4b2f25}
.word-scissors{background:linear-gradient(163deg,#ffd4bf 8%,#f84c37 29%,#be1426 57%,#ff7751 69%,#8b1822 97%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:2px 4px 0 #4a101b}
.intro p{font-size:11px;color:#ffcf96;letter-spacing:1.5px}
.panel,.invite-box,.game-box{border:1px solid #ba703f;box-shadow:0 0 0 1px #ffb15c24 inset,0 0 32px #f04e1d0b,0 19px 42px #000b;background:linear-gradient(140deg,#321b1b,#1a1319 48%,#100e16)}
.panel{position:relative;padding:18px;border-radius:10px}.panel:before,.panel:after{content:'';position:absolute;height:2px;width:52%;top:-1px;background:linear-gradient(90deg,transparent,#fbd18d,#fa5427,transparent)}.panel:before{left:0}.panel:after{right:0;transform:scaleX(-1)}
.tabs{background:#100b11;border-color:#684129}.tab{font-weight:950;letter-spacing:1.5px}.tab.selected{background:linear-gradient(130deg,#5e1e1d,#b43d26 50%,#4e1c20);box-shadow:inset 0 0 0 1px #f69d54,0 0 20px #e5552433}
.field>label{color:#f4c992;font-size:11px}.field input:not([type=hidden]),.field select{background:linear-gradient(180deg,#23151b,#110d13);border-color:#ad7147;border-radius:2px;box-shadow:0 3px 0 #09070a}
.length{border-radius:2px;background:linear-gradient(#35212b,#151118);border-color:#87533e}.length.selected{border-color:#ffad54;background:linear-gradient(160deg,#a04a2b,#4d2323);box-shadow:0 0 12px #ff7e2733}
.primary,.arena-button{position:relative;clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);border:0;border-radius:0;color:#ffe3aa;background:linear-gradient(180deg,#f27639 0%,#c62924 21%,#8b111f 62%,#470c14 100%);text-shadow:2px 3px #471312;font-style:italic;font-size:22px;min-height:57px;box-shadow:inset 0 2px #fff0a3,0 0 20px #ef412f}
.primary:after,.arena-button:after{content:'';pointer-events:none;position:absolute;inset:5px;clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);border:1px solid #f6b963}
.primary:hover{filter:brightness(1.16)}
.room-brand{font-size:21px;gap:10px;transform:skew(-7deg);margin:5px auto 16px}.room-brand span{-webkit-text-stroke:.5px #24131b}
.room{padding-top:9px}.game-box{border:1px solid #b97446;border-radius:8px}.fighter-eyebrow{text-align:center;color:#e9b778;letter-spacing:2px;font-size:10px;font-weight:900}.fighter-prompt{font-size:clamp(29px,7vw,44px);color:#ffe0ae;letter-spacing:0;transform:skew(-7deg);text-shadow:2px 3px 0 #8c211d,0 0 19px #e66a343b}
.fighter-title-wrap .help-text{margin:4px 0 11px}.hands{gap:7px}.hand{position:relative;min-height:232px;background:#171118;border:2px solid #ca6e35;clip-path:polygon(9% 0,91% 0,100% 6%,100% 94%,91% 100%,9% 100%,0 94%,0 6%);border-radius:0;box-shadow:0 0 0 2px #000 inset,0 0 10px #ff66251a}
.hand .fighter-image{display:block;width:100%;height:192px;overflow:hidden;position:relative;isolation:isolate}
.hand .fighter-image:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 50% 70%,#ba451d50,#0d0a11 74%)}
.hand img{object-fit:cover;object-position:center center;height:100%;width:100%;filter:contrast(1.07) saturate(1.09)}
.hand .label{padding:9px 0 8px;background:linear-gradient(180deg,#dc753a,#75321a 55%,#210d10);color:#ffe2a8;font:italic 1000 clamp(17px,4.6vw,24px)/1 Impact,"Arial Black",sans-serif;letter-spacing:.1px;text-shadow:1px 2px #26131c;-webkit-text-stroke:.2px #54251e}
.hand.paper .label{color:#fff6d0;background:linear-gradient(180deg,#d5ad65,#9a6c36 57%,#3a2417)}
.hand.scissors .label{color:#ffe0d8;background:linear-gradient(180deg,#ff654e,#bc2528 57%,#441014)}
.hand.rock .label{color:#ffdfa6}.hand.scissors{border-color:#e75b4e}.hand.paper{border-color:#f0c68a}.hand.rock{border-color:#eda44b}
.hand:hover,.hand:focus-visible{transform:translateY(-5px);filter:brightness(1.08)}
.choice-timer{padding:7px 10px;border-top:1px solid #613629;border-bottom:1px solid #613629}.timer-number{color:#ffbc72}
.result-roster{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:8px}.result-roster>div{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;color:#efbf8e;font:italic 900 14px Impact}.result-roster img{width:100%;height:110px;object-fit:cover;border:1px solid #9a6044}.result-roster>b{color:#ff523c;text-align:center;font:italic 1000 16px Impact}.watch-again{width:100%;margin:8px 0}
.fight-overlay{position:fixed;inset:0;z-index:40;background:radial-gradient(ellipse at 50% 40%,#642619,#09070e 75%);padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom);overflow-y:auto;display:flex;justify-content:center;align-items:center}
.fight-shell{width:min(480px,100%);min-height:min(97dvh,860px);display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:13px;position:relative}
.fight-header{text-align:center}.fight-eyebrow{letter-spacing:2px;font-size:11px;color:#d2ad8c;font-weight:1000}.fight-versus{font:italic 1000 clamp(22px,6vw,37px)/1.08 Impact,'Arial Black',sans-serif;color:#ffe0aa;letter-spacing:.3px;margin-top:10px;text-shadow:0 3px 0 #6c241b}.fight-versus b{color:#e9463e;font-size:.65em;padding:0 8px}
.fight-stage{height:min(61dvh,570px);min-height:260px;position:relative;overflow:hidden;border:2px solid #dc8449;background:#0b0a10;box-shadow:0 0 0 3px #291318,0 0 35px #bc341e2d,0 22px 30px #0008;isolation:isolate}
.fight-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(25px) brightness(.38) saturate(.75)}.fight-frame{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 17px #0008)}
.fight-stage.impact{animation:stagePulse .2s ease-out}@keyframes stagePulse{0%{border-color:#fff5bb;filter:brightness(1.1)}100%{border-color:#dc8449;filter:none}}
.fight-result{z-index:3;position:absolute;bottom:0;left:0;right:0;text-align:center;background:linear-gradient(0deg,#06030bee 0%,#120409bb 60%,transparent 100%);padding:46px 10px 19px}
.fight-result-title{font:italic 1000 clamp(49px,13vw,78px)/1 Impact,'Arial Black',sans-serif;color:#ffc46e;letter-spacing:1px;-webkit-text-stroke:1px #521a17;text-shadow:2px 4px 0 #62160f,0 0 32px #fe4e29}
.fight-result-title.lose{color:#fa5b57}.fight-result-title.draw{color:#d7cbff}.fight-result p{margin:8px 0 0;font-size:11px;letter-spacing:1.6px;color:#ffe1c3;font-weight:950}
.fight-progress{font-size:10px;text-align:center;color:#b78f7c;letter-spacing:2px;font-weight:850}.fight-actions{display:flex;gap:10px}.fight-actions .secondary{flex:.9}.fight-actions .primary{flex:1.4;font-size:19px}.arena-secondary{clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);background:linear-gradient(#63423e,#19141c);border:1px solid #d9a86d;border-radius:0}
.fight-skip{align-self:center;border:0;background:transparent;color:#deb389;font-size:12px;letter-spacing:1.3px;padding:10px 15px;font-weight:900}
@media(max-width:400px){.app{padding:0 12px}.wordmark{font-size:clamp(38px,10.1vw,49px)}.logo-top{gap:9px}.hand{min-height:202px}.hand .fighter-image{height:165px}.hand .label{font-size:clamp(15px,4.4vw,19px)}.panel{padding:13px}.fight-stage{height:min(62dvh,530px)}}
@media(max-height:710px){.fight-stage{height:54dvh;min-height:220px}.fight-shell{gap:7px}}
@media(prefers-reduced-motion:reduce){.fight-stage.impact{animation:none}}
/* Restore bright two-line logo: default span rules must not override logo layout. */
.wordmark .logo-top{display:flex;align-items:center;justify-content:center;gap:12px;font-size:.78em;width:auto;padding:0;line-height:1.03}
.wordmark .logo-top>span{width:auto;padding:0 2px 7px}
.wordmark .logo-bottom{width:auto;padding:0 4px 11px;font-size:1.06em;line-height:.95}
.wordmark .word-rock,.room-brand .word-rock{-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #342826;text-shadow:none;filter:drop-shadow(1px 3px 0 #281819)}
.wordmark .word-paper,.room-brand .word-paper{-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #51351e;text-shadow:none;filter:drop-shadow(1px 3px 0 #412018)}
.wordmark .word-scissors,.room-brand .word-scissors{-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #581421;text-shadow:none;filter:drop-shadow(1px 3px 0 #400e13)}
.wordmark .word-scissors{font-size:1.06em}
@media(max-width:400px){.wordmark .logo-top{gap:9px;font-size:.78em}}

/* v0.5: Red and blue are PLAYER corners, never weapon categories. */
.room[data-corner="blue"]{--corner:#318ffe;--corner-bright:#9bd9ff;--corner-dark:#06225a}
.room[data-corner="red"]{--corner:#f23f47;--corner-bright:#ffc0b3;--corner-dark:#651222}
.room[data-corner] .fighter-eyebrow{color:var(--corner-bright)}
.room[data-corner] .fighter-prompt{text-shadow:0 3px 1px var(--corner-dark),0 0 22px var(--corner)}
.room[data-corner] .choice-timer{color:var(--corner-bright);border-color:var(--corner)}
.room[data-corner] .hand{border-color:var(--corner);box-shadow:0 0 13px color-mix(in srgb,var(--corner),transparent 50%);background:linear-gradient(155deg,#1e1a1e,var(--corner-dark));}
.room[data-corner] .hand .label,.room[data-corner] .hand.paper .label,.room[data-corner] .hand.scissors .label,.room[data-corner] .hand.rock .label{color:#fff4da;background:linear-gradient(180deg,var(--corner),var(--corner-dark));font-size:clamp(14px,4.2vw,22px)}
.room[data-corner] .hand .fighter-image:before{background:radial-gradient(circle at 50% 80%,var(--corner-dark),#0e0a10 73%)}
.room[data-corner] .hand:disabled{opacity:.6;cursor:wait}
.locked-weapon{width:min(75%,250px);margin:5px auto 14px;animation:weaponZoom .35s cubic-bezier(.2,1.4,.4,1)}
.locked-weapon img{width:100%;height:215px;object-fit:cover;border:3px solid var(--corner,#e6a35b);box-shadow:0 0 40px var(--corner,#d6863d);clip-path:polygon(10% 0,90% 0,100% 7%,100% 93%,90% 100%,10% 100%,0 93%,0 7%)}
.locked-weapon-name{text-align:center;margin-top:7px;color:var(--corner-bright,#ffe2ad);font:italic 1000 23px Impact,sans-serif}
@keyframes weaponZoom{from{transform:scale(.55);opacity:.25}to{transform:scale(1);opacity:1}}
.fight-stage.show-pov>.fight-frame,.fight-stage.show-pov>.fight-blur{visibility:hidden}
.pov-layer{display:none;position:absolute;inset:0;z-index:2;background:#0c0b13;overflow:hidden}
.fight-stage.show-pov .pov-layer{display:block}
.pov-layer>img{width:100%;height:100%;object-fit:contain;filter:contrast(1.05)}
.pov-count{position:absolute;top:10%;left:50%;transform:translateX(-50%);font:italic 1000 clamp(70px,19vw,120px) Impact,sans-serif;color:#fff1ca;text-shadow:0 4px 0 #98201d,0 0 35px #ff4419;filter:drop-shadow(0 5px 3px #000)}
.pov-reveal{position:absolute;inset:20% 5% 14%;display:flex;align-items:center;justify-content:center;gap:10px;animation:weaponZoom .3s ease-out}
.pov-reveal>div{width:42%;height:70%;border:2px solid #ff7a57;background:#170e16;box-shadow:0 0 25px #ff7238a9;overflow:hidden}
.fight-overlay[data-corner="blue"] .pov-reveal>div:first-child{border-color:#268ef6;box-shadow:0 0 25px #268ef6b9}
.fight-overlay[data-corner="red"] .pov-reveal>div:first-child{border-color:#ff3d47;box-shadow:0 0 25px #ff3d47b9}
.pov-reveal img{width:100%;height:100%;object-fit:cover}
.pov-reveal>b{font:italic 1000 25px Impact;color:#ffd08d;text-shadow:1px 2px #000}
.pov-reveal[hidden]{display:none!important}
@media(max-width:380px){.room[data-corner] .hand .fighter-image{height:155px}.locked-weapon img{height:185px}}

/* Keep widescreen POV art readable in a portrait fight-stage without black gaps. */
.pov-layer>img.pov-backdrop{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(24px) brightness(.28) saturate(.8);opacity:.95}
.pov-layer>img#povImage{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;filter:contrast(1.07) drop-shadow(0 5px 15px #000)}
.pov-count,.pov-reveal{z-index:2}
/* v0.6: deliberately cinematic, bright title + dark arena + metallic controls. */
:root{--bg:#050910;--txt:#fff4dd;--gold:#ffde9a;--muted:#d1bfd0;--border:#99704c}
html{background:#050910}
body{background:radial-gradient(ellipse 85% 30% at 11% 0%,#04417785,transparent),radial-gradient(ellipse 78% 35% at 93% 0%,#75201690,transparent),linear-gradient(180deg,#090d18 0%,#080d15 52%,#151016 100%);font-family:Inter,"Segoe UI",system-ui,sans-serif}
body:before{opacity:.12;background:repeating-linear-gradient(90deg,transparent 0 25px,#52628135 27px 28px,transparent 29px 55px)}
.wash{height:58vh;background:radial-gradient(ellipse 70% 35% at 50% 100%,#f1682540,transparent 85%);opacity:1}
.app{padding:0 14px;max-width:510px}
.topbar{padding:13px 2px 9px;border-bottom:1px solid #dbac7140}
.brand{font-size:18px;color:#f0e6dc;letter-spacing:-.6px;text-shadow:0 2px 7px #000}.brand span{color:#ff735c}
.beta{background:linear-gradient(#2a2c3b,#0b111e);color:#efcf94;border-color:#cc8c574a}.connection{font-size:10px}
.intro{position:relative;text-align:center;padding:15px 8px 8px;isolation:isolate}
.intro:before{content:"";position:absolute;inset:0 -14px 12px;z-index:-2;opacity:.95;background:radial-gradient(circle at 50% 65%,#cb6c2f45 0,transparent 38%),linear-gradient(90deg,#1b65b45e,transparent 31%,transparent 68%,#b5283252)}
.intro:after{content:"";position:absolute;z-index:-1;left:-13px;right:-13px;bottom:10px;height:3px;background:linear-gradient(90deg,#0d83ed,transparent 40%,#ec882b,transparent 66%,#e02d3b);box-shadow:0 -7px 23px #d256314e}
.intro-crest{width:32px;height:86px;top:51px;background:linear-gradient(#0665bd99,#091829aa)!important;border:1px solid #247cdc88;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.intro-crest.crest-right{background:linear-gradient(#b3262caa,#2a0c12b3)!important;border-color:#eb3f42}
.kicker{letter-spacing:3px;font-size:10px;color:#ffdc99}.kicker-star{color:#ff5b49}
.wordmark{margin:7px 0 0;font-size:clamp(43px,11vw,68px);line-height:.86;filter:drop-shadow(0 7px 7px #030309)}
.wordmark .logo-top{gap:13px;font-size:.87em;line-height:1.06}.wordmark .logo-bottom{font-size:1.18em;margin-top:-1px}
.wordmark .word-rock{background:linear-gradient(145deg,#fffefa 5%,#bab6bc 29%,#676c7c 58%,#f8f7fa 78%,#a0a3b8);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #292a30;filter:drop-shadow(3px 4px 0 #262a37) drop-shadow(0 0 8px #b4beff7c)}
.wordmark .word-paper{background:linear-gradient(180deg,#fffbed 12%,#e2c69b 38%,#9c845f 55%,#ffecd2 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #654527;filter:drop-shadow(3px 4px 0 #4c3e31) drop-shadow(0 0 9px #e4c58a81)}
.wordmark .word-scissors{background:linear-gradient(170deg,#fff3e9 6%,#ff8a78 28%,#e52f37 54%,#7d0d1d 68%,#f7694c 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #661521;filter:drop-shadow(3px 5px 0 #490a17) drop-shadow(0 0 12px #f64e48b4)}
.hero-tag{color:#ffe7ac;letter-spacing:3px;font-size:10px;font-weight:950;margin:14px 0 1px}.hero-tag span{color:#f55146}
.hero-roster{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin:9px auto 7px;max-width:430px;height:140px}
.hero-roster:after{content:"";position:absolute;bottom:-3px;left:6%;right:6%;height:4px;background:linear-gradient(90deg,#187be1,#f2bf66,#df3545);box-shadow:0 0 20px #f09755;border-radius:40px}
.hero-roster img{width:100%;height:135px;object-fit:cover;object-position:50% 27%;border:1px solid #956e52;clip-path:polygon(15% 0,85% 0,100% 12%,100% 90%,86% 100%,14% 100%,0 90%,0 12%);filter:contrast(1.1) brightness(.94);box-shadow:inset 0 0 25px #f58b55}
.hero-roster img:first-child{border-color:#4db2fd;object-position:50% 25%}.hero-roster .hero-center{border-color:#f7c783;transform:translateY(-7px);height:143px;z-index:1}.hero-roster img:last-child{border-color:#ec5250}
.hero-slogan{font-size:10px;letter-spacing:1.7px!important;color:#d0cad4!important;font-weight:750!important;margin:12px 0 15px!important}.hero-slogan strong{color:#ffce84}
.panel{position:relative;background:linear-gradient(130deg,#222334ed,#101521f2 43%,#211923ed),radial-gradient(circle at 50% 0%,#8c593d,#000);padding:16px 17px 20px;border:1px solid #b98250;border-radius:4px;box-shadow:inset 0 1px 0 #e4b68a7c,inset 0 0 22px #bb9b5a17,0 0 0 3px #090c16,0 14px 35px #000a}
.panel:before,.panel:after{content:"";position:absolute;top:-5px;left:9px;width:52px;height:5px;background:linear-gradient(90deg,#fff3c2,#cf7935,transparent);box-shadow:0 0 20px #ff9e4a}
.panel:after{left:auto;right:9px;transform:scaleX(-1)}
.tabs{border:1px solid #887461;background:#090e18;gap:5px;clip-path:polygon(4% 0,96% 0,100% 16%,100% 84%,96% 100%,4% 100%,0 84%,0 16%);border-radius:0}
.tab{color:#b7b1bf;font-size:12px;letter-spacing:1.2px;padding:11px 5px}.tab.selected{background:linear-gradient(180deg,#ffb85a,#a84d1f 50%,#54231a);color:#fff4c8;text-shadow:0 1px 3px #542319;border-radius:0;box-shadow:inset 0 2px #ffe6a2,0 0 20px #e68a355e}
.field{margin:0 0 15px}.field>label{font-size:10px;letter-spacing:1.65px;color:#ffe3af;display:flex;align-items:center;gap:6px;text-shadow:0 1px 7px #ec8a4349}
.field>label:before{content:"✦";color:#ff8b55;font-size:10px}
.field>input:not([type=hidden]),.field select{height:48px;border:1px solid #8a7790;border-bottom-color:#dc944e;color:#fff3df;background:linear-gradient(180deg,#0c111c,#1c1d27);border-radius:3px;box-shadow:inset 0 0 12px #0007;outline:none}
.field>input:focus,.field select:focus{border-color:#ffbc64;box-shadow:0 0 0 1px #ffac5499,0 0 18px #ff9c3b3c}
.length-row{gap:7px}.length{background:linear-gradient(#292b3c,#121620);color:#ece0d2;border:1px solid #7b6d77;border-bottom:2px solid #756057;border-radius:3px;padding:12px 3px;font-weight:950}.length.selected{background:linear-gradient(#f1b562,#ad602c 51%,#522719);border-color:#f9c17c;color:#fff6da;box-shadow:inset 0 2px #ffe6ac,0 0 18px #fbb45765}
.primary,.arena-button{position:relative;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);border-radius:0;background:linear-gradient(180deg,#ffca71,#f4802e 23%,#d53b24 55%,#7b1c21 100%);box-shadow:inset 0 3px #ffe6ae,inset 0 -2px #5c090a,0 7px 25px #ff5d394f;color:#fff5cc;font:italic 1000 23px Impact,'Arial Black',sans-serif;text-shadow:2px 3px 0 #782d19;min-height:59px;letter-spacing:1px}
.primary:hover,.arena-button:hover{filter:brightness(1.12)}.primary:after{border-color:#ffe2a8!important}
.secondary{background:linear-gradient(#303644,#10141e);border:1px solid #afa3a3;color:#ffe5b9}
.foot,.local,.site-footer{color:#a4abbc}
.room{padding-top:12px}.room-brand{font-size:21px;filter:drop-shadow(0 0 10px #d8694c80)}
.game-box{border:1px solid #aa825f;background:linear-gradient(#191a28,#0e121e);box-shadow:0 12px 40px #0008}
.fighter-prompt{font-size:clamp(30px,7.6vw,43px);color:#ffe2a7;text-shadow:1px 4px #5a2929,0 0 24px #f6a85b8a}
.room[data-corner] .hand{border:1px solid #d7b18a;clip-path:polygon(11% 0,89% 0,100% 8%,100% 92%,89% 100%,11% 100%,0 92%,0 8%);background:linear-gradient(155deg,#30354b,#070a11);box-shadow:0 0 22px #0008}
.room[data-corner] .hand .fighter-image{height:172px}.room[data-corner] .hand .fighter-image img{object-position:center 35%;filter:contrast(1.08) brightness(1.07)}
.room[data-corner] .hand .label,.room[data-corner] .hand.paper .label,.room[data-corner] .hand.scissors .label,.room[data-corner] .hand.rock .label{font-size:clamp(16px,4.3vw,24px);background:linear-gradient(#d0ba9d,#4c3a35);color:#fff0ce}
.room[data-corner] .hand:active{transform:scale(.95)}
.room[data-corner="blue"] .hand{border-color:#6cbbfc}.room[data-corner="red"] .hand{border-color:#f27871}
.room[data-corner="blue"] .hand .label{box-shadow:inset 0 0 12px #135aaa}.room[data-corner="red"] .hand .label{box-shadow:inset 0 0 12px #a72b30}
.room[data-corner] .locked-weapon img{height:235px;object-fit:cover;border:2px solid var(--corner);box-shadow:0 0 35px var(--corner)}
.fight-overlay{background:radial-gradient(ellipse at top,#384f73b3,transparent 45%),radial-gradient(ellipse at bottom,#7131258a,transparent 55%),#090b14}
.fight-shell{gap:10px}.fight-stage{border-color:#e8ba80;box-shadow:0 0 0 4px #2e1b1a,0 0 30px #ff914b55,0 25px 40px #0008}
.fight-versus{font-size:clamp(28px,8vw,44px);color:#ffe2a8;filter:drop-shadow(0 3px 4px #d3543073)}
.pov-layer>img#povImage{object-fit:cover;filter:contrast(1.14)}.pov-count{font-size:clamp(79px,26vw,140px);text-shadow:0 5px 0 #a52a1b,0 0 35px #ffbb81}
.pov-reveal{inset:16% 5% 15%;gap:10px}.pov-reveal>div{width:43%;height:82%;border:2px solid #e5b77e;box-shadow:0 0 25px #e0a05e6b}.pov-reveal img{object-fit:cover}
.fight-stage.morphing .fight-frame{animation:morphPop .9s ease-out}
@keyframes morphPop{0%{filter:brightness(4) blur(9px);transform:scale(1.1)}55%{filter:brightness(1.6) blur(2px)}100%{filter:brightness(1) blur(0)}}
.fight-result-title{color:#fff2bf;text-shadow:0 3px 0 #a64724,0 0 25px #e76b4e}
.fight-actions .arena-button{font-size:20px}.fight-actions .secondary{font-weight:900}
@media(max-width:390px){.hero-roster{height:117px}.hero-roster img{height:111px}.hero-roster .hero-center{height:120px}.wordmark{font-size:clamp(41px,11vw,58px)}.room[data-corner] .hand .fighter-image{height:146px}.room[data-corner] .hand .label{font-size:15px}}
@media(prefers-reduced-motion:reduce){.fight-stage.morphing .fight-frame{animation:none}}