/* Study Grove play surface: the "cozy" skin. Loaded last; builds on src/cozy-tokens.css.
   Lime meadow page, cream paper panels with chunky cocoa borders and an offset shadow,
   pixel display type for headings and controls, Outfit for reading, VT323 for numbers. */
:root {
  --paper: var(--cz-meadow);
  --surface: var(--cz-paper);
  --ink: var(--cz-cocoa);
  --muted: var(--cz-cocoa-soft);
  --line: var(--cz-cocoa);
  --green: var(--cz-moss-deep);
  --soft: var(--cz-paper-deep);
  --gold: var(--cz-gold);
  --radius: var(--cz-radius);
  --ui-ink: var(--cz-cocoa);
  --ui-muted: var(--cz-cocoa-soft);
  --ui-paper: var(--cz-paper);
  --ui-line: var(--cz-cocoa);
  --ui-accent: var(--cz-moss-deep);
  --ui-radius: 12px;
  --ui-shadow: var(--cz-shadow-sm);
  font-family: var(--cz-font-body);
  color: var(--cz-cocoa);
}
html { background: var(--cz-meadow); }
body {
  margin: 0;
  color: var(--cz-cocoa);
  font-family: var(--cz-font-body);
  background:
    radial-gradient(circle at 1px 1px, #c9d88a 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--cz-meadow);
}
.skip-link { position: fixed !important; left: 12px !important; top: -120px !important; z-index: 100; background: var(--cz-cocoa); color: var(--cz-paper); font-family: var(--cz-font-display); padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px !important; }

/* ---------- type ---------- */
h1, h2, h3, h4, legend, summary, .eyebrow, .small-label, .journal-tabs button {
  font-family: var(--cz-font-display);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--cz-cocoa);
}
.eyebrow, .small-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: lowercase;
  color: var(--cz-cocoa); background: var(--cz-paper-deep); border: 2px solid var(--cz-cocoa);
  border-radius: 999px; padding: 2px 9px 2px 7px; line-height: 1.3; margin-bottom: 8px;
}
.eyebrow::before, .small-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cz-moss); border: 2px solid var(--cz-cocoa); }
p, li, label, small, td, th { color: var(--cz-cocoa); }
.dialog-intro, .bag-help, .journal-lead { color: var(--cz-cocoa-soft); }
kbd { font-family: var(--cz-font-mono); font-size: 14px; background: var(--cz-paper); color: var(--cz-cocoa); border: 2px solid var(--cz-cocoa); border-bottom-width: 3px; border-radius: 6px; padding: 0 5px; line-height: 1.3; }

/* ---------- buttons & fields ---------- */
.button {
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: var(--cz-border) solid var(--cz-cocoa);
  box-shadow: 0 3px 0 var(--cz-cocoa);
  font-family: var(--cz-font-display);
  font-weight: 500;
  font-size: 15px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 10px;
}
.button:hover:not(:disabled) {
  background: var(--cz-paper-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--cz-cocoa);
  filter: none;
}
.button:active:not(:disabled), dialog button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--cz-cocoa); }
body .button.primary, dialog .button.primary {
  background: var(--cz-cocoa);
  color: var(--cz-paper);
  border-color: var(--cz-cocoa);
  box-shadow: 0 3px 0 var(--cz-cocoa-deep);
}
body .button.primary:hover:not(:disabled) { background: #6c4d43; color: var(--cz-paper); box-shadow: 0 4px 0 var(--cz-cocoa-deep); }
.text-button { font-family: var(--cz-font-display); color: var(--cz-cocoa); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; background: transparent; border: 0; }
.text-button:hover { color: var(--cz-cocoa-deep); background: transparent; }
.round-button {
  width: 40px; height: 40px; min-height: 40px; display: inline-grid; place-items: center;
  background: var(--cz-paper); border: var(--cz-border) solid var(--cz-cocoa); border-radius: 10px; box-shadow: 0 3px 0 var(--cz-cocoa); color: var(--cz-cocoa); padding: 0; font-size: 20px; line-height: 1;
}
.round-button:hover { background: var(--cz-paper-deep); }
dialog button.selected, .journal-tabs button[aria-selected="true"], .journal-tabs button.active {
  background: var(--cz-peach) !important; color: var(--cz-cocoa) !important; border-color: var(--cz-cocoa) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea {
  font-family: var(--cz-font-body); font-size: 15px; color: var(--cz-cocoa);
  background: var(--cz-paper); border: var(--cz-border) solid var(--cz-cocoa); border-radius: 10px; padding: 10px 12px; min-height: 42px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--cz-peach-deep); outline-offset: 2px; }
input[type="checkbox"] { accent-color: var(--cz-moss-deep); width: 20px; height: 20px; }
input[type="range"] { accent-color: var(--cz-moss-deep); }
:where(button, input, select, textarea, summary, a, canvas):focus-visible { outline: 3px solid var(--cz-peach-deep); outline-offset: 3px; }
button[data-glyph]::before { font-family: var(--cz-font-display); }
progress { accent-color: var(--cz-moss-deep); }

/* pixel icons (inline SVG, crisp edges) */
.px-icon { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-size: contain; image-rendering: pixelated; vertical-align: middle; }
.px-cloud { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='5' y='4' width='5' height='1' fill='%235a4038'/%3E%3Crect x='4' y='5' width='1' height='2' fill='%235a4038'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%235a4038'/%3E%3Crect x='11' y='6' width='2' height='1' fill='%235a4038'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%235a4038'/%3E%3Crect x='13' y='7' width='1' height='4' fill='%235a4038'/%3E%3Crect x='1' y='8' width='1' height='3' fill='%235a4038'/%3E%3Crect x='2' y='11' width='11' height='1' fill='%235a4038'/%3E%3Crect x='5' y='5' width='5' height='2' fill='%23fffaee'/%3E%3Crect x='3' y='7' width='8' height='1' fill='%23fffaee'/%3E%3Crect x='2' y='8' width='11' height='3' fill='%23fffaee'/%3E%3Crect x='3' y='9' width='3' height='1' fill='%239fcfe3'/%3E%3C/svg%3E"); }
.px-gear { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='7' y='1' width='2' height='2' fill='%235a4038'/%3E%3Crect x='7' y='13' width='2' height='2' fill='%235a4038'/%3E%3Crect x='1' y='7' width='2' height='2' fill='%235a4038'/%3E%3Crect x='13' y='7' width='2' height='2' fill='%235a4038'/%3E%3Crect x='3' y='3' width='2' height='2' fill='%235a4038'/%3E%3Crect x='11' y='3' width='2' height='2' fill='%235a4038'/%3E%3Crect x='3' y='11' width='2' height='2' fill='%235a4038'/%3E%3Crect x='11' y='11' width='2' height='2' fill='%235a4038'/%3E%3Crect x='5' y='3' width='6' height='10' fill='%235a4038'/%3E%3Crect x='3' y='5' width='10' height='6' fill='%235a4038'/%3E%3Crect x='6' y='4' width='4' height='8' fill='%23fffaee'/%3E%3Crect x='4' y='6' width='8' height='4' fill='%23fffaee'/%3E%3Crect x='7' y='7' width='2' height='2' fill='%235a4038'/%3E%3C/svg%3E"); }
.px-more { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='2' y='6' width='3' height='3' fill='%235a4038'/%3E%3Crect x='7' y='6' width='3' height='3' fill='%235a4038'/%3E%3Crect x='12' y='6' width='3' height='3' fill='%235a4038'/%3E%3C/svg%3E"); }

/* ---------- top bar ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cz-font-display); font-weight: 700; font-size: 22px; letter-spacing: 0; color: var(--cz-cocoa); text-decoration: none; padding: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--cz-cocoa); background: #3c6955; box-shadow: 2px 2px 0 var(--cz-cocoa); display: inline-grid; place-items: center; overflow: hidden; font-size: 0; }
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand-grove { font-weight: 500; color: var(--cz-peach-deep); }

/* ---------- heading row → dock ---------- */

/* ---------- next step ---------- */

/* ---------- world ---------- */
.world-feedback { font-family: var(--cz-font-body); border: var(--cz-border) solid var(--cz-cocoa); border-radius: 12px; background: var(--cz-paper); box-shadow: var(--cz-shadow-sm); }

/* immersive frame: the toolbar floats over the world instead of sitting above it */

/* travel tray, status, journey, companion */

/* ---------- study desk ---------- */

/* ---------- journal view & cards ---------- */
.journal-card, .journal-content, .activity-tile, .shop-item, .person-card, .exploration-tile, .relationship-memory, .task-row, .trial-lesson, .account-status-overview {
  background: var(--cz-paper); border: var(--cz-border) solid var(--cz-cocoa); border-radius: 14px; box-shadow: var(--cz-shadow-sm); color: var(--cz-cocoa);
}
.journal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.journal-tabs button { background: var(--cz-paper); border: 2px solid var(--cz-cocoa); border-radius: 999px; padding: 6px 14px; font-size: 14px; box-shadow: 0 2px 0 var(--cz-cocoa); }
.task-row { padding: 8px 10px; box-shadow: none; }
.task-row input[type="checkbox"] { width: 22px; height: 22px; }

/* ---------- dialogs ---------- */
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; border-top: 3px solid var(--cz-cocoa); margin-top: 18px; padding-top: 14px; }
dialog h3, dialog legend, .creator-columns legend, dialog h4 { font-family: var(--cz-font-display) !important; font-size: 18px; color: var(--cz-cocoa); }
dialog .activity-tile, dialog .shop-item, dialog .person-card { background: var(--cz-paper); border: var(--cz-border) solid var(--cz-cocoa); border-radius: 12px; box-shadow: 0 3px 0 var(--cz-cocoa); min-height: 60px; }
dialog .activity-tile:hover, dialog .shop-item:hover, dialog .person-card:hover { background: var(--cz-paper-deep); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 32px; height: 32px; border: var(--cz-border) solid var(--cz-cocoa) !important; border-radius: 9px !important; box-shadow: 2px 2px 0 var(--cz-cocoa); }
.swatch.selected, .swatch[aria-pressed="true"] { outline: 3px solid var(--cz-peach-deep); outline-offset: 2px; }
.sprite-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.sprite-gallery button, .sprite-option { background: var(--cz-meadow); border: var(--cz-border) solid var(--cz-cocoa); border-radius: 12px; box-shadow: 0 3px 0 var(--cz-cocoa); padding: 8px; }
.sprite-gallery button canvas { image-rendering: pixelated; }
.sprite-gallery button.selected, .sprite-gallery button[aria-pressed="true"] { background: var(--cz-peach) !important; }
.creator-preview { background: var(--cz-meadow); border: var(--cz-border) solid var(--cz-cocoa); border-radius: 14px; box-shadow: var(--cz-shadow-sm); padding: 12px; }
.creator-preview canvas { image-rendering: pixelated; }
.pixel-cell { border: 1px solid #5a403833; }
.matching-card { background: repeating-linear-gradient(45deg, var(--cz-peach) 0 4px, #f7c5a4 4px 8px) !important; border: var(--cz-border) solid var(--cz-cocoa) !important; border-radius: 10px !important; box-shadow: 0 3px 0 var(--cz-cocoa) !important; }
.matching-card.revealed { background: var(--cz-paper) !important; }
.matching-card.matched { background: var(--cz-meadow) !important; }
.flashcard, #flashcard { background: var(--cz-paper); border: 4px solid var(--cz-cocoa); border-radius: 16px; box-shadow: 6px 6px 0 var(--cz-cocoa); font-family: var(--cz-font-body); }
.shop-wallet, #shop-wallet { font-family: var(--cz-font-mono); font-size: 22px; }
.bag-items, .shop-grid { gap: 10px; }

dialog .button, dialog label.button, dialog form > div { max-width: 100%; white-space: normal; box-sizing: border-box; }
#settings-dialog form, #settings-dialog .backup-actions, #settings-dialog .dialog-footer, dialog .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
#settings-dialog label.button { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 420px) { #settings-dialog .button, #settings-dialog label.button { width: 100%; } }

/* ---------- first-visit walkthrough ---------- */
.walkthrough-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.walkthrough-kicker { font-family: var(--cz-font-display); font-size: 13px; letter-spacing: .05em; color: var(--cz-cocoa-soft); }
.walkthrough-dots { display: flex; gap: 5px; }
.walkthrough-dots span { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--cz-cocoa); background: var(--cz-paper-deep); }
.walkthrough-dots span.active { background: var(--cz-peach); }
.walkthrough-dots span.done { background: var(--cz-moss); }
.walkthrough-skip { margin-left: auto; font-size: 13px; }
.walkthrough-body h2 { display: block; font-size: 22px; margin: 2px 0 6px; }
.arrival-help.walkthrough > .walkthrough-body, .arrival-help.walkthrough > .walkthrough-head { display: block; }
.arrival-help.walkthrough > .walkthrough-head { display: flex; }
.walkthrough-body > p { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.walkthrough-art { display: grid; place-items: center; background: var(--cz-meadow); border: 2px solid var(--cz-cocoa); border-radius: 12px; padding: 6px; margin-bottom: 10px; }
.walkthrough-art canvas { width: 192px; height: 88px; image-rendering: pixelated; }
.walkthrough-label { font-family: var(--cz-font-display); font-size: 13px; letter-spacing: .04em; margin: 10px 0 6px; }
.walkthrough-body label { font-family: var(--cz-font-display); font-size: 13px; margin: 6px 0 4px; display: block; }
.walkthrough-body input { width: 100%; }
.walkthrough-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.walkthrough-tile { display: inline-grid; justify-items: center; gap: 2px; min-width: 60px; padding: 6px 6px 5px; background: var(--cz-meadow); border: 2px solid var(--cz-cocoa); border-radius: 10px; box-shadow: 0 2px 0 var(--cz-cocoa); font-family: var(--cz-font-display); font-size: 12px; }
.walkthrough-tile canvas { width: 32px; height: 36px; image-rendering: pixelated; }
.walkthrough-tiles.pets .walkthrough-tile canvas { height: 30px; }
.walkthrough-tile[aria-pressed="true"] { background: var(--cz-peach); box-shadow: 0 2px 0 var(--cz-cocoa), 0 0 0 3px var(--cz-cocoa-deep); }
.walkthrough-task { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; background: var(--cz-meadow); border: 2px solid var(--cz-cocoa); border-radius: 12px; }
.walkthrough-task-icon { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; background: var(--cz-gold); border: 3px solid var(--cz-cocoa); box-shadow: 0 0 0 4px #efc76655; animation: task-glow 1.2s ease-in-out infinite; }
@keyframes task-glow { 0%, 100% { box-shadow: 0 0 0 3px #efc76655; } 50% { box-shadow: 0 0 0 8px #efc76622; } }
@media (prefers-reduced-motion: reduce) { .walkthrough-task-icon { animation: none; } }
.walkthrough-task strong { font-family: var(--cz-font-display); font-size: 14px; }
.walkthrough-task .button { grid-column: 1 / -1; justify-self: start; margin-top: 6px; min-height: 36px; font-size: 13px; }
.walkthrough-task span:last-child { font-size: 13px; color: var(--cz-cocoa-soft); }
.walkthrough-tips { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.walkthrough-tips li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; }
.walkthrough-tips .keys { display: inline-flex; gap: 3px; flex: none; }
.walkthrough-tips kbd { font-size: 13px; min-width: 24px; text-align: center; }
.walkthrough-note { font-size: 13px; color: var(--cz-cocoa-soft); margin: 4px 0 8px; }
.walkthrough-rewards { display: grid; gap: 8px; margin-bottom: 8px; }
.walkthrough-reward { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.walkthrough-reward .step-icon { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; background-size: 24px 24px; box-shadow: 2px 2px 0 var(--cz-cocoa); }
.walkthrough-reward strong { font-family: var(--cz-font-display); font-size: 14px; }
.walkthrough-reward span:last-child { font-size: 13px; color: var(--cz-cocoa-soft); }
.walkthrough-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.walkthrough-actions .button.primary { margin-left: auto; }
.walkthrough-actions .text-button { font-size: 13px; }
.coach-pulse { animation: coach-pulse 1.1s ease-in-out 5; }
@keyframes coach-pulse { 0%, 100% { box-shadow: 0 4px 0 var(--cz-cocoa-deep), 0 0 0 0 #f3a97b00; } 50% { box-shadow: 0 4px 0 var(--cz-cocoa-deep), 0 0 0 8px #f3a97b99; } }
@media (prefers-reduced-motion: reduce) { .coach-pulse { animation: none; } }
@media (max-width: 650px) { .walkthrough-body h2 { font-size: 19px; } .walkthrough-art canvas { width: 144px; height: 66px; } }

/* step icons shared with the landing page */
.step-icon { display: inline-block; width: 40px; height: 40px; border: var(--cz-border) solid var(--cz-cocoa); border-radius: 10px; background-color: var(--cz-paper-deep); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; image-rendering: pixelated; }
.icon-timer { background-color: var(--cz-peach); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='5' y='2' width='6' height='1' fill='%235a4038'/%3E%3Crect x='4' y='3' width='8' height='1' fill='%235a4038'/%3E%3Crect x='3' y='4' width='10' height='1' fill='%235a4038'/%3E%3Crect x='2' y='5' width='12' height='7' fill='%235a4038'/%3E%3Crect x='3' y='12' width='10' height='1' fill='%235a4038'/%3E%3Crect x='4' y='13' width='8' height='1' fill='%235a4038'/%3E%3Crect x='4' y='5' width='8' height='7' fill='%23fffaee'/%3E%3Crect x='5' y='4' width='6' height='1' fill='%23fffaee'/%3E%3Crect x='5' y='12' width='6' height='1' fill='%23fffaee'/%3E%3Crect x='7' y='6' width='2' height='3' fill='%235a4038'/%3E%3Crect x='9' y='8' width='2' height='1' fill='%235a4038'/%3E%3C/svg%3E"); }
.icon-coin { background-color: var(--cz-gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='5' y='2' width='6' height='1' fill='%235a4038'/%3E%3Crect x='3' y='3' width='10' height='1' fill='%235a4038'/%3E%3Crect x='2' y='4' width='12' height='8' fill='%235a4038'/%3E%3Crect x='3' y='12' width='10' height='1' fill='%235a4038'/%3E%3Crect x='5' y='13' width='6' height='1' fill='%235a4038'/%3E%3Crect x='5' y='3' width='6' height='1' fill='%23fff1b8'/%3E%3Crect x='3' y='4' width='10' height='8' fill='%23efc766'/%3E%3Crect x='5' y='12' width='6' height='1' fill='%23c79a3a'/%3E%3Crect x='4' y='5' width='2' height='5' fill='%23fff1b8'/%3E%3Crect x='7' y='5' width='2' height='6' fill='%23c79a3a'/%3E%3Crect x='6' y='5' width='4' height='1' fill='%23c79a3a'/%3E%3Crect x='6' y='10' width='4' height='1' fill='%23c79a3a'/%3E%3C/svg%3E"); }
.icon-home { background-color: var(--cz-moss); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='7' y='2' width='2' height='1' fill='%235a4038'/%3E%3Crect x='6' y='3' width='4' height='1' fill='%235a4038'/%3E%3Crect x='5' y='4' width='6' height='1' fill='%235a4038'/%3E%3Crect x='4' y='5' width='8' height='1' fill='%235a4038'/%3E%3Crect x='3' y='6' width='10' height='1' fill='%235a4038'/%3E%3Crect x='2' y='7' width='12' height='1' fill='%235a4038'/%3E%3Crect x='3' y='8' width='10' height='6' fill='%235a4038'/%3E%3Crect x='4' y='8' width='8' height='5' fill='%23fffaee'/%3E%3Crect x='7' y='3' width='2' height='1' fill='%23e08a66'/%3E%3Crect x='6' y='4' width='4' height='1' fill='%23e08a66'/%3E%3Crect x='5' y='5' width='6' height='1' fill='%23c9674d'/%3E%3Crect x='4' y='6' width='8' height='1' fill='%23e08a66'/%3E%3Crect x='3' y='7' width='10' height='1' fill='%23c9674d'/%3E%3Crect x='7' y='10' width='2' height='3' fill='%23a57a52'/%3E%3Crect x='5' y='9' width='1' height='2' fill='%239fcfe3'/%3E%3Crect x='10' y='9' width='1' height='2' fill='%239fcfe3'/%3E%3C/svg%3E"); }

/* pixel icons on the dock */

/* settings */
.toggle-label { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 10px 12px; margin: 6px 0; background: var(--cz-paper-deep); border: 2px solid var(--cz-cocoa); border-radius: 10px; cursor: pointer; }
.settings-note { font-size: 13px; color: var(--cz-cocoa-soft); }

/* account & rooms sign-in */
.workshop-tabs, .lobby-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.workshop-tabs button, .lobby-tabs .tab-btn { background: var(--cz-paper); border: 2px solid var(--cz-cocoa); border-radius: 999px; padding: 7px 16px; font-family: var(--cz-font-display); font-size: 14px; box-shadow: 0 2px 0 var(--cz-cocoa); min-height: 38px; }
.workshop-tabs button[aria-pressed="true"], .lobby-tabs .tab-btn.active { background: var(--cz-peach) !important; }
.auth-form { display: grid; gap: 10px; }
.auth-form label { font-family: var(--cz-font-display); font-size: 13px; margin: 0 0 4px; display: block; }
.auth-form input { width: 100%; }
.auth-status { min-height: 1.4em; font-size: 14px; margin: 0; }
.auth-status:empty { display: none; }
#auth-submit-btn { width: 100%; min-height: 46px; font-size: 16px; }
.account-google-note { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--cz-paper-deep); border: 2px solid var(--cz-cocoa); border-radius: 12px; }
.account-google-note strong { display: block; font-family: var(--cz-font-display); font-size: 14px; }
.account-google-note span:not(.px-icon) { font-size: 13px; color: var(--cz-cocoa-soft); }
.account-google-note .button { min-height: 38px; font-size: 14px; }
.px-google { width: 40px; height: 40px; border: 2px solid var(--cz-cocoa); border-radius: 10px; background-color: var(--cz-paper); background-size: 24px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='5' y='2' width='6' height='2' fill='%23e94435'/%3E%3Crect x='3' y='4' width='2' height='2' fill='%23e94435'/%3E%3Crect x='2' y='6' width='2' height='4' fill='%23f8bb15'/%3E%3Crect x='3' y='10' width='2' height='2' fill='%2334a853'/%3E%3Crect x='5' y='12' width='6' height='2' fill='%2334a853'/%3E%3Crect x='11' y='10' width='2' height='2' fill='%234285f4'/%3E%3Crect x='8' y='7' width='6' height='2' fill='%234285f4'/%3E%3Crect x='12' y='9' width='2' height='1' fill='%234285f4'/%3E%3C/svg%3E"); }
.account-card { display: grid; gap: 2px; padding: 12px 14px; background: var(--cz-paper-deep); border: 2px solid var(--cz-cocoa); border-radius: 12px; margin-bottom: 10px; }
.account-card strong { font-family: var(--cz-font-display); font-size: 16px; }
.account-card span { font-size: 13px; color: var(--cz-cocoa-soft); }
.account-sync-info { font-size: 14px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.google-multiplayer-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--cz-paper-deep); border: 2px solid var(--cz-cocoa); border-radius: 12px; }
.google-multiplayer-auth p { flex: 1 1 220px; margin: 0; font-size: 14px; }
.google-multiplayer-auth #google-signin-button:empty { display: none; }
.lobby-content > p { color: var(--cz-cocoa-soft); font-size: 14px; }
.lobby-card { background: var(--cz-paper); border: var(--cz-border) solid var(--cz-cocoa); border-radius: 12px; box-shadow: 0 3px 0 var(--cz-cocoa); padding: 12px 14px; }
@media (max-width: 650px) { .account-google-note { grid-template-columns: 40px 1fr; } .account-google-note .button { grid-column: 1 / -1; width: 100%; } }

/* google-first sign-in pieces */
.button-google { width: 100%; justify-content: center; gap: 10px; background: #fff; color: var(--cz-cocoa); border: var(--cz-border) solid var(--cz-cocoa); box-shadow: 0 3px 0 var(--cz-cocoa); font-size: 16px; min-height: 46px; }
.button-google .px-icon { width: 24px; height: 24px; border: 0; background-size: 20px 20px; background-color: transparent; }
.auth-hint { font-size: 13px; color: var(--cz-cocoa-soft); margin: 6px 0 0; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 12px 0; color: var(--cz-cocoa-soft); font-family: var(--cz-font-display); font-size: 13px; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 2px; background: var(--cz-cocoa); opacity: .25; }
.walkthrough-account { display: grid; gap: 8px; margin-top: 4px; }
.walkthrough-account .button { width: 100%; justify-content: center; min-height: 44px; font-size: 15px; }
.walkthrough-actions .walkthrough-note { margin: 0; font-size: 12px; }

/* discord */
.button-discord { width: 100%; justify-content: center; gap: 10px; background: #5865f2; color: #fff; border: var(--cz-border) solid var(--cz-cocoa); box-shadow: 0 3px 0 var(--cz-cocoa); font-size: 16px; min-height: 46px; margin-top: 8px; text-decoration: none; }
.button-discord:hover { background: #4752c4; color: #fff; }
.px-discord { width: 24px; height: 24px; border: 0; background-color: transparent; background-size: 22px 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='3' y='4' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='5' width='12' height='6' fill='%23ffffff'/%3E%3Crect x='3' y='11' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='1' height='5' fill='%23ffffff'/%3E%3Crect x='14' y='7' width='1' height='5' fill='%23ffffff'/%3E%3Crect x='5' y='7' width='2' height='2' fill='%235865f2'/%3E%3Crect x='9' y='7' width='2' height='2' fill='%235865f2'/%3E%3C/svg%3E"); }
#discord-auth-link { text-decoration: none; }

/* toasts and loading */
@keyframes sprout-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- lofi radio dock ---------- */
@keyframes music-spin { to { transform: rotate(360deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- fullscreen ---------- */

/* ---------- responsive ---------- */
@media (max-width: 650px) {
  .brand { font-size: 19px; flex: none; }
  .brand-word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  button, .button { transition: none !important; }
}

/* ---------- town chat: floating pill + two-channel panel ---------- */

/* ---------- walkthrough: feature rows with glyph icons and "Show me" ---------- */
.walkthrough-features .walkthrough-reward { grid-template-columns: 40px 1fr auto; }
.walkthrough-features .walkthrough-reward .walkthrough-show { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 12px; white-space: nowrap; }
.step-icon.icon-glyph { display: inline-grid; place-items: center; font-size: 20px; line-height: 1; }