/* =====================================================================================
   Pointwalk design system (spec 10). GLOBAL CSS: tokens (10 §1), global rules + keyframes (10 §2, verbatim),
   plus the classes the shared Razor components in Components/Ui use (.pw-*).
   Fonts: Lilita One + Nunito are loaded by <link> in Components/App.razor (Google Fonts), not @import, to avoid FOUT delays.
   ===================================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Ink & surfaces */
  --ink: #1E1B2E;
  --ink-deep: #0B0A14;
  --panel: #FFFDF7;
  --white: #FFFFFF;
  --cream: #FBF2DF;
  --cream-2: #F1E2C6;
  --cream-row: #F6F0E2;
  --cream-footer: #EFE8D8;
  --track-grey: #E9E3D3;

  /* Navy background */
  --navy: #23305A;
  --navy-dots: radial-gradient(rgba(255,255,255,0.07) 2px, transparent 2px); /* background-size: 28px 28px (24px on phone) */
  --navy-line: #3A4A7A;

  /* Accents */
  --yellow: #FFD23F;
  --yellow-dark: #E0A800;
  --green: #3DD68C;
  --green-text: #166534;
  --green-soft: #E7FBEF;
  --green-soft-2: #DDF8EA;
  --red: #FF5C5C;
  --orange: #FF9F43;
  --amber: #FFC94D;
  --amber-soft: #FFF6D6;
  --amber-banner: #FFE9A8;
  --pending-blue: #C9D7EE;

  /* Muted greys (purple-tinted) */
  --muted-1: #3A3655;
  --muted-2: #4B4766;
  --muted-3: #5B5675;
  --muted-4: #8E89A8;
  --muted-5: #A9A3C8;
  --lilac-1: #D9D4F0;
  --lilac-2: #E4E1F5;
  --lilac-3: #D9D4E8;
  --lilac-4: #E3E0EC;
  --lilac-5: #E8E6F0;
  --lilac-6: #EDEBF3;
  --plum: #2E2A47;
  --hover-link: #4B4470;
  --sponsor-pole: #A29DB3;

  /* Iso floor sides */
  --floor-right: #B98C5A;
  --floor-left: #D3A56E;
  --scene-shadow: rgba(8,12,30,0.35);
  --char-shadow: rgba(30,27,46,0.3);

  /* Chunky hard-offset shadows (10 §1.5) */
  --sh-xs: 0 3px 0 var(--ink);
  --sh-sm: 0 4px 0 var(--ink);
  --sh-md: 0 5px 0 var(--ink);
  --sh-lg: 0 6px 0 var(--ink);
  --sh-xl: 0 7px 0 var(--ink);
  --sh-dialog: 0 8px 0 var(--ink);
  --sh-checkout: 0 10px 0 var(--ink-deep);

  /* Fonts */
  --font-body: 'Nunito', 'Trebuchet MS', sans-serif;
  --font-display: 'Lilita One', sans-serif;

  /* z layers (10 §1.7) */
  --z-toast: 4; --z-drawer: 50; --z-modal: 50; --z-checkout: 60;
}

/* ---------- 2. Global CSS (verbatim from spec 10 §2) ---------- */
body { margin: 0; font-family: 'Nunito', 'Trebuchet MS', sans-serif; color: var(--ink); }
a { color: #1E1B2E; } a:hover { color: #4B4470; }

/* Bean animations */
.idle .bean { animation: breathe 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.walk .bean { animation: bob .3s ease-in-out infinite; transform-origin: 50% 100%; }
.walk .fl { animation: step .3s ease-in-out infinite; }
.walk .fr { animation: step .3s ease-in-out -.15s infinite; }
.walk .al { animation: swing .3s ease-in-out infinite; }
.walk .ar { animation: swing .3s ease-in-out -.15s infinite; }
.cheer .bean { animation: jump .55s cubic-bezier(.3,0,.4,1) infinite; transform-origin: 50% 100%; }
.cheer .al, .cheer .ar { animation: wave .55s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1,1) } 50% { transform: scale(1.03,.96) } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-5deg) } 50% { transform: translateY(-5px) rotate(5deg) } }
@keyframes step { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes swing { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes jump { 0%,100% { transform: translateY(0) scale(1.05,.92) } 40% { transform: translateY(-16px) scale(.95,1.06) } }
@keyframes wave { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }

/* Countdown */
@keyframes pop { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0 } 35% { transform: translate(-50%,-50%) scale(1.15); opacity: 1 } 70% { transform: translate(-50%,-50%) scale(1) } 100% { transform: translate(-50%,-50%) scale(.9); opacity: 0 } }
.pop { animation: pop .7s cubic-bezier(.2,.8,.3,1) forwards; }

/* Order ticket timer */
@keyframes drain { from { width: 100% } to { width: 8% } }
.drain { animation: drain 90s linear forwards; }  /* duration = session timerSec when set; 90s default visual */

/* Reveal button "ready" pulse */
@keyframes pulse { 0%,100% { box-shadow: 0 6px 0 #1E1B2E, 0 0 0 0 rgba(255,210,63,.7) } 50% { box-shadow: 0 6px 0 #1E1B2E, 0 0 0 12px rgba(255,210,63,0) } }
.ready { animation: pulse 1.4s ease-out infinite; }

/* Press */
.press { transition: transform .08s ease; }
.press:active { transform: translateY(4px); box-shadow: 0 2px 0 #1E1B2E !important; }

/* Zone hit area + sign hover */
.padhit { background: transparent; }
.padhit:hover { background: rgba(255,255,255,.28); }
.sign { transition: transform .15s ease; }
.sign:hover { transform: translate(-50%,-100%) translateY(-4px) !important; }

/* Marketing card hover */
.card { transition: transform .15s ease; }
.card:hover { transform: translateY(-4px) rotate(-.6deg); }

/* Confetti */
@keyframes cf0 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(-70px,-90px) rotate(260deg); opacity: 0 } }
@keyframes cf1 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(60px,-110px) rotate(-200deg); opacity: 0 } }
@keyframes cf2 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(-20px,-130px) rotate(180deg); opacity: 0 } }
@keyframes cf3 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(95px,-60px) rotate(320deg); opacity: 0 } }
@keyframes cf4 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(-100px,-40px) rotate(-280deg); opacity: 0 } }
@keyframes cf5 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(30px,-150px) rotate(220deg); opacity: 0 } }
.cf0 { animation: cf0 1.5s ease-out infinite } .cf1 { animation: cf1 1.5s ease-out infinite } .cf2 { animation: cf2 1.5s ease-out infinite }
.cf3 { animation: cf3 1.5s ease-out infinite } .cf4 { animation: cf4 1.5s ease-out infinite } .cf5 { animation: cf5 1.5s ease-out infinite }

/* REVEAL stamp (marketing hero) */
@keyframes stamp { 0% { transform: translate(-50%,-50%) rotate(-8deg) scale(2.2); opacity: 0 } 40% { transform: translate(-50%,-50%) rotate(-8deg) scale(.95); opacity: 1 } 60% { transform: translate(-50%,-50%) rotate(-8deg) scale(1.05) } 100% { transform: translate(-50%,-50%) rotate(-8deg) scale(1); opacity: 1 } }
.stamp { animation: stamp .5s cubic-bezier(.2,.8,.3,1) forwards; }

/* Toast */
@keyframes toastIn { from { transform: translate(-50%,20px); opacity: 0 } to { transform: translate(-50%,0); opacity: 1 } }
.toast { animation: toastIn .3s ease-out both; }

/* Responsive leaderboard ad */
.adlb { width: 728px; max-width: 100%; height: 90px; }
.adlb .m { display: none; }
@media (max-width: 760px) { .adlb { width: 320px; height: 50px; } .adlb .d { display: none; } .adlb .m { display: inline; } }

/* Reduced motion - MUST be present */
@media (prefers-reduced-motion: reduce) {
  .idle .bean, .walk .bean, .walk .fl, .walk .fr, .walk .al, .walk .ar,
  .cheer .bean, .cheer .al, .cheer .ar, .ready, .stamp, .toast,
  .cf0, .cf1, .cf2, .cf3, .cf4, .cf5 { animation: none; }
  .card:hover { transform: none; }
}
/* Same rules apply when the session has reducedMotionAll=true: class `rm` on <html> (see wwwroot/js/pointwalk.js pw.setReducedMotion) */
.rm .idle .bean, .rm .walk .bean, .rm .walk .fl, .rm .walk .fr, .rm .walk .al, .rm .walk .ar,
.rm .cheer .bean, .rm .cheer .al, .rm .cheer .ar, .rm .ready, .rm .stamp, .rm .toast,
.rm .cf0, .rm .cf1, .rm .cf2, .rm .cf3, .rm .cf4, .rm .cf5 { animation: none; }
.rm .card:hover { transform: none; }
.rm .pop { animation: none; transform: translate(-50%,-50%); }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; transform: translate(-50%,-50%); } }

/* ---------- 4. Global rules (10 §4): visible focus ring on every focusable element ---------- */
:focus-visible { outline: 3px solid #5AA9FF; outline-offset: 2px; }
button, a, input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-weight: 400; }

/* ---------- App shell ---------- */
.pw-navy { min-height: 100vh; background-color: var(--navy); background-image: var(--navy-dots); background-size: 28px 28px; color: var(--ink); font-family: var(--font-body); }
@media (max-width: 767px) { .pw-navy { background-size: 24px 24px; } }
.pw-cream { min-height: 100vh; background: var(--cream); color: var(--ink); font-family: var(--font-body); }
.pw-container { max-width: 1320px; margin: 0 auto; padding: 20px 20px 40px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; }
.pw-container-narrow { max-width: 1240px; margin: 0 auto; padding: 18px 20px 56px; display: flex; flex-direction: column; gap: 36px; box-sizing: border-box; }
.pw-main { flex: 999 1 640px; min-width: 0; }
.pw-side { flex: 1 1 360px; }
.pw-row { display: flex; flex-wrap: wrap; gap: 18px; }
.pw-display { font-family: var(--font-display); font-weight: 400; }
.pw-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pw-todo { padding: 24px; background: var(--panel); border: 3px dashed var(--ink); border-radius: 22px; margin: 24px auto; max-width: 720px; }
.pw-todo h1 { font-family: var(--font-display); font-size: 34px; line-height: 1; margin: 0 0 8px; }

/* ---------- Bean ---------- */
.pw-bean { position: absolute; width: 0; height: 0; }
.pw-bean.pw-inline { position: relative; display: inline-block; }
.pw-bean .pw-shadow { position: absolute; left: -20px; top: -7px; width: 40px; height: 14px; border-radius: 50%; background: var(--char-shadow); }
.pw-bean .pw-figure { position: absolute; left: -24px; top: -72px; width: 48px; height: 72px; }
.pw-bean .pw-foot { position: absolute; bottom: 0; width: 13px; height: 9px; border-radius: 50%; background: var(--ink); }
.pw-bean .fl { left: 9px; } .pw-bean .fr { left: 26px; }
.pw-bean .bean { position: absolute; left: 5px; bottom: 5px; width: 38px; height: 50px; }
.pw-bean .pw-arm { position: absolute; top: 26px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--ink); }
.pw-bean .al { left: -7px; } .pw-bean .ar { right: -7px; }
.pw-bean .pw-body { position: absolute; inset: 0; box-sizing: border-box; border-radius: 50% 50% 44% 44% / 58% 58% 42% 42%; border: 3px solid var(--ink); overflow: hidden; }
.pw-bean .pw-hl { position: absolute; left: 5px; top: 5px; width: 12px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.45); }
.pw-bean .pw-shirt { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; }
.pw-bean .pw-eye { position: absolute; top: 15px; width: 5px; height: 9px; border-radius: 3px; background: var(--ink); }
.pw-bean .pw-cheek { position: absolute; top: 26px; width: 7px; height: 4px; border-radius: 50%; background: rgba(255,92,138,0.6); }
.pw-bean .pw-hat { position: absolute; border: 3px solid var(--ink); } /* content-box on purpose: matches Main.dc.html */
.pw-bean .pw-tag { position: absolute; left: 0; top: -100px; transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 999px; border: 2px solid var(--ink); font: 900 12px 'Nunito', sans-serif; background: #FFFFFF; color: var(--ink); }
.pw-bean .pw-tag.me { background: var(--ink); color: var(--yellow); }
.pw-bean .pw-bubble { position: absolute; left: 22px; top: -168px; width: 210px; background: #FFFFFF; border: 3px solid var(--ink); border-radius: 16px 16px 16px 4px; box-shadow: 0 4px 0 var(--ink); padding: 8px 12px; font: 800 14px/1.3 'Nunito', sans-serif; box-sizing: content-box; }
.pw-bean .pw-bubble.emote { width: auto; padding: 6px 10px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pw-bean .pw-scale { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.pw-minihead { position: relative; display: inline-block; flex: none; border-radius: 50%; box-sizing: border-box; }
.pw-minihead .pw-eye { position: absolute; top: 9px; width: 4px; height: 7px; border-radius: 2px; background: var(--ink); }

/* ---------- Buttons ---------- */
.pw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 3px solid var(--ink); font-family: var(--font-display); font-weight: 400; color: var(--ink); cursor: pointer; text-decoration: none; box-sizing: border-box; position: relative; background: #FFFFFF; box-shadow: 0 6px 0 var(--ink); }
.pw-btn:hover { color: var(--ink); }
.pw-btn.on-navy { box-shadow: 0 6px 0 var(--ink-deep); }
.pw-btn.primary { background: #FFD23F; }
.pw-btn.secondary { background: #FFFFFF; }
.pw-btn.success { background: #3DD68C; }
.pw-btn.danger { background: #FF5C5C; }
.pw-btn.dark { background: var(--ink); color: #FFFFFF; box-shadow: 0 5px 0 #4B4470; }
.pw-btn.dark:hover { color: #FFFFFF; }
.pw-btn.ghost { background: transparent; border: 2px dashed #D9D4F0; color: #FFFFFF; font-family: var(--font-body); font-weight: 800; font-size: 14px; box-shadow: none; }
.pw-btn.ghost:hover { color: #FFFFFF; }
.pw-btn.sm { min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 16px; }
.pw-btn.md { min-height: 52px; padding: 0 20px; border-radius: 16px; font-size: 18px; }
.pw-btn.lg { min-height: 58px; padding: 0 24px; border-radius: 18px; font-size: 22px; }
.pw-btn[disabled], .pw-btn.disabled { background: #8E89A8; cursor: not-allowed; animation: none; }
.pw-btn.ready[disabled] { animation: none; }
.pw-btn.block { display: flex; width: 100%; }
.pw-btn .pw-hosttag { position: absolute; top: -10px; left: 8px; background: #FFD23F; border: 2px solid var(--ink); border-radius: 6px; padding: 0 5px; font: 900 10px 'Nunito', sans-serif; letter-spacing: .06em; color: var(--ink); line-height: 1.5; }

/* ---------- Panel ---------- */
.pw-panel { background: var(--panel); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); padding: 16px 22px; box-sizing: border-box; color: var(--ink); }
.pw-panel.navy { background: var(--navy); color: #FFFFFF; }
.pw-panel.yellow { background: var(--yellow); }
.pw-panel.ink { background: var(--ink); color: #FFFFFF; border-radius: 20px; }

/* ---------- Chip ---------- */
.pw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 2px solid var(--ink); font: 900 13px 'Nunito', sans-serif; white-space: nowrap; color: var(--ink); background: #FFFFFF; }
.pw-chip.dashed { border-style: dashed; }
.pw-chip svg { width: 14px; height: 14px; flex: none; }

/* ---------- Ad slot ---------- */
.pw-ad { position: relative; box-sizing: border-box; border-radius: 12px; display: grid; place-items: center; background: var(--lilac-5); border: 2px dashed var(--muted-3); color: var(--muted-2); }
.pw-ad.dark { background: var(--plum); border-color: var(--muted-4); color: var(--lilac-1); }
.pw-ad .pw-ad-label { position: absolute; left: 10px; top: 6px; font: 900 10px 'Nunito', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.pw-ad.dark .pw-ad-label { color: var(--lilac-1); }
.pw-ad .pw-ad-size { font: 800 13px 'Nunito', sans-serif; }
.pw-ad.mrec { width: 300px; max-width: 100%; height: 250px; }
.pw-ad.banner { width: 320px; max-width: 100%; height: 50px; }

/* ---------- Toast ---------- */
.pw-toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--ink); color: #FFFFFF; border: 3px solid #FFFFFF; border-radius: 18px; padding: 12px 16px; max-width: calc(100% - 40px); font-weight: 900; box-sizing: border-box; }
.pw-toast.success { border-color: var(--green); }
.pw-toast.error { border-color: var(--red); }
.pw-toast a, .pw-toast button.link { color: var(--yellow); font-weight: 900; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-size: inherit; }

/* ---------- Modal / Drawer ---------- */
.pw-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(15,18,38,0.6); display: flex; align-items: flex-start; justify-content: center; padding: 140px 16px 16px; box-sizing: border-box; overflow-y: auto; }
.pw-dialog { width: 500px; max-width: 100%; background: var(--panel); border: 3px solid var(--ink); border-radius: 24px; box-shadow: var(--sh-dialog); padding: 22px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; color: var(--ink); }
.pw-dialog h2 { font-family: var(--font-display); font-size: 30px; line-height: 1.1; margin: 0; }
.pw-dialog.sheet-phone { }
@media (max-width: 767px) { .pw-backdrop { padding-top: 24px; } .pw-dialog.wide { width: 100%; } }
.pw-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.pw-drawer { flex: 1 1 380px; max-width: 460px; background: var(--panel); border-left: 3px solid var(--ink); display: flex; flex-direction: column; color: var(--ink); }
.pw-drawer-head { padding: 16px 18px; border-bottom: 3px solid var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pw-drawer-head h2 { font-family: var(--font-display); font-size: 28px; margin: 0; }
.pw-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.pw-drawer-foot { padding: 14px 18px; border-top: 3px solid var(--ink); background: var(--cream-footer); }
.pw-iconbtn { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 12px; background: #FFFFFF; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }

/* ---------- Stepper ---------- */
.pw-stepper { display: inline-flex; align-items: center; gap: 8px; }
.pw-stepper button { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 12px; background: #FFFFFF; box-shadow: 0 3px 0 var(--ink); font: 400 24px var(--font-display); cursor: pointer; color: var(--ink); }
.pw-stepper button:disabled { background: #8E89A8; cursor: not-allowed; }
.pw-stepper input { width: 64px; height: 44px; box-sizing: border-box; text-align: center; border: 3px solid var(--ink); border-radius: 12px; font: 400 22px var(--font-display); background: #FFFFFF; color: var(--ink); }
.pw-stepper input:focus { outline: 3px solid #FFD23F; outline-offset: 2px; }

/* ---------- World thumb ---------- */
.pw-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); border-radius: 12px; }
.pw-thumb svg { display: block; width: 100%; height: 100%; }
.pw-thumb.soon { display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(45deg, #2B3A6A, #2B3A6A 12px, #23305A 12px, #23305A 24px); color: #FFFFFF; }
.pw-thumb.soon .pw-soon-name { font-family: var(--font-display); font-size: 18px; }
.pw-thumb.soon .pw-soon-tag { display: inline-block; margin-top: 6px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; font: 900 11px 'Nunito', sans-serif; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Logo / TopBar ---------- */
.pw-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #FFFFFF; }
.pw-logo:hover { color: #FFFFFF; }
.pw-logo .pw-logo-mark { position: relative; width: 36px; height: 42px; display: inline-block; }
.pw-logo .pw-logo-text { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.01em; }
.pw-topbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.pw-topbar .pw-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pw-topbar .pw-links a.pw-navlink { color: #FFFFFF; font-weight: 800; padding: 12px 12px; text-decoration: none; }
.pw-field { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; border: 3px solid var(--ink); border-radius: 14px; font: 800 16px var(--font-body); background: #FFFFFF; color: var(--ink); }
.pw-field:focus { outline: 3px solid #FFD23F; outline-offset: 2px; }
.pw-label { font: 900 13px var(--font-body); letter-spacing: .02em; }


/* =====================================================================================
   ENTRY SCREENS (docs/OWNERSHIP.md §3): /start, /host/setup, /join, /s/{code}/bean, /s/{code}/lobby
   Classes are prefixed `en-`. Values are ported from Home/Setup/Join/Bean/BeanPhone/Lobby/RotationModal .dc.html.
   ===================================================================================== */
.en-page { min-height: 100vh; background-color: #23305A; background-image: radial-gradient(rgba(255,255,255,0.07) 2px, transparent 2px); background-size: 28px 28px; color: #1E1B2E; font-family: 'Nunito', 'Trebuchet MS', sans-serif; }
.en-page.dark { color: #FFFFFF; }
.en-page.phone { background-size: 24px 24px; }
.en-a-light a { color: #FFD23F; } .en-a-light a:hover { color: #FFE680; }
.en-field:focus, .en-field:focus-visible { outline: 3px solid #FFD23F; outline-offset: 2px; }
.en-field.thick:focus, .en-field.thick:focus-visible { outline-width: 4px; }
.en-input { min-height: 54px; padding: 0 14px; border: 3px solid #1E1B2E; border-radius: 14px; font-family: inherit; font-size: 17px; font-weight: 700; background: #FFFFFF; color: #1E1B2E; box-sizing: border-box; width: 100%; }
.en-select { min-height: 48px; padding: 0 12px; border: 3px solid #1E1B2E; border-radius: 14px; font-family: inherit; font-size: 16px; font-weight: 800; background: #FFFFFF; color: #1E1B2E; width: 100%; min-width: 0; box-sizing: border-box; }
.en-lbl { display: flex; flex-direction: column; gap: 6px; font-weight: 900; font-size: 15px; }
.en-lbl.sm { font-size: 14px; }
.en-err { font-size: 14px; font-weight: 800; color: #B42318; }
.en-h { margin: 0; font-family: 'Lilita One', sans-serif; font-weight: 400; }
.en-panel { background: #FFFDF7; border: 3px solid #1E1B2E; border-radius: 24px; box-shadow: 0 8px 0 #0B0A14; box-sizing: border-box; }
.en-lobby-panel { background: #FFFDF7; border: 3px solid #1E1B2E; border-radius: 24px; box-shadow: 0 7px 0 #1E1B2E; box-sizing: border-box; }
.en-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 3px solid #1E1B2E; color: #1E1B2E; font-family: 'Lilita One', sans-serif; text-decoration: none; cursor: pointer; box-sizing: border-box; transition: transform .08s ease; }
.en-btn:hover { color: #1E1B2E; }
.en-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #1E1B2E !important; }
.en-btn:disabled, .en-btn[aria-disabled="true"] { cursor: not-allowed; }
.en-link { background: none; border: 0; padding: 0 4px; min-height: 44px; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.en-row-hover:hover { background: #FFF7DD; }
.en-ready { animation: enPulse 1.4s ease-out infinite; }
@keyframes enPulse { 0%,100% { box-shadow: 0 6px 0 #0B0A14, 0 0 0 0 rgba(255,210,63,.7) } 50% { box-shadow: 0 6px 0 #0B0A14, 0 0 0 12px rgba(255,210,63,0) } }
.en-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .en-grid2 { grid-template-columns: minmax(0, 1fr); } .en-h1-hero { font-size: 44px !important; } }
.en-toggle { position: relative; flex: none; width: 54px; height: 32px; }
.en-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.en-toggle .track { position: absolute; inset: 0; border-radius: 999px; border: 3px solid #1E1B2E; }
.en-toggle .knob { position: absolute; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 3px solid #1E1B2E; box-sizing: border-box; transition: left .15s ease; }
.en-toggle:focus-within .track { outline: 3px solid #5AA9FF; outline-offset: 2px; }
.en-caret { display: inline-block; width: 3px; height: 34px; background: #1E1B2E; animation: enBlink 1s steps(1) infinite; }
@keyframes enBlink { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }
.en-codebox:focus-within { outline: 4px solid #FFD23F; outline-offset: 4px; border-radius: 14px; }
.en-nocheek .pw-cheek { display: none; }
.en-skel { background: #EDE7D6; border-radius: 6px; height: 16px; }
.en-hatrow { scrollbar-width: thin; }

/* Setup: rotation modal (desktop = RotationModal.dc, <=640px = RotationModalPhone.dc bottom sheet) */
.en-rotgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.en-rottile:focus-within { outline: 3px solid #FFD23F; outline-offset: 3px; }
.en-rothead, .en-rotbody { display: flex; flex-direction: column; gap: 14px; }
.en-rottitle h2 { font-size: 28px; }
.en-rottitle p { margin: 0; font-size: 15px; font-weight: 800; color: #3F3A5A; }
.en-rotname { font-family: 'Lilita One', sans-serif; font-size: 15px; line-height: 1.1; }
.en-rotcheck { width: 28px; height: 28px; }
.en-rotrep { padding: 4px 14px; }
.en-rotfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 2px dashed #D9CFA8; padding-top: 14px; }
.en-rotfoot > div { display: flex; gap: 10px; }
.en-rotcount { font-weight: 900; font-size: 15px; }
.en-rotcancel { padding: 0 18px; border-radius: 16px; font-size: 18px; }
.en-rotsave { padding: 0 22px; border-radius: 16px; font-size: 20px; }
.en-rotgrab { display: none; align-self: center; width: 48px; height: 6px; border-radius: 3px; background: #C9C3DE; }
@media (max-width: 640px) {
  .en-rotgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .en-rotback { align-items: flex-end !important; padding: 0 !important; }
  .en-rotpanel { max-width: none !important; border-radius: 24px 24px 0 0 !important; max-height: 92% !important; border-bottom: 0 !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
  .en-rotgrab { display: block; }
  .en-rothead { padding: 10px 16px 0; gap: 10px; }
  .en-rottitle { gap: 2px !important; }
  .en-rottitle h2 { font-size: 24px; }
  .en-rottitle p { font-size: 13px; }
  .en-rotbody { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; gap: 12px; }
  .en-rotname { font-size: 14px; }
  .en-rottile > span:nth-child(2) { padding: 8px !important; }
  .en-rotcheck { width: 26px; height: 26px; }
  .en-rotrep { padding: 4px 12px; font-size: 14px !important; }
  .en-rotfoot { flex-wrap: nowrap; padding: 12px 16px 18px; gap: 10px; background: #FFFDF7; }
  .en-rotfoot > div { gap: 8px; }
  .en-rotcount { font-size: 14px; }
  .en-rotcancel { padding: 0 14px; border-radius: 14px; font-size: 16px; }
  .en-rotsave { padding: 0 16px; border-radius: 14px; font-size: 17px; }
}
.en-fieldmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .en-fieldmap { grid-template-columns: minmax(0, 1fr); } }

/* Lobby */
@keyframes enDrop { 0% { transform: translateY(-160px); opacity: 0 } 55% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(-14px) scale(1.04,.96) } 85% { transform: translateY(0) scale(.97,1.03) } 100% { transform: translateY(0) } }
.en-drop { animation: enDrop .9s cubic-bezier(.3,.6,.4,1) both; }
@keyframes enPopout { 0% { transform: scale(1); opacity: 1 } 40% { transform: scale(1.25,.8); opacity: 1 } 100% { transform: scale(0); opacity: 0 } }
.en-popout { animation: enPopout .45s ease-in forwards; }
@keyframes enToastIn { from { transform: translateX(-30px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
.en-ltoast { animation: enToastIn .35s ease-out both; }
.en-iconbtn:hover { background: #3D3860 !important; }
.en-rmbtn:hover span { background: #FF5C5C !important; }
@keyframes enCf0 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(-60px,-70px) rotate(260deg); opacity: 0 } }
@keyframes enCf1 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(55px,-80px) rotate(-200deg); opacity: 0 } }
@keyframes enCf2 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(-20px,-95px) rotate(180deg); opacity: 0 } }
@keyframes enCf3 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(80px,-45px) rotate(320deg); opacity: 0 } }
@keyframes enCf4 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(-85px,-35px) rotate(-280deg); opacity: 0 } }
@keyframes enCf5 { 0% { transform: translate(0,0) rotate(0); opacity: 1 } 100% { transform: translate(25px,-110px) rotate(220deg); opacity: 0 } }
.en-cf0 { animation: enCf0 1.4s ease-out infinite } .en-cf1 { animation: enCf1 1.4s ease-out infinite } .en-cf2 { animation: enCf2 1.4s ease-out infinite }
.en-cf3 { animation: enCf3 1.4s ease-out infinite } .en-cf4 { animation: enCf4 1.4s ease-out infinite } .en-cf5 { animation: enCf5 1.4s ease-out infinite }
@media (prefers-reduced-motion: reduce) {
  .en-ready, .en-drop, .en-popout, .en-ltoast, .en-caret, .en-cf0, .en-cf1, .en-cf2, .en-cf3, .en-cf4, .en-cf5 { animation: none; }
  .en-toggle .knob { transition: none; }
}
.rm .en-ready, .rm .en-drop, .rm .en-popout, .rm .en-ltoast, .rm .en-caret, .rm .en-cf0, .rm .en-cf1, .rm .en-cf2, .rm .en-cf3, .rm .en-cf4, .rm .en-cf5 { animation: none; }
.rm .en-toggle .knob { transition: none; }
.en-noshadow .pw-shadow { display: none; }
.en-thumbwrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #23305A; }
.en-thumbwrap .pw-thumb { border-radius: 0; height: 100%; aspect-ratio: auto; }
.en-reset { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 900; text-decoration: underline; color: #1E1B2E; cursor: pointer; }
.en-chip-miss { padding: 2px 8px; border-radius: 999px; background: #FFE1E1; border: 2px solid #1E1B2E; font-size: 11px; font-weight: 900; }
.en-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 2px solid #E6DFCC; background: #FFFFFF; }
.en-row:hover { background: #FFF7DD; }
.en-row.over { box-shadow: inset 0 3px 0 #FFD23F; }
.en-row.lifted { background: #FFF1B8; outline: 3px solid #1E1B2E; outline-offset: -3px; }
.en-handle { flex: none; display: grid; place-items: center; width: 24px; min-height: 40px; cursor: grab; border-radius: 6px; }
.en-handle:focus-visible { outline: 3px solid #5AA9FF; outline-offset: 1px; }
.en-wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .en-wgrid { grid-template-columns: 1fr; } .en-setup-cols { flex-direction: column; } }
.en-pv:focus-visible, .en-world:focus-visible { outline: 3px solid #5AA9FF; outline-offset: 3px; }
/* =====================================================================================
   Estimation Island world (12-worlds-a Part 2). Section owned by the worlds agent.
   ===================================================================================== */
@keyframes isl-drain { from { width: 100%; } to { width: 0%; } }
.isl-scene-wrap { width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 28px; }
.isl-scene { position: relative; width: 1200px; height: 650px; transform-origin: 0 0; }
/* Teammate replay wrapper: the bean anchor stands at the START of the walk; the wrapper translates it along the recorded path. */
.isl-walker { position: absolute; left: 0; top: 0; width: 0; height: 0; }
@media (prefers-reduced-motion: reduce) { .isl-walker { animation: none !important; transform: var(--fin) !important; z-index: var(--zf) !important; } }
.rm .isl-walker { animation: none !important; transform: var(--fin) !important; z-index: var(--zf) !important; }
.isl-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.isl-quick button { min-width: 44px; height: 44px; padding: 0 10px; border: 3px solid #1E1B2E; border-radius: 12px; box-shadow: 0 3px 0 #1E1B2E; font-family: 'Lilita One', sans-serif; font-size: 18px; color: #1E1B2E; cursor: pointer; }
.isl-quick button[disabled] { cursor: default; }
.isl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* =====================================================================================
   Appended by the Site/Consent/Ads area (OWNERSHIP section 6): ad slot gam + prop branches, first-visit consent bar.
   ===================================================================================== */
/* gam: the box is reserved at its final size; the GPT iframe lives in .pw-ad-gam. Once an ad renders the placeholder chrome drops away. */
.pw-ad.gam { align-content: center; }
.pw-ad.gam .pw-ad-gam { display: grid; place-items: center; max-width: 100%; overflow: hidden; }
.pw-ad.gam.filled { background: transparent; border-color: transparent; }
/* world_prop: the in-world sponsored prop face; fills the prop the world draws, centred placeholder text */
.pw-ad.prop { width: 100%; height: 100%; min-height: 36px; border-radius: 6px; }
.pw-ad.prop .pw-ad-size { font: 900 12px 'Nunito', sans-serif; letter-spacing: .04em; }

/* First-visit consent bar: normal flow at the bottom of app pages, never over controls */
.pw-consent[hidden] { display: none; }
.pw-consent { padding: 12px 20px 20px; box-sizing: border-box; background: var(--cream-footer); border-top: 3px solid var(--ink); position: relative; z-index: 1; }
.pw-consent-in { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; }
.pw-consent-text { margin: 0; flex: 1 1 320px; font: 800 15px/1.4 var(--font-body); color: var(--muted-1); }
.pw-consent-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pw-consent .pw-btn.sm { box-shadow: 0 4px 0 var(--ink); }