/* (c) 2026 WB. All rights reserved. Do not copy, host or redistribute without written permission.‍​‌​‌​‌‌‌​‌​​​​‌​​​‌​‌‌​‌​​‌‌‌​​‌​‌​​‌​‌​​‌​​‌‌​​​​‌​‌‌​‌​​‌‌​​‌​​​‌‌​​​​​​‌‌​​‌​​​‌‌​‌‌​‍ */
/* 9ja Life: look of every screen before the game (splash, menu, onboarding).
   Language: danfo yellow & black destination boards, Ankara / adire / aso-oke patterns, NIN-slip ID cards, bus-stop journey bar. */
:root{
  --danfo:#ffc400;--amber:#ffb000;--paper:#f6efdc;--paper2:#e9dfc2;--ink:#0a1713;--laterite:#d1642a;--adire:#15306e;--kola:#7a2e1d;
  --display:"Bahnschrift","Franklin Gothic Medium","Arial Narrow","Trebuchet MS",system-ui,sans-serif;
  --flag:linear-gradient(90deg,#008751 33.3%,#fff 33.3% 66.6%,#008751 66.6%);
}
body.pre{background:#0a1713;background-image:radial-gradient(1100px 650px at 85% -10%,#1b3b6e 0,transparent 62%),radial-gradient(900px 600px at -10% 105%,#0e5238 0,transparent 58%),linear-gradient(#0a1713,#0a1713);background-attachment:fixed}
body.pre::before{content:"";position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%2315306e'/%3E%3Cg fill='none' stroke='%23dfe8ff' stroke-width='2' opacity='.85'%3E%3Cpath d='M28 4l24 24-24 24L4 28z'/%3E%3Cpath d='M28 14l14 14-14 14L14 28z'/%3E%3C/g%3E%3Cg fill='%23dfe8ff' opacity='.9'%3E%3Ccircle cx='28' cy='28' r='3'/%3E%3Ccircle cx='4' cy='4' r='2.2'/%3E%3Ccircle cx='52' cy='4' r='2.2'/%3E%3Ccircle cx='4' cy='52' r='2.2'/%3E%3Ccircle cx='52' cy='52' r='2.2'/%3E%3C/g%3E%3Cg stroke='%237ea0ff' stroke-width='1.5' stroke-dasharray='2 3' fill='none'%3E%3Cpath d='M0 28h8M48 28h8M28 0v8M28 48v8'/%3E%3C/g%3E%3C/svg%3E");background-size:56px;opacity:.045;pointer-events:none;z-index:0}
body.pre::after{content:"";position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url%28%23n%29' opacity='.5'/%3E%3C/svg%3E");opacity:.05;mix-blend-mode:overlay;pointer-events:none;z-index:0}
body.pre .screen{position:relative;z-index:1}
body.pre h1,body.pre h2{font-family:var(--display)}

/* ---------- ribbons ---------- */
.ribbon{height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Crect width='40' height='16' fill='%230b3d2a'/%3E%3Crect x='0' width='6' height='16' fill='%2300a867'/%3E%3Crect x='8' width='2' height='16' fill='%23f6efdc'/%3E%3Crect x='12' width='8' height='16' fill='%23c9482a'/%3E%3Crect x='22' width='2' height='16' fill='%23f4b942'/%3E%3Crect x='26' width='6' height='16' fill='%23f4b942'/%3E%3Crect x='34' width='2' height='16' fill='%23f6efdc'/%3E%3C/svg%3E") repeat-x;background-size:auto 14px;border-radius:2px}
.ribbon.tall{height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect width='72' height='72' fill='%2313243a'/%3E%3Cg fill='none' stroke-width='3'%3E%3Ccircle cx='36' cy='36' r='29' stroke='%23e8771e'/%3E%3Ccircle cx='36' cy='36' r='20' stroke='%23f4b942'/%3E%3Ccircle cx='36' cy='36' r='11' stroke='%23f6efdc'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4.5' fill='%23d1642a'/%3E%3Cg fill='%2300a867'%3E%3Cpath d='M0 0l9 9-9 9z'/%3E%3Cpath d='M72 0l-9 9 9 9z'/%3E%3Cpath d='M0 72l9-9-9-9z'/%3E%3Cpath d='M72 72l-9-9 9-9z'/%3E%3C/g%3E%3Cg fill='%23f6efdc'%3E%3Ccircle cx='36' cy='3' r='2'/%3E%3Ccircle cx='36' cy='69' r='2'/%3E%3Ccircle cx='3' cy='36' r='2'/%3E%3Ccircle cx='69' cy='36' r='2'/%3E%3C/g%3E%3C/svg%3E");background-size:34px;border-radius:4px;opacity:.95}
.flagbar{height:6px;background:var(--flag);border-radius:3px}

/* ---------- danfo destination board (the logo) ---------- */
.board{display:block;width:min(92vw,560px);margin-left:auto;margin-right:auto;position:relative;box-sizing:border-box;background:linear-gradient(#ffd21f,#ffbc00);color:#111;border-radius:16px;padding:12px 18px 14px;box-shadow:0 0 0 3px #111 inset,0 0 0 6px #ffc400 inset,0 12px 30px #0009;max-width:100%}
.board::before,.board::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#111;box-shadow:0 0 0 2px #7a5a00 inset;transform:translateY(-50%)}
.board::before{left:8px}.board::after{right:8px}
.board .bname{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:.02em;font-size:clamp(40px,10vw,76px);text-align:center;color:#111;text-shadow:0 2px 0 #ffe27a}
.board .bname .n9{background:var(--flag);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #111;padding-right:4px}
.board .led{margin-top:8px;background:#0b0b0b;border-radius:8px;padding:6px 10px;overflow:hidden;white-space:nowrap;box-shadow:0 0 0 2px #3a3a3a inset}
.board .led span{display:inline-block;color:var(--amber);font:700 14px/1.2 "Consolas","Lucida Console","Courier New",monospace;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 0 6px #ff9a00aa;animation:ledscroll 14s linear infinite;padding-left:100%}
@keyframes ledscroll{to{transform:translateX(-100%)}}
.board.small .bname{font-size:30px;text-shadow:none}.board.small{padding:8px 14px 10px;width:min(78vw,300px);margin:0}.board.small .bname .n9{-webkit-text-stroke:2px #111}
.board.small .led{margin-top:5px;padding:4px 8px}.board.small .led span{font-size:11px}

/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:100;background:#150f2f;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .7s ease,transform .7s ease;cursor:pointer}
#splash.out{opacity:0;transform:scale(1.04);pointer-events:none}
#splash svg.scene{position:absolute;inset:0;width:100%;height:100%}
#splash .sp-content{position:relative;z-index:3;text-align:center;padding:0 16px;margin-top:-24vh}
#splash .sp-greet{font-family:var(--display);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:clamp(12px,3vw,16px);color:#ffe9b0;text-shadow:0 2px 12px #000a;margin-bottom:14px;min-height:1.3em;transition:opacity .4s}
#splash .board{animation:boardIn 1s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes boardIn{from{transform:translateY(-40px) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
#splash .sp-tag{margin-top:18px;font-size:clamp(14px,3.4vw,18px);color:#fff3d6;text-shadow:0 2px 12px #000c;font-weight:600;letter-spacing:.04em}
#splash .sp-bottom{position:absolute;left:0;right:0;bottom:calc(14px + var(--sab));z-index:4;text-align:center;padding:0 24px}
#splash .sp-road{height:6px;background:#00000066;border-radius:3px;max-width:340px;margin:0 auto 10px;position:relative;overflow:hidden}
#splash .sp-road i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,var(--danfo) 0 14px,transparent 14px 22px);border-radius:3px;transition:width .3s}
#splash .sp-tip{color:#ffe9b0cc;font-size:13px;min-height:2.6em;max-width:520px;margin:0 auto;text-shadow:0 1px 8px #000}
#splash .sp-go{display:inline-block;margin-top:6px;font-family:var(--display);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#111;background:var(--danfo);padding:10px 26px;border-radius:99px;box-shadow:0 6px 22px #0008;opacity:0;transition:opacity .5s;animation:pulseGo 1.6s ease-in-out infinite}
#splash.ready .sp-go{opacity:1}#splash.ready .sp-road,#splash.ready .sp-tip{display:none}
@keyframes pulseGo{50%{transform:scale(1.06)}}
#splash .sky-sun{animation:sunrise 4s ease-out both}
@keyframes sunrise{from{transform:translateY(90px)}to{transform:none}}
#splash .cloud{animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-500px)}to{transform:translateX(1500px)}}
#splash .danfo{animation:drive 11s linear infinite}
@keyframes drive{from{transform:translateX(-260px)}to{transform:translateX(1400px)}}
#splash .bird{animation:fly linear infinite}
@keyframes fly{from{transform:translateX(-80px)}50%{transform:translateX(560px)}to{transform:translateX(1300px)}}
#splash .palm{transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(2.2deg)}}
#splash .win{animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#splash *{animation:none!important}}

/* ---------- main menu ---------- */
#menu{padding-top:calc(14px + var(--sat))}
#menu .hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin:4px 0 14px;position:relative}
#menu .hero .sub{max-width:560px;margin:12px auto 0;color:#cfe2d6;font-size:15px;line-height:1.5}
#menu .skyline{width:100%;height:64px;margin-top:10px;opacity:.9}
#menu h2.sec{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#9fc3ad;margin:20px 0 8px;display:flex;align-items:center;gap:10px}
#menu h2.sec::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,#2f5a45 0 8px,transparent 8px 14px)}
#menu .card{position:relative;background:linear-gradient(180deg,rgba(18,36,28,.9),rgba(12,25,19,.9));border:1px solid #2b4a3b;border-radius:16px;padding:16px 14px 14px;overflow:hidden}
#menu .card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Crect width='40' height='16' fill='%230b3d2a'/%3E%3Crect x='0' width='6' height='16' fill='%2300a867'/%3E%3Crect x='8' width='2' height='16' fill='%23f6efdc'/%3E%3Crect x='12' width='8' height='16' fill='%23c9482a'/%3E%3Crect x='22' width='2' height='16' fill='%23f4b942'/%3E%3Crect x='26' width='6' height='16' fill='%23f4b942'/%3E%3Crect x='34' width='2' height='16' fill='%23f6efdc'/%3E%3C/svg%3E") repeat-x;background-size:auto 6px}
#menu .empty{border:2px dashed #2f5a45;border-radius:16px;padding:22px;text-align:center;color:#9fc3ad}
#menu .cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.ticket{position:relative;border:0;border-radius:0;color:#1a1200;font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.08em;text-transform:uppercase;padding:15px 34px;min-height:56px;background:linear-gradient(135deg,#ffd21f,#ff9f1a);
  -webkit-mask:radial-gradient(circle 10px at 0 50%,transparent 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 50%,transparent 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 10px at 0 50%,transparent 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 50%,transparent 97%,#000) right/51% 100% no-repeat;
  filter:drop-shadow(0 6px 10px #0008);transition:transform .15s}
.ticket:hover{background:linear-gradient(135deg,#ffe060,#ffb133);transform:translateY(-2px) rotate(-.6deg)}
.ticket small{display:block;font-size:11px;letter-spacing:.2em;font-weight:700;opacity:.7}
#menu .cta .alt{background:rgba(42,60,50,.8);border:1px solid #3a5c4a}
#menu .foot{margin-top:22px;color:#8fb3a0;font-size:13px;line-height:1.6}
#menu .foot .ribbon{margin-bottom:12px;opacity:.9}

/* ID card (one per character) */
.idc{position:relative;background:var(--paper);color:#17231c;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px #0008;border:1px solid #cdbf9b;padding:18px 14px 12px;display:grid;grid-template-columns:78px 1fr;gap:12px;
  background-image:repeating-linear-gradient(135deg,transparent 0 14px,#00000008 14px 15px)}
.idc::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--flag)}
.idc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Crect width='40' height='16' fill='%230b3d2a'/%3E%3Crect x='0' width='6' height='16' fill='%2300a867'/%3E%3Crect x='8' width='2' height='16' fill='%23f6efdc'/%3E%3Crect x='12' width='8' height='16' fill='%23c9482a'/%3E%3Crect x='22' width='2' height='16' fill='%23f4b942'/%3E%3Crect x='26' width='6' height='16' fill='%23f4b942'/%3E%3Crect x='34' width='2' height='16' fill='%23f6efdc'/%3E%3C/svg%3E") repeat-x;background-size:auto 7px}
.idc .seal{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:36px;background:radial-gradient(circle at 35% 30%,#fff8e0,#f1e2b4 55%,#d9c88f);border:3px solid #0b6b45;box-shadow:0 0 0 3px #f6efdc,0 0 0 5px #0b6b45 inset}
.idc .nin{font:700 10px/1 "Consolas","Courier New",monospace;letter-spacing:.14em;color:#6a7a6c}
.idc .nm{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.1;margin:3px 0 2px;color:#0b2a1b}
.idc .meta{font-size:12px;color:#5b6a5f;letter-spacing:.05em;text-transform:uppercase}
.idc .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.idc .chips span{background:#e3d6b2;border-radius:99px;padding:2px 9px;font-size:12px;font-weight:600;color:#3a3220}
.idc .acts{grid-column:1/-1;display:flex;gap:8px;margin:2px 0 6px}
.idc .acts button{flex:1;min-height:40px}.idc .acts .bad{flex:0 0 auto;background:#8a3a30}
.idc .cloud{position:absolute;right:12px;top:14px;font-size:14px}

/* ---------- onboarding ---------- */
#onboard{padding-top:calc(10px + var(--sat))}
#onboard .top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
#onboard .top .board{flex:0 0 auto}
.stops{display:flex;margin:34px 0 20px;position:relative}
.stops .st{flex:1;text-align:center;position:relative;font:700 10.5px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#7ea791}
.stops .st::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:4px;background:repeating-linear-gradient(90deg,#2c4a3a 0 8px,transparent 8px 13px);z-index:0}
.stops .st:first-child::before{display:none}
.stops .st.done::before,.stops .st.on::before{background:var(--g2)}
.stops .dot{width:32px;height:32px;border-radius:50%;margin:0 auto 5px;display:grid;place-items:center;font:800 14px var(--display);background:#12241b;border:3px solid #2c4a3a;position:relative;z-index:1;color:#7ea791;transition:transform .25s}
.stops .st.done .dot{background:var(--g);border-color:var(--g2);color:#fff}
.stops .st.on{color:var(--danfo)}.stops .st.on .dot{background:var(--danfo);border-color:#111;color:#111;transform:scale(1.18);box-shadow:0 0 0 4px #ffc40033}
.stops .st.on .dot::after{content:"🚌";position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:18px;animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateX(-50%) translateY(-3px)}}
@media(max-width:520px){.stops .st span.lb{display:none}.stops .dot{width:28px;height:28px}.stops .st::before{top:13px}}
#obody{animation:stepIn .35s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#obody .eyebrow{font:800 11px var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--danfo);margin-bottom:2px}
#obody h2{font-size:clamp(28px,6vw,40px);margin:0 0 6px;text-transform:uppercase;letter-spacing:.02em}
#obody h2 em{font-style:normal;background:linear-gradient(transparent 62%,#ffc40066 62%);padding:0 3px}
#obody>p.mut{max-width:640px}
body.pre .choice{position:relative;border-radius:14px;border:2px solid #2b4a3b;background:rgba(14,28,21,.82);transition:border-color .15s,transform .15s,background .15s}
body.pre .choice:hover{border-color:#5d8f77;transform:translateY(-2px)}
body.pre .choice.sel{border-color:var(--danfo);background:rgba(40,46,22,.9)}
body.pre .choice.sel::after{content:"✔";position:absolute;top:8px;right:9px;width:22px;height:22px;border-radius:50%;background:var(--danfo);color:#111;display:grid;place-items:center;font-size:12px;font-weight:900}
.gtile{padding:0!important;overflow:hidden;min-height:170px;display:flex;flex-direction:column}
.gtile .gpat{height:96px;background-size:48px}
.gtile.m .gpat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%2315306e'/%3E%3Cg fill='none' stroke='%23dfe8ff' stroke-width='2' opacity='.85'%3E%3Cpath d='M28 4l24 24-24 24L4 28z'/%3E%3Cpath d='M28 14l14 14-14 14L14 28z'/%3E%3C/g%3E%3Cg fill='%23dfe8ff' opacity='.9'%3E%3Ccircle cx='28' cy='28' r='3'/%3E%3Ccircle cx='4' cy='4' r='2.2'/%3E%3Ccircle cx='52' cy='4' r='2.2'/%3E%3Ccircle cx='4' cy='52' r='2.2'/%3E%3Ccircle cx='52' cy='52' r='2.2'/%3E%3C/g%3E%3Cg stroke='%237ea0ff' stroke-width='1.5' stroke-dasharray='2 3' fill='none'%3E%3Cpath d='M0 28h8M48 28h8M28 0v8M28 48v8'/%3E%3C/g%3E%3C/svg%3E")}.gtile.f .gpat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect width='72' height='72' fill='%2313243a'/%3E%3Cg fill='none' stroke-width='3'%3E%3Ccircle cx='36' cy='36' r='29' stroke='%23e8771e'/%3E%3Ccircle cx='36' cy='36' r='20' stroke='%23f4b942'/%3E%3Ccircle cx='36' cy='36' r='11' stroke='%23f6efdc'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4.5' fill='%23d1642a'/%3E%3Cg fill='%2300a867'%3E%3Cpath d='M0 0l9 9-9 9z'/%3E%3Cpath d='M72 0l-9 9 9 9z'/%3E%3Cpath d='M0 72l9-9-9-9z'/%3E%3Cpath d='M72 72l-9-9 9-9z'/%3E%3C/g%3E%3Cg fill='%23f6efdc'%3E%3Ccircle cx='36' cy='3' r='2'/%3E%3Ccircle cx='36' cy='69' r='2'/%3E%3Ccircle cx='3' cy='36' r='2'/%3E%3Ccircle cx='69' cy='36' r='2'/%3E%3C/g%3E%3C/svg%3E")}
.gtile .gbody{padding:10px 12px 12px}.gtile b{font:900 22px var(--display);text-transform:uppercase;letter-spacing:.04em}
.gtile .gsym{position:absolute;left:12px;top:56px;width:56px;height:56px;border-radius:50%;background:var(--paper);color:#111;display:grid;place-items:center;font-size:28px;border:3px solid #111;z-index:1}
.gtile .gbody{margin-top:22px}
.nameplate{display:flex;gap:8px;align-items:center;background:var(--danfo);border-radius:10px;padding:6px;box-shadow:0 0 0 3px #111 inset;max-width:520px}
.nameplate input{background:#111;color:var(--amber);font:700 18px "Consolas","Courier New",monospace;letter-spacing:.08em;border:0;border-radius:6px;text-transform:uppercase;flex:1}
.nameplate button{background:#111;color:var(--danfo);min-height:42px}
.agewrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:10px 0}
.agebig{font:900 clamp(96px,22vw,150px)/1 var(--display);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect width='72' height='72' fill='%2313243a'/%3E%3Cg fill='none' stroke-width='3'%3E%3Ccircle cx='36' cy='36' r='29' stroke='%23e8771e'/%3E%3Ccircle cx='36' cy='36' r='20' stroke='%23f4b942'/%3E%3Ccircle cx='36' cy='36' r='11' stroke='%23f6efdc'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4.5' fill='%23d1642a'/%3E%3Cg fill='%2300a867'%3E%3Cpath d='M0 0l9 9-9 9z'/%3E%3Cpath d='M72 0l-9 9 9 9z'/%3E%3Cpath d='M0 72l9-9-9-9z'/%3E%3Cpath d='M72 72l-9-9 9-9z'/%3E%3C/g%3E%3Cg fill='%23f6efdc'%3E%3Ccircle cx='36' cy='3' r='2'/%3E%3Ccircle cx='36' cy='69' r='2'/%3E%3Ccircle cx='3' cy='36' r='2'/%3E%3Ccircle cx='69' cy='36' r='2'/%3E%3C/g%3E%3C/svg%3E");background-size:72px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #f4b942;filter:drop-shadow(0 6px 0 #0006);min-width:2.2ch;text-align:center}
.agestage{display:inline-block;background:var(--danfo);color:#111;font:900 15px var(--display);letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:99px;box-shadow:0 0 0 2px #111 inset}
input[type=range].fab{-webkit-appearance:none;appearance:none;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Crect width='40' height='16' fill='%230b3d2a'/%3E%3Crect x='0' width='6' height='16' fill='%2300a867'/%3E%3Crect x='8' width='2' height='16' fill='%23f6efdc'/%3E%3Crect x='12' width='8' height='16' fill='%23c9482a'/%3E%3Crect x='22' width='2' height='16' fill='%23f4b942'/%3E%3Crect x='26' width='6' height='16' fill='%23f4b942'/%3E%3Crect x='34' width='2' height='16' fill='%23f6efdc'/%3E%3C/svg%3E") repeat-x;background-size:auto 22px;border-radius:6px;border:2px solid #111;outline:none}
input[type=range].fab::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:42px;border-radius:8px;background:var(--danfo);border:3px solid #111;box-shadow:0 4px 8px #0008;cursor:grab}
input[type=range].fab::-moz-range-thumb{width:30px;height:38px;border-radius:8px;background:var(--danfo);border:3px solid #111;cursor:grab}
.roots{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:820px){.roots{grid-template-columns:1fr}}
.ngmap{background:radial-gradient(circle at 50% 40%,#133a58,#0b2036);border:2px solid #2b4a6b;border-radius:16px;padding:6px}
.ngmap svg{display:block;width:100%;height:auto}
.ngmap .land{fill:#1d4a31;stroke:#4f9a73;stroke-width:.5}
.ngmap .pin{fill:#f6efdc;cursor:pointer;transition:r .15s}.ngmap .pin:hover{fill:var(--danfo)}
.ngmap .pin.sel{fill:var(--danfo);stroke:#111;stroke-width:.5}
.ngmap .ping{fill:none;stroke:var(--danfo);stroke-width:.6;transform-box:fill-box;transform-origin:center;animation:ping 1.6s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.ngmap text{font:600 2.4px var(--display);fill:#cfe3d6;pointer-events:none;paint-order:stroke;stroke:#0b2036;stroke-width:.7px}
.rootcard{background:var(--paper);color:#17231c;border-radius:14px;padding:12px 14px;margin-top:10px;position:relative;overflow:hidden}
.rootcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(#008751,#fff,#008751)}
.rootcard b{font:800 20px var(--display);text-transform:uppercase}.rootcard small{color:#53624f}
.path{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){.path{grid-template-columns:1fr}}
.pathc{padding:0!important;overflow:hidden;display:flex}
.pathc .stripe{width:10px;flex:0 0 10px}.pathc .pbody{padding:10px 12px;flex:1;min-width:0}
.pathc .ic{font-size:30px;float:left;margin:0 10px 0 0;width:46px;height:46px;display:grid;place-items:center;background:#0b150f;border-radius:12px}
.pathc b{font:800 17px var(--display);text-transform:uppercase;letter-spacing:.03em}
.pathc .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;clear:both}.pathc .tags span{background:#0b150f;border-radius:99px;padding:2px 9px;font-size:12px;color:#cfe3d6}
.idbig{max-width:680px;margin:6px 0 12px}
.idbig.idc{grid-template-columns:minmax(0,230px) 1fr;align-items:center;gap:18px;padding:22px 16px 18px}
.idbig #pvhold{background:#0b1a13;border-radius:12px;overflow:hidden}
.idbig #pvhold canvas{width:100%!important;height:auto!important;max-width:none!important;border:3px solid #111;border-radius:12px;display:block}
.idbig .nm{font-size:28px}
@media(max-width:560px){.idbig.idc{grid-template-columns:1fr}.idbig #pvhold canvas{max-height:40vh;width:auto!important;margin:0 auto}}
#onboard{padding-bottom:104px}
body.pre .lookpv canvas{border:3px solid #111;box-shadow:0 0 0 3px var(--danfo);border-radius:14px}
body.pre .lookctl,body.pre .card{scrollbar-width:thin}
.navbar{display:flex;justify-content:space-between;gap:10px;margin-top:18px;position:sticky;bottom:calc(8px + var(--sab));z-index:3}
.navbar button{min-height:52px;padding:10px 26px;font-family:var(--display);font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:12px;box-shadow:0 8px 18px #0007}
.navbar #obNext{background:linear-gradient(135deg,#ffd21f,#ff9f1a);color:#1a1200;min-width:150px}
.navbar #obNext:hover{background:linear-gradient(135deg,#ffe060,#ffb133)}

/* ---------- popups (sign-in, account, shop, and every in-game dialog) ---------- */
#modal{background:radial-gradient(900px 500px at 50% 40%,rgba(10,23,19,.55),rgba(3,8,6,.82));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#mbox{position:relative;background:linear-gradient(180deg,#15291f,#0f1e17);border:2px solid #2f5a45;border-radius:20px;box-shadow:0 24px 60px #000b,0 0 0 1px #00000066;padding:26px 20px 20px}
#mbox::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Crect width='40' height='16' fill='%230b3d2a'/%3E%3Crect x='0' width='6' height='16' fill='%2300a867'/%3E%3Crect x='8' width='2' height='16' fill='%23f6efdc'/%3E%3Crect x='12' width='8' height='16' fill='%23c9482a'/%3E%3Crect x='22' width='2' height='16' fill='%23f4b942'/%3E%3Crect x='26' width='6' height='16' fill='%23f4b942'/%3E%3Crect x='34' width='2' height='16' fill='%23f6efdc'/%3E%3C/svg%3E") repeat-x;background-size:auto 9px}
#mbox h3{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:.03em;text-transform:uppercase;margin:0 0 10px;padding-left:12px;border-left:6px solid var(--danfo);line-height:1.15}
#mbox p{color:#dbe9df}
#mbox .mut,#mbox small,#mbox .mut small{color:#93b4a2}
#mbox input,#mbox select{background:#0b1611;border:2px solid #2f5a45;border-radius:10px;font-weight:600;transition:border-color .15s,box-shadow .15s}
#mbox input:focus,#mbox select:focus{outline:none;border-color:var(--danfo);box-shadow:0 0 0 3px #ffc40033}
#mbox input::placeholder{color:#6d8c7b;font-weight:500}
#mbox .opts button{position:relative;background:#1b3c2d;border:1px solid #2f5a45;border-left:6px solid var(--danfo);border-radius:10px;font-weight:600;transition:background .15s,transform .15s}
#mbox .opts button:hover:not(:disabled){background:#24503b;transform:translateX(2px)}
#mbox .opts button.alt{background:#16251d;border-left-color:#3c5d4b}
#mbox .opts button.alt:hover:not(:disabled){background:#1f3329}
#mbox .opts button.bad{background:#4a1f22;border-left-color:#e5484d}
#mbox .opts button:disabled{border-left-color:#4a5a50}
#mbox .row button,#mbox button.mt{border-radius:9px}
#mbox .prow{border-bottom:1px dashed #2f5a45}
#mbox .choice{background:#0e1c15}
#modal.dock{background:rgba(0,0,0,.08);backdrop-filter:none;-webkit-backdrop-filter:none}
#modal.dock #mbox{background:linear-gradient(180deg,rgba(21,41,31,.95),rgba(15,30,23,.95))}
@media(max-width:700px){#mbox{border-radius:22px 22px 0 0;border-bottom:0;padding:24px 16px calc(16px + var(--sab))}}
/* the pay screen */
.shop .tier{display:flex;align-items:center;gap:10px;background:#0e1c15;border:1px solid #2f5a45;border-radius:12px;padding:10px 12px;margin:8px 0}
.shop .tier b{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em}
.shop .tier .grow{flex:1;min-width:0}.shop .tier .pr{font:900 18px var(--display);color:var(--danfo);white-space:nowrap}
.shop .amts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.shop .amts button{flex:1;min-width:84px;background:#1b3c2d;border:1px solid #2f5a45}
.shop .amts button.on{background:var(--danfo);color:#111;border-color:#111}
.shop .perk-own{color:#7dffb0;font-weight:700;white-space:nowrap}
.shop .fine{font-size:12px;color:#7fa18f;margin-top:10px}