:root{--gold: #e3b94f;--gold-soft: #f6dd9a;--ink: #0e1a26;--panel: linear-gradient(180deg, rgba(28, 41, 58, .9), rgba(13, 22, 33, .9));--line: rgba(227, 185, 79, .45);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-t: env(safe-area-inset-top, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:#f3ead2;font-family:Inter,system-ui,sans-serif;font-size:13px;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 14px #0006,inset 0 1px #ffffff12;backdrop-filter:blur(5px)}#hud{position:fixed;inset:0;pointer-events:none}#hud>*,#hud #bottom>*,#topright>*{pointer-events:auto}#topbar{position:absolute;top:calc(8px + var(--safe-t));left:calc(8px + var(--safe-l));display:flex;align-items:center;padding:3px 4px}.chip{display:flex;align-items:center;gap:5px;padding:2px 9px;font-size:14px;font-weight:600;border-right:1px solid rgba(255,255,255,.08);min-width:56px}.chip:last-child{border-right:0}.chip .ic svg,.ic svg{width:17px;height:17px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}.chip b{font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}.chip.full b{color:#ff8b7a}#topright{position:absolute;top:calc(8px + var(--safe-t));right:calc(8px + var(--safe-r));display:flex;align-items:flex-start;gap:6px}#players{display:flex;gap:2px;padding:3px}.pl{display:flex;align-items:center;gap:5px;padding:2px 8px;font-size:12px;font-weight:600}.pl i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px #ffffff80}.pl b{opacity:.75;font-variant-numeric:tabular-nums}.pl.out{opacity:.4;text-decoration:line-through}.pl.me span{color:var(--gold-soft)}.sq{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;padding:0;color:var(--gold-soft)}.sq svg{width:15px;height:15px}.sq:hover{filter:brightness(1.3)}#toast{position:absolute;top:calc(52px + var(--safe-t));left:50%;transform:translate(-50%,-6px);padding:6px 14px;border-radius:999px;background:#781e1eed;border:1px solid #ff9a8a;font-weight:600;font-size:12.5px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none!important;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%)}#toast.ok{background:#1e5a2ef0;border-color:#8dffa8}#sidebtns{position:absolute;left:calc(8px + var(--safe-l));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}.side{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);padding:6px;display:grid;place-items:center}.side svg{width:100%;height:100%}.side b{position:absolute;right:-4px;bottom:-4px;background:var(--gold);color:#1b1305;font-size:10px;border-radius:999px;padding:0 5px;line-height:14px}.side.dim{opacity:.55}.side:hover{filter:brightness(1.25)}#bottom{position:absolute;left:calc(8px + var(--safe-l));right:calc(8px + var(--safe-r));bottom:calc(8px + var(--safe-b));display:flex;align-items:flex-end;gap:8px;pointer-events:none}#selcard{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;min-width:190px;max-width:250px}#sel-ic{width:40px;height:40px;border-radius:8px;background:radial-gradient(circle at 30% 25%,#3b5a82,#17283e);border:1px solid var(--line);padding:5px;flex:none}#sel-ic svg{width:100%;height:100%}#sel-title{font-family:Cinzel,Georgia,serif;font-weight:800;font-size:13px;color:var(--gold-soft);line-height:1.1}#sel-sub{font-size:11px;opacity:.85;margin:2px 0 3px;max-width:200px;line-height:1.25}.meter{height:4px;border-radius:3px;background:#00000080;overflow:hidden;margin-top:2px;width:150px}.meter i{display:block;height:100%}.meter.hp i{background:#6dff8a}.meter.pg i{background:#ffd24a}#cmdwrap{margin:0 auto 0 0;position:relative}#cmdcard{display:flex;gap:4px;padding:5px;flex-wrap:wrap;max-width:62vw}#tip{position:absolute;bottom:calc(100% + 6px);left:0;background:#080e16f5;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:11.5px;white-space:nowrap;pointer-events:none}.cmd{position:relative;width:58px;height:58px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(180deg,#3a5273,#22344d);padding:4px 2px 2px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0;transition:transform .08s,filter .15s;box-shadow:0 2px #00000059}.cmd svg{width:22px;height:22px;flex:none}.cmd .nm{font-size:9.5px;font-weight:600;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cmd .cs{display:flex;gap:4px;font-size:9.5px;font-weight:600;line-height:1;min-height:10px}.cmd .c{display:inline-flex;align-items:center;gap:2px}.cmd .c i{width:7px;height:7px;border-radius:50%;display:inline-block}.c.food i{background:#ff6b6b}.c.wood i{background:#c8894a}.c.gold i{background:#ffd24a}.cmd:hover:not(:disabled){filter:brightness(1.2)}.cmd:active:not(:disabled){transform:translateY(1px)}.cmd:disabled{filter:grayscale(.85) brightness(.6);cursor:not-allowed}.cmd.active{background:linear-gradient(180deg,#4d7a45,#2f5a2c);border-color:#9dff9a}.cmd.cancel{background:linear-gradient(180deg,#7a3a3a,#4a2222);justify-content:center;gap:4px}.cmd kbd{position:absolute;top:2px;right:3px;font:600 8px Inter,sans-serif;opacity:.55}.cmd em{position:absolute;top:-4px;left:-4px;background:var(--gold);color:#1b1305;font:800 10px Inter,sans-serif;border-radius:999px;padding:0 5px;line-height:14px}#minimap{padding:4px;width:128px;height:128px;flex:none}#mini{width:118px;height:118px;border-radius:6px;display:block;cursor:crosshair;touch-action:none}#menu{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#285a8c8c,#080e18e6);z-index:10;transition:opacity .5s;overflow:auto}#menu.hide{opacity:0;pointer-events:none}.menu-card{text-align:center;padding:18px 28px;width:min(92vw,460px);touch-action:pan-y}.crest svg{width:64px;height:64px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}h1{font-family:Cinzel,Georgia,serif;font-weight:800;font-size:clamp(34px,8vw,56px);letter-spacing:.18em;margin:2px 0 0;color:var(--gold-soft);text-shadow:0 3px 0 #7a5a14,0 8px 24px rgba(0,0,0,.6)}.tag{margin:4px 0 14px;letter-spacing:.25em;text-transform:uppercase;font-size:11px;opacity:.75}section{display:flex;flex-direction:column;gap:10px;align-items:stretch}input{font:inherit;font-size:15px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:#080e16bf;color:#fff;text-align:center;outline:none;user-select:text;-webkit-user-select:text}input:focus{border-color:var(--gold)}.big{font-family:Cinzel,Georgia,serif;font-weight:800;font-size:17px;letter-spacing:.08em;padding:11px 24px;border-radius:10px;border:2px solid #ffe9a0;background:linear-gradient(180deg,#e9bf55,#b78820);color:#2a1c04;box-shadow:0 4px #6d5010,0 10px 22px #00000073;transition:transform .08s}.big.alt{background:linear-gradient(180deg,#5b8be0,#2f58a8);border-color:#bcd6ff;color:#fff;box-shadow:0 4px #1b3568,0 10px 22px #00000073}.big:hover{filter:brightness(1.08)}.big:active{transform:translateY(3px)}.big:disabled{filter:grayscale(1) brightness(.6)}.join{display:flex;gap:8px}.join input{flex:1;letter-spacing:.3em;font-weight:800;min-width:0}.join button,.invite button,.addbot button,.link{border-radius:9px;border:1px solid var(--line);background:#ffffff14;padding:8px 14px}.link{background:none;border:0;opacity:.8}.tips{list-style:none;padding:0;margin:10px 0 0;font-size:12px;line-height:1.8;opacity:.75}.tips b{color:var(--gold-soft)}label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600}.seg{display:flex;gap:4px}.seg button{padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#ffffff0f}.seg button.on{background:linear-gradient(180deg,#e9bf55,#b78820);color:#2a1c04;border-color:#ffe9a0}.code-row{display:flex;justify-content:center;align-items:baseline;gap:12px}.code-row span{opacity:.7;letter-spacing:.2em;text-transform:uppercase;font-size:11px}.code-row b{font-family:Cinzel,Georgia,serif;font-size:40px;letter-spacing:.25em;color:var(--gold-soft)}.invite{display:flex;gap:6px}.invite input{flex:1;min-width:0;font-size:12px}#lobby-players{display:flex;flex-direction:column;gap:5px}.lp{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;background:#ffffff0f;text-align:left}.lp i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px #fff6;flex:none}.lp span{flex:1;font-weight:600}.lp small{opacity:.65}.lp button{border:0;background:none;color:#ff9a8a;font-size:16px;padding:0 4px}.lp.off{opacity:.45}.addbot{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.addbot span{opacity:.75}.loadbar{height:8px;border-radius:5px;background:#ffffff1f;overflow:hidden}.loadbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e9bf55,#ffe9a0);transition:width .15s}.err{color:#ff9a8a;margin:8px 0 0;font-weight:600}#end{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#050a12b8;backdrop-filter:blur(4px)}#end.lose h1{color:#ff9a8a;text-shadow:0 3px 0 #6a1e14,0 8px 24px rgba(0,0,0,.6)}#net{position:fixed;top:50px;left:50%;transform:translate(-50%);z-index:30;background:#785a14f2;border:1px solid #ffd24a;border-radius:999px;padding:6px 14px;font-weight:600}#rotate{position:fixed;inset:0;z-index:40;display:grid;place-content:center;justify-items:center;gap:12px;background:#080e18f7;text-align:center}#rotate svg{width:84px;height:84px;animation:tilt 1.6s ease-in-out infinite}#rotate p{margin:0;font-size:15px;color:var(--gold-soft)}@keyframes tilt{0%,30%{transform:rotate(0)}70%,to{transform:rotate(-90deg)}}@media(max-height:520px){body{font-size:12px}.chip{font-size:12.5px;padding:1px 7px;min-width:48px}.chip .ic svg{width:15px;height:15px}.cmd{width:50px;height:50px}.cmd svg{width:19px;height:19px}#minimap{width:104px;height:104px}#mini{width:94px;height:94px}#selcard{min-width:160px}.menu-card{padding:8px 20px}.crest svg{width:44px;height:44px}h1{font-size:34px}}#selcard{position:relative}.xb{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:#2a3a52;color:var(--gold-soft);font-size:11px;line-height:1;padding:0;display:grid;place-items:center}.xb:hover{filter:brightness(1.3)}#selcard.enemy{border-color:#ff6e64bf}#selcard.enemy #sel-title{color:#ffb0a6}#selcard.enemy .meter.hp i{background:#ff6a5a}.toggle{border-radius:9px;border:1px solid var(--line);background:#ffffff14;padding:8px 14px;align-self:center}.chip.titan b{color:#ffc9b8}.chip.titan.soon b{color:#ff6a5a;animation:pulse .9s ease-in-out infinite}@keyframes pulse{50%{opacity:.45}}#update{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translate(-50%);z-index:50;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-radius:999px;background:linear-gradient(180deg,#2f5aa6,#1f3d78);border:1px solid #bcd6ff;box-shadow:0 6px 20px #00000080;font-weight:600}#update button{border-radius:999px;border:0;padding:6px 14px;background:#ffe9a0;color:#2a1c04;font-weight:700}#update button.x{background:none;color:#fff;padding:6px 8px}.c.stone i{background:#a7b0c4}.sq.trade{position:relative}.sq.trade svg{width:17px;height:17px}.sq.trade em{position:absolute;top:-6px;right:-6px;background:#ff6a5a;color:#fff;font:700 10px Inter,sans-serif;border-radius:999px;padding:0 5px;line-height:14px;font-style:normal}.sq.trade.alert{animation:pulse 1s ease-in-out infinite;border-color:#ff9a8a}#trade{position:fixed;inset:0;z-index:25;display:grid;place-items:center;background:#050a128c;backdrop-filter:blur(3px)}.sheet{width:min(94vw,560px);max-height:min(88vh,640px);overflow-y:auto;padding:12px 14px 14px;touch-action:pan-y}.sheet-h{display:flex;justify-content:space-between;align-items:center;font-family:Cinzel,Georgia,serif;font-size:16px;color:var(--gold-soft);margin-bottom:6px}.xb2{border:1px solid var(--line);background:#ffffff14;border-radius:8px;width:28px;height:28px}#trade-body section{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}#trade-body h3{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}#trade-body button{border-radius:8px;border:1px solid var(--line);background:#ffffff14;padding:5px 10px;font-size:12px}#trade-body button:disabled{opacity:.4}#trade-body button.go{background:linear-gradient(180deg,#5aa65a,#357a38);border-color:#9dff9a;font-weight:600}#trade-body select,#trade-body input{font:inherit;font-size:13px;padding:5px 8px;border-radius:8px;border:1px solid var(--line);background:#080e16cc;color:#fff;text-align:left;min-width:0}#trade-body input[type=number]{width:84px}.tr-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;cursor:pointer}.tr-row.sel{background:#ffffff14}.tr-row i{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2px #fff6}.tr-row b{flex:1}.st.ok,small.ok{color:#8dffa8}.st.bad,small.bad{color:#ff9a8a}.tr-offer{display:flex;flex-direction:column;gap:6px;padding:8px;margin-bottom:6px;border-radius:9px;background:#ffe17814;border:1px solid rgba(255,225,120,.25);font-size:12.5px}.tr-offer.wait{background:#ffffff0d;border-color:#ffffff1f}.tr-offer div{display:flex;gap:6px;flex-wrap:wrap}.tr-compose .line{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}.tr-compose label{width:44px;opacity:.8;font-size:12px}.bank-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap}.bank-row .c{width:74px;display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:12.5px}.hire{display:flex;gap:6px;margin-top:8px}.hire button{display:flex;align-items:center;gap:6px}.hire svg{width:18px;height:18px}.warn{margin:6px 0 0;font-size:12px;color:#ffcf9a}#chat{position:fixed;inset:0;pointer-events:none;z-index:35}#chat>*{pointer-events:auto}#chat-feed{position:absolute;left:calc(56px + var(--safe-l));top:calc(48px + var(--safe-t));width:min(60vw,340px);display:flex;flex-direction:column;gap:2px;pointer-events:none!important}#chat-feed .cl{background:#080e169e;padding:3px 8px;border-radius:8px;font-size:12px;animation:chatin .25s ease-out}@keyframes chatin{0%{opacity:0;transform:translate(-8px)}}#chat-panel{position:absolute;left:calc(8px + var(--safe-l));bottom:calc(84px + var(--safe-b));width:min(94vw,330px);height:min(48vh,260px);display:flex;flex-direction:column;padding:6px}body:not(.playing) #chat-panel{bottom:12px;left:auto;right:12px;width:min(94vw,340px);height:260px}@media(max-width:860px){body:not(.playing) #chat-panel{right:50%;transform:translate(50%);height:200px}}.chat-tabs{display:flex;gap:4px;align-items:center;margin-bottom:4px}.chat-tabs button:not(.xb2){flex:0 0 auto;border-radius:8px;border:1px solid var(--line);background:#ffffff0f;padding:4px 12px;font-size:12px}.chat-tabs button.on{background:linear-gradient(180deg,#e9bf55,#b78820);color:#2a1c04;border-color:#ffe9a0}.chat-tabs .xb2{margin-left:auto;width:24px;height:24px}#chat-log{flex:1;overflow-y:auto;font-size:12.5px;line-height:1.35;padding:2px 4px;-webkit-user-select:text;user-select:text;touch-action:pan-y}.cl{margin-bottom:2px;word-break:break-word}.cl small{opacity:.45;font-size:10px;margin-right:3px}.cl b{margin-right:4px}.cl em{font-style:normal;font-size:9.5px;background:#ffffff24;border-radius:5px;padding:0 4px;margin-right:4px}.cl.sys{opacity:.65;text-align:center;font-size:11.5px}.cl.mine span{color:#fff7d6}#chat-form{display:flex;gap:4px;margin-top:4px}#chat-in{flex:1;min-width:0;font-size:16px;padding:6px 10px;text-align:left;border-radius:9px}#chat-form button{border-radius:9px;border:1px solid var(--line);background:#ffffff1a;padding:0 12px;font-size:12px}.sq.chatb{position:relative}.sq.chatb svg{width:16px;height:16px}.sq.chatb em,.chatl em{position:absolute;top:-6px;right:-6px;background:#ff6a5a;color:#fff;font:700 10px Inter,sans-serif;border-radius:999px;padding:0 5px;line-height:14px;font-style:normal}.chatl{position:relative;align-self:center}@media(max-height:520px){#chat-panel{bottom:calc(70px + var(--safe-b));height:min(52vh,190px);width:min(60vw,320px)}}