@font-face{font-family:Lilita;src:url(../fonts/LilitaOne.woff2) format("woff2");font-display:block}
@font-face{font-family:Nunito;src:url(../fonts/Nunito-var.woff2) format("woff2");font-weight:200 1000;font-display:block}
:root{--ink:#14100e;--panel:rgba(26,23,26,.84);--edge:#4a4148;--gold:#ffcf4a;--gold2:#f2a52a;--cream:#f4ead8;--teal:#2fc4c4;--red:#e2543a;--u:clamp(11px,min(2.3vw,2.9vh),22px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#141210;color:var(--cream);font-family:Lilita,system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
img.pi{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.ci{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.12em;margin-right:.25em;background:radial-gradient(circle at 35% 30%,#fff2b0,#ffcf4a 45%,#c8861a);box-shadow:inset 0 0 0 1.5px #a86a10}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(8,4,0,.5))}
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#141210;z-index:50;font-size:22px;transition:opacity .4s}
#loading.hidden{opacity:0;pointer-events:none}
.spin{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b0,#ffcf4a 45%,#c8861a);animation:flip 1s linear infinite;box-shadow:0 0 30px rgba(255,190,60,.4)}
@keyframes flip{to{transform:rotateY(360deg)}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
body.playing #hud{opacity:1}
body.cine #hud{opacity:0}
.panel{background:var(--panel);border:2px solid var(--edge);border-radius:calc(var(--u)*.7);box-shadow:0 3px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,240,210,.08);backdrop-filter:blur(3px)}
.track{height:calc(var(--u)*.6);border-radius:99px;background:rgba(0,0,0,.55);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.track i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#f2a52a,#ffe07a);transition:width .15s}
#cross{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
#cross i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.6)}
#wallet{position:absolute;left:calc(env(safe-area-inset-left) + var(--u)*.8);top:calc(env(safe-area-inset-top) + var(--u)*.8);display:flex;align-items:center;gap:calc(var(--u)*.5);padding:calc(var(--u)*.35) calc(var(--u)*1) calc(var(--u)*.35) calc(var(--u)*.4);font-size:calc(var(--u)*1.8);color:var(--gold)}
#walletI{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4)}
#left{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--u)*.6);transform:translateX(-50%);text-align:center;padding:calc(var(--u)*.35) calc(var(--u)*1.3) calc(var(--u)*.55);min-width:calc(var(--u)*17)}
#left small{display:block;font-size:calc(var(--u)*.72);letter-spacing:.08em;opacity:.75}
#left b{display:block;font-size:calc(var(--u)*2.2);line-height:1.1;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(0,0,0,.5)}
#boost{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--u)*6.4);transform:translateX(-50%);font-size:calc(var(--u)*.9);color:#2a1a00;background:linear-gradient(#ffe07a,#f2a52a);border-radius:99px;padding:2px 12px;box-shadow:0 0 18px rgba(255,190,60,.6)}
#goal{position:absolute;left:calc(env(safe-area-inset-left) + var(--u)*.8);top:calc(env(safe-area-inset-top) + var(--u)*4.4);max-width:calc(var(--u)*19);display:flex;gap:calc(var(--u)*.5);align-items:flex-start;padding:calc(var(--u)*.45) calc(var(--u)*.8);font-size:calc(var(--u)*1);line-height:1.25}
.gdot{flex:none;width:calc(var(--u)*.7);height:calc(var(--u)*.7);margin-top:.3em;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.4}}
#rb{position:absolute;right:calc(env(safe-area-inset-right) + var(--u)*.8);top:calc(env(safe-area-inset-top) + var(--u)*.8);display:flex;flex-direction:column;gap:calc(var(--u)*.55);pointer-events:auto}
.rbtn{position:relative;width:calc(var(--u)*3.8);height:calc(var(--u)*3.8);min-width:44px;min-height:44px;padding:calc(var(--u)*.4)}
.rbtn:active{transform:translateY(2px)}
.rbi{display:block;width:100%;height:100%}
.badge{position:absolute;right:-6px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:12px;line-height:20px;display:none;box-shadow:0 0 0 2px var(--ink)}
.rbtn.ready .badge{display:block}.rbtn.ready{animation:wob 2s infinite}
@keyframes wob{0%,85%,100%{transform:none}90%{transform:rotate(-6deg)}95%{transform:rotate(6deg)}}
#slots{position:absolute;left:calc(env(safe-area-inset-left) + var(--u)*.8);bottom:calc(env(safe-area-inset-bottom) + var(--u)*.8);display:flex;gap:calc(var(--u)*.4);pointer-events:auto}
.slot{position:relative;width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);min-width:44px;min-height:44px;padding:calc(var(--u)*.35);background:var(--panel);border:2px solid var(--edge);border-radius:calc(var(--u)*.6)}
.slot.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,207,74,.35),0 0 16px rgba(255,190,60,.35)}
.slot.locked{opacity:.55}
.slot .k{position:absolute;left:3px;top:1px;font-size:11px;opacity:.7}
#bagW{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + var(--u)*.8);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.35)}
#bag{display:flex;align-items:center;gap:calc(var(--u)*.6);padding:calc(var(--u)*.35) calc(var(--u)*.9) calc(var(--u)*.35) calc(var(--u)*.4)}
#bagI{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4)}
#bag small{font-size:calc(var(--u)*.8);opacity:.75;letter-spacing:.06em}
#bag .track{width:calc(var(--u)*11);height:calc(var(--u)*.85)}
#bag b{min-width:calc(var(--u)*7);text-align:right;font-size:calc(var(--u)*1.15);font-variant-numeric:tabular-nums}
#bag.full{border-color:var(--red);animation:shake .4s infinite}
#bag.full .track i{background:linear-gradient(90deg,#c0392b,#ff7a5a)}
@keyframes shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
#flowW{display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .3s;font-size:calc(var(--u)*.75);color:#7ff6ff;letter-spacing:.1em}
#flowW .track{width:calc(var(--u)*8);height:5px}#flowW .track i{background:linear-gradient(90deg,#2fc4c4,#9ffcff)}
#prompt{position:absolute;left:50%;top:62%;transform:translate(-50%,0) scale(.9);opacity:0;transition:all .2s;background:var(--panel);border:2px solid var(--edge);border-radius:12px;padding:8px 16px;font-size:calc(var(--u)*1.1);white-space:nowrap;pointer-events:none}
#prompt.on{opacity:1;transform:translate(-50%,0)}
#prompt .key{display:inline-block;margin-left:8px;padding:0 7px;border-radius:5px;background:var(--cream);color:var(--ink);font-size:.85em}
#toasts{position:absolute;left:50%;top:24%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.toast{background:var(--panel);border:2px solid var(--edge);border-radius:99px;padding:6px 16px;font-size:calc(var(--u)*1.05);animation:tin .25s;transition:opacity .4s,transform .4s;white-space:nowrap}
.toast.gold{border-color:var(--gold);color:var(--gold)}.toast.warn{border-color:var(--red)}
.toast.out{opacity:0;transform:translateY(-10px)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
#pops{position:absolute;inset:0;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);font-size:calc(var(--u)*1.35);color:#fff;-webkit-text-stroke:1px #2a1606;paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.5);animation:pop 1.05s ease-out forwards;white-space:nowrap}
.pop.gold{color:var(--gold)}.pop.big{font-size:calc(var(--u)*2)}.pop.cash{color:#9cff8a}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-70%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}

/* touch */
#touch{display:none}
body.touch #touch{display:block}
body.touch #slots{bottom:auto;top:calc(env(safe-area-inset-top) + var(--u)*9.5);left:auto;right:calc(env(safe-area-inset-right) + var(--u)*.8);flex-direction:column;top:auto;bottom:calc(env(safe-area-inset-bottom) + var(--u)*13)}
#joy{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(0,0,0,.18);display:none}
#joy.on{display:block}#joy i{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;background:rgba(255,240,210,.35);transform:translate(-50%,-50%)}
.tb{position:absolute;pointer-events:auto;border-radius:50%;border:3px solid rgba(255,240,210,.35);background:radial-gradient(circle at 40% 35%,rgba(255,224,122,.85),rgba(242,165,42,.85));color:#2a1a00;font-size:calc(var(--u)*1.2);box-shadow:0 4px 0 rgba(0,0,0,.4)}
#tAct{right:calc(env(safe-area-inset-right) + var(--u)*1.5);bottom:calc(env(safe-area-inset-bottom) + var(--u)*4.5);width:calc(var(--u)*7.5);height:calc(var(--u)*7.5);min-width:84px;min-height:84px}
#tJump{right:calc(env(safe-area-inset-right) + var(--u)*10);bottom:calc(env(safe-area-inset-bottom) + var(--u)*1.2);width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);min-width:54px;min-height:54px;background:rgba(40,36,40,.7);color:var(--cream);font-size:calc(var(--u)*.85)}
.tb.on{transform:scale(.94);filter:brightness(1.15)}
body.touch #bagW{bottom:calc(env(safe-area-inset-bottom) + var(--u)*.6)}
@media (max-aspect-ratio:1/1){
  body.touch #bagW{left:calc(env(safe-area-inset-left) + var(--u)*.8);transform:none;align-items:flex-start}
  body.touch #bag .track{width:calc(var(--u)*7)}
  #left{min-width:0;padding:calc(var(--u)*.3) calc(var(--u)*.8) calc(var(--u)*.45);left:56%}
  #left b{font-size:calc(var(--u)*1.8)}
  #goal{top:calc(env(safe-area-inset-top) + var(--u)*8.2)}
  #tJump{bottom:calc(env(safe-area-inset-bottom) + var(--u)*6);right:calc(env(safe-area-inset-right) + var(--u)*10.5)}
}

/* title */
#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12vh 0 14vh;background:linear-gradient(rgba(10,8,6,.15),rgba(10,8,6,.65));transition:opacity .5s}
#title.hidden{opacity:0;pointer-events:none}
#logo{text-align:center;line-height:.86;filter:drop-shadow(0 6px 0 rgba(0,0,0,.5))}
#logo span{display:block;font-size:min(22vw,150px);background:linear-gradient(#fff3b8,#ffcf4a 45%,#c8861a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #3a2208}
#logo .l2{font-size:min(17vw,116px)}
#logo .l0{font-size:min(10vw,64px);letter-spacing:.08em}
#logo small{display:block;margin-top:14px;font-size:min(4.4vw,22px);color:var(--cream);letter-spacing:.04em}
.big{pointer-events:auto;font-size:calc(var(--u)*1.7);padding:calc(var(--u)*.7) calc(var(--u)*2.6);border-radius:calc(var(--u)*.8);border:none;background:linear-gradient(#ffe07a,#f2a52a);color:#2a1a00;box-shadow:0 5px 0 #8a5a10,0 10px 24px rgba(0,0,0,.4);min-height:48px}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #8a5a10}
.big.ghost{background:rgba(255,240,210,.12);color:var(--cream);box-shadow:0 4px 0 rgba(0,0,0,.4)}
.big.rew{background:linear-gradient(#7ff6ff,#2fc4c4);color:#062a2a;box-shadow:0 5px 0 #146a6a}
#play{font-size:calc(var(--u)*2.6);padding:calc(var(--u)*.6) calc(var(--u)*4)}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,6,4,.6);z-index:20;padding:12px}
.modal.on{display:flex}
.card{width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;background:#221e22;border:2px solid var(--edge);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:cin .2s}
.modal.wide .card{width:min(1100px,100%)}
@keyframes cin{from{transform:scale(.94);opacity:0}}
.mh{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:2px solid #2e282e}
.mh h2{margin:0;font-size:24px;font-weight:400;color:var(--gold);letter-spacing:.04em}
.mh .pts{font-size:15px;color:var(--cream);background:#3a3238;border-radius:99px;padding:2px 10px;margin-left:8px;vertical-align:4px}
.mh .x{background:none;border:none;font-size:22px;min-width:44px;min-height:44px}
.mb{padding:14px 16px;overflow:auto;font-family:Nunito,sans-serif;font-weight:700}
.sub{margin:0 0 12px;font-size:14px;opacity:.85}
.row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:#2a252a;border-radius:12px;padding:8px 10px;margin-bottom:8px}
.row img.pi,.row svg{width:48px;height:48px}
.row b{display:block;font-family:Lilita,sans-serif;font-weight:400;font-size:17px}
.row span{font-size:13px;opacity:.8}
.row em{font-style:normal;font-family:Lilita;opacity:.6}
.buy{font-family:Lilita;min-height:44px;padding:0 14px;border:none;border-radius:10px;background:linear-gradient(#ffe07a,#f2a52a);color:#2a1a00;font-size:16px;box-shadow:0 3px 0 #8a5a10}
.buy:disabled{filter:grayscale(1) brightness(.7);cursor:default}
.buy.rew{background:linear-gradient(#7ff6ff,#2fc4c4);color:#062a2a;box-shadow:0 3px 0 #146a6a}
.paths{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.path{flex:0 0 150px;display:flex;flex-direction:column;gap:6px}
.path h3{margin:0 0 4px;font:400 17px Lilita;text-align:center}
.path h3 small{opacity:.6;font-size:12px}
.node{position:relative;text-align:left;border-radius:10px;border:2px solid #3a3238;background:#2a252a;padding:6px 8px 6px;min-height:58px;font-family:Nunito,sans-serif;font-weight:700;font-size:11px;line-height:1.25}
.node b{display:block;font:400 13px Lilita;color:var(--cream);margin-bottom:2px}
.node span{opacity:.75}
.node i{position:absolute;right:6px;top:5px;font-style:normal;font:400 11px Lilita;color:var(--gold)}
.node.have{border-color:var(--c);background:color-mix(in srgb,var(--c) 22%,#2a252a)}
.node.can{border-color:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent);animation:glow 1.6s infinite}
.node.near{opacity:.8}.node.lock{opacity:.35}
@keyframes glow{50%{box-shadow:0 0 2px transparent}}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{background:#2a252a;border-radius:10px;padding:6px 2px;text-align:center;font-size:11px;border:2px solid transparent}
.day small{display:block;font:400 11px Lilita;opacity:.7}.day img.pi{width:38px;height:38px;margin:4px auto}
.day.got{opacity:.45}.day.now{border-color:var(--gold);box-shadow:0 0 14px rgba(255,190,60,.35)}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.big-reward{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:6px}
.big-reward img.pi,.big-reward svg{width:96px;height:96px}
.big-reward b{font:400 26px Lilita;color:var(--gold)}
.set label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font:400 16px Lilita}
.set input[type=range]{width:55%}
@media (max-width:560px){.days{grid-template-columns:repeat(4,1fr)}.path{flex-basis:132px}}

/* skill tree */
.modal.tree .card{height:min(94vh,820px);display:flex;flex-direction:column}
.modal.tree .mb{display:flex;flex-direction:column;padding:0;overflow:hidden;flex:1;min-height:0}
.ttabs{display:flex;gap:6px;padding:10px 12px 0;flex-wrap:wrap;justify-content:center}
.ttab{position:relative;display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:12px;border:2px solid #3a3238;background:#221e22;color:var(--cream);font:400 15px Lilita;cursor:pointer;transition:transform .12s,background .15s}
.ttab:hover{transform:translateY(-2px)}
.ttab.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 28%,#221e22);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 60%,#000)}
.ttab small{font-size:11px;opacity:.65}
.ttab i{position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:#ff4a3a;border:2px solid #151215;animation:glow 1.2s infinite}
.tfit{position:relative;flex:1;min-height:0;overflow:hidden;margin:8px 12px 0;border-radius:14px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--c) 14%,#262126),#1b181b);border:1.5px solid color-mix(in srgb,var(--c) 35%,#3a3238)}
.tfit .tgraph{position:absolute;left:50%;top:50%;margin:0;transform-origin:50% 50%}
.tpaths{display:flex;gap:14px;width:max-content;margin:0 auto}
.tpath{background:linear-gradient(color-mix(in srgb,var(--c) 10%,#262126),#211d21);border:1.5px solid color-mix(in srgb,var(--c) 35%,#3a3238);border-radius:14px;padding:8px 8px 10px}
.tpath h3{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 6px;font:400 16px Lilita;color:var(--c);white-space:nowrap}
.tpath h3 small{font-size:11px;color:var(--cream);opacity:.6}
.ph{width:24px;height:24px;display:inline-block}.ph svg{width:24px;height:24px}
.tgraph{position:relative;margin:0 auto}
.tgraph svg{position:absolute;inset:0;overflow:visible}
.tgraph line,.tgraph path{stroke:#4a4048;stroke-width:3;fill:none;stroke-linecap:round}
.tgraph .on{stroke:var(--c)}
.tn{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;padding:5px;border:2.5px solid #4a4048;background:#2a252a;transition:transform .12s}
.tn img.pi,.tn svg{width:100%;height:100%}
.tn em{position:absolute;right:-6px;bottom:-5px;font:400 10px Lilita;font-style:normal;background:#151215;color:var(--cream);border-radius:6px;padding:0 4px;border:1px solid #4a4048}
.tn u{position:absolute;left:-5px;top:-6px;text-decoration:none;font-size:11px;width:16px;height:16px;line-height:16px;border-radius:50%;background:var(--c);color:#1a1214;text-align:center}
.tn.have{border-color:var(--c);background:color-mix(in srgb,var(--c) 30%,#2a252a)}
.tn.can{border-color:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 60%,transparent);animation:glow 1.4s infinite}
.tn.near{opacity:.75}.tn.lock{opacity:.32;filter:grayscale(.7)}
.tn.sel{transform:scale(1.18);box-shadow:0 0 0 3px #fff,0 0 18px color-mix(in srgb,var(--c) 70%,transparent)}
.tinfo{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 16px 14px;border-top:2px solid #2e282e;min-height:68px}
.tinfo b{display:block;font:400 18px Lilita;color:var(--c,var(--gold))}
.tinfo span{font-size:13px;opacity:.85}.tinfo small{display:block;font-size:12px;opacity:.6;margin-top:2px}
.tinfo em{font:400 15px Lilita;font-style:normal;color:var(--c)}
.tinfo .sub{margin:0}

/* rewarded offer: slides in from the right, never during active ad-free first minutes */
#offer{position:absolute;right:calc(env(safe-area-inset-right) + var(--u)*5.6);top:calc(env(safe-area-inset-top) + var(--u)*.8);display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;pointer-events:auto;transform:translateX(140%);opacity:0;transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s;border-color:#2fc4c4;min-height:44px}
#offer.on{transform:none;opacity:1;animation:offerGlow 1.6s infinite}
#offer i{font-style:normal;width:28px;height:28px;border-radius:50%;background:linear-gradient(#7ff6ff,#2fc4c4);color:#062a2a;display:grid;place-items:center;font-size:13px}
#offer b{display:block;font:400 14px Lilita;color:var(--gold)}#offer small{font-size:11px;opacity:.75}
@keyframes offerGlow{50%{box-shadow:0 0 18px rgba(47,196,196,.55)}}
/* the plain web build's stand-in rewarded ad (portals show their own) */
.overlay.fake-ad{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8)}
.overlay.fake-ad .card{padding:20px;text-align:center;font-family:Lilita;gap:8px}
.overlay.fake-ad .cd{font-size:48px;color:var(--gold);margin:8px 0}
.overlay.fake-ad button{min-height:44px;padding:0 16px;border-radius:10px;border:2px solid var(--edge);background:#2a252a}

/* desktop: menus a size up */
@media (min-width:1100px) and (min-height:680px){.card{zoom:1.22;max-height:calc(92vh / 1.22)}}
@media (min-width:1700px) and (min-height:900px){.card{zoom:1.4;max-height:calc(92vh / 1.4)}}
.set select{font:400 15px Lilita;background:#2a252a;color:var(--cream);border:2px solid var(--edge);border-radius:8px;padding:6px 8px;width:55%}

/* the dragon's noise meter (hoard only) */
#noise{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--u)*5.9);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*.5);padding:calc(var(--u)*.25) calc(var(--u)*.9) calc(var(--u)*.3) calc(var(--u)*.35);transition:border-color .3s}
#noiseI{width:calc(var(--u)*2.2);height:calc(var(--u)*2.2)}
#noise small{display:block;font-size:calc(var(--u)*.7);letter-spacing:.08em;opacity:.8}
#noise .track{width:calc(var(--u)*10)}#noise .track i{background:linear-gradient(90deg,#f2a52a,#e2543a)}
#noise.hot{border-color:var(--red);animation:shake .3s infinite}#noise.hot small{color:#ff8a6a;opacity:1}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,200,80,.6),rgba(255,90,20,.85));z-index:15}
#flash.on{animation:flash 1.1s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
#fade{position:fixed;inset:0;pointer-events:none;opacity:0;background:#fff8e8;z-index:40}
/* vault title card (arrival cinematic) */
#vtitle{position:fixed;left:50%;top:22%;transform:translate(-50%,10px);opacity:0;transition:opacity .6s,transform .6s;text-align:center;pointer-events:none;z-index:41;width:min(92vw,720px)}
#vtitle.on{opacity:1;transform:translate(-50%,0)}
#vtitle small{display:block;font-size:calc(var(--u)*1.1);letter-spacing:.2em;color:var(--cream);opacity:.85}
#vtitle b{display:block;font-weight:400;font-size:calc(var(--u)*3.6);line-height:1.05;background:linear-gradient(#fff3b8,#ffcf4a 45%,#c8861a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #3a2208;filter:drop-shadow(0 4px 0 rgba(0,0,0,.5))}
#vtitle span{display:block;font-size:calc(var(--u)*1.8);color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.6)}
#vtitle p{margin:.6em 0 0;font-size:calc(var(--u)*1.1);color:var(--cream);text-shadow:0 2px 6px rgba(0,0,0,.9)}
/* found-treasure card */
#findcard{position:absolute;left:50%;top:34%;transform:translate(-50%,0) scale(.6);opacity:0;display:flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.6) calc(var(--u)*1.4) calc(var(--u)*.6) calc(var(--u)*.6);background:linear-gradient(#3a2c1a,#211a14);border:3px solid var(--gold);border-radius:calc(var(--u)*1);box-shadow:0 0 40px rgba(255,190,60,.55),0 10px 30px rgba(0,0,0,.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
#findcard.on{opacity:1;transform:translate(-50%,0) scale(1)}
#findcard .fi{width:calc(var(--u)*5.5);height:calc(var(--u)*5.5);flex:none;animation:spinin .7s}
@keyframes spinin{from{transform:rotate(-30deg) scale(.3)}}
#findcard small{display:block;font-size:calc(var(--u)*.85);letter-spacing:.1em;color:var(--cream);opacity:.8}
#findcard b{display:block;font-weight:400;font-size:calc(var(--u)*1.9);color:var(--gold)}
#findcard span{font-size:calc(var(--u)*1);color:#9cff8a}
#findcard.rare{top:40%;border-color:#7ff6ff;box-shadow:0 0 30px rgba(127,246,255,.45)}#findcard.rare .fi{width:calc(var(--u)*4);height:calc(var(--u)*4)}#findcard.rare b{font-size:calc(var(--u)*1.5);color:#bff9ff}
/* album */
.aset{background:#2a252a;border-radius:12px;padding:10px 12px;margin-bottom:10px;border:2px solid transparent}
.aset.done{border-color:var(--gold)}.aset.locked{opacity:.55}
.aset h3{margin:0 0 8px;font:400 18px Lilita;color:var(--gold);display:flex;justify-content:space-between;align-items:baseline}
.aset h3 small{font-size:13px;color:var(--cream);opacity:.7}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.ai{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:#1e1a1e;border-radius:10px;padding:8px 4px;font-size:11px}
.ai img.pi{width:56px;height:56px;filter:brightness(0) invert(.35) opacity(.5)}.ai.got img.pi{filter:none}
.ai span{opacity:.6}.ai.got span{opacity:1}
.ab{margin:8px 0 0;font-size:12px;opacity:.8}
.rbtn{width:calc(var(--u)*3.6);height:calc(var(--u)*3.6)}
/* short landscape screens (phones on their side): the menu buttons go in a row so the tool slots fit */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  #rb{flex-direction:row}
  #offer{top:calc(env(safe-area-inset-top) + var(--u)*5.4);right:calc(env(safe-area-inset-right) + var(--u)*.8)}
  body.touch #slots{bottom:calc(env(safe-area-inset-bottom) + var(--u)*11)}
}
.modal.tree .card{zoom:1;max-height:94vh}

/* ================================================================ skin: brass-and-walnut vault UI */
:root{--panel:linear-gradient(180deg,rgba(58,44,38,.92),rgba(30,23,22,.92));--edge:#7a5f3e;--rim:#c8963e}
.panel,.slot,.toast,#prompt{background:var(--panel);border:2px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,230,170,.18),inset 0 -2px 0 rgba(0,0,0,.35),0 3px 0 rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.35)}
#wallet,#left b,.big,.mh h2,.big-reward b,.tpath h3,.tinfo b{text-shadow:0 2px 0 #5a3408,0 0 1px #5a3408}
#wallet b,#left b{-webkit-text-stroke:1px #5a3408;paint-order:stroke fill}
.bump{animation:bump .28s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{40%{transform:scale(1.16)}}
#left .bump{display:inline-block}
/* buttons: chunky, glossy, they squash when pressed */
.big,.buy{position:relative;overflow:hidden;transition:transform .12s cubic-bezier(.3,1.6,.5,1),filter .12s;-webkit-text-stroke:0}
.big::after,.buy::after{content:"";position:absolute;left:6%;right:6%;top:3px;height:42%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.big:hover,.buy:hover:not(:disabled){transform:translateY(-2px) scale(1.03);filter:brightness(1.07)}
.big:active,.buy:active:not(:disabled){transform:translateY(3px) scale(.97)}
.big{border:3px solid #6a3c06;letter-spacing:.03em}
.big.ghost{border-color:rgba(255,240,210,.25)}
.big.rew{border-color:#0c4a4a}
.buy{border:2px solid #6a3c06}
.buy.rew{border-color:#0c4a4a}
.btns .big:first-child:not(.ghost){animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.045)}}
.rbtn{border-radius:50%;background:radial-gradient(circle at 50% 35%,#4a3a30,#201817 72%);border:3px solid var(--rim);box-shadow:inset 0 2px 0 rgba(255,230,170,.3),inset 0 -3px 0 rgba(0,0,0,.4),0 3px 0 #3a2410,0 6px 14px rgba(0,0,0,.45);transition:transform .12s cubic-bezier(.3,1.6,.5,1)}
.rbtn:hover{transform:scale(1.08) rotate(-3deg)}
.rbtn .tip{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:calc(var(--u)*.85);padding:3px 9px;border-radius:8px;background:rgba(20,14,12,.85);border:1.5px solid var(--edge);opacity:0;pointer-events:none;transition:opacity .15s}
.rbtn:hover .tip{opacity:1}
.slot{border-radius:calc(var(--u)*.8);transition:transform .12s cubic-bezier(.3,1.6,.5,1)}
.slot.sel{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 0 0 2px rgba(255,207,74,.35),0 0 18px rgba(255,190,60,.45),0 4px 0 rgba(0,0,0,.45)}
.slot .k{left:-5px;top:-6px;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:6px;background:#151012;border:1.5px solid var(--edge);font-size:11px;opacity:1}
.slot .nm{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font-size:calc(var(--u)*.8);opacity:0;transition:opacity .2s;pointer-events:none;text-shadow:0 1px 2px #000}
.slot:hover .nm,.slot.sel .nm{opacity:1}
/* modals */
.modal{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card{background:linear-gradient(180deg,#30262a,#1d1719);border:3px solid var(--rim);box-shadow:inset 0 1px 0 rgba(255,230,170,.25),0 0 0 3px #1a1010,0 24px 70px rgba(0,0,0,.65);animation:cin .32s cubic-bezier(.3,1.5,.5,1)}
@keyframes cin{from{transform:scale(.8) translateY(20px);opacity:0}}
.mh{background:linear-gradient(180deg,rgba(255,200,90,.12),transparent);border-bottom:2px solid rgba(200,150,62,.35)}
.mh h2{font-size:26px}
.mh .x{border-radius:50%;transition:transform .15s}.mh .x:hover{transform:rotate(90deg) scale(1.1)}
.row{background:linear-gradient(180deg,#3a2f30,#2a2224);border:1.5px solid #4e3f3a;transition:transform .12s}
.row:hover{transform:translateX(3px)}
.sub{font-weight:700}
.toast{font-family:Lilita}

/* coach hints + deposit arrow */
#coach{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--u)*7.6);transform:translate(-50%,-10px);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;padding:calc(var(--u)*.6) calc(var(--u)*1.4);border-radius:99px;font:400 calc(var(--u)*1.25) Lilita;white-space:nowrap;color:#2a1a00;background:linear-gradient(#fff1b8,#ffcf4a);border:3px solid #6a3c06;box-shadow:0 4px 0 #6a3c06,0 0 30px rgba(255,200,80,.5)}
#coach.on{opacity:1;transform:translate(-50%,0);animation:coachB 1.6s ease-in-out infinite}
#coach b{color:#a8360e}
@keyframes coachB{50%{transform:translate(-50%,0) scale(1.04)}}
#guide{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .25s;pointer-events:none}
#guide.on{opacity:1}
#guide i{position:absolute;left:calc(var(--u)*-2.4);top:calc(var(--u)*-2.4);width:calc(var(--u)*4.8);height:calc(var(--u)*4.8);min-width:56px;min-height:56px;filter:drop-shadow(0 0 12px rgba(255,200,80,.9))}
#guide svg{width:100%;height:100%;display:block}
#guide:not(.edge) i{animation:gbob .9s ease-in-out infinite}
@keyframes gbob{50%{translate:0 -8px}}
#guide b{position:absolute;left:50%;top:calc(var(--u)*2.6 + 4px);transform:translateX(-50%);font:400 calc(var(--u)*.95) Lilita;white-space:nowrap;text-shadow:0 2px 0 #000}
.rbtn.hl{animation:hl 1s ease-in-out infinite;border-color:#fff3b0}
@keyframes hl{50%{transform:scale(1.18);box-shadow:0 0 0 6px rgba(255,220,100,.45),0 0 30px rgba(255,200,80,.8)}}
/* menu + help */
.mtabs{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.mtabs button{font:400 16px Lilita;padding:8px 16px;border-radius:10px;border:2px solid var(--edge);background:#241d1f;color:var(--cream)}
.mtabs button.on{background:linear-gradient(#ffe07a,#f2a52a);color:#2a1a00;border-color:#6a3c06}
.help{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.hc{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:linear-gradient(180deg,#3a2f30,#2a2224);border:1.5px solid #4e3f3a}
.hi{flex:none;width:46px;height:46px}
.hc b{display:block;font:400 17px Lilita;color:var(--gold)}
.hc span{font-size:13px;line-height:1.3;opacity:.9}.hc span b{display:inline;font:inherit;font-weight:900;color:var(--cream)}
.keys{margin:12px 0 0;font-size:13px;line-height:2;text-align:center;opacity:.9}
kbd{font:400 12px Lilita;padding:2px 7px;border-radius:6px;background:var(--cream);color:var(--ink);box-shadow:0 2px 0 #8a7a60}
.modal.menu .card{width:min(820px,100%)}
/* tutorial cards */
.tcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 6px 4px}
.ti{width:120px;height:120px;animation:tpop .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes tpop{from{transform:scale(.3) rotate(-20deg);opacity:0}}
.tcard b{font:400 30px Lilita;color:var(--gold);text-shadow:0 3px 0 #5a3408}
.tcard span{font-size:16px;max-width:340px}
.dots{display:flex;gap:6px;margin-top:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#4a3a30}.dots i.on{background:var(--gold);box-shadow:0 0 8px var(--gold)}

#arms{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#offer{pointer-events:none;visibility:hidden;transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s,visibility 0s .45s}#offer.on{pointer-events:auto;visibility:visible;transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s,visibility 0s}

/* Coin Burst button: above the tool slots, a ring empties while it recharges */
#bBurst{position:absolute;left:calc(env(safe-area-inset-left) + var(--u)*.8);bottom:calc(env(safe-area-inset-bottom) + var(--u)*7);width:calc(var(--u)*4.2);height:calc(var(--u)*4.2);min-width:52px;min-height:52px;border-radius:50%;padding:calc(var(--u)*.55);pointer-events:auto;border:3px solid var(--gold);background:radial-gradient(circle at 50% 35%,#5a4620,#241a10 72%);box-shadow:0 0 18px rgba(255,200,80,.55),0 3px 0 #3a2410;animation:glow 1.6s infinite}
#bBurst span{display:block;width:100%;height:100%}
#bBurst em{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font:400 calc(var(--u)*.85) Lilita;font-style:normal;padding:0 7px;border-radius:7px;background:#151012;border:1.5px solid var(--gold);white-space:nowrap}
#bBurst.cool{animation:none;border-color:var(--edge);box-shadow:0 3px 0 #3a2410;filter:saturate(.3) brightness(.8)}
#bBurst.cool::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(rgba(10,6,4,.7) calc(var(--cd)*360deg),transparent 0);pointer-events:none}

.stats{display:flex;gap:8px;justify-content:center;margin:8px 0}
.stats>div{flex:1;max-width:160px;text-align:center;padding:8px 6px;border-radius:12px;background:linear-gradient(180deg,#3a2f30,#2a2224);border:1.5px solid #4e3f3a}
.stats small{display:block;font:400 11px Lilita;letter-spacing:.12em;opacity:.7}
.stats b{display:block;font:400 22px Lilita;color:var(--gold)}
.stats em{display:block;font:400 12px Lilita;font-style:normal;color:#7ff6a0}
.sub.center{text-align:center}
/* narrow portrait phones: the vault counter gets its own row under the wallet, the goal and hints move down */
@media (orientation:portrait) and (max-width:620px){
  #left{left:calc(env(safe-area-inset-left) + var(--u)*.8);transform:none;top:calc(env(safe-area-inset-top) + var(--u)*4.4);text-align:left;min-width:0;padding:calc(var(--u)*.3) calc(var(--u)*1)}
  #left b{font-size:calc(var(--u)*1.8)}
  #goal{top:calc(env(safe-area-inset-top) + var(--u)*9.6)}
  #coach{top:calc(env(safe-area-inset-top) + var(--u)*14);white-space:normal;max-width:90vw;text-align:center}
  #boost{top:calc(env(safe-area-inset-top) + var(--u)*13)}
}

/* phones on their side (very short screens): tighter modals so nothing hides below the fold */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .modal{padding:4px}
  .card{max-height:98vh}
  .mh{padding:2px 12px}.mh h2{font-size:20px}.mh .x{min-height:36px}
  .tcard{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding:4px}
  .tcard .ti{width:64px;height:64px}.tcard .ti img,.tcard .ti svg{width:100%;height:100%}.dots{margin-top:0}
  .tcard b{font-size:24px}.tcard span{flex-basis:100%}
  .modal.tree .card{height:98vh;max-height:98vh}
  .ttabs{flex-wrap:nowrap;gap:4px;padding:4px 8px 0}
  .ttab{font-size:12px;padding:2px 6px 2px 2px;gap:3px}.ttab img{width:22px;height:22px}.ttab small{display:none}
  .tfit{margin:4px 8px 0}
  .tinfo{min-height:0;padding:4px 12px 6px}.tinfo b{font-size:15px}.tinfo span{font-size:11px}
}

/* narrow portrait phones: path tabs become a single row of icons so the tree gets the room */
@media (max-width:620px) and (max-aspect-ratio:1/1){
  .ttabs{flex-wrap:nowrap;gap:3px;padding:6px 6px 0}
  .ttab{flex:1;flex-direction:column;gap:0;padding:3px 0 2px;font-size:11px;min-width:0}
  .ttab b{display:none}.ttab .ph{width:28px;height:28px}.ttab .ph img,.ttab .ph svg{width:100%;height:100%}
  .ttab small{font-size:10px;opacity:.8}
  .ttab.on b{display:none}
  .tfit{margin:6px 6px 0}
  .tinfo{min-height:0;padding:6px 10px 8px}.tinfo span,.tinfo .sub{font-size:12px}
}

/* pause menu: quick buttons on top, compact help cards, no browser scrollbar */
.modal.menu .card{width:min(1040px,100%)}
.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.qb{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 7px;border-radius:14px;border:2px solid var(--edge);background:linear-gradient(180deg,#43352f,#2a2124);color:var(--cream);font:400 16px Lilita;box-shadow:inset 0 1px 0 rgba(255,230,170,.2),0 4px 0 #120c0c;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
.qb:hover{transform:translateY(-3px);border-color:var(--rim);box-shadow:inset 0 1px 0 rgba(255,230,170,.3),0 7px 0 #120c0c,0 0 18px rgba(255,190,70,.35)}
.qb:active{transform:translateY(2px);box-shadow:0 1px 0 #120c0c}
.qb.go{background:linear-gradient(#ffe07a,#f2a52a);color:#2a1a00;border-color:#6a3c06}
.qi{width:46px;height:46px}.qi img,.qi svg{width:100%;height:100%}
.qb kbd{position:absolute;left:6px;top:6px;font-size:11px;padding:0 5px}
.qn{position:absolute;right:-5px;top:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#ff4a3a;color:#fff;font:400 13px/22px Lilita;font-style:normal;border:2px solid #151215}
.modal.menu .help{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:6px}
.modal.menu .hc{padding:6px 8px;gap:8px}
.modal.menu .hi{width:36px;height:36px}
.modal.menu .hc b{font-size:15px}.modal.menu .hc span{font-size:12px;line-height:1.28}
.modal.menu .keys{margin-top:8px;line-height:1.9;font-size:12px}
.mb{scrollbar-width:thin;scrollbar-color:#8a6a3a transparent}
.mb::-webkit-scrollbar{width:8px}.mb::-webkit-scrollbar-track{background:transparent}
.mb::-webkit-scrollbar-thumb{background:linear-gradient(#c8963e,#7a5f3e);border-radius:8px}
@media (max-width:620px){.quick{gap:4px}.qb{font-size:12px;padding:6px 2px}.qi{width:34px;height:34px}.qb kbd{display:none}}
@media (max-height:520px) and (min-aspect-ratio:1/1){.quick{margin-bottom:6px}.qb{flex-direction:row;justify-content:center;gap:6px;padding:4px}.qi{width:28px;height:28px}.qb kbd{display:none}}
.qplay{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:400 34px Lilita;font-style:normal;color:#2a1a00;text-shadow:0 2px 0 rgba(255,255,255,.4)}

/* mouse freed with Esc: the game keeps running, a hint in the middle, the rail buttons are there to click */
#freeHint{position:fixed;left:50%;top:52%;transform:translate(-50%,-50%);padding:8px 18px;border-radius:12px;background:rgba(20,14,12,.78);border:1.5px solid rgba(200,150,62,.5);color:var(--cream);font:700 16px Nunito,sans-serif;pointer-events:none;opacity:0;transition:opacity .2s;z-index:15;white-space:nowrap}
body.free:not(.cine) #freeHint{opacity:1}
.rk{position:absolute;left:-3px;bottom:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:6px;background:var(--cream);color:var(--ink);font:400 11px/18px Lilita;font-style:normal;box-shadow:0 2px 0 #8a7a60;pointer-events:none}
.rk:empty,body.touch .rk{display:none}
body.free .rbtn{animation:freepulse 1.6s ease-in-out infinite}
@keyframes freepulse{50%{box-shadow:0 0 0 3px rgba(255,210,110,.35),0 0 18px rgba(255,190,70,.45)}}
.modal.menu .card{zoom:1;max-height:94vh}
.modal.menu .hc span b{font-size:inherit}
@media (min-width:1000px){.modal.menu .help{grid-template-columns:repeat(5,1fr)}}
/* skill tree on desktop-sized screens: a bigger card and readable text (the card opts out of the global zoom) */
@media (min-width:1100px) and (min-height:680px){
  .modal.tree .card{width:min(1400px,96vw);height:min(94vh,1000px)}
  .modal.tree .mh h2{font-size:30px}.modal.tree .mh .pts{font-size:17px}
  .ttabs{gap:8px;padding:12px 14px 0}
  .ttab{font-size:18px;padding:7px 14px 7px 7px;gap:8px}.ttab .ph{width:30px;height:30px}.ttab .ph img,.ttab .ph svg{width:100%;height:100%}
  .ttab small{font-size:13px}
  .tinfo{padding:12px 20px 16px;min-height:84px}
  .tinfo b{font-size:23px}.tinfo span,.tinfo .sub{font-size:16px}.tinfo small{font-size:14px}.tinfo em{font-size:19px}
  .tinfo .buy{font-size:18px;padding:10px 20px}
}
.tn{cursor:pointer}
.tn.can:hover,.tn.have:hover,.tn.near:hover{transform:scale(1.1)}
.tn.just{animation:tlearn .45s ease-out}
@keyframes tlearn{0%{transform:scale(1.6);box-shadow:0 0 0 0 var(--c),0 0 30px var(--c)}100%{transform:scale(1.18)}}
.tinfo .dbl{display:block;font-size:12px;opacity:.55;margin-top:3px}