/* Decision 62 (owner's 21 points, 2026-09-29): popups, room admin, scenes, plans, badges. Same "Mokiz Soft" rules as
   components.css (flat, 1px borders, soft shadows); game effects (glow, fireworks) only inside game scenes. */

/* ---------- popup (core/client/modal.js) ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.62); animation: modal-fade 160ms ease; }
.modal-card { position: relative; width: min(100%, 440px); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--space-5); border-radius: var(--radius-l); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3); text-align: center; animation: modal-pop 200ms ease; }
.modal-card.modal-wide { width: min(100%, 880px); text-align: left; }
.modal-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.modal-x:hover { background: var(--surface-2); }
.modal-icon { font-size: 3rem; line-height: 1; margin-bottom: var(--space-2); }
.modal-title { font-size: var(--fs-2); margin: 0 0 var(--space-2); }
.modal-body { color: var(--text-muted); display: grid; gap: var(--space-2); justify-items: center; }
.modal-input { width: 100%; margin-top: var(--space-3); }
.modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.modal-actions .btn { flex: 1 1 140px; }
.modal-out { opacity: 0; transition: opacity 160ms ease; }
.modal-count { font-size: 1.35rem; font-weight: var(--w-heavy); color: var(--c-orange-700); }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop { from { transform: scale(0.94); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-card { animation: none; } }

/* ---------- teacher: manage a player in the waiting room (rename / remove) ---------- */
.player { position: relative; }
.player-manage { margin-left: auto; min-width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: 1.2rem; font-weight: var(--w-heavy); line-height: 1; cursor: pointer; }
.player-manage:hover { background: var(--c-orange-100); color: var(--c-orange-700); border-color: #fdba74; }

/* ---------- waiting-room places (core/client/lobby-scenes.js) ---------- */
.lobby-stage-scene { background: #2e1065; border-color: transparent; box-shadow: var(--shadow-2); }
.lobby-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lobby-stage-scene .lobby-name { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.sc-beam { transform-box: fill-box; transform-origin: 50% 0; animation: sc-sway 6s ease-in-out infinite alternate; }
.sc-beam-1 { animation-duration: 7.5s; animation-delay: -2s; }
.sc-beam-2 { animation-duration: 5s; animation-delay: -4s; }
.sc-bulb:nth-of-type(odd) { animation: sc-blink 1.4s steps(2) infinite; }
.sc-cloud { animation: sc-drift 18s ease-in-out infinite alternate; }
.sc-flag, .sc-flags { transform-box: fill-box; transform-origin: 0 50%; animation: sc-wave-flag 2.4s ease-in-out infinite alternate; }
.sc-wave { animation: sc-water 3s ease-in-out infinite alternate; }
.sc-fan { animation: sc-hop 0.9s ease-in-out infinite alternate; }
.sc-fountain { animation: sc-hop 0.7s ease-in-out infinite alternate; }
@keyframes sc-sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes sc-blink { 50% { opacity: 0.35; } }
@keyframes sc-drift { to { transform: translateX(60px); } }
@keyframes sc-wave-flag { to { transform: skewY(6deg) scaleX(0.94); } }
@keyframes sc-water { to { transform: translateX(14px); } }
@keyframes sc-hop { to { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .lobby-scene * { animation: none !important; } }
html[data-motion="reduced"] .lobby-scene * { animation: none !important; }

/* ---------- game mode pictures + plan groups on the teacher dashboard (items 3, 12) ---------- */
.mode-art .mode-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 250ms ease; }
.mode-card:hover .mode-svg, .mode-card[aria-pressed="true"] .mode-svg { transform: scale(1.04); }
.tier-group { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
.tier-group.tier-plus { border-color: #c7d2fe; background: color-mix(in srgb, #6366f1 4%, var(--surface)); }
.tier-group.tier-premium { border-color: #fcd34d; background: color-mix(in srgb, #f59e0b 5%, var(--surface)); }
.tier-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.tier-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: var(--w-strong); font-size: var(--fs-0); color: #fff; background: #16a34a; }
.tier-chip.tier-plus { background: var(--c-purple); }
.tier-chip.tier-premium { background: #d97706; }
.tier-title { font-weight: var(--w-strong); color: var(--text); }
.tier-ok { margin-left: auto; color: var(--ok); font-size: var(--fs-0); font-weight: var(--w-strong); }
.tier-unlock-btn { margin-left: auto; --btn: var(--surface); --btn-border: currentColor; color: var(--c-purple-700); }
.tier-premium .tier-unlock-btn { color: #b45309; }
.mode-locked .mode-art { filter: grayscale(0.7); opacity: 0.55; }
.mode-unlock { position: absolute; top: 8px; right: 8px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: var(--w-strong); color: #fff; background: var(--c-purple); box-shadow: var(--shadow-1); }
.mode-unlock.tier-premium { background: #d97706; }
.mode-card { position: relative; }
.modal-body .mode-svg { width: 100%; height: auto; max-height: 180px; border-radius: var(--radius-m); }
@media (max-width: 560px) { .tier-group { padding: var(--space-3); } .tier-ok, .tier-unlock-btn { margin-left: 0; } }

/* ---------- packages page (#/plans, item 11) ---------- */
.plans-page { max-width: 1100px; margin: 0 auto; }
.plans-hero h1 { font-size: var(--fs-4); margin: 0; }
.plan-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.plan-col { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-1); }
.plan-col h2 { margin: 0; font-size: var(--fs-3); }
.plan-col-plus { border: 2px solid var(--c-purple); box-shadow: var(--shadow-2); }
.plan-col-premium { border: 2px solid #f59e0b; }
.plan-col-mine { outline: 3px solid color-mix(in srgb, var(--ok-bg) 45%, transparent); }
.plan-col-icon { font-size: 2.2rem; }
.plan-ribbon { position: absolute; top: -12px; right: 16px; padding: 3px 12px; border-radius: 999px; background: var(--c-purple); color: #fff; font-size: var(--fs-0); font-weight: var(--w-strong); }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-price strong { font-size: 2.4rem; font-weight: var(--w-heavy); }
.plan-col-sub { margin: 0; }
.plan-points { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; gap: 8px; flex: 1; }
.plan-points li { position: relative; padding-left: 26px; }
.plan-points li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 0.75rem; font-weight: var(--w-heavy); }
.plan-cta { width: 100%; }
.btn-premium { --btn: #d97706; --btn-text: #fff; --btn-border: #d97706; }
.plan-table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--space-2)); }
.plan-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.plan-table th, .plan-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.plan-table th[scope="row"] { text-align: left; font-weight: 400; }
.plan-table thead th { position: sticky; top: 0; background: var(--surface); font-weight: var(--w-strong); }
.pt-head.pt-plus { color: var(--c-purple-700); }
.pt-head.pt-premium { color: #b45309; }
.pt-mine { background: color-mix(in srgb, var(--ok-bg) 8%, transparent); }
.pt-section th { text-align: left !important; background: var(--surface-2); font-weight: var(--w-strong); font-size: var(--fs-0); color: var(--text-muted); }
.pt-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: var(--w-heavy); }
.pt-no { color: var(--text-muted); }
.pt-lock { opacity: 0.55; }
.pt-game { display: flex; align-items: center; gap: 10px; }
.pt-thumb { flex: none; width: 56px; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.pt-thumb .mode-svg { width: 100%; height: 100%; display: block; }
.pt-soon { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 0.7rem; }
.plans-note { font-size: var(--fs-0); }
@media (max-width: 820px) { .plan-columns { grid-template-columns: 1fr; } }
.energy-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-2); }
.energy-dots span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--surface-2); filter: grayscale(1); opacity: 0.5; }
.energy-dots span.on { background: var(--warn-soft); filter: none; opacity: 1; }

/* ---------- home page (item 6): one grid, every block the same width ---------- */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); width: min(100%, 560px); margin: 0 auto; align-items: start; }
.home-grid .hero-join, .home-grid .home-account, .home-grid .ad-slot { width: 100%; max-width: none; margin: 0; }
.home-side { display: grid; gap: var(--space-3); }
.home-grid .home-tiles { grid-template-columns: 1fr; }
.home-tile { min-height: 72px; }
.home-tile-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.home-tile-text .muted { font-size: var(--fs-0); line-height: 1.35; }
.home-tile-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); font-size: 1.6rem; }
.home-tile-world .home-tile-icon { background: #e0f2fe; }
.home-tile-plans .home-tile-icon { background: #ede9fe; }
.home-tile-go { flex: none; color: var(--text-muted); font-size: 1.6rem; line-height: 1; }
.home-tile .chip { flex: none; }
.home-grid .home-quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.home-grid .home-quick-links .btn { width: 100%; }
@media (min-width: 900px) {
  .home-grid { width: min(100%, 1040px); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .home-grid > .ad-slot { grid-column: 1 / -1; }
  .home-side { position: sticky; top: 76px; }
  .home-grid .home-quick-links { grid-template-columns: 1fr; }
}

/* ---------- login / register (item 6) ---------- */
.auth-card { width: min(100%, 460px); margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-2); }
.auth-banner { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center 35%; background: var(--c-orange-100); }
.auth-banner-hello { object-fit: contain; object-position: center bottom; padding-top: var(--space-3); }
.auth-body { padding: var(--space-5); }
.auth-body h1 { margin: 0; font-size: var(--fs-3); }
.auth-switch { margin: 0; text-align: center; }
.auth-switch a { color: var(--c-orange-700); font-weight: var(--w-strong); }
.btn-block { width: 100%; min-height: 50px; }
.field-label { font-weight: var(--w-strong); }
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.role-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-3); border: 2px solid var(--border); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; transition: border-color var(--dur) ease, background-color var(--dur) ease; }
.role-card input { position: absolute; opacity: 0; pointer-events: none; }
.role-card-icon { font-size: 2.2rem; line-height: 1.1; }
.role-card-name { font-weight: var(--w-strong); }
.role-card:has(input:checked) { border-color: var(--c-orange); background: var(--c-orange-100); }
.role-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .auth-body { padding: var(--space-4); } .auth-banner { height: 120px; } }
.guide-thumb { flex: none; width: 72px; height: 42px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.guide-thumb .mode-svg { width: 100%; height: 100%; display: block; }
.guide-card summary .guide-icon { display: none; }

/* ---------- characters that shine (item 5, core/client/paperdoll.js) ---------- */
.paperdoll:not(.pd-bust) { overflow: visible; }
.paperdoll.pd-shiny { filter: drop-shadow(0 0 5px var(--pd-glow)); animation: pd-shine 2.4s ease-in-out infinite; }
.paperdoll.pd-shine-2 { filter: drop-shadow(0 0 8px var(--pd-glow)) drop-shadow(0 0 2px #fff); animation-name: pd-shine-strong; }
@keyframes pd-shine { 50% { filter: drop-shadow(0 0 10px var(--pd-glow)); } }
@keyframes pd-shine-strong { 50% { filter: drop-shadow(0 0 16px var(--pd-glow)) drop-shadow(0 0 5px #fff); } }
.paperdoll .pd-flap, .paperdoll .pd-sway, .paperdoll .pd-aura-pulse { transform-box: fill-box; transform-origin: center; }
.paperdoll .pd-flap { animation: pd-flap 1.5s ease-in-out infinite; }
.paperdoll .pd-sway { animation: pd-sway 3s ease-in-out infinite; }
.paperdoll .pd-aura-pulse { animation: pd-aura 3.2s ease-in-out infinite; }
@keyframes pd-flap { 0%, 100% { transform: scaleX(1) translateY(0); } 50% { transform: scaleX(0.84) translateY(-4px); } }
@keyframes pd-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes pd-aura { 0%, 100% { transform: scale(0.97); opacity: 0.9; } 50% { transform: scale(1.05); opacity: 1; } }
/* small screens and slow phones: keep the look, drop the moving light */
html[data-q="low"] .paperdoll.pd-shiny { animation: none; }
html[data-q="low"] .paperdoll :is(.pd-flap, .pd-sway, .pd-aura-pulse) { animation: none; }
@media (prefers-reduced-motion: reduce) { .paperdoll.pd-shiny, .paperdoll :is(.pd-flap, .pd-sway, .pd-aura-pulse) { animation: none; } }
html[data-motion="reduced"] .paperdoll.pd-shiny, html[data-motion="reduced"] .paperdoll .pd-flap, html[data-motion="reduced"] .paperdoll .pd-sway, html[data-motion="reduced"] .paperdoll .pd-aura-pulse { animation: none; }

/* ---------- the podium party (item 9): fireworks, throws, taunt poses ---------- */
.fx-fireworks { position: fixed; inset: 0; pointer-events: none; z-index: 1100; }
.fx-burst { position: absolute; width: 0; height: 0; }
.fx-rocket { position: absolute; left: -3px; top: 0; width: 6px; height: 16px; border-radius: 3px; opacity: 0; animation: fx-rocket 0.55s ease-out both; }
.fx-burst b { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; opacity: 0; animation: fx-spark 1.3s ease-out both; box-shadow: 0 0 8px currentColor; }
@keyframes fx-rocket { 0% { opacity: 1; transform: translateY(var(--rise)); } 99% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes fx-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 30px)) scale(0.4); } }
.fx-throw { position: fixed; left: 0; top: 0; z-index: 1100; font-size: 2rem; line-height: 1; pointer-events: none; }
.fx-splat { position: absolute; left: 50%; top: 30%; z-index: 4; font-size: 2.6rem; line-height: 1; transform: translate(-50%, -50%); animation: fx-splat 1.8s ease-out forwards; pointer-events: none; }
@keyframes fx-splat { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -20%) scale(1); opacity: 0; } }
.fx-hit { animation: fx-wobble 0.6s ease-in-out; }
@keyframes fx-wobble { 20% { transform: rotate(-8deg) scale(0.95); } 50% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
.final-party .podium-1 { position: relative; }
.final-party .podium-1::before { content: ""; position: absolute; left: 50%; bottom: 30%; width: 240px; height: 420px; transform: translateX(-50%); transform-origin: 50% 0; background: rgba(255, 230, 128, 0.28); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); pointer-events: none; animation: fb-spot 3s ease-in-out infinite alternate; }
@keyframes fb-spot { from { transform: translateX(-50%) rotate(-10deg); } to { transform: translateX(-50%) rotate(10deg); } }
.final-party .podium-1 .fb-standing .paperdoll { filter: drop-shadow(0 0 12px rgba(255, 216, 74, 0.9)); }
.pd-pose-taunt .pd-arm-l { transform: rotate(160deg); animation: pd-taunt-l 0.35s ease-in-out infinite alternate; }
.pd-pose-taunt .pd-arm-r { transform: rotate(-160deg); animation: pd-taunt-r 0.35s ease-in-out infinite alternate; }
.pd-pose-taunt .pd-head { animation: pd-tilt 0.7s ease-in-out infinite; }
.pd-pose-taunt .pd-body { animation: pd-sway 0.7s ease-in-out infinite; }
.pd-pose-flex .pd-arm-l { transform: rotate(120deg); animation: pd-flex-l 0.5s ease-in-out infinite alternate; }
.pd-pose-flex .pd-arm-r { transform: rotate(-120deg); animation: pd-flex-r 0.5s ease-in-out infinite alternate; }
.pd-pose-flex .pd-body { animation: pd-hop 1s ease-in-out infinite; }
@keyframes pd-taunt-l { from { transform: rotate(150deg); } to { transform: rotate(175deg); } }
@keyframes pd-taunt-r { from { transform: rotate(-150deg); } to { transform: rotate(-175deg); } }
@keyframes pd-flex-l { from { transform: rotate(110deg); } to { transform: rotate(135deg) scale(1.08); } }
@keyframes pd-flex-r { from { transform: rotate(-110deg); } to { transform: rotate(-135deg) scale(1.08); } }
.react-fx-targets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.reaction-btn.fx-btn { font-size: 1.6rem; }
@media (prefers-reduced-motion: reduce) {
  .final-party .podium-1::before, .fx-hit { animation: none; }
  .pd-pose-taunt .pd-arm-l, .pd-pose-taunt .pd-arm-r, .pd-pose-flex .pd-arm-l, .pd-pose-flex .pd-arm-r { animation: none; }
}

/* ---------- [badge] [flag] name (item 19, core/client/name-tag.js + flags.js) ---------- */
.name-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; vertical-align: middle; }
.name-tag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.flag { flex: none; display: inline-block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.name-badge { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: var(--w-strong); line-height: 1.5; white-space: nowrap; color: #fff; background: #64748b; }
.name-badge.nb-compact { padding: 0 5px; font-size: 0.75rem; }
.nb-guest { background: #94a3b8; }
.nb-student { background: #0d9488; }
.nb-teacher { background: #ea580c; }
.nb-plus { background: var(--c-purple); }
.nb-premium { background: #d97706; }
.nb-vip { background: #111827; color: #fde68a; box-shadow: 0 0 0 1px #fbbf24 inset, 0 0 8px rgba(251, 191, 36, 0.55); animation: nb-shine 2.4s ease-in-out infinite; }
@keyframes nb-shine { 50% { box-shadow: 0 0 0 1px #fde68a inset, 0 0 14px rgba(251, 191, 36, 0.9); } }
@media (prefers-reduced-motion: reduce) { .nb-vip { animation: none; } }
.room-you { display: flex; justify-content: center; font-weight: var(--w-strong); font-size: var(--fs-2); }
.lobby-name .name-tag { gap: 3px; }
.podium-name .name-tag, .fb-name .name-tag { justify-content: center; }
.flag-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; padding: 2px; }
.flag-pick { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; font-size: var(--fs-0); text-align: left; }
.flag-pick[aria-pressed="true"] { border-color: var(--c-orange); background: var(--c-orange-100); }
.badge-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-pick { min-height: 44px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; }
.badge-pick[aria-pressed="true"] { border-color: var(--c-orange); background: var(--c-orange-100); }
.name-preview { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-2); border-radius: var(--radius-m); background: var(--surface-2); font-size: var(--fs-2); font-weight: var(--w-strong); }

/* ---------- admin: bans (item 20) ---------- */
.admin-ban-form > * { flex: 1 1 160px; }
.ban-meter { width: 90px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; }
.ban-meter span { display: block; height: 100%; background: #ef4444; }

/* inputs outside a .field (admin tools, popups) get the same look as form fields */
.admin-page input:not([type=checkbox]):not([type=radio]), .admin-page select, .modal-input {
  min-height: 44px; padding: 0 var(--space-3); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
}
.admin-page input:focus, .admin-page select:focus, .modal-input:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
/* admin: question images (item 17) */
.admin-img-bar { align-items: center; gap: var(--space-2); }
.admin-img-bar .spacer { flex: 1; }
.img-picked { background: color-mix(in srgb, var(--bad-soft) 60%, transparent); }
.img-size { width: 80px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 2px; }
.img-size span { display: block; height: 100%; background: var(--c-purple); }
.admin-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--c-orange); }

/* ---------- central question bank (item 16) ---------- */
.central-row { display: flex; flex-wrap: wrap; gap: 6px; }
.central-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: var(--fs-0); cursor: pointer; }
.central-chip[aria-pressed="true"] { border-color: var(--c-orange); background: var(--c-orange-100); color: var(--c-orange-700); font-weight: var(--w-strong); }
.central-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 0.75rem; text-align: center; }
.central-set { border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-3); background: var(--surface); }
.central-set-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.central-set-text { flex: 1 1 220px; min-width: 0; }
.central-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); font-size: 1.5rem; }
.central-preview { margin: var(--space-3) 0 0; padding-left: 1.4em; display: grid; gap: var(--space-2); }
.central-options { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.central-picker-filters select { min-height: 40px; }
.chip-central { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; margin-top: 4px; }
.admin-central-picks > select { flex: 1 1 160px; }

/* ---------- Mokiz Board (item 13, games/jamboard) ---------- */
.jam-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.jam-mode { display: grid; gap: 4px; justify-items: start; padding: var(--space-3); border: 2px solid var(--border); border-radius: var(--radius-m); background: var(--surface); text-align: left; cursor: pointer; }
.jam-mode[aria-pressed="true"] { border-color: var(--c-orange); background: var(--c-orange-100); }
.jam-mode-icon { font-size: 1.8rem; }
.jam-mode small { color: var(--text-muted); }
.jb-board { position: relative; width: 100%; aspect-ratio: 1000 / 600; container-type: inline-size; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-l); background: #f8fafc; touch-action: none; user-select: none; }
.jb-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jb-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jb-topic { position: absolute; z-index: 1; left: 0; right: 0; top: 0; padding: 1.2cqw 2cqw; background: var(--c-purple); color: #fff; font-weight: var(--w-strong); font-size: 2.2cqw; text-align: center; }
.jb-board[data-mode="mindmap"] .jb-topic { left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: 24%; min-height: 8%; display: grid; place-items: center; padding: 1.2cqw; border-radius: 999px; font-size: 1.8cqw; box-shadow: 0 0 0 0.6cqw rgba(99, 102, 241, 0.2); cursor: pointer; }
.jb-topic.jb-picked { box-shadow: 0 0 0 0.6cqw #f97316; }
.jb-notes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.jb-note { position: absolute; width: 12%; height: 15%; padding: 0.7cqw; display: flex; flex-direction: column; background: var(--jb-c, #fde68a); color: #1f2937; box-shadow: 0 0.2cqw 0.6cqw rgba(15, 23, 42, 0.16); border-radius: 0.3cqw; font-size: 1.25cqw; line-height: 1.3; pointer-events: auto; cursor: default; transition: left 300ms ease, top 300ms ease, box-shadow 150ms ease; }
.jb-teacher .jb-note { cursor: grab; }
.jb-note.jb-drag { transition: none; cursor: grabbing; z-index: 5; box-shadow: 0 0.8cqw 2cqw rgba(15, 23, 42, 0.3); transform: rotate(-2deg); }
.jb-note.jb-new { animation: jb-in 350ms ease; }
.jb-note.jb-mine { outline: 0.25cqw solid #f97316; }
.jb-note.jb-picked { outline: 0.4cqw solid #6366f1; }
.jb-text { flex: 1; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.jb-foot { display: flex; align-items: center; gap: 0.4cqw; font-size: 0.95cqw; color: rgba(31, 41, 55, 0.7); }
.jb-by { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-like { display: inline-flex; align-items: center; gap: 0.3cqw; min-width: 2.6cqw; padding: 0.1cqw 0.5cqw; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); color: #9f1239; font-size: 1cqw; cursor: pointer; }
.jb-liked .jb-like { background: #fecdd3; }
.jb-del { position: absolute; top: -0.8cqw; right: -0.8cqw; width: 2.2cqw; height: 2.2cqw; min-width: 22px; min-height: 22px; display: none; border: 0; border-radius: 999px; background: #1f2937; color: #fff; font-size: 1cqw; cursor: pointer; }
.jb-note:hover .jb-del, .jb-note:focus-within .jb-del, .jb-phone .jb-mine .jb-del { display: grid; place-items: center; }
.jb-pen { cursor: crosshair; }
.jb-pen .jb-note { pointer-events: none; opacity: 0.85; }
@keyframes jb-in { from { transform: scale(0.4) rotate(-8deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jb-note { transition: none; } .jb-note.jb-new { animation: none; } }
.jam-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.jam-count { font-weight: var(--w-strong); margin-right: auto; }
.jam-add input { min-height: 38px; min-width: 200px; padding: 0 var(--space-2); border: 1px solid var(--border-strong); border-radius: 8px; }
.jam-pens { display: flex; gap: 4px; }
.jam-pen { width: 34px; height: 34px; border: 2px solid var(--border); border-radius: 999px; background: var(--pen, var(--surface)); cursor: pointer; }
.jam-pen[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--c-orange); }
.jam-pen-off { display: grid; place-items: center; font-size: 1rem; }
.jam-phone .jb-note { font-size: 1.6cqw; }
.jam-topic-phone { padding: var(--space-3); border-radius: var(--radius-m); background: var(--c-purple); color: #fff; font-weight: var(--w-strong); font-size: var(--fs-2); text-align: center; }
.jam-write textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-m); font-size: var(--fs-1); resize: vertical; box-shadow: var(--shadow-1); }
.jam-colors { display: flex; gap: 8px; }
.jam-color { width: 44px; height: 44px; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 12px; cursor: pointer; }
.jam-color[aria-pressed="true"] { box-shadow: 0 0 0 3px #1f2937; }
.jam-status, .jam-parent, .jam-tip { margin: 0; font-size: var(--fs-0); }
.jam-report-topic { font-size: var(--fs-2); font-weight: var(--w-strong); margin: 0; }
.jam-report-img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-m); }

/* ---------- party games (item 8, games/party_quest) ---------- */
.party-scene { position: relative; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.party-svg { display: block; width: 100%; height: auto; }
.party-compact .party-svg { max-height: 220px; }
.party-clock { position: relative; height: 26px; background: var(--surface-2); }
.party-clock-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ok-bg); transition: width 250ms linear; }
.party-clock strong { position: absolute; right: 10px; top: 2px; font-weight: var(--w-heavy); }
.party-clock-low .party-clock-bar { background: var(--bad-bg); }
.party-mine .party-label { fill: #fde047; }
.party-rower .party-oar { transform-box: fill-box; transform-origin: 50% 0; }
.party-wave { animation: sc-water 3s ease-in-out infinite alternate; }
.party-float { animation: party-float 1.4s ease-out forwards; }
@keyframes party-float { to { transform: translateY(-40px); opacity: 0; } }
.party-sway.party-wobble { animation: party-sway 0.9s ease-in-out infinite alternate; }
@keyframes party-sway { from { transform: rotate(calc(var(--sway) * -1)); } to { transform: rotate(var(--sway)); } }
.party-drop { animation: party-drop 380ms ease-out; }
@keyframes party-drop { from { transform: translateY(-60px); opacity: 0; } }
.party-fall { animation: party-fall 1.2s ease-in forwards; }
@keyframes party-fall { to { transform: translate(var(--fx), 220px) rotate(80deg); opacity: 0; } }
.party-shard { animation: party-shard 0.9s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes party-shard { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }
.party-boom { animation: party-boom 0.5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes party-boom { from { transform: scale(0.2); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .party-shard, .party-boom { animation-duration: 0.01s; } }
.party-cloud { animation: sc-drift 20s ease-in-out infinite alternate; }
.party-market { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); padding: var(--space-3); background: #fef9c3; }
.pm-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon name price" "icon chart move"; align-items: center; gap: 2px 10px; padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface); border: 1px solid #fde68a; }
.pm-icon { grid-area: icon; font-size: 2.2rem; }
.pm-name { grid-area: name; font-weight: var(--w-strong); }
.pm-price { grid-area: price; font-size: 1.4rem; font-weight: var(--w-heavy); }
.pm-move { grid-area: move; font-size: var(--fs-0); color: var(--text-muted); text-align: right; }
.pm-up { color: #15803d; }
.pm-down { color: #dc2626; }
.pm-chart { grid-area: chart; width: 100%; height: 30px; }
.party-compact .party-market { grid-template-columns: repeat(2, 1fr); padding: var(--space-2); gap: var(--space-2); }
.party-compact .pm-card { padding: 6px 8px; }
.party-compact .pm-icon { font-size: 1.5rem; }
.party-compact .pm-price { font-size: 1.05rem; }
.party-live { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-3); align-items: start; }
.party-side { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
.party-side h3 { margin: 0 0 var(--space-2); }
.party-top { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: top; }
.party-top li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-s); background: var(--surface-2); counter-increment: top; }
.party-top li::before { content: counter(top); font-weight: var(--w-heavy); color: var(--text-muted); width: 1.2em; }
.party-top-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-team-result { display: grid; gap: 6px; max-width: 520px; margin: 0 auto; }
.party-team-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border); }
.party-team-row:first-child { border-color: #fbbf24; background: #fffbeb; }
.party-team-rank { font-weight: var(--w-heavy); width: 2em; }
.party-team-row span:last-child { margin-left: auto; font-weight: var(--w-strong); }
.party-me { justify-content: center; }
.party-team-chip { display: inline-flex; align-items: center; gap: 6px; }
.party-trade summary { font-weight: var(--w-strong); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.pm-trade { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--border); }
.party-vote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.party-vote-btn { display: grid; justify-items: center; gap: 2px; min-height: 58px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); font-size: 1.5rem; cursor: pointer; }
.party-vote-btn small { font-size: 0.7rem; color: var(--text-muted); }
.party-vote-btn[aria-pressed="true"] { border-color: var(--c-orange); background: var(--c-orange-100); }
@media (max-width: 900px) { .party-live { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .party-scene * { animation: none !important; transition: none !important; } }
html[data-motion="reduced"] .party-scene * { animation: none !important; }
.pm-trade .pm-icon, .pm-trade .pm-name { grid-area: auto; }
.pm-trade .pm-icon { font-size: 1.5rem; }

/* ---------- Mokiz World (item 7, platform/world) ---------- */
.world-live { max-width: 1200px; margin: 0 auto; }
.world-head { align-items: center; gap: var(--space-2); }
.world-title { margin: 0 auto 0 0; font-size: var(--fs-3); }
.world-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-3); align-items: start; }
.world-map { height: min(66vh, 620px); border-radius: var(--radius-l); overflow: hidden; }
.world-map .mq-view { height: 100%; }
.world-fish { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); min-height: 56px; }
.world-cast, .world-reel { min-height: 52px; min-width: 200px; font-size: var(--fs-2); }
.world-bite { animation: world-bite 0.35s ease-in-out infinite alternate; }
@keyframes world-bite { to { transform: scale(1.06) rotate(-1deg); } }
.world-bobber { margin: 0; font-weight: var(--w-strong); animation: world-bob 1.2s ease-in-out infinite; }
@keyframes world-bob { 50% { transform: translateY(-4px); } }
.world-chat { display: flex; flex-direction: column; gap: var(--space-2); max-height: calc(66vh + 60px); }
.world-chat h2 { margin: 0; font-size: var(--fs-2); }
.world-chat-list { flex: 1; min-height: 160px; max-height: 360px; overflow-y: auto; margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 6px; }
.world-line { display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--radius-s); background: var(--surface-2); font-size: var(--fs-0); overflow-wrap: anywhere; }
.world-line .name-tag { font-weight: var(--w-strong); }
.world-chat-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: 10px; }
.world-phrases { display: flex; flex-wrap: wrap; gap: 4px; }
.world-phrases .btn { min-height: 34px; }
.world-chat-msg, .world-safety { margin: 0; font-size: 0.75rem; }
.world-rarity { font-weight: var(--w-strong); }
.rarity-common { --r: #64748b; } .rarity-uncommon { --r: #16a34a; } .rarity-rare { --r: #2563eb; } .rarity-epic { --r: #9333ea; } .rarity-legendary { --r: #d97706; }
.world-rarity.chip { color: #fff; background: var(--r); border-color: var(--r); }
.world-catch .modal-icon { font-size: 4.5rem; animation: modal-pop 400ms ease; }
.world-catch.rarity-legendary .modal-icon, .world-catch.rarity-epic .modal-icon { filter: drop-shadow(0 0 12px var(--r)); }
.world-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.world-album-card { display: grid; justify-items: center; gap: 2px; padding: var(--space-2); border: 2px solid var(--r); border-radius: var(--radius-m); background: var(--surface); text-align: center; }
.world-album-card small { color: var(--r); font-weight: var(--w-strong); }
.world-album-icon { font-size: 2.2rem; }
.world-missing { opacity: 0.45; border-style: dashed; }
@media (max-width: 900px) { .world-main { grid-template-columns: 1fr; } .world-map { height: 56vh; } .world-chat-list { max-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .world-bite, .world-bobber { animation: none; } }

/* ---------- Kitchen Rush (item 21, games/kitchen_rush) ---------- */
.kr-stage { height: min(58vh, 520px); border-radius: var(--radius-l); overflow: hidden; }
.kr-stage .mq-view { height: 100%; }
.kr-hud { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--w-strong); }
.kr-team { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; border: 1px solid var(--team); color: var(--text); background: var(--surface); }
.kr-score { font-size: var(--fs-2); font-weight: 800; }
.kr-time { font-variant-numeric: tabular-nums; }
.kr-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
.kr-hold { display: flex; align-items: center; gap: var(--space-2); min-width: 150px; }
.kr-hold-pic { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.kr-hold-text { font-weight: var(--w-strong); font-size: var(--fs-0); max-width: 16ch; }
.kr-use { min-height: 56px; min-width: 120px; font-size: var(--fs-2); }
.kr-orders-box { min-width: 0; }
.kr-orders { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.kr-order { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dish name" "dish parts" "time time"; column-gap: 6px; min-width: 128px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-2); }
.kr-order-dish { grid-area: dish; font-size: 1.9rem; line-height: 1; align-self: center; }
.kr-order-name { grid-area: name; font-weight: var(--w-strong); font-size: var(--fs-0); }
.kr-order-parts { grid-area: parts; font-size: 1rem; letter-spacing: 1px; }
.kr-order-time { grid-area: time; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--border); overflow: hidden; }
.kr-order-time span { display: block; height: 100%; background: #22c55e; transition: width 0.3s linear; }
.kr-late { border-color: #ef4444; }
.kr-late .kr-order-time span { background: #ef4444; }
.kr-late .kr-order-dish { animation: kr-shake 0.5s ease-in-out infinite; }
@keyframes kr-shake { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.kr-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); }
.kr-level { display: grid; gap: 4px; text-align: left; min-height: 72px; padding: var(--space-3); border: 2px solid var(--border); border-radius: var(--radius-m); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.kr-level.is-on { border-color: var(--c-orange); background: var(--c-orange-100); }
.kr-howto summary { cursor: pointer; font-weight: var(--w-strong); min-height: 44px; display: flex; align-items: center; }
.kr-live-head { justify-content: space-between; font-size: var(--fs-2); }
.kr-observer { display: flex; justify-content: center; border-radius: var(--radius-l); overflow: hidden; background: #2d3a4a; }
.kr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-2); }
.kr-card { display: grid; gap: 4px; padding: var(--space-2); border: 1px solid var(--border); border-top: 4px solid var(--team); border-radius: var(--radius-m); background: var(--surface); }
.kr-card-head { display: flex; align-items: center; gap: 6px; }
.kr-card-score { margin-left: auto; font-size: var(--fs-2); font-weight: 800; }
.kr-rank { font-weight: 800; color: var(--text-muted); }
.kr-card-sub { margin: 0; font-size: var(--fs-0); }
.kr-card .kr-order { min-width: 104px; padding: 4px 6px; }
.kr-card .kr-order-dish { font-size: 1.4rem; }
.kr-world-head { flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.kr-world-status { flex: 1; min-width: 12ch; }
.kr-world-top { margin: 0; font-size: var(--fs-0); }
.kr-pick { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
@media (max-width: 640px) {
  .kr-bar { grid-template-columns: 1fr auto; }
  .kr-orders-box { grid-column: 1 / -1; }
  .kr-stage { height: 50vh; }
}
@media (prefers-reduced-motion: reduce) { .kr-late .kr-order-dish { animation: none; } .kr-order-time span { transition: none; } }

/* ---------- item 10: team picker shows each team's shape (never color alone), a full kitchen is greyed ---------- */
.team-choice::before { content: none; }
.team-choice .team-badge { display: inline-grid; margin-bottom: var(--space-1); }
.team-choice[aria-pressed="true"] > .team-badge { background: #fff; color: var(--team) !important; }
.team-choice:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Mokiz World rework (owner 2026-09-29): arrow buttons, an action button, focus mode, the games menu ---------- */
.mq-pad { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px);
  grid-template-areas: ". up ." "left . right" ". down ."; gap: 2px; touch-action: none; user-select: none; -webkit-user-select: none; }
.mq-pad-btn { width: 52px; height: 52px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(31, 36, 48, 0.45); color: #fff; font-size: 1.2rem;
  display: grid; place-items: center; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.mq-pad-btn.is-on, .mq-pad-btn:active { background: rgba(249, 115, 22, 0.85); border-color: #fff; }
.mq-pad-up { grid-area: up; } .mq-pad-down { grid-area: down; } .mq-pad-left { grid-area: left; } .mq-pad-right { grid-area: right; }
.world-map { position: relative; outline: none; }
.world-map:focus-visible { box-shadow: 0 0 0 3px var(--c-orange); }
.world-action { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; display: flex; gap: var(--space-2); pointer-events: none; }
.world-action .btn { pointer-events: auto; }
.world-act { min-height: 56px; min-width: 190px; font-size: var(--fs-2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.world-stage-wrap { position: relative; }
.world-focus-exit, .world-menu-float { display: none; }
.world-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
.world-hint > span:nth-child(2) { flex: 1; min-width: 16ch; }
.world-hint-icon { font-size: 1.6rem; }
/* focus: the map fills the screen, the arrows and the action stay on it */
/* owner 2026-09-30: the whole game fills the screen, its panel (fishing gear, the kitchen's hands and orders, the
   waiting match) inside it on the right (a sheet at the bottom on a phone): nothing is left outside the game */
.world-focus .world-left { position: fixed; inset: 0; z-index: 60; background: #2d3a4a; display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 38vw); gap: 0; }
.world-focus .world-stage-wrap { position: relative; min-width: 0; }
.world-focus .world-map { height: 100vh; height: 100dvh; border-radius: 0; }
.world-focus .world-area { max-height: 100vh; max-height: 100dvh; overflow: auto; padding: 56px 12px 12px; background: var(--surface); border-left: 1px solid var(--border); }
.world-focus .world-area:empty { display: none; }
@media (max-width: 760px) {
  .world-focus .world-left { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .world-focus .world-map { height: 100%; min-height: 0; }
  .world-focus .world-area { max-height: 44dvh; padding: 10px; border-left: 0; border-top: 1px solid var(--border); }
}
.world-focus .world-focus-exit { display: inline-flex; position: fixed; top: 10px; right: 10px; z-index: 61; }
.world-focus .world-menu-float { display: inline-flex; position: fixed; top: 10px; left: 10px; z-index: 61; }
.world-focus .world-act { min-height: 64px; min-width: 220px; }
html.world-focus-on { overflow: hidden; }
/* the games menu */
.world-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-2); }
.world-place { display: grid; justify-items: center; gap: 4px; padding: var(--space-3); border: 2px solid var(--border); border-radius: var(--radius-l); background: var(--surface); color: var(--text);
  font: inherit; text-align: center; cursor: pointer; min-height: 120px; }
.world-place:hover:not(.is-soon) { border-color: var(--c-orange); transform: translateY(-1px); }
.world-place.is-here { border-color: var(--c-orange); background: var(--c-orange-100); }
.world-place.is-soon { opacity: 0.55; cursor: default; border-style: dashed; }
.world-place-icon { font-size: 2.4rem; line-height: 1; }
/* a guest's way in */
.world-guest { max-width: 520px; margin: 0 auto; }
.world-guest input { min-height: 52px; font-size: var(--fs-2); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: 12px; }
.world-guest-chars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.world-guest-chars .char-pick { min-height: 72px; }
/* the kitchen hall lobby */
.kr-party ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.kr-party li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border: 1px solid var(--team); border-radius: 999px; background: var(--surface); font-size: var(--fs-0); }
.kr-levels-sm .kr-level { min-height: 56px; padding: var(--space-2); }
@media (max-width: 640px) {
  .mq-pad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); right: 8px; bottom: 8px; }
  .mq-pad-btn { width: 46px; height: 46px; }
  .mq-has-pad .mq-joy { display: none; } /* the arrows replace the joystick in the world */
  .world-action { bottom: 160px; }
  .world-act { min-width: 160px; }
}

/* ---------- home (owner 2026-09-29): the PIN card is the page, a small menu under it ---------- */
.home-solo { display: grid; gap: var(--space-3); width: min(100%, 560px); margin: 0 auto; }
.home-solo .hero-join { width: 100%; max-width: none; margin: 0; }
.home-solo .hero-banner { max-height: 190px; }
.home-solo .ad-slot { width: 100%; margin: 0; }
.home-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: var(--space-2); }
.home-mini-item { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 72px; padding: var(--space-2) 4px; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface); color: var(--text); text-decoration: none; text-align: center; transition: border-color var(--dur) ease, transform var(--dur) ease; }
.home-mini-item:hover { border-color: var(--c-orange); transform: translateY(-1px); }
.home-mini-icon { font-size: 1.5rem; line-height: 1; }
.home-mini-label { font-size: var(--fs-0); font-weight: var(--w-strong); line-height: 1.25; overflow-wrap: anywhere; }
.home-why { margin: 0; font-size: var(--fs-0); }
@media (max-width: 420px) { .home-mini { grid-template-columns: repeat(3, 1fr); } .home-solo .hero-banner { max-height: 140px; } }

/* ---------- payments: PromptPay + slip, the gem shop, plan buttons (owner 2026-09-29) ---------- */
.pay-steps { text-align: left; margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
.pay-promptpay { background: #fff; padding: var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--border); display: inline-block; }
.pay-promptpay svg { width: min(260px, 70vw); height: auto; display: block; }
.pay-bank { align-items: center; text-align: center; } .pay-bank-no { font-size: 1.6rem; font-weight: 800; letter-spacing: 1px; margin: 0; user-select: all; } /* owner 2026-10-01: bank transfer instead of PromptPay */
.pay-due { font-size: var(--fs-3); }
.pay-slip, .pay-sandbox { width: 100%; max-width: 360px; margin: 0 auto; text-align: left; }
.pay-slip-file, .pay-sandbox-amount { min-height: 48px; padding: var(--space-2); border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); width: 100%; }
.pay-slip-msg { margin: 0; min-height: 1.4em; }
.pay-rules { font-size: var(--fs-0); text-align: left; }
.pay-received { font-weight: var(--w-strong); }
.gem-balance { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.gem-open { justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-m); }
.gem-pack:disabled { opacity: 0.5; cursor: not-allowed; }
.gem-pack-rate { font-size: var(--fs-0); }
.gem-promise { margin: 0; padding-left: 1.2em; font-size: var(--fs-0); display: grid; gap: 2px; }
.gem-not-ready { justify-self: center; }
.plan-cta-box { gap: var(--space-2); }
.admin-credit { align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
/* the world's columns may shrink below the map canvas's size (a grid item's min-width is its content: on a phone the
   canvas kept the column 600+ px wide and the page slid sideways) */
.world-main > *, .world-left, .world-stage-wrap { min-width: 0; }
.world-map .mq-canvas { max-width: 100%; }

/* ---------- flat 2D art everywhere (owner 2026-09-29: no AI-looking pictures): code-drawn mascot and banners ---------- */
.art-mascot svg { display: block; width: 100%; height: auto; overflow: visible; }
.art-sleep { position: relative; }
.art-sleep::after { content: "z z z"; position: absolute; top: 4%; right: 2%; font-weight: 800; color: var(--c-purple, #8b5cf6); letter-spacing: 2px; animation: art-zz 2.4s ease-in-out infinite; }
.art-thinking { position: relative; }
.art-thinking::after { content: "?"; position: absolute; top: 0; right: 8%; font-size: 1.8em; font-weight: 800; color: var(--c-orange); animation: art-zz 2s ease-in-out infinite; }
@keyframes art-zz { 50% { transform: translateY(-6px); opacity: 0.6; } }
.art-banner { position: relative; overflow: hidden; background: #cfe8ff; }
.art-banner .lobby-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-crowd { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; align-items: flex-end; gap: 2%; padding: 0 4%; }
.art-crowd-one { flex: 0 1 17%; max-width: 120px; }
.art-crowd-one svg { display: block; width: 100%; height: auto; overflow: visible; }
.art-crowd-1 { flex-basis: 21%; max-width: 140px; } /* Moki in front, a bit bigger */
.hero-banner.art-banner { aspect-ratio: 1408 / 640; height: auto; }
.auth-banner.art-banner { height: 150px; }
.teacher-hero-art.art-banner { aspect-ratio: 1 / 1; height: auto; }
.teacher-hero-art .art-crowd-one:nth-child(n+3) { display: none; }
.teacher-hero-art .art-crowd-one { flex-basis: 45%; }
@media (max-width: 560px) { .auth-banner.art-banner { height: 120px; } }
@media (prefers-reduced-motion: reduce) { .art-sleep::after, .art-thinking::after { animation: none; } }

/* ---------- Kitchen Rush 2D art + the recipe book (decision 64) ---------- */
.kr-icon { display: inline-block; vertical-align: middle; flex: none; }
.kr-order-dish .kr-icon { width: 36px; height: 36px; }
.kr-order-parts { display: flex; gap: 2px; flex-wrap: wrap; }
.kr-bar-btns { display: flex; flex-direction: column; gap: var(--space-1); align-items: stretch; }
.kr-level-chaos { font-size: var(--fs-0); color: #b45309; font-weight: var(--w-strong); }
.kr-book { border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); padding: var(--space-2) var(--space-3); }
.kr-book > summary { cursor: pointer; font-weight: var(--w-strong); min-height: 44px; display: flex; align-items: center; }
.kr-book-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.kr-book-dish { display: grid; gap: 6px; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-2); }
.kr-book-head { display: flex; align-items: center; gap: var(--space-2); }
.kr-book-head strong { font-size: var(--fs-2); }
.kr-book-head .chip { margin-left: auto; }
.kr-book-parts { display: grid; gap: 4px; }
.kr-book-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kr-step { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 56px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.kr-step small { font-size: 0.7rem; line-height: 1.2; text-align: center; }
.kr-step-arrow { color: var(--text-muted); font-weight: 800; }
.kr-book-then { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--fs-0); }
.kr-book-tip { font-size: var(--fs-0); margin: var(--space-2) 0 0; }
.kr-book-chaos h4 { margin: var(--space-2) 0 4px; }
.kr-book-chaos ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.kr-book-chaos li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-0); }
.auth-banner-hello.art-mascot svg { height: 100%; width: auto; margin: 0 auto; }

/* ---------- the pier (decision 64): gear bar, shop, bag, sets, ranking ---------- */
.world-gear { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.world-gear-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.world-gear-chip span { display: grid; text-align: left; line-height: 1.15; }
.world-gear-chip small { font-size: 0.7rem; color: var(--text-muted); }
.world-coins { font-weight: var(--w-strong); }
.world-shop-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-m); margin-bottom: 6px; background: var(--surface); }
.world-shop-row.is-on { border-color: var(--c-orange); background: var(--c-orange-100); }
.world-shop-text { display: grid; flex: 1; min-width: 0; }
.world-shop h3 { margin: var(--space-3) 0 4px; }
.world-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2); }
.world-bag-fish { display: grid; justify-items: center; gap: 2px; padding: var(--space-2); border: 2px solid var(--r, var(--border)); border-radius: var(--radius-m); background: var(--surface); text-align: center; }
.world-bag-price { font-weight: var(--w-strong); }
.world-catch-kg { font-size: var(--fs-3); font-weight: 800; margin: 4px 0; }
.world-catch .modal-icon canvas { width: 120px; height: 120px; }
.world-sets { display: grid; gap: 6px; margin-top: var(--space-3); }
.world-sets h3 { margin: 0; }
.world-set { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(60px, 1fr) auto; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border: 1px solid var(--r, var(--border)); border-radius: var(--radius-m); }
.world-set-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.world-set-bar span { display: block; height: 100%; background: var(--r, var(--c-orange)); }
.world-rank { width: 100%; border-collapse: collapse; }
.world-rank th, .world-rank td { padding: 6px; border-bottom: 1px solid var(--border); text-align: left; }
.world-rank tr.is-me td { background: var(--c-orange-100); font-weight: var(--w-strong); }
.world-rank-best { display: flex; align-items: center; gap: 4px; }
.world-album-icon canvas { display: block; }
.fish-icon { display: inline-block; vertical-align: middle; flex: none; }
@media (max-width: 560px) { .world-set { grid-template-columns: minmax(0, 1fr) auto; } .world-set-bar { grid-column: 1 / -1; } }
.modal-body .world-album, .modal-body .world-bag, .modal-body .world-sets { width: 100%; }
/* a toast never blocks a tap on what is under it (the pier's buttons sit at the bottom, decision 64) */
.toasts { pointer-events: none; }
.modal-body .world-shop-row { width: 100%; }

/* ---------- the room page (owner 2026-09-30): the PIN stays on top while playing; after the game, a countdown home ---------- */
.room-pinbar { position: sticky; top: 60px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 6px var(--space-3); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); font-size: var(--fs-0); }
.room-pinbar strong { font-size: var(--fs-2); font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.room-pinbar-end { background: var(--c-orange-100); border-color: var(--c-orange); }
.room-exit-count { font-weight: var(--w-strong); }
.join-rejoin { display: block; white-space: normal; text-align: center; }
.react-coins { font-weight: var(--w-strong); }

/* ---------- Classic / Challenge / Team (owner 2026-09-30): the question on the projector only, bigger, sizeable; huge answer buttons ---------- */
.stage-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.qsize { display: inline-flex; align-items: center; gap: 4px; }
.qsize .btn { min-width: 48px; font-weight: 800; }
.qsize-pct { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.stage .stage-q { font-size: calc(clamp(2.2rem, 5.2vw, 4.4rem) * var(--q-scale, 1)); line-height: 1.25; }
.stage .stage-grid .answer { min-height: calc(120px * var(--q-scale, 1)); font-size: calc(clamp(1.3rem, 2.6vw, 2rem) * var(--q-scale, 1)); }
.quiz-look-up { margin: 0; font-weight: var(--w-strong); color: var(--text-muted); }
.answer-grid-xl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.answer-grid-xl .answer { min-height: clamp(130px, 26vh, 260px); font-size: clamp(1.25rem, 4.5vw, 2rem); flex-direction: column; justify-content: center; text-align: center; border-radius: var(--radius-l); }
.answer-grid-xl .answer svg { width: clamp(40px, 8vw, 64px); height: clamp(40px, 8vw, 64px); }
@media (orientation: landscape) and (max-height: 520px) { .answer-grid-xl .answer { min-height: 38vh; } }

/* ---------- waiting room team zones (owner 2026-09-30) ---------- */
.lobby-team-banners { position: absolute; inset: 0; display: flex; pointer-events: none; z-index: 1; }
.lobby-team-banner { flex: 1; border-left: 2px dashed rgba(255, 255, 255, 0.55); background: color-mix(in srgb, var(--team) 14%, transparent); display: flex; justify-content: center; align-items: flex-start; padding-top: 6px; }
.lobby-team-banner:first-child { border-left: 0; }
.lobby-team-banner span { padding: 3px 12px; border-radius: 999px; background: var(--team); color: #fff; font-weight: 800; font-size: 0.85rem; box-shadow: var(--shadow-1); }
.lobby-taunt { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-size: 1.4rem; animation: lobby-taunt 1.8s ease-out forwards; pointer-events: none; }
@keyframes lobby-taunt { 0% { transform: translate(-50%, 6px) scale(0.4); opacity: 0; } 20% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -26px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lobby-taunt { animation: none; } }

/* ---------- Mokiz Board (owner 2026-09-30): branch links in a mind map; no drawing ---------- */
.jb-linkbtn { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 0.8rem; line-height: 1; }
.jb-board:not([data-mode="mindmap"]) .jb-linkbtn { display: none; }
.jb-linking .jb-note, .jb-linking .jb-topic { cursor: crosshair; outline: 2px dashed #6366f1; outline-offset: 2px; }
.jb-note.jb-link-from { outline: 3px solid #f97316 !important; }
.jb-link-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 5; padding: 6px 12px; border-radius: 999px; background: #1f2937; color: #fff; font-size: 0.85rem; box-shadow: var(--shadow-2); }

/* ---------- Snakes & Ladders moves that play out (owner 2026-09-30) ---------- */
.gb-grid { position: relative; }
.gb-anim-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.gb-walker { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25)); }
.gb-walker svg { display: block; width: auto; height: auto; }
.gb-walker-ladder { filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.95)); }
.gb-walker-snake { animation: gb-wiggle 0.18s linear infinite; filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.9)); }
@keyframes gb-wiggle { 50% { margin-left: 3px; } }
.gb-fx { position: absolute; transform: translate(-50%, -50%); font-size: 1.8rem; animation: gb-fx 0.9s ease-out forwards; }
@keyframes gb-fx { from { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } to { transform: translate(-50%, -120%) scale(1.6); opacity: 0; } }

/* ---------- raids (owner 2026-09-30): impact rings, trails, the boss heals on wrong answers ---------- */
.raid-ring { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 4px solid #fde047; pointer-events: none; animation: raid-ring 0.55s ease-out forwards; }
.raid-ring-1 { border-color: #fb923c; } .raid-ring-2 { border-color: #a78bfa; border-width: 6px; }
@keyframes raid-ring { to { transform: scale(5); opacity: 0; } }
.raid-trail { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fde047; opacity: 0.8; pointer-events: none; animation: raid-trail 0.45s ease-out forwards; }
.raid-trail-1 { background: #fb923c; } .raid-trail-2 { background: #c4b5fd; } .raid-trail-arrow { width: 8px; height: 8px; background: #e2e8f0; }
@keyframes raid-trail { to { transform: scale(0.2); opacity: 0; } }
.raid-boss-flash { animation: raid-boss-flash 0.25s ease-out; }
@keyframes raid-boss-flash { 40% { filter: brightness(2.2); } }
.raid-heal-pop { color: #22c55e !important; font-weight: 800; }
.raid-heal-spark { position: absolute; color: #22c55e; font-weight: 800; font-size: 1.4rem; pointer-events: none; opacity: 0; animation: raid-heal-up 1.1s ease-out forwards; }
@keyframes raid-heal-up { 0% { transform: translateY(10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
.raid-boss-heal { animation: raid-boss-heal 0.9s ease-out; }
@keyframes raid-boss-heal { 30% { filter: drop-shadow(0 0 18px rgba(34, 197, 94, 0.95)) brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .raid-ring, .raid-trail, .raid-heal-spark { animation-duration: 0.01s; } .raid-boss-flash, .raid-boss-heal { animation: none; } }

/* Longboat Race VFX (owner 2026-09-30): bobbing boats, oars in time, a wake, surges on every push, the leader's crown */
.party-boat { transition: transform 1400ms cubic-bezier(0.22, 0.8, 0.3, 1); }
.party-bob { animation: party-bob 1.8s ease-in-out infinite; }
@keyframes party-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(3px) rotate(-1deg); } }
.party-rower .party-oar { animation: party-row 1.1s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes party-row { 0% { transform: rotate(-18deg); } 55% { transform: rotate(38deg); } 100% { transform: rotate(-18deg); } }
.party-lean { transform-box: fill-box; transform-origin: 50% 100%; animation: party-lean 1.1s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes party-lean { 0%, 100% { transform: rotate(8deg); } 55% { transform: rotate(-12deg); } }
.party-drip { opacity: 0; animation: party-drip 1.1s ease-out infinite; }
@keyframes party-drip { 0%, 50% { opacity: 0; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-14px, -10px); } }
.party-wake path { animation: party-wake 0.8s linear infinite; opacity: 0.7; }
@keyframes party-wake { to { stroke-dashoffset: 22; } }
.party-speed { opacity: 0; transition: opacity 250ms; }
.party-speed line { animation: party-speed 0.35s linear infinite; }
@keyframes party-speed { from { transform: translateX(20px); } to { transform: translateX(-20px); } }
.party-crown { opacity: 0; transition: opacity 300ms; }
.party-lead .party-crown { opacity: 1; animation: party-crown 1.2s ease-in-out infinite alternate; }
@keyframes party-crown { to { transform: translateY(-4px); } }
.party-surge .party-oar, .party-surge .party-lean, .party-surge .party-drip { animation-duration: 0.45s; }
.party-surge .party-speed { opacity: 0.85; }
.party-surge .party-wake path { animation-duration: 0.3s; opacity: 1; stroke-width: 6; }
.party-splash { animation: party-shard 0.8s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.party-ring { animation: party-boom 0.7s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.party-drift { animation: party-drift 12s linear infinite; }
@keyframes party-drift { to { transform: translateX(-1040px); } }
@media (prefers-reduced-motion: reduce) {
  .party-bob, .party-oar, .party-lean, .party-drip, .party-wake path, .party-speed line, .party-drift, .party-crown { animation: none !important; }
  .party-boat { transition-duration: 200ms; }
}

/* Kitchen Rush (owner 2026-09-30): what the counter in front of me is; the world hall's waiting match */
.kr-target { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-weight: var(--w-strong); }
.kr-wait { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface-2); }
.kr-wait-spinner { font-size: 2rem; animation: kr-wait 1.4s ease-in-out infinite; }
@keyframes kr-wait { 50% { transform: rotate(-14deg) translateY(-3px); } }
.kr-wait-text { display: grid; gap: 2px; }
.kr-wait-teams { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.kr-wait-team { display: grid; gap: 6px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); }
.kr-wait-team.is-mine { border-color: var(--team, var(--c-orange)); box-shadow: 0 0 0 2px var(--team, var(--c-orange)) inset; }
.kr-wait-name { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-strong); }
.kr-wait-cooks { display: flex; flex-wrap: wrap; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .kr-wait-spinner { animation: none; } }
.shop-tile-alt { font-size: 0.78rem; color: var(--text-muted, #64748b); font-weight: 600; }

/* ---- decision 65: the Premium arcade games (games/arcade_quest) ---- */
.arc-td, .arc-ship, .arc-dash, .arc-field { width: 100%; min-width: 0; }
.td-board { width: 100%; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--border); background: #7cbf60; }
.td-canvas, .dash-canvas, .field-canvas, .sea-canvas, .field-over { display: block; width: 100%; height: auto; max-width: 100%; touch-action: none; }
.td-hud, .ship-hud { display: flex; flex-wrap: wrap; gap: 6px; }
.td-money { font-weight: var(--w-heavy); }
.td-next { padding: var(--space-2); }
.td-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.td-buy { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; text-align: left; min-height: 64px; padding: 6px 10px; border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.td-buy .td-icon { grid-row: 1 / 4; }
.td-buy:disabled { opacity: 0.45; cursor: not-allowed; }
.td-buy:not(:disabled):hover { border-color: var(--c-orange); }
.td-icon { width: 48px; height: 48px; border-radius: 10px; border: 2px solid var(--border); background: #86c96a; }
.td-cost { font-weight: var(--w-heavy); color: #a16207; }
.td-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); }
.td-actions { gap: 6px; flex-wrap: wrap; }
.td-broken { color: var(--bad); font-weight: var(--w-strong); }
.td-team-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-3); }
.td-team-board { display: grid; gap: 6px; padding: 8px; border-radius: var(--radius-m); border: 2px solid var(--team, var(--border)); background: var(--surface); }
.td-coop-board { display: grid; gap: 8px; padding: 10px; border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); max-width: 1100px; margin: 0 auto; width: 100%; } /* td_team co-op: one big shared board */
.td-standings { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.td-stand { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); }
.td-stand.is-dead { opacity: 0.45; }
.td-stand.is-won { border-color: #22c55e; box-shadow: 0 0 0 2px #22c55e inset; }
.td-lives { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.td-lives > span { display: block; height: 100%; background: #ef4444; transition: width 400ms; }
.arc-question { gap: var(--space-2); }
.arc-question-compact .quiz-qtext { font-size: 1.15rem; }
.arc-question-compact .answer-grid-xl .answer-tile { min-height: clamp(64px, 12vh, 120px); }
.arc-q-head { justify-content: space-between; align-items: center; }
.arc-q-count { font-size: 1.6rem; font-weight: var(--w-heavy); min-width: 2ch; text-align: right; }
.arc-result { text-align: center; font-size: 1.3rem; font-weight: var(--w-heavy); margin: 0; animation: arc-pop 400ms ease-out; }
.arc-good { color: #16a34a; }
.arc-bad { color: #dc2626; }
@keyframes arc-pop { from { transform: scale(0.6); opacity: 0; } }
.arc-start { flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.arc-live { grid-template-columns: minmax(0, 1fr) 260px; }
.sea-wrap { width: 100%; overflow-x: auto; }
.sea-canvas { min-width: 280px; border-radius: 8px; cursor: crosshair; }
.ship-types { flex-wrap: wrap; }
.ship-fire-hint { font-weight: var(--w-heavy); color: #b91c1c; font-size: 1.15rem; }
.ship-seas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); }
.ship-sea { display: grid; gap: 6px; padding: 8px; border-radius: var(--radius-m); border: 2px solid var(--team, var(--border)); background: var(--surface); }
.ship-stage-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: 1.2rem; }
.dash-game, .field-game { display: grid; gap: 8px; width: 100%; }
.dash-canvas, .field-canvas { border-radius: var(--radius-m); border: 1px solid var(--border); }
.dash-hud, .field-hud { font-weight: var(--w-heavy); padding: 6px 12px; border-radius: 999px; background: var(--surface-2); text-align: center; }
.dash-hud-bad { background: #fee2e2; color: #991b1b; }
.dash-pad { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); user-select: none; -webkit-user-select: none; }
.dash-pad-move { display: flex; gap: var(--space-2); }
.dash-btn { min-width: 76px; min-height: 76px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.9rem; font-weight: var(--w-heavy); touch-action: none; cursor: pointer; }
.dash-btn:active { background: var(--surface-2); transform: translateY(1px); }
.dash-jump { min-width: 140px; font-size: 1.3rem; background: var(--c-orange); color: #fff; border-color: transparent; }
.field-help { text-align: center; margin: 0; }
.field-qbox .arc-question { margin-top: 0; }
.dash-over { padding: var(--space-4) var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--border); background: #bfe3ff; }
.dash-track { position: relative; height: 150px; border-bottom: 10px solid #65a30d; }
.dash-gate-mark { position: absolute; bottom: 0; width: 6px; height: 70px; background: #78716c; border-radius: 3px; }
.dash-boss-mark { position: absolute; bottom: 0; font-size: 2.2rem; transform: translateX(-50%); transition: left 400ms linear; }
.dash-runner-mark { position: absolute; bottom: 8px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 0.8rem; font-weight: var(--w-strong); white-space: nowrap; transition: left 400ms linear; }
.dash-runner-mark:nth-child(odd) { bottom: 40px; }
.dash-runner-mark.is-out { opacity: 0.4; text-decoration: line-through; }
.dash-runner-mark.is-done { background: #fde047; }
.field-over-wrap { border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--border); }
@media (max-width: 760px) { .arc-live { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .arc-result { animation: none; } .dash-boss-mark, .dash-runner-mark { transition: none; } }
/* the Tower Defense arena (#/arena) */
.arena-page { max-width: 1280px; margin: 0 auto; }
.arena-head { align-items: stretch; }
.arena-art svg { width: 100%; max-height: 180px; border-radius: var(--radius-m); }
.arena-seg { flex-wrap: wrap; }
.arena-bar { justify-content: space-between; align-items: center; }
.arena-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arena-board li { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--radius-m); background: var(--surface-2); }
.arena-top-1 { background: #fef3c7 !important; }
.arena-top-2 { background: #f1f5f9 !important; }
.arena-top-3 { background: #ffedd5 !important; }
.arena-rank { font-weight: var(--w-heavy); }
.arena-result { display: grid; gap: 4px; padding: var(--space-3); border-radius: var(--radius-m); background: var(--bad-soft); text-align: center; font-size: 1.15rem; }
.arena-result.is-won { background: var(--ok-soft); }
.mq-q-gone { color: var(--c-purple-700); font-size: 1.6em !important; }
.td-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--space-3); align-items: start; }
.td-side { display: grid; gap: var(--space-3); position: sticky; top: 72px; }
.td-side .td-shop { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 900px) { .td-main { grid-template-columns: 1fr; } .td-side { position: static; } }
/* the teacher's mode picker: the next step bar (owner 2026-09-30) */
.mode-next { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-l); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-2); }
.mode-next .btn { min-height: 48px; font-size: 1.05rem; }

/* any room game can fill the screen with everything it has (owner 2026-09-30: menus and controls stay in the game) */
.game-fs-btn { margin-left: auto; }
.game-focus { position: fixed; inset: 0; z-index: 60; overflow: auto; background: var(--bg, #f6f4f1); padding: 56px max(12px, env(safe-area-inset-left)) 16px; }
.game-focus-exit { display: none; }
.game-focus .game-focus-exit { display: inline-flex; position: fixed; top: 10px; right: 10px; z-index: 61; }
html.game-focus-on { overflow: hidden; }/* the student's room page: narrow for the lobby, wide for a game on a PC (owner 2026-09-30: bigger on a PC) */
.room-page { max-width: 640px; margin: 0 auto; width: 100%; transition: max-width 250ms ease; }
.room-page.room-in-game { max-width: min(1600px, 100%); }
@media (min-width: 761px) and (max-width: 1100px) { .room-page.room-in-game { max-width: 100%; } }
/* game screens use a PC's width (owner 2026-09-30): the projector in a game, a student in a game, the world, the arena */
.container:has(.room-bar), .container:has(.room-in-game), .container:has(.world-live), .container:has(.arena-page) { max-width: 1440px; }
@media (min-width: 1500px) { .container:has(.room-bar), .container:has(.room-in-game), .container:has(.world-live), .container:has(.arena-page) { max-width: 1760px; } }
/* the world kitchen's card over the map: the queue, the 3-2-1, the round's result (owner 2026-09-30) */
.world-map { position: relative; }
.kr-overlay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 12px; background: rgba(15, 23, 42, 0.55); overflow: auto; }
.kr-overlay-card { width: min(560px, 100%); padding: var(--space-4); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-3); }
.kr-overlay-card h2 { margin: 0; }
.kr-overlay-icon { font-size: 3rem; }
.kr-wait-status { font-size: 1.2rem; }
.kr-overlay-count { display: grid; gap: 6px; place-items: center; color: #fff; }
.kr-overlay-count .intro-num { color: #fff; }
.kr-final-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.kr-final-list li { display: grid; grid-template-columns: 3ch auto 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: var(--radius-m); background: var(--surface-2); border-left: 4px solid var(--team, var(--border)); }
.kr-final-list li.is-mine { box-shadow: 0 0 0 2px var(--team) inset; }
.kr-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.kr-stat { display: grid; place-items: center; gap: 2px; padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); }
.kr-stat strong { font-size: 1.6rem; font-weight: var(--w-heavy); }
.kr-stat-icon { font-size: 1.6rem; }
/* the page in the middle, the ads at the screen's edges (owner 2026-09-30). The rails are fixed to the left and right
   edges under the topbar (160 px, 300 px on a very wide screen) and only show on pages that may carry ads (shell.js
   railsAllowed) with a filled slot; the page then gets the whole width between them. */
.side-rail { display: none; }
@media (min-width: 1024px) {
  .home-solo { width: min(100%, 600px); gap: var(--space-4); }
  .home-solo .hero-banner { max-height: 230px; }
  .home-solo .home-mini { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  .home-solo .home-mini-item { min-height: 84px; }
  .home-solo .home-mini-icon { font-size: 1.8rem; }
}
@media (min-width: 1500px) {
  .home-solo { width: min(100%, 760px); }
  .home-solo .hero-banner { max-height: 290px; }
  .home-solo .home-mini-item { min-height: 96px; }
}
@media (min-width: 1200px) {
  body { --rail-w: 160px; --rail-gap: 24px; }
  body.with-rails .side-rail:has(.ad-slot[data-ad-active="true"]) { display: block; position: fixed; top: 76px; bottom: 12px; width: var(--rail-w); z-index: 5; overflow: hidden; }
  body.with-rails .side-rail-left { left: 8px; }
  body.with-rails .side-rail-right { right: 8px; }
  body.with-rails .side-rail .ad-slot { width: 100%; margin: 0; }
  body.with-rails .side-rail .ad-dev, body.with-rails .side-rail .adsbygoogle { min-height: 600px; text-align: center; padding: var(--space-2); }
  body.with-rails:has(.side-rail .ad-slot[data-ad-active="true"]) .container { max-width: min(1400px, calc(100% - 2 * (var(--rail-w) + var(--rail-gap) + 8px))); }
}
@media (min-width: 1760px) { body { --rail-w: 300px; } }
.world-focus ~ .ad-slot, .world-focus .ad-slot, .game-focus .ad-slot { display: none !important; }
/* the footer with the plain pages (owner 2026-09-30): quiet, and gone inside a game or the world */
.site-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; padding: var(--space-4) var(--space-4) var(--space-6); color: var(--text-muted); font-size: var(--fs-0); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-orange); text-decoration: underline; }
body:has(.room-in-game, .room-bar, .world-live, .arena-page, .game-focus, .world-focus) .site-footer { display: none; }
/* a thing alone on a shop tile (owner 2026-09-30), and the hi-end sparkles and orbit wherever they show */
.pd-item-only { display: block; margin: 0 auto; overflow: visible; }
.shop-tile .pd-item-only { width: 92px; height: 92px; }
.shop-tile:hover .pd-item-only, .shop-tile:focus-visible .pd-item-only { transform: scale(1.08) rotate(-3deg); transition: transform 200ms ease; }
.paperdoll .pd-vfx .pd-twinkle { transform-box: fill-box; transform-origin: center; }
.paperdoll .pd-orbit { animation-duration: 6s; }
.pd-item-only .pd-hat, .pd-item-only .pd-face, .pd-item-only .pd-neck, .pd-item-only .pd-hand { animation: pd-bob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pd-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4%) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .pd-item-only .pd-hat, .pd-item-only .pd-face, .pd-item-only .pd-neck, .pd-item-only .pd-hand, .paperdoll .pd-orbit { animation: none; } }
html[data-motion="reduced"] .pd-item-only :is(.pd-hat, .pd-face, .pd-neck, .pd-hand), html[data-motion="reduced"] .paperdoll .pd-orbit { animation: none; }
/* raid beams (owner 2026-09-30): light between a player and the boss */
.raid-beam { position: absolute; height: 10px; margin-top: -5px; transform-origin: 0 50%; border-radius: 6px; pointer-events: none; z-index: 4; animation: raid-beam 520ms ease-out forwards; }
.raid-beam-core { position: absolute; left: 0; right: 0; top: 3px; height: 4px; border-radius: 3px; background: #ffffff; }
.raid-beam-hit { background: rgba(96, 165, 250, 0.55); box-shadow: 0 0 12px 4px rgba(96, 165, 250, 0.7); }
.raid-beam-crit { background: rgba(250, 204, 21, 0.6); box-shadow: 0 0 16px 6px rgba(250, 204, 21, 0.75); height: 14px; margin-top: -7px; }
.raid-beam-super { background: rgba(232, 121, 249, 0.65); box-shadow: 0 0 22px 9px rgba(232, 121, 249, 0.8); height: 18px; margin-top: -9px; }
.raid-beam-arrow { background: rgba(134, 239, 172, 0.55); box-shadow: 0 0 10px 3px rgba(34, 197, 94, 0.6); height: 6px; margin-top: -3px; }
.raid-beam-boss { background: rgba(239, 68, 68, 0.6); box-shadow: 0 0 16px 6px rgba(239, 68, 68, 0.7); }
.raid-beam-crit .raid-beam-core, .raid-beam-super .raid-beam-core { top: 4px; height: 6px; }
@keyframes raid-beam { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 30% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.raid-charge { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; z-index: 4; animation: raid-charge 520ms ease-out forwards; }
.raid-charge-hit { background: rgba(147, 197, 253, 0.6); } .raid-charge-crit { background: rgba(253, 224, 71, 0.65); } .raid-charge-super { background: rgba(240, 171, 252, 0.7); }
.raid-charge-arrow { background: rgba(134, 239, 172, 0.55); } .raid-charge-boss { background: rgba(248, 113, 113, 0.6); }
@keyframes raid-charge { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .raid-beam, .raid-charge { display: none; } }
/* the team strip on a team game's phone (owner 2026-10-01): my team, its colour, every team's score */
.team-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: 2px solid var(--team, var(--border)); border-radius: var(--radius-m); background: color-mix(in srgb, var(--team, #888) 12%, var(--surface)); }
.team-strip-me { display: inline-flex; align-items: center; gap: var(--space-2); }
.team-strip-scores { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); font-weight: var(--w-strong); }
.team-strip-score { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.team-strip-score.is-mine { outline: 2px solid var(--team); }
/* uneven teams before the start (owner 2026-10-01) */
.team-warn { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--warn, #f59e0b); border-radius: var(--radius-m); background: var(--warn-soft, #fef3c7); list-style: none; }
.auth-forgot { align-self: center; color: var(--c-orange-700); font-size: var(--fs-0); font-weight: var(--w-strong); }
/* Market Day on the phone (owner 2026-10-01): trade cards 2 x 2 above a compact question, all in one screen */
.party-trade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pm-tradecard { display: grid; gap: 6px; padding: 8px; border: 1px solid #fde68a; border-radius: var(--radius-m); background: #fffbeb; }
.pm-tradehead { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon name price" "icon name move"; align-items: center; gap: 0 6px; }
.pm-tradecard .pm-icon { font-size: 1.6rem; }
.pm-tradecard .pm-price { font-size: 1.15rem; }
.pm-tradebtns { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px; align-items: center; }
.pm-tradebtns .btn { min-height: 44px; padding-inline: 6px; }
.party-play-market .answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.party-play-market .answer { min-height: 64px; }
/* the projector: a taller price chart for every good */
.party-scene:not(.party-compact) .pm-chart { height: 90px; }
.party-scene:not(.party-compact) .pm-card { grid-template-areas: "icon name price" "chart chart chart" "move move move"; }