@font-face{font-family:"Lilita One";src:url(LilitaOne.ttf) format('truetype');font-display:block}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#1a120c;color:#fff;font-family:"Lilita One","Arial Rounded MT Bold",system-ui,Arial,sans-serif;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;letter-spacing:.3px}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.vid{display:inline-block;width:1.25em;height:.9em;border-radius:3px;background:#fff;margin-right:.45em;vertical-align:-.1em;position:relative;flex-shrink:0}
.vid:after{content:"";position:absolute;left:38%;top:22%;border-left:7px solid #7a2bd6;border-top:4px solid transparent;border-bottom:4px solid transparent}
/* HUD */
#hud{position:fixed;left:0;right:var(--side,0);top:0;padding:calc(env(safe-area-inset-top) + 8px) 8px 0;pointer-events:none;z-index:5}
.hrow{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;max-width:720px;margin:0 auto}
.res{display:flex;gap:5px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 4px;border-radius:999px;background:rgba(24,14,8,.82);border:1.5px solid rgba(255,190,110,.35);font-size:17px;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.4);position:relative}
.chip img{width:24px;height:24px}
.chip small{position:absolute;left:30px;top:100%;margin-top:1px;font-size:10px;color:#bfe8a0;text-shadow:0 1px 2px #000}
.chip.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.15)}}
.ibtn{pointer-events:auto;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:rgba(24,14,8,.85);color:#fff;font:15px "Lilita One",sans-serif;cursor:pointer;flex-shrink:0}
.hrow2{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:16px}
#dayPill{display:flex;align-items:center;gap:6px;background:rgba(24,14,8,.82);border:1.5px solid rgba(255,200,90,.5);border-radius:999px;padding:3px 10px 3px 4px;box-shadow:0 3px 10px rgba(0,0,0,.4)}
#dayPill img{width:26px;height:26px}#dayPill b{font-size:15px;font-weight:400;color:#ffe08a}#dayPill small{font-size:12px;color:#ffd8a8;min-width:26px}
#dayPill.night{border-color:rgba(140,160,255,.6)}#dayPill.night b{color:#c8d4ff}
.dbar{width:70px;height:7px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
#dayFill{height:100%;width:0;background:linear-gradient(90deg,#ffd23a,#ff7a2a)}
#dayPill.night #dayFill{background:linear-gradient(90deg,#7a8aff,#c8d4ff)}
#boostPill{display:flex;align-items:center;gap:4px;background:rgba(80,40,140,.85);border:1.5px solid #c89aff;border-radius:999px;padding:3px 10px 3px 4px;font-size:14px}
#boostPill img{width:22px;height:22px}
#wallBar,#bossbar{width:min(70%,320px);margin:6px auto 0;text-align:center}
#wallBar small{font-size:11px;letter-spacing:2px;color:#ffd8a8;text-shadow:0 1px 2px #000}
.wb,.bb{height:9px;border-radius:6px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);overflow:hidden;margin-top:2px}
#wallFill{height:100%;width:100%;background:linear-gradient(90deg,#c8742a,#ffc05a)}
#bossname{font-size:14px;letter-spacing:2px;color:#ff6af0;text-shadow:0 0 10px rgba(255,40,200,.7),0 2px 0 #000}
#bossfill{height:100%;width:100%;background:linear-gradient(90deg,#c02aff,#ff6af0)}
.btn.sm{min-height:36px;font-size:14px;padding:6px 12px;border-radius:12px}
#banner{position:fixed;left:0;right:var(--side,0);top:30%;text-align:center;z-index:6;pointer-events:none;animation:bIn .45s cubic-bezier(.2,1.6,.4,1)}
#bannerT{font-size:clamp(34px,9vw,56px);color:#ff7a5a;text-shadow:0 0 18px rgba(255,60,0,.6),0 4px 0 #2a0800}
#bannerS{letter-spacing:3px;color:#ffe8d0;font-size:15px;margin-top:4px;text-shadow:0 2px 4px #000}
#banner.good #bannerT{color:#ffd23a;text-shadow:0 0 18px rgba(255,170,0,.7),0 4px 0 #3a2000}
@keyframes bIn{from{transform:scale(2.2);opacity:0}to{transform:scale(1);opacity:1}}
#tut{position:fixed;left:0;right:var(--side,0);top:calc(env(safe-area-inset-top) + 118px);text-align:center;z-index:6;pointer-events:none}
#tutT{display:inline-block;font-size:24px;padding:4px 16px;border-radius:12px;background:rgba(0,0,0,.55);text-shadow:0 2px 0 #000;animation:pulse 1.1s ease-in-out infinite}
/* quest */
#quest{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:6;width:min(92vw,400px);border:0;border-radius:14px;padding:7px 12px 8px;background:rgba(24,14,8,.88);border:1.5px solid rgba(255,190,110,.4);color:#fff;font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.qh{display:flex;justify-content:space-between;gap:8px;font-size:14px}.qh b{font-weight:400;color:#ffd27a}
.qbar{height:7px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:4px}
#qFill{height:100%;width:0;background:linear-gradient(90deg,#6be36a,#2a9a32);transition:width .2s}
.qc{display:none}
#quest.done{background:linear-gradient(180deg,#6be36a,#2a9a32);border-color:#c8ffc0;animation:qpulse 1s ease-in-out infinite}
#quest.done .qc{display:block;position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:20px;text-shadow:0 2px 0 #165a1a}
#quest.done .qh b,#quest.done .qbar{visibility:hidden}
body.land #quest{left:8px;transform:none;width:min(300px,30vw);bottom:calc(env(safe-area-inset-bottom) + 8px)}
body.land #quest.done{animation:none}
/* building panel */
#panel{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:8;width:min(96vw,420px);background:linear-gradient(180deg,rgba(58,36,22,.97),rgba(30,18,10,.97));border:2px solid rgba(255,190,110,.45);border-radius:18px;padding:10px 12px 12px;box-shadow:0 12px 30px rgba(0,0,0,.6);animation:pIn .2s ease-out}
@keyframes pIn{from{transform:translate(-50%,30px);opacity:0}}
body.land #panel{left:auto;right:8px;transform:none;top:calc(env(safe-area-inset-top) + 8px);bottom:auto;width:calc(var(--side) - 16px);max-height:calc(100% - 16px);overflow:auto;animation:none}
.phd{display:flex;justify-content:space-between;align-items:center}
.phd b{font-size:22px;font-weight:400;color:#ffe08a;margin-right:8px}.phd span{font-size:14px;color:#ffd8a8;background:rgba(0,0,0,.3);padding:2px 8px;border-radius:8px}
#pDesc{font-family:system-ui,Arial,sans-serif;font-weight:600;font-size:12px;color:#e8d8c0;margin:2px 0 8px}
.prow{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);border-radius:12px;padding:7px 8px;margin-top:6px}
.pl{flex:1;min-width:0}.pl b{display:block;font-weight:400;font-size:15px}.pl small{font-family:system-ui,Arial,sans-serif;font-weight:700;font-size:12px;color:#d8c8b0}.pl em{font-style:normal;color:#9cff8a}
.plock{font-family:system-ui,Arial,sans-serif;font-weight:800;font-size:12px;color:#ffb08a;max-width:46%;text-align:right}
.btn.up{min-width:112px;min-height:46px;padding:6px 10px;flex-direction:column;gap:2px;font-size:14px}
.btn.up.off{filter:grayscale(.7) brightness(.75)}
.btn.up.hint{animation:pulse .8s ease-in-out infinite;box-shadow:0 5px 0 #165a1a,0 0 0 4px rgba(255,255,255,.5),0 0 24px rgba(120,255,120,.8)}
.btn.shake{animation:shk .3s}
@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.cost{display:inline-flex;align-items:center;gap:2px;font-size:14px}.cost img{width:18px;height:18px}.cost.no{color:#ffb0a0}
/* screens */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px);background:rgba(16,10,6,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#sMenu{backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-start;background:linear-gradient(180deg,rgba(16,10,6,.55),rgba(16,10,6,.05) 45%,rgba(16,10,6,.7))}
.logo{text-align:center;margin-top:5vh;line-height:.82;filter:drop-shadow(0 8px 14px rgba(0,0,0,.8))}
.logo span{display:block}
.l1{font-size:clamp(60px,19vw,110px);background:linear-gradient(180deg,#fff2a0,#ffb02a 45%,#e8461a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #3a1404}
.l2{font-size:clamp(54px,17vw,98px);background:linear-gradient(180deg,#ffffff,#ffe0b8 55%,#c88a5a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #3a1404}
.tag{letter-spacing:2px;font-size:15px;color:#ffd27a;margin-top:12px;text-shadow:0 2px 3px #000}
.grow{flex:1;min-height:4px}
.mstats{font-size:16px;color:#ffe8d0;text-shadow:0 2px 3px #000}
.btn{pointer-events:auto;cursor:pointer;border:0;border-radius:16px;padding:12px 18px;font:17px "Lilita One",sans-serif;letter-spacing:.5px;color:#fff;background:linear-gradient(180deg,#6a4a32,#3e2a1a);box-shadow:0 5px 0 #1e120a,0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .08s,filter .1s;text-shadow:0 2px 0 rgba(0,0,0,.35);display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:48px}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(3px)}
.btn.big{font-size:24px;padding:12px 22px;width:100%;max-width:330px;min-height:58px}
.btn.green{background:linear-gradient(180deg,#7be36a,#2a9a32);box-shadow:0 5px 0 #165a1a,0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.rw{background:linear-gradient(180deg,#b06bff,#7a2bd6);box-shadow:0 5px 0 #43147a,0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.ghost{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.legal{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom) + 8px);font-size:12px;color:#c8b8a0}
.panel{background:linear-gradient(180deg,#4a2e1c,#24160c);border:2px solid rgba(255,190,110,.4);border-radius:22px;padding:16px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.6);max-height:100%;overflow:auto}
.ttl{font-size:30px;font-weight:400}
.keys{font-family:system-ui,Arial,sans-serif;font-size:12px;color:#d8c8b0;text-align:center;font-weight:700}
.bigic{width:64px;height:64px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.banner{font-size:clamp(28px,8vw,36px);text-align:center;color:#ffe08a;text-shadow:0 3px 0 #3a1404}
.near{font-family:system-ui,Arial,sans-serif;font-weight:800;color:#ffd8a8;text-align:center;font-size:14px}.near b{color:#fff}
.stats{display:flex;gap:10px;width:100%}
.stats div{flex:1;text-align:center;background:rgba(0,0,0,.25);border-radius:12px;padding:6px 4px}
.stats b{display:flex;align-items:center;justify-content:center;gap:3px;font-size:24px;font-weight:400}.stats b img{width:22px;height:22px}
.stats small{font-size:12px;color:#d8c8b0;letter-spacing:1px;text-transform:uppercase}
.lostrow,.bonus{width:100%;display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}.lostrow small,.bonus small{color:#d8c8b0;font-size:13px}
#dLost .rchip{color:#ffb0a0}.ok{color:#9cff8a;font-size:15px}
.joined{display:flex;align-items:center;gap:8px;font-family:system-ui,Arial,sans-serif;font-weight:800;font-size:13px;color:#bfe8ff;background:rgba(80,160,255,.15);border-radius:12px;padding:6px 10px}.joined img{width:30px;height:30px}
.rchip{display:inline-flex;align-items:center;gap:3px;font-size:20px;background:rgba(0,0,0,.3);border-radius:10px;padding:3px 9px 3px 4px;margin:2px}.rchip img{width:24px;height:24px}
.gain{display:flex;flex-wrap:wrap;justify-content:center}
.mini .rchip{font-size:13px;padding:1px 5px 1px 2px;background:rgba(0,0,0,.2)}.mini .rchip img{width:15px;height:15px}
.next{font-family:system-ui,Arial,sans-serif;font-weight:800;font-size:12px;color:#ffb08a;text-align:center}
#dDays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%}
.dd{background:rgba(0,0,0,.3);border-radius:10px;padding:4px 2px;text-align:center;font-size:11px;position:relative}.dd img{width:100%;max-width:34px}.dd small{display:block;color:#d8c8b0}.dd b{position:absolute;right:3px;bottom:2px;font-weight:400;font-size:12px}
.dd.past{opacity:.4}.dd.now{background:linear-gradient(180deg,#7be36a,#2a9a32);box-shadow:0 0 14px rgba(120,255,120,.6)}.dd.now small{color:#fff}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 90px);transform:translate(-50%,-10px);opacity:0;z-index:40;background:rgba(24,14,8,.94);border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:12px;transition:.25s;pointer-events:none;text-align:center;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}
#adBlock{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.spin{width:46px;height:46px;border-radius:50%;border:5px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#consent{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 10px);z-index:30;max-width:560px;margin:0 auto;background:rgba(24,14,8,.96);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center;font:600 12px system-ui,Arial,sans-serif;color:#e8dcc8;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#consent a{color:#ffd27a}
.cbtns{display:flex;gap:6px;flex-shrink:0}
.cbtn{pointer-events:auto;cursor:pointer;border:0;border-radius:10px;padding:8px 12px;font-weight:900;color:#fff;background:rgba(255,255,255,.12)}
.cbtn.ok{background:#2a9a32}
@media (min-aspect-ratio:4/3){#consent{top:calc(env(safe-area-inset-top) + 10px);bottom:auto}.logo{margin-top:2vh}}
@media (max-height:520px){.l1{font-size:64px}.l2{font-size:58px}.btn.big{min-height:46px;font-size:19px}.panel{padding:10px;gap:6px}.bigic{width:44px;height:44px}.hrow2{margin-top:12px}#tut{top:calc(env(safe-area-inset-top) + 92px)}}
@media (max-width:400px){.chip{font-size:15px}.chip img{width:20px;height:20px}.chip small{left:25px}}
@keyframes qpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}
