@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik:wght@500;700;900&display=swap');
:root{--bg:#16131d;--panel:#211d2b;--panel2:#2e2840;--txt:#fff;--muted:#b9b3c9;--acc:#f5b638;--acc2:#e0791f;--good:#3fd13a;--bad:#e8352a;--navy:#1d2340;--navy2:#2c3459}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:Rubik,system-ui,sans-serif;overflow:hidden;user-select:none}
#app{display:flex;flex-direction:column;height:100%;max-width:560px;margin:0 auto;position:relative}
#stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#8ec3f2}
canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#logo{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;font:16px/1.25 "Press Start 2P",monospace;color:#ffd75e;text-shadow:3px 3px 0 #7a3e0b,-1px -1px 0 #7a3e0b,1px -1px 0 #7a3e0b,-1px 1px 0 #7a3e0b;transition:opacity .4s}
#logo span:last-child{color:#fff;text-shadow:3px 3px 0 #3a3a3a,-1px -1px 0 #3a3a3a,1px -1px 0 #3a3a3a,-1px 1px 0 #3a3a3a}
.topbtns{position:absolute;top:10px;right:10px;display:flex;gap:6px}
button{font:inherit;color:var(--txt);border:0;border-radius:12px;cursor:pointer;background:var(--panel2);padding:8px 12px;font-size:16px}

/* колесо */
#wheel{position:absolute;left:50%;top:var(--wheelTop,30%);width:168px;height:168px;transform:translate(-50%,-50%);transition:opacity .3s,transform .35s;image-rendering:pixelated;filter:drop-shadow(0 6px 0 #0004)}
#wheel.gone{opacity:0;transform:translate(-50%,-120%) scale(.7);pointer-events:none}
#ring{position:absolute;inset:0;border-radius:50%}
#wheel::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:#2a3050;box-shadow:inset 0 0 0 3px #3f4a78,0 0 0 3px #141830}
#wheel::after{content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 12% 30%,#4bbf3c 0 6px,transparent 7px),radial-gradient(circle at 88% 72%,#4bbf3c 0 5px,transparent 6px),radial-gradient(circle at 70% 6%,#4bbf3c 0 4px,transparent 5px),radial-gradient(circle at 25% 92%,#4bbf3c 0 4px,transparent 5px)}
.face{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(#26305a,#1a2040 70%);box-shadow:inset 0 0 0 4px #3a4573,inset 0 0 0 7px #151a33;z-index:1;overflow:hidden}
.win{position:absolute;inset:0;-webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
#strip{position:absolute;left:0;right:0;top:0;will-change:transform}
#strip div{height:42px;display:flex;align-items:center;justify-content:center;opacity:.55;transform:scale(.7)}
#strip div.c{opacity:1;transform:scale(1.25)}
#strip img{width:40px;height:40px;image-rendering:pixelated}
.arr{position:absolute;top:50%;width:0;height:0;border:11px solid transparent;transform:translateY(-50%);z-index:2;filter:drop-shadow(0 2px 0 #0b4a10)}
.arr.l{left:6px;border-left:14px solid var(--good)}
.arr.r{right:6px;border-right:14px solid var(--good)}

/* баннер */
#banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none;animation:cloudin .45s ease-out;background:radial-gradient(60% 18% at 20% 20%,#fff 0 60%,transparent 61%),radial-gradient(50% 14% at 80% 35%,#fff 0 60%,transparent 61%),radial-gradient(70% 16% at 30% 75%,#f4f9ff 0 60%,transparent 61%),radial-gradient(55% 15% at 75% 88%,#fff 0 60%,transparent 61%),linear-gradient(#cfe6fb,#e9f4ff 50%,#cfe6fb);z-index:5}
#banner::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:74px;transform:translateY(-50%);background:linear-gradient(#8a948f,#6f7974);border:4px solid #4d5551;box-shadow:inset 0 0 0 3px #a3ada8,0 6px 0 #0003;border-radius:6px}
#banner::after{content:"";position:absolute;left:3%;right:3%;top:calc(50% - 46px);height:16px;background:radial-gradient(circle at 4% 60%,#3fae38 0 9px,transparent 10px),radial-gradient(circle at 10% 30%,#2f8f2b 0 7px,transparent 8px),radial-gradient(circle at 92% 50%,#3fae38 0 9px,transparent 10px),radial-gradient(circle at 97% 80%,#2f8f2b 0 7px,transparent 8px),radial-gradient(circle at 50% 100%,#3fae38 0 6px,transparent 7px)}
@keyframes cloudin{from{opacity:0}to{opacity:1}}
#bTitle{position:relative;z-index:1;font:26px "Press Start 2P",monospace;color:#d9efe7;text-shadow:3px 3px 0 #2d3a35}
#bSum{position:relative;z-index:1;font:28px "Press Start 2P",monospace;color:#ffd630;text-shadow:3px 3px 0 #a5370c,-1px -1px 0 #a5370c}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ===== HUD: дерево + золото ===== */
:root{--ol:#2a1606;--g1:#fff1a8;--g2:#ffd75e;--g3:#f5b638;--g4:#c97d10;--g5:#7a4306}
.px{clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
#hud{position:relative;background:var(--woodDark) 0 0/96px;image-rendering:pixelated;padding:12px 10px calc(10px + env(safe-area-inset-bottom));
  box-shadow:inset 0 3px 0 var(--g5),inset 0 6px 0 var(--g3),inset 0 8px 0 var(--g1),inset 0 11px 0 var(--ol),inset 0 30px 30px -20px #0008}
#hud::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0000 60%,#0006)}
.stats,.ctrls{position:relative;z-index:1;display:grid;gap:8px}
.stats{grid-template-columns:repeat(3,1fr);margin:6px 0 10px}
.ctrls{grid-template-columns:1fr 1fr 1.7fr 1fr 1fr;align-items:stretch}
.plaque{text-align:center;padding:7px 4px 6px;background:#1a0f07cc;border-radius:0;
  box-shadow:inset 0 0 0 2px var(--g4),inset 0 0 0 3px var(--ol),inset 0 3px 0 3px #0005}
.plaque small{display:block;font:7px/1 "Press Start 2P",monospace;color:var(--g2);letter-spacing:.5px;margin-bottom:6px;text-shadow:1px 1px 0 var(--ol)}
.plaque b{display:block;font:900 15px/1.1 Rubik,sans-serif;color:#fff;text-shadow:2px 2px 0 var(--ol);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plaque.gold b{color:var(--g2)}
/* общий вид кнопок */
.wbtn,.gbtn,.start,.tbtn,.sign{position:relative;border:0;border-radius:0;padding:0;cursor:pointer;image-rendering:pixelated;
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  transition:transform .06s,filter .15s}
.wbtn,.gbtn,.start{height:58px}
.wbtn:active:not(:disabled),.gbtn:active:not(:disabled),.start:active:not(:disabled),.tbtn:active,.sign:active:not(:disabled){transform:translateY(2px);filter:brightness(.9)}
button:disabled{opacity:1;filter:grayscale(.75) brightness(.7)}
/* деревянная в золотой рамке */
.wbtn,.tbtn,.sign{background:var(--wood) 0 0/96px;
  box-shadow:inset 0 0 0 3px var(--ol),inset 0 0 0 5px var(--g3),inset 3px 3px 0 3px var(--g1),inset 0 0 0 7px var(--g5),inset 0 -6px 0 5px #0004,inset 0 6px 0 5px #fff2}
.wbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;font:8px/1 "Press Start 2P",monospace;text-shadow:1px 1px 0 var(--ol),-1px 0 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol)}
.wbtn svg{width:20px;height:20px}
.wbtn.on{box-shadow:inset 0 0 0 3px var(--ol),inset 0 0 0 5px var(--g2),inset 3px 3px 0 3px #fff,inset 0 0 0 7px var(--g4),inset 0 0 18px 6px #ffb02e99}
.wbtn.on span{color:var(--g2)}
.wbtn.on,#speedBtn[data-m="5"],#speedBtn[data-m="10"]{filter:brightness(1.12) saturate(1.15)}
#speedBtn[data-m="5"] span{color:var(--g2)}
#speedBtn[data-m="10"] span{color:#ff7a4a}
#speedBtn[data-m="5"],#speedBtn[data-m="10"]{box-shadow:inset 0 0 0 3px var(--ol),inset 0 0 0 5px var(--g2),inset 3px 3px 0 3px #fff,inset 0 0 0 7px var(--g4),inset 0 0 18px 6px #ffb02e88}
/* золотые */
.gbtn,.start{background:
  repeating-linear-gradient(90deg,#0000 0 6px,#ffffff12 6px 8px),
  linear-gradient(var(--g2) 0 40%,var(--g3) 40% 75%,#e89a1c 75%);
  box-shadow:inset 0 0 0 3px var(--ol),inset 0 5px 0 3px #fff4bf,inset 0 -6px 0 3px #a85f08,inset 5px 0 0 3px #ffe27a,inset -5px 0 0 3px #d48614}
.gbtn{display:flex;align-items:center;justify-content:center}
.gbtn svg{width:26px;height:26px;filter:drop-shadow(2px 2px 0 #a85f0880)}
.start{display:flex;align-items:center;justify-content:center;font:15px/1 "Press Start 2P",monospace;color:#fff;
  text-shadow:-2px 0 0 #5a2e05,2px 0 0 #5a2e05,0 -2px 0 #5a2e05,0 2px 0 #5a2e05,-2px -2px 0 #5a2e05,2px -2px 0 #5a2e05,-2px 2px 0 #5a2e05,2px 2px 0 #5a2e05,3px 4px 0 #5a2e05}
.start::after{content:"";position:absolute;left:12px;right:12px;top:10px;height:2px;background:#fffc;pointer-events:none}
.start.busy{filter:brightness(.85) saturate(.8)}
.start.stop{background:linear-gradient(#ffb3a3 0 14%,#ff6a4d 14% 45%,#e8352a 45% 78%,#a51d14 78%);box-shadow:inset 0 0 0 3px var(--ol),inset 3px 3px 0 3px #ffe0d8,inset -3px -3px 0 3px #5e0e08}
/* верхние кнопки */
.tbtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.tbtn svg{width:20px;height:20px}
.tbtn.off svg{opacity:.45}
/* табличка покупки бонуса на сцене */
.sign{position:absolute;left:8px;bottom:12px;z-index:3;width:76px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:#fff;font:9px/1.25 "Press Start 2P",monospace;text-shadow:1px 1px 0 var(--ol),-1px 0 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol);transition:opacity .3s,transform .06s}
.sign small{display:block;font-size:6px;color:var(--g2)}
.sign img{width:30px;height:30px;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 var(--ol))}
.sign.gone{opacity:0;pointer-events:none}
.hidden{display:none!important}
.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet{background:var(--panel);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:18px}
.sheet h3{margin:0 0 8px}
.sheet label{display:block;color:var(--muted);font-size:12px;margin:10px 0 3px}
.sheet code,.sheet input{display:block;width:100%;background:var(--bg);color:var(--txt);border:0;border-radius:8px;padding:8px;font:12px monospace;word-break:break-all}
.price{font-size:20px}
.muted{color:var(--muted);font-size:13px}
.row{display:flex;gap:8px;margin-top:16px}.row button{flex:1;height:46px}
button.gold{background:var(--acc);color:#2b1600;font-weight:900}
button.ghost{background:var(--panel2)}
#toast{position:fixed;top:56px;left:50%;transform:translateX(-50%);background:#000d;padding:8px 16px;border-radius:10px;z-index:20}

/* ===== главное меню и панели ===== */
.scr{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;background:var(--woodDark) 0 0/96px;image-rendering:pixelated;animation:cloudin .25s ease-out}
.scr::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 50% 30%,#0000 30%,#000a)}
.scr>*{position:relative}
#menu{align-items:center;justify-content:center;gap:22px;padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(#0000 0,#0000 100%),var(--woodDark) 0 0/96px}
.mlogo{display:flex;flex-direction:column;align-items:center;font:30px/1.2 "Press Start 2P",monospace;color:var(--g2);
  text-shadow:4px 4px 0 #7a3e0b,-2px -2px 0 #7a3e0b,2px -2px 0 #7a3e0b,-2px 2px 0 #7a3e0b}
.mlogo span:last-child{color:#fff;text-shadow:4px 4px 0 #3a3a3a,-2px -2px 0 #3a3a3a,2px -2px 0 #3a3a3a,-2px 2px 0 #3a3a3a}
.mbal{width:100%;max-width:300px}
.mbtns{width:100%;max-width:300px;display:flex;flex-direction:column;gap:12px}
.mbtn{height:62px!important;flex-direction:row!important;justify-content:flex-start!important;gap:14px!important;padding:0 20px!important;font:14px/1 "Press Start 2P",monospace!important}
.mbtn svg{width:26px!important;height:26px!important;flex:none}
.mbtn.start{justify-content:center!important;font-size:17px!important}
.badge{position:absolute;right:14px;top:50%;transform:translateY(-50%);min-width:22px;height:22px;padding:0 6px;background:#e8352a;color:#fff;
  font:9px/22px "Press Start 2P",monospace;text-align:center;box-shadow:0 0 0 2px var(--ol);font-style:normal}
.panel{background:var(--woodDark) 0 0/96px}
.phead{display:flex;align-items:center;gap:12px;padding:12px 12px 14px;background:var(--wood) 0 0/96px;
  box-shadow:inset 0 -3px 0 var(--g5),inset 0 -6px 0 var(--g3),inset 0 -8px 0 var(--g1),0 3px 0 var(--ol)}
.phead h2{margin:0;font:16px/1 "Press Start 2P",monospace;color:#fff;text-shadow:2px 2px 0 var(--ol),-1px -1px 0 var(--ol),1px -1px 0 var(--ol),-1px 1px 0 var(--ol)}
.pbody{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.plabel{font:8px/1 "Press Start 2P",monospace;color:var(--g2);text-shadow:1px 1px 0 var(--ol);margin-top:6px}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chips .wbtn{height:50px;font-size:10px}
.chips .wbtn.sel{filter:brightness(1.15) saturate(1.2);box-shadow:inset 0 0 0 3px var(--ol),inset 0 0 0 5px var(--g2),inset 3px 3px 0 3px #fff,inset 0 0 0 7px var(--g4),inset 0 0 18px 6px #ffb02e99}
.chips .wbtn.sel span{color:var(--g2)}
.soon{padding:14px;text-align:center;color:#d9c7a8;font:500 13px Rubik,sans-serif;background:#1a0f07cc;box-shadow:inset 0 0 0 2px #5a3a1c,inset 0 0 0 3px var(--ol)}
.pin{width:100%;height:50px;padding:0 14px;border:0;border-radius:0;outline:0;background:#1a0f07;color:#fff;font:700 16px Rubik,sans-serif;
  box-shadow:inset 0 0 0 2px var(--g4),inset 0 0 0 3px var(--ol),inset 0 4px 0 3px #0006}
.pin:focus{box-shadow:inset 0 0 0 2px var(--g2),inset 0 0 0 3px var(--ol),inset 0 4px 0 3px #0006}
.pin::placeholder{color:#8a7558}
.pgo{margin-top:auto;height:62px!important}
.pgo span{font-size:16px}
/* чат */
.chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:14px 12px}
.msg{max-width:80%;padding:9px 12px 7px;font:500 14px/1.35 Rubik,sans-serif;word-wrap:break-word;white-space:pre-wrap}
.msg p{margin:0}
.msg time{display:block;margin-top:3px;font-size:10px;opacity:.6;text-align:right}
.msg.me{align-self:flex-end;background:linear-gradient(var(--g2),var(--g3));color:#2b1600;box-shadow:inset 0 0 0 2px var(--ol),inset -2px -3px 0 2px var(--g4)}
.msg.adm{align-self:flex-start;background:var(--wood) 0 0/96px;color:#fff;text-shadow:1px 1px 0 var(--ol);box-shadow:inset 0 0 0 2px var(--ol),inset 0 0 0 4px var(--g3)}
.msg.adm::before{content:"ПОДДЕРЖКА";display:block;font:7px/1 "Press Start 2P",monospace;color:var(--g2);margin-bottom:5px}
.cbar{display:flex;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:var(--wood) 0 0/96px;
  box-shadow:inset 0 3px 0 var(--g5),inset 0 6px 0 var(--g3),inset 0 8px 0 var(--g1),0 -3px 0 var(--ol)}
.cbar textarea{flex:1;resize:none;min-height:50px;max-height:120px;padding:14px;border:0;border-radius:0;outline:0;background:#1a0f07;color:#fff;font:500 15px/1.3 Rubik,sans-serif;
  box-shadow:inset 0 0 0 2px var(--g4),inset 0 0 0 3px var(--ol)}
.cbar .gbtn{width:56px;height:50px;flex:none;margin-top:6px}

.offer{display:block;margin:2px auto 0;padding:6px 10px;background:none;border:0;border-radius:0;color:#d9c7a8;font:500 11px/1.4 Rubik,sans-serif;text-align:center;opacity:.85}
.offer u{color:var(--g2);text-decoration-thickness:1px;text-underline-offset:2px}
.offer:active{opacity:.6}
#offerFrame{flex:1;width:100%;border:0;background:#1a120b}

.offerBtn{display:block;margin:4px auto 0;padding:11px 18px;background:#1a0f07e6;border:0;border-radius:0;color:var(--g2);
  font:10px/1 "Press Start 2P",monospace;letter-spacing:.5px;text-shadow:1px 1px 0 var(--ol);
  box-shadow:inset 0 0 0 2px var(--g4),inset 0 0 0 3px var(--ol)}
.offerBtn:active{transform:translateY(1px);filter:brightness(.9)}
#mOffer{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);white-space:nowrap}
#mOffer:active{transform:translate(-50%,1px)}
.offerNote{text-align:center;color:#bfae92;font:500 10px/1.3 Rubik,sans-serif;margin-top:-2px}