:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#0b0f17; color:#fff; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  overflow:hidden; padding-bottom:env(safe-area-inset-bottom);
}

/* HUD */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 6px; z-index:5; position:relative}
.hud{display:flex;gap:10px;flex-wrap:wrap}
.badge{background:#0f1524;border:1px solid #22304a;padding:6px 10px;border-radius:12px}
.gear-btn{width:40px;height:40px;border-radius:12px;border:1px solid #22304a;background:#0f1524;color:#e9eef6;display:grid;place-items:center;cursor:pointer}

/* Canvas area */
.canvas-wrap{
  position:relative;width:100%;
  height:calc(100dvh - 170px); /* stabil höjd i iOS */
  min-height:480px; overflow:hidden; margin:0;
}
#bgLayer{position:absolute;inset:0;z-index:1;pointer-events:none}
#game{position:relative;z-index:2;border-radius:18px;width:100%;height:100%;display:block;background:transparent}
#fx{position:absolute;inset:0;pointer-events:none;z-index:3}

/* Flagga (under HUD men över bg) */
.flag-wrap{position:absolute;left:10px;top:78px;z-index:2;pointer-events:none}
.flag{transform-origin:12px 12px;animation:flag-sway 3.6s ease-in-out infinite;transform:rotate(8deg)}
@keyframes flag-sway{0%{transform:rotate(6deg)}50%{transform:rotate(10deg) translateY(3px)}100%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.flag{animation:none}}

.start-wrap{display:flex;justify-content:center;padding:10px;z-index:4;position:relative}
.btn{padding:14px 18px;min-width:120px;min-height:56px;border-radius:14px;border:1px solid #22304a;background:#0f1320;color:#e9eef6;font-weight:700}
.btn.primary{background:#c58e3d;color:#241a06;border-color:#a3782f}

/* Dialoger */
dialog#modal, dialog#panel{border:none;border-radius:16px;background:#0b0f17;color:#fff;width:min(520px,92vw);padding:0;overflow:hidden}
#modal::backdrop,#panel::backdrop{background:rgba(0,0,0,.55)}
.win-card{padding:16px}
.win-header{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.win-star{font-size:28px;animation:spin 2.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.win-title{margin:0;font-size:22px}
.win-sub{margin:6px 0 0;opacity:.85}
.win-stats{display:flex;gap:12px;margin:12px 0}
.win-stat{background:#0f1524;border:1px solid #22304a;border-radius:12px;padding:10px 12px;min-width:90px;text-align:center}
.coupon{display:flex;gap:10px;align-items:center;margin-top:6px}
.code{background:#1a2538;border:1px dashed #324869;border-radius:10px;padding:8px 10px;font-family:ui-monospace,monospace}

.panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #22304a}
.panel-body{padding:14px 16px;display:grid;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
select,.input{background:#121a26;color:#fff;border:1px solid #22304a;border-radius:10px;padding:10px 12px}
.hint{opacity:.75}
.table{width:100%;border-collapse:separate;border-spacing:0 6px}
.table th,.table td{padding:6px 8px}.table th{text-align:left;opacity:.85}