:root{--app-height:100dvh;--gold:#f4cf69;--gold2:#a85b0a;--jade:#0ed4a2;--jade2:#063d31;--ink:#040b08;--panel:rgba(4,14,11,.88);--cell:calc((min(92vw,54vh,508px) - 12px)/7)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020705;color:#fff;font-family:Montserrat,system-ui,sans-serif;touch-action:manipulation;user-select:none}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.game{position:relative;isolation:isolate;display:grid;grid-template-rows:82px minmax(0,1fr) max-content;width:100%;height:var(--app-height);min-height:500px;overflow:hidden;background:linear-gradient(180deg,rgba(3,10,7,.05),rgba(1,5,4,.7))}
.temple-scene{position:absolute;z-index:-3;inset:0;background-image:linear-gradient(180deg,rgba(0,5,3,.12),rgba(0,5,3,.44)),url('assets/treasure-temple-v1.webp');background-size:cover;background-position:center 60%;filter:saturate(1.08) contrast(1.03);transform:scale(1.01)}
.temple-scene:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 24%,rgba(0,6,4,.12) 55%,rgba(0,3,2,.7) 100%),linear-gradient(90deg,rgba(0,0,0,.2),transparent 32% 68%,rgba(0,0,0,.2))}
.atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.atmosphere i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffdc73;box-shadow:0 0 12px #ffc83d;opacity:.3;animation:drift 7s linear infinite}.atmosphere i:nth-child(1){left:17%;top:68%;animation-delay:-2s}.atmosphere i:nth-child(2){left:78%;top:58%;animation-delay:-5s}.atmosphere i:nth-child(3){left:52%;top:79%;animation-delay:-1s}@keyframes drift{0%{transform:translateY(20vh) scale(.5);opacity:0}35%{opacity:.55}100%{transform:translate(18px,-45vh) scale(1.4);opacity:0}}
.topbar{position:relative;z-index:5;display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:8px;width:100%;max-width:690px;min-width:0;height:82px;margin:0 auto;padding:env(safe-area-inset-top,0) 12px 0}
.topbar:before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:min(430px,78vw);height:80px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,8,5,.8),rgba(0,8,5,.28) 58%,transparent 74%);pointer-events:none}
.game-logo{display:block;min-width:0;max-width:100%;width:min(340px,70vw);height:78px;margin:auto;object-fit:contain;filter:brightness(1.16) contrast(1.06) drop-shadow(0 4px 8px #000) drop-shadow(0 0 9px rgba(246,189,43,.34))}
.icon-btn{width:42px;height:42px;border-radius:50%;background:linear-gradient(#163c31,#061812);border:1px solid rgba(242,202,103,.66);box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),0 3px 10px #0008;color:var(--gold);font:800 20px Cinzel,serif}.icon-btn:active{transform:scale(.92)}
.stage{position:relative;z-index:2;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;width:100%;padding:0 8px}
.rune-ribbon{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;width:min(96vw,568px);min-height:29px;padding:3px 12px;border:1px solid rgba(240,198,93,.55);border-bottom:0;border-radius:13px 13px 0 0;background:linear-gradient(90deg,rgba(2,17,13,.9),rgba(16,59,44,.92),rgba(2,17,13,.9));box-shadow:0 -3px 15px rgba(0,0,0,.4);color:#f9df93;text-shadow:0 1px 2px #000;font:800 9px/1 Montserrat,sans-serif;letter-spacing:.07em}
.rune-steps{display:flex;justify-content:center;gap:clamp(3px,1vw,8px)}.rune-steps b{font-size:9px;color:#8ccbb9;transition:.2s}.rune-steps b.lit{color:#fff4a8;text-shadow:0 0 8px #38ffbd,0 0 4px #fff}
#bonusMeter{justify-self:end;color:#80d8c0;font-size:8px;white-space:nowrap}.feature-mode #bonusMeter{color:#fff4a6;text-shadow:0 0 8px #ffd86c}
.board-shell{position:relative;width:min(92vw,54vh,508px);aspect-ratio:1;border:4px solid #4b2706;border-radius:12px;padding:6px;background:linear-gradient(145deg,#e4b845 0,#6e3508 17%,#c88922 45%,#3b1c05 72%,#d9aa3a);box-shadow:inset 0 0 0 2px #f5dd7e,inset 0 0 0 6px #291104,0 9px 26px #000c,0 0 24px rgba(7,208,154,.15)}
.board-shell:before{content:"";position:absolute;z-index:0;inset:6px;border-radius:5px;background:radial-gradient(circle at 50% 45%,rgba(15,78,58,.86),rgba(1,15,11,.98) 74%),repeating-linear-gradient(45deg,transparent 0 12px,rgba(62,255,195,.03) 12px 13px)}
.corner{position:absolute;z-index:4;width:24px;height:24px;border:3px solid #f5cf64;background:#0b4e3c;transform:rotate(45deg);box-shadow:0 0 0 3px #552b07,0 0 12px #000}.corner:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#55ffd0;box-shadow:0 0 9px #23e3b0}.corner.tl{left:-10px;top:-10px}.corner.tr{right:-10px;top:-10px}.corner.bl{left:-10px;bottom:-10px}.corner.br{right:-10px;bottom:-10px}
.treasure-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px;width:100%;height:100%;padding:1px;overflow:hidden;border-radius:5px}
.tile{--mult:0;position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:visible;border-radius:8px;background:linear-gradient(145deg,rgba(37,83,65,.92),rgba(4,21,16,.96));border:1px solid rgba(245,210,115,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.13),inset 0 -5px 9px rgba(0,0,0,.35);transform:translateZ(0);will-change:transform,opacity;transition:filter .18s,box-shadow .18s}
.tile:before{content:"";position:absolute;inset:2px;border-radius:6px;border:1px solid rgba(72,255,198,.07);pointer-events:none}.tile.rune{background:radial-gradient(circle at 50% 46%,rgba(31,255,189,.22),rgba(2,29,22,.96) 72%);border-color:rgba(98,255,211,.7);box-shadow:inset 0 0 13px rgba(31,255,186,.32),0 0 calc(4px + var(--mult)*.035px) rgba(31,255,186,.62)}.tile.rune:before{border-color:rgba(255,229,130,.48);box-shadow:inset 0 0 8px rgba(255,218,81,.2)}
.tile.drop{animation:dropIn .58s cubic-bezier(.16,.82,.21,1.03) both;animation-delay:calc(var(--order)*18ms)}@keyframes dropIn{0%{transform:translateY(calc(-130% - var(--row)*20%)) scale(.92);opacity:0}72%{transform:translateY(5%) scale(1.04);opacity:1}100%{transform:none;opacity:1}}
.symbol{position:relative;width:87%;height:87%;filter:drop-shadow(0 3px 2px #0008);transform:translateZ(0);transition:transform .2s}.symbol svg{display:block;width:100%;height:100%;overflow:visible}.tile.portal .symbol{width:94%;height:94%;animation:portalPulse 1.35s ease-in-out infinite}@keyframes portalPulse{50%{filter:drop-shadow(0 0 8px #41ffd0);transform:scale(1.07) rotate(2deg)}}
.mult-badge{position:absolute;z-index:3;right:-2px;bottom:-2px;min-width:24px;height:18px;padding:0 3px;border-radius:9px;background:linear-gradient(#fff0a5,#c6780b);border:1px solid #fff3ad;box-shadow:0 1px 4px #000,0 0 7px #2cffb7;color:#17372b;text-align:center;font:900 clamp(8px,2vw,11px)/17px Montserrat,sans-serif;transform:scale(0);animation:badgeIn .25s cubic-bezier(.2,1.6,.4,1) forwards}@keyframes badgeIn{to{transform:scale(1)}}
.tile.winner{z-index:4;animation:winPulse .42s ease-in-out 2;filter:brightness(1.42) saturate(1.25)}.tile.winner .symbol{transform:scale(1.16)}@keyframes winPulse{50%{transform:scale(1.08);box-shadow:inset 0 0 18px #fff8b5,0 0 18px #ffda62}}
.tile.clear{animation:clearTile .3s ease-in forwards}@keyframes clearTile{to{transform:scale(.12) rotate(13deg);filter:brightness(2);opacity:0}}
.grid-flash{position:absolute;z-index:5;inset:8px;pointer-events:none;border-radius:5px;opacity:0;background:radial-gradient(circle,rgba(255,243,172,.55),transparent 67%)}.grid-flash.show{animation:flash .4s ease-out}@keyframes flash{20%{opacity:1}to{opacity:0}}
.message{display:flex;align-items:center;justify-content:center;width:min(95vw,560px);height:31px;margin-top:4px;padding:0 10px;border:1px solid rgba(225,184,74,.35);border-radius:9px;background:linear-gradient(90deg,transparent,rgba(2,14,10,.87) 14% 86%,transparent);color:#d8e6dc;text-align:center;text-shadow:0 2px 2px #000;font:800 10px/1 Montserrat,sans-serif;letter-spacing:.06em}.message strong{margin-left:8px;color:#fff1a4;font-size:15px}.message.big{color:#fff4a8;text-shadow:0 0 10px #ffc44a;animation:messagePop .25s ease-out}@keyframes messagePop{50%{transform:scale(1.06)}}
.controls{position:relative;z-index:6;align-self:end;width:100%;max-width:720px;min-width:0;margin:0 auto;padding:4px 10px max(8px,env(safe-area-inset-bottom));overflow:hidden;background:linear-gradient(180deg,rgba(2,10,8,.18),rgba(2,8,6,.93) 26%,#020705);border-top:1px solid rgba(231,189,80,.25);box-shadow:0 -8px 22px rgba(0,0,0,.3)}
.meters{display:grid;grid-template-columns:1fr 1fr 1fr;max-width:530px;margin:0 auto 3px}.meter{display:flex;flex-direction:column;align-items:center;min-width:0;padding:2px 6px;border-right:1px solid rgba(242,206,104,.15)}.meter:last-child{border:0}.meter span,.bet span{color:#83a99d;font-size:8px;font-weight:800;letter-spacing:.12em}.meter strong{max-width:100%;overflow:hidden;color:#f2e6bd;font:800 13px/1.2 Montserrat,sans-serif;text-overflow:ellipsis}.meter.win strong{color:#fff1a0}.meter.feature strong{color:#6ef1ca}.feature-mode .meter.feature strong{color:#fff08d;text-shadow:0 0 8px #ffc44c}
.actions{display:grid;grid-template-columns:minmax(57px,1fr) 46px 74px 46px minmax(57px,1fr);align-items:center;gap:7px;width:100%;max-width:500px;min-width:0;margin:auto}.bet{display:flex;flex-direction:column;align-items:center;justify-content:center;height:43px;border:1px solid rgba(225,185,78,.34);border-radius:11px;background:linear-gradient(#102a22,#06130f);box-shadow:inset 0 0 9px #000}.bet strong{color:#fff0a0;font:900 15px/1.1 Montserrat,sans-serif}.small-btn{width:46px;height:46px;border-radius:50%;background:linear-gradient(#1a5b46,#07251c);border:2px solid #c8962c;box-shadow:inset 0 0 0 3px #061b14,0 4px 7px #000b;color:#f9da74;font:800 27px/1 Montserrat}.small-btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 3px #061b14,0 1px 2px #000}
.spin{position:relative;width:74px;height:74px;margin:-13px auto 0;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff4b2 0 7%,#f1bf37 23%,#b56509 58%,#4b2404 76%);border:3px solid #ffe78b;box-shadow:inset 0 0 0 5px #794107,inset 0 0 12px #fff4a1,0 0 0 3px #10261f,0 5px 13px #000,0 0 16px rgba(255,196,53,.45)}.spin i{position:absolute;inset:14px;border:3px solid rgba(72,39,3,.72);border-right-color:transparent;border-radius:50%}.spin i:after{content:"";position:absolute;right:-5px;top:4px;border-left:7px solid #553005;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:rotate(28deg)}.spin span{position:relative;z-index:2;color:#422002;text-shadow:0 1px #fff1ad;font:900 11px/1 Montserrat}.spin:active{transform:translateY(3px) scale(.97)}.spin.running i{animation:spinIcon .7s linear infinite}@keyframes spinIcon{to{transform:rotate(360deg)}}
.auto{display:flex;flex-direction:column;align-items:center;justify-content:center;height:43px;border:1px solid rgba(225,185,78,.34);border-radius:11px;background:linear-gradient(#102a22,#06130f);color:#7fd6bd}.auto b{font-size:17px;line-height:14px}.auto span{font-size:8px;font-weight:800;letter-spacing:.08em}.auto.active{border-color:#6affd1;color:#fff2a0;box-shadow:inset 0 0 12px rgba(26,255,186,.24),0 0 8px rgba(26,255,186,.2)}
.bonus-intro,.win-celebration{position:absolute;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;visibility:hidden;opacity:0;background:radial-gradient(circle at 50% 46%,rgba(16,97,72,.52),rgba(0,5,3,.92) 62%);text-align:center}.bonus-intro.show,.win-celebration.show{visibility:visible;animation:overlayIn 3s ease both}@keyframes overlayIn{0%{opacity:0}10%,84%{opacity:1}100%{opacity:0}}.bonus-intro img{position:relative;z-index:2;width:min(46vw,280px);max-height:38vh;object-fit:contain;filter:drop-shadow(0 8px 12px #000)}.bonus-intro small,.win-celebration small{position:relative;z-index:3;color:#8effdc;font:800 11px Cinzel,serif;letter-spacing:.24em}.bonus-intro strong,.win-celebration strong{position:relative;z-index:3;color:#ffe899;text-shadow:0 4px #6b2e02,0 0 18px #ffbc35;font:900 clamp(34px,9vw,68px)/1 Cinzel,serif}.bonus-intro b{position:relative;z-index:3;margin-top:8px;color:#fff;font:900 clamp(20px,5vw,32px) Cinzel}.bonus-intro p{position:relative;z-index:3;max-width:330px;margin:7px 20px;color:#a8d6c7;font-size:10px}.portal-ring{position:absolute;width:min(78vw,500px);aspect-ratio:1;border:4px solid #5dffd3;border-radius:50%;box-shadow:0 0 24px #16e9ae,inset 0 0 24px #16e9ae;animation:ringTurn 5s linear infinite}@keyframes ringTurn{to{transform:rotate(360deg)}}
.win-celebration{background:radial-gradient(circle,rgba(119,69,5,.6),rgba(0,4,3,.9) 65%)}.win-celebration img{position:absolute;width:min(82vw,500px);opacity:.34;filter:blur(.2px) drop-shadow(0 0 16px #ffd85b)}.win-celebration #celebrationAmount{position:relative;z-index:3;margin-top:8px;color:white;text-shadow:0 3px #734203,0 0 15px #ffda68;font:900 clamp(31px,9vw,64px) Montserrat}.win-rays{position:absolute;width:130vmax;height:130vmax;background:repeating-conic-gradient(from 0deg,rgba(255,216,87,.26) 0 4deg,transparent 4deg 12deg);animation:ringTurn 14s linear infinite}.coin-burst i{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2a1,#e3a01d 45%,#7d4105);box-shadow:0 0 5px #ffd660;animation:coinFly 1.2s ease-out both;animation-delay:var(--delay)}@keyframes coinFly{to{transform:translate(var(--x),var(--y)) rotate(720deg);opacity:0}}
dialog{width:min(90vw,440px);padding:20px 23px 22px;border:2px solid #d3a63b;border-radius:18px;background:linear-gradient(155deg,#10352a,#030d09 70%);box-shadow:0 20px 55px #000;color:#dce9e3;text-align:center}dialog::backdrop{background:rgba(0,5,3,.8);backdrop-filter:blur(4px)}dialog img{width:110px;height:110px;object-fit:contain;float:left;margin:-5px 10px 2px -7px}dialog h2{margin:7px 0 12px;color:#ffe289;font:900 22px Cinzel,serif}dialog p{font-size:12px;line-height:1.5;text-align:left}dialog .note{clear:both;color:#78ac9c;font-size:10px}#closeInfo{position:absolute;right:9px;top:8px;width:34px;height:34px;border-radius:50%;background:#1b4939;color:#ffe389;font-size:23px}
@media (max-width:600px){:root{--cell:calc((min(94vw,50vh,445px) - 12px)/7)}.game{grid-template-rows:72px minmax(0,1fr) max-content}.topbar{height:72px;grid-template-columns:40px 1fr 40px;padding-inline:9px}.icon-btn{width:38px;height:38px}.game-logo{width:min(292px,74vw);height:70px}.rune-ribbon{width:min(96vw,484px);padding-inline:8px;gap:5px}.rune-ribbon>span{display:none}.rune-steps{justify-content:flex-start}.board-shell{width:min(94vw,50vh,445px);padding:5px}.message{height:29px;margin-top:3px}.controls{padding-top:3px}.actions{gap:6px}.meters{margin-bottom:2px}}
@media (max-width:370px),(max-height:670px){.game{grid-template-rows:59px minmax(0,1fr) max-content}.topbar{height:59px}.game-logo{height:59px;width:246px}.icon-btn{width:34px;height:34px}.rune-ribbon{min-height:24px}.rune-steps b{font-size:8px}.board-shell{width:min(92vw,48vh,348px);padding:4px}.message{height:25px;font-size:8px}.controls{padding-top:2px}.meters{margin-bottom:1px}.meter{padding-block:1px}.meter strong{font-size:11px}.actions{grid-template-columns:minmax(52px,1fr) 40px 64px 40px minmax(52px,1fr);gap:5px}.bet,.auto{height:38px}.small-btn{width:40px;height:40px}.spin{width:64px;height:64px;margin-top:-11px}.spin i{inset:12px}}
@media (min-width:800px) and (max-height:760px){.game{grid-template-rows:72px minmax(0,1fr) max-content}.topbar{height:72px}.game-logo{height:72px}.stage{padding-top:2px}.board-shell{width:min(55vw,56vh,430px)}.controls{padding-bottom:7px}.message{height:28px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
