/* ================= GAMES PORTAL: shared look (matches Blakeit) ================= */
:root {
  --purple: #9a49aa; --purple-d: #6f2c80; --side: #2a1440; --bg: #4b1f63;
  --card: #fff; --text: #2b2b2b; --muted: #777; --green: #4bc22e; --red: #e8312f; --gold: #ffcd05;
  --shadow3d: inset 0 -6px rgba(0, 0, 0, .22);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; color: var(--text); background: var(--bg);
  background-image: radial-gradient(rgba(255,255,255,.07) 2px, transparent 2px); background-size: 28px 28px; }
h1, h2, h3 { font-family: 'Orbitron', 'Nunito', sans-serif; font-weight: 400; margin: 0 0 8px; letter-spacing: .3px; }
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }

/* top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.logo { font-family: 'Orbitron'; font-size: 40px; color: #fff; text-decoration: none; text-shadow: 0 4px 0 var(--purple-d), 0 6px 14px rgba(0,0,0,.4); }
.back { color: #fff; text-decoration: none; background: rgba(255,255,255,.14); padding: 8px 14px; border-radius: 12px; }
.back:hover { background: rgba(255,255,255,.24); }

/* search + category chips */
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.search { flex: 1 1 240px; font: inherit; padding: 12px 16px; border-radius: 14px; border: 3px solid transparent; outline: none; }
.search:focus { border-color: var(--gold); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: inherit; cursor: pointer; border: 0; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }
.chip.on { background: var(--gold); color: var(--side); }

/* game tiles */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; text-decoration: none; background: var(--card); border-radius: 18px; overflow: hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .15s; }
.tile:hover, .tile:focus-visible { transform: translateY(-4px); outline: none; }
.tile .art { height: 120px; display: grid; place-items: center; font-size: 64px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.tile .body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tile h3 { font-size: 22px; margin: 0; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.tag { align-self: flex-start; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #26132f; color: var(--neon); }
.grid { grid-auto-flow: dense; } .tile.right { grid-column: -2; }
/* ⭐ favourite star in each tile's top-right corner (Nate 2026-11-05) */
.tile { position: relative; }
.fav-star { position: absolute; top: 8px; right: 8px; z-index: 4; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font: 400 21px/1 system-ui, 'Segoe UI Symbol', sans-serif; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; transition: transform .12s, background .12s; }
.fav-star:hover, .fav-star:focus-visible { transform: scale(1.15); background: rgba(0,0,0,.7); outline: none; } .fav-star:focus-visible { box-shadow: 0 0 0 2px #fff; }
.fav-star.on { color: #ffcd05; text-shadow: 0 0 8px rgba(255,205,5,.75); }
.fav-star.pop { animation: favpop .35s ease-out; } @keyframes favpop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fav-chip small { font-size: .8em; opacity: .8; margin-left: 2px; } /* right = pinned to the right-hand column at every width; other tiles fill the gaps */
@media (max-width: 560px) { .logo { font-size: 32px; } }
.empty { color: #fff; text-align: center; padding: 40px 0; }

/* buttons + panels used by the games */
.panel { background: var(--card); border-radius: 18px; padding: 18px; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.btn { font: inherit; cursor: pointer; border: 0; color: #fff; background: var(--purple); padding: 10px 18px; border-radius: 12px; box-shadow: var(--shadow3d); }
.btn:hover { filter: brightness(1.08); }
.btn.green { background: var(--green); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
select { font: inherit; padding: 9px 12px; border-radius: 12px; border: 3px solid rgba(0,240,255,.3); }

/* account bar (portal home) + token popup (games) */
.acct { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #fff; }
.acct .who { background: rgba(255,255,255,.14); padding: 8px 14px; border-radius: 12px; }
.acct .bal { background: rgba(0,0,0,.25); padding: 8px 14px; border-radius: 12px; }
.acct button { font: inherit; cursor: pointer; border: 0; padding: 8px 14px; border-radius: 12px; color: #fff; background: rgba(255,255,255,.14); }
.acct button.go { background: var(--gold); color: var(--side); }
.acct button:hover { filter: brightness(1.15); }
#acc-toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); max-width: calc(100% - 32px); background: var(--side); color: #fff;
  padding: 12px 18px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .3s; z-index: 50; text-align: center; }
#acc-toast.show { transform: translate(-50%, 0); }
#acc-toast a { color: var(--gold); }

/* portal tabs: Games / Boss Fights */
.ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ptabs button { font: inherit; font-size: 18px; cursor: pointer; border: 0; padding: 10px 18px; border-radius: 14px; background: rgba(255,255,255,.14); color: #fff; }
.ptabs button.on { background: var(--gold); color: var(--side); }
.ptabs button:focus-visible, .tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tile.soon { filter: grayscale(.6); opacity: .75; cursor: default; } .tile.soon:hover { transform: none; }
/* 🏆 Leaderboards tab: one card per board, Overall across the top */
.lbx-note { color: var(--muted); margin: 0 0 14px; } .lbx-note b { color: var(--gold); }
.lbx { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.lbx-card.wide { grid-column: 1 / -1; } .lbx-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lbx-card .tag { font-size: 11px; }
.lbx-sub { margin: 2px 0 10px; font-size: 13px; color: var(--muted); }
.lbx-card ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lbx-card.wide ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); grid-auto-flow: row; }
.lbx-card li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.06); min-width: 0; }
.lbx-card li.me { box-shadow: 0 0 0 2px var(--gold); background: rgba(245,255,59,.1); }
.lbx-rank { min-width: 30px; font: 900 15px 'Orbitron', sans-serif; color: var(--cyan); text-align: center; }
.lbx-pal { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; display: grid; place-items: center; font-size: 22px; }
.lbx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: #fff; }
.lbx-name small { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; }
.lbx-val { flex-shrink: 0; font-weight: 800; color: #cfe9ff; white-space: nowrap; }
.lbx-name i { display: block; font-style: normal; font-weight: 700; font-size: 12px; color: #cfe9ff; overflow: hidden; text-overflow: ellipsis; } /* Overall: which board gave the best place */
.lbx-card li.lbx-none { background: none; color: var(--muted); padding: 6px 0; display: block; }
.lbx-card a, .lbx-you a { color: var(--cyan); } .lbx-you { margin: 10px 0 0; font-size: 13px; color: var(--muted); } .lbx-you b { color: #fff; }
@media (max-width: 560px) { .lbx-card { padding: 14px 12px; } .lbx-card li { gap: 8px; padding: 6px 8px; } .lbx-pal { width: 28px; height: 28px; } .lbx-val { font-size: 13px; } }

/* ================= NEON THEME: every portal page matches the cyberpunk splash ================= */
:root { --cyan: #00f0ff; --pink: #ff2bd6; --yellow: #f5ff3b;
  --purple: #a63dff; --purple-d: #5b1a9a; --side: #0b0218; --bg: #07010f; --card: rgba(16,8,34,.9); --text: #e8f1ff; --muted: #9fb0cc;
  --green: #2fe07a; --red: #ff3b6b; --gold: #f5ff3b; --shadow3d: inset 0 -4px rgba(0,0,0,.35);
  --glow: 0 0 0 1px rgba(0,240,255,.35), 0 0 18px rgba(0,240,255,.18); }
body { background: radial-gradient(ellipse at 50% 20%, #2a0a4a 0%, #0b0218 55%, #05010c 100%) fixed; color: var(--text); }
/* moving neon grid floor + scanlines behind the page */
body::before { content: ''; position: fixed; left: -50%; right: -50%; bottom: -10%; height: 50%; z-index: -1; pointer-events: none; transform: perspective(300px) rotateX(60deg);
  background-image: linear-gradient(var(--pink) 2px, transparent 2px), linear-gradient(90deg, var(--pink) 2px, transparent 2px);
  background-size: 60px 60px; opacity: .2; animation: neonfloor 1.6s linear infinite; -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 4px); }
@keyframes neonfloor { to { background-position: 0 60px; } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
body { position: relative; z-index: 0; }
h1, h2, h3 { font-family: 'Orbitron', 'Nunito', sans-serif; font-weight: 700; letter-spacing: .03em; }
.logo { font-family: 'Orbitron', 'Nunito', sans-serif; font-weight: 900; font-size: 34px; letter-spacing: .05em; text-shadow: 0 0 8px var(--cyan), 0 0 26px var(--pink); }
.back, .acct .who, .acct button, .chip { background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.35); color: #cfe9ff; }
.back:hover, .acct button:hover { background: rgba(0,240,255,.16); filter: none; }
.acct .bal { background: rgba(245,255,59,.08); border: 1px solid var(--yellow); color: var(--yellow); box-shadow: 0 0 10px rgba(245,255,59,.25); }
.acct button.go, .chip.on { background: var(--yellow); border-color: var(--yellow); color: #05010c; box-shadow: 0 0 14px rgba(245,255,59,.5); }
.search { background: rgba(255,255,255,.05); color: var(--text); border: 1px solid rgba(0,240,255,.4); }
.search::placeholder { color: var(--muted); }
.search:focus { border-color: var(--yellow); box-shadow: 0 0 10px rgba(245,255,59,.3); }
.tile, .panel { background: var(--card); box-shadow: var(--glow); color: var(--text); }
.tile:hover, .tile:focus-visible { box-shadow: 0 0 0 1px var(--pink), 0 0 24px rgba(255,43,214,.45); }
.tile .art { position: relative; text-shadow: 0 0 18px rgba(255,255,255,.35); }
.tile .art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px); }
.tile h3 { font-size: 18px; color: #fff; }
.tile p { color: var(--muted); }
.tag { background: rgba(0,240,255,.1); color: var(--cyan); border: 1px solid rgba(0,240,255,.35); }
.btn { font-family: 'Orbitron', 'Nunito', sans-serif; font-size: 14px; letter-spacing: .05em; box-shadow: var(--shadow3d), 0 0 14px rgba(166,61,255,.45); }
.btn.green { box-shadow: var(--shadow3d), 0 0 14px rgba(47,224,122,.45); color: #04140a; }
select { background: rgba(255,255,255,.05); color: var(--text); border-color: rgba(0,240,255,.35); }
select option { background: #140b2b; }
#acc-toast { background: #0b0218; border: 1px solid var(--cyan); box-shadow: 0 0 18px rgba(0,240,255,.35); }
/* Daily Wheel: a small tile at the top right of the games, and the spin window (wheel.js) */
button.tile { font: inherit; border: 0; padding: 0; text-align: left; cursor: pointer; }
.tile .art.wheel-art { height: 96px; font-size: 60px; }
.tile .art .tile-img { height: 92px; width: auto; position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); } /* a picture instead of an emoji (Spartan Swoop's school logo) */
.tile:hover .art.wheel-art { animation: wheelturn 2.4s linear infinite; }
@keyframes wheelturn { to { transform: rotate(360deg); } }
.wheel-when { align-self: flex-start; font-size: 13px; color: var(--muted); }
.wheel-when.ready { color: var(--yellow); text-shadow: 0 0 8px rgba(245,255,59,.5); }
.wheel-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(3,0,10,.78); }
.wheel-box { width: min(440px, 100%); text-align: center; margin-block: auto; }
.wheel-box h2 { margin: 0 0 4px; color: #fff; text-shadow: 0 0 10px var(--pink); }
.wheel-box .muted { color: var(--muted); margin: 0; font-size: 14px; }
.wheel-wrap { position: relative; width: min(300px, 72vw); aspect-ratio: 1; margin: 14px auto 6px; }
@media (max-width: 600px) { .wheel-wrap { width: min(350px, 84vw); } } /* a bit bigger on phones (Nate 2026-11-03) */
.wheel-box .btn.wheel-don { background: linear-gradient(135deg, #f5b400, #e84393); color: #fff; }
.wheel-box .btn[hidden] { display: none; }
.wheel-wrap svg { width: 100%; height: 100%; filter: drop-shadow(0 0 16px rgba(0,240,255,.35)); }
.wheel-wrap .wb0 { fill: #fff6c0; animation: bulb 1s steps(2) infinite; } .wheel-wrap .wb1 { fill: var(--pink); animation: bulb 1s steps(2) infinite .5s; }
@keyframes bulb { 50% { fill: #fff; } }
.wheel-pointer { position: absolute; top: -10px; left: 50%; z-index: 2; width: 30px; height: 40px; transform: translateX(-50%); transform-origin: 50% 15%;
  background: linear-gradient(var(--yellow), #c9a400); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 6px rgba(245,255,59,.7)); }
.wheel-pointer.flap { animation: flap .14s ease-out; }
@keyframes flap { 40% { transform: translateX(-50%) rotate(-18deg); } }
.wheel-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; border: 3px solid var(--cyan);
  background: radial-gradient(circle at 35% 30%, #3a1466, #0b0218); color: #fff; font: 900 14px 'Orbitron', sans-serif; cursor: pointer; box-shadow: 0 0 16px rgba(0,240,255,.6); }
.wheel-hub:hover { transform: translate(-50%, -50%) scale(1.06); }
.wheel-msg { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 16px; margin: 6px 0 10px; }
.wheel-msg.win { animation: winpop .5s cubic-bezier(.2,1.6,.4,1); color: var(--yellow); }
@keyframes winpop { from { transform: scale(.6); opacity: 0; } }
.wheel-pal { width: 64px; height: 64px; }
.wheel-rar { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--cyan); color: var(--cyan); }
.wheel-box .btn:disabled { opacity: .5; cursor: default; }
.wheel-odds { margin-top: 12px; font-size: 13px; color: var(--muted); } .wheel-odds summary { cursor: pointer; font-weight: 800; }
.wheel-odds span { display: inline-block; margin: 4px 8px; }
@media (prefers-reduced-motion: reduce) { .tile:hover .art.wheel-art, .wheel-wrap .wb0, .wheel-wrap .wb1 { animation: none; } }

/* ================= Friends tab (friends-tab.js) ================= */
.ft { display: flex; flex-direction: column; gap: 14px; }
.ft h2, .ft h3 { margin: 0 0 8px; color: #fff; } .ft-muted { color: var(--muted); margin: 0; }
.ptabs .ft-badge, .ft-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px; border-radius: 10px; background: var(--pink, #ff2bd6); color: #fff; font: 800 12px 'Nunito', sans-serif; vertical-align: middle; }
.ft-hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .ft-hero > div { flex: 1 1 320px; }
.ft-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ft-code span { color: var(--muted); font-size: 13px; } .ft-code b { font: 900 26px 'Orbitron', sans-serif; letter-spacing: .12em; color: var(--yellow, #f5ff3b); text-shadow: 0 0 12px rgba(245,255,59,.45); }
.ft-st { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ft-add { display: flex; gap: 8px; flex: 0 1 340px; } .ft-add input, .ft-say input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,240,255,.35); background: rgba(0,0,0,.35); color: #fff; }
.ft-add input { text-transform: uppercase; letter-spacing: .1em; }
.ft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); margin-top: 8px; }
.ft-row.on { background: rgba(47,224,122,.07); box-shadow: inset 3px 0 0 #2fe07a; }
.ft-row .btn { padding: 8px 12px; font-size: 12px; text-decoration: none; position: relative; } .ft-row .btn:disabled { opacity: .4; cursor: default; filter: grayscale(.6); }
.ft-av { width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; font-size: calc(var(--s) * .6); object-fit: contain; }
.ft-n { flex: 1 1 140px; display: flex; flex-direction: column; min-width: 0; } .ft-n b { color: #fff; } .ft-n small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #5a5a6a; vertical-align: middle; } .ft-dot.on { background: #2fe07a; box-shadow: 0 0 8px #2fe07a; }
.ft-waves { display: flex; gap: 2px; } .ft-waves button, .ft-quick button { font: inherit; font-size: 16px; cursor: pointer; border: 0; border-radius: 9px; padding: 4px 6px; background: rgba(255,255,255,.08); color: #fff; }
.ft-waves button:disabled { opacity: .35; cursor: default; }
.ft-ghost { background: rgba(255,255,255,.1) !important; box-shadow: none !important; color: #fff !important; }
.ft-x { font: inherit; cursor: pointer; border: 0; background: none; color: var(--muted); font-size: 16px; padding: 4px 8px; border-radius: 8px; } .ft-x.ask { background: var(--red, #e8312f); color: #fff; font-size: 12px; font-weight: 800; }
.ft-search { max-width: 420px; } .ft-search input { text-transform: none; letter-spacing: normal; } .ft-sub { font-size: 13px; margin-top: 8px; } .ft-results { max-height: 420px; overflow-y: auto; }
/* 📬 replies to your suggestions (friends-tab.js ftRepliesHTML): what you wrote, faint, then the admins' answer */
.ft-rep { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); color: var(--ft-ink, #fff); }
.ft-rep.new { box-shadow: inset 3px 0 0 #ffd23f; background: rgba(255,210,63,.08); }
.ft-rep p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; } .ft-rep small { color: var(--muted); font-size: 12px; }
.ft-rep-q { opacity: .75; font-size: 13px; padding-left: 9px; border-left: 2px solid color-mix(in srgb, currentColor 30%, transparent); }
.ft-rep-a { margin-top: 8px; font-size: 15px; }
.ft-rep-new { font-style: normal; font-weight: 800; font-size: 10px; letter-spacing: .05em; padding: 1px 6px; border-radius: 6px; background: #ffd23f; color: #2a1a00; }
.ft-wait { margin-top: 10px; font-size: 13px; } .ft-info { color: var(--muted); font-size: 13px; margin: 0; }
.ft-chat { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: #0d0620; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0,240,255,.45), 0 10px 40px rgba(0,0,0,.6); overflow: hidden; }
.ft-ch-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(0,240,255,.08); } .ft-ch-top b { flex: 1; color: #fff; } .ft-ch-top .ft-x { flex: none; }
.ft-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 160px; }
.ft-msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 15px; line-height: 1.3; word-wrap: break-word; }
.ft-msg.them { align-self: flex-start; background: rgba(255,255,255,.1); color: #fff; border-bottom-left-radius: 4px; }
.ft-msg.me { align-self: flex-end; background: var(--purple, #a63dff); color: #fff; border-bottom-right-radius: 4px; } .ft-msg.wait { opacity: .6; }
.ft-msg.inv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ft-msg.inv .btn { padding: 6px 10px; font-size: 12px; text-decoration: none; }
.ft-quick { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; } .ft-quick button { font-size: 13px; }
.ft-say { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.08); } .ft-say .btn { padding: 8px 14px; }
@media (max-width: 560px) { .ft-chat { right: 8px; left: 8px; bottom: 8px; width: auto; } .ft-row .ft-waves { order: 9; flex-basis: 100%; } .ft-add { flex-basis: 100%; } }

/* ---------- 🛠️ Admin Bar (account.js adds the button, admin-bar.js the bar) ---------- */
.top > .pab-btn { margin-left: auto; margin-right: -4px; width: 40px; height: 40px; border-radius: 50%; font-size: 19px; cursor: pointer; background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.35); opacity: .75; transition: transform .2s, opacity .2s; }
.top > .pab-btn:hover { opacity: 1; transform: rotate(-20deg) scale(1.08); } .top > .pab-btn.on { opacity: 1; background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 14px rgba(245,255,59,.5); }
/* hub: balance + username menu on the right, then the 🛠️ button just right of your name */
.hub-top { position: relative; } .hub-top > .acct { margin-left: auto; } .hub-top > .acct + .pab-btn { margin-left: 0; } /* the menu lines up with the right end of the top bar */
.acct button.fr, .acct button.me { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: #cfe9ff; overflow: hidden; }
.acct button.fr { position: relative; overflow: visible; font-size: 18px; } .acct button.fr.on { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 14px rgba(245,255,59,.5); }
.acct button.fr .ft-badge { position: absolute; top: -6px; right: -6px; margin: 0; min-width: 18px; height: 18px; font-size: 11px; }
.acct button.me img { width: 78%; height: 78%; object-fit: contain; }
.me-menu .me-head span { display: block; margin-top: 2px; color: #cfe9ff; }
/* the gold coin, same as Blakeit's (balances on every portal page) */
.tok { display: inline-block; width: 1em; height: 1em; margin-right: .35em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, #ffd21f 40%, #e69a00); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 2px #c27c00; position: relative; vertical-align: -.14em; flex-shrink: 0; font-style: normal; }
.tok::after { content: ''; position: absolute; inset: 17%; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cg transform=%22rotate%28-10 50 50%29%22%3E%3Cpath d=%22M47 8v16M47 76v16%22 stroke=%22%23a86a00%22 stroke-width=%228%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M30 22h24c11 0 18 6 18 14.5 0 5.5-3 9.5-7.5 11.5 6.5 2.3 10.5 7.4 10.5 14 0 9.5-8 16-20 16H30zM42 32.5v12h12c4.2 0 6.8-2.4 6.8-6s-2.6-6-6.8-6zM42 54.5v13h14c4.6 0 7.6-2.6 7.6-6.5s-3-6.5-7.6-6.5z%22 fill=%22%23a86a00%22 fill-rule=%22evenodd%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } /* the Cash Course coin's own B (Nate 2026-11-05: every coin matches) */
.acct .me[aria-expanded="true"] { background: rgba(0,240,255,.16); border-color: var(--cyan); }
.me-menu { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: 250px; max-width: calc(100vw - 24px); padding: 10px; border-radius: 12px;
  background: #0d0620; border: 1px solid var(--cyan); box-shadow: 0 0 20px rgba(0,240,255,.35); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.me-menu[hidden] { display: none; }
.me-menu .me-head { padding: 2px 4px 6px; font-size: 13px; color: var(--muted); border-bottom: 1px solid rgba(0,240,255,.2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-menu .me-head b { color: #fff; }
.acct .me-menu button { width: 100%; text-align: left; } .acct .me-menu button:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) { /* phones: balance, name and 🛠️ stay on one row under the logo */
  .hub-top > .logo { flex-basis: 100%; } .hub-top > .acct { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .hub-top .bal, .hub-top .who, .hub-top .acct > button { padding: 7px 10px; font-size: 13px; white-space: nowrap; } .hub-top .acct button.fr { font-size: 16px; }
  .hub-top .bal { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hub-top .acct button.me, .hub-top .acct button.fr { width: 36px; height: 36px; padding: 0; } }
.me-menu .me-msg { font-size: 13px; line-height: 1.4; color: #cfe9ff; padding: 4px; } .me-menu .me-msg small { display: block; margin-top: 4px; color: var(--muted); }
/* ---------- 🛠️ the portal Admin Bar (admin-bar.js): laid out like Blakeit's (#admin-bar in styles.css), in the portal's colours ---------- */
#pab { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(1100px, calc(100% - 24px)); z-index: 9000; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; color: #e8f4ff; }
.pab-box { background: #0b0218; border: 1px solid var(--cyan); border-bottom: 3px solid var(--yellow); border-radius: 16px; box-shadow: 0 0 26px rgba(0,240,255,.35), 0 18px 40px rgba(0,0,0,.6); padding: 12px 18px 16px; max-height: calc(100vh - 24px); overflow-y: auto; }
#pab input, #pab select, #pab textarea { font: inherit; font-size: 14px; padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(0,240,255,.35); background: #05010c; color: #fff; min-width: 0; }
#pab textarea { resize: vertical; line-height: 1.4; } #pab input:focus, #pab select:focus, #pab textarea:focus { outline: none; border-color: var(--yellow); }
.pab-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .pab-head b { font-family: 'Orbitron', sans-serif; font-size: 18px; letter-spacing: .04em; color: var(--yellow); white-space: nowrap; }
.pab-head small { flex: 1; font-size: 13px; opacity: .6; } .pab-x { border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; }
.pab-head code, .pab-help code { background: rgba(255,255,255,.12); padding: 0 5px; border-radius: 4px; color: var(--yellow); }
.pab-cmd { display: flex; align-items: center; gap: 8px; background: #05010c; border: 2px solid var(--yellow); border-radius: 14px; padding: 6px 8px 6px 14px; box-shadow: 0 0 18px rgba(245,255,59,.2); }
.pab-cmd.shake { animation: pab-shake .35s; border-color: #ff4d6d; } @keyframes pab-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pab-prompt { font-family: 'Orbitron', sans-serif; color: var(--yellow); font-size: 22px; }
#pab .pab-cmd input { flex: 1; border: 0; background: transparent; font-family: 'Courier New', monospace; font-weight: 900; font-size: 18px; padding: 6px 2px; }
.pab-eye { background: none; border: 0; cursor: pointer; font-size: 16px; opacity: .7; }
.pab-run { font: inherit; font-weight: 800; cursor: pointer; border: 0; border-radius: 10px; padding: 7px 16px; background: var(--yellow); color: #05010c; }
.pab-log { min-height: 8px; margin: 6px 4px; font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.pab-log .ok { color: #8dff7a; } .pab-log .err { color: #ff8a8a; } .pab-log a { color: var(--cyan); }
.pab-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .pab-t { font-size: 12px; padding: 3px 10px; border-radius: 10px; background: rgba(255,255,255,.08); color: #aaa; }
.pab-t.on { background: rgba(75,255,122,.18); color: #b8ffa8; }
.pab-buffs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: rgba(255,255,255,.05); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
.pab-buffs > b { font-family: 'Orbitron', sans-serif; font-size: 13px; color: var(--yellow); margin-right: 4px; } .pab-none { opacity: .55; font-size: 13px; }
.pab-buff { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(90deg, #2a9c4a, #1f7fd6); padding: 4px 12px; border-radius: 16px; font-size: 13px; font-weight: 800; }
.pab-buff:has(button) { padding-right: 4px; } .pab-buff button { border: 0; background: rgba(0,0,0,.3); color: #fff; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 10px; }
.pab-ext { color: #fff; text-decoration: none; opacity: .8; }
.pab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pab-panel { background: rgba(255,255,255,.05); border: 2px solid rgba(75,255,122,.45); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pab-panel[data-key=news], .pab-panel[data-key=suggest] { border-color: rgba(0,240,255,.45); } .pab-wide { grid-column: 1 / -1; }
.pab-panel h4 { margin: 0; font-family: 'Orbitron', sans-serif; font-size: 15px; letter-spacing: .03em; display: flex; align-items: center; gap: 8px; } .pab-panel h4 small { font-family: 'Nunito', sans-serif; font-size: 12px; opacity: .6; }
.pab-r { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .pab-r input, .pab-r select { flex: 1; min-width: 80px; } #pab .pab-n { flex: 0 0 64px; min-width: 0; }
.pab-spread { justify-content: space-between; }
.pab-note { font-size: 12px; opacity: .75; } .pab-help { font-size: 12px; opacity: .75; line-height: 1.6; }
.pab-chip { border: 0; border-radius: 10px; background: rgba(245,255,59,.16); color: var(--yellow); font: inherit; font-weight: 800; padding: 5px 10px; cursor: pointer; } .pab-chip:hover { background: rgba(245,255,59,.3); }
.pab-b { font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; border-radius: 9px; padding: 6px 11px; background: rgba(0,240,255,.14); color: #e8f4ff; border: 1px solid rgba(0,240,255,.4); text-decoration: none; }
.pab-b.green { background: rgba(75,255,122,.16); border-color: rgba(75,255,122,.5); } .pab-b.red { background: rgba(255,60,90,.16); border-color: rgba(255,60,90,.5); } .pab-b.blue { background: rgba(80,140,255,.2); border-color: rgba(80,140,255,.55); }
.pab-b.go { background: var(--cyan); color: #05010c; border-color: var(--cyan); } .pab-b.gold { background: linear-gradient(#ffe27a, #d79a12); color: #2a1a00; border-color: #ffd23a; box-shadow: 0 0 10px rgba(255,200,40,.45); font-weight: 800; } .pab-b:hover { filter: brightness(1.2); }
.pab-link { background: none; border: 0; color: #b9a8d6; font: inherit; font-size: 12px; cursor: pointer; padding: 0; } .pab-link:hover { color: #fff; }
.pab-foot { display: flex; gap: 12px; margin-top: auto; }
.pab-seg { display: flex; flex-wrap: wrap; background: rgba(0,0,0,.35); border-radius: 8px; padding: 2px; } .pab-seg button { border: 0; background: none; color: #ccc; font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.pab-seg button.on { background: var(--yellow); color: #05010c; }
.pab-art { display: inline-grid; place-items: center; flex: none; object-fit: contain; }
.pab-bls { display: flex; flex-wrap: wrap; gap: 4px; max-height: 150px; overflow-y: auto; background: rgba(0,0,0,.3); border-radius: 10px; padding: 6px; }
.pab-bl { position: relative; border: 0; background: none; padding: 2px; cursor: pointer; border-radius: 8px; opacity: .55; } .pab-bl.own { opacity: 1; } .pab-bl:hover { background: rgba(255,255,255,.15); opacity: 1; }
.pab-bl i, .pab-pbl i { position: absolute; font-style: normal; font-size: 10px; background: #9a49aa; border-radius: 6px; padding: 0 4px; } .pab-bl i { bottom: 0; right: 0; } .pab-pbl i { top: 0; right: 0; }
.pab-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.pab-prow { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 6px 8px; color: #fff; cursor: pointer; text-align: left; font: inherit; }
.pab-prow:hover { background: rgba(255,255,255,.14); } .pab-prow.on { box-shadow: inset 4px 0 0 #4bff7a; background: rgba(75,255,122,.1); } .pab-prow.banned { opacity: .75; } .pab-prow.banned small { color: #ff8a8a; }
.pab-pn { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pab-pn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .pab-pn i { font-style: normal; opacity: .7; }
.pab-pn small, .pab-ps small { font-size: 10px; opacity: .7; } .pab-ps { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; }
.pab-phead { display: flex; align-items: center; gap: 10px; } .pab-phead b { display: block; } .pab-phead small { opacity: .7; font-size: 11px; }
.pab-big { font-size: 18px; margin-right: 6px; }
.pab-ban { border: 1px solid rgba(255,60,90,.55); background: rgba(255,60,90,.08); border-radius: 12px; padding: 8px 10px; } .pab-ban > b { color: #ff8a8a; } .pab-ban .pab-r { margin-top: 4px; }
#pab .pab-ban select { flex: 0 0 auto; }
.pab-owned { max-height: 200px; } .pab-pbl { position: relative; display: inline-flex; padding: 2px; }
.pab-pbl button { position: absolute; bottom: 0; border: 0; width: 18px; height: 16px; font-size: 11px; line-height: 1; cursor: pointer; border-radius: 4px; color: #fff; }
.pab-m1 { left: 0; background: #e8312f; } .pab-p1 { right: 0; background: #2a9c4a; }
.pab-check { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; } #pab .pab-check input { width: 18px; height: 18px; accent-color: var(--yellow); }
.pab-sgl { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.pab-sgr { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); } .pab-sgr.done { opacity: .5; } .pab-sgr.done > div:first-child > b::after { content: ' ✓ complete'; color: #8dffb0; font-size: 12px; }
.pab-sgr small { opacity: .65; font-size: 12px; } .pab-sgr p { margin: 4px 0 6px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 💬 an admin's reply under a suggestion, and the box to write one */
.pab-sgrep { margin: 2px 0 6px 10px; padding: 6px 9px; border-left: 3px solid rgba(80,140,255,.7); border-radius: 0 8px 8px 0; background: rgba(80,140,255,.1); font-size: 13px; }
.pab-sgrep p { margin: 3px 0 0; } .pab-sgr textarea { width: 100%; box-sizing: border-box; margin: 4px 0; }
@media (max-width: 560px) { #pab { top: 6px; width: calc(100% - 12px); } .pab-box { padding: 10px 12px 14px; } .pab-head small { display: none; } .pab-grid { grid-template-columns: 1fr; } .top > .pab-btn { width: 36px; height: 36px; font-size: 17px; } }

/* ---------- 📣 News pop-up (news.js) and the News button next to 🏆 Leaders ---------- */
.news-box { width: min(460px, 100%); margin-block: auto; text-align: center; }
.news-mega { font-size: 64px; line-height: 1; display: inline-block; transform-origin: 30% 70%; animation: news-honk 1.6s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(245,255,59,.55)); }
@keyframes news-honk { 0%, 60%, 100% { transform: rotate(-8deg) scale(1); } 70% { transform: rotate(6deg) scale(1.15); } 80% { transform: rotate(-4deg) scale(1.05); } 90% { transform: rotate(4deg) scale(1.12); } }
.news-box h2 { margin: 8px 0 2px; color: var(--text, #fff); }
.news-when { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.news-text { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); max-height: 50vh; overflow-y: auto; }
.news-text.muted { text-align: center; color: var(--muted); }
.news-box .btn { display: block; margin: 0 auto; }
/* 📰 Earlier news (Nate 2026-11-13): the last 4 announcements under the current one, smaller and quieter; a long one shows 3 lines, tap for the rest */
.news-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.news-past { margin-top: 22px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent); text-align: left; }
.news-past h3 { margin: 0 0 8px; font-size: 15px; color: var(--muted); text-align: center; }
.news-old { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent); cursor: pointer; opacity: .85; }
.news-old:hover, .news-old:focus-visible { opacity: 1; } .news-old.short { cursor: default; }
.news-ohead { display: flex; align-items: baseline; gap: 8px; } .news-ohead b { flex: 1; min-width: 0; font-size: 14px; } .news-ohead span { flex: none; font-size: 12px; color: var(--muted); }
.news-otext { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.news-old.open .news-otext { display: block; -webkit-line-clamp: unset; }
.news-more::before { content: 'Read more ▾'; display: block; margin-top: 3px; font-size: 12px; font-weight: 800; color: var(--muted); }
.news-old.open .news-more::before { content: 'Show less ▴'; } .news-old.short .news-more { display: none; }
@media (max-width: 560px) { .ptabs { gap: 6px; } .ptabs button { font-size: 15px; padding: 9px 12px; } } /* Games, Leaders and News fit on one row on phones */
/* 📜 the Quests button's little chip: 1/3 done, 🎁 reward ready (pink, pulsing), ✓ picked */
.ptabs .quest-btn { position: relative; } .q-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px; font: normal 800 11px/16px 'Nunito', sans-serif; letter-spacing: 0; text-transform: none;
  vertical-align: 2px; background: color-mix(in srgb, currentColor 18%, transparent); }
.q-chip.ready { background: var(--pink, #ff2bd6); color: #fff; animation: qchip 1.4s ease-in-out infinite; } .q-chip.picked { opacity: .75; }
@keyframes qchip { 50% { transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .q-chip.ready { animation: none; } }
@media (prefers-reduced-motion: reduce) { .news-mega { animation: none; } }

/* ---------- ⛶ full screen (account.js) ---------- */
.top > .fs-btn { position: relative; z-index: 45; margin-left: auto; width: 40px; height: 40px; border-radius: 50%; font-size: 19px; cursor: pointer; color: #fff; background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.35); opacity: .85; transition: transform .2s, opacity .2s; }
.top > .fs-btn:hover { opacity: 1; transform: scale(1.08); }
.top > .fs-btn + .pab-btn { margin-left: 0; }
.top > .fs-btn.on { font-size: 17px; font-weight: 900; border-color: rgba(255,80,110,.7); background: rgba(255,60,90,.14); } /* ✕ leaves full screen */
.fs-exit { position: fixed; top: 8px; right: 8px; z-index: 1000; width: 38px; height: 38px; border-radius: 50%; font-size: 17px; cursor: pointer; color: #fff; background: rgba(10,4,24,.75); border: 1px solid rgba(0,240,255,.45); }
.fs-exit[hidden] { display: none; }
body.fs { overflow: hidden; }
body.fs:not(.fs-game) { overflow: auto; }
body.fs:not(.fs-game) .wrap { max-width: none; padding-left: 14px; padding-right: 14px; } /* Cash Course, Melody Meadow, Boss Fight, Platformers…: the whole width (Nate 2026-11-07) */
/* games laid out as game + side panel: fill the whole screen (Nate 2026-11-07: "take up the entire screen with little to no gaps"):
   no top bar, no edges, no frame; the game gets all the room its column has left (account.js sizes it, and games that can draw any
   shape take the screen's shape); on phones the buttons float over the game instead of sitting under it */
body.fs-game .wrap { max-width: none !important; width: 100%; height: 100vh; height: 100dvh; margin: 0 !important; padding: 0 !important; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; }
body.fs-game .wrap > .top { display: none; }
body.fs-game .wrap > :not(.arc) { flex: 0 0 auto; }
body.fs-game .arc { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; align-items: stretch; margin: 0; }
body.fs-game .arc > div:first-child { flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; position: relative; }
body.fs-game .arc > div:first-child > * { flex: 0 0 auto; }
body.fs-game .arc > div:first-child > .stage, body.fs-game .arc > div:first-child > .room { align-self: center; max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
html.fs-on.gp::after { display: none; } /* the theme's glowing frame round the screen */
/* tips and the Block World hearts float over the top of the game (they'd take a whole row otherwise) */
body.fs-game .arc > div:first-child > .stage ~ .say { position: absolute; z-index: 25; top: calc(var(--fs-above, 0px) + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 110px); margin: 0 !important;
  pointer-events: none; opacity: .92; box-sizing: border-box; }
body.fs-game .arc > div:first-child > .bw-hud { position: absolute; z-index: 26; top: 6px; left: 8px; margin: 0 !important; pointer-events: none; text-shadow: 0 1px 3px #000; }
body.fs-game .arc > div:first-child > .bw-hud ~ .say { top: calc(var(--fs-above, 0px) + 34px); }
/* 🏚️ Mystery Mansion on a wide screen: the message + your bag beside the room, so the room can be as tall as the screen */
@media (min-aspect-ratio: 13/10) {
  body.fs-game .arc > div:first-child:has(> .room) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 30%, 380px); grid-template-rows: 1fr auto; align-content: stretch; gap: 8px; padding: 6px; box-sizing: border-box; }
  body.fs-game .arc > div:first-child:has(> .room) > .room { grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center; }
  body.fs-game .arc > div:first-child:has(> .room) > .say { grid-column: 2; grid-row: 1; align-self: end; margin: 0 !important; }
  body.fs-game .arc > div:first-child:has(> .room) > .say { max-height: 45vh; overflow: auto; }
  body.fs-game .arc > div:first-child:has(> .room) > .inv { grid-column: 2; grid-row: 2; margin: 0 !important; max-height: 52vh; overflow: auto; }
  body.fs-game .arc > div:first-child:has(> .room) > .inv .slot, body.fs-game .arc > div:first-child:has(> .room) > .inv .item { width: clamp(44px, 9vh, 64px); height: clamp(44px, 9vh, 64px); }
}
body.fs-game .arc > div:first-child > :not(.stage):not(.room):not(.touch):not(.pads) { margin-top: 4px; margin-bottom: 0; } /* messages + tool bars: close together */
body.fs-game .arc > .side { display: none; }
body.fs-game[data-fs="side"] .arc > .side { display: flex; flex: 0 0 260px; overflow-y: auto; gap: 10px; padding: 8px; }
body.fs-game .wrap > .floors { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; margin: 0 !important; padding: 4px !important; gap: 4px; } body.fs-game .wrap > .floors > * { flex: 0 0 auto; } /* Mystery Mansion's floors: one row you can scroll */
body.fs-game .fs-exit { top: max(5px, env(safe-area-inset-top)); right: max(5px, env(safe-area-inset-right)); width: 30px; height: 30px; font-size: 14px; opacity: .72; background: rgba(10,4,24,.5); }
@media (max-aspect-ratio: 1/1) { /* phone held upright: the side panel goes under the game */
  body.fs-game .arc { flex-direction: column; }
  body.fs-game .arc > div:first-child { height: auto; flex: 1 1 0; min-height: 0; }
  body.fs-game[data-fs="side"] .arc > .side { flex: 0 0 34%; }
}
/* 📱 phones + tablets: the buttons and joysticks float over the bottom of the game, see-through, like a phone game */
@media (pointer: coarse) {
  body.fs-game .arc > div:first-child > .touch, body.fs-game .arc > div:first-child > .pads { position: absolute; left: var(--fs-left, 0); right: var(--fs-right, 0); bottom: var(--fs-below, 0); z-index: 30; display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; max-width: none !important; margin: 0 !important; box-sizing: border-box; padding: 10px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); pointer-events: none; }
  body.fs-game .touch > *, body.fs-game .pads > * { pointer-events: auto; }
  body.fs-game .touch button, body.fs-game .pad2 button { flex: 0 0 auto !important; width: 64px; height: 64px !important; border-radius: 50% !important; padding: 0; background: rgba(8,4,22,.34); border: 2px solid rgba(255,255,255,.4); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
  body.fs-game .touch button:active, body.fs-game .pad2 button:active { background: rgba(255,255,255,.3); }
  body.fs-game .touch > [data-k=right] { margin-right: auto; } body.fs-game .touch > [data-k=jump] { order: 3; width: 74px; height: 74px !important; } /* Lava Rising + Block World: ◀ ▶ on the left, jump on the right */
  body.fs-game .sw-touch { justify-content: flex-end; } body.fs-game .dv-touch { justify-content: flex-start; } /* Swoop's button on the right, Diver's joystick on the left */
  body.fs-game .sx-touch .sx-pair, body.fs-game .mm-touch .mm-mid { display: flex; flex: 0 0 auto; gap: 10px; max-width: none; }
  body.fs-game .sx-touch .sx-pair button { width: 56px; height: 56px !important; } body.fs-game .mm-touch .mm-lane { width: 70px; height: 70px !important; }
  body.fs-game .pad2 { flex: 0 0 auto !important; display: flex !important; flex-wrap: nowrap !important; align-items: flex-end; gap: 10px !important; padding: 0 !important; border: 0 !important; background: none !important; }
  body.fs-game .pad2 > b { display: none; } body.fs-game .pad2 .joy { width: 104px !important; height: 104px !important; } body.fs-game .pads .pad2:last-child { flex-direction: row-reverse; } /* P2: Grab on the inside */
  body.fs-game .joy { background: radial-gradient(circle, rgba(8,4,22,.18) 0 38%, rgba(255,255,255,.1) 39% 41%, rgba(8,4,22,.22) 42%); }
}
@media (max-height: 500px) { /* phone on its side: smaller messages so the game gets more room */
  body.fs-game .say { min-height: 0; margin-top: 6px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
  body.fs-game .mk-tools { margin-top: 6px; }
  body.fs-game .bw-hud { margin-bottom: 4px; }
  body.fs-game[data-fs="side"] .arc > .side { flex-basis: 220px; }
  body.fs-game .wrap > .floors { display: none !important; } /* Mystery Mansion: the escape panel has a ⬆ next-floor button */
}

/* the small "Version X" link at the bottom of the hub page and its Change Log pop-up (index.html, version.js) */
.site-ver { text-align: center; padding: 28px 0 10px; }
.site-ver button { font: inherit; font-size: 12px; background: none; border: 0; padding: 4px 8px; cursor: pointer; color: var(--muted); opacity: .6; }
.site-ver button:hover, .site-ver button:focus-visible { opacity: 1; text-decoration: underline; }
.ver-box { width: min(440px, 100%); margin-block: auto; }
.ver-box h2 { margin: 0 0 4px; color: var(--text, #fff); text-align: center; }
.ver-box .muted { color: var(--muted); margin: 0 0 12px; font-size: 14px; text-align: center; }
.ver-box ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.ver-box li { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); line-height: 1.35; }
.ver-box li[hidden] { display: none; }
.ver-box li b { flex: none; min-width: 2.6em; color: var(--yellow); }
.ver-box .btn { display: block; margin: 0 auto; }
.ver-box ul:has(+ .ver-older) { margin-bottom: 6px; }
.ver-older { display: block; margin: 0 auto 14px; font: inherit; font-size: 13px; background: none; border: 0; padding: 4px 8px; cursor: pointer; color: var(--muted); text-decoration: underline; }
.ver-older:hover, .ver-older:focus-visible { color: var(--text, #fff); }

/* ================= 📜 DAILY QUESTS (hub, quests.js) ================= */
.dq-full { width: min(580px, 100%); text-align: left; }
.dq-full .dq-list { grid-template-columns: 1fr; margin-bottom: 14px; }
.dq-full > .row { justify-content: center; }
.dq-top { margin: 0 0 12px; } .dq-top .dq-when { font-size: 13px; }
.dq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dq-head h2 { margin: 0; margin-right: auto; color: #fff; font-size: 22px; text-shadow: 0 0 10px var(--pink); }
.dq-when { font-size: 13px; color: var(--muted); }
.dq-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dq { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.dq-ico { font-size: 32px; flex: none; }
.dq-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dq-body b { font-size: 14px; line-height: 1.25; }
.dq-body small { font-size: 12px; color: var(--muted); }
.dq-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.dq-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink)); transition: width .4s; }
.dq.done { box-shadow: 0 0 0 2px var(--green), 0 0 18px rgba(47,224,122,.35); }
.dq.done .dq-bar i, .dq.claimed .dq-bar i { background: var(--green); }
.dq.claimed { opacity: .75; }
.dq-go { flex: none; padding: 8px 12px; font-size: 12px; text-decoration: none; white-space: nowrap; }
.dq-pickbtn { animation: dqpulse 1.4s ease-in-out infinite; }
.dq-head .dq-got { max-width: none; font-size: 14px; }
@keyframes dqpulse { 50% { transform: scale(1.06); } }
.dq-got { flex: none; font-size: 12px; color: var(--green); max-width: 96px; text-align: right; }
.dq-box .dq-ask { margin: 12px 0 8px; font-weight: 800; }
.dq-picks { display: grid; gap: 10px; }
.dq-pick { font: inherit; cursor: pointer; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 10px 14px; border-radius: 14px; border: 2px solid var(--cyan); background: rgba(0,240,255,.06); color: inherit; }
.dq-pick span { grid-row: span 2; font-size: 34px; text-align: center; }
.dq-pick b { font-size: 17px; } .dq-pick small { font-size: 12px; color: var(--muted); }
.dq-pick:hover:not(:disabled) { background: rgba(0,240,255,.16); transform: translateY(-1px); }
.dq-pick:disabled { opacity: .45; cursor: default; } .dq-pick.on { opacity: 1; border-color: var(--green); box-shadow: 0 0 16px rgba(47,224,122,.5); }
.dq-box .wheel-msg a { color: var(--cyan); }

/* ================= phone/tablet game buttons: pictures, not text (Nate) =================
   Each hold button has data-ic="left|right|up|down|jump|grab|boost|honk|stop|fire|flap" and no text, so holding it
   can't select anything; the picture is a mask filled with the button's text colour. No selection, long-press
   menu or grey tap flash on any of the game pads (account.js also blocks the long-press menu + touch selection). */
.touch, .pads, .pl-touch, .tb, [data-ic] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
[data-ic] { display: flex; align-items: center; justify-content: center; position: relative; }
[data-ic]::before { content: ''; width: 1.15em; height: 1.15em; flex: none; background: currentColor; pointer-events: none;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
[data-ic][data-n]::after { content: attr(data-n); position: absolute; top: 5px; right: 8px; font: 900 13px 'Orbitron', sans-serif; line-height: 1; pointer-events: none; }
[data-ic=left] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 4L6 12l10 8z' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ic=right] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4l10 8-10 8z' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ic=up] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l8-10 8 10z' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ic=down] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8l8 10 8-10z' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ic=jump] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 9h-5v6H9v-6H4z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Crect x='3' y='19.5' width='18' height='3' rx='1.5'/%3E%3C/svg%3E"); }
[data-ic=grab] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='3' height='9' rx='1.5'/%3E%3Crect x='8.7' y='3' width='3' height='9' rx='1.5'/%3E%3Crect x='12.4' y='3.5' width='3' height='9' rx='1.5'/%3E%3Crect x='16.1' y='5' width='3' height='8' rx='1.5'/%3E%3Crect x='5' y='10.5' width='14.1' height='11' rx='4.5'/%3E%3Crect x='1.5' y='9' width='3' height='7' rx='1.5' transform='rotate(-25 3 12.5)'/%3E%3C/svg%3E"); }
[data-ic=boost] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5c3.2 2.2 5 6.3 5 11l-1.8 3.5H8.8L7 12.5c0-4.7 1.8-8.8 5-11zM12 7a2.2 2.2 0 1 0 0 4.4A2.2 2.2 0 1 0 12 7z'/%3E%3Cpath d='M7.3 11.5L4 16v4l4.2-3zM16.7 11.5L20 16v4l-4.2-3zM9.7 17h4.6L12 23z'/%3E%3C/svg%3E"); }
[data-ic=honk] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 9.5h4l9-6v17l-9-6h-4z' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M18.5 8.5a5 5 0 0 1 0 7M21 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ic=stop] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='3'/%3E%3C/svg%3E"); }
[data-ic=fire] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.8 4.2 6.5 6.4 6.5 13a6.5 6.5 0 0 1-13 0c0-3.2 1.8-5.4 3.2-6.6 0 2.2.9 3.6 2.1 3.6 0-3.5-1.4-6.4 1.2-10z'/%3E%3C/svg%3E"); }
[data-ic=flap] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 16C4 9 10 4 22 3c-1 3-4 5-7 6 3 0 5 0 7-1-2 3-5 5-9 5 2 1 4 1 6 1-3 3-8 4-12 3-2 0-4-.5-5-1z'/%3E%3C/svg%3E"); }

/* ---------- 🪙 Cash Course game (was Coin Clicker; clicker.html + clicker.js, Nate 2026-11-04) ---------- */
.ck { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .ck { grid-template-columns: 1fr; } }
.ck-main { text-align: center; position: relative; }
.ck-main h2, .ck-shop h3 { margin: 0 0 10px; }
.ck-jar { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.ck-jar small { display: block; color: var(--muted); font-weight: 800; }
.ck-jar b { display: block; font-size: clamp(32px, 8vw, 52px); color: var(--gold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ck-jarart { width: min(var(--jw, 60px), 22vw); transition: width .5s cubic-bezier(.3,1.6,.5,1); height: auto; flex: none; filter: drop-shadow(0 0 10px rgba(255,205,5,.35)); }
.ck-full { display: none; color: var(--red); }
.ck-jar.full .ck-full { display: inline; }
.ck-jar.full .ck-jarart { animation: ck-shake .5s ease-in-out infinite alternate; }
@keyframes ck-shake { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.ck-coin { position: relative; width: min(var(--cs, 240px), 62vw); aspect-ratio: 1; margin: 14px auto 6px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; padding: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  background: radial-gradient(circle at 35% 30%, #fff6b0 0 8%, #ffd84a 22%, #f0a800 62%, #b87400 100%);
  box-shadow: inset 0 0 0 10px #d99400, inset 0 0 0 14px #ffe27a, 0 10px 0 #8a5600, 0 0 34px rgba(255,205,5,.55); transition: transform .06s; }
.ck-coin.growing { transition: width .7s cubic-bezier(.3,1.8,.5,1), transform .06s; }
.ck-coin:active, .ck-coin.hit { transform: scale(.94) translateY(4px); box-shadow: inset 0 0 0 10px #d99400, inset 0 0 0 14px #ffe27a, 0 5px 0 #8a5600, 0 0 44px rgba(255,205,5,.75); }
.ck-coin:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.ck-face { font: 900 calc(min(var(--cs, 240px), 62vw) * .36) 'Titan One', 'Nunito', sans-serif; color: #a86a00; text-shadow: 0 2px 0 #ffe98a, 0 -2px 0 #7a4a00; pointer-events: none; }
.ck-pop { position: absolute; transform: translate(-50%, -50%); font: 900 24px 'Nunito', sans-serif; color: #fff; text-shadow: 0 2px 0 #8a5600, 0 0 8px rgba(0,0,0,.4);
  pointer-events: none; animation: ck-pop .9s ease-out forwards; }
@keyframes ck-pop { to { transform: translate(-50%, -260%); opacity: 0; } }
.ck-rate { font-weight: 800; margin: 6px 0 12px; }
.ck-collect { font-size: 16px; }
.ck-collect:disabled, .ck-item .btn:disabled { opacity: .45; cursor: default; filter: none; }
.ck-note { font-size: 14px; margin: 12px 0 0; }
.ck-note a { color: var(--muted); font-weight: 800; text-decoration: underline; }
/* 📖 instructions pop-up (Nate 2026-11-04) */
.ck-help { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ck-helpbox { position: relative; max-width: 460px; width: 100%; text-align: left; }
.ck-helpbox h3 { margin: 0 0 10px; }
.ck-helpbox ul { margin: 0; padding-left: 4px; list-style: none; display: grid; gap: 8px; font-weight: 700; line-height: 1.35; }
.ck-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: inherit; font-size: 20px; cursor: pointer; }
.ck-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.ck-item.can { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,205,5,.25); }
.ck-ic { font-size: 30px; }
.ck-item b { display: block; }
.ck-item small { display: block; color: var(--muted); font-size: 12px; }
.ck-item .btn { white-space: nowrap; padding: 8px 12px; }
.ck-stats { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 8px; }
.ck-out { text-align: center; }
/* the coin grows with each Bigger Coin: a ring of light rushes out */
.ck-stage { position: relative; min-height: 120px; }
.ck-ring { position: absolute; inset: -6px; border-radius: 50%; border: 6px solid #fff6b0; pointer-events: none; animation: ck-ring .9s ease-out forwards; }
@keyframes ck-ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
/* the coin's Bitcoin-style ₿ (Nate 2026-11-04) + a small level badge */
.ck-btc { width: calc(min(var(--cs, 240px), 62vw) * .5); height: auto; display: block; margin-top: -10%; color: #a86a00; filter: drop-shadow(0 2px 0 #ffe98a) drop-shadow(0 -2px 0 #7a4a00); }
.ck-lv { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 99px; background: #7a4a00; color: #ffe98a;
  font: 900 calc(min(var(--cs, 240px), 62vw) * .09 + 4px) 'Nunito', sans-serif; pointer-events: none; white-space: nowrap; }
/* 📝 Extra Credit (Nate 2026-11-04): bought in the shop; the countdown bar, and a glowing coin with ×2 clicks */
.ck-ecbar { position: absolute; z-index: 2; top: 10px; left: 12px; right: 12px; overflow: hidden; /* over the title, so the coin doesn't move */ padding: 8px 12px; border-radius: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(90deg, #1d4ed8, #7c3aed, #db2777); box-shadow: 0 0 18px rgba(124,58,237,.7); animation: ck-ecpulse .6s ease-in-out infinite alternate; }
.ck-ecbar[hidden] { display: none; }
.ck-ecbar i { position: absolute; left: 0; bottom: 0; height: 4px; background: #fde047; transition: width .25s linear; }
@keyframes ck-ecpulse { to { box-shadow: 0 0 30px rgba(219,39,119,.9); } }
.ck-coin.ec { box-shadow: inset 0 0 0 10px #d99400, inset 0 0 0 14px #ffe27a, 0 10px 0 #8a5600, 0 0 0 6px #60a5fa, 0 0 50px #a78bfa; animation: ck-ecglow .5s ease-in-out infinite alternate; }
@keyframes ck-ecglow { to { box-shadow: inset 0 0 0 10px #d99400, inset 0 0 0 14px #ffe27a, 0 10px 0 #8a5600, 0 0 0 10px #f472b6, 0 0 70px #f472b6; } }
.ck-pop.ec { color: #fde047; font-size: 30px; text-shadow: 0 2px 0 #7c3aed, 0 0 10px #db2777; }
/* 🫙 jar upgrade transition (Nate 2026-11-04): old jar shakes + glows, a flash, the bigger jar drops in over light rays with coins flying out */
.ck-jarfx { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 18px; overflow: hidden;
  background: radial-gradient(circle, rgba(60,30,0,.82), rgba(0,0,0,.92)); animation: ck-fxin .25s ease-out; cursor: pointer; }
.ck-jarfx.out { animation: ck-fxout .35s ease-in forwards; }
@keyframes ck-fxin { from { opacity: 0; } }
@keyframes ck-fxout { to { opacity: 0; } }
.ck-rays { position: absolute; left: 50%; top: 45%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax; opacity: 0;
  background: repeating-conic-gradient(rgba(255,216,74,.32) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 30%); mask: radial-gradient(circle, #000 0, transparent 30%);
  animation: ck-rays-in .4s ease-out .9s forwards, ck-spin 8s linear infinite; }
@keyframes ck-rays-in { to { opacity: 1; } }
@keyframes ck-spin { to { transform: rotate(360deg); } }
.ck-fxstage { position: relative; width: 260px; height: 260px; display: grid; place-items: center; }
.ck-fxstage > * { grid-area: 1 / 1; }
.ck-fxjar { width: var(--jw); height: auto; filter: drop-shadow(0 0 16px rgba(255,205,5,.7)); }
.ck-oldjar { animation: ck-oldjar 1s ease-in forwards; }
@keyframes ck-oldjar { 0% { transform: scale(1); } 15% { transform: rotate(-8deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-10deg) scale(1.05); }
  60% { transform: rotate(10deg) scale(1.1); filter: brightness(1.6); } 80% { transform: scale(1.25); filter: brightness(3); opacity: 1; } 100% { transform: scale(.2); filter: brightness(4); opacity: 0; } }
.ck-flash { width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #fff6b0 30%, rgba(255,216,74,0) 70%); opacity: 0; transform: scale(.2);
  animation: ck-flash .6s ease-out .8s forwards; }
@keyframes ck-flash { 30% { opacity: 1; transform: scale(1.4); } to { opacity: 0; transform: scale(2.4); } }
.ck-newjar { opacity: 0; transform: translateY(-160px) scale(.4); animation: ck-newjar .8s cubic-bezier(.3,1.6,.5,1) 1s forwards; }
@keyframes ck-newjar { 60% { opacity: 1; transform: translateY(10px) scale(1.15, .9); } to { opacity: 1; transform: none; } }
.ck-fly { font-style: normal; font-size: 24px; opacity: 0; animation: ck-fly .9s ease-out calc(1s + var(--d)) forwards; }
@keyframes ck-fly { 10% { opacity: 1; } to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(540deg) scale(.6); } }
.ck-fxtext { position: relative; text-align: center; opacity: 0; transform: scale(.6); animation: ck-text .5s cubic-bezier(.3,1.8,.5,1) 1.4s forwards; }
.ck-fxtext b { display: block; font: 900 clamp(30px, 9vw, 46px) 'Titan One', 'Nunito', sans-serif; color: #ffd84a; text-shadow: 0 3px 0 #8a5600, 0 0 22px rgba(255,205,5,.8); }
.ck-fxtext span { display: block; margin-top: 6px; font-weight: 900; color: #fff; font-size: 17px; }
.ck-fxtext em { font-style: normal; color: #ffd84a; }
.ck-fxtext small { display: block; margin-top: 4px; color: #e9d5a0; font-weight: 800; font-size: 13px; }
@keyframes ck-text { to { opacity: 1; transform: none; } }
.ck-jar.newjar .ck-jarart { animation: ck-newjar-small .7s cubic-bezier(.3,1.8,.5,1) 2.6s backwards; }
@keyframes ck-newjar-small { from { transform: scale(.3); } }
@media (prefers-reduced-motion: reduce) { .ck-rays, .ck-ecbar, .ck-coin.ec { animation: none; } }
/* 🎮 a game the site admin switched off (account.js; Nate 2026-11-05) */
.game-off { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(5,2,15,.92); backdrop-filter: blur(4px); }
.game-off-card { max-width: 420px; text-align: center; } .game-off-ic { font-size: 54px; } .game-off-card h2 { margin: 6px 0; }
body.is-off { overflow: hidden; }
.tile.is-off { opacity: .45; filter: grayscale(.8); position: relative; }
.tile.is-off::after { content: 'OFF'; position: absolute; top: 10px; right: 10px; z-index: 3; font: 900 13px 'Nunito', sans-serif; letter-spacing: .08em; color: #fff; background: #e8312f; padding: 3px 9px; border-radius: 999px; }
/* the Admin Bar's 🎮 Games panel */
#pab .pab-games { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#pab .pab-game { font: 700 13px 'Nunito', sans-serif; border: 1px solid rgba(47,224,122,.6); background: rgba(47,224,122,.12); color: inherit; border-radius: 999px; padding: 5px 10px; cursor: pointer; }
#pab .pab-game b { font-size: 11px; margin-left: 4px; color: #2fe07a; }
#pab .pab-game.off { border-color: rgba(255,59,107,.7); background: rgba(255,59,107,.14); opacity: .85; } #pab .pab-game.off b { color: #ff3b6b; }
/* ⬆️ Upgraded flags: grey = not flagged, blue-green = flagged (the tile shows the banner) */
#pab .pab-game.pab-up { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.05); opacity: .8; } #pab .pab-game.pab-up.on { border-color: #36e2ff; background: rgba(54,226,255,.18); opacity: 1; }

/* 👑 the Admins box in the portal Admin Bar's Players panel (Nate 2026-11-05) */
.pab-adm { border: 1px solid rgba(245,255,59,.45); background: rgba(245,255,59,.06); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; } .pab-adm > b { color: var(--yellow); }
.pab-adm .pab-r { margin-top: 6px; flex-wrap: wrap; } .pab-adm select { flex: 1; min-width: 160px; }
.pab-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; background: rgba(0,240,255,.12); color: #fff; font-weight: 800; font-size: 13px; }
.pab-tag.own { background: rgba(245,255,59,.18); color: var(--yellow); }
.pab-unx { border: 0; background: none; color: #ff8a8a; cursor: pointer; font-weight: 900; padding: 0 2px; } /* the ✖ that takes admin away */
/* 🎚️ admin types + ⏰ tile times (Nate 2026-11-07) */
#pab .pab-adm .pab-r { flex-wrap: wrap; align-items: center; gap: 6px; } #pab .pab-admrow select { padding: 3px 6px; flex: 1 1 120px; min-width: 0; }
#pab #pab-adm-q { flex: 1 1 100%; min-width: 0; } #pab #pab-adm-role { flex: 1 1 120px; min-width: 0; }
#pab .pab-head .pab-role { margin-left: 8px; font-size: 12px; padding: 2px 8px; }
#pab .pab-tsi { font-style: normal; margin-left: 4px; } #pab .pab-tsi.asleep { opacity: .45; filter: grayscale(1); }
#pab .pab-tsbox { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.18); }
#pab .pab-tsbox h5 { margin: 0 0 6px; font-size: 13px; }
#pab .pab-tslist { display: grid; gap: 4px; margin-bottom: 6px; font-size: 13px; }
#pab .pab-ts { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: rgba(0,240,255,.07); }
#pab .pab-ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; } #pab .pab-ts-row > b { min-width: 64px; }
#pab .pab-ts-row input[type=time] { padding: 3px 6px; border-radius: 6px; }

/* 🪙 Cash Course: today's total and the 💰 Cashed Out pop-up (Nate 2026-11-05) */
.ck-day { margin: 4px auto 10px; max-width: 320px; font-size: 13px; color: var(--muted); }
.ck-day span b { color: var(--gold); } .ck-day.done span b { color: var(--green); }
.ck-day i { display: block; height: 8px; margin-top: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.ck-day i b { display: block; height: 100%; background: linear-gradient(90deg, #ffcd05, #2fe07a); transition: width .3s; }
.ck-cashbox { text-align: center; max-width: 380px; }
.ck-cashic { font-size: 54px; line-height: 1; filter: drop-shadow(0 0 14px rgba(255,205,5,.6)); }
.ck-cashbox h2 { margin: 6px 0; color: var(--gold); }
.ck-try { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; } .ck-try small { width: 100%; color: var(--muted); }
.ck-cashbox { position: relative; } .ck-cashbox .ck-x { z-index: 2; } /* the ✕ stays clickable above the big 💰 */
.ck-bag { width: 96px; height: auto; display: block; margin: 0 auto; } .ck-bag g { filter: drop-shadow(0 1.5px 0 #ffe98a) drop-shadow(0 -1.5px 0 #7a4a00); } /* the Cashed Out bag, with the coin's B */
.ck-bagi { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: .15em; } .ck-bagi .ck-bag { width: 100%; } /* the small bag with the B, in text */
/* 🪙 the coin badge opens the wallet pop-up on every page (account.js ACC.openWallet) */
.acct .bal.bal-go, .acct button.bal { cursor: pointer; } .acct .bal.bal-go:hover { filter: brightness(1.15); } .acct .bal.bal-go:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 🕹️ the phone joystick (Nate 2026-11-07; arcStick() in arcade.js): Treasure Diver, Spartan Express, Floppy Friends */
.joy { position: relative; flex: none; width: 128px; height: 128px; border-radius: 50%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0 38%, rgba(255,255,255,.1) 39% 41%, rgba(255,255,255,.05) 42%); border: 2px solid var(--joy, rgba(0,240,255,.55)); box-shadow: 0 0 14px rgba(0,240,255,.18) inset; }
.joy .joy-ring { position: absolute; inset: 22%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); pointer-events: none; }
.joy .joy-knob { position: absolute; left: 29%; top: 29%; width: 42%; height: 42%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff, var(--joy, #00f0ff) 55%, rgba(0,0,0,.35)); box-shadow: 0 4px 12px rgba(0,0,0,.45); transition: transform .12s; }
.joy.on .joy-knob { transition: none; } .joy.on { border-color: #fff; }
body.fs-game .joy { width: 104px; height: 104px; }
/* 🔍 Make admin search (Nate 2026-11-11): matching names as tappable chips under the search box */
#pab .pab-admres { margin-top: 6px; } #pab .pab-admlist { display: flex; flex-wrap: wrap; gap: 5px; max-height: 150px; overflow-y: auto; padding: 2px; }
#pab .pab-admhit { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(245,255,59,.4); background: rgba(245,255,59,.07); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
#pab .pab-admhit:hover { background: rgba(245,255,59,.2); } #pab .pab-admhit.on { background: rgba(245,255,59,.85); color: #1a1430; font-weight: 800; }
#pab .pab-admsel { margin-bottom: 5px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
/* ⏭ level skip inside the Admin Bar's 🎮 Game Currency box (Nate 2026-11-11) */
#pab .pab-skip { border: 1px solid rgba(58,255,200,.4); background: rgba(58,255,200,.06); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
#pab .pab-lvls { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; max-height: 140px; overflow-y: auto; }
#pab .pab-lv { min-width: 34px; padding: 4px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
#pab .pab-lv:hover { background: rgba(255,255,255,.16); } #pab .pab-lv.done { border-color: rgba(58,255,200,.6); color: #8fffd8; }
#pab .pab-lv.on { background: #ffd23f; color: #1a1430; border-color: #ffd23f; font-weight: 800; }

/* 📌 the Admin Bar keeps its scroll place exactly (no browser scroll anchoring nudges; Nate 2026-11-11) */
#pab .pab-box, #pab .pab-box * { overflow-anchor: none; }

/* ⭐ PLAYER LEVELS (Nate 2026-11-12): the little "Lv N" ribbon on a Pal picture (ACC.lvWrap). Colour by tier: 1–4 green, 5–9 blue, 10–19 purple, 20–49 gold, 50+ rainbow */
.lv-av { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; }
.lv-tag { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 2; pointer-events: none; white-space: nowrap; font: 800 9px/1 'Nunito', system-ui, sans-serif; letter-spacing: .02em;
  padding: 2px 7px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45); background: linear-gradient(#3fd07a, #15934a);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 50%, 100% 100%, 0 100%, 3px 50%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.lv-tag[data-t="2"] { background: linear-gradient(#5ab4ff, #1f6fe0); } .lv-tag[data-t="3"] { background: linear-gradient(#c58bff, #7a35d8); }
.lv-tag[data-t="4"] { background: linear-gradient(#ffe066, #f09a12); color: #3a2400; text-shadow: none; }
.lv-tag[data-t="5"] { background: linear-gradient(90deg, #ff5a7a, #ffb13d, #ffe95a, #5ae08a, #5ab4ff, #c58bff); color: #1b0f2e; text-shadow: none; }
.acct button.me.has-lv { overflow: visible; position: relative; } .acct button.me .lv-tag { bottom: -7px; }
.tile.lv-locked { position: relative; } .tile.lv-locked > .art, .tile.lv-locked > .body { opacity: .4; filter: grayscale(.85); }
.tile .lv-lock { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 3; white-space: nowrap; font: 900 15px 'Nunito', sans-serif; color: #fff; background: rgba(10,6,24,.88); border: 2px solid #ffd23f; border-radius: 999px; padding: 6px 14px; box-shadow: 0 0 16px rgba(255,210,63,.45); }
.tile .lv-lock.adm { top: 12px; left: 12px; transform: none; font-size: 11px; padding: 3px 8px; border-width: 1px; }
.th-opt.lv-locked { opacity: .55; } .th-opt .lv-lock { display: block; font: 800 10px 'Nunito', sans-serif; color: #ffd23f; background: rgba(10,6,24,.85); border-radius: 999px; padding: 1px 6px; margin-top: 2px; }
.pf-pal.lv-av { display: grid; } .pf-pal .lv-tag { font-size: 13px; padding: 3px 11px; bottom: -4px; }
.q-chip[hidden] { display: none; }
/* phones (Nate 2026-11-13, with 📜 Quests there are 4 buttons): Games · Leaders · Quests · News in one even row, icon above the word,
   the quest count as a small badge in the corner. !important beats each theme's own button sizes, which were made for 3 in a row */
@media (max-width: 560px) {
  .ptabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ptabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; white-space: nowrap;
    font-size: 13px !important; line-height: 1.1 !important; padding: 7px 2px !important; letter-spacing: 0 !important; }
  .ptabs button .emo { font-size: 1.6em; }
  .ptabs .q-chip { position: absolute; top: -7px; right: -3px; margin: 0; font-size: 10px; line-height: 15px; padding: 0 5px; background: var(--pink, #ff2bd6); color: #fff; }
  .ptabs .q-chip.picked { background: #2fe07a; color: #05210f; opacity: 1; }
}

/* ✨ a new game's banner on its hub tile for its first 5 days (Nate 2026-11-13; `added` + NEW_DAYS in portal/index.html) */
.tile .new-tag { position: absolute; top: 10px; left: 10px; z-index: 4; padding: 4px 11px 4px 9px; border-radius: 999px; font: 900 13px/1.2 'Nunito', sans-serif; letter-spacing: .06em; color: #1a0a24;
  background: linear-gradient(100deg, #ffe14d, #ff8ac0 55%, #9a7bff); box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 16px rgba(255,138,192,.55); overflow: hidden; pointer-events: none;
  animation: newbob 2.4s ease-in-out infinite; }
.tile .new-tag::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(0) skewX(-20deg); animation: newshine 2.8s ease-in-out infinite; }
@keyframes newbob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(-3deg) scale(1.04); } }
@keyframes newshine { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(480%) skewX(-20deg); } }
.tile.is-new { position: relative; } .tile.is-new .lv-lock.adm { top: 44px; } /* an admin's small level tag goes under the banner */
html[data-theme="pixel"] .tile .new-tag { border-radius: 0; font-family: 'Pixelify Sans', monospace; box-shadow: 3px 3px 0 #000; }
html[data-theme="vector"] .tile .new-tag { border-radius: 2px; background: #39ff6a; color: #001a07; font-family: 'Share Tech Mono', monospace; box-shadow: 0 0 14px rgba(57,255,106,.7); }
@media (prefers-reduced-motion: reduce) { .tile .new-tag, .tile .new-tag::after { animation: none; } }
/* ⬆️ an upgraded game's banner (Nate 2026-11-13; an admin flags it in 🎮 Game Tiles): the NEW banner's shape, in cool blue-green so the two read apart */
.tile .new-tag.up-tag { background: linear-gradient(100deg, #5effc8, #36e2ff 55%, #5a8bff); box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 16px rgba(54,226,255,.55); color: #04202a; }
html[data-theme="vector"] .tile .new-tag.up-tag { background: #36e2ff; color: #001a20; box-shadow: 0 0 14px rgba(54,226,255,.7); }