:root{--bg:#07131f;--panel:#0f2235;--line:#24425f;--txt:#f3f7fb;--mut:#9fb3c8;--gold:#ffcc33;--green:#1fae4b;--flag:#ffd400;
--font:"Arial Black","Segoe UI Black","Franklin Gothic Heavy",Impact,"Helvetica Neue",Arial,sans-serif;--body:"Segoe UI",Tahoma,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--body);overflow:hidden}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column}
.btn{font-family:var(--font);font-size:18px;border:0;border-radius:12px;padding:10px 18px;background:#2b5f8f;color:#fff;cursor:pointer;
 box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .08s,filter .15s}
.btn:hover{filter:brightness(1.15)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn.go{background:var(--green)}.btn.ghost{background:#1a3550}.btn.danger{background:#a3262a}.btn.small{font-size:15px;padding:8px 12px}
.btn[disabled]{opacity:.45;cursor:default}
.logo{font-family:var(--font);font-size:26px;letter-spacing:1px;white-space:nowrap}.logo span{color:var(--gold)}
.logo.big{font-size:40px;text-align:center}
.topbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(#0d2033,#081726);border-bottom:2px solid var(--line);flex:0 0 auto}
.spacer{flex:1}
/* gate */
.gate{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#14466e,#06111c 70%)}
.gate-card{background:var(--panel);padding:32px 40px;border-radius:20px;display:flex;flex-direction:column;gap:12px;min-width:min(440px,92vw);box-shadow:0 20px 60px #000a}
.gate-card label{color:var(--mut);font-size:18px}
.gate-card input{font-size:24px;padding:12px;border-radius:10px;border:2px solid var(--line);background:#081726;color:#fff}
.gate-msg{min-height:22px;color:#ff8a8a;font-size:18px}
/* setup */
.setup-main{flex:1;display:flex;gap:16px;padding:16px;overflow:auto}
.panel{background:var(--panel);border-radius:16px;padding:16px 20px;flex:1;min-width:0;overflow:auto}
.panel.side{flex:0 0 330px}
.panel h1,.panel h2{font-family:var(--font);margin:4px 0 12px}.panel h1 small{color:var(--mut);font-size:18px}
.addrow{display:flex;gap:8px;flex-wrap:wrap}
.addrow input,.pastebox textarea{font-size:20px;padding:10px;border-radius:10px;border:2px solid var(--line);background:#081726;color:#fff;flex:1;min-width:180px}
.pastebox{display:flex;gap:8px;margin-top:8px;align-items:flex-start}.pastebox textarea{font-family:var(--body)}
.roster{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:10px;background:#0a1a2a;border-radius:12px;padding:6px 10px;flex-wrap:wrap}
.row canvas{width:64px;height:64px;border-radius:10px;background:#123;flex:0 0 auto}
.row input.nm{font-size:20px;padding:8px;border-radius:8px;border:2px solid var(--line);background:#081726;color:#fff;flex:1;min-width:140px}
.row select{font-size:16px;padding:6px;border-radius:8px;background:#081726;color:#fff;border:2px solid var(--line)}
.swatch{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle;border:2px solid #fff}
.privacy{color:var(--mut);font-size:14px;margin-top:16px}
.set{display:block;margin:10px 0;color:var(--mut);font-size:17px}
.set select{display:block;margin-top:6px;width:100%;font-size:17px;padding:8px;border-radius:8px;background:#081726;color:#fff;border:2px solid var(--line)}
.set.chk{display:flex;gap:8px;align-items:center;color:var(--txt)}.set.chk input{width:22px;height:22px}
.keys{padding-left:20px;font-size:17px;line-height:1.7;color:var(--mut)}.keys b{color:var(--txt)}
/* game */
.game-main{flex:1;display:flex;min-height:0}
.fieldwrap{position:relative;flex:1;min-width:0;overflow:hidden;background:#04101a}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
.board{flex:0 0 clamp(210px,21vw,300px);background:var(--panel);border-left:2px solid var(--line);display:flex;flex-direction:column;min-height:0}
.board h2{font-family:var(--font);font-size:20px;margin:10px 12px 6px;color:var(--gold);letter-spacing:1px}
.board ol{list-style:none;margin:0;padding:0 6px 8px;overflow-y:auto;flex:1}
.board li{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:10px;cursor:pointer;font-size:clamp(14px,1.35vw,19px);line-height:1.15;transition:background .3s}
.board li:hover{background:#18324c}
.board li.on{background:linear-gradient(90deg,#c79a12,#7a5c06);color:#fff}
.board .rk{width:22px;text-align:right;color:var(--mut);font-family:var(--font);font-size:.85em}.board li.on .rk{color:#fff}
.board .av{width:clamp(26px,2.5vw,36px);height:clamp(26px,2.5vw,36px);border-radius:50%;border:3px solid #fff;object-fit:cover;background:#345;flex:0 0 auto;
 display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:12px;color:#fff}
.board .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.board .pt{font-family:var(--font);min-width:34px;text-align:right}
.board .td{color:var(--mut);font-size:.75em;min-width:34px;text-align:right}.board li.on .td{color:#fff}
.board li.pop .pt{animation:pop .7s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.8);color:var(--gold)}100%{transform:scale(1)}}
.card{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:10px;background:rgba(5,15,26,.82);border:2px solid rgba(255,204,51,.7);
 border-radius:18px;padding:6px 16px 6px 6px;box-shadow:0 8px 30px #0008;max-width:60%}
.card.right{left:auto;right:12px}
.card canvas{width:clamp(110px,14vh,170px);height:clamp(110px,14vh,170px);display:block}
.card-name{font-family:var(--font);font-size:clamp(22px,3.6vh,40px);line-height:1.05;text-shadow:0 2px 0 #000}
.card-stats{font-family:var(--font);font-size:clamp(16px,2.4vh,26px);color:var(--gold)}
.card-ball{font-size:clamp(14px,2vh,22px);color:#d6e4f0;margin-top:2px}
.banner{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);text-align:center;pointer-events:none;font-family:var(--font);opacity:0}
.banner .big{font-size:clamp(48px,11vw,150px);line-height:1;letter-spacing:2px;color:#fff;
 background:linear-gradient(#fff6c2,#ffcc33 45%,#d48a00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 6px 0 #6b3a00) drop-shadow(0 12px 20px #000)}
.banner .sub{font-size:clamp(22px,3.5vw,46px);color:#fff;text-shadow:0 3px 0 #000,0 0 18px #000}
.banner.flagb .big{background:linear-gradient(#fff9a8,#ffd400 50%,#e0a800);-webkit-background-clip:text;background-clip:text;font-size:clamp(40px,8vw,110px)}
.banner.gainb .big{font-size:clamp(36px,6vw,84px);background:linear-gradient(#e9ffe9,#5dff8a 50%,#13a33d);-webkit-background-clip:text;background-clip:text}
.banner.show{animation:bannerIn 2.6s ease-out forwards}
.banner.quick{animation:bannerQuick 1.1s ease-out forwards}
@keyframes bannerIn{0%{opacity:0;transform:translateY(-50%) scale(.3)}12%{opacity:1;transform:translateY(-50%) scale(1.15)}20%{transform:translateY(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-50%) scale(1.05)}}
@keyframes bannerQuick{0%{opacity:0;transform:translateY(-30%) scale(.6)}18%{opacity:1;transform:translateY(-50%) scale(1.08)}70%{opacity:1}100%{opacity:0;transform:translateY(-70%)}}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;text-align:center;padding:30px;background:rgba(0,0,0,.5)}
.empty a{color:var(--gold)}
.controls{flex:0 0 auto;display:flex;gap:12px;padding:10px 14px;background:linear-gradient(#0b1d2e,#061220);border-top:2px solid var(--line)}
.btn.play{flex:2;font-size:clamp(24px,3.6vw,46px);padding:clamp(10px,2vh,20px) 10px;border-radius:18px}
.btn.gain{background:linear-gradient(#2fd065,#14913c)}
.btn.flag{background:linear-gradient(#ffe24d,#e6b800);color:#1b1b1b}
.btn.nav{flex:1;font-size:clamp(18px,2.4vw,30px);background:#24476a}
/* crop modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:20}
.modal-card{background:var(--panel);border-radius:18px;padding:18px 24px;text-align:center}
.modal-card h2{font-family:var(--font);margin:0 0 10px}
.cropwrap canvas{border-radius:12px;cursor:grab;touch-action:none;background:#000;max-width:80vw}
.zoom{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px;font-size:18px}.zoom input{width:220px}
.hint{color:var(--mut);font-size:14px}
.modal-btns{display:flex;gap:10px;justify-content:center}
@media (max-width:760px){.setup-main{flex-direction:column}.panel.side{flex:auto}.board{display:none}.logo{font-size:18px}.topbar .btn.small{padding:6px 8px;font-size:13px}}