:root{
  --bg:#041015;
  --panel:#0b2630;
  --panel2:#123743;
  --gold:#d9b261;
  --gold2:#f4dfb0;
  --ice:#7cf6eb;
  --ice2:#23d0f2;
  --text:#eefaf7;
  --muted:#9ec3bd;
  --shadow:rgba(0,0,0,.52);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:
    linear-gradient(rgba(2,9,13,.32), rgba(2,10,14,.55)),
    url('assets/backgrounds/main-bg.png') center top / cover no-repeat fixed,
    linear-gradient(180deg,#103948 0%,#0a2028 46%,#061014 100%);
  overflow-x:hidden;
  transition:background .7s ease;
}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{
  background:
    radial-gradient(circle at 50% -10%, rgba(110,255,235,.18), transparent 28%),
    linear-gradient(120deg, transparent 0 37%, rgba(73,255,224,.06) 50%, transparent 63%);
  mix-blend-mode:screen;
}
body::after{
  background:
    radial-gradient(circle at 50% 100%,rgba(25,139,150,.13),transparent 30%),
    radial-gradient(circle at 8% 12%,rgba(66,171,255,.12),transparent 18%),
    radial-gradient(circle at 90% 10%,rgba(110,255,235,.08),transparent 14%);
}
body.free-spin-mode{
  background:
    linear-gradient(rgba(2,11,16,.18), rgba(2,10,14,.45)),
    url('assets/backgrounds/bonus-bg.png') center top / cover no-repeat fixed,
    linear-gradient(180deg,#16495a 0%,#0d2831 48%,#071116 100%);
}
button,select{font:inherit}
.hidden{display:none!important}

.loading-screen{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:
    linear-gradient(rgba(1,7,10,.68), rgba(1,7,10,.88)),
    url('assets/backgrounds/main-bg.png') center/cover no-repeat;
  transition:opacity .45s ease, visibility .45s ease;
}
.loading-screen.hidden{opacity:0;visibility:hidden;display:grid!important}
.loading-card{
  width:min(520px,92vw);padding:34px 30px;border-radius:28px;text-align:center;
  background:linear-gradient(180deg, rgba(10,38,49,.92), rgba(4,17,23,.95));
  border:1px solid rgba(217,178,97,.32);
  box-shadow:0 18px 50px var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
}
.loading-icon{width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 0 28px rgba(87,245,225,.30));animation:float 2.7s ease-in-out infinite}
.loading-card h1{margin:10px 0 8px;color:var(--gold2);font-family:Georgia,serif;font-size:clamp(34px,5vw,58px)}
.loading-card p{margin:0 0 16px;color:#d4ebe6}
.loading-bar{height:14px;border-radius:999px;overflow:hidden;background:#07151b;border:1px solid rgba(217,178,97,.26)}
.loading-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2ec6e9,#81fce2)}
.loading-start,.bonus-continue,.sound-toggle,.bet-control button,.text-btn,.auto-spin,select,.spin{
  border:1px solid rgba(217,178,97,.40);
  background:linear-gradient(180deg,#113947,#0a242d);
  color:#e8d399;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.loading-start{margin-top:16px;min-width:160px;font-weight:800}

.game-shell{position:relative;z-index:1;width:min(1540px,100%);margin:auto;padding:18px}
.ambient{position:fixed;z-index:0;pointer-events:none;opacity:.30;background:url('assets/effects/particles.png') center/contain no-repeat;filter:blur(.2px) drop-shadow(0 0 18px rgba(124,246,235,.15));mix-blend-mode:screen;animation:ambientDrift 18s ease-in-out infinite}
.ambient-left{left:-6vw;bottom:-8vh;width:min(42vw,560px);height:min(42vw,560px)}
.ambient-right{right:-4vw;top:12vh;width:min(34vw,460px);height:min(34vw,460px);animation-duration:22s;animation-direction:alternate-reverse;opacity:.18}

.hero,.power-panel,.legend,.machine,.controls,footer,.rules-dialog{border:1px solid rgba(217,178,97,.32);box-shadow:0 18px 50px var(--shadow),inset 0 1px 0 rgba(255,255,255,.03)}
.hero{
  position:relative;display:flex;align-items:center;gap:16px;padding:15px 20px;border-radius:22px 22px 10px 10px;
  background:linear-gradient(180deg,rgba(12,47,60,.72),rgba(4,18,24,.78));backdrop-filter:blur(8px)
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,.05), transparent 26%, transparent 74%, rgba(255,255,255,.02));pointer-events:none}
.hero h1{margin:0;color:var(--gold2);font-family:Georgia,serif;font-size:clamp(30px,4vw,60px);letter-spacing:.03em;text-shadow:0 0 22px rgba(124,246,235,.16)}
.hero p{margin:2px 0 0;color:var(--muted)}
.kalevala-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--gold);color:var(--ice);font-size:32px;background:radial-gradient(circle at 50% 35%,rgba(35,208,242,.18),rgba(0,0,0,.2));box-shadow:0 0 24px rgba(124,246,235,.18),inset 0 0 24px rgba(124,246,235,.1)}
.sound-toggle{margin-left:auto;padding:8px 12px;position:relative;z-index:1;font-weight:700;color:#d7f6f1}
.sound-toggle.off{opacity:.8;color:#c5cfd0}
.demo-badge{position:relative;z-index:1;padding:7px 13px;border-radius:999px;background:#2d573f;color:#d8ffdf;font-weight:800;font-size:12px;letter-spacing:.04em}

.stage{display:grid;grid-template-columns:240px 1fr 230px;gap:14px;margin-top:14px}
.power-panel,.legend,.machine,.controls,footer{background:linear-gradient(180deg,rgba(10,36,45,.72),rgba(3,14,18,.78));backdrop-filter:blur(8px)}
.power-panel,.legend{position:relative;border-radius:18px;padding:18px;overflow:hidden;box-shadow:0 18px 50px var(--shadow), inset 0 0 0 1px rgba(124,246,235,.06)}
.power-panel::before,.legend::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(124,246,235,.06), transparent 30%);pointer-events:none}
.power-panel h2,.legend h2{font-family:Georgia,serif;color:#efd28e;margin:0 0 12px}
.power-panel p{color:var(--muted);line-height:1.55;margin:0 0 10px}
.power-panel .small{font-size:13px}
.ahti-orb{display:grid;place-items:center;min-height:166px;margin:12px 0}
.ahti-orb img{width:138px;height:138px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(87,245,225,.30));animation:float 3.2s ease-in-out infinite}
.scatter-mini-paytable{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(217,178,97,.25);background:linear-gradient(180deg,rgba(16,53,66,.65),rgba(5,21,28,.65))}
.scatter-chip{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:#cfe4df;font-weight:700}
.scatter-chip img{width:44px;height:44px;object-fit:contain}
.payline-row{display:flex;justify-content:space-between;color:#dcebe7;padding:4px 0;font-size:14px}
.legend{display:flex;flex-direction:column;gap:6px}
.legend-item{display:flex;gap:10px;align-items:center;padding:6px 0;color:#dcebe7}
.legend-item img{width:42px;height:42px;object-fit:contain;flex:none;filter:drop-shadow(0 0 12px rgba(35,208,242,.2))}

.machine{position:relative;border-radius:18px;padding:16px;overflow:hidden;min-height:680px;isolation:isolate}
.machine>*{position:relative;z-index:2}
.machine::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 20%, transparent 80%, rgba(0,0,0,.2));pointer-events:none;z-index:1}
.machine.bonus-active{box-shadow:0 18px 50px var(--shadow), inset 0 0 0 1px rgba(130,252,226,.18), 0 0 34px rgba(35,208,242,.12)}
.machine-bg,.machine-particles,.machine-caustics{position:absolute;inset:0;pointer-events:none;z-index:0}
.machine-bg{background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.48;transition:opacity .5s ease, transform .7s ease;transform:scale(1.03)}
.machine-bg-main{background-image:linear-gradient(rgba(3,12,16,.18), rgba(3,12,16,.40)), url('assets/backgrounds/main-bg.png');opacity:.52}
.machine-bg-bonus{background-image:linear-gradient(rgba(1,10,15,.08), rgba(2,14,18,.24)), url('assets/backgrounds/bonus-bg.png');opacity:0}
body.free-spin-mode .machine-bg-main{opacity:.12;transform:scale(1.05)}
body.free-spin-mode .machine-bg-bonus{opacity:.62;transform:scale(1.02)}
.machine-particles{background:url('assets/effects/particles.png') center/cover no-repeat;opacity:.30;mix-blend-mode:screen;animation:ambientDrift 20s ease-in-out infinite}
.machine-caustics{background:radial-gradient(circle at 50% 0%, rgba(110,255,235,.24), transparent 30%),linear-gradient(115deg, transparent 28%, rgba(255,255,255,.09) 43%, transparent 58%);mix-blend-mode:screen;opacity:.55;animation:caustics 9s linear infinite}

.reels-wrap{position:relative;z-index:2}
.reels{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,minmax(112px,1fr));gap:10px;min-height:490px;padding:14px;
  background:linear-gradient(180deg,rgba(2,13,19,.55),rgba(3,17,23,.52));border:3px solid rgba(120,100,54,.92);border-radius:16px;
  box-shadow:inset 0 0 60px #000,0 0 20px rgba(35,208,242,.08);overflow:hidden;
}
.reels::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(124,246,235,.08), transparent 25%),linear-gradient(180deg, rgba(255,255,255,.04), transparent 24%, transparent 76%, rgba(255,255,255,.02));pointer-events:none}
.reels::after{content:"";position:absolute;inset:-20%;background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);opacity:.16;transform:translateX(-20%);animation:reelSheen 6s linear infinite;pointer-events:none}
.payline-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.payline-overlay .payline-path{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px currentColor);stroke-dasharray:18 10;animation:dashMove 1.4s linear infinite, lineFade .35s ease}
.payline-overlay .payline-node{filter:drop-shadow(0 0 6px currentColor);animation:nodePulse 1s ease-in-out infinite}
.payline-overlay .payline-label-bg{fill:rgba(4,18,24,.82);stroke:rgba(217,178,97,.5);stroke-width:1}
.payline-overlay .payline-label-text{font-size:14px;font-weight:800;fill:#fff7dd;paint-order:stroke;stroke:rgba(4,18,24,.8);stroke-width:2px}

.symbol{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;
  border-radius:14px;border:1px solid rgba(217,178,97,.22);
  background:radial-gradient(circle at 50% 5%,rgba(35,208,242,.16),transparent 26%),linear-gradient(160deg,rgba(17,60,73,.95),rgba(5,20,26,.98));
  box-shadow:inset 0 0 24px rgba(255,255,255,.03);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.symbol::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%, transparent 74%, rgba(255,255,255,.02))}
.symbol::after{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:0;background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%)}
.symbol-art{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:1;width:100%;padding:8px 8px 2px}
.symbol-art img{width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.symbol .name{position:relative;z-index:1;width:100%;padding:8px 6px 10px;text-align:center;color:#e6f0ed;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(180deg, transparent, rgba(0,0,0,.18))}
.symbol.WILD{border-color:#55e5d7;box-shadow:0 0 0 1px rgba(85,229,215,.25),inset 0 0 36px rgba(85,229,215,.18),0 0 20px rgba(85,229,215,.12)}
.symbol.SCATTER{border-color:#f0ca77;box-shadow:0 0 0 1px rgba(240,202,119,.2),inset 0 0 32px rgba(240,202,119,.12),0 0 16px rgba(240,202,119,.09)}
.symbol.changed{animation:surge .9s ease}
.symbol.changed::after{opacity:1;animation:shine .85s ease}
.symbol.spinning{animation:symbolSpin .32s linear infinite}
.symbol.spinning .symbol-art img{animation:spinFloat .45s ease-in-out infinite;filter:blur(.4px) drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.symbol.stop-pop{animation:stopPop .35s ease}
.symbol.win-cell{transform:translateY(-2px) scale(1.02);filter:brightness(1.08);border-color:var(--gold);box-shadow:0 0 0 1px rgba(217,178,97,.25), inset 0 0 36px rgba(124,246,235,.08), 0 0 24px rgba(217,178,97,.18);animation:pulseWin 1.1s ease-in-out infinite}
.symbol.win-cell::after{opacity:1;animation:shine 1.6s linear infinite}

.feature-banner{position:absolute;z-index:7;top:48%;left:50%;transform:translate(-50%,-50%);font-family:Georgia,serif;font-size:clamp(34px,6vw,84px);font-weight:900;line-height:1;color:#fff;text-shadow:0 4px 0 #1e6f78,0 0 28px #55ffe7,0 0 65px rgba(85,255,231,.45);white-space:nowrap;animation:banner .95s ease}
.wave-overlay,.big-win-banner,.scatter-anticipation,.free-spin-intro,.bonus-screen{position:absolute;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none}
.wave-overlay{overflow:hidden}
.wave-overlay::before{content:"";position:absolute;inset:-6%;background:url('assets/effects/wave-burst.png') center/contain no-repeat;filter:drop-shadow(0 0 20px rgba(78,250,220,.18));animation:waveBurst .95s ease forwards}
.scatter-anticipation,.free-spin-intro,.bonus-screen{background:radial-gradient(circle at 50% 50%, rgba(2,15,20,.32), rgba(1,7,10,.72))}
.scatter-anticipation img,.free-spin-intro img{width:min(24vw,138px);filter:drop-shadow(0 0 20px rgba(217,178,97,.22));animation:float 2.2s ease-in-out infinite}
.scatter-anticipation span,.free-spin-intro span{display:block;text-align:center;font-family:Georgia,serif;font-size:clamp(32px,4.2vw,58px);color:#fff3c8;text-shadow:0 0 20px rgba(217,178,97,.35);margin-top:12px}
.free-spin-intro{display:flex;flex-direction:column;gap:8px}
.free-spin-intro strong{font-size:clamp(34px,5vw,72px);color:var(--ice);text-shadow:0 0 24px rgba(124,246,235,.35)}
.bonus-screen{pointer-events:auto}
.bonus-screen-card{width:min(560px,92%);padding:28px 26px;border-radius:24px;text-align:center;background:linear-gradient(180deg, rgba(7,37,49,.96), rgba(7,24,31,.96));border:1px solid rgba(217,178,97,.44);box-shadow:0 18px 50px rgba(0,0,0,.46),0 0 32px rgba(35,208,242,.15);animation:popIn .32s ease}
.bonus-screen small{display:block;color:#9fe8dc;font-weight:800;letter-spacing:.16em;margin-bottom:10px}
.bonus-screen h2{margin:0 0 8px;font-family:Georgia,serif;color:#fff0c2;font-size:clamp(30px,4.2vw,54px)}
.bonus-screen p{margin:0 auto 18px;max-width:420px;color:#d1e5e1;line-height:1.5}
.bonus-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.bonus-summary div{padding:14px;border-radius:18px;background:linear-gradient(180deg, rgba(12,55,69,.72), rgba(4,20,26,.78));border:1px solid rgba(217,178,97,.22)}
.bonus-summary span{display:block;color:#a9c8c2;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.bonus-summary strong{font-size:28px;color:#f2e2b5}
.bonus-continue{min-width:180px;font-weight:900;color:#f4fcfb;background:linear-gradient(180deg,#1f887d,#16675f);box-shadow:0 0 0 4px rgba(217,178,97,.12), inset 0 0 0 2px rgba(255,255,255,.05), 0 0 22px rgba(35,208,242,.18)}

.mahti-meter{display:flex;align-items:center;gap:10px;position:absolute;top:16px;right:16px;z-index:4;padding:10px 14px;border-radius:999px;background:rgba(7,27,35,.75);border:1px solid rgba(217,178,97,.28);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.mahti-meter span{font-size:12px;font-weight:800;color:#f3deaa;letter-spacing:.1em}
.mahti-track{width:130px;height:12px;border-radius:999px;overflow:hidden;background:#0a171b;border:1px solid rgba(217,178,97,.18)}
.mahti-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#28bce2,#82fde0)}
.mahti-meter b{font-size:12px;color:#ebf6f4}

.big-win-banner{background:radial-gradient(circle at 50% 50%, rgba(0,25,32,.22), rgba(0,0,0,.66))}
.big-win-card{padding:26px 38px;border-radius:22px;border:1px solid rgba(217,178,97,.5);background:linear-gradient(180deg,rgba(7,37,49,.96),rgba(7,24,31,.96));box-shadow:0 0 0 1px rgba(255,255,255,.03),0 18px 50px rgba(0,0,0,.45),0 0 32px rgba(35,208,242,.15);text-align:center;animation:popIn .32s ease}
.big-win-card span{display:block;color:var(--gold2);font-size:clamp(18px,2.1vw,30px);font-weight:800;letter-spacing:.12em;margin-bottom:8px}
.big-win-card strong{display:block;color:#fff5d8;font-size:clamp(36px,5vw,76px);font-family:Georgia,serif;text-shadow:0 0 18px rgba(217,178,97,.3)}
.coin-layer{position:absolute;inset:0;overflow:hidden}
.coin{position:absolute;top:-10%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff7d1 0%,#f8d76b 22%,#e3ac1c 58%,#9c6510 100%);box-shadow:0 0 8px rgba(255,215,0,.22);animation:coinFall var(--dur,1.7s) linear forwards;transform:rotate(var(--rot,0deg))}
.coin::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid rgba(255,255,255,.35)}

.message{text-align:center;padding:15px 8px 0;color:#bed8d2;font-weight:700;min-height:44px;position:relative;z-index:2}
.controls{display:grid;grid-template-columns:1fr auto 1fr 1fr auto auto;gap:12px;align-items:center;margin-top:14px;padding:14px 18px;border-radius:14px}
.stat{display:flex;flex-direction:column;gap:4px}
.stat label,.auto-control>label{text-transform:uppercase;color:#89aaa4;font-size:11px;font-weight:800;letter-spacing:.08em}
.stat strong{font-size:clamp(18px,2vw,28px);color:#f2e2b5}
.bet-control{display:flex;gap:9px;align-items:center}
.bet-control button{min-width:42px}
.auto-control{display:flex;flex-direction:column;gap:5px;min-width:205px}
.auto-row{display:flex;gap:7px;align-items:center}
.auto-row select{height:44px;min-width:68px}
.auto-spin.active{background:linear-gradient(180deg,#1a5a61,#0b3035);color:white;box-shadow:0 0 20px rgba(35,208,242,.16)}
.spin{min-width:182px;justify-self:end;padding:18px 26px;border-radius:999px;font-weight:900;font-size:28px;letter-spacing:.04em;color:#f5fdfb;background:linear-gradient(180deg,#1f887d,#16675f);box-shadow:0 0 0 4px rgba(217,178,97,.18), inset 0 0 0 2px rgba(255,255,255,.06), 0 0 22px rgba(35,208,242,.18)}
button:disabled,select:disabled{opacity:.65;cursor:not-allowed}
footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 16px;border-radius:14px;color:#afc9c4}
.text-btn{padding:8px 12px}

.rules-dialog{width:min(860px,92vw);border-radius:18px;padding:22px 24px;color:var(--text);background:linear-gradient(180deg, rgba(11,43,56,.98), rgba(5,19,25,.98))}
.rules-dialog::backdrop{background:rgba(0,0,0,.6)}
.rules-dialog h2{font-family:Georgia,serif;color:#efd28e;margin:8px 0 12px}
.small{color:#c1d8d3;line-height:1.5}
.rules-table{border:1px solid rgba(217,178,97,.3);border-radius:14px;overflow:hidden;margin:14px 0;background:rgba(0,0,0,.12)}
.rules-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;padding:11px 14px;border-top:1px solid rgba(255,255,255,.05)}
.rules-head{background:rgba(255,255,255,.04);font-weight:800;color:#f2e2b5;border-top:0}
.rules-table-3col .rules-row{grid-template-columns:2fr 1fr 1.2fr}
.rules-close{margin-top:8px}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulseWin{0%,100%{box-shadow:0 0 0 1px rgba(217,178,97,.25), inset 0 0 36px rgba(124,246,235,.08), 0 0 22px rgba(217,178,97,.16)}50%{box-shadow:0 0 0 1px rgba(217,178,97,.35), inset 0 0 40px rgba(124,246,235,.12), 0 0 34px rgba(217,178,97,.26)}}
@keyframes surge{0%{transform:scale(.92);filter:brightness(.75)}55%{transform:scale(1.08);filter:brightness(1.22)}100%{transform:scale(1)}}
@keyframes shine{0%{transform:translateX(-35%) rotate(12deg)}100%{transform:translateX(42%) rotate(12deg)}}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes waveBurst{0%{opacity:0;transform:scale(.6) rotate(-8deg)}45%{opacity:1;transform:scale(1.04) rotate(2deg)}100%{opacity:0;transform:scale(1.16) rotate(4deg)}}
@keyframes popIn{0%{opacity:0;transform:scale(.82)}100%{opacity:1;transform:scale(1)}}
@keyframes spinFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(8px) scale(.98)}}
@keyframes symbolSpin{0%{transform:translateY(-4px)}50%{transform:translateY(4px)}100%{transform:translateY(-4px)}}
@keyframes stopPop{0%{transform:translateY(8px) scale(.96);filter:brightness(.9)}70%{transform:translateY(-2px) scale(1.04);filter:brightness(1.15)}100%{transform:translateY(0) scale(1);filter:brightness(1)}}
@keyframes reelSheen{0%{transform:translateX(-25%)}100%{transform:translateX(25%)}}
@keyframes caustics{0%{transform:translateX(-2%) scale(1);opacity:.26}50%{transform:translateX(2%) scale(1.04);opacity:.40}100%{transform:translateX(-2%) scale(1);opacity:.26}}
@keyframes ambientDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%, -3%, 0) scale(1.04)}}
@keyframes coinFall{0%{transform:translateY(-10vh) rotate(0deg);opacity:0}10%{opacity:1}100%{transform:translateY(120vh) rotate(540deg);opacity:0}}
@keyframes dashMove{from{stroke-dashoffset:0}to{stroke-dashoffset:-56}}
@keyframes lineFade{from{opacity:0}to{opacity:1}}
@keyframes nodePulse{0%,100%{r:7}50%{r:9}}

@media (max-width:1100px){
  .stage{grid-template-columns:1fr}
  .machine{order:1;min-height:auto}
  .power-panel,.legend{order:2}
  .controls{grid-template-columns:1fr 1fr}
  .spin{width:100%;justify-self:stretch;grid-column:1/-1}
  .ambient{display:none}
}
@media (max-width:760px){
  .game-shell{padding:10px}
  .hero{padding:14px;border-radius:16px;flex-wrap:wrap}
  .hero h1{font-size:clamp(28px,10vw,46px)}
  .sound-toggle{margin-left:0}
  .reels{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(86px,1fr));gap:8px;min-height:0;padding:10px}
  .symbol .name{font-size:10px;padding:5px 4px 7px}
  .legend-item img{width:36px;height:36px}
  .controls{grid-template-columns:1fr}
  .bet-control,.auto-row{width:100%}
  .auto-control{min-width:0}
  .auto-row select,.auto-spin,.bet-control button,.spin{width:100%}
  .bet-control{display:grid;grid-template-columns:48px 1fr 48px}
  .rules-row{font-size:14px}
  .mahti-meter{left:12px;right:12px;top:10px;justify-content:center}
  .bonus-summary{grid-template-columns:1fr}
  .payline-overlay .payline-label-text{font-size:12px}
}

/* ============================================================
   AHDIN MAHTI v0.6 — ORNATE OCEAN UI
   Visual pass built on top of v0.5.1 without changing game logic.
   ============================================================ */
:root{
  --v06-deep:#031117;
  --v06-deep2:#071f29;
  --v06-panel:rgba(4,27,35,.88);
  --v06-panel2:rgba(8,43,53,.84);
  --v06-gold:#caa557;
  --v06-gold-bright:#f1d98f;
  --v06-gold-dark:#72571f;
  --v06-aqua:#5ce9df;
  --v06-line:rgba(209,174,92,.55);
}

body{
  background:
    radial-gradient(circle at 50% 16%, rgba(30,136,150,.12), transparent 28%),
    linear-gradient(rgba(1,8,12,.25),rgba(1,9,13,.58)),
    url('assets/backgrounds/main-bg.png') center top / cover no-repeat fixed,
    #031117;
}
body::before{
  background:
    radial-gradient(circle at 15% 82%,rgba(79,236,222,.13),transparent 18%),
    radial-gradient(circle at 85% 20%,rgba(88,132,255,.09),transparent 20%),
    linear-gradient(90deg,rgba(0,0,0,.16),transparent 23%,transparent 77%,rgba(0,0,0,.16));
}
body::after{
  opacity:.32;
  background-image:
    radial-gradient(circle at 12% 78%,rgba(111,255,239,.17) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 62%,rgba(111,255,239,.14) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 91% 28%,rgba(255,255,255,.11) 0 1px,transparent 2px);
  background-size:130px 130px,170px 170px,210px 210px;
  animation:ambientDrift 24s ease-in-out infinite;
}

.game-shell{width:min(1540px,100%);padding:14px 18px 20px}

/* --- stronger illustrated header --- */
.hero{
  min-height:94px;
  border-radius:18px 18px 8px 8px;
  border:1px solid rgba(203,166,84,.58);
  padding:15px 22px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 22%,transparent 78%,rgba(255,255,255,.018)),
    radial-gradient(circle at 12% -10%,rgba(76,226,216,.10),transparent 34%),
    linear-gradient(180deg,rgba(7,42,52,.93),rgba(3,20,27,.94));
  box-shadow:
    0 16px 45px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.75),
    0 0 0 1px rgba(55,113,114,.24);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  right:56px;top:50%;
  width:155px;height:155px;
  transform:translateY(-50%);
  background:url('assets/ui/compass-ornament.png') center/contain no-repeat;
  opacity:.105;
  filter:drop-shadow(0 0 18px rgba(80,235,224,.18));
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;left:82px;right:82px;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--v06-gold),#73eee2,var(--v06-gold),transparent);
  opacity:.48;
  pointer-events:none;
}
.kalevala-mark{
  width:62px;height:62px;
  border:2px solid #d4ac53;
  box-shadow:0 0 0 3px rgba(44,174,171,.10),inset 0 0 24px rgba(74,229,216,.13),0 0 20px rgba(0,0,0,.4);
  background:radial-gradient(circle at 50% 40%,rgba(44,207,197,.20),rgba(3,17,22,.94) 67%);
}
.hero h1{font-size:clamp(38px,3.7vw,58px);line-height:.98;text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 24px rgba(93,226,214,.12)}
.hero p{font-size:14px;color:#a8c9c5;letter-spacing:.015em}
.sound-toggle,.demo-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 18px rgba(0,0,0,.22)}
.demo-badge{border:1px solid rgba(165,221,166,.15)}

/* --- three-part temple stage --- */
.stage{grid-template-columns:250px minmax(0,1fr) 240px;gap:12px;margin-top:12px;align-items:stretch}
.power-panel,.legend,.machine{
  border-color:rgba(202,165,87,.52);
  background:
    linear-gradient(180deg,rgba(8,45,55,.89),rgba(3,20,27,.93));
  box-shadow:
    0 18px 45px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(64,171,169,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.power-panel,.legend{border-radius:14px;padding:18px 16px 16px}
.power-panel::before,.legend::before{
  inset:7px;
  border:1px solid rgba(116,227,214,.09);
  border-top-color:rgba(228,191,103,.34);
  border-bottom-color:rgba(228,191,103,.19);
  border-radius:10px;
  background:
    linear-gradient(90deg,transparent,rgba(88,231,219,.05),transparent),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(202,165,87,.035) 48px 49px);
}
.power-panel::after,.legend::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:190px;height:190px;right:-58px;bottom:-55px;
  opacity:.11;filter:saturate(.9) drop-shadow(0 0 18px rgba(71,231,218,.18));
}
.power-panel::after{background:url('assets/ui/wave-ornament.png') center/contain no-repeat}
.legend::after{background:url('assets/ui/compass-ornament.png') center/contain no-repeat}
.power-panel>* ,.legend>*{position:relative;z-index:1}
.power-panel h2,.legend h2{
  font-size:22px;letter-spacing:.02em;color:#efd58d;
  padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid rgba(202,165,87,.22);
  text-shadow:0 2px 0 rgba(0,0,0,.55);
}
.ahti-orb{min-height:160px;margin:8px 0 10px}
.ahti-orb::before{
  content:"";position:absolute;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(211,171,76,.32);box-shadow:inset 0 0 30px rgba(51,231,215,.10),0 0 20px rgba(0,0,0,.32);
}
.ahti-orb img{width:142px;height:142px}
.scatter-mini-paytable{
  border:1px solid rgba(202,165,87,.34);
  box-shadow:inset 0 0 28px rgba(0,0,0,.16),0 7px 18px rgba(0,0,0,.18);
  background:linear-gradient(180deg,rgba(10,55,64,.67),rgba(4,24,31,.78));
}
.legend-item{
  min-height:52px;padding:5px 7px;border-radius:9px;
  border:1px solid transparent;
  background:linear-gradient(90deg,rgba(255,255,255,.018),transparent);
}
.legend-item:hover{border-color:rgba(202,165,87,.15);background:linear-gradient(90deg,rgba(61,206,194,.07),transparent)}
.legend-item img{width:45px;height:45px}

/* --- illustrated central cabinet / temple frame --- */
.machine{
  border-radius:13px;
  min-height:680px;
  padding:18px 18px 14px;
  border:1px solid rgba(211,174,89,.62);
  outline:1px solid rgba(50,147,151,.16);
  outline-offset:-7px;
  overflow:hidden;
}
.machine::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(610px,69%);height:min(610px,78%);
  left:50%;top:42%;transform:translate(-50%,-50%);
  background:url('assets/ui/ahti-ghost.png') center/contain no-repeat;
  opacity:.075;
  filter:grayscale(.12) saturate(.75) drop-shadow(0 0 44px rgba(58,229,214,.20));
  mix-blend-mode:screen;
}
.machine::after{
  content:"";position:absolute;inset:7px;z-index:1;pointer-events:none;border-radius:9px;
  border:1px solid rgba(208,169,79,.22);
  box-shadow:inset 0 0 45px rgba(0,0,0,.32);
  background:
    linear-gradient(90deg,rgba(204,165,77,.16),transparent 2.3%,transparent 97.7%,rgba(204,165,77,.16)),
    linear-gradient(180deg,rgba(96,235,220,.05),transparent 16%,transparent 84%,rgba(202,165,87,.05));
}
.machine-bg-main{opacity:.40}
.machine-particles{opacity:.20}
.machine-caustics{opacity:.34}
.reels-wrap{
  position:relative;
  border-radius:14px;
  filter:drop-shadow(0 13px 22px rgba(0,0,0,.34));
}
.reels{
  gap:8px;padding:11px;
  border:3px solid #80662e;
  border-radius:13px;
  background:
    radial-gradient(circle at 50% 0%,rgba(65,221,207,.07),transparent 27%),
    linear-gradient(180deg,rgba(1,12,17,.78),rgba(2,17,22,.74));
  box-shadow:
    inset 0 0 0 1px rgba(241,211,131,.30),
    inset 0 0 55px rgba(0,0,0,.72),
    0 0 0 5px rgba(2,19,25,.66),
    0 0 0 6px rgba(206,167,77,.22),
    0 14px 32px rgba(0,0,0,.34);
}
.symbol{
  border-radius:11px;
  border-color:rgba(210,175,91,.31);
  background:
    radial-gradient(circle at 50% 3%,rgba(51,212,201,.12),transparent 28%),
    linear-gradient(155deg,rgba(15,58,68,.94),rgba(3,20,27,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -14px 28px rgba(0,0,0,.13);
}
.symbol .name{font-size:11px;color:#f1f3e9;text-shadow:0 1px 2px #000}
.message{
  margin:9px auto 0;min-height:38px;padding:10px 18px 6px;
  width:min(76%,680px);
  color:#cce5df;font-size:13px;
  border-top:1px solid rgba(202,165,87,.18);
}

/* cabinet side-pillar illusion */
.machine .reels-wrap::before,.machine .reels-wrap::after{
  content:"";position:absolute;z-index:4;pointer-events:none;top:9px;bottom:9px;width:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#3e2d11,#c7a252 36%,#f0d584 50%,#806522 68%,#251b0a);
  opacity:.54;
  box-shadow:0 0 10px rgba(0,0,0,.45),0 0 8px rgba(94,226,214,.08);
}
.machine .reels-wrap::before{left:2px}
.machine .reels-wrap::after{right:2px}

/* --- ornate control console: every old flat block becomes a cabinet tile --- */
.controls{
  grid-template-columns:minmax(150px,1fr) auto minmax(125px,.72fr) minmax(150px,.86fr) auto auto;
  gap:8px;margin-top:11px;padding:10px;
  border-radius:13px;
  border:1px solid rgba(202,165,87,.56);
  background:
    linear-gradient(180deg,rgba(8,42,51,.94),rgba(3,20,26,.96));
  box-shadow:0 15px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(74,196,190,.06);
}
.controls > .stat,.controls > .bet-control,.controls > .auto-control{
  min-height:66px;
  border:1px solid rgba(203,167,83,.26);
  border-radius:10px;
  padding:9px 12px;
  background:
    radial-gradient(circle at 50% 0%,rgba(72,218,204,.055),transparent 43%),
    linear-gradient(180deg,rgba(10,51,61,.68),rgba(3,23,30,.74));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),inset 0 -8px 20px rgba(0,0,0,.10);
}
.controls > .stat{justify-content:center}
.controls > .stat::before,.controls > .bet-control::before,.controls > .auto-control::before{
  content:"";position:absolute;left:12px;right:12px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,211,137,.33),transparent);
}
.controls > .stat,.controls > .bet-control,.controls > .auto-control{position:relative}
.controls .stat label,.auto-control>label{color:#8dafaa;font-size:10px}
.controls .stat strong{color:#f4dfaa;text-shadow:0 1px 3px #000;font-size:clamp(19px,1.7vw,26px)}
.controls > .bet-control{padding:8px 7px;gap:6px}
.controls > .bet-control .stat{min-width:82px;align-items:center}
.bet-control button,.auto-row select,.auto-spin{
  border-color:rgba(202,165,87,.32);
  background:linear-gradient(180deg,rgba(14,60,69,.95),rgba(4,31,38,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.bet-control button{width:40px;height:44px;border-radius:9px;color:#d6c17b}
.auto-control{min-width:190px;justify-content:center}
.auto-row{gap:6px}
.auto-row select{height:42px;color:#cce4df}
.auto-spin{height:42px;padding-inline:11px;color:#dccd9d}
.spin{
  min-width:196px;min-height:68px;
  padding:16px 25px;
  border:1px solid #d2af5b;
  border-radius:999px;
  font-family:Georgia,serif;font-size:27px;letter-spacing:.035em;
  background:
    radial-gradient(circle at 50% 12%,rgba(121,255,232,.20),transparent 37%),
    linear-gradient(180deg,#238d83,#13645f 54%,#0c4847);
  box-shadow:
    0 0 0 3px rgba(78,70,31,.82),
    0 0 0 6px rgba(206,169,82,.27),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -9px 18px rgba(0,0,0,.18),
    0 9px 22px rgba(0,0,0,.36),
    0 0 25px rgba(49,218,202,.14);
  text-shadow:0 2px 2px rgba(0,0,0,.55);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.spin:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 0 0 3px rgba(78,70,31,.82),0 0 0 6px rgba(229,194,104,.36),inset 0 1px 0 rgba(255,255,255,.20),0 11px 25px rgba(0,0,0,.4),0 0 34px rgba(49,218,202,.20)}
.spin:active:not(:disabled){transform:translateY(1px) scale(.992)}

/* --- footer changed from utility strip into a matching plinth --- */
footer{
  position:relative;margin-top:10px;padding:10px 13px;border-radius:10px;
  border:1px solid rgba(202,165,87,.39);
  background:linear-gradient(180deg,rgba(6,34,42,.91),rgba(2,18,24,.94));
  box-shadow:0 10px 28px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.025);
  font-size:12px;
}
footer::before{
  content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#b9964b 22%,#58cabf 50%,#b9964b 78%,transparent);opacity:.42;
}
footer::after{
  content:"ᚨ  ·  ᛗ  ·  ᚺ  ·  ᛏ  ·  ᛁ";
  margin-left:auto;color:rgba(210,179,103,.34);letter-spacing:.35em;font-size:11px;
}
.text-btn{border-color:rgba(202,165,87,.27);background:linear-gradient(180deg,rgba(14,57,66,.74),rgba(4,29,35,.78));color:#cfded9}

/* Loading / modal also receive v0.6 framing */
.loading-card,.bonus-screen-card,.big-win-card,.rules-dialog{
  border-color:rgba(211,174,89,.55);
  box-shadow:0 22px 60px rgba(0,0,0,.52),inset 0 0 0 1px rgba(67,194,186,.07),0 0 32px rgba(47,209,197,.07);
}
.loading-card{background:linear-gradient(180deg,rgba(7,42,52,.97),rgba(2,18,24,.98))}

@media (max-width:1250px){
  .stage{grid-template-columns:220px minmax(0,1fr) 210px}
  .controls{grid-template-columns:1fr auto 1fr 1fr auto}
  .spin{grid-column:1/-1;width:100%;min-height:60px}
}
@media (max-width:1100px){
  .stage{grid-template-columns:1fr}
  .power-panel,.legend{min-height:0}
  .power-panel::after,.legend::after{opacity:.07}
  .machine::before{opacity:.055}
  .controls{grid-template-columns:1fr 1fr}
  .controls > .stat,.controls > .bet-control,.controls > .auto-control{min-height:64px}
  .spin{grid-column:1/-1}
}
@media (max-width:760px){
  .game-shell{padding:8px}
  .hero{min-height:0;padding:12px}
  .hero::before{width:100px;height:100px;right:5px}
  .kalevala-mark{width:50px;height:50px}
  .stage{gap:8px;margin-top:8px}
  .machine{padding:11px 9px 8px;outline-offset:-4px}
  .reels{gap:6px;padding:8px}
  .machine .reels-wrap::before,.machine .reels-wrap::after{display:none}
  .controls{grid-template-columns:1fr;padding:8px}
  .controls > .stat,.controls > .bet-control,.controls > .auto-control{width:100%}
  footer::after{display:none}
}

/* v0.6 panel-title ornaments */
.power-panel h2,.legend h2{display:flex;align-items:center;gap:9px}
.power-panel h2::before,.legend h2::before{content:"";width:27px;height:27px;flex:0 0 27px;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 0 8px rgba(75,222,211,.18))}
.power-panel h2::before{background-image:url('assets/ui/hook-ornament.png')}
.legend h2::before{background-image:url('assets/ui/compass-ornament.png')}


/* ============================================================
   v0.6.1 refinement pass — closer to ornate concept + slower spin feel
   ============================================================ */
.hero{
  min-height:108px;
  padding:18px 24px;
  border-radius:24px 24px 12px 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 15%, transparent 85%, rgba(255,255,255,.02)),
    url('assets/ui/ahti-ghost.png') center center / 300px auto no-repeat,
    url('assets/ui/compass-ornament.png') right 56px center / 118px auto no-repeat,
    linear-gradient(180deg, rgba(8,46,57,.96), rgba(3,21,28,.98));
  box-shadow:
    0 18px 52px rgba(0,0,0,.52),
    inset 0 0 0 1px rgba(217,178,97,.18),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(49,143,146,.26);
}
.hero::before{
  left:50%;right:auto;top:-6px;bottom:auto;
  width:340px;height:56px;
  transform:translateX(-50%);
  background:url('assets/ui/wave-ornament.png') center/contain no-repeat;
  opacity:.32;
  filter:drop-shadow(0 0 14px rgba(217,178,97,.20));
}
.hero::after{
  left:105px;right:105px;bottom:8px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(222,189,108,.82),rgba(116,238,226,.84),rgba(222,189,108,.82),transparent);
  opacity:.62;
}
.hero h1{font-size:clamp(42px,4vw,64px)}
.hero p{font-size:15px}
.sound-toggle{padding:10px 14px;border-radius:14px}
.demo-badge{padding:9px 14px}

.power-panel,.legend{
  border-radius:20px;
  padding:18px 18px 22px;
  background:
    linear-gradient(180deg,rgba(10,49,60,.92),rgba(3,21,28,.96));
  box-shadow:
    0 20px 50px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(70,197,189,.08),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(204,168,82,.16);
}
.power-panel::before,.legend::before{
  inset:8px;
  border-radius:14px;
  border:1px solid rgba(212,178,97,.24);
  background:
    linear-gradient(90deg, rgba(214,180,98,.12), transparent 10px, transparent calc(100% - 10px), rgba(214,180,98,.12)),
    radial-gradient(circle at 50% 0%, rgba(108,244,231,.09), transparent 28%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(214,180,98,.03) 46px 47px);
}
.power-panel::after,.legend::after{
  left:50%;right:auto;bottom:-6px;
  width:92px;height:92px;
  transform:translateX(-50%);
  opacity:.28;
}
.power-panel h2,.legend h2{font-size:26px;margin-bottom:14px;padding-bottom:12px}
.power-panel p{font-size:17px;line-height:1.5}
.power-panel .small{font-size:14px}
.legend-item{padding:8px 8px;min-height:56px;border-radius:11px}
.legend-item span{font-size:16px}
.legend-item img{width:42px;height:42px}
.scatter-mini-paytable{border-radius:16px;padding:14px}
.ahti-orb{min-height:174px}
.ahti-orb::before{width:156px;height:156px}

.machine{
  border-radius:20px;
  padding:20px 20px 16px;
  border:1px solid rgba(214,178,92,.68);
  outline:1px solid rgba(61,170,171,.22);
  outline-offset:-8px;
  background:
    linear-gradient(180deg, rgba(9,39,48,.78), rgba(3,18,24,.90));
  box-shadow:
    0 22px 54px rgba(0,0,0,.54),
    inset 0 0 0 1px rgba(217,178,97,.14),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(70,188,183,.12);
}
.machine::before{
  width:min(680px,80%);height:min(680px,88%);
  top:44%;
  opacity:.12;
}
.machine::after{
  inset:8px;
  border-radius:13px;
  border:1px solid rgba(214,178,97,.28);
  background:
    linear-gradient(90deg, rgba(214,178,97,.18), transparent 3%, transparent 97%, rgba(214,178,97,.18)),
    linear-gradient(180deg, rgba(111,255,239,.06), transparent 18%, transparent 82%, rgba(214,178,97,.06));
}
.machine .reels-wrap::before,.machine .reels-wrap::after{
  width:28px;top:-6px;bottom:-6px;
  border-radius:20px;
  opacity:.78;
  background:
    linear-gradient(90deg,#201608,#735822 12%,#cda656 38%,#f2d98e 52%,#b68939 66%,#5b4318 84%,#201608 100%);
  box-shadow:
    0 0 0 1px rgba(229,198,111,.28),
    0 8px 18px rgba(0,0,0,.46),
    inset 0 0 10px rgba(255,255,255,.08);
}
.machine .reels-wrap::before{left:-13px}
.machine .reels-wrap::after{right:-13px}
.reels{
  border-width:4px;
  border-color:#8a6a2d;
  border-radius:18px;
  padding:13px;
  gap:10px;
  box-shadow:
    inset 0 0 0 1px rgba(242,215,146,.34),
    inset 0 0 70px rgba(0,0,0,.72),
    0 0 0 8px rgba(3,20,26,.82),
    0 0 0 10px rgba(206,168,83,.24),
    0 18px 40px rgba(0,0,0,.38);
}
.reels::before{opacity:.95}
.symbol{
  border-radius:14px;
  border-color:rgba(214,179,95,.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(78,230,219,.15), transparent 28%),
    linear-gradient(180deg, rgba(18,70,82,.96), rgba(3,21,28,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -16px 28px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,255,255,.015);
}
.symbol .name{font-size:12px;letter-spacing:.045em}
.message{
  width:min(82%,720px);
  margin-top:12px;
  min-height:42px;
  font-size:14px;
  padding-top:12px;
}

.controls{
  padding:12px;
  gap:10px;
  margin-top:14px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(8,43,52,.96), rgba(3,20,26,.98));
}
.controls > .stat,.controls > .bet-control,.controls > .auto-control{
  min-height:74px;
  border-radius:14px;
  border-color:rgba(214,178,97,.30);
}
.controls .stat label,.auto-control>label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#b8b288}
.controls .stat strong{font-size:clamp(20px,1.75vw,27px)}
.bet-control button{width:44px;height:48px;border-radius:10px;font-size:24px}
.auto-row select,.auto-spin{height:46px;border-radius:10px}
.spin{
  min-width:232px;min-height:84px;
  font-size:31px;
  letter-spacing:.02em;
  position:relative;
  overflow:hidden;
}
.spin::before{
  content:"";position:absolute;inset:8px;border-radius:999px;pointer-events:none;
  border:1px solid rgba(245,224,172,.42);
}
.spin::after{
  content:"";position:absolute;left:16px;right:16px;top:12px;height:24px;pointer-events:none;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  opacity:.52;
}
footer{
  margin-top:12px;
  border-radius:14px;
  padding:12px 14px;
}

/* slower visual reel motion */
.symbol.spinning{animation:symbolSpin .48s linear infinite}
.symbol.spinning .symbol-art img{animation:spinFloat .70s ease-in-out infinite}
.symbol.stop-pop{animation:stopPop .46s ease}

@media (max-width:1250px){
  .hero{background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 15%, transparent 85%, rgba(255,255,255,.02)),
    url('assets/ui/ahti-ghost.png') center center / 240px auto no-repeat,
    url('assets/ui/compass-ornament.png') right 30px center / 90px auto no-repeat,
    linear-gradient(180deg, rgba(8,46,57,.96), rgba(3,21,28,.98));}
}
@media (max-width:760px){
  .hero::before{width:180px;height:34px;top:-1px}
  .hero h1{font-size:clamp(32px,9vw,48px)}
  .power-panel h2,.legend h2{font-size:22px}
  .power-panel p{font-size:15px}
  .spin{min-height:72px;font-size:28px}
}


/* ============================================================
   v0.6.2 final polish — close-match ornate cabinet pass
   ============================================================ */
.game-shell{
  position:relative;
  width:min(1480px,100%);
  padding:12px 16px 20px;
}
.game-shell::before,
.game-shell::after{
  content:"";
  position:absolute;
  left:14px;right:14px;
  pointer-events:none;
  z-index:0;
}
.game-shell::before{
  top:4px;height:18px;
  border-radius:26px 26px 0 0;
  background:linear-gradient(90deg,transparent,rgba(217,178,97,.22) 10%,rgba(106,243,233,.18) 50%,rgba(217,178,97,.22) 90%,transparent);
  opacity:.55;
}
.game-shell::after{
  bottom:0;height:140px;
  background:radial-gradient(circle at 50% 0%, rgba(80,237,225,.10), transparent 42%);
}
.ambient-left{opacity:.38}
.ambient-right{opacity:.22}

.hero{
  min-height:122px;
  padding:18px 26px;
  border-radius:26px 26px 12px 12px;
  border-color:rgba(212,176,92,.72);
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 16%, transparent 84%, rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(9,45,56,.96), rgba(3,21,28,.98));
  box-shadow:
    0 20px 54px rgba(0,0,0,.52),
    inset 0 0 0 1px rgba(61,169,169,.14),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(214,178,97,.18);
}
.hero::before{
  content:"";
  position:absolute;
  left:50%;top:-7px;
  width:260px;height:72px;
  transform:translateX(-50%);
  background:url('assets/ui/wave-ornament.png') center/contain no-repeat;
  opacity:.40;
  filter:drop-shadow(0 0 16px rgba(216,178,94,.22));
}
.hero::after{
  content:"";
  position:absolute;
  left:26px;right:26px;top:8px;bottom:8px;
  border-radius:20px 20px 8px 8px;
  border:1px solid rgba(216,178,94,.16);
  box-shadow:inset 0 0 0 1px rgba(83,215,206,.06);
  pointer-events:none;
}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(46px,4.2vw,72px);line-height:.95;margin-bottom:6px}
.hero p{font-size:15px}
.hero-ahti{
  position:absolute;
  left:50%;top:50%;
  width:250px;height:250px;
  transform:translate(-6%,-49%);
  background:url('assets/ui/ahti-ghost.png') center/contain no-repeat;
  opacity:.28;
  filter:drop-shadow(0 0 24px rgba(70,231,221,.18));
  pointer-events:none;
  z-index:1;
}
.sound-toggle,.demo-badge{position:relative;z-index:2}
.sound-toggle{margin-left:auto;padding:10px 16px;border-radius:14px}
.demo-badge{padding:9px 14px}

.stage{grid-template-columns:252px minmax(0,1fr) 244px;gap:14px;margin-top:14px}
.power-panel,.legend,.machine,.controls,footer{position:relative;z-index:1}
.power-panel,.legend{
  border-radius:22px;
  padding:18px 18px 20px;
  border-color:rgba(212,176,92,.62);
  background:
    linear-gradient(180deg, rgba(8,48,59,.92), rgba(3,21,28,.96));
  box-shadow:
    0 22px 52px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(73,196,189,.08),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(212,176,92,.12);
}
.power-panel::before,.legend::before{
  inset:8px;
  border-radius:16px;
  border:1px solid rgba(215,179,97,.18);
  background:
    linear-gradient(90deg, rgba(215,179,97,.08), transparent 10px, transparent calc(100% - 10px), rgba(215,179,97,.08)),
    radial-gradient(circle at 50% 0%, rgba(92,242,230,.09), transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 52px, rgba(215,179,97,.025) 52px 53px);
}
.power-panel h2,.legend h2{
  font-size:25px;
  padding-bottom:12px;
  margin-bottom:14px;
}
.power-panel p{font-size:16px;line-height:1.55}
.legend-item{padding:7px 8px;min-height:54px;border-radius:11px}
.legend-item span{font-size:15px}
.scatter-mini-paytable{padding:14px;border-radius:16px}
.ahti-orb{min-height:174px}
.ahti-orb::before{width:158px;height:158px;border-width:1px}
.panel-crest{
  width:78px;height:78px;
  margin:14px auto 0;
  background:url('assets/symbols/pearl.webp') center/contain no-repeat;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(83,220,210,.10));
  opacity:.95;
}
.panel-crest-right{background-image:url('assets/ui/compass-ornament.png'); width:84px; height:84px; opacity:.46}

.machine{
  border-radius:22px;
  min-height:700px;
  padding:22px 20px 18px;
  border-color:rgba(214,178,92,.74);
  outline-color:rgba(76,195,192,.18);
  background:
    linear-gradient(180deg, rgba(8,39,48,.86), rgba(3,19,25,.92));
  box-shadow:
    0 24px 58px rgba(0,0,0,.56),
    inset 0 0 0 1px rgba(214,178,92,.12),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(72,190,186,.10);
}
.machine::before{
  width:min(700px,86%);
  height:min(700px,92%);
  top:42%;
  opacity:.13;
}
.machine::after{
  inset:8px;
  border-radius:14px;
  border:1px solid rgba(214,178,92,.24);
  background:
    linear-gradient(90deg, rgba(214,178,92,.18), transparent 2.8%, transparent 97.2%, rgba(214,178,92,.18)),
    linear-gradient(180deg, rgba(117,255,242,.06), transparent 16%, transparent 84%, rgba(214,178,92,.06));
}
.machine-crest{
  position:absolute;
  top:-6px;left:50%;
  width:190px;height:64px;
  transform:translateX(-50%);
  background:url('assets/ui/wave-ornament.png') center/contain no-repeat;
  opacity:.66;
  filter:drop-shadow(0 0 18px rgba(214,178,92,.18));
  z-index:3;
  pointer-events:none;
}
.machine-bottom-crest{
  position:absolute;
  left:50%;bottom:8px;
  width:72px;height:72px;
  transform:translateX(-50%);
  background:url('assets/symbols/pearl.webp') center/contain no-repeat;
  opacity:.88;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.34));
  pointer-events:none;
  z-index:2;
}
.reels-wrap{
  margin-top:10px;
  padding:0 18px;
}
.machine .reels-wrap::before,.machine .reels-wrap::after{
  width:34px;
  top:-8px;bottom:-8px;
  border-radius:22px;
  opacity:.88;
  background:
    linear-gradient(90deg, #201607, #61491a 10%, #caa457 34%, #f5de96 50%, #be8f3b 66%, #60471a 88%, #201607 100%);
  box-shadow:
    0 0 0 1px rgba(233,199,110,.24),
    0 10px 18px rgba(0,0,0,.44),
    inset 0 0 10px rgba(255,255,255,.08),
    inset 0 16px 18px rgba(87,233,219,.06);
}
.machine .reels-wrap::before{left:-10px}
.machine .reels-wrap::after{right:-10px}
.reels{
  grid-template-rows:repeat(4,minmax(122px,1fr));
  gap:10px;
  padding:13px;
  border-width:4px;
  border-color:#8d6d2f;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(90,239,228,.08), transparent 26%),
    linear-gradient(180deg, rgba(2,13,19,.78), rgba(2,18,23,.74));
  box-shadow:
    inset 0 0 0 1px rgba(243,216,142,.36),
    inset 0 0 70px rgba(0,0,0,.74),
    0 0 0 8px rgba(3,20,26,.84),
    0 0 0 10px rgba(206,168,83,.24),
    0 18px 42px rgba(0,0,0,.40);
}
.symbol{
  min-height:122px;
  border-radius:13px;
  border-color:rgba(214,179,95,.40);
  background:
    radial-gradient(circle at 50% 5%, rgba(63,220,210,.12), transparent 28%),
    linear-gradient(180deg, rgba(17,69,81,.96), rgba(3,21,28,.985));
}
.symbol .symbol-art{height:74%; padding-top:10px}
.symbol .symbol-art img{max-width:80%; max-height:80%}
.symbol .name{font-size:12px;letter-spacing:.055em;margin-bottom:10px}
.message{
  width:min(78%,720px);
  margin-top:12px;
  min-height:48px;
  padding:13px 16px 0;
  font-size:14px;
  border-top:1px solid rgba(214,178,92,.18);
}

.controls{
  grid-template-columns:minmax(170px,1fr) auto minmax(140px,.78fr) minmax(160px,.9fr) auto auto;
  gap:10px;
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border-color:rgba(214,178,92,.62);
  background:
    linear-gradient(180deg, rgba(8,44,53,.96), rgba(3,20,26,.985));
  box-shadow:
    0 18px 44px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(73,196,189,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.controls > .stat,.controls > .bet-control,.controls > .auto-control{
  min-height:78px;
  border-radius:14px;
  border-color:rgba(214,178,92,.30);
  padding:10px 12px;
}
.controls .stat label,.auto-control>label{font-size:11px;letter-spacing:.16em;color:#d8c689}
.controls .stat strong{font-size:clamp(21px,1.9vw,29px)}
.bet-control button{width:44px;height:48px;border-radius:10px;font-size:24px}
.auto-control{min-width:204px}
.auto-row select,.auto-spin{height:46px;border-radius:10px}
.spin{
  min-width:248px;
  min-height:88px;
  padding:18px 26px;
  border-radius:999px;
  font-size:32px;
  border-color:#d7b767;
  background:
    radial-gradient(circle at 50% 10%, rgba(146,255,245,.26), transparent 38%),
    linear-gradient(180deg, #24a49a, #167a74 54%, #0e5855);
  box-shadow:
    0 0 0 4px rgba(84,68,25,.92),
    0 0 0 8px rgba(214,178,92,.32),
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 0 -10px 18px rgba(0,0,0,.18),
    0 12px 24px rgba(0,0,0,.40),
    0 0 30px rgba(58,227,217,.16);
}
.spin::before{
  inset:7px;
  border-color:rgba(247,227,174,.46);
}
.spin::after{left:18px;right:18px;top:11px;height:26px;opacity:.56}
footer{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border-color:rgba(214,178,92,.42);
}
footer span{color:#d5e0dd}

@media (max-width:1280px){
  .hero-ahti{width:210px;height:210px;transform:translate(0,-48%);opacity:.24}
  .stage{grid-template-columns:228px minmax(0,1fr) 220px}
  .controls{grid-template-columns:1fr auto 1fr 1fr auto}
  .spin{grid-column:1/-1;width:100%}
}
@media (max-width:1100px){
  .hero{padding-right:18px}
  .hero-ahti{display:none}
  .stage{grid-template-columns:1fr}
  .panel-crest-right{opacity:.30}
  .controls{grid-template-columns:1fr 1fr}
  .spin{grid-column:1/-1}
}
@media (max-width:760px){
  .game-shell{padding:8px}
  .hero{min-height:0;padding:14px 14px 12px;border-radius:18px 18px 10px 10px}
  .hero::before{width:160px;height:42px;top:-1px}
  .hero h1{font-size:clamp(34px,10vw,50px)}
  .power-panel,.legend,.machine,.controls,footer{border-radius:16px}
  .power-panel h2,.legend h2{font-size:22px}
  .panel-crest,.panel-crest-right,.machine-crest,.machine-bottom-crest{display:none}
  .reels-wrap{padding:0 6px}
  .machine .reels-wrap::before,.machine .reels-wrap::after{display:none}
  .reels{grid-template-rows:repeat(4,minmax(94px,1fr));padding:8px;gap:6px}
  .symbol{min-height:94px}
  .symbol .name{font-size:10px}
  .spin{min-height:74px;font-size:28px}
}


/* ============================================================
   v0.8.0 real-ui rebuild — no fake background buttons or fake reels
   ============================================================ */
.hero{
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:18px;
}
.kalevala-mark{
  width:56px;height:56px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:28px;font-weight:900;
  color:#f6deb0;
  background:radial-gradient(circle at 50% 30%, rgba(32,134,143,.95), rgba(4,34,47,.98) 70%);
  border:2px solid rgba(219,181,97,.85);
  box-shadow:0 0 0 3px rgba(5,25,32,.85), 0 0 0 4px rgba(101,223,216,.16), inset 0 1px 0 rgba(255,255,255,.18);
}
.hero-copy h1{letter-spacing:.01em}
.hero-copy p{color:#e5f3f0;opacity:.92}
.sound-toggle,.demo-badge,.text-btn,.auto-spin,.bet-control button,select,.bonus-continue{
  border:1px solid rgba(226,188,102,.62);
  color:#fff0c2;
  background:linear-gradient(180deg, rgba(15,79,92,.96), rgba(7,44,58,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(71,199,192,.10);
}
.sound-toggle:hover,.text-btn:hover,.auto-spin:hover,.bet-control button:hover,.bonus-continue:hover{
  filter:brightness(1.08);
}
.demo-badge{
  font-weight:800;
  letter-spacing:.1em;
  min-width:74px;
  text-align:center;
}
.sound-toggle[aria-pressed="false"]{opacity:.76}

.power-panel,.legend,.machine,.controls,footer{
  backdrop-filter:none;
}
.power-panel,.legend{
  background:
    radial-gradient(circle at 50% 8%, rgba(70,214,206,.10), transparent 24%),
    linear-gradient(180deg, rgba(10,49,60,.95), rgba(3,21,28,.98));
}
.power-panel h2,.legend h2{
  color:#f5deaa;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.legend-item,.scatter-chip,.payline-row{
  background:linear-gradient(180deg, rgba(8,51,64,.54), rgba(5,30,40,.42));
  border:1px solid rgba(222,186,102,.10);
}
.legend-item{margin-bottom:7px}

.machine{
  background:
    radial-gradient(circle at 50% 0%, rgba(78,232,220,.08), transparent 28%),
    linear-gradient(180deg, rgba(8,39,48,.92), rgba(3,19,25,.96));
}
.machine .reels-wrap::before,.machine .reels-wrap::after{
  width:30px;
}
.reels{
  background:
    radial-gradient(circle at 50% 0%, rgba(108,251,240,.08), transparent 24%),
    linear-gradient(180deg, rgba(2,16,23,.88), rgba(2,22,29,.82));
}
.symbol{
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.symbol:hover{
  transform:translateY(-1px);
  border-color:rgba(242,213,131,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -16px 28px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.03), 0 8px 16px rgba(0,0,0,.16);
}
.message{
  text-align:center;
  font-weight:700;
  color:#f2e4bf;
  text-shadow:0 1px 2px rgba(0,0,0,.66);
}

.controls{
  align-items:stretch;
  gap:12px;
  padding:12px;
  background:
    linear-gradient(180deg, rgba(8,44,53,.98), rgba(3,20,26,.99));
}
.controls > .stat,.controls > .bet-control,.controls > .auto-control{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  background:
    radial-gradient(circle at 50% 0%, rgba(70,220,212,.08), transparent 30%),
    linear-gradient(180deg, rgba(7,45,56,.84), rgba(3,26,35,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 18px rgba(0,0,0,.14);
}
.controls .stat label,.auto-control>label{
  color:#d9c98d;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.controls .stat strong{
  color:#fff3cb;
  text-shadow:0 2px 4px rgba(0,0,0,.45);
}
.bet-control{
  display:grid !important;
  grid-template-columns:46px minmax(96px,1fr) 46px;
  grid-template-rows:auto auto;
  align-content:center;
}
.bet-control > button:first-child{grid-column:1;grid-row:1 / span 2}
.bet-control > .stat{grid-column:2;grid-row:1 / span 2; width:100%;}
.bet-control > button:last-child{grid-column:3;grid-row:1 / span 2}
.bet-control button{
  width:46px;height:50px;
  font-size:26px;
  font-weight:900;
}
.bet-control .stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:none !important;border:none !important;box-shadow:none !important;padding:0;
}
.auto-control{
  min-width:214px;
}
.auto-row{width:100%;justify-content:center;gap:10px}
.auto-row select{
  min-width:76px;
  padding:0 10px;
  color:#fff0c2;
}
.auto-spin{
  min-width:114px;
  font-weight:800;
  letter-spacing:.04em;
}
.spin{
  justify-self:stretch;
  min-width:240px;
  min-height:88px;
  font-size:32px;
  font-weight:900;
  color:#fef4d2;
  text-shadow:0 2px 3px rgba(0,0,0,.55);
  border-radius:999px;
  border:2px solid rgba(227,194,108,.92);
  background:
    url('assets/ui/hook-ornament.png') left -18px center / 94px auto no-repeat,
    url('assets/symbols/pearl.webp') right -4px center / 84px auto no-repeat,
    radial-gradient(circle at 50% 10%, rgba(178,255,247,.32), transparent 36%),
    linear-gradient(180deg, #2bb4ab, #17867f 54%, #0e5a57);
  box-shadow:
    0 0 0 4px rgba(64,54,21,.94),
    0 0 0 8px rgba(214,178,92,.30),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -12px 20px rgba(0,0,0,.18),
    0 14px 28px rgba(0,0,0,.42),
    0 0 34px rgba(58,227,217,.18);
  position:relative;
  overflow:hidden;
}
.spin::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:999px;
  border:1px solid rgba(247,227,174,.46);
  pointer-events:none;
}
.spin::after{
  content:"";
  position:absolute;
  left:18px;right:18px;top:11px;height:26px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0));
  opacity:.56;
  pointer-events:none;
}
footer{
  display:flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(180deg, rgba(8,44,53,.92), rgba(3,20,26,.98));
}
.text-btn{
  height:40px;
  padding:0 16px;
  border-radius:12px;
  font-weight:700;
}
footer span{
  color:#d5e0dd;
  margin-left:4px;
}

@media (max-width:1280px){
  .hero{grid-template-columns:auto 1fr auto auto}
  .hero-ahti{opacity:.20}
}
@media (max-width:960px){
  .hero{grid-template-columns:auto 1fr auto;}
  .demo-badge{justify-self:end}
  .hero-ahti{display:none}
  .controls{grid-template-columns:1fr 1fr}
  .spin{grid-column:1 / -1; width:100%}
}
@media (max-width:760px){
  .hero{grid-template-columns:auto 1fr;gap:12px}
  .sound-toggle,.demo-badge{grid-column:auto}
  .spin{font-size:26px;background:
    radial-gradient(circle at 50% 10%, rgba(178,255,247,.28), transparent 36%),
    linear-gradient(180deg, #2bb4ab, #17867f 54%, #0e5a57);}
  footer{flex-wrap:wrap}
}


/* ============================================================
   v0.8.1 banner + side panels polish pass
   ============================================================ */
.hero{
  min-height:126px;
  padding:18px 22px 20px;
  gap:18px;
  border-radius:26px 26px 12px 12px;
  border:1px solid rgba(215,179,97,.56);
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 18%, transparent 82%, rgba(255,255,255,.025)),
    url('assets/ui/ahti-ghost.png') center -22px / 310px auto no-repeat,
    linear-gradient(180deg, rgba(8,46,58,.96), rgba(3,21,28,.985));
  box-shadow:
    0 22px 56px rgba(0,0,0,.54),
    inset 0 0 0 1px rgba(83,216,206,.09),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(215,179,97,.14);
}
.hero::before{
  content:"";
  position:absolute;
  left:50%; top:-7px;
  width:290px; height:64px;
  transform:translateX(-50%);
  background:url('assets/ui/wave-ornament.png') center/contain no-repeat;
  opacity:.42;
  filter:drop-shadow(0 0 18px rgba(219,181,97,.18));
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  left:14px; right:14px; top:10px; bottom:10px;
  border-radius:20px 20px 8px 8px;
  border:1px solid rgba(220,184,99,.14);
  box-shadow:inset 0 0 0 1px rgba(77,200,196,.05);
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:2;
  padding-top:2px;
}
.hero-copy::after{
  content:"";
  position:absolute;
  left:0; bottom:-8px;
  width:min(360px,56vw); height:2px;
  background:linear-gradient(90deg, rgba(232,198,112,.85), rgba(90,235,223,.7), transparent);
  opacity:.56;
}
.hero-copy h1{
  font-size:clamp(44px,4vw,66px);
  line-height:.95;
  margin-bottom:6px;
  text-shadow:0 2px 0 rgba(0,0,0,.68), 0 0 24px rgba(76,226,214,.10);
}
.hero-copy p{
  font-size:15px;
  color:#cfe1de;
  opacity:.95;
}
.kalevala-mark{
  width:60px; height:60px;
  border:2px solid rgba(220,184,98,.86);
  box-shadow:
    0 0 0 4px rgba(4,24,31,.88),
    0 0 0 5px rgba(76,218,206,.12),
    0 10px 18px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 32%, rgba(47,188,196,.95), rgba(5,35,47,.98) 72%);
}
.hero-ahti{
  width:260px;
  height:240px;
  left:52%;
  top:48%;
  transform:translate(-10%,-50%);
  opacity:.30;
}
.sound-toggle,.demo-badge{
  position:relative;
  z-index:2;
  align-self:start;
  margin-top:6px;
  border-color:rgba(228,191,104,.54);
  background:linear-gradient(180deg, rgba(16,82,95,.98), rgba(8,44,58,.98));
  color:#fff0c6;
}
.sound-toggle{
  min-height:44px;
  padding:9px 16px;
  border-radius:13px;
}
.demo-badge{
  min-width:74px;
  min-height:40px;
  padding:9px 14px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:.10em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 16px rgba(0,0,0,.20);
}

.stage{
  grid-template-columns:258px minmax(0,1fr) 254px;
  gap:16px;
}
.power-panel,.legend{
  border-radius:24px;
  padding:20px 18px 22px;
  border:1px solid rgba(215,179,97,.54);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(82,226,215,.10), transparent 28%),
    linear-gradient(180deg, rgba(9,49,60,.96), rgba(3,21,28,.985));
  box-shadow:
    0 22px 52px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(73,196,189,.07),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(215,179,97,.10);
}
.power-panel::before,.legend::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:17px;
  border:1px solid rgba(218,183,99,.18);
  background:
    linear-gradient(90deg, rgba(218,183,99,.08), transparent 12px, transparent calc(100% - 12px), rgba(218,183,99,.08)),
    radial-gradient(circle at 50% 0%, rgba(103,243,231,.08), transparent 26%),
    repeating-linear-gradient(0deg, transparent 0 52px, rgba(218,183,99,.022) 52px 53px);
  pointer-events:none;
}
.power-panel::after,.legend::after{
  content:"";
  position:absolute;
  left:50%;
  top:4px;
  width:78px;
  height:44px;
  transform:translateX(-50%);
  background:url('assets/symbols/pearl.webp') center/contain no-repeat;
  opacity:.40;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.20));
  pointer-events:none;
}
.power-panel > *,.legend > *{position:relative; z-index:1}
.power-panel h2,.legend h2{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:0 0 12px;
  font-family:Georgia,serif;
  font-size:28px;
  color:#f5dda9;
  text-shadow:0 2px 8px rgba(0,0,0,.28);
  border-bottom:1px solid rgba(219,182,98,.18);
}
.power-panel h2::before,.legend h2::before{
  content:"";
  width:28px; height:28px;
  flex:0 0 28px;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 8px rgba(75,222,211,.16));
}
.power-panel h2::before{background-image:url('assets/ui/hook-ornament.png')}
.legend h2::before{background-image:url('assets/ui/compass-ornament.png')}
.power-panel p{
  font-size:16px;
  line-height:1.56;
  color:#d5e5e2;
}
.power-panel .small{
  font-size:14px;
  color:#c4d9d5;
}
.ahti-orb{
  min-height:176px;
  margin:10px 0 12px;
}
.ahti-orb::before{
  width:158px;
  height:158px;
  border:1px solid rgba(217,178,97,.28);
  background:radial-gradient(circle at 50% 50%, rgba(75,222,211,.12), rgba(0,0,0,0) 68%);
  box-shadow:inset 0 0 0 1px rgba(77,207,198,.05), 0 0 22px rgba(75,222,211,.09);
}
.scatter-mini-paytable{
  border-radius:16px;
  padding:14px 14px 12px;
  background:linear-gradient(180deg, rgba(6,41,52,.70), rgba(4,25,33,.58));
  border:1px solid rgba(217,178,97,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.scatter-chip{
  border-radius:12px;
  padding:8px 10px;
  margin-bottom:10px;
  background:linear-gradient(180deg, rgba(9,56,68,.50), rgba(5,29,39,.30));
  border:1px solid rgba(217,178,97,.10);
}
.payline-row{
  border-radius:10px;
  padding:7px 8px;
  margin-top:6px;
  background:linear-gradient(180deg, rgba(9,55,67,.32), rgba(5,29,39,.18));
  border:1px solid rgba(255,255,255,.03);
}
.panel-crest,
.panel-crest-right{
  width:88px;
  height:88px;
  margin:14px auto 0;
  opacity:.82;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.28)) drop-shadow(0 0 10px rgba(83,220,210,.08));
}
.panel-crest{
  background:url('assets/symbols/pearl.webp') center/contain no-repeat;
}
.panel-crest-right{
  background:url('assets/ui/compass-ornament.png') center/contain no-repeat;
  opacity:.34;
}
.legend{
  gap:8px;
}
.legend h2{
  font-size:24px;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:8px 10px;
  border-radius:12px;
  color:#edf7f5;
  background:linear-gradient(180deg, rgba(8,49,62,.52), rgba(4,27,35,.30));
  border:1px solid rgba(217,178,97,.08);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.legend-item:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(11,60,74,.62), rgba(4,29,39,.36));
  border-color:rgba(217,178,97,.18);
}
.legend-item img{
  width:43px;
  height:43px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(35,208,242,.16));
}
.legend-item span{
  font-size:16px;
  line-height:1.15;
}

@media (max-width:1280px){
  .hero{
    padding:16px 18px 18px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.04), transparent 18%, transparent 82%, rgba(255,255,255,.025)),
      url('assets/ui/ahti-ghost.png') center -14px / 250px auto no-repeat,
      linear-gradient(180deg, rgba(8,46,58,.96), rgba(3,21,28,.985));
  }
  .hero-ahti{width:220px;height:210px;opacity:.24}
  .stage{grid-template-columns:232px minmax(0,1fr) 228px;gap:12px}
  .power-panel h2{font-size:25px}
  .legend h2{font-size:22px}
}
@media (max-width:960px){
  .hero{
    background:
      linear-gradient(90deg, rgba(255,255,255,.04), transparent 18%, transparent 82%, rgba(255,255,255,.025)),
      linear-gradient(180deg, rgba(8,46,58,.96), rgba(3,21,28,.985));
  }
  .hero::before{width:190px;height:42px;top:-2px}
  .hero-copy::after{width:180px}
  .hero-ahti{display:none}
  .stage{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero{min-height:0;padding:14px 14px 12px;border-radius:18px 18px 10px 10px;gap:12px}
  .hero h1{font-size:clamp(34px,10vw,48px)}
  .hero p{font-size:13px}
  .power-panel,.legend{border-radius:18px;padding:16px 14px 18px}
  .power-panel::after,.legend::after{width:60px;height:34px;opacity:.28}
  .power-panel h2,.legend h2{font-size:22px}
  .legend-item{min-height:52px;padding:7px 9px}
}


/* ============================================================
   v0.8.2 free-spin feature + element polish pass
   ============================================================ */
.hero{
  min-height:132px;
  padding:18px 24px 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 15%, transparent 85%, rgba(255,255,255,.03)),
    radial-gradient(circle at 60% 18%, rgba(75,222,211,.18), transparent 22%),
    url('assets/ui/ahti-ghost.png') 58% -18px / 330px auto no-repeat,
    linear-gradient(180deg, rgba(9,48,60,.97), rgba(3,21,28,.99));
  border-color:rgba(217,180,98,.62);
  box-shadow:0 22px 58px rgba(0,0,0,.56), inset 0 0 0 1px rgba(90,224,214,.08), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(217,180,98,.10);
}
.hero::before{opacity:.5}
.hero::after{left:16px;right:16px;top:12px;bottom:12px;border-radius:20px 20px 9px 9px}
.hero-copy h1{font-size:clamp(46px,4.2vw,70px);letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 24px rgba(73,223,211,.10)}
.hero-copy p{font-size:15px;color:#d9e8e4}
.kalevala-mark{width:62px;height:62px;box-shadow:0 0 0 4px rgba(5,25,32,.88),0 0 0 5px rgba(101,223,216,.14),0 12px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.18)}
.sound-toggle,.demo-badge{border-color:rgba(230,193,104,.58);background:linear-gradient(180deg, rgba(16,82,95,.98), rgba(8,44,58,.98));color:#fff1ca}
.sound-toggle{min-height:44px;padding:9px 16px;border-radius:13px}
.demo-badge{min-width:74px;border-radius:999px;font-weight:900;letter-spacing:.1em}

.power-panel,.legend{
  border-radius:24px;
  padding:20px 18px 22px;
  border-color:rgba(217,180,98,.52);
  background:
    radial-gradient(circle at 50% 0%, rgba(79,226,214,.12), transparent 26%),
    linear-gradient(180deg, rgba(10,49,60,.96), rgba(3,21,28,.99));
}
.power-panel::before,.legend::before{border-color:rgba(218,183,99,.18)}
.power-panel::after,.legend::after{top:5px;bottom:auto;width:82px;height:48px;opacity:.42}
.power-panel h2,.legend h2{font-size:27px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid rgba(219,182,98,.18);color:#f5dfab}
.legend h2{font-size:25px}
.power-panel p{font-size:16px;line-height:1.56;color:#d7e5e2}
.ahti-orb::before{box-shadow:inset 0 0 0 1px rgba(77,207,198,.05),0 0 22px rgba(75,222,211,.09)}
.scatter-mini-paytable{background:linear-gradient(180deg, rgba(6,41,52,.72), rgba(4,25,33,.60)); border-color:rgba(217,178,97,.16)}
.scatter-chip,.payline-row,.legend-item{background:linear-gradient(180deg, rgba(9,56,68,.52), rgba(5,29,39,.28)); border-color:rgba(217,178,97,.08)}
.legend-item{min-height:58px;padding:8px 10px;transition:transform .15s ease, background .15s ease, border-color .15s ease}
.legend-item:hover{transform:translateY(-1px);background:linear-gradient(180deg, rgba(11,60,74,.62), rgba(4,29,39,.36));border-color:rgba(217,178,97,.18)}
.legend-item img{width:43px;height:43px;filter:drop-shadow(0 0 10px rgba(35,208,242,.16))}
.legend-item span{font-size:16px}
.panel-crest,.panel-crest-right{width:88px;height:88px;margin:14px auto 0;opacity:.78;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28)) drop-shadow(0 0 10px rgba(83,220,210,.08))}

.machine.bonus-active{box-shadow:0 24px 56px rgba(0,0,0,.54), inset 0 0 0 1px rgba(217,178,97,.16), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(70,188,183,.12), 0 0 35px rgba(74,230,217,.10)}
.mahti-meter{top:14px;right:14px;padding:10px 15px;background:rgba(6,27,35,.84);border-color:rgba(217,178,97,.34)}
.mahti-track{min-width:138px;background:rgba(255,255,255,.06)}
.mahti-track i{background:linear-gradient(90deg,#2cc4b1,#7df4ea)}
.feature-banner{font-size:clamp(34px,6vw,82px);letter-spacing:.04em}
.wave-overlay::before{filter:drop-shadow(0 0 20px rgba(78,250,220,.22))}
.scatter-anticipation,.free-spin-intro,.bonus-screen{background:radial-gradient(circle at 50% 50%, rgba(2,17,24,.34), rgba(1,7,10,.76))}
.free-spin-intro{display:flex;flex-direction:column;gap:9px}
.free-spin-intro img{width:min(24vw,146px);filter:drop-shadow(0 0 22px rgba(217,178,97,.28));animation:float 2.2s ease-in-out infinite}
.free-spin-intro span{display:block;text-align:center;font-family:Georgia,serif;font-size:clamp(34px,4.4vw,62px);color:#fff3c8;text-shadow:0 0 22px rgba(217,178,97,.38);margin-top:12px}
.free-spin-intro em{font-style:normal;font-weight:700;letter-spacing:.08em;color:#98f0e4;text-transform:uppercase;text-shadow:0 0 16px rgba(73,223,211,.32)}
.free-spin-intro strong{font-size:clamp(40px,6vw,84px);color:var(--ice);text-shadow:0 0 26px rgba(124,246,235,.40), 0 2px 0 rgba(0,0,0,.35)}
.bonus-screen-card{width:min(600px,92%);padding:30px 28px;border-radius:26px;background:linear-gradient(180deg, rgba(7,37,49,.97), rgba(7,24,31,.97));border-color:rgba(217,178,97,.48);box-shadow:0 20px 54px rgba(0,0,0,.50),0 0 36px rgba(35,208,242,.14);}
.bonus-screen small{color:#9fe8dc;letter-spacing:.17em;margin-bottom:10px}
.bonus-screen h2{font-size:clamp(32px,4.4vw,56px);color:#fff0c2}
.bonus-screen p{max-width:460px;color:#d6e8e4;line-height:1.55}
.bonus-summary{gap:16px;margin-bottom:18px}
.bonus-summary div{padding:12px 14px;border-radius:16px;background:linear-gradient(180deg, rgba(8,49,60,.62), rgba(4,27,35,.42));border:1px solid rgba(217,178,97,.12)}
.bonus-summary strong{font-size:24px;color:#fff2ca}
.bonus-continue{min-width:150px;height:48px;border-radius:14px;font-weight:800;letter-spacing:.06em}

@media (max-width:1280px){
  .hero{background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 15%, transparent 85%, rgba(255,255,255,.03)),
    radial-gradient(circle at 60% 18%, rgba(75,222,211,.16), transparent 22%),
    url('assets/ui/ahti-ghost.png') 60% -6px / 270px auto no-repeat,
    linear-gradient(180deg, rgba(9,48,60,.97), rgba(3,21,28,.99));}
}
@media (max-width:960px){
  .hero{background:linear-gradient(180deg, rgba(9,48,60,.97), rgba(3,21,28,.99));}
}


/* ============================================================
   v0.8.2.2 reel clarity pass
   ============================================================ */
.machine-bottom-crest{
  display:none !important;
}

.reels{
  background:
    radial-gradient(circle at 50% 0%, rgba(108,251,240,.06), transparent 26%),
    linear-gradient(180deg, rgba(2,16,23,.58), rgba(2,22,29,.46)) !important;
}

.symbol{
  background:transparent !important;
  border:1px solid rgba(220,184,99,.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 -16px 28px rgba(0,0,0,.10),
    0 8px 14px rgba(0,0,0,.08) !important;
}
.symbol::before{
  background:none !important;
}
.symbol:hover{
  background:rgba(7,43,55,.10) !important;
  border-color:rgba(242,213,131,.52) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 10px 18px rgba(0,0,0,.12),
    0 0 0 1px rgba(242,213,131,.10) !important;
}
.symbol-art{
  padding:4px 4px 0 !important;
}
.symbol-art img{
  width:98% !important;
  height:98% !important;
  max-width:98% !important;
  max-height:98% !important;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.38)) !important;
}
.symbol .name{
  padding:4px 4px 7px !important;
  font-size:11px !important;
  letter-spacing:.04em !important;
  background:none !important;
  text-shadow:0 1px 2px rgba(0,0,0,.88);
}

.symbol.spinning .symbol-art img{
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.38)) !important;
}
.symbol.win-cell,
.symbol.win{
  background:rgba(112,235,224,.08) !important;
  border-color:rgba(245,214,128,.78) !important;
  box-shadow:
    0 0 0 1px rgba(217,178,97,.26),
    inset 0 0 34px rgba(124,246,235,.12),
    0 0 24px rgba(217,178,97,.12) !important;
}

@media (min-width:761px){
  .reels{
    gap:10px !important;
    padding:10px !important;
  }
  .symbol-art{
    height:80% !important;
  }
}


/* ============================================================
   v0.8.3 mobile landscape layout + portrait rotation prompt
   ============================================================ */
.rotate-prompt{
  display:none;
}

/* Phone portrait: block gameplay and ask for landscape orientation. */
@media (max-width:900px) and (orientation:portrait){
  html,body{overflow:hidden !important;}
  .rotate-prompt{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:28px;
    text-align:center;
    color:#f7ecd0;
    background:
      radial-gradient(circle at 50% 38%, rgba(43,188,185,.18), transparent 30%),
      linear-gradient(rgba(1,10,15,.76),rgba(1,9,13,.92)),
      url('assets/backgrounds/main-bg.png') center/cover no-repeat;
  }
  .rotate-phone{
    position:relative;
    width:72px;
    height:118px;
    border:3px solid rgba(230,195,111,.92);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(8,55,68,.92),rgba(3,25,34,.96));
    box-shadow:0 0 0 5px rgba(7,28,35,.72),0 0 32px rgba(67,221,211,.16),inset 0 1px 0 rgba(255,255,255,.08);
    animation:phoneTurn 2.2s ease-in-out infinite;
  }
  .rotate-phone::before{
    content:"";
    position:absolute;
    left:50%;top:7px;
    width:24px;height:3px;
    transform:translateX(-50%);
    border-radius:4px;
    background:rgba(238,215,157,.65);
  }
  .rotate-phone::after{
    content:"";
    position:absolute;
    left:50%;bottom:7px;
    width:9px;height:9px;
    transform:translateX(-50%);
    border:1px solid rgba(238,215,157,.58);
    border-radius:50%;
  }
  .rotate-phone span{
    position:absolute;
    inset:18px 7px 19px;
    border-radius:8px;
    background:
      radial-gradient(circle at 50% 35%,rgba(78,232,220,.18),transparent 34%),
      linear-gradient(180deg,rgba(8,51,62,.86),rgba(2,22,29,.92));
    border:1px solid rgba(216,179,96,.22);
  }
  .rotate-copy{max-width:360px;}
  .rotate-copy strong{
    display:block;
    margin-bottom:8px;
    font-family:Georgia,serif;
    font-size:clamp(27px,7vw,38px);
    color:#f6dfaa;
    text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 18px rgba(66,219,208,.14);
  }
  .rotate-copy span{
    display:block;
    color:#cfe1de;
    font-size:15px;
    line-height:1.45;
  }
}

@keyframes phoneTurn{
  0%,24%{transform:rotate(0deg)}
  48%,78%{transform:rotate(90deg)}
  100%{transform:rotate(0deg)}
}

/* Compact real UI for phones in landscape. */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
  html,body{
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  body{
    background-attachment:scroll;
    background-position:center;
  }
  body::before,body::after{opacity:.52;}
  .rotate-prompt{display:none !important;}

  .game-shell{
    width:100vw;
    max-width:none;
    height:100vh;
    height:100dvh;
    min-height:0;
    margin:0;
    padding:max(3px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    display:grid;
    grid-template-rows:46px minmax(0,1fr) 64px 27px;
    gap:3px;
    overflow:hidden;
  }
  .ambient{display:none !important;}

  .hero{
    min-height:0 !important;
    height:46px;
    margin:0;
    padding:4px 8px;
    border-radius:10px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto auto;
    gap:7px;
    align-items:center;
    overflow:hidden;
    background:
      radial-gradient(circle at 58% 30%,rgba(75,222,211,.12),transparent 24%),
      url('assets/ui/ahti-ghost.png') 62% 22% / 108px auto no-repeat,
      linear-gradient(180deg,rgba(9,48,60,.96),rgba(3,21,28,.99));
  }
  .hero::before{display:none;}
  .hero::after{inset:3px;border-radius:8px;}
  .kalevala-mark{
    width:32px;height:32px;
    font-size:17px;
    border-width:1px;
    box-shadow:0 0 0 2px rgba(5,25,32,.82),inset 0 1px 0 rgba(255,255,255,.12);
  }
  .hero-copy{padding:0;min-width:0;}
  .hero-copy::after{display:none;}
  .hero-copy h1{
    margin:0;
    font-size:22px !important;
    line-height:1;
    white-space:nowrap;
  }
  .hero-copy p{display:none;}
  .hero-ahti{display:none !important;}
  .sound-toggle{
    min-height:34px;
    height:34px;
    margin:0;
    padding:0 9px;
    border-radius:9px;
    font-size:10px;
    white-space:nowrap;
  }
  .demo-badge{
    min-width:50px;
    min-height:31px;
    height:31px;
    margin:0;
    padding:0 8px;
    font-size:9px;
  }

  .stage{
    min-height:0;
    height:100%;
    margin:0;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:0;
    overflow:hidden;
  }
  .power-panel,.legend{display:none !important;}
  .machine{
    min-height:0 !important;
    height:100%;
    margin:0;
    padding:4px 8px 2px;
    border-radius:10px;
    outline-offset:-4px;
    overflow:hidden;
  }
  .machine::after{inset:4px;border-radius:8px;}
  .machine-crest{display:none !important;}
  .machine-bg-main,.machine-bg-bonus{opacity:.30;}
  .machine-particles,.machine-caustics{opacity:.10;}
  .reels-wrap{
    height:calc(100% - 17px);
    min-height:0;
    margin:0;
    padding:0 4px;
  }
  .machine .reels-wrap::before,.machine .reels-wrap::after{display:none !important;}
  .reels{
    height:100%;
    min-height:0;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
    gap:3px !important;
    padding:3px !important;
    border-width:2px;
    border-radius:8px;
    box-shadow:inset 0 0 0 1px rgba(243,216,142,.22),inset 0 0 24px rgba(0,0,0,.42),0 0 0 3px rgba(3,20,26,.60),0 0 0 4px rgba(206,168,83,.18) !important;
  }
  .symbol{
    min-height:0 !important;
    border-radius:7px !important;
  }
  .symbol-art{
    height:calc(100% - 12px) !important;
    min-height:0;
    padding:0 !important;
  }
  .symbol-art img{
    width:96% !important;
    height:96% !important;
    max-width:96% !important;
    max-height:96% !important;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)) !important;
  }
  .symbol .name{
    height:12px;
    min-height:12px;
    padding:0 1px 1px !important;
    font-size:7px !important;
    line-height:11px;
    letter-spacing:.02em !important;
    overflow:hidden;
  }
  .message{
    width:100%;
    min-height:16px;
    height:16px;
    margin:0;
    padding:0 5px;
    border-top:0;
    font-size:8px;
    line-height:16px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mahti-meter{
    top:5px;right:6px;left:auto;
    gap:4px;
    padding:3px 6px;
    border-radius:8px;
    font-size:8px;
  }
  .mahti-meter span,.mahti-meter b{font-size:8px;}
  .mahti-track{width:70px;min-width:70px;height:7px;}
  .feature-banner{font-size:clamp(25px,6vw,45px);}
  .scatter-anticipation span,.free-spin-intro span{font-size:clamp(22px,5vw,38px);}
  .free-spin-intro img,.scatter-anticipation img{width:min(14vw,78px);}
  .free-spin-intro em{font-size:9px;}
  .free-spin-intro strong{font-size:clamp(30px,7vw,48px);}
  .bonus-screen-card{
    width:min(500px,90%);
    max-height:92%;
    padding:12px 16px;
    border-radius:14px;
    overflow:auto;
  }
  .bonus-screen h2{font-size:27px;margin:2px 0 4px;}
  .bonus-screen p{font-size:11px;line-height:1.3;margin-bottom:8px;}
  .bonus-summary{gap:8px;margin-bottom:8px;}
  .bonus-summary div{padding:7px 9px;border-radius:9px;}
  .bonus-summary span{font-size:8px;}
  .bonus-summary strong{font-size:17px;}
  .bonus-continue{height:38px;min-width:120px;font-size:11px;}

  .controls{
    min-height:0;
    height:64px;
    margin:0;
    padding:3px;
    display:grid !important;
    grid-template-columns:1.05fr 1.35fr .95fr .95fr 1.35fr 1.55fr !important;
    gap:3px !important;
    border-radius:9px;
    align-items:stretch;
  }
  .controls > .stat,.controls > .bet-control,.controls > .auto-control{
    min-width:0;
    min-height:0 !important;
    height:58px;
    padding:3px 4px !important;
    border-radius:7px;
  }
  .controls .stat{justify-content:center;align-items:center;text-align:center;}
  .controls .stat label,.auto-control>label{
    font-size:6.5px !important;
    line-height:1;
    letter-spacing:.08em !important;
    white-space:nowrap;
  }
  .controls .stat strong{
    font-size:12px !important;
    line-height:1.1;
    white-space:nowrap;
  }
  .bet-control{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 34px !important;
    gap:2px !important;
    align-items:center;
  }
  .bet-control button{
    width:34px !important;
    min-width:34px;
    height:44px !important;
    padding:0;
    font-size:20px !important;
    border-radius:8px;
  }
  .bet-control .stat{min-width:0;width:100%;}
  .auto-control{min-width:0 !important;justify-content:center;}
  .auto-row{width:100%;gap:3px;justify-content:center;}
  .auto-row select{
    min-width:48px;
    width:48px;
    height:44px !important;
    padding:0 4px;
    font-size:11px;
    border-radius:8px;
  }
  .auto-spin{
    min-width:0;
    flex:1;
    height:44px !important;
    padding:0 5px !important;
    font-size:9px;
    border-radius:8px;
  }
  .spin{
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:58px;
    padding:0 10px !important;
    border-radius:14px;
    font-size:18px !important;
    background:
      radial-gradient(circle at 50% 10%,rgba(178,255,247,.25),transparent 38%),
      linear-gradient(180deg,#2bb4ab,#17867f 54%,#0e5a57) !important;
  }

  footer{
    min-height:0;
    height:27px;
    margin:0;
    padding:2px 4px;
    gap:4px;
    border-radius:7px;
    overflow:hidden;
  }
  footer::after{display:none !important;}
  .text-btn{
    height:23px;
    min-height:23px;
    padding:0 7px;
    border-radius:6px;
    font-size:7.5px;
    white-space:nowrap;
  }
  footer span{display:none;}

  .rules-dialog{
    width:94vw;
    max-height:88vh;
    max-height:88dvh;
    padding:12px 14px;
    overflow:auto;
  }
  .rules-dialog h2{font-size:18px;margin:5px 0 7px;}
  .rules-dialog .small{font-size:10px;line-height:1.3;}
  .rules-row{padding:5px 8px;font-size:9px;}
  .rules-close{height:34px;font-size:10px;}

  .loading-card{
    width:min(430px,76vw);
    padding:12px 18px;
    border-radius:16px;
  }
  .loading-icon{width:58px;height:58px;}
  .loading-card h1{margin:2px 0 3px;font-size:30px;}
  .loading-card p{margin:0 0 8px;font-size:10px;}
  .loading-bar{height:9px;}
  .loading-start{margin-top:8px;min-width:120px;padding:7px 10px;font-size:10px;}
}

@media (prefers-reduced-motion:reduce){
  .rotate-phone{animation:none !important;transform:rotate(90deg);}
}


/* ============================================================
   v0.8.3.1 phone landscape hard-fit layout
   ============================================================ */
@media (orientation:landscape) and (max-width:1200px) and (max-height:720px){
  html,body{
    width:100%;
    height:var(--mobile-app-height,100dvh);
    min-height:0 !important;
    margin:0;
    overflow:hidden !important;
    overscroll-behavior:none;
  }
  body{
    background-attachment:scroll !important;
    background-position:center !important;
  }
  body::before,body::after{opacity:.30 !important;}
  .rotate-prompt{display:none !important;}

  .game-shell{
    width:100% !important;
    max-width:none !important;
    height:var(--mobile-app-height,100dvh) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:3px max(4px,env(safe-area-inset-right)) 3px max(4px,env(safe-area-inset-left)) !important;
    display:grid !important;
    grid-template-rows:32px minmax(0,1fr) 50px 19px !important;
    gap:2px !important;
    overflow:hidden !important;
  }
  .ambient{display:none !important;}

  /* extremely compact header */
  .hero{
    height:32px !important;
    min-height:32px !important;
    margin:0 !important;
    padding:2px 6px !important;
    display:grid !important;
    grid-template-columns:25px minmax(0,1fr) auto !important;
    gap:5px !important;
    align-items:center !important;
    border-radius:7px !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,rgba(8,48,60,.96),rgba(3,21,28,.99)) !important;
  }
  .hero::before,.hero::after,.hero-ahti{display:none !important;}
  .kalevala-mark{
    width:23px !important;height:23px !important;
    font-size:12px !important;
    border-width:1px !important;
    box-shadow:none !important;
  }
  .hero-copy{min-width:0 !important;padding:0 !important;}
  .hero-copy::after,.hero-copy p{display:none !important;}
  .hero-copy h1{
    margin:0 !important;
    font-size:17px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .sound-toggle{
    height:25px !important;min-height:25px !important;
    margin:0 !important;
    padding:0 7px !important;
    border-radius:7px !important;
    font-size:8px !important;
    white-space:nowrap !important;
  }
  .demo-badge{display:none !important;}

  /* gameplay occupies almost whole screen */
  .stage{
    min-height:0 !important;
    height:100% !important;
    margin:0 !important;
    display:block !important;
    overflow:hidden !important;
  }
  .power-panel,.legend{display:none !important;}
  .machine{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:2px 4px 14px !important;
    border-radius:7px !important;
    outline:none !important;
    overflow:hidden !important;
  }
  .machine::before,.machine::after,.machine-crest,.machine-bottom-crest{display:none !important;}
  .machine-bg-main,.machine-bg-bonus{opacity:.20 !important;}
  .machine-particles,.machine-caustics{display:none !important;}
  .reels-wrap{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  .machine .reels-wrap::before,.machine .reels-wrap::after{display:none !important;}
  .reels{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:2px !important;
    gap:2px !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
    border-width:1px !important;
    border-radius:5px !important;
    box-shadow:inset 0 0 14px rgba(0,0,0,.28) !important;
    background:rgba(2,20,27,.26) !important;
  }
  .symbol{
    min-width:0 !important;
    min-height:0 !important;
    border-radius:5px !important;
    border-color:rgba(218,183,99,.24) !important;
    background:rgba(4,37,47,.12) !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }
  .symbol-art{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:0 !important;
    flex:1 1 auto !important;
  }
  .symbol-art img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.34)) !important;
  }
  .symbol .name{display:none !important;}
  .symbol.spinning .symbol-art img{filter:drop-shadow(0 2px 3px rgba(0,0,0,.34)) !important;}

  .message{
    position:absolute !important;
    left:4px !important;right:4px !important;bottom:0 !important;
    width:auto !important;
    height:13px !important;
    min-height:13px !important;
    margin:0 !important;
    padding:0 5px !important;
    line-height:13px !important;
    font-size:7px !important;
    border:0 !important;
    border-radius:0 !important;
    background:rgba(2,15,21,.70) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .mahti-meter{
    top:3px !important;right:4px !important;left:auto !important;
    gap:3px !important;
    padding:2px 4px !important;
    border-radius:6px !important;
  }
  .mahti-meter span,.mahti-meter b{font-size:6px !important;}
  .mahti-track{width:58px !important;min-width:58px !important;height:5px !important;}

  .feature-banner{font-size:clamp(20px,5vw,34px) !important;}
  .scatter-anticipation img,.free-spin-intro img{width:min(12vw,56px) !important;}
  .scatter-anticipation span,.free-spin-intro span{font-size:clamp(18px,4vw,30px) !important;margin-top:4px !important;}
  .free-spin-intro{gap:3px !important;}
  .free-spin-intro em{font-size:7px !important;}
  .free-spin-intro strong{font-size:clamp(24px,6vw,38px) !important;}
  .bonus-screen-card{
    width:min(430px,88%) !important;
    max-height:94% !important;
    padding:8px 12px !important;
    border-radius:11px !important;
    overflow:auto !important;
  }
  .bonus-screen small{font-size:7px !important;margin-bottom:2px !important;}
  .bonus-screen h2{font-size:21px !important;margin:0 0 2px !important;}
  .bonus-screen p{font-size:9px !important;line-height:1.2 !important;margin:0 0 5px !important;}
  .bonus-summary{gap:5px !important;margin-bottom:5px !important;}
  .bonus-summary div{padding:4px 6px !important;border-radius:7px !important;}
  .bonus-summary span{font-size:6px !important;margin-bottom:1px !important;}
  .bonus-summary strong{font-size:14px !important;}
  .bonus-continue{height:30px !important;min-width:100px !important;padding:0 10px !important;font-size:9px !important;}

  /* one compact touch-friendly control strip */
  .controls{
    width:100% !important;
    height:50px !important;
    min-height:50px !important;
    margin:0 !important;
    padding:2px !important;
    display:grid !important;
    grid-template-columns:1.05fr 1.35fr .95fr .92fr 1.32fr 1.45fr !important;
    gap:2px !important;
    align-items:stretch !important;
    border-radius:7px !important;
  }
  .controls > .stat,.controls > .bet-control,.controls > .auto-control{
    width:100% !important;
    height:46px !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:2px !important;
    border-radius:5px !important;
    overflow:hidden !important;
  }
  .controls .stat{display:flex !important;align-items:center !important;justify-content:center !important;gap:1px !important;text-align:center !important;}
  .controls .stat label,.auto-control>label{
    font-size:5.5px !important;
    line-height:1 !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
  }
  .controls .stat strong{
    max-width:100% !important;
    font-size:10.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
  }
  .bet-control{
    display:grid !important;
    grid-template-columns:29px minmax(0,1fr) 29px !important;
    gap:1px !important;
    align-items:center !important;
  }
  .bet-control button{
    width:29px !important;min-width:29px !important;
    height:38px !important;min-height:38px !important;
    padding:0 !important;
    border-radius:6px !important;
    font-size:17px !important;
  }
  .bet-control .stat{height:auto !important;padding:0 !important;}
  .auto-control{display:flex !important;justify-content:center !important;gap:1px !important;}
  .auto-row{width:100% !important;display:grid !important;grid-template-columns:40px minmax(0,1fr) !important;gap:2px !important;}
  .auto-row select{
    width:40px !important;min-width:40px !important;height:38px !important;
    padding:0 2px !important;font-size:9px !important;border-radius:6px !important;
  }
  .auto-spin{
    width:100% !important;min-width:0 !important;height:38px !important;
    padding:0 3px !important;font-size:7px !important;border-radius:6px !important;
    white-space:nowrap !important;overflow:hidden !important;
  }
  .spin{
    width:100% !important;
    height:46px !important;
    min-width:0 !important;min-height:0 !important;
    padding:0 5px !important;
    border-radius:9px !important;
    font-size:15px !important;
    line-height:1 !important;
    background:radial-gradient(circle at 50% 10%,rgba(178,255,247,.22),transparent 38%),linear-gradient(180deg,#2bb4ab,#17867f 54%,#0e5a57) !important;
    box-shadow:0 0 0 2px rgba(64,54,21,.82),inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  .spin::before,.spin::after{display:none !important;}

  footer{
    width:100% !important;
    height:19px !important;
    min-height:19px !important;
    margin:0 !important;
    padding:1px 2px !important;
    gap:2px !important;
    border-radius:5px !important;
    overflow:hidden !important;
  }
  footer::after,footer span{display:none !important;}
  .text-btn{
    height:17px !important;min-height:17px !important;
    padding:0 5px !important;
    border-radius:4px !important;
    font-size:6px !important;
    line-height:15px !important;
    white-space:nowrap !important;
  }

  .rules-dialog{
    width:96vw !important;
    max-height:92vh !important;
    max-height:92dvh !important;
    padding:7px 10px !important;
  }
  .rules-dialog h2{font-size:14px !important;margin:3px 0 4px !important;}
  .rules-dialog .small{font-size:8px !important;line-height:1.15 !important;}
  .rules-row{padding:3px 5px !important;font-size:7px !important;}
  .rules-close{height:26px !important;font-size:8px !important;}

  .loading-card{
    width:min(380px,72vw) !important;
    padding:8px 12px !important;
    border-radius:11px !important;
  }
  .loading-icon{width:42px !important;height:42px !important;}
  .loading-card h1{margin:1px 0 2px !important;font-size:24px !important;}
  .loading-card p{margin:0 0 5px !important;font-size:8px !important;}
  .loading-bar{height:6px !important;}
}

/* Portrait prompt should cover all common phones, including large devices. */
@media (orientation:portrait) and (max-width:1200px){
  .rotate-prompt{display:flex !important;}
}