: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:
    radial-gradient(circle at 18% 0%,rgba(35,208,242,.2),transparent 19%),
    radial-gradient(circle at 80% 3%,rgba(124,246,235,.15),transparent 20%),
    linear-gradient(180deg,#0b2b38 0%,#07171d 46%,#02080b 100%);
  overflow-x:hidden;transition:background .6s ease;
}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{background:linear-gradient(118deg,transparent 0 37%,rgba(73,255,224,.045) 50%,transparent 63%);mix-blend-mode:screen}
body::after{background:radial-gradient(circle at 50% 100%,rgba(25,139,150,.12),transparent 30%)}
body.free-spin-mode{
  background:
    radial-gradient(circle at 50% 0%,rgba(78,250,220,.24),transparent 24%),
    radial-gradient(circle at 12% 8%,rgba(47,164,255,.18),transparent 20%),
    linear-gradient(180deg,#103847 0%,#0a2028 48%,#02090d 100%);
}
button,select{font:inherit}.game-shell{position:relative;z-index:1;width:min(1540px,100%);margin:auto;padding:18px}
.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{display:flex;align-items:center;gap:16px;padding:15px 20px;border-radius:22px 22px 10px 10px;background:linear-gradient(180deg,rgba(12,47,60,.96),rgba(4,18,24,.96));backdrop-filter:blur(6px)}
.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)}
.demo-badge{margin-left:auto;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,.96),rgba(3,14,18,.96));backdrop-filter:blur(6px)}
.power-panel,.legend{border-radius:18px;padding:18px}.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}.small{font-size:13px;color:#c1d8d3;line-height:1.5}
.ahti-orb{display:grid;place-items:center;min-height:162px;margin:8px 0}.ahti-orb img{width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(87,245,225,.28));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:#dcebe7;font-weight:800}.scatter-chip img{width:46px;height:46px;object-fit:contain}.payline-row{display:flex;justify-content:space-between;padding:4px 0;color:#dcebe7;font-size:13px}.payline-row strong{color:#f0d59b}
.legend{display:flex;flex-direction:column;gap:5px}.legend-item{display:flex;gap:10px;align-items:center;padding:5px 0;color:#dcebe7}.legend-item img{width:43px;height:43px;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:648px}
.machine::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,rgba(91,255,225,.12),transparent 35%),linear-gradient(180deg,rgba(91,255,225,.03),transparent 26%);pointer-events:none}
.reels{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,minmax(110px,1fr));gap:9px;min-height:500px;padding:14px;background:linear-gradient(180deg,rgba(2,13,19,.92),rgba(3,17,23,.9));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)}
.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,.14),transparent 27%),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,.05),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,.27) 50%,transparent 62%)}
.symbol-art{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:1;width:100%;padding:6px 6px 0}.symbol-art img{width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.42));user-select:none;-webkit-user-drag:none}
.symbol .name{position:relative;z-index:1;width:100%;padding:7px 5px 9px;text-align:center;color:#e7f1ef;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));text-shadow:0 2px 4px #000}
.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 .symbol-art img{animation:spinFloat .4s ease-in-out infinite}.symbol.win-cell{transform:translateY(-2px) scale(1.015);filter:brightness(1.1);border-color:var(--gold);box-shadow:0 0 0 1px rgba(217,178,97,.3),inset 0 0 36px rgba(124,246,235,.08),0 0 28px rgba(217,178,97,.22);animation:pulseWin 1.05s ease-in-out infinite}.symbol.win-cell::after{opacity:1;animation:shine 1.6s linear infinite}
.feature-banner{position:absolute;z-index:7;top:47%;left:50%;transform:translate(-50%,-50%);font-family:Georgia,serif;font-size:clamp(34px,6vw,84px);font-weight:900;line-height:1;color:white;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}.hidden{display:none!important}
.wave-overlay,.scatter-anticipation,.free-spin-intro,.big-win-banner{position:absolute;inset:0;z-index:6;pointer-events:none}.wave-overlay{overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(124,246,235,.16),transparent 28%),linear-gradient(180deg,rgba(8,60,79,.12),rgba(124,246,235,.04))}.wave-overlay::before,.wave-overlay::after{content:"";position:absolute;left:-12%;right:-12%;height:46%;border-radius:45% 55% 52% 48%/48% 46% 54% 52%;background:linear-gradient(180deg,rgba(177,255,248,.88),rgba(26,177,219,.3));filter:blur(11px)}.wave-overlay::before{top:-12%;animation:waveSweep 1s ease forwards}.wave-overlay::after{bottom:-30%;animation:waveSweep2 1s ease forwards}
.scatter-anticipation,.free-spin-intro,.big-win-banner{display:grid;place-items:center;background:rgba(0,14,20,.52);backdrop-filter:blur(2px)}
.scatter-anticipation img,.free-spin-intro img{width:min(240px,34vw);height:auto;filter:drop-shadow(0 0 30px rgba(99,242,236,.45));animation:scatterPulse .85s ease-in-out infinite}.scatter-anticipation span{position:absolute;bottom:18%;font-family:Georgia,serif;color:var(--gold2);font-size:clamp(22px,3.2vw,48px);font-weight:900;letter-spacing:.1em;text-shadow:0 0 20px rgba(0,0,0,.8)}
.free-spin-intro{grid-template-rows:1fr auto auto 1fr;gap:5px;background:radial-gradient(circle at 50% 48%,rgba(29,145,174,.55),rgba(0,10,16,.76) 62%)}.free-spin-intro img{grid-row:1 / 3;align-self:end;width:min(260px,38vw)}.free-spin-intro span{grid-row:3;font-family:Georgia,serif;color:var(--gold2);font-size:clamp(28px,5vw,70px);font-weight:900;letter-spacing:.08em;text-shadow:0 0 24px rgba(124,246,235,.45)}.free-spin-intro strong{grid-row:4;align-self:start;font-size:clamp(24px,4vw,56px);color:#fff;text-shadow:0 0 22px rgba(124,246,235,.6)}
.mahti-meter{position:absolute;z-index:5;top:18px;right:18px;width:150px;padding:10px 12px;border-radius:12px;border:1px solid rgba(217,178,97,.4);background:rgba(2,16,22,.88);box-shadow:0 0 24px rgba(35,208,242,.12)}.mahti-meter>span{display:block;color:#efd28e;font-size:11px;font-weight:900;letter-spacing:.13em;margin-bottom:5px}.mahti-track{height:9px;border-radius:999px;background:#06151b;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.mahti-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1ea996,#71f2e3,#f0d27e);transition:width .5s ease}.mahti-meter b{display:block;margin-top:5px;text-align:right;color:#d8f7f2;font-size:12px}
.big-win-banner{background:radial-gradient(circle at 50% 50%,rgba(38,180,190,.24),rgba(0,9,14,.82) 65%)}.big-win-card{position:relative;z-index:2;padding:28px 40px;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:900;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:-8%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0a8,#dfb24c 45%,#8c5b13 76%);box-shadow:inset 0 0 0 2px rgba(255,238,150,.35),0 0 8px rgba(255,210,100,.2);animation:coinFall var(--dur,1.6s) linear forwards;transform:rotate(var(--rot,0deg))}
.message{text-align:center;padding:15px 8px 0;color:#bed8d2;font-weight:700;min-height:44px;position:relative;z-index:1}.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,.text-btn,.auto-spin,select,.spin{border:1px solid rgba(217,178,97,.4);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)}.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}.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-row>span:last-child{text-align:right}.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 waveSweep{0%{transform:translateY(-130%) rotate(-4deg)}100%{transform:translateY(135%) rotate(5deg)}}@keyframes waveSweep2{0%{transform:translateY(120%) rotate(5deg)}100%{transform:translateY(-105%) rotate(-6deg)}}@keyframes popIn{0%{opacity:0;transform:scale(.82)}100%{opacity:1;transform:scale(1)}}@keyframes spinFloat{0%,100%{transform:translateY(-8px);filter:blur(.4px) brightness(.9)}50%{transform:translateY(8px);filter:blur(1.2px) brightness(1.05)}}@keyframes scatterPulse{0%,100%{transform:scale(.92);filter:drop-shadow(0 0 20px rgba(99,242,236,.35))}50%{transform:scale(1.08);filter:drop-shadow(0 0 42px rgba(99,242,236,.7))}}@keyframes coinFall{0%{transform:translateY(-10vh) rotate(0)}100%{transform:translateY(115vh) rotate(720deg)}}
@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}}
@media(max-width:760px){.game-shell{padding:10px}.hero{padding:14px;border-radius:16px}.hero h1{font-size:clamp(28px,10vw,46px)}.reels{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(82px,1fr));gap:7px;min-height:0;padding:9px}.symbol .name{font-size:9px;padding:4px 3px 6px}.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}.mahti-meter{top:10px;right:10px;width:120px}.rules-row{font-size:14px}}