:root{color-scheme:dark;--navy:#090f20;--ink:#f4f6ff;--muted:#9db0cb;--gold:#f6b54d;--cyan:#30cdff;--lime:#39d58f}
*{box-sizing:border-box}
html{min-height:100%;background:#090f1d}
body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:radial-gradient(ellipse at 54% 46%,#172b4d 1%,#10172a 57%,#080e1c 100%);overflow-x:auto}
button,input,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffe6a4;outline-offset:3px}
button:active:not(:disabled){transform:translateY(2px)}
#app{width:100%;min-width:1020px;min-height:710px;height:100vh;max-height:1300px;position:relative;overflow:hidden;isolation:isolate;border:1px solid #27324a}
.stage-ambient{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
#app::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 130px #020712ac;border:7px solid #080e1a5c}
.stage-vignette{position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,#080b16b0 0%,transparent 25%,transparent 69%,#050a13a9 100%),linear-gradient(180deg,#02061085 0%,transparent 22%,transparent 75%,#02040dc7 100%)}
.topbar{height:83px;position:relative;z-index:5;display:flex;align-items:center;gap:16px;padding:11px 25px;background:linear-gradient(180deg,#080e1bd9,#1521379e 89%,transparent);border-bottom:1px solid #8fbce322}
.brand{width:290px;flex:0 0 290px;transform:skew(-5deg);filter:drop-shadow(2px 3px 0 #02030d)}
.brand strong{display:block;font-size:clamp(35px,3.25vw,55px);letter-spacing:.06em;font-style:italic;font-weight:1000;line-height:.95;background:linear-gradient(125deg,#d8faff,#3b9df8 34%,#a7f38f 65%,#52c97a);color:transparent;background-clip:text;-webkit-background-clip:text;text-shadow:none;-webkit-text-stroke:.7px #bde1ff80}
.brand small{display:block;margin:7px 0 0 22px;font-size:12px;letter-spacing:.25em;font-weight:900;color:#e9f1ff;text-shadow:1px 2px 2px #000}
.player-header{display:flex;align-items:center;min-width:236px;gap:10px}
.avatar{width:64px;height:64px;border:3px solid #90bdf8;border-radius:10px;background:linear-gradient(140deg,#132f54,#42608e);box-shadow:0 0 13px #41b5ff6e,inset 0 0 7px #aeeaff;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.player-meta{min-width:160px}
.player-line{font-size:15px;font-weight:950;display:flex;align-items:center;gap:7px;white-space:nowrap}
.player-line b{color:#f9d48b;font-size:21px}
.level-row{font-size:12px;color:#ffcf76;margin-top:6px;display:flex;align-items:center;gap:11px;font-weight:900}
.exp{width:137px;height:11px;position:relative;border:1px solid #87b6f7;border-radius:5px;background:#040b1b;overflow:hidden}
.exp::before{content:"";position:absolute;inset:0;width:32%;background:linear-gradient(90deg,#0b56c4,#42baff)}
.exp-t{font-size:10px;color:#d8e5fc}
.top-spacer{flex:1}
.wallet{display:flex;align-items:center;gap:11px;flex:none}
.money{display:flex;align-items:center;gap:10px;padding:6px 8px;background:linear-gradient(180deg,#1b2a438f,#070d1c99);border:1px solid #8facd533;border-radius:7px;font-size:20px;font-weight:900;white-space:nowrap}
.currency-icon{width:31px;height:31px;display:grid;place-items:center;font-size:24px;filter:drop-shadow(1px 2px 3px #000)}
.money small{font-size:11px;color:#b4c8de;font-weight:700}
.plus{font-size:24px;font-weight:900;color:#d3e8ff;background:linear-gradient(#3a5983,#142c4b);border:2px solid #7ca9da;border-radius:6px;width:29px;height:30px;display:grid;place-items:center;line-height:1}
.quick-actions{display:flex;align-items:center;gap:7px;margin-left:2px}
.top-icon{width:46px;height:47px;display:grid;place-items:center;border:1px solid #6b86a744;border-radius:11px;background:linear-gradient(#253757aa,#0c1528d9);box-shadow:inset 0 1px #99b2d744;color:#e3efff;font-size:27px;position:relative}
.top-icon.dot::after,.nav-item.dot::after{content:"";width:10px;height:10px;border-radius:50%;background:#f65d68;position:absolute;right:4px;top:4px;box-shadow:0 0 7px #f65d68}
.leftnav{position:absolute;z-index:5;left:23px;top:136px;width:210px;display:flex;flex-direction:column;gap:14px}
.nav-item{height:77px;width:100%;position:relative;display:flex;align-items:center;gap:16px;text-align:left;padding:11px 13px;color:#f5f9ff;background:linear-gradient(100deg,#1a2a45ef,#09142ce8);border:2px solid #466b97;border-radius:11px;box-shadow:4px 5px 0 #0009,inset 0 1px #8ba6d655}
.nav-item .nav-symbol{width:53px;font-size:33px;color:#ffcd78;text-align:center;filter:drop-shadow(0 0 7px #e5a64357)}
.nav-item strong{display:block;font-size:21px;font-weight:950;letter-spacing:.06em}
.nav-item small{display:block;margin-top:3px;color:#a4b3d0;font-size:11px}
.nav-item:hover,.top-icon:hover,.utility:hover{border-color:#54caf8;filter:brightness(1.12)}
.backdrop-headlines{position:absolute;top:133px;left:24%;right:33%;pointer-events:none;z-index:0;display:flex;gap:28px;align-items:flex-start;justify-content:center}
.flag{width:29%;height:200px;background:linear-gradient(165deg,#143d92dd,#12255cbb);box-shadow:12px 10px 20px #000a,0 0 25px #133d90aa;transform:rotate(-5deg);border:1px solid #9cbaff3d;text-align:center;padding:20px 5px}
.flag.green{background:linear-gradient(160deg,#144b32db,#0a462ddd);transform:rotate(5deg)}
.flag .flag-icon{font-size:67px;text-shadow:0 0 20px #bfdafa}
.flag.green .flag-icon{filter:grayscale(1) brightness(3)}
.flag .flag-title{font-size:34px;font-weight:1000;letter-spacing:.14em;line-height:1.25;text-shadow:3px 3px 3px #000}
.flag .flag-words{font-size:12px;letter-spacing:.2em;color:#d4e1e8}
.wall-slogan{text-align:center;align-self:center;padding:13px 7px 18px;min-width:165px;color:#83dcff;font-style:italic;font-size:19px;font-weight:900;line-height:1.6;text-shadow:0 0 12px #15c4ff}
.battle-room{position:absolute;left:245px;right:475px;top:35%;height:37%;pointer-events:none;z-index:1}
.battle-room .floating-map{height:100%;width:100%;display:block;filter:drop-shadow(0 0 14px #1b9fff88)}
.console-characters{position:absolute;left:21%;right:30%;bottom:25%;height:33%;pointer-events:none;display:flex;align-items:end;justify-content:space-between;z-index:2}
.hero-podium{position:relative;width:24%;height:70%;transform:rotate(-4deg)}
.hero-podium:nth-child(2){transform:rotate(4deg) translateY(12px)}
.hero-podium:nth-child(3){transform:rotate(-3deg) translateY(16px)}
.hero-podium img{width:100%;height:100%;object-fit:cover;border:3px solid #79b5e2c1;border-radius:16px 16px 10px 10px;box-shadow:0 10px 20px #000e,0 0 23px #3698f863;mask-image:linear-gradient(180deg,#000 75%,transparent);opacity:.94}
.hero-podium span{position:absolute;top:-21px;left:6px;font-size:12px;font-weight:900;color:#e9f4ff;background:#0b1a2be9;border:1px solid #84ddff;border-radius:5px;padding:2px 7px}
.tactical-quote{position:absolute;left:37%;top:17%;z-index:1;color:#8de6ff;font-weight:900;font-style:italic;text-align:center;line-height:1.4;font-size:15px;text-shadow:0 0 8px #1fc8ff}
.rightside{position:absolute;z-index:5;top:112px;right:22px;width:min(31%,468px);display:flex;flex-direction:column;gap:16px}
.hud-panel{border:2px solid #46668c;border-radius:12px;background:linear-gradient(145deg,#12223bf0,#0b1629ee);box-shadow:5px 8px 20px #000b,inset 0 0 20px #31476080;overflow:hidden}
.hud-title{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px;color:#f0f4ff;font-weight:950;font-size:20px}
.hud-title small{font-size:11px;font-weight:700;color:#b8cce5}
.hud-title em{color:#75ef86;font-style:normal}
.mode-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:12px;padding:0 12px 12px}
.mode-primary,.mode-extra{border-radius:11px;border:3px solid #497fd1;display:flex;align-items:center;justify-content:center;background:#142640;color:#fff;position:relative;overflow:hidden;box-shadow:0 0 11px #12c6f9a3;transition:.15s}
.mode-primary{height:189px;flex-direction:column;background:linear-gradient(180deg,#3175a660,#080e1f99),radial-gradient(circle at 50% 30%,#436c9e,#071327)}
.mode-primary img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.48;filter:saturate(1.1)}
.mode-primary .mode-map{font-size:75px;z-index:1;filter:drop-shadow(0 5px 6px #000)}
.mode-primary strong{font-size:24px;z-index:1;text-shadow:0 2px 5px #000;font-weight:1000}
.mode-primary span{z-index:1;font-size:12px;color:#dbefff}
.mode-primary.selected{border-color:#49cfff;box-shadow:0 0 17px #0fdfff, inset 0 0 14px #49cfff}
.mode-stack{display:flex;flex-direction:column;gap:12px}
.mode-extra{height:88px;gap:8px;flex-direction:column;font-size:17px;font-weight:950;box-shadow:none;border-color:#d9a754;background:linear-gradient(135deg,#67451d,#2b1c1d)}
.mode-extra.friends{border-color:#b269ff;background:linear-gradient(135deg,#4a2c75,#20163a)}
.mode-extra .mode-emoji{font-size:26px}
.mode-extra span{font-size:10px;color:#e1d1b7;font-weight:700}
.mode-extra:disabled{opacity:.83}
.mode-extra .soon{position:absolute;right:-27px;top:9px;transform:rotate(35deg);background:#12233bee;font-size:9px;padding:2px 30px;color:#fff}
/* Compact, directly playable camp prediction in the approved right-hand HUD. */
.prediction-hud{padding:0 12px 10px;border-color:#7b7898;background:linear-gradient(145deg,#1a2441f0,#0b182beF)}
.prediction-hud .hud-title{padding:9px 12px 8px;margin:0 -12px 2px;border-bottom:1px solid #52729999;background:linear-gradient(90deg,#192e55a6,#102b45a9)}
.prediction-hud .hud-title span{color:#fff1bf}
.prediction-hud-intro{font-size:12px;line-height:1.35;margin:8px 2px 10px;color:#cbddef}
.prediction-hud-intro span{float:right;color:#c7f5d2;font-weight:850}
.prediction-hud-camps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.prediction-hud-camp{border:2px solid var(--camp);border-radius:9px;min-height:41px;background:linear-gradient(135deg,#172d49,#0e1c32);color:#f4f9ff;padding:7px 8px;font-size:14px;font-weight:900;text-align:center}
.prediction-hud-camp[aria-pressed="true"]{background:color-mix(in srgb,var(--camp) 40%,#14243a);box-shadow:inset 0 0 12px #ffffff30,0 0 10px color-mix(in srgb,var(--camp) 50%,transparent)}
.prediction-hud-camp:disabled{opacity:.7;cursor:not-allowed}
.prediction-hud-stake-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:10px 1px 5px;color:#c9d9ee}
.prediction-hud-stake-label strong{color:#ffe1a3;font-size:12px}
.prediction-hud-stakes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.prediction-hud-stakes button{border:1px solid #67819f;border-radius:7px;background:#172f50;color:#eff6ff;font-size:13px;font-weight:850;padding:8px 3px;min-width:0}
.prediction-hud-stakes button[aria-pressed="true"]{background:linear-gradient(#ffde9c,#dba049);border-color:#ffe3a8;color:#312116}
.prediction-hud-stakes button:disabled{opacity:.65;cursor:not-allowed}
.prediction-hud-summary{font-size:12px;color:#b8eeef;line-height:1.35;margin:8px 1px 6px;min-height:16px}
.prediction-hud-submit{width:100%;border:2px solid #ffda96;border-radius:8px;background:linear-gradient(#ffde8d,#d89a39);font-size:15px;font-weight:1000;color:#282019;padding:8px}
.prediction-hud-submit:disabled{opacity:.58;cursor:not-allowed}
.prediction-hud-status{font-size:11px;line-height:1.4;color:#b3c8df;margin-top:7px;min-height:20px}
.prediction-hud-status[role="alert"]{color:#ffe09a}
@media(max-height:760px){
 .prediction-hud{padding-bottom:7px}
 .prediction-hud .hud-title{padding:5px 10px}
 .prediction-hud-intro{display:none}
 .prediction-hud-camps{gap:5px;margin-top:5px}
 .prediction-hud-camp{min-height:32px;padding:4px;font-size:12px}
 .prediction-hud-stake-label{margin:5px 0 4px}
 .prediction-hud-stakes button{padding:5px 2px;font-size:11px}
 .prediction-hud-summary{margin:5px 0;min-height:14px}
 .prediction-hud-submit{padding:5px;font-size:13px}
 .prediction-hud-status{font-size:10px;margin-top:4px}
}
.center-cta{position:absolute;z-index:6;left:clamp(290px,32%,510px);bottom:92px;width:clamp(370px,33%,510px);height:105px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;color:#fff5d2;text-shadow:2px 3px 3px #62310e;background:linear-gradient(180deg,#fff2ac 0%,#f5b840 12%,#c87917 79%,#5c381b 100%);border:5px solid #f8e8bc;clip-path:polygon(5% 2%,95% 2%,100% 50%,95% 98%,5% 98%,0 50%);filter:drop-shadow(0 0 14px #fac15c);box-shadow:inset 0 0 0 6px #806029}
.center-cta strong{font-size:clamp(32px,3vw,47px);letter-spacing:.12em;font-weight:1000;line-height:1.15}
.center-cta small{font-size:14px;font-weight:750;color:#fff0c2;letter-spacing:.08em}
.center-cta:hover{filter:brightness(1.13) drop-shadow(0 0 20px #fccc55)}
.bottom-left{position:absolute;left:25px;bottom:28px;z-index:5;width:390px;height:137px;padding:10px 13px 10px 110px;border:3px solid #688fc0;border-radius:13px;background:linear-gradient(115deg,#123052c9,#090f20ee);box-shadow:3px 3px 14px #050b15,inset 0 0 13px #4199d05e;text-align:left;display:flex;flex-direction:column;justify-content:center}
.bottom-left img{position:absolute;left:9px;top:11px;width:85px;height:106px;border:2px solid #84baf1;border-radius:9px;object-fit:cover}
.bottom-left strong{font-size:21px;font-weight:950;text-shadow:1px 2px #071326}
.bottom-left b{color:#ffcc5b;font-size:23px}
.bottom-left small{margin-top:8px;color:#b7d8ff;font-size:12px}
.bottom-nav{position:absolute;right:23px;bottom:20px;z-index:5;display:flex;gap:10px}
.utility{padding:13px 15px;min-width:133px;min-height:71px;display:flex;align-items:center;gap:9px;text-align:left;border:2px solid #52779d;border-radius:10px;color:#f3f7ff;background:linear-gradient(155deg,#233a5be7,#0f1b2df5);box-shadow:3px 4px 13px #0007}
.utility .ui-icon{font-size:29px;color:#ffe5a7}
.utility strong{font-size:17px;white-space:nowrap}
.utility small{display:block;margin-top:4px;font-size:10px;color:#b0c1d9}
.versionline{position:absolute;left:46%;bottom:9px;font-size:10px;z-index:4;color:#9eb9c8a8}
.overlay-modal{max-width:min(92vw,920px);width:780px;max-height:86vh;padding:0;color:#f1f6ff;background:#101d34;border:2px solid #5d91c9;border-radius:15px;box-shadow:0 26px 90px #000c,inset 0 0 30px #2d65a04a}
.overlay-modal::backdrop{background:#030711d9;backdrop-filter:blur(7px)}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 21px;background:linear-gradient(100deg,#1c4770,#151c3e);border-bottom:2px solid #68a6de68}
.modal-header h2{margin:0;font-size:25px}
.close{border:1px solid #698daf;border-radius:7px;background:#1f304e;color:white;padding:7px 13px;font-weight:900}
.modal-body{padding:23px;overflow-y:auto;max-height:calc(86vh - 69px)}
.modal-body p{line-height:1.7;color:#c3d6eb}
.modal-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}
.modal-action,.submit{background:linear-gradient(#ffdc83,#db9a32);border:2px solid #ffe2a9;border-radius:9px;color:#2b1c13;padding:12px 19px;font-weight:950}
.modal-action.secondary{background:#213e5d;border-color:#5489bc;color:#eaf5ff}
.notice{color:#c0d0e6;background:#162d48;border-left:4px solid #59b8e0;padding:13px 15px;border-radius:4px;font-size:14px;line-height:1.7}
.mode-explainer{font-size:15px}
.prediction-lead{color:#cbd7ec;font-size:14px}
.camp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:19px 0}
.camp-option{padding:16px 5px;border:2px solid var(--camp);border-radius:10px;color:#fff;font-weight:900;background:#18283b;min-height:77px}
.camp-option[aria-pressed="true"]{background:color-mix(in srgb,var(--camp) 44%,#192339);box-shadow:0 0 17px var(--camp)}
.camp-option .badge-dot{display:inline-block;width:14px;height:14px;background:var(--camp);border-radius:50%;margin-right:6px}
.camp-option .camp-sub{display:block;font-size:11px;color:#cad8e9}
.stakes{display:flex;gap:10px;margin:12px 0}
.stake-btn{flex:1;padding:11px;background:#1e3454;color:#edf5ff;border:2px solid #637e9e;border-radius:8px}
.stake-btn[aria-pressed="true"]{background:#f5b95d;color:#211b14;border-color:#ffe3a2}
.status,.summary{padding:12px 0;color:#cbdbea;font-size:14px;line-height:1.55}
.comics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.comic{color:#fff;border:2px solid var(--camp);background:#14243d;border-radius:12px;text-align:left;padding:9px}
.comic-title{display:flex;justify-content:space-between;gap:6px;font-size:14px;font-weight:900}
.comic-title span{color:#bacce5;font-size:10px}
.comic-image{height:178px;margin:9px 0;overflow:hidden;background:#1a3456;border-radius:6px}
.comic-image img{width:100%;height:100%;object-fit:cover}
.bubble{font-size:12px;color:#e3eaf3;line-height:1.5;min-height:64px}
.comic-foot{font-size:10px;color:#91d9fa}
.poster{position:relative;text-align:center}
.poster>img{display:block;max-width:460px;max-height:53vh;margin:12px auto;object-fit:contain;border:3px solid #2b5475;border-radius:7px}
.poster-quote{margin:10px 0;color:#ffe28c;font-size:22px;font-weight:950}
.dialog-footer{color:#a5b9d4;font-size:12px}
#nicknameForm{display:flex;gap:10px;margin:12px 0}
#nicknameInput{flex:1;min-width:0;background:#0b1830;border:1px solid #537ba1;border-radius:7px;padding:10px;color:white}
#nicknameForm button{background:#f4c568;border:0;border-radius:7px;padding:8px 16px;font-weight:900}
.disabled-note{font-size:12px;color:#ffcb84}
#queueBtn:disabled{opacity:.65;background:#3d4a62}
@media(max-width:1200px){.brand{width:230px;flex-basis:230px}.brand strong{font-size:34px}.player-header{min-width:200px}.topbar{gap:10px}.money{font-size:14px}.rightside{width:330px}.leftnav{left:14px;width:186px}.nav-item{height:67px}.nav-item strong{font-size:18px}.bottom-left{width:315px}.bottom-nav .utility{min-width:113px;padding:8px}.center-cta{left:32%;width:37%;bottom:102px}.backdrop-headlines{left:20%;right:31%}}
@media(max-height:760px){.leftnav{top:118px;gap:8px}.nav-item{height:60px}.nav-item .nav-symbol{font-size:28px}.rightside{top:103px;gap:9px}.mode-primary{height:151px}.mode-extra{height:68px}.hud-title{font-size:17px}.bottom-left{bottom:15px;height:101px}.bottom-left img{height:82px;width:71px}.bottom-left{padding-left:86px}.bottom-nav{bottom:12px}.center-cta{bottom:65px;height:92px}.console-characters{bottom:23%}.flag{height:155px}.flag .flag-icon{font-size:47px}.flag .flag-title{font-size:28px}}
@media(max-aspect-ratio:1){#app{min-width:1020px}body::before{content:"橫向觀看可獲得完整作戰室大廳畫面 →";position:fixed;top:0;left:0;z-index:40;padding:6px 12px;background:#121d31;color:#ffd78b;font-size:12px;pointer-events:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* V0.4.5: only coin eligibility/rate labels, no long match mode descriptions. */
#matchDialog .modal-actions{margin-top:0;gap:8px}
#matchDialog .modal-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1 1 185px;padding:10px 12px;text-align:center;line-height:1.25}
#matchDialog .modal-action small{display:block;color:inherit;font-size:11px;font-weight:800;white-space:nowrap;opacity:.88}