:root{
  --ink:#2a1b2d; --card:#fffaf0; --accent:#ffd166; --accent-ink:#2a1b2d;
  --bg1:#163a2b; --bg2:#2f6b3d; --shadow:#0f2a1e; --soft:rgba(255,255,255,.14);
  --glow:#ffe9a8;
}
.theme-rongid{ --bg1:#2f6ea8; --bg2:#7cbf5a; --shadow:#1d4a6e; --accent:#ff7a1a; --accent-ink:#fff; --glow:#ffd7b0; }
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;color:var(--ink);background:var(--bg1);text-transform:uppercase;
  font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}
body{position:fixed;inset:0}
canvas#c{position:absolute;left:0;top:0;touch-action:none}
button,input{font:inherit;color:inherit;text-transform:inherit}
.ico{display:block}

/* ---------- screens ---------- */
.scr{position:fixed;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;
  gap:18px;padding:calc(env(safe-area-inset-top,0px) + 70px) 16px 28px;overflow-y:auto;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.10),rgba(0,0,0,0) 60%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg1) 78%,transparent),color-mix(in srgb,var(--bg2) 70%,transparent));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);touch-action:pan-y}
.scr.show{display:flex}
.scr>.inner{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:900px}
.topbar{position:fixed;left:0;right:0;top:0;z-index:11;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;pointer-events:none}
.topbar>*{pointer-events:auto}
.sp{flex:1}
h1.title{margin:0;font-size:clamp(40px,9vw,84px);font-weight:800;line-height:.95;color:#fff;letter-spacing:.5px;
  text-shadow:0 4px 0 var(--shadow),0 10px 30px rgba(0,0,0,.35)}
.sub{margin:0;font-size:clamp(20px,4.4vw,30px);font-weight:800;color:#fff;text-shadow:0 2px 0 var(--shadow)}
.hint{margin:0;font-size:17px;font-weight:600;color:rgba(255,255,255,.88);max-width:560px}

.ibtn{width:52px;height:52px;border:none;border-radius:50%;background:var(--card);padding:0;flex:none;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 var(--shadow);color:var(--ink);text-decoration:none}
.ibtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow)}
.btn{border:none;border-radius:999px;background:var(--card);cursor:pointer;font-weight:800;font-size:24px;
  padding:12px 26px 9px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 0 var(--shadow);color:var(--ink);min-height:60px}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--shadow)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.big{font-size:30px;min-height:76px;padding:14px 34px 11px}
.btn.small{font-size:19px;min-height:48px;padding:8px 18px 6px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn:focus-visible,.ibtn:focus-visible,.card:focus-visible{outline:4px solid var(--glow);outline-offset:3px}

/* ---------- profile + hero cards ---------- */
.cards{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;max-width:900px}
.card{position:relative;border:none;cursor:pointer;background:var(--card);border-radius:28px;width:150px;padding:8px 8px 10px;
  display:flex;flex-direction:column;align-items:center;box-shadow:0 7px 0 var(--shadow);color:var(--ink)}
.card:active{transform:translateY(5px);box-shadow:0 2px 0 var(--shadow)}
.card canvas{width:120px;height:120px}
.card .nm{font-size:22px;font-weight:800;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .meta{font-size:16px;font-weight:700;opacity:.7}
.card.add{justify-content:center;min-height:178px;color:var(--shadow)}
.card .del{position:absolute;top:-10px;right:-10px;width:42px;height:42px;border-radius:50%;border:none;
  background:#e0605e;color:#fff;display:none;place-items:center;cursor:pointer;box-shadow:0 3px 0 #a33c3a}
.card .edit{position:absolute;top:-10px;left:-10px;width:42px;height:42px;border-radius:50%;border:none;
  background:#fff;color:var(--ink);display:none;place-items:center;cursor:pointer;box-shadow:0 3px 0 var(--shadow)}
.editing .card .del,.editing .card .edit{display:grid}

.heroes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero{border:5px solid transparent;cursor:pointer;background:var(--card);border-radius:26px;width:150px;padding:4px 6px 8px;
  display:flex;flex-direction:column;align-items:center;box-shadow:0 6px 0 var(--shadow);color:var(--ink)}
.hero canvas{width:124px;height:124px}
.hero .nm{font-size:22px;font-weight:800;line-height:1}
.hero .pw{font-size:14px;font-weight:700;opacity:.7;line-height:1.15}
.hero.sel{border-color:var(--accent);transform:translateY(-4px) scale(1.04)}
.swatches{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sw{width:46px;height:46px;border-radius:50%;border:4px solid #fff;cursor:pointer;box-shadow:0 4px 0 var(--shadow)}
.sw.sel{outline:4px solid var(--accent);outline-offset:2px;transform:scale(1.12)}
.namein{text-transform:uppercase;font:800 28px "Baloo 2",system-ui,sans-serif;color:var(--ink);padding:8px 22px;border:none;border-radius:999px;
  text-align:center;width:min(340px,86vw);box-shadow:0 4px 0 var(--shadow);background:var(--card);
  -webkit-user-select:text;user-select:text}
.namein:focus{outline:4px solid var(--accent)}
.row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}

/* ---------- menu ---------- */
.who{display:flex;flex-direction:column;align-items:center;color:#fff;font-weight:800;font-size:28px;line-height:1.05;text-shadow:0 2px 0 var(--shadow);
  background:none;border:none;padding:0;cursor:pointer;border-radius:24px}
.who:focus-visible{outline:4px solid var(--glow);outline-offset:4px}
.who:active{transform:scale(.97)}
.btn.editme{margin-top:-8px;min-height:44px;font-size:17px;padding:6px 16px 4px;gap:6px;background:rgba(255,255,255,.9)}
.who canvas{width:130px;height:130px}
.who .meta{font-size:19px;opacity:.9}
.panels{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;width:100%}
.panels .panel{width:min(440px,100%)}
.panel{background:rgba(255,255,255,.13);border:2px solid rgba(255,255,255,.22);border-radius:30px;padding:18px 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;width:min(560px,100%)}
.panel h2{margin:0;color:#fff;font-size:24px;font-weight:800;text-shadow:0 2px 0 var(--shadow)}
.modes{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.modebtn{flex-direction:column;gap:0;min-width:150px;border-radius:26px;padding:10px 20px 8px}
.modebtn b{font-size:30px;line-height:1.05}
.modebtn small{font-size:16px;opacity:.75;font-weight:700}
.codein{font:800 40px "Baloo 2",system-ui,sans-serif;letter-spacing:10px;text-transform:uppercase;width:230px;text-align:center;
  border:none;border-radius:22px;padding:6px 10px 2px 20px;box-shadow:0 4px 0 var(--shadow);background:var(--card);color:var(--ink);
  -webkit-user-select:text;user-select:text}
.codein:focus{outline:4px solid var(--accent)}
.err{color:#fff;background:#d9534f;border-radius:14px;padding:6px 14px;font-weight:700;display:none}
.err.show{display:block}
.friendlist{display:flex;flex-direction:column;gap:10px;width:100%}
.friendrow{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:20px;padding:6px 14px 6px 6px;
  border:none;cursor:pointer;box-shadow:0 5px 0 var(--shadow);text-align:left;font-weight:800;font-size:20px;color:var(--ink)}
.friendrow canvas{width:54px;height:54px;flex:none}
.friendrow .lv{margin-left:auto;font-size:18px;opacity:.75}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;top:0;z-index:5;display:none;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;pointer-events:none}
#hud.show{display:flex}
#hud>*{pointer-events:auto}
.pill{background:var(--card);border-radius:999px;padding:3px 16px 1px;font-size:22px;font-weight:800;box-shadow:0 4px 0 var(--shadow);
  border:none;white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:42px}
.pill.code{cursor:pointer;letter-spacing:2px}
.pill.code small{letter-spacing:0;font-size:14px;opacity:.6}
#hudFriends{display:flex;gap:4px}
.mini{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 3px 0 var(--shadow)}
.mini canvas{width:44px;height:44px}
.mini b{position:absolute;right:-4px;bottom:-4px;background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:13px;
  min-width:20px;height:20px;line-height:21px;text-align:center;padding:0 4px}
.netdot{width:12px;height:12px;border-radius:50%;background:#5ad06a;box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.netdot.off{background:#e0605e}
@media (max-width:620px){ .pill{font-size:18px;padding:2px 11px 0;min-height:38px} .ibtn{width:46px;height:46px} #hudFriends{display:none} }

/* ---------- popups / sheets ---------- */
.pop{position:fixed;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;gap:12px;
  background:var(--card);border-radius:30px;padding:22px 24px 20px;box-shadow:0 10px 0 var(--shadow),0 20px 60px rgba(0,0,0,.4);
  width:min(440px,calc(100vw - 32px));text-align:center}
.pop.show{display:flex}
.pop .bigcode{font-size:64px;font-weight:800;letter-spacing:12px;line-height:1;padding-left:12px}
.pop .link{font-size:15px;font-weight:700;opacity:.7;word-break:break-all;-webkit-user-select:text;user-select:text}
.pop .close{position:absolute;top:10px;right:10px;width:42px;height:42px;box-shadow:none}

.sheet{position:fixed;z-index:15;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);
  display:none;flex-direction:column;align-items:center;gap:12px;width:min(520px,calc(100vw - 24px));
  background:color-mix(in srgb,var(--card) 94%,transparent);border-radius:32px;padding:18px 20px 20px;
  box-shadow:0 10px 0 var(--shadow),0 20px 60px rgba(0,0,0,.35);text-align:center}
.sheet.show{display:flex}
.sheet h2{margin:0;font-size:34px;font-weight:800;line-height:1}
.sheet p{margin:0;font-size:19px;font-weight:700;opacity:.8}
.sheet canvas.art{width:120px;height:120px}
.sheet .timeline{font-size:24px;font-weight:800;opacity:1}
.sheet .timeline.record{color:#d9480f}
.pill.time{font-variant-numeric:tabular-nums;min-width:96px;justify-content:center}
.sheet .waitlist{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sheet .waiter{display:flex;align-items:center;gap:6px;font-weight:800;font-size:18px;background:rgba(0,0,0,.05);border-radius:999px;padding:2px 12px 2px 2px}
.sheet .waiter canvas{width:40px;height:40px}

.toast{position:fixed;z-index:30;left:0;right:0;margin:0 auto;width:max-content;top:calc(env(safe-area-inset-top,0px) + 70px);transform:translateY(-20px);opacity:0;
  background:var(--card);border-radius:999px;padding:8px 22px 6px;font-weight:800;font-size:20px;box-shadow:0 5px 0 var(--shadow);
  transition:opacity .25s,transform .25s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translateY(0)}

/* on-screen action buttons for touch screens */
.act{position:fixed;z-index:6;right:calc(env(safe-area-inset-right,0px) + 18px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  width:96px;height:96px;border-radius:50%;border:none;background:var(--card);box-shadow:0 7px 0 var(--shadow);display:none;
  place-items:center;cursor:pointer;padding:0}
.act.show{display:grid}
.act canvas{width:96px;height:96px;pointer-events:none}
.act:active{transform:translateY(5px);box-shadow:0 2px 0 var(--shadow)}

/* arrow pad (bottom left, opposite the action button): data-dir is the arrow being held */
.pad{position:fixed;z-index:6;left:calc(env(safe-area-inset-left,0px) + 18px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  width:140px;height:140px;border-radius:50%;background:var(--card);box-shadow:0 7px 0 var(--shadow);display:none;touch-action:none}
.pad.show{display:block}
.pad svg{display:block;width:100%;height:100%;pointer-events:none}
.pad g circle{fill:rgba(42,27,45,.08);transition:fill .08s}
.pad path{fill:var(--ink);stroke:var(--ink);stroke-width:7;stroke-linejoin:round}
.pad .mid{fill:rgba(42,27,45,.15)}
.pad[data-dir=u] .u circle,.pad[data-dir=r] .r circle,.pad[data-dir=d] .d circle,.pad[data-dir=l] .l circle{fill:var(--accent)}

@media (prefers-reduced-motion:reduce){ .toast{transition:none} }