:root{--play-left:0px;--play-right:0px;--play-w:100vw}
html,body{background:
radial-gradient(circle at 50% 10%,rgba(122,74,45,.22),transparent 28%),
linear-gradient(90deg,#090707 0%,#1a0f0b 16%,#0d0a0b 34%,#0b0910 50%,#0d0a0b 66%,#1a0f0b 84%,#090707 100%)}
body:before,body:after{content:"";position:fixed;inset:0;pointer-events:none}
body:before{z-index:1;background:
repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--play-left) - 1px),rgba(241,185,102,.13) var(--play-left),transparent calc(var(--play-left) + 1px)),
repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 5px);mix-blend-mode:screen;opacity:.7}
body:after{z-index:2;background:radial-gradient(ellipse at center,transparent 46%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.58) 100%)}
canvas{z-index:0;filter:saturate(1.08) contrast(1.045);box-shadow:0 0 100px rgba(0,0,0,.72),0 0 0 1px rgba(241,185,102,.14);will-change:translate,filter}
#hud{left:calc(var(--play-left) + 12px);right:calc(var(--play-right) + 12px);padding-right:0}
.fullscreen-toggle{right:calc(var(--play-right) + 10px);border-color:rgba(101,232,255,.36);background:linear-gradient(135deg,rgba(15,18,32,.82),rgba(70,31,63,.72));box-shadow:0 8px 26px rgba(0,0,0,.34),0 0 18px rgba(101,232,255,.08)}
.ov{background:
radial-gradient(circle at 50% 22%,rgba(215,85,130,.13),transparent 30%),
linear-gradient(180deg,rgba(15,9,8,.79),rgba(4,5,13,.95));backdrop-filter:blur(5px) saturate(1.1)}
.p{position:relative;overflow:hidden;border-color:rgba(241,185,102,.55);box-shadow:0 35px 120px rgba(0,0,0,.6),0 0 70px rgba(215,85,130,.08),inset 0 1px rgba(255,255,255,.06)}
.p:before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(120deg,rgba(101,232,255,.08),transparent 28%,transparent 72%,rgba(255,98,179,.08));mix-blend-mode:screen}
h1{text-shadow:0 10px 40px rgba(0,0,0,.52),2px 0 0 rgba(101,232,255,.08),-2px 0 0 rgba(255,98,179,.08)}
h1 .babel{background:linear-gradient(90deg,#f1b966,#ff78ba 52%,#65e8ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.tower-mark:after{background:#fff2c6;box-shadow:0 0 18px #f2c98b,0 0 42px rgba(255,120,186,.48)}
.result-box{border-color:rgba(101,232,255,.18);box-shadow:inset 0 0 24px rgba(101,232,255,.03)}
.pro-share-preview{position:relative;margin:16px 0 18px;padding:10px;border:1px solid rgba(241,185,102,.28);border-radius:14px;background:rgba(3,5,12,.72);box-shadow:0 16px 44px rgba(0,0,0,.28)}
.pro-share-preview>span{display:block;margin:0 0 8px;color:#f1b966;font-size:.62rem;font-weight:900;letter-spacing:.16em;text-align:left}
.pro-share-preview canvas{position:static;width:100%;height:auto;display:block;border-radius:9px;filter:none;box-shadow:0 8px 28px rgba(0,0,0,.38)}
button.share{background:linear-gradient(115deg,#262c47,#663557 55%,#8a385d);box-shadow:0 10px 26px rgba(215,85,130,.16),inset 0 1px rgba(255,255,255,.1)}
.actions button,.actions .link-button{transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
@media(hover:hover){.actions button:hover,.actions .link-button:hover{transform:translateY(-2px);border-color:rgba(101,232,255,.62);box-shadow:0 10px 28px rgba(0,0,0,.24)}}
body.fx-impact canvas{animation:babel-impact .16s steps(2,end)}
@keyframes babel-impact{0%{filter:saturate(1.7) contrast(1.15) drop-shadow(3px 0 rgba(255,78,157,.45)) drop-shadow(-3px 0 rgba(101,232,255,.38))}55%{filter:saturate(1.28) contrast(1.08) drop-shadow(-2px 0 rgba(255,78,157,.26)) drop-shadow(2px 0 rgba(101,232,255,.24))}100%{filter:saturate(1.08) contrast(1.045)}}

/* GAME OVER is code-driven. The image inside it is the exact share artifact. */
#over{align-items:flex-start;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
#over .result-system{width:min(100%,620px);margin:auto;padding:18px 18px 22px;background:linear-gradient(165deg,rgba(28,18,13,.98),rgba(8,9,16,.985));overflow:visible}
#over .result-system:before{background:linear-gradient(145deg,rgba(216,169,99,.08),transparent 34%,transparent 70%,rgba(126,74,47,.09))}
.result-system>.kicker{margin-bottom:5px;color:#d9bd81}
.result-system .gameover-title{font-size:clamp(28px,7vw,46px);line-height:1;letter-spacing:.025em;color:#f3dfbb;text-shadow:0 5px 24px rgba(0,0,0,.6)}
.result-system .gameover-sub{margin:7px 0 13px;color:#bfa87d;font:700 clamp(.62rem,2.3vw,.78rem)/1.3 ui-monospace,monospace;letter-spacing:.1em}
.result-system>.result-grid,.result-system>.verse,.result-system>.promo,.result-system>.pro-share-preview{display:none!important}
.result-card-shell{position:relative;width:min(100%,500px);aspect-ratio:4/5;margin:0 auto 15px;border:1px solid rgba(218,176,104,.55);border-radius:10px;overflow:hidden;background:#17100b;box-shadow:0 18px 48px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025)}
#resultCardPreview{display:block;width:100%;height:100%;object-fit:cover;background:#17100b}
#resultCardPreview:not([src]){visibility:hidden}
#resultCardLoading{position:absolute;z-index:1;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 35%,rgba(176,128,70,.14),transparent 40%),#17100b;color:#cfb27d;font:800 .68rem/1.4 ui-monospace,monospace;letter-spacing:.12em;text-align:center}
#resultCardLoading[hidden]{display:none}
.result-system .actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.result-system .actions button,.result-system .actions .link-button{min-height:46px;padding:11px 12px;font-size:.86rem}
.result-system #again{background:linear-gradient(135deg,#9f345c,#d75582)}
.result-system #saveResult{border-color:rgba(217,189,129,.42)}
.result-system #shareStatus{margin:9px 4px 0;min-height:1.15em;color:#d9bd81}

@supports(backdrop-filter:blur(8px)){#hud>div{backdrop-filter:blur(5px)}}
@media(max-width:520px){.fullscreen-toggle{right:calc(var(--play-right) + 8px)}.pro-share-preview{margin:12px 0 14px;padding:8px}.pro-share-preview>span{font-size:.56rem}#over .result-system{width:min(96vw,480px);padding:14px 12px 17px;border-radius:15px}.result-system>.kicker{font-size:.57rem}.result-system .gameover-sub{margin-bottom:10px}.result-card-shell{width:min(84vw,390px);margin-bottom:11px}.result-system .actions{grid-template-columns:1fr 1fr}.result-system .actions button,.result-system .actions .link-button{font-size:.78rem;min-height:43px}}
@media(max-width:370px){.result-card-shell{width:min(82vw,350px)}.result-system .actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){body.fx-impact canvas{animation:none}.actions button,.actions .link-button{transition:none}}
