@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;800&display=swap');
.rifttimers{display:flex;gap:12px}.rifttimers>span{flex:1;background:#14292b;padding:10px;font-size:12px;color:#b9cbbf}.rifttimers b{display:block;color:#ead9a2;margin-top:6px}.maptools{flex-wrap:wrap}.maptools>div{flex-wrap:wrap}
.avatar:has(canvas){padding:0;background:#152b2c;overflow:hidden;flex-shrink:0;width:64px;height:72px;border-radius:10px}.avatar canvas{width:64px;height:72px}.maptools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;background:#172c30;border-bottom:1px solid #3c5350;color:#e1d8b6;font-size:13px}.maptools small{display:block;font-size:8px;color:#91aaa5;letter-spacing:2px;margin-top:3px}.maptools>div{display:flex;gap:5px}.maptools button{font-size:11px;border-color:#42605b;color:#c8d6c5}.arena{box-shadow:0 10px 35px #0003}#artbook{background:#17282d;border:1px solid #52685e;border-radius:16px;color:#e7eee9;padding:25px;width:min(1050px,94vw);max-height:88dvh;overflow:auto}#artbook::backdrop{background:#071319cc;backdrop-filter:blur(5px)}.artbookhead{display:flex;justify-content:space-between;align-items:center;gap:12px}.artbookhead h2{font-size:25px;margin:0}.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.artgrid article{border:1px solid #3a504e;border-radius:10px;overflow:hidden;background:#1a3031;padding-bottom:16px}.artgrid canvas{width:100%;height:auto}.artgrid h3,.artgrid p,.artgrid article>small{margin:12px 14px 0;display:block}.artgrid h3{color:#e8d5a5}.artgrid h3 small{font-size:10px;color:#9cb5ac;font-weight:400;display:block;margin-top:4px}.artgrid p{color:#c9ddc1;font-size:12px}.artgrid article>small{font-size:10px;color:#9cb5ac;line-height:1.7}@media(max-width:760px){.maptools{padding:10px}.maptools button{padding:6px;font-size:10px}.artgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#artbook{padding:15px}.artbookhead h2{font-size:20px}.artgrid h3,.artgrid p,.artgrid article>small{margin-left:10px;margin-right:10px}}
.namefield{display:block;margin:20px 0;color:#98aab4;font-size:12px}.namefield input{display:block;background:#19232f;border:1px solid #3b4d57;border-radius:6px;padding:12px;color:#e7eee9;font:inherit;width:min(100%,320px);margin-top:8px}.namefield input:focus{outline:2px solid #b7ef86}
.careerhead>div{min-width:0;overflow-wrap:anywhere}.traininglink{display:block;color:#b7ef86;padding:12px 0;font-size:12px;text-decoration:none}#weeklyTraining{scroll-margin-top:20px}
.careerwelcome{padding:30px 0 0;max-width:750px}.careerwelcome h2{font-size:24px}.careerwelcome p{color:#98aab4}.careerhead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:30px 0 20px}.careerhead h2{font-size:24px;margin:0}.careergrid,.draftgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;margin-bottom:25px}.playerstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.playerstats span{font-size:11px;color:#98aab4}.playerstats b{display:block;font-size:27px;color:#b7ef86}.storychoice{display:block;width:100%;text-align:left;margin:8px 0}.storychoice small,.courses small,.banlist small{display:block;color:#98aab4;font-size:10px;margin-top:5px}.courses{display:flex;gap:7px;margin-top:20px}.courses button{flex:1;padding:10px 5px;font-size:12px}.storyresult,.careerevaluation{padding:13px;border-left:2px solid #b7ef86;background:#15251f;color:#cde7c2}.standings>div,.schedule>div{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #2c3b49}.standings small{color:#98aab4;font-size:11px}.standings .ours{color:#b7ef86}.schedule{font-size:12px;color:#98aab4}.banlist{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}#draft{padding-top:28px}#draft h1{font-size:38px}#draft h1 span{font-size:20px}#draftBack{margin-bottom:20px}.careerhead .quiet{flex-shrink:0}@media(max-width:760px){.careergrid,.draftgrid{grid-template-columns:1fr}.careerhead h2{font-size:20px}.careerhead{align-items:flex-start}.careerhead .quiet{font-size:10px;max-width:100px}.playerstats{gap:5px}.playerstats b{font-size:24px}.careerwelcome h2{font-size:21px}.courses button{font-size:11px}}
.battlemeters{display:flex;gap:14px;padding:12px;background:#111d27;border-radius:7px}.battlemeters>div{flex:1;min-width:0}.battlemeters small{display:block;color:#98aab4;font-size:10px}.battlemeters meter{width:100%;height:13px;accent-color:#b7ef86}.resultstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.resultstats span{background:#111d27;padding:12px;color:#98aab4;font-size:11px}.resultstats b{display:block;color:#e7eee9;font-size:20px}#decision{scroll-margin-top:20px}#power{max-width:52%;line-height:1.6}.hero{flex-wrap:wrap}.hero .skillpreview{flex-basis:100%;border-top:1px solid #ffffff12;padding-top:8px;color:#b7cbbb;font-size:11px}
:root{color-scheme:dark;--bg:#101821;--panel:#19232f;--line:#2c3b49;--text:#e7eee9;--muted:#98aab4;--green:#b7ef86;--gold:#f1c66d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 0,#233a3b,transparent 65%),var(--bg);color:var(--text);font:15px 'Noto Sans TC',sans-serif}main{max-width:1240px;margin:auto;padding:30px}header,.row{display:flex;align-items:center;justify-content:space-between;gap:12px}header{padding-bottom:25px;border-bottom:1px solid var(--line)}.brand{color:var(--green);text-decoration:none;font-weight:800;letter-spacing:2px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;margin-top:6px}.tag{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:7px 10px;color:var(--muted)}.intro{padding:45px 0 30px}.eyebrow{color:var(--green);font-size:13px;letter-spacing:2px}h1{font-size:52px;margin:12px 0;letter-spacing:-2px;line-height:1.25}h1 span{display:block;color:var(--muted);font-size:30px;font-weight:400;letter-spacing:0}p{line-height:1.8}h2{font-size:16px;margin:0 0 20px}h3{font-size:14px}button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:7px;background:#22313e;color:var(--text);padding:11px 15px;transition:background .15s}button:hover{background:#344b50}button:focus-visible{outline:2px solid var(--green);outline-offset:3px}button:disabled{opacity:.45;cursor:default}.grid{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:25px;min-width:0}.roles{display:flex;gap:7px;margin-bottom:28px;flex-wrap:wrap}.selected{border-color:var(--green);background:#31483b}.hero{display:flex;text-align:left;width:100%;gap:15px;align-items:center;margin-bottom:10px}.avatar{font-size:24px;background:#14212a;border-radius:8px;padding:12px}.hero strong{display:block}.hero small{display:block;color:var(--muted);margin-top:4px}.hero .rate{margin-left:auto;color:var(--gold);white-space:nowrap}.primary{background:var(--green);color:#18241b;font-weight:800;width:100%;border:0;padding:16px}.primary:hover{background:#d0ffa9}.secondary{width:100%;margin-top:8px}.quiet{padding:6px 9px;font-size:12px;background:transparent}.muted{color:var(--muted);font-size:13px}.note{margin:24px 0;padding:18px;border-left:2px solid var(--green);background:#14212a;color:var(--muted);line-height:1.9}.note strong{color:var(--text);font-size:13px}.patchline{padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.up{color:var(--green)}.down,.red{color:#f48b86}.gold{color:var(--gold)}footer{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);padding-top:30px}.scorebar{display:flex;justify-content:space-around;align-items:center;padding:25px;background:#18242c;margin:25px 0 16px;border-radius:10px}.scorebar>div{display:flex;align-items:center;gap:22px}.scorebar strong{font-size:36px;color:var(--green)}.scorebar>div:last-child strong{color:#f48b86}.scorebar small{font-size:11px;color:var(--muted)}.scorebar .clock{flex-direction:column;gap:3px}.clock b{font-size:25px}.matchgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}.arena{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#142a29}canvas{display:block;width:100%;height:auto}.mapfoot{display:flex;justify-content:space-between;padding:12px;font-size:10px;background:#18242c;color:var(--muted)}#log{max-height:180px;overflow:auto;color:var(--muted);font-size:12px}#log p{padding:8px 0;margin:0;border-bottom:1px solid var(--line)}#decision{border-top:1px solid var(--gold);margin-top:20px;padding-top:20px}#decision h2{color:var(--gold)}.choice{width:100%;text-align:left;display:block;margin:10px 0}.choice small{display:block;color:var(--muted);line-height:1.6;margin-top:5px}#result h2{font-size:25px;color:var(--green)}[hidden]{display:none!important}@media(max-width:760px){main{padding:18px}.intro{padding-top:25px}h1{font-size:40px}h1 span{font-size:24px}.grid,.matchgrid{grid-template-columns:1fr}.panel{padding:18px}header>.tag{display:none}footer{flex-direction:column}.scorebar>div{gap:7px;flex-direction:column}.scorebar small{font-size:10px}.scorebar strong{font-size:26px}.mapfoot{font-size:9px}.roles button{flex:1;padding:10px}#log{max-height:115px}}
.tactics{margin:8px 0 10px;border:1px solid var(--line,#2c3a44);border-radius:10px;padding:6px 10px;background:rgba(255,255,255,.02)}
.tactics summary{cursor:pointer;font-weight:600;font-size:13px}.tactics summary small{font-weight:400;opacity:.65;margin-left:6px}
.tactic-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}.tactic-row>span{width:52px;font-size:12px;opacity:.75}
.tactic-row>div{display:flex;gap:4px;flex-wrap:wrap}.tactic-row button{font-size:12px;padding:4px 9px}
.tactic-row button.selected,.spell-options button.selected{outline:2px solid #f1c66d;outline-offset:-2px}
.spell-pick{margin:10px 0}.spell-options{display:flex;gap:6px;flex-wrap:wrap}.spell-options button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 10px;font-size:13px;text-align:left}
.spell-options button small{font-size:11px;opacity:.7}