:root{
  --text:#f4f3f7;
  --tip:#ff6b35;    /* donasjon */
  --sub:#a28bff;    /* sub */
  --gift:#3fdc9c;   /* gave */
  --display:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:transparent;color:var(--text);font-family:var(--display);font-weight:700}
/* the stage is the whole browser source (1920×1080 in OBS); every size is in cqh so it scales */
#stage{position:fixed;inset:0;container-type:size;overflow:hidden}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#game{display:none}
.demo #game{display:block}
.demo body{background:#000}
#fx{pointer-events:none;z-index:4}

/* the island: a black pill fixed at top centre; the logo is its "camera" and never moves */
#island{position:absolute;top:4cqh;left:50%;transform:translateX(-50%);width:40cqh;height:6.4cqh;background:#060608;border-radius:3.2cqh;overflow:hidden;z-index:3;box-shadow:0 1.2cqh 4cqh rgba(0,0,0,.45),inset 0 0 0 .12cqh rgba(255,255,255,.07)}
#mark{position:absolute;top:.8cqh;left:50%;margin-left:-2.4cqh;width:4.8cqh;height:4.8cqh;border-radius:50%;background:var(--text);color:#060608;display:grid;place-items:center;font-weight:900;font-size:2.8cqh;line-height:1;z-index:2}
#mark span{transform:translateY(-.08cqh)}
#mark::after{content:"";position:absolute;inset:-.45cqh;border-radius:50%;border:.28cqh solid var(--acc,var(--tip));opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s}
#mark.on::after{opacity:1;transform:scale(1)}
.side{position:absolute;top:0;height:6.4cqh;display:flex;align-items:center;gap:1.2cqh;white-space:nowrap;font-size:2.1cqh;font-weight:800;font-variant-numeric:tabular-nums}
.lead{right:calc(50% + 4cqh);transform-origin:100% 50%}
.trail{left:calc(50% + 4cqh);transform-origin:0 50%}
.side .bar{width:6.4cqh;height:.7cqh;border-radius:9cqh;background:rgba(255,255,255,.14);overflow:hidden}
.side .bar i{display:block;height:100%;background:var(--sub);border-radius:inherit;transform-origin:left;transform:scaleX(0)}
#body{position:absolute;top:6.4cqh;left:50%;transform:translateX(-50%);width:max-content;max-width:64cqh;padding:.8cqh 3.6cqh 3.2cqh;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5cqh}
.c-amt{font-size:7cqh;font-weight:900;line-height:1.05;letter-spacing:-.02em;color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap;display:flex}
#body.t-big .c-amt{font-size:8.6cqh}
#body.t-epic .c-amt{font-size:9.4cqh}
.c-who{font-size:2.7cqh;font-weight:800;line-height:1.2}
.c-who b{font-weight:900}
.c-msg{font-size:2.3cqh;font-weight:700;line-height:1.3;color:rgba(244,243,247,.72);max-width:56cqh;overflow-wrap:anywhere}
.c-msg:empty{display:none}
.c-bar{position:absolute;left:0;right:0;bottom:0;height:.5cqh;background:rgba(255,255,255,.06);opacity:0}
.c-bar i{display:block;height:100%;background:var(--acc);transform-origin:left;transform:scaleX(0)}
#island .glow{position:absolute;left:-20%;right:-20%;bottom:-70%;height:120%;background:radial-gradient(closest-side,var(--acc),transparent);opacity:0;pointer-events:none;mix-blend-mode:screen}

/* letters, words and odometer columns are all individually sprung */
.ch,.wd{display:inline-block;white-space:pre;will-change:transform}
.dig{display:inline-block;height:1.05em;overflow:hidden;vertical-align:top}
.strip{display:block;will-change:transform}
.strip>span{display:block;height:1.05em;text-align:center}

#takeover{position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none;visibility:hidden}
#takeover .dim{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(13,13,18,.55),rgba(13,13,18,.9))}
#takeover .big{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4cqh}
#takeover .num{font-size:22cqh;font-weight:900;line-height:1.05;letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap;display:flex}
#takeover .nm{font-size:4cqh;font-weight:900}


/* ?demo test panel */
#panel{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:rgba(10,10,14,.82);backdrop-filter:blur(12px);max-width:calc(100vw - 32px)}
#panel .btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#panel button{font:inherit;font-weight:800;font-size:13px;color:var(--text);background:#23232c;border:0;border-radius:9px;padding:8px 11px;cursor:pointer}
#panel button:hover{background:#2e2e39}
#panel button[aria-pressed="true"]{background:var(--text);color:#0d0d12}
#panel button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
#panel .q{font-size:12px;color:#9a98a8;padding:0 6px;font-variant-numeric:tabular-nums}