:root { --gold: #ffd36b; --jade: #3fd0a8; --ink: #0f1420; --panel: rgba(14, 18, 30, .78); --text: #f5f1e6; --line: rgba(255, 211, 107, .35); --slot: min(10.5vmin, 76px); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; width: 100vw; height: 100vh; overflow: hidden; color: var(--text);
  background: #0f1420 url("assets/visuals/rune_table_bg.webp") center / cover no-repeat;
  font: 700 16px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(10, 14, 24, 0) 30%, rgba(8, 10, 18, .75) 100%); pointer-events: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
img { vertical-align: middle; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 12px; padding: 10px 22px; background: #26304a; color: var(--text); box-shadow: 0 4px 0 #121829; }
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 #121829; }
button:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }
button.big { background: linear-gradient(180deg, #ffe08a, #ffbf3f); color: #3a2500; font-size: clamp(18px, 3.4vmin, 30px); padding: 12px 42px; box-shadow: 0 5px 0 #a8770b; }
button.rewarded { background: var(--jade); color: #04261c; box-shadow: 0 4px 0 #1d7a5f; }
button.icon { width: clamp(38px, 6vmin, 50px); height: clamp(38px, 6vmin, 50px); padding: 0; background: var(--panel); }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-size: clamp(14px, 2.5vmin, 21px); }
#hud button, #hud .pill { pointer-events: auto; }
.hud-top { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .06); }
.pill img { width: 1.35em; height: 1.35em; border-radius: 50%; }
.pill b { color: var(--gold); }
.hud-bottom { position: absolute; left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#tray { position: relative; padding: 8px; border-radius: 18px; background: linear-gradient(180deg, rgba(60, 40, 22, .92), rgba(36, 24, 14, .95)); border: 2px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .08); pointer-events: auto; }
#tray.warn { animation: warn .5s ease-in-out 2; border-color: #ff6b5e; }
@keyframes warn { 50% { transform: translateX(-4px); } }
#tray .slots { display: flex; gap: 6px; }
#tray .slots i { width: var(--slot); height: calc(var(--slot) * 1.18); border-radius: 10px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
#tray .items { position: absolute; left: 8px; top: 8px; }
.ttile { position: absolute; top: 0; width: var(--slot); height: calc(var(--slot) * 1.18); transition: left .18s ease-out; }
.ttile, .flyer { border-radius: 10px; background: linear-gradient(180deg, #fbf4e2, #e2d3ae); box-shadow: 0 3px 0 #9c8656, 0 6px 10px rgba(0, 0, 0, .35); padding: calc(var(--slot) * .07); }
.ttile img, .flyer img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; }
.ttile.pop { animation: pop .22s ease-in forwards; }
@keyframes pop { 40% { transform: scale(1.18); filter: brightness(1.6); } 100% { transform: scale(0); opacity: 0; } }
.flyer { position: fixed; z-index: 12; width: var(--slot); height: calc(var(--slot) * 1.18); pointer-events: none; will-change: transform; }
.boosters { display: flex; gap: 10px; pointer-events: auto; }
.booster { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 3px 0 #0a0e18; font-size: .85em; }
.booster .ic { font-size: 1.3em; color: var(--gold); }
.booster .count { position: absolute; right: -6px; top: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e5484d; color: #fff; font: 800 12px/22px system-ui, sans-serif; font-style: normal; }
.booster .count.buy { background: var(--gold); color: #3a2500; }
#combo { position: fixed; z-index: 11; left: 50%; top: 18%; transform: translateX(-50%); font-size: clamp(28px, 7vmin, 60px); font-weight: 900; color: var(--gold);
  text-shadow: 0 4px 0 #6b4300, 0 0 24px rgba(0, 0, 0, .7); pointer-events: none; white-space: nowrap; animation: comboIn .4s ease-out; }
@keyframes comboIn { from { transform: translateX(-50%) scale(1.8); opacity: 0; } }
#fx { position: fixed; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; }
.float { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: clamp(16px, 3vmin, 24px); color: var(--gold); text-shadow: 0 2px 0 #4a3000, 0 0 6px #000; animation: floatUp .9s ease-out forwards; }
@keyframes floatUp { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -50px; } }

/* screens */
.screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(12, 16, 28, .45), rgba(8, 10, 18, .9)); }
.screen h1 { margin: 0; font-size: clamp(40px, 10vmin, 96px); line-height: .95; color: var(--gold); text-shadow: 0 5px 0 #6b4300, 0 0 30px rgba(0, 0, 0, .6); }
.screen h1 span { color: #fff; }
.screen h1 small { display: block; font-size: .42em; letter-spacing: .3em; color: var(--jade); text-shadow: 0 3px 0 #0b4a3a; }
.screen h2 { margin: 0; font-size: clamp(28px, 6.5vmin, 56px); }
.sub { margin: 0; opacity: .9; }
.sub img, .reward img { width: 1.4em; height: 1.4em; border-radius: 50%; margin: 0 4px; }
.reward { margin: 0; font-size: clamp(20px, 4vmin, 32px); color: var(--gold); }
.stars { display: flex; gap: 8px; font-size: clamp(40px, 9vmin, 76px); }
.stars i { font-style: normal; color: #3a3f55; text-shadow: 0 3px 0 #1a1d2a; }
.stars i.on { color: var(--gold); text-shadow: 0 3px 0 #8a5a00, 0 0 20px rgba(255, 211, 107, .6); animation: starIn .35s ease-out backwards; }
.stars i.on:nth-child(2) { animation-delay: .15s; } .stars i.on:nth-child(3) { animation-delay: .3s; }
@keyframes starIn { from { transform: scale(2.2) rotate(-25deg); opacity: 0; } }
.hint { opacity: .75; font-size: clamp(12px, 2.1vmin, 16px); max-width: 520px; margin: 4px 0 0; }
.row { display: flex; gap: 10px; }
#loading { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; background: var(--ink); }
#loading .ltitle { font-size: clamp(24px, 6vmin, 48px); color: var(--gold); }
#loading .bar { width: min(60vw, 360px); height: 10px; border-radius: 10px; background: #26304a; overflow: hidden; }
#loading i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .15s; }
#toast { position: fixed; z-index: 40; left: 50%; top: 14%; transform: translateX(-50%); padding: 10px 18px; border-radius: 10px; background: var(--panel); }
@media (max-height: 480px) { :root { --slot: min(9vmin, 60px); } .booster .lbl { display: none; } }