/* Graphics refinement only. Original layout, dimensions, palette and controls
   live in app.css; this layer changes lighting, materials and motion rendering. */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background-image:
    radial-gradient(ellipse at 50% -18%, rgba(165,220,255,.29), rgba(91,171,231,.07) 42%, transparent 67%),
    linear-gradient(180deg, rgba(16,111,191,.02), rgba(2,48,101,.14)),
    url("../assets/doodles-clean.webp?v=3");
  box-shadow: inset 0 0 110px rgba(3,48,96,.11);
}
:root {
  --surface-rim: rgba(189, 229, 255, .55);
  --surface-blue: linear-gradient(155deg, #196fb5, #0d5597 47%, #083c70);
  --control-blue: linear-gradient(180deg, #115b96, #093d6c);
  --control-gold: linear-gradient(180deg, #ffedaa, #ffd45b 38%, #efb42a 78%, #e6a620);
}
@media (max-width: 380px) {
  .shop-tab { font-size: 10px; padding-inline: 3px; gap: 3px; }
  .shop-tab b { flex: none; min-width: 16px; padding: 1px 2px; font-size: 8px; }
  .join-row { grid-template-columns: minmax(0, 1fr); }
  .join-row .btn-join { width: 100%; }
}
.character-render svg { shape-rendering: geometricPrecision; }
.character-render .avatar-art { isolation: isolate; }
.picker-avatar { filter: drop-shadow(0 6px 7px rgba(1, 16, 34, .2)); }
.mascot { filter: drop-shadow(0 4px 2px rgba(2, 30, 58, .18)); }
.login {
  border-color: var(--surface-rim);
  background: radial-gradient(ellipse at 25% 0%, rgba(110,201,255,.24), transparent 48%), var(--surface-blue);
  box-shadow: 0 6px 0 #052c56, 0 18px 40px rgba(2,28,59,.26), inset 0 1px 0 rgba(230,246,255,.55), inset 0 -1px 0 rgba(0,18,43,.2);
}
.play-intro { display: grid; gap: 3px; margin: 0 1px 12px; text-align: left; }
.play-intro strong { color: #fff; font-size: 16px; font-weight: 750; line-height: 1.2; }
.play-intro span { color: #dceeff; font-size: 11px; font-weight: 600; line-height: 1.35; }
.room-invitation { margin: 0 0 12px; padding: 9px 11px; border: 1px solid rgba(255,224,143,.65); border-radius: 10px; background: rgba(3,39,77,.42); text-align: left; }
.room-invitation[hidden] { display: none; }
.room-invitation p { margin: 0; color: #fff1b8; font-size: 12px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.room-invitation button { display: inline-block; min-height: 32px; margin: 3px 0 -3px; padding: 4px 0; border: 0; background: transparent; color: #edf8ff; font: inherit; font-size: 11px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.room-invitation button:hover { color: #fff1b8; }
.room-invitation button:focus-visible { outline: 2px solid #ffe495; outline-offset: 3px; border-radius: 3px; }
.account-intro { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 0 9px; padding: 7px 11px; border: 1px solid rgba(187,226,255,.5); border-radius: 8px; background: rgba(3,41,77,.38); color: #eff8ff; font: inherit; font-size: 12px; font-weight: 700; line-height: 1.25; cursor: pointer; }
.account-intro[hidden] { display: none; }
.account-intro:hover { background: rgba(3,41,77,.6); }
.account-intro:focus-visible { outline: 2px solid #ffe495; outline-offset: 3px; }
.overlay-account-cancel { min-height: 44px; padding: 8px 12px; border: 1px solid rgba(190,228,255,.6); border-radius: 8px; background: #12568d; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.overlay-account-cancel:focus-visible { outline: 2px solid #ffe495; outline-offset: 3px; }
.play-help { margin: 7px 4px 10px; color: #e0effa; font-size: 11px; font-weight: 600; line-height: 1.35; text-align: center; }
.look-sample:empty, .look-layers:empty { display: none; }
.avatar-stage {
  background: radial-gradient(ellipse at 48% 28%, rgba(86,172,238,.34), transparent 62%), radial-gradient(ellipse at 50% 98%, rgba(56,137,219,.21), transparent 48%), linear-gradient(158deg, #0c4e8b, #062d58 68%, #041f40);
  box-shadow: inset 0 1px 0 rgba(151,212,255,.22), inset 0 -12px 25px rgba(0,16,39,.2), 0 6px 16px rgba(2,27,54,.17);
}
.btn { transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease, filter .16s ease; }
#btn-play {
  background: linear-gradient(180deg, #91eb9b 0%, #3db65b 24%, #299a48 52%, #238b40 76%, #20813a 100%);
  box-shadow: inset 0 1px 0 rgba(242,255,239,.8), inset 0 -3px 0 rgba(0,91,34,.22), 0 4px 0 #08763b, 0 8px 14px rgba(0,25,40,.2);
}
#btn-shop, .sku .btn-shop {
  background: var(--control-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,235,.9), inset 0 -3px 0 rgba(142,84,0,.22), 0 4px 0 #9b640a, 0 8px 14px rgba(0,25,40,.2);
}
#btn-private, .btn-join {
  background: linear-gradient(180deg, #81d5ff 0%, #52b7ef 38%, #359bdd 72%, #267fc4 100%);
  color: #082e4c;
  text-shadow: 0 1px 0 rgba(227,247,255,.4);
  box-shadow: inset 0 1px 0 rgba(232,250,255,.7), inset 0 -3px 0 rgba(9,76,133,.22), 0 4px 0 #12558b, 0 8px 14px rgba(0,25,40,.2);
}
.shop-card {
  border-color: var(--surface-rim);
  background: radial-gradient(ellipse at 25% 0%, rgba(110,201,255,.18), transparent 48%), var(--surface-blue);
  box-shadow: 0 25px 80px rgba(0,16,39,.46), 0 7px 0 rgba(2,21,45,.48), inset 0 1px 0 rgba(198,230,255,.38);
}

/* Quiet paper grain keeps letter edges clear, using the existing paper artwork. */
.login input, .shop-search input, .shop-code-row input {
  background-color: #f8faf9;
  background-image: linear-gradient(rgba(250,252,250,.87), rgba(242,247,247,.87)), var(--paper-photo);
  background-size: 100% 100%, var(--paper-size);
  background-blend-mode: normal;
  border-color: rgba(207,233,250,.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(29,67,93,.08), 0 2px 0 rgba(2,31,61,.17);
}
.login input::placeholder, .shop-search input::placeholder, .shop-code-row input::placeholder {
  color: #566674;
  opacity: 1;
}
.login input:focus, .shop-search input:focus, .shop-code-row input:focus {
  border-color: #ffe495;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(255,216,97,.3), 0 2px 0 rgba(2,31,61,.17);
}
#account-submit {
  background: var(--control-gold);
  border-color: #ffeda0;
  color: #482d06;
  text-shadow: 0 1px rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 750;
}
.login-note { color: #e0effa; font-weight: 600; }
.login-field > span { font-weight: 750; text-shadow: none; }
.forgot-password { color: #f0f8ff; font-weight: 700; text-decoration-thickness: 1px; }
.login :is(.btn, .look-tab, .look-reset), .shop-card :is(.btn, .shop-tab, .shop-preview-btn) {
  -webkit-font-smoothing: antialiased;
}
.login .btn, .shop-card .btn { font-weight: 750; }
.look-tab, .shop-tab { font-weight: 700; }
.look-reset, .shop-preview-btn { background: var(--control-blue); color: #e4f3ff; }
.look-off:disabled { opacity: .65; color: #d2e7f7; cursor: default; }
.site-legal-links a { color: #e0effc; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mascot { border-radius: 50%; }
.mascot:focus-visible { outline-width: 2px; outline-offset: 4px; }
.look-chev { padding: 0; }
.look-chev svg, #shop-close svg {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.shop-card #shop-close {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;
  transform: none;
  color: #edf8ff;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.shop-card #shop-close:hover {
  border-color: #b6e2ff;
  background: linear-gradient(180deg, #2177b7, #104e82);
}
.shop-card #shop-close:active { box-shadow: inset 0 2px 4px rgba(0,20,44,.35); }
.shop-card #shop-close:focus-visible { outline: 2px solid #ffe38e; outline-offset: 3px; }
.shop-live {
  background: radial-gradient(ellipse at 24% 34%, rgba(95,184,255,.25), transparent 64%), linear-gradient(150deg, #0a4075, #062852);
  box-shadow: inset 0 1px 0 rgba(183,222,255,.17), inset 0 -12px 24px rgba(0,10,27,.14), 0 5px 16px rgba(0,16,38,.18);
}
.shop-live-avatar { filter: drop-shadow(0 8px 7px rgba(0,15,34,.22)); }
.sku {
  background: linear-gradient(160deg, rgba(255,255,255,.045), transparent 50%), linear-gradient(150deg, #105994, #083966);
  box-shadow: inset 0 1px 0 rgba(180,218,249,.22), inset 0 -1px 0 rgba(0,14,34,.18), 0 4px 10px rgba(0,19,42,.18);
  transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sku:hover { box-shadow: inset 0 1px 0 rgba(215,242,255,.5), 0 6px 18px rgba(0,19,42,.3); border-color: #80c9f8; }
.sku .preview {
  background: radial-gradient(ellipse at 50% 34%, rgba(91,166,229,.3), transparent 64%), linear-gradient(155deg, #0b4377, #06294f);
  box-shadow: inset 0 1px 0 rgba(123,190,240,.12), inset 0 -8px 18px rgba(1,13,30,.16);
}
.sku .preview > svg { filter: drop-shadow(0 5px 4px rgba(0,14,33,.2)); }
.sku.aura-sku .preview { background: radial-gradient(ellipse at 50% 45%, #122b4e, #041327); }
.sku .preview.name-prev { background: radial-gradient(ellipse at 50% 50%, #123c65, #061b37); }
.sku.is-previewing, .sku.selected { border-color: #ffe394; box-shadow: inset 0 0 0 1px rgba(255,221,101,.35), 0 5px 18px rgba(0,19,42,.26); }
.hud { box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 5px 14px rgba(8,30,60,.15), 0 2px 0 rgba(0,0,0,.12); }
.board-stage { box-shadow: 0 3px 0 rgba(5,38,76,.23), 0 9px 20px rgba(2,32,68,.14); }
.tools { box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 3px 8px rgba(2,32,68,.16); }
.ticon { transition: background .12s ease, box-shadow .12s ease, border-color .12s ease; }
.ticon.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 2px 5px rgba(3,41,83,.15); }
.swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #277fb8; }
.sku.preview-paused *, .sku.preview-paused *::before, .sku.preview-paused *::after,
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after { animation-play-state: paused !important; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Restore each purchased name treatment's intended typeface. */
.pname.ice, .nm.ice { font-family: "Fredoka", sans-serif !important; }
.pname.fire, .nm.fire { font-family: "Dekko", cursive !important; }
.pname.neon, .nm.neon { font-family: "Fredoka", sans-serif !important; }
.pname.mint, .nm.mint { font-family: "Dekko", cursive !important; }
.pname.candy, .nm.candy { font-family: "Dekko", cursive !important; }
.pname.royal, .nm.royal { font-family: Georgia, serif !important; }
.pname.ghost, .nm.ghost { font-family: Georgia, serif !important; }
.pname.toxic, .nm.toxic { font-family: "Fredoka", sans-serif !important; }
.pname.matrix, .nm.matrix { font-family: Consolas, "Courier New", monospace !important; }
.pname.honey, .nm.honey { font-family: "Dekko", cursive !important; }
.pname.ink, .nm.ink { font-family: Georgia, serif !important; }
.pname.glitch, .nm.glitch { font-family: Consolas, monospace !important; }
.pname.emerald, .nm.emerald { font-family: Georgia, serif !important; }
.pname.sapphire, .nm.sapphire { font-family: "Fredoka", sans-serif !important; }
.pname.amethyst, .nm.amethyst { font-family: Georgia, serif !important; }
.pname.bronze, .nm.bronze { font-family: Georgia, serif !important; }
.pname.copper, .nm.copper { font-family: "Fredoka", sans-serif !important; }
.pname.pearl, .nm.pearl { font-family: Georgia, serif !important; }
.pname.snow, .nm.snow { font-family: "Dekko", cursive !important; }
.pname.thunder, .nm.thunder { font-family: Consolas, monospace !important; }
.pname.aurora, .nm.aurora { font-family: "Dekko", cursive !important; }
.pname.galaxy, .nm.galaxy { font-family: Georgia, serif !important; }
.pname.holo, .nm.holo { font-family: "Fredoka", sans-serif !important; }
.pname.venom, .nm.venom { font-family: "Fredoka", sans-serif !important; }
.pname.rose, .nm.rose { font-family: Georgia, serif !important; }
.pname.lemon, .nm.lemon { font-family: "Dekko", cursive !important; }
.pname.grape, .nm.grape { font-family: Georgia, serif !important; }
.pname.midnight, .nm.midnight { font-family: Consolas, monospace !important; }
.pname.blush, .nm.blush { font-family: Georgia, serif !important; }
.pname.steel, .nm.steel { font-family: Consolas, monospace !important; }
.pname.retro, .nm.retro { font-family: "Dekko", cursive !important; }
.pname.comic, .nm.comic { font-family: "Fredoka", sans-serif !important; }
.pname.outline, .nm.outline { font-family: Consolas, monospace !important; }
.pname.bubblegum, .nm.bubblegum { font-family: "Fredoka", sans-serif !important; }
.pname.forest, .nm.forest { font-family: Georgia, serif !important; }
.pname.desert, .nm.desert { font-family: "Fredoka", sans-serif !important; }
.pname.slime, .nm.slime { font-family: "Dekko", cursive !important; }
.pname.magma, .nm.magma { font-family: "Fredoka", sans-serif !important; }
.pname.frost, .nm.frost { font-family: Consolas, monospace !important; }
.pname.pulse, .nm.pulse { font-family: "Fredoka", sans-serif !important; }
.pname.wobble, .nm.wobble { font-family: "Dekko", cursive !important; }
.pname.spark, .nm.spark { font-family: Consolas, monospace !important; }
.pname.void, .nm.void { font-family: Georgia, serif !important; }
.pname.ivory, .nm.ivory { font-family: Georgia, serif !important; }
.pname.blood, .nm.blood { font-family: "Fredoka", sans-serif !important; }
.pname.cotton, .nm.cotton { font-family: "Dekko", cursive !important; }

html.motion-off .aura-bits > g { transform: var(--aura-rest, none); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .aura-bits > g { transform: var(--aura-rest, none); opacity: 1; }
}
@media (max-width: 700px) {
  .mascots { width: 100%; max-width: 428px; gap: 2px; }
  .mascot { flex: 0 1 40px; min-width: 0; max-width: 40px; }
  .look-chev { min-width: 44px; }
  .forgot-password { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
  .shop-live-copy { align-self: flex-start; padding-top: 3px; }
  .shop-live-player-name > .nm { padding-block: 1px; margin-block: 0; }
  .shop-live-badge { margin-bottom: 3px; padding-block: 2px; }
  #shop-live-detail { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 18px; margin-top: 2px; font-size: 8px; line-height: 1.1; overflow: hidden; }
}

/* Name-vault artwork stays inside the original avatar-lineup dimensions. */
.deal-lineup .deal-name-samples {
  position: absolute;
  inset: 2px 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 3px;
}
.deal-name-row { display: block; min-width: 0; padding-inline: 3px; overflow: visible; }
.deal-lineup .deal-name-row > .nm {
  display: inline-block;
  max-width: none;
  padding: 2px 0;
  margin: -2px 0;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  transform-origin: 10% 55%;
}
/* Short landscape screens scroll the existing store as one continuous panel. */
@media (max-height: 500px) and (orientation: landscape) {
  .shop-card { overflow-y: auto; overscroll-behavior: contain; }
  .shop-head, .shop-utility, .shop-tabs, .shop-foot { flex-shrink: 0; }
  .shop-skus { flex: 0 0 auto; overflow: visible; max-height: none; }
  .shop-card > .support-x { position: sticky; top: 0; right: 0; flex: 0 0 36px; margin-left: auto; margin-bottom: -36px; z-index: 20; }
}
@media (max-width: 700px) {
  .deal-lineup .deal-name-row > .nm { font-size: 10px; }
}

/* Give the title and preview their own rows on phones with a narrow header. */
@media (max-width: 480px) {
  .shop-head { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; padding-right: 0; gap: 8px; }
  .shop-heading { padding-right: 48px; }
  .shop-kicker { margin-bottom: 3px; font-size: 8px; line-height: 1.3; letter-spacing: .07em; }
  .shop-card h3 { font-size: 26px; line-height: 1.12; }
  .shop-live { width: 100%; min-width: 0; height: 118px; padding: 4px 10px 50px; gap: 10px; }
  .shop-live-avatar { width: 64px; height: 64px; flex-basis: 64px; }
  .shop-live-copy { flex: 1 1 auto; align-self: center; padding-top: 0; }
  .shop-live b, .shop-live span, .shop-live-copy .nm { max-width: 100%; }
  .shop-live b { font-size: 12px; }
  #shop-live-detail { font-size: 9px; max-height: 20px; }
  .shop-preview-btn { font-size: 10px; }
}