/* =====================================================
   EyeCon — Design Tokens
===================================================== */
:root{
  --mint: #bfe9db;
  --mint-deep: #9ed9c8;
  --cream: #fdf3e6;
  --cream-panel: #fff8ee;
  --cream-deep: #f3e3cc;
  --ink: #3a2e39;
  --ink-soft: #6b5b6a;
  --ink-faint: #a99aa8;
  --coral: #ef6377;
  --coral-dark: #d94b60;
  --teal: #4fb8a9;
  --teal-dark: #2e8c7e;
  --yellow: #f5c544;
  --yellow-dark: #e0ac1f;
  --orange: #ff8a3d;
  --orange-dark: #e56c1c;
  --purple: #9b7fd4;
  --success: #3dbd6e;
  --danger: #e15252;
  --white: #ffffff;
  --shadow-sm: 0 2px .375rem rgba(58,46,57,0.18);
  --shadow-md: 0 .375rem 1.125rem rgba(58,46,57,0.22);
  --shadow-lg: 0 .75rem 2rem rgba(58,46,57,0.28);
  --radius-sm: .5rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  /* Matches the reference Eyecon build's own font choices. */
  --font-display: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, sans-serif;
  --font-hand: 'Patrick Hand', cursive;
  --ui-scale: 1;
}

:root[data-theme="hc"]{
  --mint: #f5f5f5;
  --cream: #ffffff;
  --cream-panel: #ffffff;
  --cream-deep: #e6e6e6;
  --ink: #000000;
  --ink-soft: #000000;
  --ink-faint: #333333;
  --coral: #b3001b;
  --coral-dark: #8a0015;
  --teal: #005f56;
  --teal-dark: #003f39;
  --yellow: #a37b00;
  --orange: #a34700;
  --success: #005f2e;
  --danger: #b3001b;
  --shadow-sm: 0 0 0 2px #000;
  --shadow-md: 0 0 0 2px #000;
  --shadow-lg: 0 0 0 2px #000;
}

:root[data-cvd="protanopia"]{ --coral:#c9a227; --coral-dark:#a3831c; --danger:#8a6d00; --success:#2f6fb0; }
:root[data-cvd="deuteranopia"]{ --coral:#c9862b; --coral-dark:#a36a20; --danger:#8a6600; --success:#2f6fb0; }
:root[data-cvd="tritanopia"]{ --teal:#4f8ab8; --teal-dark:#2e5f8c; --coral:#e0607a; }

.hidden{ display:none !important; }
*{ box-sizing: border-box; }

/* Slim gray scrollbars everywhere — no white track chrome, no arrow buttons */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(58,46,57,0.32) transparent;
}
*::-webkit-scrollbar{ width:.625rem; height:.625rem; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background-color: rgba(58,46,57,0.32); border-radius:.5rem;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background-color: rgba(58,46,57,0.5); }
*::-webkit-scrollbar-corner{ background: transparent; }
/* Kill the up/down/left/right stepper buttons — some Chromium/Edge builds
   need every button sub-state targeted explicitly, not just the bare pseudo. */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:double-button,
*::-webkit-scrollbar-button:start,
*::-webkit-scrollbar-button:end,
*::-webkit-scrollbar-button:vertical:start,
*::-webkit-scrollbar-button:vertical:end,
*::-webkit-scrollbar-button:vertical:start:increment,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:decrement,
*::-webkit-scrollbar-button:horizontal:start,
*::-webkit-scrollbar-button:horizontal:end,
*::-webkit-scrollbar-button:horizontal:start:increment,
*::-webkit-scrollbar-button:horizontal:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:decrement{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  appearance: none !important;
}

/* Smooth scrolling on plain (non-zoom-driven) scroll areas. The zoom
   viewports below animate scroll position manually every frame, so
   CSS smooth-scroll is deliberately left off there to avoid fighting it. */
html{ scroll-behavior: smooth; }
/* Root size = 1rem × UI Scale setting × window fit (set in app.js). Every
   other size is in rem, so the whole interface scales together. */
html{ font-size: calc(16px * var(--ui-scale) * var(--fit, 1)); } /* EC-KEEP-PX */
.mail-panel, .app-content-wrap, .feedback-list, .element-settings, .compose-body{
  scroll-behavior: smooth;
}
html,body{ height:100%; }
/* Suppresses the browser's native text-selection highlight (often a
   blue/green tint) from flashing over text elements while dragging or
   resizing something on the canvas. */
body.eyecon-dragging, body.eyecon-dragging *{
  user-select:none !important; -webkit-user-select:none !important;
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--mint);
  font-size: 1rem;
  overflow: hidden;
}
button{ font-family: inherit; }
.sr-only{
  position:absolute; width:1px;height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{ outline: .1875rem solid var(--purple); outline-offset: 2px; }

#app-root{
  position:relative; width:100vw; height:100vh; overflow:hidden; display:flex; flex-direction:column;
}
/* Mobile browser chrome (address bar) makes 100vh inaccurate/jumpy — dvh
   tracks the *actual* visible viewport and is layered on as a progressive
   enhancement (browsers that don't support it just keep the vh value above). */
@supports (height: 100dvh){
  #app-root{ height:100dvh; }
}
.screen-area{ position:relative; flex:1; min-height:0; }
.screen{ display:none; width:100%; height:100%; }
.screen.active{ display:flex; flex-direction:column; animation: screenFadeIn .28s ease; }
.taskbar.desktop-hidden{ display:none; }
@keyframes screenFadeIn{
  from{ opacity:0; transform: translateY(.375rem) scale(.995); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.reduce-motion .screen.active{ animation:none; }
/* Closing beat before a screen actually switches — see showScreen() in
   app.js, which keeps the outgoing screen visible (display:flex) for the
   duration of this animation instead of cutting to display:none instantly. */
.screen.closing{ display:flex; animation: screenFadeOut .18s ease forwards; }
@keyframes screenFadeOut{
  from{ opacity:1; transform: translateY(0) scale(1); }
  to{ opacity:0; transform: translateY(-.375rem) scale(.99); }
}
.reduce-motion .screen.closing{ animation:none; }

/* =====================================================
   HOME SCREEN
===================================================== */
/* The desk illustration's children are all positioned with %/vw units sized
   for a ~16:9 composition. Letting this box stretch to whatever the viewport
   shape happens to be (a phone, an ultrawide monitor) throws those
   percentages off in different ways on every screen — locking the box
   itself to one aspect ratio, centered with letterbox bars in the matching
   background color, keeps everything inside it proportioned the same
   regardless of the surrounding window. */
#screen-home.active{
  display:flex; align-items:center; justify-content:center;
  /* Same gradient as .desk-scene itself, so the letterbox bars that show up
     on ultrawide screens read as the sky continuing offscreen rather than a
     flat, mismatched backdrop. */
  background: linear-gradient(180deg, var(--mint) 0%, var(--mint-deep) 100%);
}
.desk-scene{
  position:relative; width:100%; height:100%;
  background: linear-gradient(180deg, var(--mint) 0%, var(--mint-deep) 100%);
  overflow:hidden;
  transform-origin: 50% 50%;
}
/* Above phone/tablet widths, contain the scene at a fixed 16:9 instead of
   stretching it to whatever the window's actual aspect ratio is — an
   ultrawide monitor otherwise spreads the illustration's %-positioned
   pieces much further apart than the same layout on a normal desktop.
   Skipped below 56.3125rem: the mobile-specific rules further down were tuned
   for a full-bleed portrait scene, not a letterboxed one. Works out exactly
   because the taskbar is hidden on this screen, so .screen-area's box really
   is the full viewport and these vh/vw figures (16/9 and its inverse) line
   up with it — a plain `aspect-ratio` can't cap both axes at once like this. */
@media (min-width:901px){
  .desk-scene{ width: min(100%, 177.78vh); height: min(100%, 56.25vw); }
}

/* Equipped wall posters — up to 2, hung in the strip of wall above the
   monitor. Positioned/sized to stay clear of the sticky note and tower
   sitting on either side at this height. */
.desk-posters{
  position:absolute; top:1%; left:50%; transform:translateX(-50%);
  display:flex; gap:1rem; z-index:1;
}
.poster-item{
  width:3.25rem; height:4rem; border-radius:.375rem; box-shadow: var(--shadow-md);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  border: .1875rem solid #fff;
}

/* Equipped decorative desk items (from the gacha wardrobe) sit along the
   front edge of the desk, in the open space below the monitor and above
   the keyboard — the same emoji stickers shown on the OS desktop screen. */
.desk-surface{
  position:absolute; left:0; right:0; bottom:0; height:24%;
  background: linear-gradient(180deg, #dba86e 0%, #b98849 55%, #a6763c 100%);
  box-shadow: 0 .375rem 1.125rem rgba(0,0,0,0.18) inset;
}
.desk-surface::before{
  content:''; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) .1875rem, transparent .1875rem, transparent 2.875rem);
}
.desk-decor{
  position:absolute; bottom:23%; left:50%; transform:translateX(-50%);
  display:flex; gap:1.5rem; font-size:2.125rem; z-index:2;
}
.desk-decor .decor-item{ filter: drop-shadow(0 .25rem .375rem rgba(0,0,0,0.2)); }
.monitor{
  position:absolute; left:50%; top:8%; transform:translateX(-50%);
  width:56%; aspect-ratio: 16/10.5;
  background: var(--cream);
  border-radius: 2.25rem;
  box-shadow: var(--shadow-lg);
  display:flex; align-items:center; justify-content:center;
}
.monitor-screen{
  position:relative;
  width:92%; height:86%;
  background: var(--cream-panel);
  border: .375rem solid var(--cream);
  outline: 2px solid var(--cream-deep);
  border-radius: 1.25rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 1rem;
}
.eyecon-logo{ display:flex; gap: 1rem; }
.eye{
  width: 4.375rem; height:3.5rem; background:#fff; border-radius:50%;
  border: .25rem solid var(--ink); display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.eyecon-logo.small .eye{ width:1.25rem; height:1rem; border-width:2px; }
.eyecon-logo.small .pupil{ width:.5625rem;height:.5625rem; }
.eyecon-logo.small{ gap:.25rem; }
.pupil{ width:1.875rem; height:1.875rem; background: var(--ink); border-radius:50%; }

/* ---- The monitor's mini live desktop — the entry point into the app now,
   not a separate logo + Start button. A miniature, functional replica of
   the real desktop screen: clicking its background enters the game on the
   desktop; clicking one of its icons enters *straight into that app*. ---- */
.mini-desktop{
  position:absolute; inset:0; border-radius:.875rem; overflow:hidden; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
  background: linear-gradient(160deg, var(--mint) 0%, var(--mint-deep) 100%);
  transition: filter .15s ease;
}
.mini-desktop:hover, .mini-desktop:focus-visible{ filter: brightness(1.04); }
.mini-watermark{
  position:absolute; top:6%; right:5%; display:flex; align-items:center; gap:.25rem;
  font-family: var(--font-display); font-weight:700; color: var(--teal-dark); opacity:.7;
  font-size: clamp(1rem, 1.5vw, 1rem); white-space:nowrap;
}
.mini-watermark .eyecon-logo.small .eye{ width:.625rem; height:.5rem; border-width:1px; }
.mini-watermark .eyecon-logo.small .pupil{ width:.25rem; height:.25rem; }
.mini-watermark .eyecon-logo.small{ gap:4px; }
.mini-icons{ position:absolute; top:8%; left:6%; display:flex; flex-direction:column; gap:7%; }
.mini-desktop-icon{ display:flex; flex-direction:column; align-items:center; gap:.25rem; }
/* Sized and shaped like a real desktop app icon (see .desktop-icon-glyph) —
   just scaled down, so the monitor genuinely reads as a shrunk desktop
   rather than a row of tiny unrelated dots. */
.mini-icon-glyph{
  /* width is the only sized dimension — percentages resolve against the
     container's width and height separately, and this box's container is
     shorter than it is wide, so setting both via % previously produced a
     visibly non-square "icon." aspect-ratio keeps it a true square at any size. */
  position:relative; width: max(2rem, 10%); aspect-ratio: 1 / 1; background: var(--cream);
  border-radius:24%; display:flex; align-items:center; justify-content:center; font-size: max(1.0625rem, 5.6%);
  box-shadow: var(--shadow-sm);
}
.mini-badge{
  position:absolute; top:-.3125rem; right:-.3125rem; background: var(--danger); color:#fff; border-radius:50%;
  width:.9375rem; height:.9375rem; font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 2px var(--cream);
}
.mini-icon-label{
  font-size: clamp(1rem, 1.5vw, 1rem); font-weight:700; color: var(--ink);
  background: rgba(253,243,230,0.82); padding:1px 0.25rem; border-radius:.25rem; white-space:nowrap;
}
.mini-hint{
  position:absolute; bottom:14%; left:50%; transform:translateX(-50%); background: var(--cream);
  padding:0.25rem 0.5rem; border-radius:.5rem; font-size: clamp(1rem, 1.3vw, 1rem); font-weight:600;
  color: var(--ink-soft); white-space:nowrap; box-shadow: var(--shadow-sm);
}
.mini-taskbar{
  position:absolute; bottom:0; left:0; right:0; height:10%; background: var(--mint-deep);
  display:flex; align-items:center; padding:0 4%; gap:0.25rem;
}
.mini-taskbar-icon{ font-size: clamp(1rem, 1.8vw, 1rem); }
.mini-taskbar-spacer{ flex:1; }
.mini-taskbar-currency, .mini-taskbar-clock{
  background: var(--cream); padding:4px 0.5rem; border-radius:.375rem; font-weight:700;
  font-size: clamp(1rem, 1.4vw, 1rem); white-space:nowrap;
}

/* Floating "app window" popup — appears above the monitor instead of
   navigating away from the title screen. Its body is a mount point that
   real app content (mail list, stats, shop, settings) gets reparented into
   and back out of, the same move-and-restore trick the editor's mobile
   tools sheet already uses. */
.monitor-app-popup{
  position:absolute; left:50%; top:2%; transform:translateX(-50%);
  width:85%; height:82%;
  background: var(--cream-panel); border: .25rem solid var(--cream); border-radius:1.25rem;
  box-shadow: var(--shadow-lg); z-index:10; display:flex; flex-direction:column; overflow:hidden;
  animation: monitorAppPopIn .22s cubic-bezier(.25,.9,.35,1.25);
}
.monitor-app-popup.hidden{ display:none; }
@keyframes monitorAppPopIn{
  from{ opacity:0; transform:translateX(-50%) scale(.93) translateY(.625rem); }
  to{ opacity:1; transform:translateX(-50%) scale(1) translateY(0); }
}
.reduce-motion .monitor-app-popup{ animation:none; }
.monitor-app-popup.closing{ animation: monitorAppPopOut .18s ease forwards; }
@keyframes monitorAppPopOut{
  from{ opacity:1; transform:translateX(-50%) scale(1) translateY(0); }
  to{ opacity:0; transform:translateX(-50%) scale(.93) translateY(.625rem); }
}
.reduce-motion .monitor-app-popup.closing{ animation:none; }
.monitor-app-popup-titlebar{
  display:flex; align-items:center; gap:0.5rem; padding:1rem 1rem; flex-shrink:0;
  background: var(--cream); border-bottom:2px solid var(--cream-deep);
}
.monitor-app-popup-icon{ font-size:1.1875rem; }
.monitor-app-popup-title{ font-family:var(--font-display); font-weight:700; flex:1; color:var(--ink); }
.monitor-app-popup-close{
  background:none; border:none; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; font-size:1rem; width:1.875rem; height:1.875rem; border-radius:.5rem;
  color: var(--ink); transition: background .12s ease;
}
.monitor-app-popup-close:hover, .monitor-app-popup-close:focus-visible{ background: rgba(0,0,0,0.08); }
.monitor-app-popup-body{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; }

/* Note-style skin — used when the popup is opened from the desk's sticky
   note rather than a monitor icon, so Settings shows up looking like the
   note itself (yellow, pinned, handwritten title). Straight, not tilted —
   only the physical desk prop (.sticky-note) keeps its own little rotation. */
.monitor-app-popup.note-style{
  background: var(--yellow); border-color: var(--yellow);
}
.monitor-app-popup.note-style::before{
  content:''; position:absolute; top:-.75rem; left:50%; transform:translateX(-50%) rotate(45deg);
  width:1.25rem; height:1.25rem; background: var(--coral); border-radius:50% 50% 50% 0; z-index:2;
}
.monitor-app-popup.note-style .monitor-app-popup-titlebar{
  background:none; border-bottom: 2px dashed rgba(192,57,43,0.3);
}
.monitor-app-popup.note-style .monitor-app-popup-title{ font-family: var(--font-hand); font-size:1.4375rem; color:#c0392b; }
.monitor-app-popup.note-style .monitor-app-popup-close{ color:#c0392b; }
.monitor-app-popup.note-style .monitor-app-popup-close:hover, .monitor-app-popup.note-style .monitor-app-popup-close:focus-visible{ background: rgba(192,57,43,0.12); }
.monitor-app-popup.note-style .monitor-app-popup-body{ background: var(--yellow); }
/* Settings' own shell/cards default to the standard cream-and-white design —
   override them here so the whole page reads as "the note," not a white
   panel awkwardly floating inside a yellow frame. */
.monitor-app-popup.note-style .settings-shell{ background: var(--yellow); border-radius:0; box-shadow:none; }
.monitor-app-popup.note-style .settings-search-row{ border-bottom-color: rgba(192,57,43,0.25); }
.monitor-app-popup.note-style .settings-search{ background: rgba(255,255,255,0.55); border-color: rgba(192,57,43,0.25); }
.monitor-app-popup.note-style .settings-search:focus-within{ border-color:#c0392b; }
.monitor-app-popup.note-style .settings-tab-title{ border-bottom-color: rgba(192,57,43,0.25); }
.monitor-app-popup.note-style .settings-card{ background: rgba(255,255,255,0.6); }
.monitor-app-popup.note-style .settings-footer{ background: rgba(0,0,0,0.05); border-top-color: rgba(192,57,43,0.25); }

/* ---- Loading transition (any screen -> screen) ----
   Currently used between "Accept" on a mail job and the editor opening —
   see showLoadingTransition() in app.js. Sits above everything as a fixed
   overlay so it doesn't care what screen it's covering. */
.app-loading-screen{
  position:fixed; inset:0; z-index:900; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
  background: linear-gradient(160deg, var(--mint) 0%, var(--mint-deep) 100%);
  opacity:1; transition: opacity .35s ease;
}
.app-loading-screen.hidden{ display:none; }
.app-loading-screen.entering, .app-loading-screen.leaving{ opacity:0; }
.loading-spinner{ position:relative; width:4rem; height:4rem; }
.loading-spinner span{
  position:absolute; top:50%; left:50%; width:.5625rem; height:.5625rem; margin:-0.25rem 0 0 -0.25rem;
  border-radius:50%; background: var(--purple);
  transform: rotate(calc(var(--i) * 30deg)) translateY(-1.6875rem);
  animation: loadingDotFade 1.2s linear infinite;
  animation-delay: calc(var(--i) * -0.1s);
}
@keyframes loadingDotFade{ 0%{ opacity:1; } 100%{ opacity:.15; } }
.loading-label{
  font-family: var(--font-display); font-weight:700; color: var(--teal-dark); font-size:1rem;
}
.reduce-motion .loading-spinner span{ animation:none; opacity:.6; }

.tower{
  position:absolute; left:4%; top:12%; width:14%; min-width:7.5rem; height:62%;
  background: var(--cream); border-radius:1.125rem; box-shadow: var(--shadow-md);
}
.tower-light{ position:absolute; top:.875rem; right:.875rem; width:1.625rem; height:.875rem; background:var(--coral); border-radius:.375rem;}
.tower-slot{ position:absolute; top:3.5rem; left:10%; width:80%; height:22%; background: #cfe3ea; border-radius:.625rem; }
.tower-slot.small{ top:auto; bottom:34%; height:14%; }
.tower-buttons{ position:absolute; bottom:18%; left:10%; display:flex; gap:0.5rem; }
.dot{ width:.875rem;height:.875rem;border-radius:50%; }
.dot.red{ background:var(--coral); } .dot.green{ background:var(--success); }
.tower-disc{ position:absolute; bottom:6%; left:50%; transform:translateX(-50%); width:3.875rem;height:3.875rem;border-radius:50%; background:#a9d7e8; border: .375rem solid var(--teal); }

.sticky-note{
  position:absolute; right:5%; top:6%; width:14%; min-width:9.375rem;
  background: var(--yellow); color:#c0392b; font-family: var(--font-hand); font-size:1.375rem;
  text-align:center; line-height:1.15; padding: 1rem 0.5rem 1.5rem; border-radius:.25rem; box-shadow: var(--shadow-md);
  transform: rotate(2deg); cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; transition: transform .15s ease;
}
.sticky-note:hover, .sticky-note:focus-visible{ transform: rotate(2deg) translateY(-.1875rem); }
.pin{ position:absolute; top:-.625rem; left:50%; transform:translateX(-50%); width:1rem;height:1rem; background:var(--coral); border-radius:50% 50% 50% 0; rotate:45deg; }
.note-arrow{ font-size:1.625rem; }
.plant{ position:absolute; right:4%; top:32%; width:12%; min-width:6.875rem; }
.pot{ width:100%; aspect-ratio:1.1/1; background: var(--teal); border-radius: .375rem .375rem 1.125rem 1.125rem; border: .25rem solid #fff; }
.leaf{ position:absolute; width:34%; height:60%; background: var(--success); border-radius: 50% 50% 50% 4%; bottom:60%; }
.leaf.l1{ left:8%; transform: rotate(-18deg); }
.leaf.l2{ left:33%; bottom:66%; }
.leaf.l3{ left:58%; transform: rotate(18deg); }

.keyboard{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:44%; height:14%; background:#fff; border-radius:.875rem; box-shadow: var(--shadow-md);
  display:flex; flex-direction:column; justify-content:center; gap:.5rem; padding: 0 1rem;
}
.keys-row{ height:18%; background: var(--cream-deep); border-radius:.375rem; }
.mouse{ position:absolute; right:14%; bottom:6%; width:4.375rem; height:6.25rem; background:#fff; border-radius:40% 40% 55% 55%/50% 50% 60% 60%; box-shadow: var(--shadow-md); }

/* =====================================================
   DESKTOP
===================================================== */
#screen-desktop.active{
  display:flex; align-items:center; justify-content:center;
  /* Same reasoning as #screen-home.active — matches .desktop-wallpaper's own
     gradient so the ultrawide letterbox bars blend in as sky, not dead space. */
  background: linear-gradient(160deg, var(--mint) 0%, var(--mint-deep) 100%);
}
.desktop-wallpaper{
  /* z-index:0 (with position:relative) is what actually matters here — it
     makes this element its own stacking context, so the sky layers' negative
     z-index is scoped to painting behind ITS siblings, not some ancestor's
     background further up the tree (which is what was happening without it —
     the clouds/hills were rendering, just fully hidden behind this element). */
  position:relative; z-index:0; width:100%; height:100%; overflow:hidden;
  background: linear-gradient(160deg, var(--mint) 0%, var(--mint-deep) 100%);
  padding: 3rem;
}
/* Same fixed-ratio containment as .desk-scene above 56.3125rem, same reasoning. */
@media (min-width:901px){
  .desktop-wallpaper{ width: min(100%, 177.78vh); height: min(100%, 56.25vw); }
}
/* Sky scene — drifting clouds + rolling hills, always present underneath the
   icons regardless of which wallpaper color is equipped (see applyCosmetics
   in app.js, which only ever touches this element's own background). Pinned
   behind everything else in this stacking context via negative z-index,
   rather than relying on DOM order, since none of the icon/watermark/hint
   siblings are themselves positioned. */
.sky-clouds{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.cloud{ position:absolute; background:#fff; border-radius:50%; opacity:.85; }
.cloud::before, .cloud::after{ content:''; position:absolute; background:#fff; border-radius:50%; }
.cloud.c1{ top:6%; left:8%; width:7.5rem; height:2.75rem; }
.cloud.c1::before{ width:4.375rem; height:4.375rem; top:-2.375rem; left:.625rem; }
.cloud.c1::after{ width:3.125rem; height:3.125rem; top:-1.5rem; left:3.75rem; }
.cloud.c2{ top:14%; left:52%; width:10rem; height:3.5rem; }
.cloud.c2::before{ width:5.625rem; height:5.625rem; top:-3.125rem; left:1.25rem; }
.cloud.c2::after{ width:3.75rem; height:3.75rem; top:-1.75rem; left:5.625rem; }
.cloud.c3{ top:5%; right:6%; width:5.625rem; height:2.125rem; }
.cloud.c3::before{ width:3.375rem; height:3.375rem; top:-1.75rem; left:.5rem; }
.cloud.c3::after{ width:2.375rem; height:2.375rem; top:-1rem; left:2.75rem; }
.cloud.c4{ top:28%; left:32%; width:4.375rem; height:1.625rem; opacity:.6; }
.cloud.c4::before{ width:2.5rem; height:2.5rem; top:-1.25rem; left:.375rem; }
.cloud.c4::after{ width:1.75rem; height:1.75rem; top:-.75rem; left:2rem; }
.sky-hills{ position:absolute; left:0; right:0; bottom:0; height:42%; overflow:hidden; pointer-events:none; z-index:-1; }
.hill{ position:absolute; left:-10%; width:120%; border-radius:50% 50% 0 0 / 100% 100% 0 0; background: var(--success); }
.hill-back{ bottom:-6%; height:78%; opacity:.5; }
.hill-front{ bottom:-12%; height:58%; opacity:.85; }
.desktop-watermark{
  position:absolute; top:1.5rem; right:2.25rem; display:flex; align-items:center; gap:0.5rem;
  color: var(--teal-dark); opacity:.55; font-family: var(--font-display); font-weight:700; font-size:1.125rem;
  background:none; border:none; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; padding:0.5rem .5rem; border-radius:.625rem; transition: opacity .12s ease, background .12s ease;
}
.desktop-watermark:hover, .desktop-watermark:focus-visible{ opacity:.85; background: rgba(255,255,255,0.3); }
.desktop-status-chip{
  position:absolute; top:4.25rem; right:2.25rem; z-index:1; display:flex; gap:0.5rem;
  color: var(--teal-dark); font-family: var(--font-display); font-weight:700; font-size:1rem;
  background: rgba(255,255,255,0.55); padding:0.5rem 1rem; border-radius:.625rem;
}
.desktop-icons{ display:flex; flex-direction:column; gap:2rem; width:6.875rem; z-index:1; }
.desktop-icon{
  position:relative; background:none; border:none; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1rem .5rem; border-radius:1rem; color: var(--ink); transition: transform .12s ease, background .12s ease;
}
.desktop-icon:hover, .desktop-icon:focus-visible{ background: rgba(255,255,255,0.25); transform: translateY(-.1875rem); }
/* Chunky cartoon card: solid white, bold dark outline, real drop shadow —
   reads clearly against any wallpaper color or the hills/clouds behind it. */
.desktop-icon-glyph{
  font-size:2.5rem; width:4.5rem; height:4.5rem; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:1.25rem; border: .1875rem solid var(--ink); box-shadow: 0 .25rem 0 var(--ink);
}
.desktop-icon-label{
  font-family: var(--font-display); font-weight:800; font-size:1rem; color:#fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 0 2px .1875rem rgba(0,0,0,0.25);
}
.desktop-icon-badge{ position:absolute; top:2px; right:.625rem; box-shadow: 0 0 0 .1875rem #fff; }
.desktop-hint{
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  background: var(--cream); padding:1rem 1.5rem; border-radius:1rem; box-shadow: var(--shadow-sm); font-weight:600; color:var(--ink-soft);
}
.app-content-wrap{ flex:1; overflow-y:auto; padding: .5rem 2rem 2rem; }

/* =====================================================
   MAIL / STATS / SETTINGS APP SHELL
===================================================== */
#screen-shell.active, #screen-stats.active, #screen-settings.active{ display:flex; }
.mail-header{
  display:flex; align-items:center; gap:1.5rem; flex-shrink:0; background: var(--cream);
  padding: max(1rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) 1rem max(2rem, env(safe-area-inset-left));
}
.app-back-btn{
  background: var(--cream-deep); border:none; border-radius:50%; width:2.5rem; height:2.5rem; font-size:1.125rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
  box-shadow: var(--shadow-sm); flex-shrink:0; color: var(--ink); transition: transform .12s ease;
}
.app-back-btn:hover{ transform: translateX(-.1875rem); }
.mail-logo{ display:flex; align-items:center; gap:0.5rem; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--teal-dark); flex-shrink:0; }
.mail-search{
  flex:1; min-width:0; max-width:40rem; display:flex; align-items:center; gap:0.5rem;
  background: var(--cream-panel); border: 2px solid var(--teal); border-radius: 1.5rem; padding: 0.5rem 1.5rem;
}
.mail-search input{ border:none; background:none; outline:none; flex:1; min-width:0; font-size:1rem; color:var(--ink); font-family:var(--font-body); }
.mail-header-right{ margin-left:auto; flex-shrink:0; }
.xp-chip{ background:var(--yellow); color:var(--ink); font-weight:700; padding:.5rem 1rem; border-radius:1.25rem; font-family:var(--font-display); }

.mail-body{ flex:1; display:flex; overflow:hidden; padding: 0 2rem 1rem; gap:1.5rem; }
.mail-sidebar{ width:13.75rem; display:flex; flex-direction:column; gap:1rem; padding-top:0.5rem; flex-shrink:0; }
.side-btn{
  display:flex; align-items:center; gap:1rem; background: var(--cream); border:none; border-radius: var(--radius-md);
  padding: 1rem 1rem; font-size:1.0625rem; font-weight:700; color:var(--ink); cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; position:relative;
  box-shadow: var(--shadow-sm); transition: transform .12s ease;
}
.side-btn:hover{ transform: translateY(-2px); }
.side-btn.active{ background: var(--purple); color:#fff; }
.side-btn:nth-child(1){ background:#d9c9ef; }
.side-btn:nth-child(1).active{ background:var(--purple); color:#fff; }
.side-btn:nth-child(2){ background:#f6dfa8; }
.side-icon{ font-size:1.25rem; }
.badge-count{ margin-left:auto; background:var(--danger); color:#fff; border-radius:50%; width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center; font-size:1rem; }

.mail-panel{ flex:1; background: var(--cream-panel); border: .1875rem solid var(--teal); border-radius: var(--radius-lg); overflow-y:auto; padding: 0.5rem; }
.mail-list{ display:flex; flex-direction:column; }
.mail-item{
  display:flex; align-items:center; gap:1rem; padding: 1rem 1.5rem; border-bottom: 2px solid var(--cream-deep);
  cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; font-family:inherit;
}
.mail-item:hover{ background: var(--cream-deep); }
.mail-item.unread{ background: rgba(245,197,68,0.16); }
.mail-item .avatar-circle{ width:2.75rem;height:2.75rem; }
.mail-item-name{ font-weight:700; flex:1 1 10rem; min-width:0; }
.mail-item-preview{ color: var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 5rem; min-width:0; }
.tag{ padding:0.25rem 1rem; border-radius:.75rem; font-size:1rem; font-weight:700; color:#fff; flex-shrink:0; }
.tag.novice{ background: var(--success); }
.tag.intermediate{ background: var(--orange); }
.tag.advanced{ background: var(--coral-dark); }
.tag.expert{ background: var(--purple); }
.unread-dot{ width:.75rem;height:.75rem; border-radius:50%; background: var(--danger); flex-shrink:0; }
.mail-item.locked{ opacity:.5; cursor:not-allowed; }
.mail-item.completed .mail-item-name::after{ content:" ✓"; color:var(--success); }
.empty-state{ padding:4rem 1.5rem; text-align:center; color:var(--ink-faint); font-size:1.125rem; }

.content-panel{ padding: 1.5rem; }
.content-panel.hidden{ display:none; }

.taskbar{
  height: calc(4rem + env(safe-area-inset-bottom, 0px));
  background: var(--mint-deep); display:flex; align-items:center; flex-shrink:0; gap:1rem;
  padding: 0 max(1.5rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1.5rem, env(safe-area-inset-left));
  border-top: .1875rem solid var(--ink);
}
/* Plain icon buttons, not chips — these are navigation, not primary
   actions, so they shouldn't visually compete with the currency/clock
   status chips they share the bar with. */
.taskbar-btn{
  background:none; border:none; border-radius:.625rem; width:2.5rem;height:2.5rem; font-size:1.1875rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
  box-shadow:none; color: var(--ink-soft); display:flex; align-items:center; justify-content:center;
  transition: background .12s ease, color .12s ease;
}
.taskbar-btn:hover, .taskbar-btn:focus-visible{ background: rgba(58,46,57,0.1); color: var(--ink); }
.taskbar-btn.active{ background: var(--teal); color:#fff; }
/* The one primary CTA on the bar — a bold outlined pill with its own label,
   same "chunky cartoon button" language as the desktop icons. */
.taskbar-btn-primary{
  width:auto; gap:.5rem; padding:0 1rem; border-radius:1.5rem; background: var(--coral);
  border: .1875rem solid var(--ink); box-shadow: 0 .1875rem 0 var(--ink); color:#fff; font-size:1.0625rem;
}
.taskbar-btn-primary:hover, .taskbar-btn-primary:focus-visible{ background: var(--coral-dark); color:#fff; transform: translateY(-1px); }
.taskbar-btn-label{
  font-family: var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.02em; text-transform:uppercase;
}
.taskbar-spacer{ flex:1; }
.taskbar-clock{
  background: var(--cream); padding:0.5rem 1rem; border-radius: .875rem; font-weight:700;
  border: .1875rem solid var(--ink); box-shadow: 0 .1875rem 0 var(--ink);
  white-space:nowrap; flex-shrink:0;
}

/* =====================================================
   MODALS (generic)
===================================================== */
.modal-overlay{
  position:fixed; inset:0; background: rgba(40,32,40,0.55); display:flex; align-items:center; justify-content:center;
  z-index: 100; padding: 1.5rem; animation: overlayFadeIn .18s ease;
}
.modal-overlay.hidden{ display:none; }
.modal-overlay.closing{ animation: overlayFadeOut .22s ease forwards; }
@keyframes overlayFadeIn{ from{ background: rgba(40,32,40,0); } to{ background: rgba(40,32,40,0.55); } }
@keyframes overlayFadeOut{ from{ background: rgba(40,32,40,0.55); } to{ background: rgba(40,32,40,0); } }
.modal-overlay:not(.hidden) .modal-card,
.modal-overlay:not(.hidden) .mail-detail-card,
.modal-overlay:not(.hidden) .confirm-card,
.modal-overlay:not(.hidden) .compose-card,
.modal-overlay:not(.hidden) .preview-frame,
.modal-overlay:not(.hidden) .gacha-reveal-card{
  animation: modalPopIn .22s cubic-bezier(.25,.9,.35,1.25);
}
.modal-overlay.closing .modal-card,
.modal-overlay.closing .mail-detail-card,
.modal-overlay.closing .confirm-card,
.modal-overlay.closing .compose-card,
.modal-overlay.closing .preview-frame,
.modal-overlay.closing .gacha-reveal-card{
  animation: modalPopOut .2s ease forwards;
}
@keyframes modalPopIn{ from{ opacity:0; transform: scale(.92) translateY(.625rem); } to{ opacity:1; transform: scale(1) translateY(0); } }
@keyframes modalPopOut{ from{ opacity:1; transform: scale(1) translateY(0); } to{ opacity:0; transform: scale(.94) translateY(.375rem); } }
.reduce-motion .modal-overlay, .reduce-motion .modal-overlay *{ animation: none !important; }
.modal-card{
  position:relative; background: var(--cream-panel); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width: 40rem; width:100%; padding: 2rem 2rem; max-height: 88vh; overflow-y:auto;
}
.mail-detail-close{
  position:absolute; top:1rem; right:1rem; z-index:2; background:rgba(58,46,57,0.08); border:none; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
  width:2.125rem; height:2.125rem; border-radius:50%; font-size:1rem; color: var(--ink); transition: background .12s ease;
}
.mail-detail-close:hover, .mail-detail-close:focus-visible{ background: rgba(58,46,57,0.18); }
.mail-detail-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.avatar-circle{ width:3.75rem;height:3.75rem; border-radius:50%; background:#cfe3ea; display:flex; align-items:center; justify-content:center; font-size:1.625rem; flex-shrink:0; }
.avatar-circle img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.mail-detail-level-tag{ font-size:1rem; font-weight:700; color: var(--teal-dark); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.mail-detail-body{ line-height:1.7; font-size:1.0625rem; white-space:pre-line; }
.mail-detail-attachment{ margin-top:1rem; }
.attachment-chip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--cream-deep); padding:0.5rem 1rem; border-radius:.625rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; color:var(--teal-dark); font-weight:700; }
.mail-detail-actions{ display:flex; justify-content:flex-end; gap:1rem; margin-top:1.5rem; }

.btn{ border:none; border-radius: 1.375rem; padding: 1rem 2rem; font-weight:700; font-size:1rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; font-family: var(--font-display); box-shadow: var(--shadow-sm); transition: transform .1s ease; }
.btn:hover{ transform: translateY(-2px); }
.btn-ghost{ background: var(--cream-deep); color: var(--ink); }
.btn-accept{ background: var(--teal); color:#fff; }
.btn-yes{ background: var(--success); color:#fff; }
.btn-no{ background: var(--danger); color:#fff; }
.btn-send{ background: #3d5ce4; color:#fff; }
.btn-save{ background: var(--coral); color:#fff; }

/* Can be opened from within the mail-detail OR compose modal, so it must
   always stack above them regardless of DOM order. */
#modal-preview{ z-index:110; }
.preview-frame{ position:relative; }
.preview-close{ position:absolute; top:-1.125rem; right:-1.125rem; width:2.25rem;height:2.25rem; border-radius:50%; background:#fff; border:none; font-size:1rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; box-shadow: var(--shadow-md); z-index:20; }

.confirm-card{ background: var(--cream-panel); border-radius: var(--radius-lg); padding: 2rem 2.5rem; box-shadow: var(--shadow-lg); text-align:center; }
.confirm-card p{ font-family: var(--font-display); font-size:1.25rem; margin: 0 0 1.5rem; }
.confirm-actions{ display:flex; gap:1.5rem; justify-content:center; }

.compose-card{ background: var(--cream-panel); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width:45rem; width:100%; padding: 2rem 2rem; }
.compose-to{ font-weight:700; font-size:1.125rem; margin-bottom:1rem; }
.compose-body{
  width:100%; min-height:13.75rem; font-family: var(--font-body); font-size:1rem; line-height:1.7;
  white-space:pre-wrap; outline:none; cursor:url("../assets/sprites/cursor-text.png") 12 12, text; padding:0.5rem .25rem; border-radius:.5rem; color:var(--ink);
  /* The real caret is meaningless here (content is rebuilt from composeState
     on every tick, not actually edited in place) and resets to the start of
     the element each rebuild — visible as a second blinking cursor sitting
     at the front while the real .type-cursor tracks the actual reveal point. */
  caret-color: transparent;
}
.compose-body:focus-visible{ box-shadow: 0 0 0 .1875rem rgba(155,127,212,0.35); }
.compose-body .ghost{ color: rgba(58,46,57,0.28); }
.compose-body .type-cursor{
  display:inline-block; width:2px; margin:0 1px; background: var(--ink); vertical-align:-.1875rem; height:1.05em;
  animation: caretBlink 1s step-end infinite;
}
.reduce-motion .compose-body .type-cursor{ animation:none; }
@keyframes caretBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
.compose-hint{ font-size:1rem; color: var(--ink-soft); margin-top:0.5rem; min-height:1rem; }
.compose-attach-row{ display:flex; align-items:center; gap:0.5rem; margin-top:1rem; flex-wrap:wrap; position:relative; }
.attach-btn{
  background: var(--cream-deep); border:none; border-radius:1.25rem; padding:.5rem 1rem; font-weight:700; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
  font-family: var(--font-body); font-size:1rem; color: var(--ink);
}
.attach-btn:hover{ background:#e8dcc4; }
.attach-popover{
  position:absolute; top:calc(100% + .375rem); left:0; z-index:5; background:#fff; border-radius:.625rem;
  box-shadow: var(--shadow-md); padding:0.5rem; width:max-content;
}
.attach-popover.hidden{ display:none; }
.attach-option{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; background:none; border:none;
  padding:0.5rem 1rem; border-radius:.5rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; font-family:inherit; font-size:1rem; font-weight:700; color:var(--ink);
}
.attach-option:hover{ background: var(--cream-deep); }
.attach-option-sub{ font-size:1rem; font-weight:600; color: var(--ink-faint); }
#compose-attachment-chip{ cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; }
#modal-compose .btn-send{ margin-top:1.5rem; display:block; margin-left:auto; }
#modal-compose .btn-send:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* =====================================================
   EDITOR
===================================================== */
#screen-editor.active{ display:flex; }
.editor-topbar{
  display:flex; align-items:center; gap:0.5rem; padding: 1rem 1.5rem; background: var(--cream); flex-wrap:wrap; flex-shrink:0;
}
.edit-mode-chip{ background: var(--yellow); padding:.5rem 1rem; border-radius:.625rem; font-weight:700; box-shadow: var(--shadow-sm); }
.editor-tools-left, .editor-tools-center, .editor-tools-right{ display:flex; gap:.5rem; flex-wrap:wrap; }
.editor-tools-center{ margin-left:auto; margin-right:auto; }

/* Three zones — identity+history / view aids / output — separated by real
   gap instead of borders, so grouping reads from whitespace, not boxes. */
.editor-topbar{ gap:1.5rem; }
.editor-topbar-zone{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }

.tool-btn{
  background: var(--cream-panel); border: 2px solid var(--cream-deep); border-radius: .625rem; padding: .5rem 1rem; font-weight:700;
  cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; font-size:1rem; color:var(--ink); box-shadow: var(--shadow-sm);
}
.tool-btn.active{ background: var(--teal); color:#fff; border-color: var(--teal-dark); }
.tool-btn.btn-save{ background: var(--coral); color:#fff; }

/* Grid/Snap/Guides/Hint read as "one toolset" — a single pill-shaped shell
   with its own border/shadow, holding plain borderless buttons inside
   rather than four individually-boxed chips competing for attention. */
.tool-pill{
  background: var(--cream-panel); border: 2px solid var(--cream-deep); border-radius: .875rem;
  padding: .25rem; gap:4px; box-shadow: var(--shadow-sm);
}
.tool-pill .tool-btn{ background:none; border:none; box-shadow:none; border-radius:.5625rem; padding:0.5rem 1rem; }
.tool-pill .tool-btn.active{ background: var(--teal); color:#fff; }
.tool-pill-divider{ width:1px; align-self:stretch; background: var(--cream-deep); margin:4px 4px; }

/* ---- Dismissible onboarding hint ----
   Floats over the top of the canvas viewport itself rather than taking its
   own row between the topbar and the canvas — a live overlay, not a banner
   that pushes content down. Lives inside .editor-canvas-wrap (not the
   pannable/zoomable .editor-canvas), so it stays put on screen regardless
   of pan or zoom. */
.editor-hint-pill{
  position:absolute; top:.875rem; left:50%; transform:translateX(-50%); z-index:50;
  display:inline-flex; align-items:center; gap:0.5rem;
  background: var(--yellow); color: var(--ink); font-weight:700; font-size:1rem;
  padding:.5rem 0.5rem .5rem 1rem; border-radius:1.25rem; box-shadow: var(--shadow-md);
  max-width: calc(100% - 1.75rem);
}
.editor-hint-pill.hidden{ display:none; }
.hint-pill-dismiss{
  background: rgba(0,0,0,0.1); border:none; border-radius:50%; width:1.25rem;height:1.25rem; flex-shrink:0;
  font-size:1rem; line-height:1; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; color: var(--ink); display:flex; align-items:center; justify-content:center;
}
.hint-pill-dismiss:hover{ background: rgba(0,0,0,0.18); }

.typescale-popover{
  position:absolute; top:6rem; right:1.5rem; z-index:60; width:16.25rem; background: var(--cream-panel);
  border: 2px solid var(--purple); border-radius: var(--radius-md); padding:1rem; box-shadow: var(--shadow-lg);
}
.typescale-popover[hidden]{ display:none; }
.typescale-popover h4{ margin:0 0 .5rem; font-family:var(--font-display); }
.grid-settings-popover{ left:1.5rem; right:auto; width:15rem; }
.grid-settings-popover .field-group{ margin-bottom:1rem; }
.grid-snap-toggle{ display:flex; align-items:center; gap:.5rem; margin:0; font-size:1rem; font-weight:600; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; }
.grid-snap-toggle input{ width:1rem; height:1rem; margin:0; }

/* Issues popover — the Inspector's "Problems list": same shell as the other
   editor popovers, just wider since each row carries real explanatory text. */
.issues-panel{ width:20rem; max-height:60vh; overflow-y:auto; }
.issues-empty{ margin:0; color: var(--ink-soft); font-size:1rem; }
.issues-list{ display:flex; flex-direction:column; gap:.5rem; }
.issue-row{
  display:flex; gap:0.5rem; text-align:left; background: var(--cream); border:none;
  border-radius:.5rem; padding:0.5rem 1rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; font-family:inherit; color:var(--ink);
  transition: background .12s ease;
}
.issue-row:hover, .issue-row:focus-visible{ background: var(--cream-deep); }
.issue-row-icon{ font-size:1rem; flex-shrink:0; }
.issue-row-body{ font-size:1rem; line-height:1.4; }
.issue-row-tip{ color: var(--ink-soft); margin-top:0.25rem; font-size:1rem; }
.grid-settings-popover .field-group:last-child{ margin-bottom:0; }
.grid-settings-popover input[type=range]{ width:100%; }
.field-hint{ font-size:1rem; color: var(--ink-faint); margin-top:.25rem; }
#zoom-badge{ cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; min-width:4.375rem; text-align:center; }
.zoom-control{ display:flex; align-items:center; gap:.25rem; }
.zoom-step-btn{ width:2.125rem; padding:.5rem 0; text-align:center; font-size:1rem; line-height:1; font-weight:800; }

/* "⋯ Tools" only exists to open the mobile bottom sheet below — on desktop
   the tools it would open are already sitting inline in the toolbar. */
.mobile-more-btn{ display:none; flex-shrink:0; }

/* ---- Mobile "more tools" bottom sheet ----
   Canva/mobile-editor pattern: secondary tools (grid, snap, guides, hint,
   zoom, live score) live here on small/short screens instead of permanently
   occupying toolbar rows, so the canvas — the thing actually being edited —
   gets the screen by default. Opened on demand, closed by tapping the
   backdrop or the tools button again. */
.mobile-tools-overlay{
  position:fixed; inset:0; z-index:150; background: rgba(40,32,40,0.5);
  display:flex; align-items:flex-end; justify-content:center; animation: overlayFadeIn .18s ease;
}
.mobile-tools-overlay.hidden{ display:none; }
.mobile-tools-overlay.closing{ animation: overlayFadeOut .2s ease forwards; }
.mobile-tools-sheet{
  width:100%; max-width:40rem; max-height:70vh; overflow-y:auto; background: var(--cream-panel);
  border-radius: 1.375rem 1.375rem 0 0; box-shadow: var(--shadow-lg); padding: 0.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  animation: sheetSlideUp .22s cubic-bezier(.25,.9,.35,1.15);
}
.mobile-tools-overlay.closing .mobile-tools-sheet{ animation: sheetSlideDown .18s ease forwards; }
@keyframes sheetSlideUp{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
@keyframes sheetSlideDown{ from{ transform: translateY(0); } to{ transform: translateY(100%); } }
.reduce-motion .mobile-tools-sheet{ animation:none; }
.mobile-tools-sheet-handle{ width:2.5rem; height:.3125rem; background: var(--cream-deep); border-radius:.25rem; margin: 0 auto 1rem; }
.mobile-tools-sheet-title{ font-family: var(--font-display); font-weight:700; font-size:1rem; margin-bottom:1rem; text-align:center; }
.mobile-tools-sheet-grid{ display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; }
.mobile-tools-sheet-grid .tool-btn{ flex:1 1 auto; min-width:6.875rem; }
.mobile-tools-sheet-grid .live-score-chip, .mobile-tools-sheet-grid .issues-chip{ flex-basis:100%; }
.mobile-tools-sheet-grid .zoom-control{ flex-basis:100%; justify-content:center; }

.editor-main{ flex:1; display:flex; overflow:hidden; background: var(--cream-deep); position:relative; }
/* Pan + zoom are both handled entirely via a translate()+scale() transform
   on #editor-canvas itself (see editor.js), not native scrolling — so this
   is just a fixed, clipping viewport onto that transformed layer. */
.editor-canvas-wrap{ flex:1; overflow:hidden; position:relative; padding: 2rem; touch-action:none; }
.editor-canvas-wrap.panning{ cursor:url("../assets/sprites/cursor-grabbing.png") 12 12, grabbing; user-select:none; }
.editor-canvas-wrap.panning *{ cursor:url("../assets/sprites/cursor-grabbing.png") 12 12, grabbing !important; }
.editor-canvas{ position:absolute; left:0; top:0; background:#fff; box-shadow: var(--shadow-lg); overflow:hidden; touch-action:none; }
.guide-layer{ position:absolute; inset:0; pointer-events:none; z-index:999; }

/* Mission control keeps the learning loop visible without making the canvas
   feel like a dashboard. It presents the one or two skills that count now,
   then gives the player a direct route to the next unresolved issue. */
.mission-panel{
  width:15rem; background:var(--cream-panel); border-left:.1875rem solid var(--teal); padding:1rem; overflow-y:auto; flex-shrink:0;
}
.mission-panel h2{ margin:.25rem 0 .5rem; font-family:var(--font-display); font-size:1.25rem; line-height:1.1; }
.mission-panel p{ margin:0 0 1rem; color:var(--ink-soft); font-size:1rem; line-height:1.45; }
.mission-kicker{ color:var(--teal-dark); font-size:1rem; font-weight:800; letter-spacing:.1em; }
.mission-panel ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.mission-objective{ display:flex; gap:.5rem; align-items:flex-start; padding:0.5rem 0.5rem; border-radius:.625rem; background:var(--cream); font-size:1rem; font-weight:700; }
.mission-objective > span:first-child{ width:1rem; text-align:center; color:var(--ink-faint); }
.mission-objective.complete > span:first-child{ color:var(--success); }
.mission-objective.mastered{ background:#eef7f0; }
.mission-objective.mastered > span:first-child{ color:var(--yellow-dark); }
.mission-objective small{ display:block; color:var(--ink-soft); font-size:1rem; font-weight:600; margin-top:4px; }
.mission-focus-btn{ width:100%; margin-top:1rem; border:0; border-radius:.625rem; padding:0.5rem 1rem; background:var(--teal); color:#fff; font:700 1rem var(--font-body); cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; }
.mission-focus-btn:hover,.mission-focus-btn:focus-visible{ background:var(--teal-dark); }
.mission-reward{ margin-top:1rem; background:var(--yellow); border-radius:.625rem; padding:0.5rem; text-align:center; font-size:1rem; font-weight:800; }

.guide-layer{ --grid-opacity: 0.35; }
.guide-layer.show-grid{ background-image:
  linear-gradient(rgba(80,150,220,var(--grid-opacity)) 1px, transparent 1px),
  linear-gradient(90deg, rgba(80,150,220,var(--grid-opacity)) 1px, transparent 1px);
}

.el{ position:absolute; cursor:url("../assets/sprites/cursor-move.png") 12 12, move; user-select:none; display:flex; }
/* The outline's visual centerline sits (outline-offset + outline-width/2)
   OUTSIDE the element edge — i.e. at -(2 + 1) = -.1875rem in the same direction
   CSS `left`/`top` use, so a `left`/`top` value there is *inside* the
   element, not on the ring. A handle's own `left`/`top` sets its near edge,
   so to land the handle's CENTER on that -.1875rem line it needs to start a
   further half-diameter out: -3 - (8/2) = -.4375rem. */
.el.selected{ outline: 2px solid var(--purple); outline-offset:2px; }
/* Hover affordance — a light dashed outline shows an element is actually
   editable before you click it, so it's never a guessing game which parts
   of the design respond and which are just structural background/cards. */
.el:not(.selected):not([data-locked="1"]):hover{ outline: 2px dashed var(--purple); outline-offset:2px; }
.el[data-locked="1"]{ cursor:url("../assets/sprites/cursor-arrow.png") 2 2, default; }
.el-handle{ display:none; position:absolute; width:.5rem;height:.5rem; background:#fff; border:2px solid var(--purple); border-radius:50%; }
.el.selected .el-handle{ display:block; }
.el-handle.nw{ top:-.4375rem; left:-.4375rem; cursor:nwse-resize; }
.el-handle.ne{ top:-.4375rem; right:-.4375rem; cursor:nesw-resize; }
.el-handle.sw{ bottom:-.4375rem; left:-.4375rem; cursor:nesw-resize; }
.el-handle.se{ bottom:-.4375rem; right:-.4375rem; cursor:nwse-resize; }
.el-handle.n{ top:-.4375rem; left:calc(50% - .25rem); cursor:ns-resize; }
.el-handle.s{ bottom:-.4375rem; left:calc(50% - .25rem); cursor:ns-resize; }
.el-handle.w{ left:-.4375rem; top:calc(50% - .25rem); cursor:ew-resize; }
.el-handle.e{ right:-.4375rem; top:calc(50% - .25rem); cursor:ew-resize; }

.before-overlay{
  position:absolute; inset:0; z-index:1000; pointer-events:none;
  box-shadow: inset 0 0 0 .1875rem var(--yellow);
}
.before-badge{
  position:absolute; top:.5rem; left:.5rem; background: var(--yellow); color: var(--ink);
  font-family: var(--font-display); font-weight:700; font-size:1rem; padding:.25rem 0.5rem; border-radius:.5rem;
  box-shadow: var(--shadow-sm); letter-spacing:.04em;
}

.el.hint-highlight{ outline: .1875rem dashed var(--yellow-dark); outline-offset:.25rem; animation: hintPulse 1s ease-in-out 4; z-index:998; }
@keyframes hintPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,197,68,0.6); }
  50%{ box-shadow:0 0 0 .625rem rgba(245,197,68,0); }
}
.reduce-motion .el.hint-highlight{ animation:none; }

/* One-shot teaching flash — every editable element pulses once when a
   level opens, so "what's clickable" is answered immediately rather than
   left for the player to discover by randomly hovering around. */
.el.intro-flash{ animation: introFlash 0.9s ease-out; }
@keyframes introFlash{
  0%{ outline: .1875rem solid var(--purple); outline-offset:.3125rem; }
  100%{ outline: .1875rem solid transparent; outline-offset:.3125rem; }
}
.reduce-motion .el.intro-flash{ animation:none; }

.guide-line{ position:absolute; background: #ff3d9a; }
.guide-line.v{ width:1px; top:0; bottom:0; }
.guide-line.h{ height:1px; left:0; right:0; }
/* The canvas-center guide (as opposed to guides snapping to other elements'
   edges) is drawn bold so the middle of the composition stands out while
   dragging something toward it. */
.guide-line.center.v{ width:2px; margin-left:-0.5px; }
.guide-line.center.h{ height:2px; margin-top:-0.5px; }
.measure-label{ position:absolute; background:var(--ink); color:#fff; font-size:1rem; padding:4px 0.5rem; border-radius:.25rem; white-space:nowrap; }
.grading-target-box{
  position:absolute; pointer-events:none; box-sizing:border-box;
  border:2px solid #df3f91; background:rgba(255,105,180,.12);
  border-radius:0; box-shadow:none; z-index:3;
}

/* Inspector issue badge: a small corner flag rather than a border wrapping
   the whole element — enough to notice, not enough to drown out the design
   underneath it. The real explanation only appears on hover/focus, same
   "learn by poking at it" idea as the rest of the editor's affordances. */
.issue-flag{
  position:absolute; transform: translate(-40%,-40%); width:1.125rem; height:1.125rem;
  display:flex; align-items:center; justify-content:center; cursor:help; z-index:1001;
  pointer-events:auto; /* .guide-layer is pointer-events:none so guides never block the canvas — this badge opts back in */
}
.issue-flag-dot{
  width:1.125rem; height:1.125rem; border-radius:50%; background: var(--danger); color:#fff;
  font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 2px #fff, var(--shadow-sm); animation: issueFlagPop .2s ease-out;
}
@keyframes issueFlagPop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
.reduce-motion .issue-flag-dot{ animation:none; }
.issue-tooltip{
  display:none; position:absolute; top:100%; left:0; margin-top:0.5rem; z-index:7;
  background: var(--ink); color:#fff; font-size:1rem; line-height:1.45; padding:.5rem 0.5rem;
  border-radius:.5rem; width:max-content; max-width:15rem; box-shadow: var(--shadow-lg); text-align:left;
}
.issue-tooltip hr{ border:none; border-top:1px solid rgba(255,255,255,0.2); margin:0.5rem 0; }
.issue-tooltip-tip{ color: var(--mint); margin-top:4px; }
.issue-flag:hover .issue-tooltip, .issue-flag:focus-visible .issue-tooltip{ display:block; }

.element-settings{
  width:18.75rem; background: var(--cream-panel); border-left: .1875rem solid var(--purple); padding: 1rem; overflow-y:auto; flex-shrink:0;
}
.element-settings-head{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.element-settings h3{
  margin-top:0; font-family:var(--font-display); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.element-settings-head-actions{ display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.icon-btn{
  background:none; border:none; border-radius:.5rem; width:1.75rem; height:1.75rem; flex-shrink:0; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
  font-size:1rem; color: var(--ink-soft); display:flex; align-items:center; justify-content:center; transition: background .12s ease, color .12s ease;
}
.icon-btn:hover{ background: var(--cream-deep); color: var(--ink); }
/* Only meaningful on the mobile/tablet layout below, where the panel stacks
   under the canvas and competes with it for vertical space — on desktop's
   side-by-side layout there's always room for both, so the button is hidden
   and .collapsed is never applied. */
.settings-collapse-btn{
  display:none; background: var(--cream-deep); border:none; border-radius:.625rem; width:2rem; height:2rem; flex-shrink:0;
  font-size:1rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; color: var(--ink); transition: transform .15s ease;
}
.element-settings:not(.collapsed) .settings-collapse-btn{ transform: rotate(90deg); }
.settings-placeholder{ font-size:1rem; color: var(--ink-soft); line-height:1.5; }
.level-tools-note{
  background: #eef7f0; border: 2px solid var(--success); border-radius:.625rem; padding:0.5rem 1rem;
  font-size:1rem; line-height:1.5; margin-bottom:1rem; color: var(--ink);
}
.level-tools-note b{ font-family: var(--font-display); }
/* Reads as "coming soon", not a warning — plain inline text, no box. */
.level-tools-next{
  font-size:1rem; color: var(--ink-faint); margin: -0.5rem 0 1rem; padding:0;
}
.field-group{ margin-bottom:1rem; }
.field-group label{ display:block; font-size:1rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; margin-bottom:0.5rem; }
.field-group select, .field-group input[type=number], .field-group input[type=text]{
  width:100%; padding:.5rem 0.5rem; border-radius:.5rem; border:2px solid var(--cream-deep); font-family:inherit; font-size:1rem;
}
.field-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.field-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; align-items:center; }

/* Compact X/Y, W/H, P/M rows: the label lives inside the control itself
   instead of a separate heading above it, so three field-groups' worth of
   "Position (X, Y)" / "Width & Height" / "Padding & Margin" section titles
   go away without losing any information. */
.mini-row{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem; }
.mini-field{
  display:flex; align-items:stretch; background:#fff; border:2px solid var(--cream-deep); border-radius:.5rem; overflow:hidden;
}
.mini-field .mini-label{
  display:flex; align-items:center; justify-content:center; background: var(--cream-deep); color:var(--ink-soft);
  font-size:1rem; font-weight:800; text-transform:uppercase; padding:0 0.5rem; flex-shrink:0;
}
.mini-field input{
  border:none; padding:.5rem .5rem; width:100%; min-width:0; font-family:inherit; font-size:1rem; background:transparent; color:var(--ink);
}
.mini-field input:focus{ outline:none; }
.mini-field:focus-within{ border-color: var(--purple); }
.color-row{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.color-row input[type=color]{ width:2.375rem;height:2rem; border:none; border-radius:.375rem; padding:0; background:none; }
.color-row .hex{ font-size:1rem; color:var(--ink-soft); flex:1; }
.contrast-badge{ display:flex; align-items:center; gap:.5rem; background:#fff; border-radius:.5rem; padding:.5rem 0.5rem; font-weight:700; }
.contrast-badge.pass{ color: var(--success); }
.contrast-badge.fail{ color: var(--danger); }
.pos-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.align-actions{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.align-actions button{ flex:1; min-width:2.5rem; background:var(--cream-deep); border:none; border-radius:.375rem; padding:.5rem .25rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; font-size:1rem; }
.section-divider{ border:none; border-top:2px solid var(--cream-deep); margin:1rem 0; }
.opacity-readout{ font-size:1rem; color:var(--ink-soft); text-align:right; }
.typescale-info{ background:#fff; border-radius:.5rem; padding:0.5rem; font-size:1rem; line-height:1.6; }

/* =====================================================
   REPORT SCREEN
===================================================== */
#screen-report.active{ display:flex; }
.report-wrap{ flex:1; display:flex; gap:2rem; padding: 2.5rem; overflow-y:auto; background: var(--cream); }
.report-grade-col{ width:16.25rem; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.grade-stamp{
  width:11.25rem;height:11.25rem; background: var(--orange); clip-path: polygon(50% 0%, 61% 18%, 82% 10%, 82% 32%, 100% 40%, 86% 56%, 100% 72%, 82% 76%, 82% 96%, 61% 86%, 50% 100%, 39% 86%, 18% 96%, 18% 76%, 0% 72%, 14% 56%, 0% 40%, 18% 32%, 18% 10%, 39% 18%);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
}
.grade-stamp #grade-letter{ font-family:var(--font-display); font-size:3.25rem; font-weight:800; color:#fff; }
.xp-gain{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; color: var(--teal-dark); }
.compare-thumbs{ display:flex; gap:.5rem; }
.compare-thumbs .thumb{ width:6.875rem; height:8.75rem; background:#fff; border-radius:.5rem; box-shadow: var(--shadow-sm); overflow:hidden; position:relative; }
.compare-thumbs .thumb span{ position:absolute; bottom:2px; left:0; right:0; text-align:center; font-size:1rem; background:rgba(0,0,0,.5); color:#fff; }

.report-main-col{ flex:1; background: var(--cream-panel); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); }
.report-main-col h2{ font-family:var(--font-display); margin-top:0; }
.score-bars{ display:flex; flex-direction:column; gap:0.5rem; margin: 1.5rem 0; }
.score-bar-row{ display:flex; align-items:center; gap:1rem; }
.score-bar-row .label{ width:9.375rem; font-weight:700; font-size:1rem; }
.score-bar-track{ flex:1; height:.875rem; background: var(--cream-deep); border-radius:.5rem; overflow:hidden; }
.score-bar-fill{ height:100%; background: var(--teal); }
.score-bar-row .val{ width:2.75rem; text-align:right; font-weight:700; font-size:1rem; }

.feedback-list{ display:flex; flex-direction:column; gap:0.5rem; max-height:20rem; overflow-y:auto; }
.feedback-item{ display:flex; gap:1rem; padding: 1rem 1rem; border-radius:.625rem; background:#fff; }
.feedback-item.good{ border-left: .3125rem solid var(--success); }
.feedback-item.bad{ border-left: .3125rem solid var(--danger); }
.feedback-item.info{ border-left: .3125rem solid var(--purple); }
.feedback-item .fi-icon{ font-size:1.125rem; }
.feedback-item .fi-body b{ display:block; }
.feedback-item .fi-body .fi-suggest{ color: var(--ink-soft); font-size:1rem; margin-top:.25rem; display:none; }
.feedback-list.show-details .fi-suggest{ display:block; }
.report-actions{ display:flex; justify-content:flex-end; gap:1rem; margin-top:1.5rem; }

/* toast */
.toast{
  position:fixed; top:1.5rem; left:50%; transform: translateX(-50%); background: var(--ink); color:#fff; padding:1rem 1.5rem;
  border-radius: .875rem; font-family: var(--font-display); font-weight:700; z-index: 300; box-shadow: var(--shadow-lg);
  text-align:center;
}
.toast.hidden{ display:none; }

/* stats & settings panels */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(10rem,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card{ background:#fff; border-radius:.875rem; padding:1rem; text-align:center; box-shadow: var(--shadow-sm); }
.stat-card .num{ font-family: var(--font-display); font-size:1.75rem; color: var(--teal-dark); }
.stat-card .lbl{ font-size:1rem; color: var(--ink-soft); text-transform:uppercase; font-weight:700; }
.xp-bar-track{ height:1.125rem; background: var(--cream-deep); border-radius:.625rem; overflow:hidden; margin: 0.5rem 0 1.5rem; }
.xp-bar-fill{ height:100%; background: var(--yellow); }
.badges-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.badge-chip{ background:#fff; border-radius:.75rem; padding:0.5rem 1rem; text-align:center; box-shadow: var(--shadow-sm); font-size:1rem; width:5.625rem; }
.badge-chip .badge-emoji{ font-size:1.625rem; display:block; }
.badge-chip.locked{ opacity:.35; }
.history-row{ display:flex; justify-content:space-between; padding:.5rem 1rem; background:#fff; border-radius:.5rem; margin-bottom:0.5rem; font-size:1rem; }

.reduce-motion *{ transition: none !important; animation: none !important; }
/* Honors the OS-level "reduce motion" preference automatically, on top of
   the in-app manual toggle above — a user shouldn't have to find and set
   the same preference twice. */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* =====================================================
   REUSABLE FORM CONTROLS — toggle switch, segmented
   control, slider, styled dropdown, info tooltip
===================================================== */
.toggle-switch{ position:relative; display:inline-block; width:2.875rem; height:1.625rem; flex-shrink:0; }
.toggle-switch input{ opacity:0; width:0; height:0; position:absolute; }
.toggle-switch .track{
  position:absolute; inset:0; background: var(--cream-deep); border-radius:62.4375rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
  transition: background .18s ease; box-shadow: inset 0 1px .1875rem rgba(0,0,0,0.15);
}
.toggle-switch .thumb{
  position:absolute; top:.1875rem; left:.1875rem; width:1.25rem;height:1.25rem; background:#fff; border-radius:50%;
  box-shadow: var(--shadow-sm); transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.toggle-switch input:checked + .track{ background: var(--teal); }
.toggle-switch input:checked + .track .thumb{ transform: translateX(1.25rem); }
.toggle-switch input:focus-visible + .track{ outline: .1875rem solid var(--purple); outline-offset:2px; }

.seg-control{ display:inline-flex; background: var(--cream-deep); border-radius:.75rem; padding:.25rem; gap:4px; flex-wrap:wrap; }
.seg-btn{
  border:none; background:none; padding:.5rem 1rem; border-radius:.5625rem; font-family:var(--font-body); font-weight:700;
  font-size:1rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; color: var(--ink-soft); transition: background .15s ease, color .15s ease;
}
.seg-btn.active{ background:#fff; color:var(--ink); box-shadow: var(--shadow-sm); }
.seg-btn:hover:not(.active){ color:var(--ink); }

.ec-slider{
  -webkit-appearance:none; appearance:none; width:8.75rem; height:.5rem; border-radius:.5rem; background: var(--cream-deep);
  outline:none; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
}
.ec-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:1.25rem;height:1.25rem; border-radius:50%; background: var(--teal);
  box-shadow: var(--shadow-sm); border:.1875rem solid #fff; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; margin-top:-0.5px;
}
.ec-slider::-moz-range-thumb{ width:1.25rem;height:1.25rem; border-radius:50%; background: var(--teal); box-shadow: var(--shadow-sm); border:.1875rem solid #fff; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; }

.select-wrap{ position:relative; display:inline-block; }
.select-wrap::after{ content:'▾'; position:absolute; right:.875rem; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--ink-soft); font-size:1rem; }
.settings-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; background:#fff; border:2px solid var(--cream-deep);
  border-radius:.625rem; padding:0.5rem 2rem 0.5rem 1rem; font-family:inherit; font-size:1rem; font-weight:700; color:var(--ink);
  cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; min-width:10.625rem;
}
.settings-select:focus-visible{ border-color: var(--purple); }

.info-tip{
  position:relative; display:inline-flex; align-items:center; justify-content:center; width:1.0625rem;height:1.0625rem; border-radius:50%;
  background: var(--cream-deep); color: var(--ink-soft); font-size:1rem; font-weight:800; cursor:help; margin-left:0.5rem; flex-shrink:0;
}
.info-tip::after{
  content: attr(data-tip); position:absolute; bottom: calc(100% + .5625rem); left:50%; transform: translateX(-50%) translateY(.25rem);
  background: var(--ink); color:#fff; font-size:1rem; font-weight:600; line-height:1.4; padding:0.5rem 1rem; border-radius:.5625rem;
  width:max-content; max-width:13.75rem; white-space:normal; text-align:left; opacity:0; pointer-events:none;
  transition: opacity .15s ease, transform .15s ease; box-shadow: var(--shadow-md); z-index:20;
}
.info-tip:hover::after, .info-tip:focus-visible::after{ opacity:1; transform: translateX(-50%) translateY(0); }

/* =====================================================
   SETTINGS — tabbed shell, search, Apply/Cancel/Reset
===================================================== */
.settings-shell{ display:flex; flex-direction:column; background: var(--cream-panel); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow:hidden; }
.settings-search-row{ padding:1rem 1.5rem; border-bottom:2px solid var(--cream-deep); flex-shrink:0; }
.settings-search{ display:flex; align-items:center; gap:0.5rem; background:#fff; border:2px solid var(--cream-deep); border-radius:.875rem; padding:0.5rem 1rem; transition:border-color .15s ease; }
.settings-search:focus-within{ border-color: var(--purple); }
.settings-search input{ flex:1; border:none; outline:none; background:none; font-family:inherit; font-size:1rem; color:var(--ink); }
.settings-search .icon-search{ opacity:.6; }
.settings-content{ flex:1; padding:1.5rem 1.5rem; overflow-y:auto; }
.settings-content-single{ display:flex; flex-direction:column; }
.settings-section{ margin-bottom:2rem; }
.settings-section:last-child{ margin-bottom:0; }
.settings-tab-title{ font-family:var(--font-display); margin:0 0 .25rem; font-size:1.1875rem; padding-bottom:.5rem; border-bottom:2px solid var(--cream-deep); }
.settings-tab-desc{ color:var(--ink-soft); font-size:1rem; margin:1rem 0 1rem; }
.settings-card{ background:#fff; border-radius:.875rem; padding:.25rem 1rem; margin-bottom:1rem; box-shadow: var(--shadow-sm); }
.settings-item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--cream-deep); flex-wrap:wrap; }
.settings-item:last-child{ border-bottom:none; }
.settings-item-label{ display:flex; align-items:center; font-weight:700; font-size:1rem; }
.settings-item-text{ min-width:10rem; }
.settings-item-desc{ font-size:1rem; color: var(--ink-soft); margin-top:4px; font-weight:500; }
.settings-item-control{ flex-shrink:0; display:flex; align-items:center; gap:0.5rem; }
.slider-readout{ font-size:1rem; font-weight:700; color: var(--ink-soft); min-width:2.375rem; text-align:right; }
.settings-danger-card{ border:2px solid var(--danger); background:#fff6f6; }
.settings-danger-card .settings-item-label{ color: var(--danger); }
.settings-testing-card{ border:2px solid var(--teal); background:#f2fbf9; }
.settings-testing-card .settings-item-label{ color: var(--teal-dark); }
.settings-footer{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.5rem; border-top:2px solid var(--cream-deep); background: var(--cream); flex-shrink:0; flex-wrap:wrap; }
.settings-footer .footer-group{ display:flex; gap:0.5rem; align-items:center; }
.settings-dirty-note{ font-size:1rem; color: var(--orange-dark); font-weight:700; opacity:0; transition: opacity .15s ease; }
.settings-dirty-note.show{ opacity:1; }
.settings-search-results{ display:flex; flex-direction:column; gap:0.5rem; }
.settings-no-results{ text-align:center; color: var(--ink-faint); padding:3rem 0; font-size:1rem; }
.btn-sm{ padding:0.5rem 1.5rem; font-size:1rem; }
.btn-apply{ background: var(--teal); color:#fff; }
.btn-apply:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* =====================================================
   CURRENCY DISPLAYS
===================================================== */
.currency-chip{ background:var(--yellow); color:var(--ink); font-weight:700; padding:.5rem 1rem; border-radius:1.25rem; font-family:var(--font-display); }
.taskbar-currency{
  background: var(--cream); padding:0.5rem 1rem; border-radius: .875rem; font-weight:700; font-family:var(--font-display); color: var(--ink);
  border: .1875rem solid var(--ink); box-shadow: 0 .1875rem 0 var(--ink);
  white-space:nowrap; flex-shrink:0;
}

/* =====================================================
   SHOP / WARDROBE / GACHA
===================================================== */
.shop-tabs{ display:flex; gap:0.5rem; margin-bottom:1.5rem; }
.shop-tab-btn{
  background:#fff; border:2px solid var(--cream-deep); border-radius:1rem; padding:0.5rem 1.5rem; font-family:var(--font-display);
  font-weight:700; font-size:1rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; color: var(--ink-soft);
}
.shop-tab-btn.active{ background: var(--purple); border-color: var(--purple); color:#fff; }

.upgrades-hero{
  background:linear-gradient(135deg, var(--teal-dark), var(--purple)); color:#fff; border-radius:var(--radius-lg); padding:2rem;
  text-align:center; box-shadow:var(--shadow-md); margin-bottom:1.5rem;
}
.upgrades-hero h2{ margin:0 0 .5rem; font-family:var(--font-display); }
.upgrades-hero p{ max-width:35rem; margin:0 auto 1rem; font-size:1rem; line-height:1.5; }
.upgrade-list{ display:flex; flex-direction:column; gap:1rem; }
.upgrade-card{ display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:.875rem; background:#fff; box-shadow:var(--shadow-sm); border:2px solid transparent; }
.upgrade-card.owned{ border-color:var(--success); background:#eef7f0; }
.upgrade-icon{ width:3rem; height:3rem; border-radius:.875rem; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.5625rem; flex-shrink:0; }
.upgrade-copy{ flex:1; min-width:0; }
.upgrade-copy h3{ margin:0 0 .25rem; font-family:var(--font-display); font-size:1.0625rem; }
.upgrade-copy p{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.4; }
.upgrade-buy-btn{ border:0; border-radius:.625rem; background:var(--teal); color:#fff; padding:0.5rem 1rem; font:700 1rem var(--font-body); cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; white-space:nowrap; }
.upgrade-buy-btn:hover:not(:disabled),.upgrade-buy-btn:focus-visible:not(:disabled){ background:var(--teal-dark); }
.upgrade-buy-btn:disabled{ background:var(--success); cursor:url("../assets/sprites/cursor-arrow.png") 2 2, default; }
.upgrade-buy-btn.insufficient{ opacity:.5; background:var(--ink-soft); }

/* ---- Cinematic gacha hero banner ---- */
.gacha-hero{
  position:relative; overflow:hidden; border-radius: var(--radius-lg); padding:2rem 2rem; text-align:center; margin-bottom:2rem;
  background: linear-gradient(135deg, #2a1f45 0%, #4a2f7a 45%, #7c3fa8 100%); color:#fff; box-shadow: var(--shadow-lg);
}
.gacha-hero::before{
  content:''; position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 55%), radial-gradient(circle at 75% 70%, rgba(245,197,68,0.25), transparent 50%);
  animation: gachaHeroDrift 9s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes gachaHeroDrift{ from{ transform: translate(-3%,-2%) scale(1); } to{ transform: translate(3%,2%) scale(1.08); } }
.reduce-motion .gacha-hero::before{ animation:none; }
.gacha-hero > *{ position:relative; z-index:1; }
.gacha-hero h2{ margin:0 0 0.5rem; font-family:var(--font-display); font-size:1.5625rem; text-shadow:0 2px .5rem rgba(0,0,0,0.3); }
.gacha-hero p{ margin:0 0 1rem; opacity:.88; max-width:32.5rem; margin-left:auto; margin-right:auto; font-size:1rem; }
.gacha-balance{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28);
  padding:0.5rem 1.5rem; border-radius:1.25rem; font-family:var(--font-display); font-weight:700; font-size:1.1875rem; margin-bottom:1.5rem;
}
.gacha-pull-buttons{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.gacha-pull-btn{
  position:relative; background: var(--coral); color:#fff; border:none; border-radius:1.125rem; padding:1rem 2rem; font-family:var(--font-display);
  font-weight:700; font-size:1.0312rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; box-shadow: 0 .375rem 1.25rem rgba(239,99,119,0.5); transition: transform .12s ease, box-shadow .12s ease;
}
.gacha-pull-btn:hover{ transform: translateY(-.1875rem) scale(1.02); box-shadow: 0 .625rem 1.625rem rgba(239,99,119,0.6); }
.gacha-pull-btn:active{ transform: translateY(-1px) scale(0.98); }
.gacha-pull-btn .sub{ display:block; font-size:1rem; font-weight:600; opacity:.9; margin-top:4px; }
.gacha-pull-btn.x10{ background: var(--purple); box-shadow: 0 .375rem 1.25rem rgba(155,127,212,0.5); }
.gacha-pull-btn.x10:hover{ box-shadow: 0 .625rem 1.625rem rgba(155,127,212,0.6); }
.gacha-pull-btn.insufficient{ opacity:.55; filter:grayscale(.35); }
.gacha-pull-btn.shake{ animation: btnShake .4s ease; }
@keyframes btnShake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-.375rem);} 40%{transform:translateX(.375rem);} 60%{transform:translateX(-.25rem);} 80%{transform:translateX(.25rem);} }
.reduce-motion .gacha-pull-btn.shake{ animation:none; }

.pity-bars{ display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; max-width:32.5rem; margin:0 auto; }
.pity-bar{ flex:1; min-width:11.875rem; text-align:left; }
.pity-bar-label{ display:flex; justify-content:space-between; font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.85; margin-bottom:.25rem; }
.pity-bar-track{ height:.5rem; background:rgba(255,255,255,0.18); border-radius:.5rem; overflow:hidden; }
.pity-bar-fill{ height:100%; border-radius:.5rem; transition: width .3s ease; }
.pity-bar-fill.epic{ background: linear-gradient(90deg, #9b7fd4, #c9a8f5); }
.pity-bar-fill.legendary{ background: linear-gradient(90deg, #f5a623, #ffd97a); }

.gacha-rates{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; font-size:1rem; }
.gacha-rate-pill{ display:flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.14); padding:0.5rem 1rem; border-radius:.75rem; font-weight:700; }
.gacha-rate-dot{ width:.625rem;height:.625rem;border-radius:50%; box-shadow:0 0 .375rem currentColor; }

/* ---- Reward pool gallery ---- */
.pool-heading{ display:flex; align-items:center; gap:1rem; margin: .25rem 0 1rem; }
.pool-heading h3{ margin:0; font-family:var(--font-display); font-size:1rem; }
.pool-heading .count-chip{ font-size:1rem; font-weight:700; color:var(--ink-soft); background:var(--cream-deep); padding:0.25rem 0.5rem; border-radius:.625rem; }

.featured-row{ display:flex; gap:1rem; overflow-x:auto; padding:.5rem .25rem 1rem; margin-bottom:.5rem; }
.featured-card{
  flex-shrink:0; width:9.375rem; background: var(--cream-panel); border-radius:1.125rem; padding:1rem 1rem 1rem; text-align:center;
  border:.1875rem solid var(--rarity-color); box-shadow: 0 0 1.375rem var(--rarity-glow), var(--shadow-sm); position:relative; transition: transform .15s ease;
}
.featured-card:hover{ transform: translateY(-.25rem) scale(1.03); }
.featured-card .featured-tag{
  position:absolute; top:-.5625rem; left:50%; transform:translateX(-50%); background: var(--rarity-color); color:#fff; font-size:1rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:0.25rem 0.5rem; border-radius:.5rem; box-shadow:var(--shadow-sm); white-space:nowrap;
}
.featured-card .fc-icon{ font-size:2.25rem; width:3.875rem;height:3.875rem; margin:.5rem auto .5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow: inset 0 0 0 2px var(--rarity-color); }
.featured-card .fc-name{ font-weight:700; font-size:1rem; margin-bottom:0.25rem; }
.featured-card .fc-rarity{ font-size:1rem; font-weight:700; text-transform:uppercase; color: var(--rarity-color); }
.featured-card .fc-new{ position:absolute; top:.375rem; right:.375rem; background:var(--danger); color:#fff; font-size:1rem; font-weight:800; padding:4px 0.5rem; border-radius:.375rem; }

.rarity-tier{ margin-bottom:1.5rem; }
.rarity-tier-head{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.rarity-tier-dot{ width:.75rem;height:.75rem;border-radius:50%; box-shadow: 0 0 .5rem currentColor; }
.rarity-tier-name{ font-family:var(--font-display); font-weight:700; font-size:1rem; }
.rarity-tier-rate{ font-size:1rem; color:var(--ink-soft); font-weight:700; margin-left:auto; }
.pool-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(7.375rem,1fr)); gap:1rem; }
.pool-card{
  position:relative; background:#fff; border-radius:.875rem; padding:1rem .5rem; text-align:center; border:2px solid var(--cream-deep);
  transition: transform .12s ease, box-shadow .12s ease; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
}
.pool-card:hover{ transform: translateY(-.1875rem); box-shadow: 0 0 0 2px var(--rarity-color), var(--shadow-sm); }
.pool-card .pc-icon{ font-size:1.5rem; width:2.875rem;height:2.875rem; margin:0 auto .5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--cream-panel); }
.pool-card .pc-name{ font-weight:700; font-size:1rem; margin-bottom:4px; line-height:1.25; }
.pool-card .pc-owned{ font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.pool-card .pc-owned.yes{ color: var(--success); }
.pool-card .pc-owned.no{ color: var(--ink-faint); }
.pool-card.owned{ background: #f2fbf6; }

/* ---- Wardrobe / collection gallery ---- */
.wardrobe-progress{ display:flex; align-items:center; gap:1rem; background:#fff; border-radius:.875rem; padding:1rem 1rem; margin-bottom:1.5rem; box-shadow: var(--shadow-sm); }
.wardrobe-progress-track{ flex:1; height:.75rem; background:var(--cream-deep); border-radius:.5rem; overflow:hidden; }
.wardrobe-progress-fill{ height:100%; background: linear-gradient(90deg, var(--teal), var(--purple)); border-radius:.5rem; transition: width .3s ease; }
.wardrobe-progress-label{ font-weight:700; font-size:1rem; white-space:nowrap; }

.wardrobe-categories{ display:flex; gap:0.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.wardrobe-cat-btn{
  background:#fff; border:2px solid var(--cream-deep); border-radius:.875rem; padding:.5rem 1rem; font-weight:700; font-size:1rem;
  cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; color:var(--ink-soft);
}
.wardrobe-cat-btn.active{ background: var(--teal); border-color: var(--teal-dark); color:#fff; }
.wardrobe-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem,1fr)); gap:1rem; }
.wardrobe-item{
  position:relative; background:#fff; border-radius:1rem; padding:1rem 0.5rem; text-align:center; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
  border:.1875rem solid var(--rarity-color, var(--cream-deep)); box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease;
}
.wardrobe-item:hover{ transform: translateY(-.1875rem); box-shadow: 0 0 1rem var(--rarity-glow, transparent), var(--shadow-md); }
.wardrobe-item.locked{ opacity:.5; cursor:url("../assets/sprites/cursor-arrow.png") 2 2, default; filter:grayscale(.6); }
.wardrobe-item.locked:hover{ transform:none; box-shadow: var(--shadow-sm); }
.wardrobe-item.equipped{ box-shadow: 0 0 0 .1875rem var(--rarity-color, var(--teal)), var(--shadow-md); }
.wardrobe-item-preview{ font-size:2.125rem; width:4rem; height:4rem; margin:0 auto 0.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--cream-panel); }
.wardrobe-item-name{ font-weight:700; font-size:1rem; margin-bottom:.25rem; }
.wardrobe-item-rarity{ font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--rarity-color); }
.wardrobe-item-equipped-tag{
  position:absolute; top:-.5rem; right:-.5rem; background: var(--teal-dark); color:#fff; font-size:1rem; font-weight:700;
  padding:0.25rem .5rem; border-radius:.625rem; box-shadow: var(--shadow-sm);
}
.wardrobe-item-slot-count{ text-align:center; font-size:1rem; color:var(--ink-soft); margin-bottom:1rem; }
.wardrobe-item-badge-row{ display:flex; justify-content:center; margin-top:.25rem; }
.owned-badge{ font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:4px 0.5rem; border-radius:.5rem; }
.owned-badge.yes{ background:#e3f7ec; color: var(--success); }
.owned-badge.no{ background:#f2eef5; color: var(--ink-faint); }
.wardrobe-preview-btn{
  position:absolute; bottom:.5rem; right:.5rem; width:1.5625rem;height:1.5625rem; border-radius:50%; background:rgba(255,255,255,0.92); border:none;
  font-size:1rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; box-shadow: var(--shadow-sm); display:flex; align-items:center; justify-content:center; z-index:2;
}
.wardrobe-preview-btn:hover{ background:#fff; transform:scale(1.12); }

/* ---- Cosmetic preview modal (mock desktop) ---- */
.cosmetic-preview-card{ max-width:26.25rem; padding:0; position:relative; overflow:visible; max-height:none; }
.cosmetic-preview-mockup{
  position:relative; height:13.125rem; background: linear-gradient(160deg, var(--mint) 0%, var(--mint-deep) 100%); overflow:hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.mockup-icons{ position:absolute; top:1rem; left:1rem; display:flex; flex-direction:column; gap:1rem; }
.mockup-icon{ width:2.25rem;height:2.25rem; border-radius:.625rem; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.0625rem; box-shadow:var(--shadow-sm); }
.mockup-decor{ position:absolute; bottom:.875rem; left:1rem; display:flex; gap:0.5rem; font-size:1.375rem; }
.mockup-cursor-demo{ position:absolute; bottom:1rem; right:1.25rem; font-size:1.5rem; }
.cosmetic-preview-info{ padding:1.5rem 1.5rem 1.5rem; text-align:center; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--cream-panel); }
.cosmetic-preview-badge{ display:inline-block; font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.25rem 1rem; border-radius:.625rem; margin-bottom:.5rem; color:#fff; }
.cosmetic-preview-info h3{ margin:0 0 0.5rem; font-family:var(--font-display); }
.cosmetic-preview-status{ font-size:1rem; color:var(--ink-soft); margin-bottom:1rem; }

/* ---- Cinematic gacha reveal modal ---- */
.gacha-reveal-card{
  position:relative; background: var(--cream-panel); border-radius: var(--radius-lg); padding: 2.5rem 2.5rem; text-align:center; box-shadow: var(--shadow-lg);
  max-width:23.75rem; width:100%; min-height:17.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border: .25rem solid var(--rarity-color, var(--purple)); transition: box-shadow .2s ease;
}
.gacha-reveal-card #gacha-reveal-content{ width:100%; }
.gacha-reveal-card.rarity-legendary{ animation: legendaryPulse 1.6s ease-in-out infinite; }
@keyframes legendaryPulse{ 0%,100%{ box-shadow: 0 0 0 .5rem var(--rarity-glow), var(--shadow-lg);} 50%{ box-shadow: 0 0 0 1.125rem var(--rarity-glow), var(--shadow-lg);} }
.reduce-motion .gacha-reveal-card.rarity-legendary{ animation:none; }

.gacha-charge-fx{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:2.375rem; gap:1rem; }
.gacha-charge-fx.active{ display:flex; }
.gacha-charge-fx span{ animation: chargeSpin 0.85s ease-in-out infinite; opacity:.85; color: var(--rarity-color, var(--purple)); }
.gacha-charge-fx span:nth-child(2){ animation-delay:.12s; }
.gacha-charge-fx span:nth-child(3){ animation-delay:.24s; }
@keyframes chargeSpin{ 0%,100%{ transform:scale(0.6) rotate(0deg); opacity:.35; } 50%{ transform:scale(1.35) rotate(180deg); opacity:1; } }
.reduce-motion .gacha-charge-fx span{ animation:none; }
.gacha-reveal-card.charging #gacha-reveal-content, .gacha-reveal-card.charging #btn-gacha-continue{ visibility:hidden; }

.gacha-reveal-icon{
  width:6.875rem; height:6.875rem; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; background: var(--cream); box-shadow: 0 0 0 .5rem var(--rarity-glow, rgba(155,127,212,0.3));
  animation: gachaPop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes gachaPop{ 0%{ transform:scale(0.3) rotate(-15deg); opacity:0; } 60%{ transform:scale(1.12) rotate(4deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }
.gacha-reveal-rarity{ font-family: var(--font-display); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--rarity-color, var(--purple)); margin-bottom:0.5rem; }
.gacha-reveal-name{ font-size:1.25rem; font-weight:700; margin-bottom:.5rem; }
.gacha-reveal-note{ font-size:1rem; color:var(--ink-soft); margin-bottom:1rem; }
.gacha-reveal-pity-note{ font-size:1rem; font-weight:700; color: var(--orange-dark); margin: -0.5rem 0 1rem; }
.gacha-reveal-bonus{ display:inline-flex; align-items:center; gap:0.5rem; background: var(--cream); padding:0.5rem 1rem; border-radius:.75rem; font-weight:700; font-size:1rem; color: var(--teal-dark); margin-bottom:1rem; animation: bonusPop .35s ease; }
@keyframes bonusPop{ from{ transform:scale(0.7); opacity:0;} to{ transform:scale(1); opacity:1;} }
.gacha-reveal-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:0.5rem; margin-bottom:1.5rem; }
.gacha-reveal-grid .mini-item{
  border-radius:.75rem; padding:.5rem .25rem; text-align:center; font-size:1.375rem; background:var(--cream);
  border: 2px solid var(--rarity-color, var(--cream-deep));
}
.gacha-reveal-grid .mini-item .mini-name{ font-size:1rem; font-weight:700; margin-top:.25rem; display:block; color:var(--ink-soft); }
.reduce-motion .gacha-reveal-icon{ animation:none; }

.reveal-burst{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; z-index:0; }
.reveal-burst span{ position:absolute; left:50%; top:50%; font-size:1.25rem; animation: burstFly 0.9s ease-out forwards; }
@keyframes burstFly{ from{ transform:translate(-50%,-50%) scale(0.4); opacity:1; } to{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); opacity:0; } }
.reduce-motion .reveal-burst{ display:none; }

/* =====================================================
   DESKTOP CUSTOMIZATION
===================================================== */
.desktop-decor{ position:absolute; bottom:6.875rem; left:2.5rem; display:flex; gap:1rem; font-size:2.5rem; }
.desktop-decor .decor-item{ filter: drop-shadow(0 .25rem .375rem rgba(0,0,0,0.15)); }

/* UI skin visual effects — a light layer of drifting particles over the
   desktop only, purely decorative. */
.skin-fx-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.skin-fx-particle{ position:absolute; top:-2.5rem; font-size:1.25rem; opacity:.9; animation: fxFall linear infinite; will-change: transform; }
@keyframes fxFall{ from{ transform:translateY(-2.5rem) rotate(0deg); } to{ transform:translateY(110vh) rotate(360deg); } }
.reduce-motion .skin-fx-particle{ animation:none; display:none; }

/* ---- Touch devices: enlarge tap targets regardless of viewport width ----
   Placed before the width/orientation breakpoints below on purpose: those
   are more specific to *this* screen shape and should win the cascade when
   they also set a size for the same element (e.g. a cramped landscape phone
   deliberately sizing the taskbar smaller than this baseline) — equal
   selector specificity means source order decides ties, so this touch
   baseline has to come first for that override to actually take effect. */
@media (pointer: coarse){
  .tool-btn, .btn, .taskbar-btn, .app-back-btn, .desktop-icon, .side-btn,
  .shop-tab-btn, .wardrobe-cat-btn, .seg-btn{
    min-height:2.75rem;
  }
  .btn{ padding:1rem 2rem; }
  .taskbar-btn{ width:3rem; height:3rem; }
  .app-back-btn{ width:2.75rem; height:2.75rem; }
  .wardrobe-preview-btn{ width:2rem; height:2rem; }
  .toggle-switch{ width:3.25rem; height:1.875rem; }
  .toggle-switch .thumb{ width:1.5rem; height:1.5rem; }
  .toggle-switch input:checked + .track .thumb{ transform: translateX(1.375rem); }
  .info-tip{ width:1.375rem; height:1.375rem; }
  /* Resize handles stay visually small (their position math is exact and
     tightly coupled to the .625rem size — see the comment above .el.selected)
     but get a much larger invisible hit-box layered on via ::before, which
     doesn't affect layout or the handle's own centering. */
  .el-handle::before{ content:''; position:absolute; inset:-.6875rem; }
}

/* =====================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first intent, authored as layered overrides on
   top of the desktop-default rules above (the app predates
   this pass) — 56.25rem tablet, 40rem phone, 26.25rem small phone.
===================================================== */
@media (max-width: 900px){
  .mail-sidebar{ width:9.375rem; }
  .editor-main{ flex-direction:column; }
  .editor-canvas-wrap{ min-height:10rem; }
  .mission-panel{ width:100%; border-left:none; border-top:.1875rem solid var(--teal); padding:1rem 1rem; overflow:visible; }
  .mission-panel h2{ font-size:1.125rem; }
  .mission-panel ul{ flex-direction:row; flex-wrap:wrap; }
  .mission-objective{ flex:1 1 11.25rem; }
  .element-settings{
    width:100%; border-left:none; border-top: .1875rem solid var(--purple); max-height:40vh; transition: max-height .18s ease;
  }
  .element-settings.collapsed{ max-height:3.25rem; overflow:hidden; }
  .settings-collapse-btn{ display:block; }
  .report-wrap{ flex-direction:column; }
  .gacha-hero{ padding:1.5rem 1.5rem; }
  .cosmetic-preview-mockup{ height:11.25rem; }
}

/* =====================================================
   COZY NEIGHBORHOOD GAME THEME
   An original, CSS-drawn title street and a bolder outlined interface give
   the studio the cheerful, tactile game-board feeling requested for EyeCon.
===================================================== */
body{
  /* Purple arrow cursor (assets/sprites/arrow.png, cut down to cursor size); tip at 3,2. */
  cursor:url("../assets/sprites/cursor-arrow.png") 2 2, auto;
}
button, [role='button'], a, input[type='range'], select, label{
  cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer;
}

/* Title scene: original neighborhood built from simple shapes rather than a
   copied asset, with the existing Start and Settings interactions preserved. */
#screen-home .desk-scene{ background:linear-gradient(#a9ddf3 0 65%, #dff4fd 65% 68%, #f3bd83 68% 100%); }
#screen-home.active{ background:linear-gradient(#a9ddf3 0 65%, #dff4fd 65% 68%, #f3bd83 68% 100%); }
#screen-home .desk-surface,#screen-home .desk-posters,#screen-home .desk-decor,
#screen-home .plant,#screen-home .tower,#screen-home .keyboard,#screen-home .mouse{ display:none; }
.home-street{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.home-street::before{ content:''; position:absolute; inset:auto 0 0; height:35%; background:linear-gradient(135deg,transparent 0 41%,#e28a4e 41.2% 43%,#ffc68d 43.2% 57%,#e28a4e 57.2% 59%,transparent 59.2%), linear-gradient(#ffd49d,#eaa160); opacity:.95; }
.home-street::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:15%; background:linear-gradient(165deg,#bd6035 0 32%,#d98049 32% 59%,#bd6035 59%); opacity:.62; }
.street-cloud{ position:absolute; width:11.875rem; height:3.625rem; background:#fffdf7; border-radius:3.125rem; opacity:.9; }
.street-cloud::before,.street-cloud::after{ content:''; position:absolute; border-radius:50%; background:#fffdf7; }
.street-cloud::before{ width:5.75rem; height:5.75rem; left:1.625rem; bottom:.8125rem; }.street-cloud::after{ width:4.25rem; height:4.25rem; right:1.25rem; bottom:.5rem; }
.cloud-one{ top:10%; left:30%; }.cloud-two{ top:17%; right:10%; transform:scale(.65); }
.street-building{ position:absolute; bottom:13%; width:24%; height:66%; border:.3125rem solid #254b50; box-shadow:inset 0 0 0 .375rem rgba(255,243,209,.28); }
.street-building i{ position:absolute; width:25%; height:16%; background:#9be0f1; border:.25rem solid #254b50; box-shadow:inset 0 0 0 .1875rem rgba(255,255,255,.35); }
.building-left{ left:-3%; background:#5db18f; border-bottom:0; }.building-left i:nth-child(1){top:15%;left:16%;}.building-left i:nth-child(2){top:42%;left:57%;}.building-left i:nth-child(3){top:57%;left:14%;}.building-left b{ position:absolute; bottom:0; left:0; width:100%; height:22%; background:repeating-linear-gradient(90deg,#f1775c 0 1.5rem,#ffd08d 1.5rem 2.9375rem); border-top:.3125rem solid #254b50; }
.building-mid{ left:21%; height:77%; width:18%; background:#ffae82; border-bottom:0; }.building-mid i:nth-child(1){top:13%;left:22%;}.building-mid i:nth-child(2){top:40%;right:17%;}.building-mid i:nth-child(3){bottom:13%;left:20%;}
.building-right{ right:-4%; width:27%; height:78%; background:#ed7d20; border-bottom:0; }.building-right i:nth-child(1){top:11%;left:20%;}.building-right i:nth-child(2){top:11%;right:20%;}.building-right b{ position:absolute; bottom:0; left:33%; width:37%; height:44%; border:.3125rem solid #254b50; border-bottom:0; border-radius:2.875rem 2.875rem 0 0; background:#23775e; }
.street-tree{ position:absolute; bottom:12%; width:19%; height:58%; }.street-tree i{ position:absolute; bottom:0; left:49%; width:12%; height:58%; background:#884d31; border:.25rem solid #553329; border-radius:50% 50% 0 0; transform:rotate(-8deg); }.street-tree span{ position:absolute; right:0; top:0; width:78%; height:55%; background:#6e9229; border:.3125rem solid #3e5728; border-radius:51% 43% 48% 44%; box-shadow:-2.375rem 1.375rem 0 -.1875rem #7ea132, .9375rem 2.75rem 0 -.25rem #668629; }.tree-left{ left:29%; transform:scale(.78); }.tree-right{ right:5%; }
.street-lamp{ position:absolute; top:21%; width:.5625rem; height:35%; border-radius:.625rem; background:#294c4b; border:.1875rem solid #183745; }.street-lamp::before{ content:''; position:absolute; left:-1.625rem; top:0; width:3.25rem; height:1.0625rem; border:.375rem solid #294c4b; border-bottom:0; border-radius:2.625rem 2.625rem 0 0; }.street-lamp::after{ content:''; position:absolute; top:.8125rem; left:-1rem; width:2.1875rem; height:1.5rem; border:.25rem solid #183745; border-radius:50% 50% 35% 35%; background:#f7d76f; box-shadow:0 0 1.25rem #fff1a9; }.lamp-left{ left:22%; }.lamp-right{ right:29%; transform:scale(.85); }
.street-cat{ position:absolute; left:18%; bottom:13%; width:5.75rem; height:4.125rem; border:.3125rem solid #75372c; border-radius:50% 52% 40% 42%; background:#ec4d2d; transform:rotate(-4deg); }.street-cat::before,.street-cat::after{ content:''; position:absolute; top:-1.5rem; border-style:solid; border-width:0 1.125rem 1.6875rem; border-color:transparent transparent #ec4d2d; }.street-cat::before{ left:.5625rem; transform:rotate(-25deg); }.street-cat::after{ right:.5rem; transform:rotate(25deg); }.street-cat i{ position:absolute; right:-2.8125rem; top:.8125rem; width:3.5625rem; height:2.875rem; border:.5625rem solid #75372c; border-left:0; border-bottom:0; border-radius:0 2.8125rem 0 0; }
.home-game-logo{ position:absolute; z-index:4; top:12%; left:50%; width:min(35rem,78vw); transform:translateX(-50%) rotate(-2deg); text-align:center; color:#fffdf4; filter:drop-shadow(0 .4375rem 0 #183745); }
.home-game-logo .logo-eye{ display:inline-block; width:3.625rem; height:2.6875rem; margin-right:0.5rem; vertical-align:.9375rem; background:#fff; border:.3125rem solid #183745; border-radius:50%; box-shadow:1.8125rem 0 0 -.3125rem #fff,1.8125rem 0 0 -1px #183745; }
.home-game-logo .logo-eye::before{ content:''; display:block; width:1.125rem; height:1.125rem; margin:0.5rem auto; border-radius:50%; background:#183745; box-shadow:1.75rem 0 0 #183745; }
.home-game-logo strong{ display:inline-block; font:800 clamp(4.75rem,12vw,9.375rem)/.7 var(--font-display); letter-spacing:-.07em; color:#fffdf4; -webkit-text-stroke:.5rem #183745; paint-order:stroke fill; text-shadow:0 .5625rem 0 #183745; }
.home-game-logo strong span{ color:#ff9a9a; }.home-game-logo small{ display:block; margin-top:2rem; font:700 clamp(1.25rem,2.7vw,2rem) var(--font-display); letter-spacing:.04em; -webkit-text-stroke:2px #183745; paint-order:stroke fill; }
#screen-home .monitor{ z-index:5; top:61%; width:min(24.375rem,72vw); height:4.875rem; aspect-ratio:auto; background:#fffdf7; border:.25rem solid #183745; border-radius:.1875rem; box-shadow:0 .4375rem 0 rgba(24,55,69,.35); }
#screen-home .monitor-screen{ width:calc(100% - .625rem); height:calc(100% - .625rem); border:0; outline:0; border-radius:0; background:#9cd8eb; }
#screen-home .mini-desktop{ position:relative; border-radius:0; background:#9cd8eb !important; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#183745; }
#screen-home .mini-desktop > *{ display:none; }
#screen-home .mini-desktop::before{ content:'START STUDIO'; font:800 clamp(1.5625rem,4vw,2.3125rem)/1 var(--font-display); letter-spacing:.02em; -webkit-text-stroke:2px #fffdf7; paint-order:stroke fill; text-shadow:0 .1875rem 0 #183745; }
#screen-home .mini-desktop::after{ content:'Continue your design journey'; margin-top:.25rem; font:700 1rem var(--font-body); }
#screen-home .sticky-note{ z-index:5; top:auto; right:50%; bottom:9%; min-width:0; width:min(15rem,55vw); padding:0.5rem 1rem; transform:translateX(50%); border:.1875rem solid #183745; border-radius:.1875rem; background:#f8df8a; color:#183745; box-shadow:0 .3125rem 0 rgba(24,55,69,.35); font:800 1.4375rem var(--font-display); }
#screen-home .sticky-note .pin,#screen-home .sticky-note .note-arrow{ display:none; }
#screen-home .sticky-note:hover,#screen-home .sticky-note:focus-visible{ transform:translateX(50%) translateY(-.1875rem); }

/* Shared play-screen language: pale sky panels, dark teal ink and chunky
   outlined controls. This follows the supplied game's visual hierarchy while
   retaining EyeCon's existing content and accessibility states. */
#screen-desktop .desktop-wallpaper{ background:#bfe3f4 !important; }
#screen-desktop .sky-clouds,#screen-desktop .sky-hills{ display:block; }
#screen-desktop .sky-hills{ height:48%; }.hill{ background:#a4bb49; opacity:1; }.hill-back{ background:#bcd35b; }.hill-front{ background:#a4bb49; }
#screen-desktop .desktop-icon-glyph{ border:.25rem solid #183745; border-radius:.8125rem; box-shadow:0 .3125rem 0 rgba(24,55,69,.3); }
#screen-desktop .desktop-icon-label{ color:#fffdf7; font-family:var(--font-display); font-weight:800; -webkit-text-stroke:.1875rem #183745; paint-order:stroke fill; text-shadow:0 .1875rem 0 #183745; }
#screen-desktop .desktop-watermark{ color:#183745; background:#ecfbaf; border:.1875rem solid #183745; border-radius:.625rem; box-shadow:0 .25rem 0 rgba(24,55,69,.25); }
#screen-shell,#screen-stats,#screen-settings,#screen-shop,#screen-report,#screen-editor{ background-color:#eefaff; background-image:radial-gradient(#c8e3ed 1.5px,transparent 1.5px); background-size:1.375rem 1.375rem; }
.mail-header{ background:rgba(239,250,255,.92); border-bottom:.25rem solid #183745; }.mail-search,.mail-panel,.modal-card,.confirm-card,.compose-card{ border-color:#183745; box-shadow:0 .3125rem 0 rgba(24,55,69,.2); }
.side-btn,.mail-panel,.mission-panel,.element-settings,.settings-card,.upgrade-card,.wardrobe-item,.gacha-hero,.upgrades-hero{ border:.1875rem solid #183745; box-shadow:0 .3125rem 0 rgba(24,55,69,.2); }
.side-btn{ border-radius:.75rem; }.mail-panel{ border-radius:1.125rem; }.taskbar{ background:#efffa5; border-top:.25rem solid #183745; box-shadow:inset 0 .25rem 0 rgba(255,255,255,.6); }
.taskbar-btn-primary,.taskbar-currency,.taskbar-clock{ border:.1875rem solid #183745; border-radius:.5625rem; box-shadow:0 .25rem 0 rgba(24,55,69,.25); }
.btn,.upgrade-buy-btn,.gacha-pull-btn,.settings-footer .btn,.tool-btn.btn-save{ border:.1875rem solid #183745; border-radius:.25rem; box-shadow:0 .3125rem 0 rgba(24,55,69,.28); font-family:var(--font-display); font-weight:800; }
.btn:hover,.upgrade-buy-btn:hover,.gacha-pull-btn:hover,.tool-btn.btn-save:hover{ transform:translateY(-2px); box-shadow:0 .4375rem 0 rgba(24,55,69,.28); }
.editor-topbar{ border-bottom:.25rem solid #183745; }.editor-main{ background:#d9e5df; }.editor-canvas-wrap{ background:#d9e5df; }.edit-mode-chip{ border:.1875rem solid #183745; border-radius:.375rem; }.tool-btn{ border:2px solid transparent; }

@media (max-width:640px){
  .home-game-logo{ top:16%; width:92vw; }.home-game-logo strong{ -webkit-text-stroke-width:.3125rem; }.home-game-logo .logo-eye{ transform:scale(.72); margin-right:-4px; }
  #screen-home .monitor{ top:61%; width:78vw; height:4.375rem; }#screen-home .sticky-note{ bottom:8%; }
  .street-building{ bottom:12%; }.building-mid{ display:none; }.street-tree{ transform:scale(.56); }.tree-left{ left:14%; }.tree-right{ right:-4%; }.street-cat{ transform:scale(.65); left:8%; }
}

/* ---- Phones ---- */
@media (max-width: 640px){
  html{ font-size:calc(16px * var(--ui-scale)); } /* EC-KEEP-PX */

  /* Home screen: the decorative desk scene overlaps itself below ~40rem
     (several props carry min-width floors), so we drop everything but the
     monitor — the only screen with an actual interaction. */
  .tower, .sticky-note, .plant, .mouse{ display:none; }
  .monitor{ width:82%; top:12%; }
  .keyboard{ width:70%; bottom:8%; }
  .monitor-app-popup{ width:94%; height:90%; top:1%; }
  .monitor-app-popup-body .mail-body{ padding:0 1rem 1rem; }
  .monitor-app-popup-body .app-content-wrap{ padding:.5rem 1rem 1rem; }

  /* App headers: back button + title stay put; search collapses to fill
     whatever's left and the logo wordmark drops rather than truncating badly. */
  .mail-header{ gap:1rem; padding-left:1rem; padding-right:1rem; }
  .mail-header{ padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); }
  .mail-logo{ font-size:0; gap:0; }
  .mail-logo .eyecon-logo{ display:none; }
  .mail-logo span{ font-size:1.1875rem; }
  .app-back-btn{ width:2.25rem; height:2.25rem; min-height:0; font-size:1rem; }

  /* Mail: sidebar becomes a horizontal pill strip above the list instead of
     a fixed-width column, so the message list gets the full width back. */
  .mail-body{ flex-direction:column; padding:0 1rem 1rem; gap:1rem; overflow-y:auto; overflow-x:hidden; }
  .mail-sidebar{
    width:100%; flex-direction:row; gap:0.5rem; padding-top:0; overflow-x:auto;
  }
  .side-btn{ flex-shrink:0; padding:1rem 1rem; font-size:1rem; white-space:nowrap; }
  .mail-panel{ overflow-y:visible; flex:none; }
  .mail-item{ padding:1rem 1rem; gap:0.5rem; }
  .mail-item-preview{ display:none; } /* redundant with the subject line at this width */
  .mail-item-name{
    flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .mail-item .avatar-circle{ width:2.25rem; height:2.25rem; font-size:1rem; }
  .tag{ font-size:1rem; padding:.25rem 0.5rem; }

  .app-content-wrap{ padding:.5rem 1rem 1.5rem; }

  /* Settings: content padding + control widths shrink; sliders/selects go
     full-width and drop below their label instead of squeezing beside it. */
  .settings-search-row{ padding:1rem 1rem; }
  .settings-content{ padding:1rem 1rem; }
  .settings-footer{ padding:1rem 1rem; flex-direction:column; align-items:stretch; }
  .settings-footer .footer-group{ justify-content:center; }
  .settings-item{ flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .settings-item-control{ width:100%; }
  .ec-slider{ width:100%; }
  .settings-select{ width:100%; }
  .seg-control{ width:100%; justify-content:space-between; }

  /* Shop / Gacha / Wardrobe */
  .gacha-hero{ padding:1.5rem 1rem; border-radius: var(--radius-md); }
  .upgrades-hero{ padding:1.5rem 1rem; border-radius:var(--radius-md); }
  .upgrade-card{ align-items:flex-start; flex-wrap:wrap; }
  .upgrade-buy-btn{ width:100%; }
  .gacha-hero h2{ font-size:1.3125rem; }
  .gacha-balance{ font-size:1rem; padding:.5rem 1rem; }
  .gacha-pull-buttons{ flex-direction:column; align-items:stretch; }
  .gacha-pull-btn{ width:100%; }
  .pity-bars{ flex-direction:column; gap:1rem; }
  .pity-bar{ min-width:0; }
  .wardrobe-progress{ flex-direction:column; align-items:stretch; text-align:center; }
  .cosmetic-preview-mockup{ height:10rem; }

  /* Editor: secondary tools (grid/snap/guides/hint/zoom/live-score) move into
     the "⋯ Tools" bottom sheet (see editor.js applyToolbarLayout), so what's
     left in the topbar — Edit Mode, Undo/Redo, Hold to Compare, Save — is
     short enough to fit in one row without needing to wrap or eat canvas
     space. overflow-x:auto stays on as a safety net on very narrow phones. */
  .editor-topbar{
    flex-wrap:nowrap; overflow-x:auto; padding:0.5rem 1rem; gap:.5rem;
    -webkit-overflow-scrolling:touch;
  }
  .editor-tools-left, .editor-tools-center, .editor-tools-right, .editor-topbar-zone{ flex-wrap:nowrap; flex-shrink:0; }
  .editor-tools-center{ margin-left:0; margin-right:0; }
  .edit-mode-chip{ flex-shrink:0; white-space:nowrap; }
  .mobile-more-btn{ display:inline-flex; }
  /* Its buttons all relocate into the mobile tools sheet (see
     editor.js applyToolbarLayout), leaving this empty — the pill shell
     and its dividers would otherwise float in the topbar with nothing in them. */
  .editor-tools-center.tool-pill{ background:none; border:none; box-shadow:none; padding:0; gap:0; }
  .tool-pill-divider{ display:none; }
  .tool-btn{ padding:.5rem 0.5rem; font-size:1rem; white-space:nowrap; }
  .live-score-chip{ min-width:4.75rem; }
  .editor-canvas-wrap{ padding:1rem; }
  .mission-panel{ padding:1rem 1rem; }
  .mission-panel p{ margin-bottom:0.5rem; }
  .element-settings{ padding:1rem; max-height:36vh; }
  .typescale-popover{ right:.75rem; left:.75rem; width:auto; top:auto; }
  .grid-settings-popover{ left:.75rem; right:.75rem; bottom:3.75rem; top:auto; width:auto; z-index:160; }

  /* Report screen */
  .report-wrap{ padding:1.5rem 1rem; gap:1.5rem; }
  .report-grade-col{ width:100%; }
  .report-main-col{ padding:1.5rem; width:100%; }
  .score-bar-row .label{ width:6.875rem; font-size:1rem; }

  /* Modals: less padding so content has room to breathe on a narrow screen,
     and every card is allowed to use nearly the full viewport width. */
  .modal-overlay{ padding:1rem; }
  .modal-card{ padding:1.5rem 1.5rem; }
  .confirm-card{ padding:1.5rem 1.5rem; }
  .compose-card{ padding:1.5rem 1rem; }
  .gacha-reveal-card{ padding:2rem 1.5rem; min-height:15rem; }
  .gacha-reveal-icon{ width:5.625rem; height:5.625rem; font-size:2.875rem; }

  .taskbar{ height: calc(3.25rem + env(safe-area-inset-bottom, 0px)); padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); gap:0.5rem; }
  .taskbar-btn{ width:2.25rem; height:2.25rem; min-height:0; font-size:1rem; }
  .taskbar-clock{ padding:0.5rem 0.5rem; font-size:1rem; }
  .taskbar-currency{ padding:0.5rem 0.5rem; font-size:1rem; }

  .desktop-wallpaper{ padding:1.5rem 1.5rem; }
  .desktop-icons{ gap:1.5rem; width:6rem; }
  .desktop-icon-glyph{ font-size:2rem; width:3.75rem; height:3.75rem; }
  .desktop-hint{ bottom:1.5rem; padding:0.5rem 1rem; font-size:1rem; max-width:88vw; text-align:center; }
  /* Decor stickers sit under the icon column on desktop; on a narrow phone
     with a full-height icon list there's no safe bottom-left spot left for
     them, so they move to the bottom-right instead. */
  .desktop-decor{ left:auto; right:1.25rem; bottom:6rem; font-size:1.875rem; gap:1rem; }

  .toast{ left:.75rem; right:.75rem; transform:none; width:auto; top:.75rem; }
}

/* ---- Small phones ---- */
@media (max-width: 400px){
  .monitor{ width:90%; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .badge-chip{ width:5rem; }
  .pool-grid, .wardrobe-grid{ grid-template-columns: repeat(2,1fr); }
  .gacha-reveal-grid{ grid-template-columns: repeat(3,1fr); }
  .featured-card{ width:8.125rem; }
}

/* ---- Short / landscape phones: vertical space is the scarce resource,
   even when there's plenty of width to spare (e.g. a 48.75rem-wide phone
   turned sideways is nowhere near the 40rem "phone" width breakpoint but
   is exactly as height-starved as one). ---- */
@media (max-height: 480px) and (orientation: landscape){
  .desk-scene .monitor{ top:4%; width:46%; }
  .keyboard, .mouse, .tower, .sticky-note, .plant{ display:none; }
  .mail-header, .editor-topbar{ padding-top:0.5rem; padding-bottom:0.5rem; }
  .modal-card, .confirm-card, .compose-card{ max-height:92vh; }
  .gacha-reveal-card{ min-height:0; }

  /* Landscape phones have width to spare but almost no height — so unlike
     the portrait/stacked layout, keep Element Settings as a side column
     (same shape as desktop) rather than stacking it under the canvas,
     which would burn the one dimension that's actually scarce here. It
     still starts collapsed (a slim edge tab) and only widens once you
     select something; see setElementSettingsCollapsed in editor.js. */
  .editor-main{ flex-direction:row; }
  .editor-canvas-wrap{ min-height:0; padding:0.5rem; }
  .element-settings{
    width:13.125rem; max-height:none; height:auto; padding:0.5rem 1rem; overflow-y:auto;
    border-left: .1875rem solid var(--purple); border-top:none; transition: width .18s ease;
  }
  .element-settings.collapsed{ width:2.375rem; padding:0.5rem .25rem; overflow:hidden; }
  .element-settings.collapsed .element-settings-head{ justify-content:center; }
  .element-settings.collapsed .element-settings-head h3,
  .element-settings.collapsed #f-reset-icon,
  .element-settings.collapsed #settings-fields{ display:none; }

  .editor-topbar{ flex-wrap:nowrap; overflow-x:auto; }
  .editor-tools-left, .editor-tools-center, .editor-tools-right, .editor-topbar-zone{ flex-wrap:nowrap; flex-shrink:0; }
  .editor-tools-center{ margin-left:0; margin-right:0; }
  .editor-tools-center.tool-pill{ background:none; border:none; box-shadow:none; padding:0; gap:0; }
  .tool-pill-divider{ display:none; }
  .editor-hint-pill{ top:.5rem; padding:0.5rem .5rem 0.5rem 1rem; font-size:1rem; }
  .mobile-more-btn{ display:inline-flex; }
  .btn-label, .btn-label-full{ display:none; } /* icon-only top bar: undo/redo/edit-mode/compare all read fine from their glyph alone here */
  .edit-mode-chip{ padding:.5rem 0.5rem; }
  .grid-settings-popover{
    left:.75rem; right:.75rem; top:auto; bottom:3.75rem; width:auto; z-index:160;
  }

  /* Taskbar: shrink further than the general phone breakpoint below — this
     is the tightest vertical squeeze the app has to handle, and the clock
     is the one piece of taskbar info that isn't actually load-bearing. */
  .taskbar{ height:auto; padding-top:.25rem; padding-bottom: max(.25rem, env(safe-area-inset-bottom)); gap:0.5rem; }
  .taskbar-btn{ width:2rem; height:2rem; min-height:0; font-size:1rem; }
  .taskbar-currency{ padding:0.25rem 0.5rem; font-size:1rem; }
  .taskbar-clock{ display:none; }
}

/* =====================================================
   ILLUSTRATED OS ART DIRECTION
   The title-screen desk remains its own scene. Every playable screen uses
   the softer, hand-drawn pastel desktop language: cream paper, teal ink,
   lavender workspace, and rounded controls with tangible shadows.
===================================================== */
#screen-desktop .desktop-wallpaper{
  background:#b5a0d0;
}
#screen-desktop .sky-clouds,
#screen-desktop .sky-hills{ display:none; }
#screen-desktop .desktop-watermark{
  top:1.5rem; right:2rem; color:#fff8ee; opacity:.92; font-family:var(--font-hand); font-size:1.5rem;
  text-shadow:0 2px 0 rgba(75,47,83,.18);
}
#screen-desktop .desktop-watermark .eyecon-logo.small .eye{
  width:1.75rem; height:1.375rem; border-color:#fff8ee; background:#fff8ee;
}
#screen-desktop .desktop-watermark .eyecon-logo.small .pupil{ width:.6875rem; height:.6875rem; background:#4b3658; }
#screen-desktop .desktop-icons{ gap:1.5rem; width:7.5rem; }
#screen-desktop .desktop-icon{ gap:0.25rem; padding:.5rem; }
#screen-desktop .desktop-icon-glyph{
  width:4.75rem; height:4.75rem; border:.1875rem solid #d8f0ec; border-radius:1.375rem; box-shadow:0 .3125rem 0 rgba(74,52,84,.22);
}
#screen-desktop .desktop-icon-label{
  font-family:var(--font-hand); font-size:1.0625rem; -webkit-text-stroke:0; color:#fff8ee; text-shadow:0 2px 0 rgba(75,47,83,.26);
}
#screen-desktop .desktop-hint{ display:none; }

#screen-shell,
#screen-stats,
#screen-settings,
#screen-shop,
#screen-report{ background:#fff9f2; }
.mail-header{
  min-height:7.375rem; padding:1.5rem 3.5rem 1rem; gap:2rem; background:#fff9f2;
}
.mail-header .app-back-btn{
  width:3rem; height:3rem; background:#b7e6df; color:#315c62; border:.1875rem solid #73bcb4; box-shadow:0 .25rem 0 rgba(54,97,100,.2);
}
.mail-logo{ gap:1rem; font-family:var(--font-hand); font-size:2.5rem; letter-spacing:.01em; color:#488b8e; }
.mail-logo .eyecon-logo.small{ gap:0; }
.mail-logo .eyecon-logo.small .eye{
  width:3.875rem; height:3.375rem; margin-left:-.5rem; border:.1875rem solid #c2e8e5; background:#fff; box-shadow:none;
}
.mail-logo .eyecon-logo.small .eye:first-child{ margin-left:0; }
.mail-logo .eyecon-logo.small .pupil{ width:1.5625rem; height:1.5625rem; background:#30415d; }
.mail-search{
  max-width:42.5rem; min-height:4.125rem; border:.1875rem solid #8fcfc9; border-radius:2.25rem; padding:0.5rem 1.5rem;
  background:#fffdf8; box-shadow:0 .375rem 0 rgba(99,171,164,.18);
}
.mail-search .icon-search{ font-size:1.5625rem; filter:saturate(.6); }
.mail-search input{ font-family:var(--font-hand); font-size:1.875rem; color:#4b3658; }
.mail-search input::placeholder{ color:#a7aaae; opacity:1; }
.xp-chip,.currency-chip{
  border:2px solid #f0c84d; background:#ffe598; border-radius:.75rem; box-shadow:0 .25rem 0 rgba(182,129,43,.16);
  font-family:var(--font-hand); font-size:1.25rem; padding:0.5rem 1rem;
}
.mail-body{ padding:0 3rem 2rem; gap:2.5rem; }
.mail-sidebar{ width:21.25rem; gap:2rem; padding-top:1.5rem; }
.side-btn{
  min-height:9.375rem; justify-content:flex-start; gap:1.5rem; padding:1.5rem 2rem; border-radius:2.125rem; font-family:var(--font-hand);
  font-size:1.9375rem; color:#40213c; box-shadow:0 .75rem 1rem rgba(87,61,63,.16); transition:transform .15s ease, box-shadow .15s ease;
}
.side-btn:nth-child(1){ background:#dfcee8; }
.side-btn:nth-child(1).active{ background:#d5bfe2; color:#40213c; }
.side-btn:nth-child(2){ background:#ffdb82; }
.side-btn:hover,.side-btn:focus-visible{ transform:translateY(-.25rem) rotate(-.4deg); box-shadow:0 1rem 1.25rem rgba(87,61,63,.18); }
.side-icon{ font-size:2.625rem; }
.badge-count{ width:2.5rem; height:2.5rem; font-size:1.375rem; border:.1875rem solid #fff8ee; box-shadow:0 2px 0 rgba(91,21,42,.2); }
.mail-panel{ border:.25rem solid #73bcb4; border-radius:2.125rem; background:#fffdfa; padding:0 2rem; box-shadow:none; }
.mail-item{ min-height:9.375rem; gap:1.5rem; padding:1.5rem 1rem; border-bottom:.3125rem solid #e2f4f0; }
.mail-item:hover{ background:#fff7e8; }
.mail-item .avatar-circle{ width:4.5rem; height:4.5rem; font-size:2.125rem; border:.1875rem solid #9ed7e2; background:#d9f0f4; }
.mail-item-name{ font-family:var(--font-hand); font-size:1.875rem; color:#41213c; letter-spacing:.01em; }
.mail-item-preview{ font-family:var(--font-hand); font-size:1.5rem; color:#9a979b; }
.tag{ font-family:var(--font-hand); font-size:1.25rem; padding:.5rem 1rem; border-radius:1.125rem; }
.unread-dot{ width:1.875rem; height:1.875rem; }

.taskbar{
  height:calc(5.875rem + env(safe-area-inset-bottom, 0px)); padding:0 2.5rem env(safe-area-inset-bottom); gap:1rem;
  background:#b7e6df; border-top:0; box-shadow:inset 0 2px 0 rgba(255,255,255,.6);
}
.taskbar-btn{ width:3.625rem; height:3.625rem; border-radius:1.125rem; font-size:1.8125rem; color:#417e86; }
.taskbar-btn:hover,.taskbar-btn:focus-visible{ background:#dff4ef; color:#2f6570; }
.taskbar-btn-primary{ width:3.625rem; padding:0; gap:0; background:#fff0b6; border:.1875rem solid #80bcb7; box-shadow:0 .25rem 0 rgba(63,114,114,.2); color:#46757b; }
.taskbar-btn-primary:hover,.taskbar-btn-primary:focus-visible{ background:#fff6cf; color:#46757b; }
.taskbar-btn-label{ display:none; }
.taskbar-currency,.taskbar-clock{ border:0; border-radius:.75rem; box-shadow:0 .25rem 0 rgba(182,129,43,.17); background:#ffe598; padding:0.5rem 1rem; font-family:var(--font-hand); font-size:1.6875rem; color:#342032; }

.modal-overlay{ background:rgba(52,47,46,.58); }
.modal-card,.confirm-card,.compose-card{
  border:.25rem solid #73bcb4; border-radius:2rem; background:#fffaf3; box-shadow:0 .75rem 0 rgba(53,87,87,.18); 
}
/* No explicit width here previously — a flex item with none shrinks to fit
   its content's natural line length, so the card's actual width (and
   therefore every proportion inside it) depended on how the text happened
   to reflow at that particular viewport, not on the viewport itself. Fixed
   at a consistent fraction of the viewport (capped) instead, and the
   type/avatar/padding below now scale continuously with clamp() rather than
   jumping between two fixed sizes at a single breakpoint — both together are
   what made the same modal look cramped, edge-to-edge, or comfortable
   depending on which width it happened to be viewed at. */
.mail-detail-card{
  display:flex; flex-direction:column; width:min(92vw, 70rem);
  max-height:calc(100vh - 3.375rem); padding: clamp(1.5rem,3.5vw,2rem) clamp(1.5rem,6vw,4rem); overflow:hidden;
}
.mail-detail-head{ gap:1.5rem; margin-bottom:2rem; }
.mail-detail-head .avatar-circle{ width:clamp(4rem,9vw,7rem); height:clamp(4rem,9vw,7rem); font-size:clamp(1.75rem,4.5vw,3.25rem); border:.25rem solid #95d4e0; }
.mail-detail-head h2{ margin:0; font-family:var(--font-hand); font-size:clamp(1.75rem,4vw,3rem); }
.mail-detail-level-tag{ font-family:var(--font-hand); font-size:1.1875rem; color:#54999a; }
/* Scrollbar hidden (content still scrolls on overflow, just no visible
   track/arrows cluttering the card) — the fluid width/clamp() sizing above
   keeps the usual client-reply length fitting without needing to scroll at
   any normal resolution anyway. */
.mail-detail-body{
  flex:1; overflow:auto; padding-right:.25rem; font-family:var(--font-hand); font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.4; color:#40213c;
  scrollbar-width:none; -ms-overflow-style:none;
}
.mail-detail-body::-webkit-scrollbar{ display:none; }
.mail-detail-actions{ flex-shrink:0; margin-top:1rem; }
.attachment-chip{ font-family:var(--font-hand); font-size:1.375rem; color:#529999; background:#e7f7f3; border-radius:.75rem; }
.btn{ min-height:3.625rem; border-radius:2rem; padding:0.5rem 2rem; font-family:var(--font-hand); font-size:1.75rem; box-shadow:0 .3125rem 0 rgba(49,68,69,.22); }
.btn-accept{ background:#91d8d0; color:#fff; border:.1875rem solid #63aaa5; }
.btn-yes{ background:#40d973; border:.1875rem solid #25b35b; }
.btn-no{ background:#e53b42; border:.1875rem solid #bd2b37; }
.btn-send{ background:#285bd2; border:.1875rem solid #1e46ac; }
.btn-ghost{ background:#f5df99; color:#422640; border:.1875rem solid #e5c96d; }
.confirm-card{ min-width:27.5rem; border-radius:2rem; }
.confirm-card p{ font-family:var(--font-hand); font-size:2.1875rem; color:#40213c; }
.compose-card{ max-width:76.25rem; min-height:42.5rem; padding:4.5rem 4rem; }
.compose-to{ font-family:var(--font-hand); font-size:2.625rem; color:#40213c; }
.compose-body{ min-height:26.25rem; font-family:var(--font-hand); font-size:1.9375rem; line-height:1.48; color:#40213c; }
.compose-hint{ font-family:var(--font-hand); font-size:1.1875rem; }
.attach-btn{ font-family:var(--font-hand); font-size:1.3125rem; background:#e8f7f2; border:2px solid #83c6be; }

#screen-editor{ background:#fffaf3; }
.editor-topbar{ min-height:6.25rem; padding:1rem 2rem; background:#fffaf3; gap:1rem; }
.edit-mode-chip{ background:#ffe49a; border:2px solid #efc95e; box-shadow:0 .25rem 0 rgba(194,150,50,.16); font-family:var(--font-hand); font-size:1.5rem; padding:0.5rem 1rem; }
.tool-btn{ border:0; border-radius:.75rem; background:#fffdfa; box-shadow:none; font-family:var(--font-hand); font-size:1.3125rem; padding:1rem 1.5rem; color:#40213c; }
.tool-btn.active{ background:#b8e7df; color:#315e65; border:2px solid #70bcb4; }
.tool-btn.btn-save{ background:#fffdfa; color:#40213c; }
.tool-pill{ background:transparent; border:0; box-shadow:none; }
.tool-pill .tool-btn{ background:#fffdfa; border:0; box-shadow:none; }
.tool-pill .tool-btn.active{ background:#b8e7df; }
.live-score-chip,.issues-chip{ display:none; }
.editor-main{ background:#e4e1da; padding:0 1.5rem 1.5rem; }
.editor-canvas-wrap{ background:#e4e1da; padding:1.5rem; }
.editor-canvas{ box-shadow:none; }
.editor-hint-pill{ left:1.875rem; top:1.375rem; transform:none; background:#ffe49a; border-radius:0 .75rem .75rem .75rem; font-family:var(--font-hand); font-size:1.375rem; max-width:13.125rem; padding:1rem 1rem; text-align:center; }
.mission-panel,.element-settings{ background:#fffaf3; border:.1875rem solid #73bcb4; border-radius:1.625rem; margin:1.5rem 0 0; box-shadow:none; }
.mission-panel{ border-color:#e6c45f; }
.mission-panel h2,.element-settings h3{ font-family:var(--font-hand); color:#40213c; }
.mission-objective{ font-family:var(--font-hand); font-size:1.0625rem; }
.mission-focus-btn{ font-family:var(--font-hand); font-size:1.125rem; }

@media (min-width: 901px){
  .editor-main{ position:relative; padding-left:22rem; }
  .editor-canvas-wrap{ order:3; min-width:0; }
  .element-settings{ position:absolute; left:1.5rem; top:0; bottom:1.5rem; width:18.25rem; margin:0; border-left:.1875rem solid #73bcb4; overflow:auto; }
}

@media (max-width: 900px){
  .mail-header{ min-height:unset; padding:1rem; }
  .mail-logo{ font-size:1.75rem; }
  .mail-logo .eyecon-logo.small .eye{ width:2.375rem; height:2.125rem; }
  .mail-logo .eyecon-logo.small .pupil{ width:.9375rem; height:.9375rem; }
  .mail-search input{ font-size:1.375rem; }
  .mail-body{ flex-direction:column; padding:0 1rem 1rem; gap:1rem; overflow-y:auto; overflow-x:hidden; }
  .mail-sidebar{ width:100%; flex-direction:row; gap:1rem; padding-top:.5rem; overflow-x:auto; }
  .side-btn{ min-height:0; flex-shrink:0; padding:1rem 1rem; border-radius:1.25rem; font-size:1.4375rem; white-space:nowrap; }
  .side-icon{ font-size:1.75rem; }
  .mail-panel{ flex:none; overflow-y:visible; padding:0 1rem; border-radius:1.375rem; }
  .mail-item{ min-height:5rem; padding:1rem .25rem; }
  .mail-item-name{ font-size:1.375rem; }
  .mail-item .avatar-circle{ width:3rem; height:3rem; }
  .taskbar{ height:calc(4rem + env(safe-area-inset-bottom, 0px)); padding:0 1rem env(safe-area-inset-bottom); }
  .taskbar-btn{ width:2.625rem; height:2.625rem; font-size:1.3125rem; }
  .taskbar-currency,.taskbar-clock{ padding:0.5rem 0.5rem; font-size:1.125rem; }
  .compose-card{ min-height:0; padding:2rem 1.5rem; }
  .compose-to{ font-size:1.8125rem; }
  .compose-body{ min-height:18.75rem; font-size:1.375rem; }
  .confirm-card{ min-width:0; }
  .editor-topbar{ min-height:0; padding:0.5rem 1rem; }
  .editor-hint-pill{ font-size:1.0625rem; max-width:11.25rem; }
}

/* Final cascade layer for the cozy neighborhood game theme. */
#screen-desktop .sky-clouds,#screen-desktop .sky-hills{ display:block; }
#screen-shell,#screen-stats,#screen-settings,#screen-shop,#screen-report,#screen-editor{ background-color:#eefaff; background-image:radial-gradient(#c8e3ed 1.5px,transparent 1.5px); background-size:1.375rem 1.375rem; }
.mail-header{ background:rgba(239,250,255,.92); border-bottom:.25rem solid #183745; }
.mail-search,.mail-panel,.modal-card,.confirm-card,.compose-card{ border-color:#183745; box-shadow:0 .3125rem 0 rgba(24,55,69,.2); }
.side-btn,.mail-panel,.mission-panel,.element-settings,.settings-card,.upgrade-card,.wardrobe-item,.gacha-hero,.upgrades-hero{ border:.1875rem solid #183745; box-shadow:0 .3125rem 0 rgba(24,55,69,.2); }
.side-btn{ border-radius:.75rem; }.mail-panel{ border-radius:1.125rem; }
.taskbar{ background:#efffa5; border-top:.25rem solid #183745; box-shadow:inset 0 .25rem 0 rgba(255,255,255,.6); }
.taskbar-btn-primary,.taskbar-currency,.taskbar-clock{ border:.1875rem solid #183745; border-radius:.5625rem; box-shadow:0 .25rem 0 rgba(24,55,69,.25); }
.btn,.upgrade-buy-btn,.gacha-pull-btn,.settings-footer .btn,.tool-btn.btn-save{ border:.1875rem solid #183745; border-radius:.25rem; box-shadow:0 .3125rem 0 rgba(24,55,69,.28); font-family:var(--font-display); font-weight:800; }
.editor-topbar{ border-bottom:.25rem solid #183745; }.editor-main,.editor-canvas-wrap{ background:#d9e5df; }.edit-mode-chip{ border:.1875rem solid #183745; border-radius:.375rem; }
@media (max-width:640px){ #screen-home .sticky-note{ display:block; } }

/* Cosmetics can place an inline wallpaper on the title host; the title scene
   deliberately keeps its own sky so its illustrated street remains legible. */
#screen-home .desk-scene{ background:linear-gradient(#a9ddf3 0 65%, #dff4fd 65% 68%, #f3bd83 68% 100%) !important; }
#screen-home .sticky-note{ font-size:0; }
#screen-home .sticky-note::after{ content:'SETTINGS'; font:800 1.4375rem var(--font-display); color:#183745; }

/* The desktop is the player's cozy workstation after the title screen. */
#screen-desktop .desktop-wallpaper{
  padding:0; background:linear-gradient(180deg,#b9e6df 0 66%,#f0c48e 66% 100%) !important;
}
#screen-desktop.active{ background:linear-gradient(180deg,#b9e6df 0 66%,#f0c48e 66% 100%); }
#screen-desktop .sky-clouds,#screen-desktop .sky-hills{ display:none; }
#screen-desktop .desktop-wallpaper::before{
  content:''; position:absolute; z-index:0; left:50%; top:var(--monitor-top); width:var(--monitor-width); height:auto; aspect-ratio:1.65; transform:translateX(-50%);
  border:.6875rem solid #fff7e9; border-radius:2.125rem; background:#fffdf7; box-shadow:0 .9375rem 0 rgba(93,67,57,.16), inset 0 0 0 .1875rem #e6d6be;
}
#screen-desktop .desktop-wallpaper::after{
  content:''; position:absolute; z-index:0; left:50%; top:var(--keyboard-top); width:var(--keyboard-width); height:auto; aspect-ratio:5; transform:translateX(-50%);
  border:.375rem solid #fff7e9; border-radius:1.125rem; background:repeating-linear-gradient(90deg,#f7ede0 0 2.625rem,#fffdf7 2.625rem 3.25rem); box-shadow:0 .5rem 0 rgba(101,70,48,.18);
}
.desktop-desk-props{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hub-tower{ position:absolute; left:5%; bottom:12%; width:13%; height:55%; border:.3125rem solid #254b50; border-radius:1.125rem 1.125rem .75rem .75rem; background:#fff8eb; box-shadow:0 .5rem 0 rgba(84,57,53,.17); }
.hub-tower i{ position:absolute; left:14%; width:72%; height:19%; border-radius:.5rem; background:#a9d7e8; }.hub-tower i:first-child{ top:16%; }.hub-tower i:nth-child(2){ top:43%; }.hub-tower b{ position:absolute; left:50%; bottom:11%; width:3.375rem; height:3.375rem; transform:translateX(-50%); border:.3125rem solid #65adc0; border-radius:50%; background:#b7e6ef; }
.hub-plant{ position:absolute; right:5%; bottom:14%; width:15%; height:42%; }.hub-plant b{ position:absolute; left:16%; right:16%; bottom:0; height:36%; border:.3125rem solid #fff7e9; border-radius:.625rem .625rem 1.625rem 1.625rem; background:#71bfd2; }.hub-plant i{ position:absolute; bottom:28%; width:35%; height:58%; border-radius:50% 50% 50% 9%; background:#6cc45c; border:.1875rem solid #42894e; transform-origin:bottom center; }.hub-plant i:nth-child(1){ left:15%; transform:rotate(-28deg); }.hub-plant i:nth-child(2){ left:39%; height:70%; }.hub-plant i:nth-child(3){ right:13%; transform:rotate(28deg); }
.hub-keyboard{ position:absolute; z-index:1; left:50%; bottom:9%; width:min(41%,35rem); height:14%; transform:translateX(-50%); padding:2.3% 5%; display:flex; flex-direction:column; gap:11%; }.hub-keyboard i{ height:20%; border-radius:.25rem; background:#fff; opacity:.9; }.hub-mouse{ position:absolute; right:16%; bottom:10%; width:4rem; height:5.5rem; border:.3125rem solid #fff7e9; border-radius:45% 45% 54% 54%; background:#fffdf7; box-shadow:0 .4375rem 0 rgba(101,70,48,.16); }
#screen-desktop .desktop-watermark{ z-index:3; top:4%; right:5%; color:#315c62; background:#ffe596; border:.1875rem solid #e1b846; font-size:1.25rem; }
#screen-desktop .desktop-icons{ position:absolute; z-index:3; top:26%; left:50%; width:auto; transform:translateX(-50%); flex-direction:row; gap:clamp(1.5rem,5vw,5rem); }
#screen-desktop .desktop-icon{ min-width:5.5rem; }.desktop-icon-glyph{ background:#fffdf7; }.desktop-icon-label{ color:#315c62; -webkit-text-stroke:0; text-shadow:none; font-size:1.1875rem; }
#screen-desktop .desktop-hint{ z-index:3; display:block; bottom:auto; top:56%; background:#ffe596; border:.1875rem solid #e1b846; border-radius:.75rem; box-shadow:0 .25rem 0 rgba(133,94,42,.16); font-family:var(--font-hand); font-size:1.3125rem; }
.tutorial-mail-pulse .desktop-icon-glyph{ animation:tutorialMailPulse .9s ease-in-out infinite; }
@keyframes tutorialMailPulse{ 50%{ transform:translateY(-.5625rem) scale(1.08); box-shadow:0 0 0 .5rem rgba(255,224,96,.48),0 .5rem 0 rgba(24,55,69,.28); } }

/* Pixel is a persistent first-day guide, not a dismissible tooltip. */
.onboarding-card{ max-width:47.5rem; padding:2rem 2.5rem; display:flex; align-items:center; gap:2rem; border:.3125rem solid #183745; border-radius:1.625rem; background:#fffaf0; }
.guide-character{ position:relative; flex:0 0 10rem; width:10rem; height:11.25rem; border:.3125rem solid #183745; border-radius:48% 48% 42% 42%; background:#ffc783; box-shadow:inset 0 -1.4375rem 0 #ef8e69,0 .4375rem 0 rgba(24,55,69,.23); }
.guide-hair{ position:absolute; inset:.75rem 1rem auto; height:3.4375rem; border-radius:60% 35% 42% 35%; background:#f06f87; transform:rotate(-6deg); }.guide-eye{ position:absolute; top:4.875rem; width:1.5rem; height:1.8125rem; border:.1875rem solid #183745; border-radius:50%; background:#fff; }.guide-eye::after{ content:''; position:absolute; width:.6875rem; height:.8125rem; left:.375rem; top:.4375rem; border-radius:50%; background:#183745; }.guide-eye.one{ left:2.25rem; }.guide-eye.two{ right:2.25rem; }.guide-smile{ position:absolute; left:3.625rem; top:7.6875rem; width:2.375rem; height:1.125rem; border:.1875rem solid #183745; border-top:0; border-radius:0 0 1.875rem 1.875rem; }
.guide-dialogue{ min-width:0; }.guide-name{ color:#2d7f87; font:800 1rem var(--font-display); letter-spacing:.06em; }.guide-dialogue h2{ margin:0.25rem 0 0.5rem; color:#183745; font:800 2.625rem/1 var(--font-display); }.guide-dialogue p{ margin:0 0 1.5rem; color:#3b5e63; font:600 1.3125rem/1.35 var(--font-body); }.onboarding-card .btn{ min-width:12.5rem; background:#9adbed; color:#183745; }
@media (max-width:640px){
  #screen-desktop .desktop-wallpaper::before{ width:78%; height:48%; top:14%; }.hub-tower{ transform:scale(.64); transform-origin:left bottom; }.hub-plant{ transform:scale(.62); transform-origin:right bottom; }.hub-mouse{ display:none; }
  #screen-desktop .desktop-icons{ top:27%; gap:0.5rem; }.desktop-icon-glyph{ width:3.4375rem !important; height:3.4375rem !important; }.desktop-icon-label{ font-size:1rem !important; }.desktop-icon{ min-width:3.625rem; }
  #screen-desktop .desktop-hint{ top:55%; font-size:1rem; width:76%; text-align:center; }.onboarding-card{ padding:1.5rem; flex-direction:column; gap:1rem; text-align:center; }.guide-character{ transform:scale(.75); height:8.5rem; margin:-1rem; }.guide-dialogue h2{ font-size:2rem; }.guide-dialogue p{ font-size:1.125rem; }
}

/* One contained workstation composition. The viewport header stays outside
   this illustration so its controls never collide with the monitor. */
#screen-desktop .desktop-wallpaper{
  container-type:size; width:100%; height:100%; display:flex;
  align-items:center; justify-content:center; padding:6.5rem 1rem 1.5rem;
}
#screen-desktop .desktop-wallpaper::before,
#screen-desktop .desktop-wallpaper::after{ content:none; }
.workstation{
  position:relative; container-type:size; flex:none;
  width:min(96cqw, calc((100cqh - 7.75rem) * 1.5), 87.5rem);
  aspect-ratio:1.5;
}
.workstation::before{
  content:''; position:absolute; left:50%; top:4%; transform:translateX(-50%);
  width:74%; aspect-ratio:1.65; border:clamp(.3125rem,.8cqw,.6875rem) solid #fff7e9;
  border-radius:clamp(1.125rem,2.5cqw,2.125rem); background:#fffdf7;
  box-shadow:0 .625rem 0 #315c6226,inset 0 0 0 2px #e6d6be;
}
.workstation::after{
  content:''; position:absolute; left:50%; top:75%; transform:translateX(-50%);
  width:50%; aspect-ratio:5; border:clamp(.25rem,.5cqw,.4375rem) solid #fff7e9;
  border-radius:clamp(.5rem,1.2cqw,1.125rem);
  background:repeating-linear-gradient(90deg,#f7ede0 0 6%,#fffdf7 6% 8%);
  box-shadow:0 .375rem 0 #65463026;
}
#screen-desktop .hub-keyboard{
  top:77%; bottom:auto; width:46%; height:10%; padding:1% 3%; gap:15%;
}
#screen-desktop .desktop-icons{
  top:37%; width:70%; transform:translate(-50%,-50%);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
}
#screen-desktop .desktop-icon{ min-width:2.75rem; min-height:2.75rem; padding:.5rem 4px; gap:.5rem; }
#screen-desktop .desktop-icon-glyph{
  width:clamp(2.75rem,6.5cqw,5.5rem) !important; height:clamp(2.75rem,6.5cqw,5.5rem) !important;
  font-size:clamp(1.625rem,3.6cqw,2.875rem); border-color:#82b5ae;
  border-radius:clamp(.75rem,1.6cqw,1.375rem);
}
#screen-desktop .desktop-icon-label{
  color:#254b50; -webkit-text-stroke:0; text-shadow:none;
  font-family:var(--font-body); font-size:clamp(1rem,1.6cqw,1.25rem) !important; font-weight:700;
}
#screen-desktop .desktop-icon-badge{ top:0; right:12%; }
#screen-desktop .desktop-hint{
  display:block; top:94%; bottom:auto; width:max-content; max-width:92%;
  font-size:clamp(1rem,1.5cqw,1.1875rem); line-height:1.4; text-align:center; padding:.5rem 1rem;
}
#screen-desktop .hub-tower{ left:0; bottom:8%; width:10%; height:auto; aspect-ratio:.4; transform:none; border-width:clamp(2px,.4cqw,.3125rem); }
#screen-desktop .hub-tower b{ width:42%; height:auto; aspect-ratio:1; border-width:clamp(2px,.4cqw,.3125rem); }
#screen-desktop .hub-plant{ right:0; bottom:8%; width:11%; height:auto; aspect-ratio:.7; transform:none; }
#screen-desktop .hub-plant b{ border-width:clamp(2px,.4cqw,.3125rem); }
#screen-desktop .hub-mouse{ right:13%; bottom:7%; width:4%; height:auto; aspect-ratio:.73; border-width:clamp(2px,.4cqw,.3125rem); }
#screen-desktop .desktop-watermark{
  top:max(1rem,env(safe-area-inset-top)); left: max(1rem,env(safe-area-inset-left)); right:auto;
  min-height:2.75rem; opacity:1; font-size:1.125rem;
}
#screen-desktop .desktop-status-chip{
  top:max(1.25rem,env(safe-area-inset-top)); right:max(1rem,env(safe-area-inset-right));
  min-height:2.25rem; align-items:center; gap:1rem; color:#254b50; background:#fffdf7;
}
@media(max-width:640px){
  .workstation{ width:96cqw; }
  .workstation::before{ width:94%; }
  #screen-desktop .desktop-icons{ width:90%; }
  #screen-desktop .desktop-watermark{ font-size:1rem; gap:0.5rem; }
  #screen-desktop .desktop-watermark .eyecon-logo{ display:none; }
  #screen-desktop .desktop-status-chip{ font-size:1rem; padding:0.5rem .5rem; gap:.5rem; }
  #screen-desktop .hub-tower,#screen-desktop .hub-plant,#screen-desktop .hub-mouse{ display:none; }
  .workstation::after{ top:94%; width:64%; }
  #screen-desktop .hub-keyboard{ top:96%; width:60%; }
  #screen-desktop .desktop-icons{ top:46%; }
  #screen-desktop .desktop-hint{ top:117%; }
}
@media(max-height:540px) and (min-width:641px){
  #screen-desktop .desktop-wallpaper{ padding-top:4rem; }
  .workstation{ width:min(72cqw, calc((100cqh - 6.25rem) * 1.5)); }
  #screen-desktop .desktop-hint{ display:none; }
  #screen-desktop .desktop-watermark .eyecon-logo{ display:none; }
}
@media(pointer:coarse){ .app-back-btn,.taskbar-btn,.tool-btn{ min-width:2.75rem; min-height:2.75rem; } input,select,textarea{ font-size:1rem; } }
.daily-store-hero{ padding:clamp(1.5rem,4vw,3rem); border:2px solid #81b5ad; border-radius:1.5rem; background:linear-gradient(120deg,#d5eee8,#fff0ce); color:#254b50; }
.store-eyebrow{ font-size:1rem; font-weight:800; letter-spacing:.12em; }
.daily-store-hero h2{ font:800 clamp(1.625rem,4vw,2.625rem)/1.15 var(--font-display); margin:1rem 0; }
.daily-store-hero p{ font-size:1.0625rem; margin:0 0 1.5rem; }
.daily-store-hero>span:last-child{ font-size:1rem; }
.store-section-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.5rem 0 1rem; }
.store-section-head h3,.store-section-head h2{ margin:0; }
.daily-store-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; }
.daily-item{ min-width:0; display:flex; flex-direction:column; padding:1rem; border:2px solid #d4ddd6; border-radius:1.125rem; background:#fffdf7; }
.daily-item .wardrobe-item-preview{ width:100%; height:6.875rem; border-radius:.75rem; flex:none; }
.daily-item h4{ font-size:1.0625rem; margin:1rem 0 .25rem; }
.daily-item p{ font-size:1rem; color:#49646a; margin:0 0 1rem; }
.daily-item strong{ margin-top:auto; margin-bottom:1rem; }
.daily-item .btn{ font-size:1rem; min-height:2.75rem; padding:.5rem; border-radius:.625rem; }
.store-preview{ border:0; background:none; color:#315c62; text-decoration:underline; min-height:2.75rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; }
.store-cart-list{ display:grid; gap:1rem; }
.store-cart-row{ display:flex; align-items:center; gap:1rem; padding:1rem; background:#fffdf7; border:2px solid #d4ddd6; border-radius:1.125rem; }
.store-cart-row .wardrobe-item-preview{ width:5rem; height:5rem; flex:none; border-radius:.75rem; }
.store-cart-row>div:nth-child(2){ flex:1; min-width:0; }.store-cart-row h3{ margin:0 0 0.5rem; font-size:1.125rem; }.store-cart-row p{ font-size:1rem; margin:0; }
.store-checkout{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.5rem 0; }
.store-empty{ padding:2.5rem 1.5rem; text-align:center; background:#fffdf7; border-radius:1.125rem; }
.store-history{ border-top:1px solid #c4d8d1; padding:1.5rem 0; }.store-history summary{ cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; min-height:2.75rem; font-weight:700; }
.store-delivery{ text-align:center; width:min(94vw,35rem); padding:3rem 1.5rem; }
#delivery-truck{ font-size:5.375rem; }.shipping{ animation:deliveryDrive .7s ease-in-out infinite alternate; }
@keyframes deliveryDrive{ from{transform:translateX(-2.1875rem)} to{transform:translateX(2.1875rem)} }
@media(prefers-reduced-motion:reduce){ .shipping{animation:none;} }
.reduce-motion .shipping{animation:none;}
@media(max-width:900px){.daily-store-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:640px){.daily-store-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem;}.daily-item{padding:0.5rem;}.store-cart-row{flex-wrap:wrap;gap:1rem;}.store-cart-row .wardrobe-item-preview{width:3.75rem;height:3.75rem;}.store-cart-row>div:nth-child(2){flex-basis:60%;}.store-checkout{align-items:stretch;flex-direction:column;}.shop-tabs{overflow-x:auto;}.shop-tab-btn{flex-shrink:0;}.store-section-head .btn{font-size:1rem;}}

/* The artwork owns the workspace. Tools float without changing its fit scale. */
#screen-editor .editor-main{ padding:0; min-height:0; flex-direction:row; }
#screen-editor .editor-canvas-wrap{ padding:0; min-height:0; min-width:0; width:100%; }
#screen-editor .editor-topbar{ min-height:3.75rem; padding:0.5rem 1rem; gap:.5rem; flex-wrap:nowrap; overflow-x:auto; }
#screen-editor .tool-btn{ min-width:2.5rem; min-height:2.75rem; padding:0.5rem 0.5rem; font-size:1.125rem; }
#screen-editor .edit-mode-chip{ font-size:1rem; padding:0.5rem 0.5rem; }
#screen-editor .element-settings{
  position:absolute; z-index:30; left:auto; right:.75rem; top:.75rem; bottom:auto;
  width:min(18.25rem,calc(100% - 1.5rem)); max-height:calc(100% - 1.5rem);
  margin:0; padding:1rem; overflow:auto; border-radius:1rem;
  box-shadow:0 .375rem 1.5rem #254b5026;
}
#screen-editor .element-settings.collapsed{ width:auto; max-width:15rem; max-height:3.75rem; padding:0.5rem 0.5rem; overflow:hidden; }
#screen-editor .element-settings.collapsed #settings-fields,
#screen-editor .element-settings.collapsed #f-reset-icon{ display:none; }
#screen-editor .element-settings.collapsed h3{ display:block; font-size:1rem; margin:0; }
#screen-editor .settings-collapse-btn{ display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; }
#screen-editor .editor-hint-pill{ top:.75rem; left:.75rem; max-width:min(16.25rem,55%); font-size:1rem; padding:.5rem 0.5rem; }
@media(max-width:900px){
  #screen-editor .element-settings{ top:auto; bottom:.5rem; right:.5rem; width:calc(100% - 1rem); max-height:34%; }
  #screen-editor .element-settings.collapsed{ width:auto; max-height:3.625rem; }
}
@media(max-width:640px){
  #screen-editor .edit-mode-chip{ display:none; }
  #screen-editor .editor-topbar{ gap:0.5rem; justify-content:space-between; }
}

/* Selection is a precise bounding box, independent of artwork radius/zoom. */
#editor-canvas .el.selected{ outline:none; }
#editor-canvas .el.selected::after{
  content:''; position:absolute; inset:calc(-1 * var(--element-border,0px));
  border:calc(1.5 * var(--selection-unit,1px)) solid #9368dc;
  border-radius:0; pointer-events:none; z-index:1;
}
#editor-canvas .el-handle{
  --handle-size:calc(10 * var(--selection-unit,1px));
  width:var(--handle-size); height:var(--handle-size);
  border:calc(2 * var(--selection-unit,1px)) solid #9368dc;
  border-radius:50%; z-index:2; background:#fff;
}
#editor-canvas .el-handle.nw,#editor-canvas .el-handle.ne,#editor-canvas .el-handle.n{ top:calc(-1 * var(--element-border,0px) - var(--handle-size)/2); }
#editor-canvas .el-handle.sw,#editor-canvas .el-handle.se,#editor-canvas .el-handle.s{ bottom:calc(-1 * var(--element-border,0px) - var(--handle-size)/2); }
#editor-canvas .el-handle.nw,#editor-canvas .el-handle.sw,#editor-canvas .el-handle.w{ left:calc(-1 * var(--element-border,0px) - var(--handle-size)/2); }
#editor-canvas .el-handle.ne,#editor-canvas .el-handle.se,#editor-canvas .el-handle.e{ right:calc(-1 * var(--element-border,0px) - var(--handle-size)/2); }
#editor-canvas .el-handle.n,#editor-canvas .el-handle.s{ left:calc(50% - var(--handle-size)/2); }
#editor-canvas .el-handle.e,#editor-canvas .el-handle.w{ top:calc(50% - var(--handle-size)/2); }
@media(pointer:coarse){ #editor-canvas .el-handle::before{ inset:calc(-17 * var(--selection-unit,1px)); } }
#screen-editor .editor-canvas-wrap{ background-color:#e8eee9; background-image:radial-gradient(#bbc9bf 1px,transparent 1px); background-size:1.25rem 1.25rem; }
#screen-editor .editor-canvas{ box-shadow:0 .5rem 2rem #254b501a,0 0 0 1px #254b5020; }
#screen-editor .editor-topbar{ background:#fffdf7; border-bottom:1px solid #cfdbd4; box-shadow:0 .1875rem .75rem #254b500d; }
#screen-editor .tool-pill{ border:1px solid #dedbe8; border-radius:.875rem; padding:4px; background:#f4f1fa; gap:4px; }
#screen-editor .tool-btn{ font-family:var(--font-body); color:#374b48; border-radius:.625rem; }
#screen-editor .tool-btn:hover{ background:#e9e1f7; }
#screen-editor .tool-btn.active{ background:#e3d5fa; border-color:#9368dc; color:#56378c; }
#screen-editor .tool-btn.btn-save{ background:#7852b8; color:white; border:0; box-shadow:0 .1875rem 0 #573b88; font-size:1rem; padding:.5rem 1rem; }
#screen-editor .element-settings{ border:1px solid #c8d8d0; background:#fffdf7; }
#screen-editor .element-settings h3{ font:700 1rem var(--font-body); color:#304c45; margin:0 0 0.25rem; }
.selection-heading{ min-width:0; }.selection-heading small{ display:block; font-size:1rem; color:#587169; }
#screen-editor .element-settings-head{ position:sticky; top:-.75rem; background:#fffdf7; z-index:2; padding:.25rem 0 .5rem; }
#screen-editor .element-settings.collapsed .element-settings-head{ position:static; padding:0; }
#screen-editor .element-settings.collapsed .selection-heading small{ display:none; }
#screen-editor .field-group{ border-bottom:1px solid #edf0eb; padding-bottom:1rem; }
#screen-editor .field-group label{ color:#374f47; }
#screen-editor .element-settings input,#screen-editor .element-settings select{ border-radius:.5rem; }
@media(max-width:640px){ #screen-editor .editor-tools-center.tool-pill{ border:0; padding:0; background:none; } #screen-editor .tool-btn.btn-save{ padding:.5rem 1rem; font-size:1rem; } }

/* Compact desktop dock keeps the artwork in charge. */
#global-taskbar{ height:calc(4.5rem + env(safe-area-inset-bottom,0px)); min-height:0; flex-shrink:0; padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom,0px)); gap:1rem; border-top-width:2px; }
#global-taskbar .taskbar-btn{ width:3.5rem; height:3.5rem; min-width:3.5rem; min-height:3.5rem; font-size:1.75rem; border-width:2px; box-shadow:none; }
#global-taskbar .taskbar-clock{ padding:0.5rem 1rem; font-size:1rem; border-width:2px; box-shadow:none; }

/* =====================================================
   Piko — tutorial guide character
===================================================== */
/* The "dim" is this one box's shadow, not a full-screen overlay — its own
   rect (sized/positioned in JS to match the target) stays fully transparent,
   so whatever's underneath is genuinely on top, not fought over with z-index. */
.piko-hole{
  position:fixed; z-index:150; border-radius:.875rem; pointer-events:none;
  box-shadow:0 0 0 624.9375rem rgba(34,29,38,0.62);
  transition:left .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.piko-hole.hidden{ opacity:0; box-shadow:0 0 0 624.9375rem rgba(34,29,38,0); }
.piko-cursor{
  position:fixed; z-index:153; width:2.25rem; height:2.25rem; font-size:1.875rem; line-height:1; pointer-events:none;
  filter:drop-shadow(0 .1875rem .25rem rgba(0,0,0,.35)); animation:pikoTap 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pikoTap{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(.375rem,-.5rem); } }
.piko-bubble{
  position:fixed; z-index:154; right:clamp(.75rem,3vw,3rem); bottom:6.25rem; left:auto;
  display:flex; align-items:flex-end; gap:1rem; max-width:min(92vw,30rem);
}
.piko-bubble.piko-top{ top:clamp(.75rem,3vw,3rem); bottom:auto; }
.piko-bubble.hidden{ display:none; }
.piko-panel{
  position:relative; background:var(--cream-panel); border:.25rem solid var(--teal); border-radius:1.375rem;
  box-shadow:0 .625rem 0 rgba(58,46,57,.16); padding:1.5rem 1.5rem 1rem; cursor:url("../assets/sprites/cursor-point.png") 9 2, pointer; min-width:13.75rem;
}
.piko-name{ margin:0 0 .5rem; font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.1em; color:var(--teal-dark); }
.piko-line{ margin:0; font-family:var(--font-body); font-weight:700; font-size:1.25rem; line-height:1.5; color:var(--ink); }
.piko-caret{ display:inline-block; margin-left:4px; animation:pikoBlink 750ms step-end infinite; }
.piko-caret.idle{ opacity:0; animation:none; }
@keyframes pikoBlink{ 50%{ opacity:0; } }
.piko-img{ width:clamp(6.25rem,15vw,10rem); height:auto; flex-shrink:0; filter:drop-shadow(0 .375rem .375rem rgba(0,0,0,.2)); }
@media(max-width:640px){
  .piko-bubble{ left:.75rem; right:.75rem; bottom:5rem; flex-direction:column-reverse; align-items:center; gap:0.5rem; }
  .piko-bubble.piko-top{ top:.75rem; }
  .piko-panel{ width:100%; }
  .piko-img{ width:6rem; }
}

.mail-item .avatar-circle,
.mail-detail-head .avatar-circle,
.mail-thread-msg .avatar-circle{
  box-sizing:border-box;
  overflow:hidden;
  border:.1875rem solid #73bcb4;
}