:root{--pink:#ff4fd8;--teal:#3ef0e0;--purple:#8a4dff;--bg:#0d0618;--panel:rgba(20,10,40,.88);--gold:#ffd447}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#fff;touch-action:none;overscroll-behavior:none}
#app{position:fixed;inset:0;overflow:hidden}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0d0618}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
.hud-left{position:absolute;left:max(10px,env(safe-area-inset-left));top:8px;text-shadow:0 2px 0 #000,0 0 6px #000}
#hud-hearts img{width:22px;height:22px;margin-right:2px;filter:drop-shadow(0 2px 0 #000)}
#hud-hearts img.empty{filter:grayscale(1) brightness(.35)}
.hud-row{display:flex;align-items:center;gap:4px;font-weight:bold;font-size:16px;margin-top:2px}
.hud-row img{width:20px;height:20px}
.hud-row span{margin-right:8px}
.lives{color:var(--pink)}
.hud-center{position:absolute;left:50%;top:8px;transform:translateX(-50%);text-align:center;text-shadow:0 2px 0 #000}
#hud-level{font-size:14px;color:var(--teal);letter-spacing:1px;opacity:.9}
#hud-power{font-size:13px;color:var(--gold);margin-top:2px}
.hud-right{position:absolute;right:max(10px,env(safe-area-inset-right));top:8px;pointer-events:auto}
.icon-btn{background:var(--panel);border:2px solid var(--purple);color:#fff;border-radius:12px;width:44px;height:40px;font-size:16px;box-shadow:0 0 10px rgba(138,77,255,.6)}
#boss-bar{position:absolute;left:50%;top:44px;transform:translateX(-50%);width:min(60vw,420px);text-align:center}
.boss-name{font-size:13px;color:var(--pink);text-shadow:0 2px 0 #000;font-weight:bold;letter-spacing:2px}
.boss-track{height:12px;border:2px solid #000;background:#2a0f2f;border-radius:7px;overflow:hidden;box-shadow:0 0 10px var(--pink)}
#boss-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff3fa4,#c43dff);transition:width .2s}
/* touch */
#touch{position:absolute;inset:0;pointer-events:none}
.tbtn{position:absolute;pointer-events:none;width:clamp(64px,13vh,96px);height:clamp(64px,13vh,96px);border-radius:50%;background:rgba(40,20,70,.45);border:3px solid rgba(62,240,224,.55);display:flex;align-items:center;justify-content:center;font-size:clamp(22px,5vh,34px);color:rgba(255,255,255,.85);box-shadow:0 0 12px rgba(62,240,224,.3);transition:transform .05s,background .05s}
.tbtn.on{background:rgba(62,240,224,.45);transform:scale(.92)}
#t-left{left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom))}
#t-right{left:calc(max(18px,env(safe-area-inset-left)) + clamp(76px,16vh,112px));bottom:max(22px,env(safe-area-inset-bottom))}
#t-jump{right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:clamp(76px,16vh,112px);height:clamp(76px,16vh,112px);border-color:rgba(255,79,216,.7)}
#t-attack{right:calc(max(18px,env(safe-area-inset-right)) + clamp(88px,19vh,130px));bottom:max(30px,env(safe-area-inset-bottom));border-color:rgba(138,77,255,.8)}
/* screens */
#screens{position:absolute;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;z-index:1;isolation:isolate;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background-size:cover;background-position:center;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.screen.dim{background-color:rgba(8,3,20,.72)}
.overlay-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
.overlay-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(13,6,24,.25),rgba(13,6,24,.85))}
h1.logo{margin:0;font-size:clamp(30px,8.5vh,64px);line-height:1;letter-spacing:2px;color:#fff;text-shadow:0 0 8px var(--pink),0 0 24px var(--pink),0 4px 0 #3a0a4a;font-family:"Trebuchet MS",sans-serif;font-weight:900;text-align:center}
h1.logo small{display:block;font-size:.42em;color:var(--teal);text-shadow:0 0 10px var(--teal),0 3px 0 #000;letter-spacing:6px;margin-top:6px}
h2{margin:0 0 6px;font-size:clamp(20px,5.5vh,34px);color:var(--teal);text-shadow:0 0 10px var(--teal),0 3px 0 #000;text-align:center}
.btn{pointer-events:auto;background:linear-gradient(180deg,#5b2bb0,#2d1260);border:3px solid var(--pink);color:#fff;border-radius:14px;padding:10px 22px;font-size:clamp(15px,3.6vh,20px);font-weight:bold;min-width:150px;margin:5px;box-shadow:0 0 14px rgba(255,79,216,.45),0 4px 0 #120424;text-shadow:0 2px 0 #000;transition:transform .08s}
.btn:active{transform:translateY(2px) scale(.98)}
.btn.teal{border-color:var(--teal);box-shadow:0 0 14px rgba(62,240,224,.45),0 4px 0 #120424}
.btn.small{min-width:0;padding:7px 14px;font-size:clamp(13px,3vh,16px)}
.btn[disabled]{opacity:.45;filter:grayscale(.6)}
.row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.title-chars{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none;padding:0 2vw}
.title-chars img{height:min(78vh,420px);filter:drop-shadow(0 0 18px rgba(255,79,216,.5));animation:bob 3s ease-in-out infinite}
.title-chars img:last-child{animation-delay:-1.5s}
@keyframes bob{50%{transform:translateY(-8px)}}
.title-mid{display:flex;flex-direction:column;align-items:center;z-index:2}
.topbar{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:3}
.coins-pill{background:var(--panel);border:2px solid var(--gold);border-radius:20px;padding:4px 12px 4px 6px;display:flex;align-items:center;gap:6px;font-weight:bold;font-size:18px;box-shadow:0 0 10px rgba(255,212,71,.35)}
.coins-pill img{width:24px;height:24px}
.panel{background:var(--panel);border:2px solid var(--purple);border-radius:16px;box-shadow:0 0 18px rgba(138,77,255,.45);padding:14px 18px;max-width:94vw;max-height:84vh;overflow:auto}
.footnote{font-size:12px;opacity:.7;margin-top:8px;text-align:center}
/* map */
.map-wrap{position:absolute;inset:56px 0 54px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.map-track{position:relative;height:100%;min-width:100%;display:flex;align-items:center;gap:clamp(10px,2.5vw,26px);padding:0 4vw}
.lvl{flex:0 0 auto;width:clamp(120px,22vh,170px);border-radius:14px;overflow:hidden;border:3px solid var(--teal);background:#160a2a;box-shadow:0 0 14px rgba(62,240,224,.4);text-align:center;position:relative;transition:transform .1s}
.lvl:nth-child(even){transform:translateY(-6vh)}
.lvl:nth-child(odd){transform:translateY(6vh)}
.lvl img{width:100%;height:clamp(78px,15vh,110px);object-fit:cover;display:block}
.lvl .nm{font-weight:bold;font-size:clamp(12px,2.8vh,15px);padding:5px 4px 0}
.lvl .gm{font-size:12px;padding:2px 0 6px;color:var(--gold)}
.lvl.locked{border-color:#444;filter:grayscale(.9) brightness(.55)}
.lvl.locked::after{content:"🔒";position:absolute;top:28px;left:0;right:0;font-size:30px}
.lvl.done{border-color:var(--pink);box-shadow:0 0 14px rgba(255,79,216,.55)}
.lvl .num{position:absolute;top:4px;left:6px;background:rgba(0,0,0,.65);border-radius:10px;padding:1px 8px;font-weight:bold;font-size:13px}
.lvl.boss{border-color:#ff3f6c}
.bottombar{position:absolute;bottom:max(6px,env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;flex-wrap:wrap}
/* cards */
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-height:66vh;overflow-y:auto;padding:6px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.card{width:clamp(118px,21vh,150px);background:rgba(25,12,48,.92);border:2px solid #5a3a8a;border-radius:14px;padding:8px 6px;text-align:center;position:relative}
.card img.pic{height:clamp(70px,15vh,100px);max-width:100%;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.card .nm{font-weight:bold;font-size:15px}
.card .ds{font-size:11px;opacity:.85;min-height:28px;line-height:1.25}
.card.sel{border-color:var(--teal);box-shadow:0 0 14px var(--teal)}
.card.lock img.pic{filter:brightness(0) drop-shadow(0 0 4px var(--purple))}
.price{display:inline-flex;align-items:center;gap:3px;font-weight:bold;color:var(--gold)}
.price img{width:16px;height:16px}
/* shop/home split layout */
.split{position:absolute;inset:52px 10px 8px 10px;display:flex;gap:10px}
.split .art{flex:1.35;position:relative;border-radius:14px;overflow:hidden;border:2px solid var(--purple);box-shadow:0 0 18px rgba(138,77,255,.5);background:#000}
.split .art canvas,.split .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.split .list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:flex;flex-direction:column;gap:6px;padding-right:2px}
.item{display:flex;align-items:center;gap:8px;background:rgba(25,12,48,.92);border:2px solid #5a3a8a;border-radius:12px;padding:6px 8px}
.item .ic{font-size:24px;width:34px;text-align:center}
.item .tx{flex:1;min-width:0}
.item .nm{font-weight:bold;font-size:14px}
.item .ds{font-size:11px;opacity:.8}
.item.owned{border-color:var(--teal)}
.item .btn{min-width:78px;padding:6px 8px;font-size:13px;margin:0}
.comfy{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.6);border-radius:10px;padding:4px 10px;font-size:13px}
#toast{position:absolute;left:50%;top:27%;transform:translateX(-50%);background:var(--panel);border:2px solid var(--teal);border-radius:12px;padding:8px 16px;font-weight:bold;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center;z-index:50;max-width:80vw}
#toast.show{opacity:1}
#rotate{position:absolute;inset:0;background:#0d0618;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:18px}
#rotate div{font-size:64px;animation:spin 2s ease-in-out infinite;color:var(--teal)}
@keyframes spin{50%{transform:rotate(90deg)}}
.stat{font-size:clamp(15px,3.6vh,20px);margin:4px 0;text-align:center}
.stat b{color:var(--gold)}
textarea{width:min(80vw,520px);height:80px;background:#12082a;color:#fff;border:2px solid var(--purple);border-radius:10px;font-size:12px;padding:6px;user-select:text;-webkit-user-select:text}
.setting{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:6px 0;font-size:16px}
.boss-card{width:min(50vh,300px);border-radius:12px;border:3px solid var(--pink);box-shadow:0 0 20px var(--pink)}
@media (max-height:420px){.panel{padding:10px 12px}.btn{padding:7px 16px;margin:3px}}
.cards.hscroll{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;max-width:100%;touch-action:pan-x;padding:8px 4px 10px}
.cards.hscroll .card{flex:0 0 auto}

/* v2: big Home button, magic power HUD chip, dimmed attack button without power */
.btn.home-btn{background:linear-gradient(180deg,#ffb347,#d9661f);border-color:#ffd447;color:#2a0d00;text-shadow:0 1px 0 rgba(255,255,255,.4);font-size:clamp(18px,4.4vh,24px);padding:12px 28px;min-width:190px;box-shadow:0 0 18px rgba(255,212,71,.65),0 4px 0 #5a2a00;animation:homeGlow 2.2s ease-in-out infinite}
.btn.home-btn small{display:block;font-size:.55em;font-weight:bold;opacity:.8;margin-top:1px}
@keyframes homeGlow{0%,100%{box-shadow:0 0 14px rgba(255,212,71,.55),0 4px 0 #5a2a00}50%{box-shadow:0 0 26px rgba(255,212,71,.95),0 4px 0 #5a2a00}}
.magic-chip{display:inline-block;background:rgba(62,240,224,.2);border:2px solid #3ef0e0;color:#bffcf6;border-radius:10px;padding:1px 8px;font-weight:bold;box-shadow:0 0 10px rgba(62,240,224,.6);text-shadow:0 0 6px #3ef0e0}
.tbtn.nopower{opacity:.35;filter:grayscale(1)}

/* ===== v3 ===== */
/* HUD: portrait + name + hearts + coins on the left, nav on the right */
.hud-left{display:flex;align-items:center;gap:8px;top:6px}
.hud-portrait{position:relative;width:54px;height:54px;flex:0 0 auto}
.hud-portrait img{width:54px;height:54px;border-radius:50%;border:3px solid var(--pink);background:#1a0b2e;box-shadow:0 0 12px rgba(255,79,216,.6);object-fit:cover}
.hud-portrait .lives{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);white-space:nowrap;background:#1a0b2e;border:2px solid var(--teal);border-radius:8px;padding:0 5px;font-size:10px;font-weight:bold;color:#dffcff;text-shadow:none}
#hud-name{font-weight:900;font-size:14px;letter-spacing:.5px;line-height:1}
#hud-hearts img{width:19px;height:19px}
.hud-row{font-size:14px}.hud-row img{width:17px;height:17px}
.hud-center{top:6px}
.hud-right.nav{display:flex;gap:4px;top:6px}
.nav-btn{pointer-events:auto;background:var(--panel);border:2px solid var(--purple);color:#fff;border-radius:11px;width:46px;height:44px;font-size:17px;line-height:1;padding:2px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(138,77,255,.5)}
.nav-btn small{font-size:9px;font-weight:bold;margin-top:2px;opacity:.9}
.nav-btn.on{border-color:var(--pink);box-shadow:0 0 12px var(--pink)}
.tbtn.nopower{display:none}
/* top bar on menu screens */
.topbar{gap:6px}
.topbar .back{min-width:0;padding:6px 12px}
.tb-title{margin:0;font-size:clamp(17px,4.6vh,26px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left;padding-left:4px}
.tb-right{display:flex;align-items:center;gap:6px}
.topnav{display:flex;gap:4px}
.topnav .nav-btn{width:44px;height:42px}
.coins-pill{font-size:16px;padding:3px 10px 3px 5px}
.coins-pill img{width:20px;height:20px}
/* village */
.screen[data-screen=village]{padding:0;justify-content:flex-start}
.v-scroll{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none}
.v-scroll::-webkit-scrollbar{display:none}
.v-world{position:relative;height:100%;display:inline-block}
.v-img{height:100%;display:block;width:auto;max-width:none}
.hot{position:absolute;background:transparent;border:2px dashed rgba(62,240,224,0);border-radius:16px;transition:border-color .2s,background .2s;display:flex;align-items:flex-end;justify-content:center;padding:0}
.hot:hover,.hot:active{border-color:rgba(62,240,224,.8);background:rgba(62,240,224,.08)}
.hot .lab{color:#fff;transform:translateY(20%);background:var(--panel);border:2px solid var(--pink);border-radius:12px;padding:4px 12px;font-weight:bold;font-size:clamp(13px,3.6vh,18px);box-shadow:0 0 14px rgba(255,79,216,.6);animation:homeGlow 2.4s ease-in-out infinite;white-space:nowrap;display:flex;flex-direction:column;align-items:center}
.hot .lab small{font-size:10px;opacity:.75}
.hot-home .lab{border-color:var(--gold);background:linear-gradient(180deg,#ffb347,#d9661f);color:#2a0d00;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.hot-tattoo .lab{border-color:#777;opacity:.85}
.hot-map .lab{transform:none}
/* shop */
.shop{position:absolute;inset:56px 10px 8px 10px;display:flex;gap:8px}
.shop-cats{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;overflow-y:auto;width:clamp(96px,17vw,150px)}
.cat{pointer-events:auto;background:rgba(25,12,48,.92);border:2px solid #5a3a8a;color:#fff;border-radius:10px;padding:6px 8px;font-size:13px;font-weight:bold;text-align:left;white-space:nowrap}
.cat.on{border-color:var(--pink);background:linear-gradient(90deg,rgba(255,79,216,.35),rgba(25,12,48,.92));box-shadow:0 0 10px rgba(255,79,216,.5)}
.cat small{opacity:.7;font-weight:normal}
.shop-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.shop-banner{position:relative;flex:0 0 auto;height:clamp(64px,24vh,170px);border-radius:12px;overflow:hidden;border:2px solid var(--purple);box-shadow:0 0 14px rgba(138,77,255,.5)}
.shop-banner img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.shop-hello{position:absolute;left:10px;bottom:8px;background:rgba(10,4,24,.75);border-radius:10px;padding:3px 10px;font-weight:bold;font-size:13px;color:var(--teal)}
.shop-grid{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;align-content:start;padding-right:2px}
.tile{background:rgba(25,12,48,.94);border:2px solid #5a3a8a;border-radius:12px;padding:6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.tile .ti{position:relative;width:64px;height:58px;display:flex;align-items:center;justify-content:center}
.tile .ti img{max-width:64px;max-height:58px;border-radius:8px}
.tile .ti img.round{border-radius:50%;width:56px;height:56px;border:2px solid var(--purple);object-fit:cover}
.tile .emoji{font-size:34px}
.tile .tn{font-weight:bold;font-size:12.5px;line-height:1.1}
.tile .td{font-size:10px;opacity:.75;line-height:1.2;min-height:24px}
.tile .btn{margin:2px 0 0;padding:4px 10px;min-width:0}
.tile.owned{border-color:var(--teal)}
.tile.soon{opacity:.6}
.tile.sel{border-color:var(--gold);box-shadow:0 0 12px var(--gold)}
.own-tag{font-size:11px;font-weight:bold;color:var(--teal)}
.soon-tag{font-size:11px;font-weight:bold;color:#bbb}
.cnt{position:absolute;right:-6px;bottom:-2px;background:var(--pink);border-radius:8px;font-size:11px;font-weight:bold;padding:0 5px}
.perk{position:absolute;left:-6px;top:-4px;background:var(--gold);color:#2a0d00;border-radius:6px;font-size:8.5px;font-weight:900;padding:1px 4px}
/* home + decorate */
.home-wrap{position:absolute;inset:54px 8px 6px 8px;display:flex;flex-direction:column;gap:6px}
.room{position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden;border:2px solid var(--purple);box-shadow:0 0 18px rgba(138,77,255,.5);background:#06030c}
.room canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.deco-toggle{position:absolute;right:8px;bottom:8px;margin:0}
.deco{display:none;flex:0 0 auto;flex-direction:column;gap:4px}
.deco-on .deco{display:flex}
.deco-tabs{display:flex;gap:4px;overflow-x:auto;touch-action:pan-x;scrollbar-width:none}
.deco-tabs .cat{padding:4px 9px;font-size:12px}
.deco-items{display:flex;gap:6px;overflow-x:auto;touch-action:pan-x;padding-bottom:2px}
.tile.mini{flex:0 0 auto;flex-direction:row;text-align:left;gap:6px;width:250px;padding:4px 6px}
.tile.mini .ti{width:50px;height:46px}.tile.mini .ti img{max-width:50px;max-height:46px}
.tile.mini .tx{flex:1;min-width:0}
.tile.mini .td{min-height:0}
/* characters with card art */
.card.has-art img.pic{height:clamp(84px,24vh,150px);width:100%;object-fit:cover;object-position:50% 30%;border-radius:10px}
.card.lock.has-art img.pic{filter:grayscale(1) brightness(.4)}
@media (max-height:420px){
  .topbar{top:4px}.topnav .nav-btn,.nav-btn{width:40px;height:38px;font-size:15px}.nav-btn small{font-size:8px}
  .shop{inset:48px 8px 6px 8px}.home-wrap{inset:46px 6px 4px 6px}
  .map-wrap{inset:48px 0 50px 0}
  .tile.mini{width:220px}.deco-tabs .cat{padding:3px 7px;font-size:11px}
  .hud-portrait,.hud-portrait img{width:46px;height:46px}
  .card .ds{font-size:10px;min-height:0}
}

.room .comfy{left:8px;top:8px;bottom:auto}

/* ===== v4: account, cloud choice, install guide ===== */
input{font-family:inherit;font-size:16px;width:100%;padding:9px 12px;margin:4px 0;border-radius:10px;border:2px solid var(--purple);background:#12082a;color:#fff;user-select:text;-webkit-user-select:text;touch-action:manipulation}
input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 10px rgba(62,240,224,.5)}
input:disabled{opacity:.5}
.acct-panel{width:min(94vw,440px);text-align:center}
.acct-p{font-size:13px;opacity:.85;margin:2px 0 8px;line-height:1.35}
.acct-tabs{display:flex;gap:4px;justify-content:center;margin-bottom:6px}
.acct-tabs .cat{text-align:center;padding:5px 10px;font-size:12.5px}
.acct-form{display:flex;flex-direction:column;align-items:stretch}
.acct-form .btn{margin:6px auto 0}
.acct-msg{min-height:18px;font-size:13px;margin:6px 0 2px;color:var(--teal);line-height:1.35}
.acct-msg.err{color:#ff8aa8}
.acct-me{display:flex;align-items:center;gap:12px;justify-content:center;text-align:left;margin:4px 0 8px}
.acct-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple));display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;box-shadow:0 0 12px var(--pink)}
.acct-un{font-weight:900;font-size:20px;color:var(--pink)}.acct-em{font-size:12px;opacity:.75}.acct-st{font-size:12px;color:var(--teal);margin-top:2px}
#hud-user{font-size:10px;color:var(--teal);font-weight:bold;line-height:1;margin-top:1px}
#hud-user:empty{display:none}
.overlay{position:absolute;inset:0;z-index:60;background:rgba(8,3,20,.8);display:flex;align-items:center;justify-content:center;padding:10px}
.sv-cards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sv-card{background:rgba(25,12,48,.95);border:2px solid #5a3a8a;border-radius:12px;padding:8px 12px;min-width:200px;position:relative}
.sv-card.best{border-color:var(--gold);box-shadow:0 0 14px rgba(255,212,71,.5)}
.sv-t{font-weight:900;font-size:16px;margin-bottom:4px}
.sv-best{position:absolute;top:-10px;right:10px;background:var(--gold);color:#2a0d00;font-size:10px;font-weight:900;border-radius:6px;padding:1px 6px}
.sv-row{font-size:13px;display:flex;align-items:center;gap:4px;justify-content:center}.sv-row img{width:15px;height:15px}
.sv-d{font-size:10px;opacity:.65;margin:3px 0}
.guide-panel{max-width:440px;text-align:left}
.guide-panel h2{text-align:center}
.g-step{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:14px;line-height:1.3}
.g-n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;font-weight:900}
.g-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#fff;color:#0a84ff;flex:0 0 auto}
@media (max-height:420px){input{padding:6px 10px;margin:3px 0}.acct-p{margin:0 0 4px}.acct-panel h2{font-size:20px;margin-bottom:2px}}
/* v5: update / what's new / notification pop-ups */
#pop{z-index:70}
.pop-panel{max-width:min(92vw,460px);text-align:center;position:relative;animation:popIn .35s cubic-bezier(.2,1.4,.4,1)}
.pop-panel h2{margin:.1em 0 .2em}
.pop-ic{font-size:44px;line-height:1;margin-top:-4px;filter:drop-shadow(0 0 12px rgba(255,79,216,.8));animation:popTw 2.4s ease-in-out infinite}
.pop-ic.bell{animation:popBell 1.6s ease-in-out infinite;transform-origin:50% 10%}
.pop-sub{color:#3ef0e0;font-weight:700;margin-bottom:6px}
.pop-ver{display:inline-block;background:rgba(255,79,216,.25);border:1px solid rgba(255,79,216,.6);border-radius:10px;padding:0 7px;font-size:.8em;color:#ffd6f6;margin-left:4px}
.pop-notes{text-align:left;margin:8px auto 6px;padding:0 0 0 2px;list-style:none;max-height:38vh;overflow:auto}
.pop-notes li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:6px 10px;margin:5px 0;font-size:.95em}
.set-sub{opacity:.65;font-size:.8em;display:block}
@keyframes popIn{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes popTw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(12deg)}}
@keyframes popBell{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}}
@media (max-height:420px){.pop-ic{font-size:30px}.pop-notes{max-height:30vh}.pop-notes li{padding:3px 8px;margin:3px 0;font-size:.85em}.pop-panel h2{font-size:1.15em}}
#tester-badge{position:absolute;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:60;background:#ffcc00;color:#1a0b2e;font-weight:900;letter-spacing:.12em;font-size:12px;padding:3px 12px;border-radius:999px;border:2px solid #1a0b2e;box-shadow:0 0 12px #ffcc00;pointer-events:none}
#tester-badge.hidden{display:none}
.tester-row{border:1px dashed #ffcc00;border-radius:10px;padding:4px 8px}