@font-face {
  font-family:Club;
  src:local('Arial Rounded MT Bold');
  font-display:swap;
}

:root {
  font-family:'Trebuchet MS',Arial,sans-serif;
  color:#343d2d;
  background:#f6f4eb;
  font-synthesis:none;
  --paper:#f6f4eb;
  --ink:#343d2d;
  --muted:#777c70;
  --orange:#e76e3c;
  --line:#dddcd1;
  --green:#7a9064;
  --display:Club,'Arial Black','Trebuchet MS',sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,a {
  -webkit-tap-highlight-color:transparent;
}

button,a {
  touch-action:manipulation;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  border:0;
  background:none;
}

button:disabled {
  cursor:default;
  opacity:.4;
}

button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible {
  outline:3px solid #527ba5;
  outline-offset:5px;
}

svg {
  display:block;
}

button svg,a svg,span svg {
  width:20px;
  height:20px;
}

img {
  max-width:100%;
  display:block;
}

button,a {
  transition:background-color .18s,transform .18s,box-shadow .18s;
}

a:hover,button:hover {
  --hover:1;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  letter-spacing:-1.1px;
}

h2 {
  font-size:34px;
  line-height:1.15;
  font-family:var(--display);
  font-weight:900;
}

h3 {
  font-family:var(--display);
  font-weight:800;
}

p {
  line-height:1.65;
}

button:active,.button:active {
  transform:translateY(2px);
}

[hidden] {
  display:none!important;
}

.site-shell {
  max-width:1248px;
  padding:0 54px;
  margin:auto;
}

.site-header {
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:21px;
  letter-spacing:-1px;
  font-weight:900;
  white-space:nowrap;
}

.brand img {
  border-radius:11px;
}

.brand-light {
  font-weight:500;
}

.brand-dot {
  font:10px Arial;
  vertical-align:super;
  margin-left:3px;
}

.main-nav {
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:60px;
  font-size:13px;
  font-weight:bold;
}

.main-nav>a,.main-nav>button {
  padding:16px 0;
  position:relative;
}

.main-nav>.active:after {
  content:'';
  position:absolute;
  bottom:4px;
  left:0;
  right:0;
  height:3px;
  background:var(--orange);
  border-radius:5px;
}

.main-nav>button:hover,.text-button:hover {
  color:var(--orange);
}

.little-star {
  font-size:19px;
  margin-left:4px;
  color:#a88c4d;
}

.header-tools {
  display:flex;
  gap:10px;
}

.icon-button {
  width:39px;
  height:39px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
}

.icon-button:hover {
  background:#eae8dc;
}

.icon-button svg {
  width:17px;
  height:17px;
}

.hero {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  min-height:525px;
  gap:8px;
  padding:30px 0 28px;
}

.hero-copy {
  padding:25px 0 20px 0;
  position:relative;
  z-index:1;
}

.eyebrow {
  font-size:10px;
  font-weight:bold;
  letter-spacing:1.8px;
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.5;
}

.eyebrow.small {
  font-size:9px;
  letter-spacing:1.7px;
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#859b68;
  flex:none;
}

.hero h1 {
  font-family:var(--display);
  font-size:78px;
  line-height:1.04;
  letter-spacing:-4.6px;
  margin:21px 0 22px;
  position:relative;
  font-weight:900;
}

.hero h1>span {
  color:var(--orange);
}

.hero-spark {
  display:inline-block;
  width:48px;
  height:56px;
  margin-left:7px;
  vertical-align:top;
  color:#d3ac50;
  transform:rotate(7deg);
}

.hero-copy>p {
  font-size:15px;
  color:#73786b;
  line-height:1.8;
  margin-bottom:25px;
}

.hero-copy em {
  font-style:normal;
  color:#444d3b;
}

.button {
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  padding:0 26px;
  font-size:15px;
  font-weight:700;
  box-shadow:0 3px 0 #c2542a;
}

.button.primary {
  color:#fffaf2;
  background:var(--orange);
}

.button.primary:hover {
  background:#d96332;
  transform:translateY(-2px);
  box-shadow:0 5px 0 #bc512b;
}

.button-arrow {
  margin-left:32px;
  font-size:23px;
  font-weight:400;
}

.play-triangle {
  width:0;
  height:0;
  border-left:9px solid currentColor;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  display:inline-block;
}

.hero-note {
  display:flex;
  align-items:center;
  gap:7px;
  color:#85877b;
  font-size:10px;
  margin-top:18px;
}

.hero-note svg {
  width:14px;
  height:14px;
}

.hero-art {
  position:relative;
  padding-top:22px;
  margin-right:-27px;
}

.hero-art>img {
  width:100%;
  height:auto;
}

.handwritten {
  font-family:'Segoe Print','Comic Sans MS',cursive;
  font-size:14px;
  font-style:italic;
}

.art-note {
  position:absolute;
  left:84px;
  top:5px;
  transform:rotate(-6deg);
  color:#6c7660;
  white-space:nowrap;
}

.art-note svg {
  display:inline-block;
  width:55px;
  height:43px;
  vertical-align:top;
  margin-left:5px;
}

.good-things {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
  color:#75796b;
  font-size:11px;
}

.good-things>span {
  display:flex;
  align-items:center;
  gap:9px;
}

.good-things svg {
  width:16px;
  height:16px;
  color:#7c8b68;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:23px;
  gap:20px;
}

.section-heading h2 {
  margin-top:10px;
  font-size:31px;
}

.section-aside {
  color:#888b7e;
  font-size:11px;
  padding-bottom:4px;
}

.modes-section {
  padding-top:43px;
  scroll-margin-top:28px;
}

.mode-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.mode-card {
  display:block;
  border-radius:13px;
  padding:25px 25px 18px;
  min-height:238px;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
}

.mode-card:hover {
  transform:translateY(-5px);
  box-shadow:0 9px 20px #343d2d0c;
  border-color:#343d2d22;
}

.classic-card {
  background:#eee6d7;
}

.zen-card {
  background:#e5eadb;
}

.rush-card {
  background:#ede5ec;
}

.mode-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}

.mode-symbol {
  display:flex;
  justify-content:center;
  align-items:center;
  width:37px;
  height:37px;
  border-radius:10px;
  background:#e5d6bb;
  color:#776b48;
}

.mode-symbol svg {
  width:23px;
  height:23px;
}

.zen-card .mode-symbol {
  background:#d5dec6;
  color:#687c52;
}

.rush-card .mode-symbol {
  background:#e1d5e2;
  color:#92709b;
}

.pill {
  font-size:8px;
  letter-spacing:1.1px;
  font-weight:bold;
  border:1px solid #cfc4af;
  padding:5px 8px;
  border-radius:20px;
  color:#8b785b;
}

.zen-card .pill {
  border-color:#c4cfb7;
  color:#6b7e58;
}

.rush-card .pill {
  border-color:#d8c7d9;
  color:#8c7195;
}

.mode-card h3 {
  font-size:26px;
  letter-spacing:-.9px;
  margin-bottom:8px;
}

.mode-card p {
  font-size:12px;
  line-height:1.65;
  color:#7d7c6f;
}

.mode-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #343d2d14;
  margin-top:23px;
  padding-top:14px;
}

.mode-bottom>span:first-child {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  color:#737666;
}

.difficulty-dots {
  display:flex;
  gap:3px;
}

.difficulty-dots i {
  width:4px;
  height:4px;
  border-radius:100%;
  background:currentColor;
}

.difficulty-dots i.dim {
  opacity:.25;
}

.round-arrow {
  border:1px solid #343d2d25;
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.extras-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:18px;
  margin-top:20px;
}

.daily-card,.wardrobe-card {
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  align-items:center;
  padding:24px 20px;
  gap:17px;
  text-align:left;
  background:#f6f4eb;
}

.daily-card:hover,.wardrobe-card:hover {
  background:#efeee2;
}

.daily-icon {
  color:#aa9148;
  flex:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:#efe8cf;
  border-radius:50%;
}

.daily-icon svg {
  width:24px;
  height:24px;
}

.daily-card h3,.wardrobe-card h3 {
  font-size:14px;
  letter-spacing:-.3px;
  margin:6px 0 4px;
}

.daily-card p,.wardrobe-card p {
  font-size:10px;
  color:#858779;
}

.daily-card .eyebrow {
  font-size:8px;
  letter-spacing:1.1px;
}

.new-dot {
  color:#849169;
  background:#e7ebd8;
  border-radius:4px;
  padding:2px 4px;
  font-size:6px;
}

.daily-card .round-arrow {
  margin-left:auto;
  flex:none;
}

.skin-dots {
  display:flex;
  align-items:center;
  flex:none;
  padding:0 0 0 3px;
}

.skin-dots span {
  height:33px;
  width:23px;
  border:3px solid var(--paper);
  border-radius:13px;
  background:#eca17c;
  transform:rotate(-22deg);
  margin-left:-4px;
}

.skin-dots span:nth-child(2) {
  background:#9da988;
  transform:rotate(2deg);
  margin-top:-8px;
}

.skin-dots span:nth-child(3) {
  background:#b3a3c5;
  transform:rotate(22deg);
}

.simple-arrow {
  font-size:22px;
  margin-left:auto;
}

.how-preview {
  display:flex;
  gap:65px;
  align-items:center;
  padding:66px 0 10px;
}

.how-preview h2 {
  font-size:29px;
  margin:10px 0 12px;
}

.how-preview p {
  font-size:12px;
  color:#808476;
}

.text-button {
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:9px 0;
  font-size:11px;
  font-weight:bold;
}

.how-preview .text-button {
  margin-top:10px;
}

.how-steps {
  display:flex;
  gap:32px;
  flex:1;
  justify-content:space-between;
}

.how-steps>div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.step-number {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  background:#e7e9da;
  border-radius:50%;
  font-size:10px;
  color:#7c8867;
  margin-bottom:14px;
}

.how-steps strong {
  font-size:12px;
  margin-bottom:6px;
}

.how-steps p {
  font-size:10px;
  max-width:95px;
}

.ad-region {
  margin-top:160px;
  text-align:center;
}

.ad-label {
  font-size:7px;
  letter-spacing:1.7px;
  color:#9a9c90;
  display:block;
  margin-bottom:10px;
}

.ad-slot {
  max-width:728px;
  min-height:90px;
  margin:auto;
  border:1px dashed #ddddd0;
  border-radius:5px;
  background:#eeeee41f;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.ad-placeholder {
  font-size:10px;
  color:#9b9f91;
  letter-spacing:.3px;
}

.ad-slot.has-ad {
  display:block;
  border:0;
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid var(--line);
  padding:27px 0;
  margin-top:45px;
  color:#848879;
}

.footer-brand {
  font-size:14px;
  gap:7px;
  color:var(--ink);
  letter-spacing:-.6px;
}

.site-footer>p {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px;
}

.footer-flower {
  font-size:16px;
  color:#98a377;
}

.site-footer>div {
  display:flex;
  gap:17px;
  font-size:8px;
  align-items:center;
}

.site-footer button {
  font-size:8px;
  padding:0;
}

.site-footer a:hover {
  text-decoration:underline;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
}

.skip-link:focus {
  top:10px;
}

.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;
}

/* The clubhouse drawers */
.club-dialog {
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper);
  color:var(--ink);
  padding:42px;
  max-width:530px;
  width:calc(100% - 32px);
  max-height:85dvh;
  box-shadow:0 24px 80px #27301e26;
}

.club-dialog::backdrop {
  background:#2f3a2b66;
  backdrop-filter:blur(5px);
}

.dialog-close {
  position:absolute;
  right:15px;
  top:15px;
}

.club-dialog h2 {
  font-size:32px;
  margin:8px 25px 14px 0;
}

.club-dialog .intro {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:24px;
}

.dialog-steps {
  display:flex;
  flex-direction:column;
  gap:18px;
}

.dialog-steps>div {
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.dialog-steps .step-number {
  flex:none;
  margin:0;
}

.dialog-steps strong {
  font-size:14px;
}

.dialog-steps p {
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

.dialog-note {
  background:#e8ecdc;
  font-size:12px;
  padding:15px 18px;
  border-radius:10px;
  line-height:1.6;
  margin-top:22px;
}

.settings-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:19px 0;
  cursor:pointer;
}

.settings-row strong {
  display:block;
  font-size:14px;
}

.settings-row small {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
}

.switch {
  appearance:none;
  flex:none;
  width:42px;
  height:25px;
  border-radius:16px;
  background:#d7dace;
  position:relative;
  cursor:pointer;
  transition:background .2s;
  margin:0;
}

.switch:before {
  content:'';
  display:block;
  width:19px;
  height:19px;
  background:#fff;
  box-shadow:0 1px 3px #0002;
  border-radius:50%;
  position:absolute;
  left:3px;
  top:3px;
  transition:transform .2s;
}

.switch:checked {
  background:#819567;
}

.switch:checked:before {
  transform:translateX(17px);
}

.danger-button {
  margin-top:23px;
  color:#ac593f;
  font-size:11px;
  text-decoration:underline;
}

.skin-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.skin-option {
  padding:20px 9px 13px;
  border-radius:12px;
  border:1px solid var(--line);
  text-align:center;
  background:#eeeede;
  position:relative;
}

.skin-option.selected {
  border:2px solid var(--orange);
  padding:19px 8px 12px;
}

.skin-option[aria-disabled=true] {
  opacity:.6;
}

.skin-preview {
  height:46px;
  width:50px;
  border:13px solid var(--skin);
  border-top:0;
  border-radius:0 0 18px 18px;
  margin:0 auto 14px;
  position:relative;
}

.skin-preview:before {
  content:'';
  position:absolute;
  right:-14px;
  top:-8px;
  background:var(--skin);
  width:20px;
  height:21px;
  border-radius:9px;
}

.skin-preview:after {
  content:'••';
  letter-spacing:2px;
  font-size:13px;
  color:#fff;
  position:absolute;
  right:-12px;
  top:-10px;
}

.skin-option strong {
  display:block;
  font-size:10px;
}

.skin-option small {
  font-size:9px;
  color:var(--muted);
  display:block;
  margin-top:6px;
}

.collection-progress {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  margin-bottom:18px;
  color:var(--muted);
}

.progress-track {
  height:5px;
  border-radius:5px;
  background:#dfe3d4;
  margin-top:10px;
  overflow:hidden;
}

.progress-track span {
  display:block;
  height:100%;
  background:var(--green);
}

.best-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:24px;
}

.best-grid div {
  background:#eaeadd;
  border-radius:10px;
  padding:18px 8px;
  text-align:center;
}

.best-grid span {
  display:block;
  font-size:10px;
  color:var(--muted);
}

.best-grid strong {
  display:block;
  font-family:var(--display);
  font-size:32px;
  margin-top:5px;
}

.record-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  font-size:12px;
  gap:10px;
}

.record-row small {
  color:var(--muted);
  font-size:10px;
}

.records-title {
  font-size:12px;
  margin:20px 0 6px;
  letter-spacing:0;
}

.empty-scores {
  padding:22px;
  background:#eeeeE2;
  border-radius:12px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

.badges {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:15px;
}

.badge {
  border:1px solid #ced5bc;
  padding:6px 9px;
  font-size:9px;
  border-radius:20px;
  background:#e6ebd9;
}

.toast {
  position:fixed;
  left:50%;
  bottom:max(24px,env(safe-area-inset-bottom));
  transform:translate(-50%,20px);
  max-width:calc(100% - 32px);
  padding:13px 20px;
  border-radius:10px;
  background:var(--ink);
  color:var(--paper);
  font-size:12px;
  text-align:center;
  opacity:0;
  pointer-events:none;
  z-index:30;
  transition:transform .25s,opacity .25s;
  box-shadow:0 5px 20px #0002;
}

.toast.visible {
  opacity:1;
  transform:translate(-50%,0);
}

/* The arcade */
.play-shell {
  max-width:1150px;
  margin:0 auto;
  padding:0 35px;
}

.play-header {
  height:84px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.back-link {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:var(--muted);
}

.back-link>span:first-child {
  font-size:23px;
}

.play-header .brand {
  font-size:18px;
}

.play-header .header-tools {
  width:133px;
  justify-content:flex-end;
}

.game-title {
  text-align:center;
  padding:28px 0 19px;
}

.game-title .eyebrow {
  justify-content:center;
  font-size:8px;
}

.game-title h1 {
  font-family:var(--display);
  font-size:34px;
  font-weight:900;
  margin-top:5px;
  letter-spacing:-1.5px;
}

.game-layout {
  display:grid;
  grid-template-columns:180px minmax(0,520px) 180px;
  gap:35px;
  justify-content:center;
  align-items:start;
}

.game-sidebar {
  padding-top:95px;
}

.game-sidebar-card {
  padding:0 0 30px;
}

.game-sidebar-card>span:first-child {
  color:#8e9b77;
  display:block;
  margin-bottom:14px;
}

.game-sidebar-card>span:first-child svg {
  width:26px;
  height:26px;
}

.game-sidebar-card h3 {
  font-size:16px;
  letter-spacing:-.4px;
  margin-bottom:10px;
}

.game-sidebar-card p {
  font-size:11px;
  color:var(--muted);
}

.best-card {
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:3px;
}

.best-card .eyebrow {
  font-size:7px;
}

.best-card>strong {
  font-family:var(--display);
  font-size:42px;
  display:block;
  margin:8px 0;
  color:#758961;
}

.game-center {
  min-width:0;
}

.scorebar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 8px 13px;
}

.scorebar>div {
  min-width:55px;
}

.scorebar>div:last-child {
  text-align:right;
}

.scorebar>div>span {
  font-size:8px;
  color:#919382;
  font-weight:bold;
  letter-spacing:1.6px;
  display:flex;
  align-items:center;
  gap:5px;
}

.scorebar>div:last-child>span {
  justify-content:flex-end;
}

.scorebar strong {
  font-family:var(--display);
  font-size:28px;
  line-height:1.3;
  letter-spacing:-1px;
}

.scorebar .small-trophy svg {
  width:12px;
  height:12px;
  color:#a99256;
}

#timer-wrap {
  text-align:center;
}

#timer-wrap>span {
  justify-content:center;
}

#timer-wrap.urgent strong {
  color:#cb5d3a;
}

.board-wrap {
  position:relative;
  border:1px solid #cfd5c0;
  background:#e8ecdc;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 0 #d8ddcb;
  aspect-ratio:1;
}

#game-canvas {
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  outline-offset:-4px!important;
}

.game-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:#ecf0e1e8;
  backdrop-filter:blur(3px);
  text-align:center;
  z-index:2;
}

.overlay-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:340px;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:4px;
}
.overlay-content>* { flex-shrink:0; }

.overlay-mascot {
  margin-bottom:21px;
  transform:rotate(-8deg);
}

.overlay-mascot img {
  border-radius:18px;
  box-shadow:3px 4px 0 #c3542b;
}

.overlay-content>.eyebrow {
  font-size:7px;
  justify-content:center;
}

.overlay-content>h2 {
  font-size:32px;
  letter-spacing:-1.5px;
  margin:10px 0;
}

.overlay-content>p {
  font-size:12px;
  color:#79826b;
  max-width:260px;
  margin:0 auto 20px;
}

.overlay-content .button {
  min-width:165px;
  min-height:47px;
  font-size:13px;
}

.overlay-content>a {
  font-size:10px;
  color:#838977;
  margin-top:13px;
}

.result-summary {
  width:100%;
  display:flex;
  justify-content:center;
  gap:40px;
  margin:2px 0 24px;
}

.result-summary>div>strong {
  font-family:var(--display);
  display:block;
  font-size:42px;
  line-height:1.2;
  letter-spacing:-1px;
}

.result-summary>div>span {
  font-size:8px;
  letter-spacing:1.2px;
  color:var(--muted);
}

.game-overlay.is-result .overlay-mascot {
  margin-bottom:13px;
}

.game-overlay.is-result .overlay-mascot img {
  width:44px;
  height:44px;
  border-radius:12px;
}

.game-overlay.is-result .overlay-content>p {
  margin-bottom:10px;
}

.game-overlay.is-result .overlay-content>h2 {
  font-size:29px;
}

.game-under {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:14px 5px 0;
  font-size:9px;
  color:#8a907f;
  gap:15px;
}

.game-under>span {
  display:flex;
  align-items:center;
  gap:7px;
}

.game-under .text-button {
  font-size:9px;
  color:#7c856d;
}

.game-under .text-button>span {
  width:15px;
  height:15px;
  border:1px solid #a9b19a;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:9px;
}

.keyboard-hint {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:9px;
  color:#9a9f90;
  margin-top:16px;
}

.keyboard-hint>span {
  margin:0 6px;
}

kbd {
  font:9px 'Trebuchet MS',sans-serif;
  border:1px solid #d4d8c9;
  min-width:17px;
  padding:3px 4px;
  min-height:18px;
  border-radius:4px;
  display:inline-grid;
  place-items:center;
  background:#efeee5;
}

.little-note {
  background:#eae7d4;
  transform:rotate(3deg);
  padding:24px 19px 27px;
  position:relative;
  text-align:center;
  border-radius:2px;
}

.little-note:before {
  content:'';
  width:58px;
  height:18px;
  background:#dce0c696;
  position:absolute;
  top:-9px;
  left:calc(50% - 29px);
  transform:rotate(-7deg);
}

.little-note .handwritten {
  font-size:12px;
  color:#8e9378;
  white-space:nowrap;
}

.note-flower {
  display:block;
  font-size:50px;
  color:#9da67f;
  margin:9px 0;
}

.little-note h3 {
  font-size:22px;
  letter-spacing:-1px;
  line-height:1.2;
  margin-bottom:12px;
}

.little-note p {
  font-size:10px;
  color:#90957f;
}

.right-sidebar>.text-button {
  margin-top:27px;
  font-size:10px;
  width:100%;
  justify-content:center;
  color:#7c876c;
}

.play-footer {
  text-align:center;
  font-size:7px;
  letter-spacing:2px;
  color:#afb29f;
  padding:26px 0;
}

.countdown {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:#e8ecdc88;
  font-family:var(--display);
  font-size:85px;
  color:var(--ink);
  pointer-events:none;
}

.board-pop {
  position:absolute;
  top:18px;
  left:50%;
  transform:translate(-50%,-8px);
  background:#fffaf0e8;
  border-radius:20px;
  padding:9px 16px;
  font-size:11px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .2s,transform .2s;
  pointer-events:none;
}

.board-pop.show {
  opacity:1;
  transform:translate(-50%,0);
}

.touch-controls {
  display:none;
  grid-template:repeat(3,42px)/repeat(3,49px);
  justify-content:center;
  gap:4px;
  margin:14px auto 0;
  width:max-content;
  touch-action:none;
}

.direction {
  border:1px solid #d4d8c9;
  background:#eeeee1;
  border-radius:10px;
  font-size:21px;
  box-shadow:0 2px 0 #d7dccd;
  user-select:none;
}

.direction:active {
  background:#dfe5ce;
}

.up {
  grid-area:1/2;
}

.left {
  grid-area:2/1;
}

.right {
  grid-area:2/3;
}

.down {
  grid-area:3/2;
}

.dpad-center {
  grid-area:2/2;
  display:grid;
  place-items:center;
  color:#a6b08e;
  font-size:21px;
}

.privacy-page .site-header {
  height:90px;
}

.privacy-content {
  max-width:730px;
  margin:60px auto 80px;
}

.privacy-content h1 {
  font-family:var(--display);
  font-size:49px;
  margin:12px 0 18px;
  letter-spacing:-2px;
}

.privacy-content>p {
  font-size:15px;
  color:var(--muted);
  margin:0 0 24px;
}

.privacy-content h2 {
  font-size:23px;
  letter-spacing:-.5px;
  margin:35px 0 12px;
}

.privacy-content a {
  color:#aa5e37;
  text-decoration:underline;
}

.privacy-content li {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}

.privacy-content ul {
  padding-left:20px;
}

.privacy-content .button {
  margin-top:15px;
  text-decoration:none;
  color:#fffaf2;
}

@media(min-width:1400px) {
  .site-shell {
    max-width:1320px;
  }
  .hero {
    min-height:560px;
  }
  .hero h1 {
    font-size:87px;
  }
  .hero-copy>p {
    font-size:16px;
  }
  .hero-art {
    margin-left:8px;
  }
  .mode-card {
    min-height:253px;
    padding-top:28px;
  }
  .mode-card p {
    font-size:13px;
  }
  .hero-note {
    font-size:11px;
  }
  .site-header {
    height:112px;
  }
  .good-things {
    font-size:12px;
  }
}

@media(max-width:1050px) {
  .site-shell {
    padding:0 32px;
  }
  .hero h1 {
    font-size:67px;
  }
  .hero {
    min-height:465px;
  }
  .hero-art {
    margin-right:-18px;
  }
  .hero-copy>p {
    font-size:13px;
  }
  .art-note {
    left:40px;
    font-size:11px;
    top:10px;
  }
  .good-things {
    gap:30px;
    font-size:10px;
  }
  .mode-card {
    padding:21px 20px 16px;
  }
  .mode-card h3 {
    font-size:25px;
  }
  .pill {
    font-size:7px;
    padding:5px 6px;
  }
  .main-nav {
    margin-left:15px;
    gap:24px;
  }
  .extras-grid {
    grid-template-columns:1.3fr 1fr;
  }
  .daily-card,.wardrobe-card {
    gap:12px;
    padding:20px 15px;
  }
  .daily-card p {
    font-size:9px;
  }
  .daily-card h3,.wardrobe-card h3 {
    font-size:12px;
  }
  .daily-card .eyebrow {
    font-size:6px;
  }
  .how-preview {
    gap:45px;
  }
  .how-steps {
    gap:20px;
  }
  .site-footer>p {
    display:none;
  }
  .game-layout {
    grid-template-columns:155px minmax(0,500px);
    gap:30px;
  }
  .right-sidebar {
    display:none;
  }
  .play-shell {
    max-width:900px;
  }
  .game-sidebar {
    padding-top:90px;
  }
}

@media(max-width:760px) {
  .site-shell {
    padding:0 24px;
  }
  .site-header {
    height:85px;
  }
  .brand {
    font-size:19px;
  }
  .brand img {
    width:32px;
    height:32px;
  }
  .main-nav {
    gap:22px;
    margin-left:0;
  }
  .main-nav>a {
    display:none;
  }
  .main-nav>button {
    font-size:11px;
  }
  .header-tools {
    gap:7px;
  }
  .icon-button {
    width:35px;
    height:35px;
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:390px;
    gap:0;
  }
  .hero h1 {
    font-size:53px;
    letter-spacing:-3px;
  }
  .hero-spark {
    width:34px;
    height:42px;
  }
  .eyebrow {
    font-size:7px;
    letter-spacing:1.1px;
  }
  .hero-copy>p {
    font-size:11px;
  }
  .hero-copy {
    padding:12px 0;
  }
  .hero-note {
    font-size:7px;
    gap:4px;
  }
  .hero-note svg {
    width:11px;
    height:11px;
  }
  .hero-art {
    margin-left:-5px;
    margin-right:-23px;
  }
  .art-note {
    left:23px;
    font-size:9px;
    top:23px;
  }
  .art-note svg {
    width:32px;
    height:29px;
  }
  .button {
    min-height:46px;
    font-size:13px;
    padding:0 20px;
  }
  .button-arrow {
    font-size:20px;
    margin-left:25px;
  }
  .good-things {
    gap:20px;
    padding:17px 0;
    font-size:8px;
  }
  .good-things>span {
    gap:6px;
  }
  .good-things svg {
    width:13px;
    height:13px;
  }
  .section-heading h2 {
    font-size:27px;
  }
  .section-aside {
    font-size:8px;
  }
  .modes-section {
    padding-top:35px;
  }
  .mode-grid {
    gap:11px;
  }
  .mode-card {
    padding:18px 15px 13px;
    min-height:233px;
  }
  .mode-top {
    margin-bottom:20px;
  }
  .mode-symbol {
    width:31px;
    height:31px;
    border-radius:9px;
  }
  .mode-symbol svg {
    width:19px;
    height:19px;
  }
  .pill {
    font-size:5px;
    letter-spacing:.8px;
    padding:5px;
  }
  .mode-card h3 {
    font-size:22px;
  }
  .mode-card p {
    font-size:10px;
  }
  .mode-bottom {
    margin-top:20px;
    padding-top:12px;
  }
  .mode-bottom>span:first-child {
    font-size:7px;
    gap:5px;
  }
  .round-arrow {
    width:25px;
    height:25px;
    font-size:16px;
  }
  .difficulty-dots {
    gap:2px;
  }
  .difficulty-dots i {
    width:3px;
    height:3px;
  }
  .extras-grid {
    grid-template-columns:1fr;
  }
  .daily-card,.wardrobe-card {
    padding:20px;
    gap:16px;
  }
  .daily-card .eyebrow {
    font-size:8px;
  }
  .daily-card h3,.wardrobe-card h3 {
    font-size:15px;
  }
  .daily-card p,.wardrobe-card p {
    font-size:11px;
  }
  .wardrobe-card {
    padding-left:25px;
  }
  .how-preview {
    padding-top:48px;
    gap:35px;
    align-items:flex-start;
    flex-direction:column;
  }
  .how-steps {
    width:100%;
    justify-content:flex-start;
    gap:65px;
  }
  .how-steps p {
    max-width:140px;
  }
  .ad-region {
    margin-top:160px;
  }
  .game-layout {
    display:block;
    max-width:500px;
    margin:auto;
  }
  .game-sidebar {
    display:none;
  }
  .play-shell {
    max-width:640px;
    padding:0 24px;
  }
  .play-header .header-tools {
    width:100px;
  }
  .game-title {
    padding:24px 0 15px;
  }
  .play-header {
    height:76px;
  }
  .play-header .brand {
    font-size:15px;
  }
  .play-header .brand img {
    width:27px;
    height:27px;
  }
  .back-link {
    font-size:10px;
  }
  .keyboard-hint {
    margin-top:22px;
  }
  .play-footer {
    padding-bottom:30px;
  }
}

@media(max-width:540px) {
  .site-shell {
    padding:0 22px;
  }
  .site-header {
    height:76px;
    gap:10px;
  }
  .brand {
    font-size:18px;
    gap:8px;
  }
  .brand img {
    width:31px;
    height:31px;
  }
  .brand-dot {
    font-size:8px;
  }
  .main-nav {
    margin-left:auto;
  }
  .main-nav button {
    display:none;
  }
  .header-tools {
    gap:8px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:33px;
    padding-bottom:20px;
    gap:0;
  }
  .hero-copy {
    text-align:center;
    padding:0;
  }
  .hero-copy>.eyebrow {
    justify-content:center;
    font-size:8px;
    letter-spacing:1.45px;
  }
  .hero h1 {
    font-size:54px;
    letter-spacing:-3px;
    line-height:1.03;
    margin:19px 0;
  }
  .hero-spark {
    width:35px;
    height:43px;
    position:absolute;
    margin-left:5px;
    margin-top:5px;
  }
  .hero-copy>p {
    font-size:13px;
    margin-bottom:22px;
    line-height:1.7;
  }
  .hero-play {
    min-height:49px;
    padding:0 24px;
    font-size:14px;
  }
  .hero-note {
    justify-content:center;
    font-size:8px;
    margin-top:17px;
  }
  .hero-note svg {
    width:12px;
    height:12px;
  }
  .hero-art {
    margin:12px -5px -5px;
    padding-top:15px;
  }
  .hero-art>img {
    width:100%;
    max-width:430px;
    margin:auto;
  }
  .art-note {
    font-size:11px;
    left:40px;
    top:9px;
  }
  .art-note svg {
    width:40px;
    height:35px;
  }
  .good-things {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 6px;
    font-size:8px;
    padding:18px 0;
  }
  .good-things>span {
    justify-content:center;
    gap:5px;
  }
  .good-things>span:first-child {
    grid-column:1/-1;
    font-size:9px;
  }
  .good-things svg {
    width:13px;
    height:13px;
  }
  .modes-section {
    padding-top:32px;
  }
  .section-heading {
    margin-bottom:19px;
  }
  .section-heading h2 {
    font-size:29px;
    letter-spacing:-1.3px;
    margin-top:9px;
  }
  .section-aside {
    display:none;
  }
  .eyebrow.small {
    font-size:8px;
    letter-spacing:1.4px;
  }
  .mode-grid {
    grid-template-columns:1fr;
    gap:13px;
  }
  .mode-card {
    padding:22px 23px 18px;
    min-height:0;
  }
  .mode-top {
    margin-bottom:13px;
  }
  .mode-symbol {
    width:35px;
    height:35px;
  }
  .pill {
    font-size:7px;
    letter-spacing:1.1px;
    padding:6px 9px;
  }
  .mode-card h3 {
    font-size:29px;
    margin-bottom:7px;
  }
  .mode-card p {
    font-size:12px;
  }
  .mode-card p br {
    display:none;
  }
  .mode-bottom {
    margin-top:18px;
    padding-top:13px;
  }
  .mode-bottom>span:first-child {
    font-size:9px;
    gap:8px;
  }
  .difficulty-dots i {
    width:4px;
    height:4px;
  }
  .round-arrow {
    width:30px;
    height:30px;
    font-size:19px;
  }
  .extras-grid {
    margin-top:18px;
    gap:13px;
  }
  .daily-card,.wardrobe-card {
    padding:21px 16px;
    gap:12px;
  }
  .daily-icon {
    width:33px;
    height:33px;
  }
  .daily-icon svg {
    width:22px;
    height:22px;
  }
  .daily-card .eyebrow {
    font-size:6px;
    letter-spacing:1px;
  }
  .daily-card h3,.wardrobe-card h3 {
    font-size:12px;
    letter-spacing:-.2px;
  }
  .daily-card p,.wardrobe-card p {
    font-size:9px;
  }
  .daily-card .round-arrow {
    width:24px;
    height:24px;
    font-size:16px;
  }
  .skin-dots {
    margin-right:3px;
  }
  .how-preview {
    gap:30px;
    padding-top:40px;
  }
  .how-preview h2 {
    font-size:30px;
  }
  .how-preview p {
    font-size:12px;
  }
  .how-steps {
    justify-content:space-between;
    gap:20px;
  }
  .how-steps strong {
    font-size:10px;
  }
  .how-steps p {
    font-size:9px;
    max-width:85px;
  }
  .site-footer {
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    margin-top:30px;
    padding:28px 0;
  }
  .footer-brand {
    font-size:16px;
  }
  .site-footer>div {
    width:100%;
    justify-content:center;
    font-size:9px;
    gap:18px;
  }
  .site-footer button {
    font-size:9px;
  }
  .club-dialog {
    padding:35px 25px;
    max-height:88dvh;
  }
  .club-dialog h2 {
    font-size:29px;
    margin-top:14px;
  }
  .club-dialog .intro {
    font-size:12px;
  }
  .skin-grid {
    gap:8px;
  }
  .skin-option {
    padding:18px 5px 12px;
  }
  .skin-option.selected {
    padding:17px 4px 11px;
  }
  .skin-option strong {
    font-size:9px;
  }
  .skin-option small {
    font-size:8px;
  }
  .play-shell {
    padding:0 15px;
  }
  .play-header {
    height:66px;
  }
  .play-header .brand {
    font-size:15px;
    gap:6px;
  }
  .play-header .brand img {
    width:26px;
    height:26px;
  }
  .play-header .header-tools {
    width:auto;
    gap:7px;
  }
  .play-header .icon-button {
    width:33px;
    height:33px;
  }
  .back-label {
    display:none;
  }
  .back-link {
    width:73px;
  }
  .game-title {
    padding:18px 0 12px;
  }
  .game-title h1 {
    font-size:29px;
    margin-top:5px;
  }
  .game-title .eyebrow {
    font-size:7px;
  }
  .scorebar {
    padding:0 5px 9px;
  }
  .scorebar strong {
    font-size:25px;
  }
  .scorebar>div>span {
    font-size:7px;
    letter-spacing:1.2px;
  }
  .board-wrap {
    border-radius:13px;
    box-shadow:0 4px 0 #d8ddcb;
  }
  .overlay-content>h2 {
    font-size:28px;
    margin:9px 0;
  }
  .overlay-content>p {
    font-size:11px;
    max-width:225px;
    margin-bottom:18px;
  }
  .overlay-mascot {
    margin-bottom:18px;
  }
  .overlay-mascot img {
    width:50px;
    height:50px;
    border-radius:14px;
  }
  .overlay-content>.eyebrow {
    font-size:6px;
  }
  .overlay-content .button {
    min-height:44px;
    font-size:12px;
  }
  .overlay-content>a {
    font-size:9px;
    margin-top:9px;
  }
  .game-under {
    margin-top:12px;
    font-size:8px;
    gap:5px;
  }
  .game-under .text-button {
    font-size:8px;
  }
  .game-overlay.is-result .overlay-content>h2 {
    font-size:27px;
  }
  .game-overlay.is-result .overlay-mascot {
    display:none;
  }
  .game-overlay.is-result .overlay-content>p {
    font-size:10px;
  }
  .result-summary {
    margin:5px 0 14px;
    gap:32px;
  }
  .result-summary>div>strong {
    font-size:36px;
  }
  .touch-controls {
    display:grid;
    grid-template:repeat(3,38px)/repeat(3,49px);
    margin-top:7px;
  }
  .keyboard-hint {
    display:none;
  }
  .play-footer {
    font-size:6px;
    letter-spacing:1.3px;
    padding:18px 0 max(18px,env(safe-area-inset-bottom));
  }
  .privacy-content {
    margin-top:40px;
  }
  .privacy-content h1 {
    font-size:39px;
  }
  .privacy-content>p {
    font-size:13px;
  }
  .privacy-content h2 {
    font-size:21px;
  }
  .privacy-content li {
    font-size:12px;
  }
}

@media(pointer:coarse) {
  .touch-controls {
    display:grid;
  }
  .keyboard-hint {
    display:none;
  }
  .direction {
    min-height:40px;
  }
  .icon-button {
    min-width:40px;
    min-height:40px;
  }
}

@media(max-width:370px) {
  .site-shell {
    padding:0 17px;
  }
  .hero h1 {
    font-size:48px;
  }
  .hero-copy>.eyebrow {
    font-size:7px;
  }
  .brand {
    font-size:16px;
  }
  .site-header .icon-button {
    min-width:35px;
    min-height:35px;
  }
  .daily-card .eyebrow {
    font-size:5px;
  }
  .daily-card h3 {
    font-size:11px;
  }
  .daily-card p {
    font-size:8px;
  }
  .game-overlay {
    padding:12px;
  }
  .overlay-mascot {
    margin-bottom:13px;
  }
  .overlay-content>h2 {
    font-size:24px;
  }
  .overlay-content>p {
    font-size:10px;
  }
  .play-header .brand {
    font-size:13px;
  }
  .play-header .brand img {
    width:23px;
    height:23px;
  }
  .play-header .icon-button {
    min-width:34px;
    min-height:34px;
  }
  .back-link {
    width:62px;
  }
  .game-under {
    font-size:7px;
  }
  .game-under .text-button {
    font-size:7px;
  }
}

@media(max-height:540px) and (orientation:landscape) {
  .play-header {
    height:55px;
  }
  .game-title {
    padding:10px 0;
  }
  .game-title h1 {
    font-size:23px;
  }
  .game-layout {
    max-width:310px;
  }
  .game-sidebar {
    display:none;
  }
  .touch-controls {
    display:none;
  }
  .game-center {
    max-width:310px;
  }
  .overlay-content .overlay-mascot {
    display:none;
  }
  .overlay-content>h2 {
    font-size:25px;
  }
  .game-overlay .overlay-content>a {
    margin-top:5px;
  }
  .keyboard-hint,.play-footer {
    display:none;
  }
  .game-under {
    margin-top:5px;
  }
}

.mobile-bests {
  display:none;
}

@media(min-width:761px) {
  .game-layout {
    --arcade-size:clamp(280px,calc(100svh - 305px),520px);
    grid-template-columns:180px minmax(0,var(--arcade-size)) 180px;
  }
  .game-title {
    padding:18px 0 12px;
  }
  .game-center {
    width:var(--arcade-size);
    max-width:100%;
  }
  .play-footer {
    padding:18px 0;
  }
  .game-sidebar {
    padding-top:80px;
  }
}

@media(min-width:761px) and (max-width:1050px) {
  .game-layout {
    grid-template-columns:155px minmax(0,var(--arcade-size));
  }
}

@media(max-width:540px) {
  .mobile-bests {
    display:inline-flex;
  }
  .site-header {
    gap:8px;
  }
  .site-header .header-tools {
    gap:6px;
  }
  .game-center {
    max-width:min(100%,calc(100svh - 345px));
    margin:auto;
  }
  .overlay-content>h2 {
    font-size:clamp(22px,6vw,28px);
  }
}

@media(max-width:540px) and (max-height:700px) {
  .game-title {
    padding:10px 0 8px;
  }
  .game-title h1 {
    font-size:25px;
  }
  .game-center {
    max-width:min(100%,calc(100svh - 340px));
  }
  .touch-controls {
    grid-template-rows:repeat(3,34px);
    margin-top:3px;
  }
  .direction {
    min-height:34px;
  }
  .play-footer {
    display:none;
  }
  .game-overlay .overlay-mascot {
    display:none;
  }
  .overlay-content>.eyebrow {
    font-size:5px;
  }
  .overlay-content>h2 {
    font-size:23px;
  }
  .overlay-content>p {
    font-size:10px;
    margin-bottom:13px;
  }
  .overlay-content .button {
    min-height:40px;
  }
  .game-overlay.is-result .overlay-content>h2 {
    font-size:22px;
  }
  .result-summary>div>strong {
    font-size:27px;
  }
  .result-summary {
    margin:0 0 10px;
  }
  .game-overlay.is-result .overlay-content>p {
    font-size:9px;
    margin-bottom:8px;
  }
  .game-under {
    margin-top:9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
}

/* Landscape phones need one compact arcade row. Keep this after the desktop
   breakpoints so a wide, short phone cannot inherit an empty sidebar column. */
@media(max-height:540px) and (orientation:landscape) {
  .play-shell { padding:0 max(16px,env(safe-area-inset-left)); }
  .play-header { height:48px; }
  .game-title { padding:5px 0 8px; }
  .game-title .eyebrow { display:none; }
  .game-title h1 { font-size:20px; line-height:1.15; margin:0; }
  .game-layout { display:block; max-width:none; }
  .game-sidebar { display:none; }
  .game-center {
    --landscape-board:min(400px,calc(100svh - 100px));
    display:grid;
    grid-template-columns:var(--landscape-board) 145px;
    grid-template-rows:auto 1fr auto;
    column-gap:24px;
    width:max-content;
    max-width:100%;
    margin:auto;
  }
  .board-wrap { grid-column:1; grid-row:1 / 4; width:var(--landscape-board); }
  .scorebar { grid-column:2; grid-row:1; padding:3px 0 8px; gap:9px; }
  .scorebar>div { min-width:0; }
  .scorebar strong { font-size:22px; }
  .scorebar>div>span { font-size:6px; letter-spacing:.5px; }
  .game-under { grid-column:2; grid-row:3; flex-direction:column; margin:3px 0 0; gap:0; text-align:center; }
  .game-under>span { font-size:8px; line-height:1.4; }
  .touch-controls { grid-column:2; grid-row:2; display:grid; grid-template:repeat(3,34px)/repeat(3,43px); gap:3px; align-self:center; margin:4px 0; }
  .direction { min-height:34px; font-size:19px; }
  .keyboard-hint,.play-footer,.overlay-mascot { display:none; }
  .game-overlay { padding:12px; }
  .overlay-content>.eyebrow { font-size:5px; }
  .overlay-content>h2,.game-overlay.is-result .overlay-content>h2 { font-size:22px; margin:8px 0; }
  .overlay-content>p { font-size:10px; margin-bottom:14px; }
  .overlay-content .button { min-height:39px; min-width:150px; font-size:11px; }
  .overlay-content>a { font-size:9px; margin-top:6px; }
  .result-summary { gap:24px; margin:0 0 12px; }
  .result-summary>div>strong { font-size:28px; }
}

/* A quiet little record player, and a mixer that works with fingers or keys. */
#effects-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.countdown { z-index:4; text-shadow:0 5px 0 #cbd6b7; }
.board-pop { z-index:4; }
#score { display:inline-block; transform-origin:center; }
.now-playing { display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid #dddfcf; border-radius:12px; background:#efefe3; padding:10px 14px; margin-top:15px; min-height:48px; }
.now-playing:hover { background:#e8ebdb; }
.now-playing strong { display:block; font-size:11px; letter-spacing:.1px; }
.now-playing small { display:block; font-size:9px; color:#757e68; margin-top:3px; }
.mixer-symbol { margin-left:auto; font-size:23px; color:#7b886b; transform:rotate(90deg); }
.equalizer { display:flex; align-items:center; justify-content:center; gap:3px; width:26px; height:24px; flex-shrink:0; }
.equalizer i { width:3px; height:7px; border-radius:3px; background:#869d6b; }
.equalizer i:nth-child(2) { height:17px; }
.equalizer i:nth-child(3) { height:12px; }
.equalizer i:nth-child(4) { height:19px; }
[data-music-playing=true] .equalizer i { animation:equalize .85s ease-in-out infinite alternate; }
[data-music-playing=true] .equalizer i:nth-child(2) { animation-delay:-.6s; }
[data-music-playing=true] .equalizer i:nth-child(3) { animation-delay:-.25s; }
[data-music-playing=true] .equalizer i:nth-child(4) { animation-delay:-.45s; }
@keyframes equalize { from { transform:scaleY(.35); } to { transform:scaleY(1); } }
.track-card { display:flex; gap:20px; align-items:center; padding:21px 19px; background:linear-gradient(130deg,#ebe7d3,#e1e8d2); border:1px solid #d9ddc9; border-radius:15px; }
.record-art { position:relative; display:grid; place-items:center; width:87px; height:87px; flex:none; border-radius:50%; background:repeating-radial-gradient(circle,#374635 0 2px,#43503b 3px 4px); box-shadow:4px 6px 0 #bfc8ad; }
.record-art span { display:grid; place-items:center; border-radius:50%; width:36px; height:36px; background:#eea16b; color:#4a5036; font-size:27px; }
.record-art:after { content:''; position:absolute; width:5px; height:5px; background:#f7edcf; border-radius:50%; }
[data-music-playing=true] .record-art { animation:record-spin 12s linear infinite; }
@keyframes record-spin { to { transform:rotate(360deg); } }
.track-copy { min-width:0; }
.track-copy .eyebrow { font-size:6px; letter-spacing:1px; }
.track-copy>strong { display:block; font-family:var(--display); font-size:23px; letter-spacing:-.7px; margin:8px 0 6px; }
.track-copy>small { display:block; font-size:10px; line-height:1.5; color:#738061; }
.track-preview { display:block; border:1px solid #c4cbb5; border-radius:20px; font-size:10px; font-weight:bold; padding:9px 13px; min-height:36px; margin-top:12px; background:#f7f6e9; }
.track-preview:hover { background:#fffdf4; }
.audio-status { margin:12px 0 4px; font-size:11px; color:#657454; min-height:16px; }
.volume-row { display:grid; grid-template-columns:86px 1fr 38px; align-items:center; gap:10px; padding:10px 0 14px; font-size:11px; color:#69765c; }
.volume-row input { width:100%; min-width:0; height:32px; accent-color:#819567; cursor:pointer; }
.volume-row output { font-variant-numeric:tabular-nums; text-align:right; font-size:11px; }
.audio-test-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 0 10px; }
.audio-test-row .text-button { font-size:10px; color:#576c44; min-height:40px; }
.audio-test-row>span { max-width:116px; color:var(--muted); font-size:9px; line-height:1.5; text-align:right; }
.effects-setting { border-top:1px solid var(--line); border-bottom:none; }
.effects-setting select { max-width:50%; background:#ebeedd; color:#4b5d3d; border:1px solid #c8cfb8; border-radius:9px; padding:10px 9px; min-height:42px; font:inherit; font-size:12px; }
select:focus-visible { outline:3px solid #527ba5; outline-offset:3px; }
.motion-note { color:var(--muted); font-size:10px; line-height:1.65; padding:0 0 8px; }
[data-effects=off] .equalizer i, [data-effects=off] .record-art, [data-effects=subtle] .record-art { animation:none; }
.play-header .header-tools { width:auto; flex-shrink:0; }
@media(min-width:761px) and (min-height:541px) { .game-layout { --arcade-size:clamp(280px,calc(100svh - 355px),520px); } .keyboard-hint { margin-top:15px; } }
@media(max-width:540px) {
  .now-playing { margin-top:9px; min-height:44px; padding:7px 11px; }
  .now-playing strong { font-size:10px; } .now-playing small { font-size:8px; }
  .play-header .back-link { width:40px; }
  .play-header .brand { font-size:13px; }
  .game-center { max-width:min(100%,calc(100svh - 385px)); }
  .track-card { padding:16px 12px; gap:13px; }
  .record-art { width:66px; height:66px; }
  .track-copy>strong { font-size:20px; }
  .track-copy>small { font-size:9px; }
  .track-copy .eyebrow { font-size:5px; letter-spacing:.7px; }
  .volume-row { grid-template-columns:79px 1fr 34px; gap:7px; }
}
@media(max-height:540px) and (orientation:landscape) { .now-playing { display:none; } }
@media(prefers-reduced-motion:reduce) { .equalizer i, .record-art { animation:none!important; } }
.volume-row input { appearance:none; background:transparent; }
.volume-row input::-webkit-slider-runnable-track { height:5px; border-radius:5px; background:linear-gradient(to right,#819567 var(--volume),#d8ddce var(--volume)); }
.volume-row input::-webkit-slider-thumb { appearance:none; width:17px; height:17px; border-radius:50%; margin-top:-6px; background:#819567; border:2px solid #f6f4eb; box-shadow:0 0 0 1px #819567; }
.volume-row input::-moz-range-track { height:5px; border-radius:5px; background:#d8ddce; }
.volume-row input::-moz-range-progress { height:5px; border-radius:5px; background:#819567; }
.volume-row input::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#819567; border:2px solid #f6f4eb; box-shadow:0 0 0 1px #819567; }
@media(max-width:540px) and (max-height:700px) {
  .game-center { max-width:min(100%,max(240px,calc(100svh - 345px))); }
  .now-playing { display:none; }
}
@media(max-width:540px) and (max-height:700px) and (orientation:portrait) {
  .play-header { height:56px; }
  .game-title { padding:6px 0; }
}