@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&family=Noto+Serif+SC:wght@700;900&family=Montserrat:wght@600;700;800&display=swap');
:root{--jade:#0d6b51;--dark:#041b18;--red:#8e1716;--gold:#f5d36c;--cream:#fff8df;--app-height:100dvh}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02120f;color:#fff;font-family:Montserrat,system-ui,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit}.game{position:relative;width:100%;height:var(--app-height);min-height:560px;overflow:hidden;display:grid;grid-template-rows:132px minmax(0,1fr) 136px;background:radial-gradient(circle at 50% 32%,rgba(251,208,95,.23),transparent 30%),linear-gradient(180deg,#071f28 0%,#07382f 46%,#061b18 100%)}.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}.scene:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,13,12,.48),transparent 20% 80%,rgba(1,13,12,.48)),radial-gradient(circle at 50% 45%,transparent 0 33%,rgba(0,0,0,.38) 80%)}.moon{position:absolute;left:50%;top:15%;width:240px;height:240px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 38% 34%,#fff6c9,#efc664 58%,rgba(222,141,30,.12) 68%);box-shadow:0 0 70px rgba(255,212,104,.46);opacity:.48}.mountains{position:absolute;inset:auto 0 0;height:58%;background:linear-gradient(145deg,transparent 0 26%,rgba(1,24,22,.75) 27% 47%,transparent 48%) left bottom/58% 100% no-repeat,linear-gradient(215deg,transparent 0 31%,rgba(2,28,25,.8) 32% 53%,transparent 54%) right bottom/60% 100% no-repeat}.mist{position:absolute;width:70%;height:45px;border-radius:50%;background:rgba(201,231,201,.13);filter:blur(18px);animation:drift 9s ease-in-out infinite alternate}.m1{left:-20%;top:48%}.m2{right:-25%;top:66%;animation-delay:-4s}.pagoda{position:absolute;bottom:15%;width:90px;height:150px;opacity:.3;background:linear-gradient(90deg,transparent 38%,#020d0c 39% 61%,transparent 62%)}.pagoda:before{content:"";position:absolute;left:-25px;top:25px;width:140px;height:18px;background:#020d0c;clip-path:polygon(10% 45%,0 100%,45% 76%,50% 0,55% 76%,100% 100%,90% 45%);box-shadow:0 38px 0 #020d0c,0 76px 0 #020d0c}.p1{left:2%}.p2{right:3%;transform:scale(.72)}.lantern{position:absolute;top:11%;width:24px;height:34px;border-radius:9px;background:radial-gradient(circle,#ffbc45,#a51d13 67%);box-shadow:0 0 24px #ff7c2f;animation:lantern 3s ease-in-out infinite alternate}.lantern:before{content:"";position:absolute;left:11px;top:-70px;width:2px;height:70px;background:#9f7e4a}.l1{left:8%}.l2{right:8%;animation-delay:-1.4s}.topbar{z-index:3;display:grid;grid-template-columns:50px minmax(0,1fr) 50px;align-items:center;padding:max(8px,env(safe-area-inset-top)) 16px 0}.icon-btn{z-index:5;width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);color:#fff2bf;background:radial-gradient(circle at 35% 30%,#1d8064,#073c31 67%);box-shadow:inset 0 0 0 2px #704310,0 4px 0 #3a2107,0 0 14px rgba(245,211,108,.27);font:800 20px Cinzel;cursor:pointer}.icon-btn:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px #704310,0 1px 0 #3a2107}.brand{position:relative;justify-self:center;width:min(300px,calc(100vw - 110px));height:120px;text-align:center;filter:drop-shadow(0 4px 1px #180a03) drop-shadow(0 0 15px rgba(244,193,57,.5));animation:brandFloat 3.4s ease-in-out infinite alternate}.brand small{display:block;margin-top:2px;color:#ffedac;font:800 12px/1 Cinzel;letter-spacing:.45em;text-indent:.45em}.brand strong{display:block;font:900 clamp(40px,11vw,65px)/.92 Cinzel;color:transparent;background:linear-gradient(#fffbcf 3%,#f8d15e 37%,#bd691b 72%,#ffe98f);-webkit-background-clip:text;-webkit-text-stroke:1.5px #6f2f0e}.brand span{position:absolute;right:2px;top:33px;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#d53025,#77100e);border:3px solid #f7d773;color:#ffeaa0;font:900 22px 'Noto Serif SC';transform:rotate(9deg)}.brand i{display:inline-block;margin-top:4px;padding:3px 18px;color:#fff4c7;background:linear-gradient(90deg,transparent,#8f1816 18% 82%,transparent);font:800 8px Montserrat;letter-spacing:.24em}.stage{z-index:2;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 12px}.reel-crown{width:min(690px,100%);height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border:2px solid #dcae42;border-bottom:0;border-radius:14px 14px 0 0;background:linear-gradient(#a6221e,#5e0d0d);box-shadow:0 -3px 13px rgba(255,190,55,.22);font:800 clamp(8px,2.2vw,11px) Cinzel;letter-spacing:.12em;color:#ffe7a0}.mult-steps{display:flex;gap:4px}.mult-steps b{min-width:32px;padding:4px 5px;border-radius:8px;border:1px solid rgba(255,226,139,.48);background:#3c0c0c;color:#c99d57;text-align:center;font-size:10px}.mult-steps b.active{background:radial-gradient(circle,#fff4a6,#e1a520 58%,#8a4910);color:#4b2103;box-shadow:0 0 13px #ffda64;transform:scale(1.08)}.reel-shell{position:relative;width:min(690px,100%);height:min(47vh,470px);min-height:300px;padding:13px;background:linear-gradient(145deg,#f4d979 0,#835015 7%,#d5a33a 12%,#54100f 18%,#7b1512 82%,#dfb046 89%,#855116 95%,#f9dc7e);border-radius:0 0 20px 20px;box-shadow:0 10px 26px rgba(0,0,0,.65),0 0 0 2px #4c1809,0 0 25px rgba(243,189,59,.3)}.reel-shell:before{content:"";position:absolute;inset:8px;border:2px solid rgba(255,239,160,.67);border-radius:8px 8px 14px 14px;pointer-events:none}.reels{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:5px;padding:8px;border-radius:8px;background:linear-gradient(rgba(2,44,34,.96),rgba(1,26,23,.97)),repeating-linear-gradient(90deg,transparent 0 19%,rgba(255,255,255,.05) 20%);box-shadow:inset 0 0 25px #000,inset 0 0 0 2px #e5c160;overflow:hidden}.tile{position:relative;min-width:0;min-height:0;display:grid;place-items:center;transform-style:preserve-3d}.tile-face{position:relative;width:82%;height:88%;max-width:96px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#fffef1 0%,#eee7ce 62%,#c8b990 100%);border:2px solid #fffce6;box-shadow:inset -5px -6px 0 rgba(113,93,55,.21),inset 3px 3px 0 #fff,0 4px 0 #806f45,0 7px 8px rgba(0,0,0,.48);color:#173e32;overflow:hidden}.tile-face:after{content:"";position:absolute;inset:5px;border:1px solid rgba(55,85,63,.18);border-radius:5px;pointer-events:none}.tile .glyph{font:900 clamp(24px,7.5vw,52px)/1 'Noto Serif SC',serif;text-shadow:0 1px #fff}.tile .sub{position:absolute;bottom:6px;font:800 clamp(5px,1.5vw,9px)/1 Montserrat;letter-spacing:.12em;color:#8a201a}.tile.red .glyph{color:#a31e18}.tile.green .glyph{color:#08745a}.tile.blue .glyph{color:#175894}.tile.gold .glyph{color:#bd7a16}.tile.wild .tile-face{background:radial-gradient(circle at 42% 35%,#fff6bb,#caaa43 58%,#70501a);border-color:#fff2a5;box-shadow:inset 0 0 12px #fff7c0,0 4px 0 #684112,0 0 13px #fbd75b}.tile.wild .glyph{color:#0a7756;text-shadow:0 2px #fff3a1}.tile.drop{animation:tileDrop .48s cubic-bezier(.17,.84,.35,1.18) both;animation-delay:var(--delay)}.tile.winner .tile-face{animation:tileWin .48s ease-in-out infinite alternate;z-index:3}.tile.clear{animation:tileClear .3s ease both}.frame-corner{position:absolute;z-index:4;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#8c1714;border:2px solid #f1cb62;color:#ffe89a;font:900 12px 'Noto Serif SC';box-shadow:0 0 8px #000}.tl{left:0;top:0}.tr{right:0;top:0}.bl{left:0;bottom:0}.br{right:0;bottom:0}.message{height:35px;display:grid;place-items:center;margin-top:3px;text-align:center;color:#ffe7a5;font:800 clamp(9px,2.4vw,13px) Cinzel;letter-spacing:.12em;text-shadow:0 2px 4px #000}.message.big{font-size:clamp(16px,4.4vw,24px);color:#fff4ac;filter:drop-shadow(0 0 8px #f5b72e)}.controls{z-index:5;width:100%;padding:4px 20px max(10px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(3,32,27,.55),rgba(2,17,15,.94));border-top:1px solid rgba(245,211,108,.24);box-shadow:0 -8px 20px rgba(0,0,0,.22)}.meters{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:690px;margin:auto}.meter{min-width:0}.meter.win{text-align:right}.meter span,.bet span{display:block;color:#cdb77b;font-size:8px;letter-spacing:.16em}.meter strong,.bet strong{display:block;color:#fff4c3;font:800 clamp(14px,4vw,18px) Montserrat;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions{height:82px;max-width:690px;margin:auto;display:grid;grid-template-columns:minmax(56px,1fr) 48px 80px 48px minmax(56px,1fr);align-items:center;gap:10px}.bet{text-align:left}.small-btn,.auto{position:relative;width:48px;height:48px;border-radius:13px;border:2px solid #edc75c;color:#fff3bc;background:linear-gradient(145deg,#1b8263,#0a4a3b 56%,#05291f);box-shadow:inset 0 0 0 2px #6e4511,inset 0 7px 10px rgba(255,255,255,.1),0 5px 0 #3b2207,0 8px 12px #000;font:800 22px Montserrat}.small-btn:active,.auto:active{transform:translateY(4px) scale(.96);box-shadow:inset 0 0 0 2px #6e4511,0 1px 0 #3b2207}.spin{position:relative;justify-self:center;width:80px;height:80px;border-radius:50%;border:4px solid #ffe68a;color:#fff7c8;background:radial-gradient(circle at 38% 30%,#ffec8c 0 5%,#e12d24 17%,#a71815 57%,#580b0a 78%,#260504);box-shadow:inset 0 0 0 4px #9d5f15,inset 0 0 0 8px #f5cb59,inset 0 -10px 15px rgba(58,2,2,.45),0 6px 0 #542e08,0 10px 18px #000,0 0 18px rgba(240,53,40,.42);font:900 13px Cinzel}.spin i{position:absolute;inset:13px;border:2px dashed rgba(255,239,158,.72);border-radius:50%}.spin span{position:relative;z-index:2}.spin:active{transform:translateY(5px) scale(.95)}.spin.running{animation:spinPulse .65s ease-in-out infinite alternate}.auto{justify-self:end;font-size:15px;line-height:.8}.auto span{display:block;font-size:7px;letter-spacing:.08em}.auto.active{background:linear-gradient(145deg,#bf3028,#761310);box-shadow:inset 0 0 0 2px #ffd879,0 5px 0 #3b1108,0 0 16px #ef493e}.win-celebration{position:absolute;z-index:30;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden;background:radial-gradient(circle,rgba(255,231,129,.25),rgba(15,3,2,.72) 70%);opacity:0;visibility:hidden}.win-celebration.show{visibility:visible;opacity:1;animation:flash 3s ease both}.win-rays{position:absolute;width:150vmax;height:150vmax;background:repeating-conic-gradient(rgba(255,226,102,.38) 0 6deg,transparent 6deg 14deg);mask-image:radial-gradient(circle,#000 0 34%,transparent 67%);animation:rays 8s linear infinite}.win-burst{position:relative;z-index:3;width:min(92vw,600px);text-align:center;display:flex;flex-direction:column;align-items:center;transform:scale(.2);opacity:0;filter:drop-shadow(0 0 20px #ffce4d)}.show .win-burst{animation:burst 3s cubic-bezier(.2,.85,.25,1) both}.win-burst small{color:#fff0a0;font:800 clamp(10px,3vw,15px) Cinzel;letter-spacing:.25em}.win-burst strong{font:900 clamp(52px,16vw,102px)/.95 Cinzel;color:#ad1c16;-webkit-text-stroke:3px #fff2c7;text-shadow:0 6px 0 #522009,0 0 18px #ffcf4b}.win-burst b{font:900 clamp(40px,13vw,80px) Montserrat;color:#ffe468;-webkit-text-stroke:2px #78120e;text-shadow:0 5px 0 #3b0b07,0 0 15px #ffc93e}.win-burst em{color:#fff3c4;font:800 clamp(10px,3vw,14px) Cinzel;letter-spacing:.14em}.ingots{position:absolute;z-index:2;display:flex;gap:35px;transform:translateY(125px)}.ingots i{width:74px;height:42px;border-radius:10px 10px 28px 28px;background:radial-gradient(circle at 50% 15%,#fff9b2,#efbf2d 38%,#9c5d0c 80%);box-shadow:0 0 14px #ffc93a;transform:rotate(-12deg)}.ingots i:nth-child(2){transform:translateY(22px) scale(1.25)}.ingots i:nth-child(3){transform:rotate(15deg)}.coins{position:absolute;inset:0;z-index:4}.coin{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;border:3px solid #fff09a;background:#e2a61c;box-shadow:0 0 5px #ffd95b;animation:coinFly 1.2s ease-out var(--delay) both}dialog{width:min(90vw,500px);border:2px solid var(--gold);border-radius:18px;color:#fff1c4;background:linear-gradient(#0d5c48,#052b23);box-shadow:0 22px 60px #000;padding:28px}dialog::backdrop{background:rgba(0,9,8,.75);backdrop-filter:blur(5px)}dialog h2{margin-top:0;color:#f6d571;font-family:Cinzel}dialog p{line-height:1.6;font-size:14px}dialog button{position:absolute;right:10px;top:8px;border:0;background:none;color:#ffe589;font-size:28px}
@keyframes drift{to{transform:translateX(35%)}}@keyframes lantern{to{transform:rotate(4deg) translateY(5px)}}@keyframes brandFloat{to{transform:translateY(-4px) scale(1.015)}}@keyframes tileDrop{from{transform:translateY(-110%) rotateX(55deg);opacity:0}to{transform:none;opacity:1}}@keyframes tileWin{to{transform:translateY(-4px) scale(1.08);filter:brightness(1.25);box-shadow:inset -5px -6px 0 rgba(113,93,55,.21),0 4px 0 #806f45,0 0 20px #ffe668}}@keyframes tileClear{to{transform:scale(.2) rotate(18deg);opacity:0;filter:brightness(2)}}@keyframes spinPulse{to{filter:brightness(1.2);transform:scale(1.04)}}@keyframes flash{0%{filter:brightness(2)}10%,100%{filter:brightness(1)}}@keyframes rays{to{transform:rotate(360deg)}}@keyframes burst{0%{transform:scale(.2) rotate(-7deg);opacity:0}13%{transform:scale(1.13) rotate(2deg);opacity:1}22%,80%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}@keyframes coinFly{0%{transform:translate(0,0) rotateY(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotateY(1080deg);opacity:0}}
@media(max-width:600px) and (orientation:portrait){.game{grid-template-rows:128px minmax(0,1fr) 136px}.reel-shell{height:min(45vh,430px);min-height:285px}.controls{padding-inline:18px}.actions{grid-template-columns:minmax(54px,1fr) 46px 78px 46px minmax(54px,1fr);gap:8px}.small-btn,.auto{width:46px;height:46px}.spin{width:78px;height:78px}.tile-face{width:86%;height:88%}}
@media(max-width:370px){.game{grid-template-rows:112px minmax(0,1fr) 126px}.topbar{padding-inline:10px}.brand{height:104px}.brand strong{font-size:38px}.brand span{right:0;top:28px;width:37px;height:37px;font-size:18px}.reel-crown{height:34px}.reel-crown>span{display:none}.mult-steps{width:100%;justify-content:center}.reel-shell{min-height:260px;padding:10px}.reels{gap:3px;padding:6px}.actions{height:73px;grid-template-columns:minmax(48px,1fr) 42px 70px 42px minmax(48px,1fr);gap:5px}.small-btn,.auto{width:42px;height:44px}.spin{width:70px;height:70px}.controls{padding-inline:12px}.tile .glyph{font-size:27px}}
@media(max-width:600px) and (max-height:700px) and (orientation:portrait){.game{min-height:0;grid-template-rows:92px minmax(0,1fr) 116px}.topbar{height:92px;padding-top:2px}.brand{height:88px;width:min(220px,calc(100vw - 100px))}.brand strong{font-size:36px}.brand span{top:26px;width:34px;height:34px;font-size:17px}.brand i{display:none}.reel-shell{height:calc(var(--app-height) - 260px);min-height:235px;max-height:365px}.reel-crown{height:31px}.message{height:28px}.controls{height:116px}.actions{height:70px}.meters{height:28px}.tile-face{height:86%}}
@media(min-width:700px) and (orientation:landscape){.game{grid-template-columns:190px minmax(400px,720px) 210px;grid-template-rows:1fr;justify-content:center}.topbar{grid-column:1;display:flex;flex-direction:column;padding:22px 10px;gap:20px}.brand{order:-1;width:180px;height:140px}.brand strong{font-size:37px}.brand span{right:0;top:30px;width:36px;height:36px;font-size:18px}.stage{grid-column:2;padding:18px 8px}.reel-shell{height:min(78vh,570px)}.controls{grid-column:3;height:100%;padding:20px 12px;display:flex;flex-direction:column;justify-content:center;background:rgba(2,20,17,.74);border-left:1px solid rgba(245,211,108,.25)}.meters{width:100%;display:block}.meter{margin:14px 0;text-align:center!important}.actions{width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}.bet{grid-column:1/-1;text-align:center}.spin{grid-column:1/-1;grid-row:2;justify-self:center}.small-btn{grid-row:3}.auto{grid-column:1/-1;justify-self:center}.reel-crown{height:38px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}