*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:#090a0f;color:#e8e8ef;min-height:100vh}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(1000px 700px at 12% 10%,#231a06 0%,transparent 58%),radial-gradient(900px 600px at 92% 18%,#16102a 0%,transparent 60%),linear-gradient(180deg,#080a10,#0f1118)}
a{color:#f0c33c}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 14px;border-bottom:1px solid #1e1e28;background:rgba(10,11,16,.9);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px}
.logo{font-size:22px}.title{font-weight:900;letter-spacing:.12em;font-size:15px}.sub{opacity:.55;font-size:11px;margin-left:6px;border:1px solid #2a2a34;border-radius:999px;padding:2px 7px}
.resources{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{border:1px solid #252535;background:#15151d;border-radius:999px;padding:4px 10px;font-weight:800}
.pill.gems{border-color:#3a2f14;color:#ffd86b}.pill.troph{border-color:#2a2450;color:#b9a7ff}.pill.rank{border-color:#233a1a;color:#9be58a}
.auth-badge{font-size:12px;color:#9aa}
main{max-width:1320px;margin:0 auto;padding:16px 12px 48px}
.view.hidden{display:none !important}
.card{background:rgba(18,18,26,.97);border:1px solid #242436;border-radius:14px;padding:14px;box-shadow:0 6px 24px rgba(0,0,0,.38);margin-bottom:14px}
.card.warn{border-color:#6b4d00;background:#201d08}
.hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:14px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin:.15em 0;font-size:28px;line-height:1.15}.lead{color:#c8c8d6}
.lore-list{margin:8px 0 0 18px}.steps{margin:6px 0 0 18px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{font-size:12px;border:1px solid #2a2a34;background:#15151d;border-radius:999px;padding:4px 8px}
.badge.hidden{display:none}
.muted{color:#9aa}.small{font-size:12px}.center{text-align:center}
.field-err{color:#ff7777;min-height:1em;margin:6px 0 0}
.auth-cards{display:flex;flex-direction:column;gap:14px}
.auth-card label{display:block;margin:8px 0}
.auth-card input{width:100%;margin-top:4px;padding:9px 10px;border-radius:8px;border:1px solid #2a2a34;background:#0f0f14;color:#eee;outline:none}
.auth-card input:focus{border-color:#f0c33c;box-shadow:0 0 0 3px rgba(240,195,60,.18)}
.btn{appearance:none;border:1px solid #2a2a34;background:#1a1a24;color:#eee;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer}
.btn:hover{border-color:#3a3a4a}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#f0c33c 0%,#c89a12 100%);color:#111;border-color:#d4a70a}
.btn.primary:hover{filter:brightness(1.05)}
.btn.small{padding:6px 10px;font-size:12px}.btn.danger{border-color:#4a1a1a;color:#ffb0b0;background:#1a0f0f}
.muted-box{border-style:dashed;background:rgba(16,16,22,.6)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px;position:sticky;top:48px;z-index:8;background:rgba(10,11,16,.88);backdrop-filter:blur(8px);padding:8px 0;border-bottom:1px solid #1d1d28}
.tab{border:1px solid #2a2a34;background:#12121a;color:#c8c8d6;border-radius:999px;padding:7px 12px;cursor:pointer;font-weight:700}
.tab.active{background:#f0c33c;color:#111;border-color:#d4a70a}
.tabpanel.hidden{display:none}
.game-layout{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
@media(max-width:1050px){.game-layout{grid-template-columns:1fr} .live-sidebar{position:static;max-height:none}}
.main-col{min-width:0}
.live-sidebar{position:sticky;top:98px;max-height:calc(100vh - 106px);display:flex;flex-direction:column;border:1px solid #242436;background:rgba(18,18,26,.97);border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.sidebar-head{padding:12px 12px 8px;border-bottom:1px solid #1e1e28;background:linear-gradient(180deg,rgba(240,195,60,.08),transparent)}
.sidebar-head h3{margin:0 0 6px;display:flex;gap:8px;align-items:center;font-size:15px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 6px rgba(52,211,153,.18);display:inline-block}
.seg{display:flex;gap:6px;margin:6px 0}
.seg button{flex:1;border:1px solid #2a2a34;background:#12121a;color:#9aa;border-radius:999px;padding:6px 8px;cursor:pointer;font-weight:700;font-size:11px}
.seg button.active{background:#1a1f14;border-color:#3a4d1a;color:#c8f0a8}
.live-board{overflow:auto;padding:8px;display:grid;gap:6px}
.lb-row{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;border:1px solid #1e1e28;background:#0f0f14;border-radius:10px;padding:8px}
.lb-row.me{border-color:#3a2f14;background:#1a1508}
.lb-row.online{box-shadow: inset 3px 0 0 #34d399}
.lb-num{font-weight:900;font-size:12px;color:#9aa;text-align:center}
.lb-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-name small{display:block;font-weight:600;color:#8a8aa0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-stats{text-align:right;font-size:11px;line-height:1.2}
.lb-stats b{display:block}
.lb-actions{display:flex;gap:4px;justify-content:flex-end;margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.bet-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.bet-bar input{width:140px;padding:7px 8px;border-radius:8px;border:1px solid #2a2a34;background:#0f0f14;color:#eee}
.casino-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cTab{border:1px solid #2a2a34;background:#12121a;color:#c8c8d6;border-radius:999px;padding:7px 12px;cursor:pointer}
.cTab.active{background:#1a1f14;border-color:#3a4d1a;color:#c8f0a8}
.cpanel.hidden{display:none}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.res{margin-top:8px;min-height:1.2em;font-weight:700}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
.stat{border:1px solid #23232e;background:#0f0f14;border-radius:10px;padding:8px}.stat b{display:block;font-size:12px;color:#9aa}
.army-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.shop-card{border:1px solid #23232e;background:#0f0f14;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.shop-card h4{margin:0;font-size:13px}
.price{font-weight:900;color:#ffd86b}
.targets{display:grid;gap:10px}
.target{border:1px solid #23232e;background:#0f0f14;border-radius:12px;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.board{margin:0;padding-left:22px}.board li{padding:4px 0;border-bottom:1px dashed #23232e}
.toasts{position:fixed;right:10px;bottom:10px;display:grid;gap:8px;z-index:50;max-width:min(92vw,360px)}
.toast{border:1px solid #2a2a34;background:#15151d;color:#eee;border-radius:12px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.toast.ok{border-color:#2a4d1a;background:#142010}.toast.err{border-color:#4d1a1a;background:#201010}
.missions{display:grid;gap:8px}.mission{border:1px solid #23232e;background:#0f0f14;border-radius:10px;padding:10px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.mission .bar{height:8px;background:#1a1a24;border-radius:999px;overflow:hidden;margin-top:6px}
.mission .bar>i{display:block;height:100%;background:linear-gradient(90deg,#7dd97d,#f0c33c);width:0%}.mission.done{border-color:#2a4d1a;background:#0f1a0f}
.onboarding{border-color:#3a2f14;background:linear-gradient(180deg,#1a1508,rgba(18,18,26,.97))}
.hud{position:sticky;top:42px;z-index:9;background:rgba(10,11,16,.96);border-bottom:1px solid #1d1d28;padding:8px 12px;display:grid;gap:6px;backdrop-filter:blur(8px)}
.hud.hidden{display:none !important}
.hud-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hud-pill{border:1px solid #242436;background:#15151d;border-radius:999px;padding:5px 10px;font-weight:800;font-size:12px}
.hud-pill.alert{background:#2a1212;border-color:#6b1a1a;color:#ffb0b0}.hud-pill.alert.hidden{display:none !important}
.hud-pill.defend{border-color:#2a4d1a;background:#123018;color:#b7f0b0}
.incoming-bar{border:1px solid #4a1a1a;background:#1a0f0f;border-radius:10px;padding:8px 10px;font-size:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.incoming-bar.hidden{display:none !important}.incoming-bar b{color:#ffb0b0}.inc.good{color:#9be58a}.inc.bad{color:#ff7777}
.defense-bar{border:1px solid #1e2f1a;background:#0f1a0f;border-radius:10px;padding:8px 10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.defense-bar.hidden{display:none !important}
.jackpot-card{border-color:#3a2f14}
.jackpot-reels{display:flex;gap:10px;justify-content:center;margin:12px 0}
.jackpot-reels span{width:72px;height:72px;display:grid;place-items:center;font-size:30px;border:1px solid #3a2f14;background:#1a1508;border-radius:12px;font-weight:900;transition:transform 120ms,filter 120ms,border-color 120ms}
.jackpot-reels span.spinning{transform:translateY(-2px) scale(1.03);filter:blur(.4px);border-color:#6b4d00}
.jackpot-history{margin-top:6px;opacity:.8}
/* Karte */
.map-card{overflow:hidden}
.map-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.world-wrap{border:1px solid #23232e;background:#070814;border-radius:14px;padding:8px;outline:none;overflow:auto}
.world{position:relative;width:800px;height:500px;max-width:100%;border-radius:12px;overflow:hidden;background:
  linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
  radial-gradient(560px 380px at 22% 36%, rgba(34,60,20,.55) 0%, rgba(18,28,16,.25) 55%, transparent 75%),
  radial-gradient(520px 420px at 78% 68%, rgba(20,28,60,.32) 0%, transparent 62%),
  linear-gradient(180deg,#0b1020,#0a0e1a 45%, #0a0f14 100%);
  background-size:42px 42px, 42px 42px, auto, auto, auto;
  border:1px solid #1d2436;
}
.world-grid{position:absolute;inset:0;pointer-events:none;opacity:.55}
.world-grid::before,.world-grid::after{content:"";position:absolute;inset:0;border-radius:12px}
.world-grid::before{background:
  linear-gradient(180deg, transparent 0, rgba(120,90,20,.18) 18%, transparent 18.5%),
  linear-gradient(90deg, transparent 0, rgba(120,90,20,.12) 30%, transparent 30.6%);
  opacity:.28
}
.world-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.world-dots{position:absolute;inset:0}
.dot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:900;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);cursor:pointer;user-select:none;transition:transform 140ms, filter 140ms}
.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;transition:border-color 140ms, box-shadow 140ms}
.dot.me{background:radial-gradient(120% 120% at 30% 20%, #fff6bf, #f0c33c 55%, #8a6a0a);color:#111;border-color:#111;z-index:4;box-shadow:0 6px 18px rgba(240,195,60,.35), 0 2px 10px rgba(0,0,0,.5)}
.dot.me .lbl{background:#f0c33c;color:#111;border-color:#111}
.dot.other{background:radial-gradient(120% 120% at 30% 20%, #2f3a5a, #1a2238 60%, #0e1422);color:#dbe7ff}
.dot.other.online{box-shadow:0 0 0 3px rgba(52,211,153,.45), 0 4px 16px rgba(0,0,0,.55)}
.dot.other.shield{border-color:#7dd3ff;box-shadow:0 0 0 3px rgba(125,211,255,.55), 0 0 18px rgba(125,211,255,.45), 0 4px 16px rgba(0,0,0,.55)}
.dot.other.shield::after{border-color:rgba(125,211,255,.9);box-shadow:0 0 16px rgba(125,211,255,.7)}
.dot.defend{border-color:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.7), 0 0 18px rgba(52,211,153,.55)}
.dot.defend::after{border-color:rgba(52,211,153,.95)}
.dot.lvl2{width:38px;height:38px;margin:-19px 0 0 -19px;font-size:16px}
.dot.lvl3{width:42px;height:42px;margin:-21px 0 0 -21px;font-size:17px}
.dot.lvl4{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:18px}
.dot:hover{transform:scale(1.08);filter:brightness(1.08)}
.dot.hit{animation:hit .45s ease}
.dot.atk{animation:atk .42s ease}
@keyframes hit{0%{transform:scale(1)}25%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes atk{0%{transform:translateY(0)}30%{transform:translateY(-6px) scale(1.08)}100%{transform:translateY(0)}}
.dot .lbl{position:absolute;top:36px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;background:rgba(0,0,0,.78);padding:2px 7px;border-radius:999px;border:1px solid #333;pointer-events:none;max-width:132px;overflow:hidden;text-overflow:ellipsis}
.dot .sub{position:absolute;top:-9px;right:-9px;font-size:9px;background:#0f0f14;border:1px solid #2a2a34;border-radius:999px;padding:1px 5px;white-space:nowrap}
.map-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:10px}
.dpad{display:grid;gap:6px;justify-items:center}
.dpad-row{display:flex;gap:6px}
.map-hints{display:grid;gap:4px;flex:1;min-width:180px}
.map-legend{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.legend-dot{font-size:11px;display:flex;gap:6px;align-items:center;border:1px solid #1e1e28;background:#0f0f14;border-radius:999px;padding:4px 8px}
.legend-dot i{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid #333}
.legend-dot.me i{background:linear-gradient(180deg,#fff6bf,#f0c33c)} .legend-dot.online i{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)} .legend-dot.shield i{background:#7dd3ff;box-shadow:0 0 0 3px rgba(125,211,255,.35)} .legend-dot.defend i{background:#34d399}
.wheel-viz{display:flex;gap:2px;margin-top:8px;flex-wrap:wrap}
.wheel-viz span{width:18px;height:18px;border-radius:4px;border:1px solid #2a2a34;display:grid;place-items:center;font-size:9px}
.wheel-viz span.win{border-color:#3a4d1a;background:#142010;color:#b7f0b0}
.dlg{border:1px solid #2a2a34;background:rgba(18,18,26,.98);border-radius:14px;padding:0;max-width:min(92vw,520px);width:520px;box-shadow:0 18px 48px rgba(0,0,0,.55)}
.dlg::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.dlg-inner{padding:16px}
.dlg h3{margin:0 0 8px}