:root {
  color-scheme: light;
  --ink: #49335f;
  --round: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--round);
  -webkit-font-smoothing: antialiased;
  background: #de7828 url('assets/wood-background.webp') center / cover fixed no-repeat;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, canvas:focus-visible { outline: 3px solid #55358d; outline-offset: 4px; }
button:disabled { opacity: .4; cursor: default; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-defs { display: none; }
.app-shell { min-height: 100vh; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }

/* The entire scoreboard lives in one responsive grid: no overlapping controls. */
.arcade-bar {
  --button-size: 48px;
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--button-size) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: min(900px, 100%);
  min-height: 82px;
  margin: 0 auto;
  padding: 10px 16px;
  border: 3px solid #a078d3;
  border-radius: 27px;
  background: linear-gradient(180deg, #e4cfff 0%, #d3b4f4 52%, #c6a0ed 100%);
  box-shadow: inset 0 0 0 3px #efddff, inset 0 -6px 0 #b68be131, 0 4px 0 #8759b9, 0 8px 14px #7b431b26;
}
.arcade-button {
  display: grid;
  place-items: center;
  width: var(--button-size);
  height: var(--button-size);
  padding: 0;
  border: 2px solid #a275d4;
  border-radius: 50%;
  background: linear-gradient(150deg, #f5e7ff, #cfacf0 70%);
  color: #8654bb;
  box-shadow: inset 0 0 0 3px #ead7ff, 0 3px 0 #a276ce;
  transition: transform .12s, background .12s, box-shadow .12s;
}
.arcade-button svg { width: 24px; height: 24px; stroke-width: 2.3; }
.arcade-button:active, .arcade-button[aria-expanded="true"] {
  transform: translateY(2px);
  background: #bd91e4;
  box-shadow: inset 0 2px 4px #8754b847, inset 0 0 0 3px #dcbcf8, 0 1px 0 #a276ce;
}
.arcade-actions { display: flex; gap: 10px; }
.arcade-dashboard { display: grid; justify-self: center; width: min(340px, 100%); min-width: 0; gap: 7px; }
.arcade-readouts { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.arcade-score, .arcade-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 2px 12px;
  border: 1px solid #b88be2;
  border-radius: 10px;
  background: #b17cdb;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: inset 0 2px 2px #9361bc30, 0 1px 0 #f1dcff;
  text-shadow: 0 1px 1px #73499d80;
}
.arcade-timer { gap: 4px; font-size: 15px; padding-inline: 8px; }
.arcade-timer svg { width: 15px; height: 15px; }
.arcade-timer.urgent { background: #a94367; border-color: #943154; }
.arcade-progress {
  height: 14px;
  overflow: hidden;
  border: 2px solid #b286da;
  border-radius: 20px;
  background: #8054ae;
  box-shadow: inset 0 2px 3px #54327366, 0 1px 0 #ead1ff;
}
#score-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(#fff3a8, #ffd45a);
  box-shadow: inset 0 2px 0 #fff7c480;
  transition: width .18s ease-out;
}

/* Panels are anchored to the scoreboard and share its width constraints. */
.arcade-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(320px, 100%);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 3px solid #a078d3;
  border-radius: 22px;
  background: #f3e8ff;
  box-shadow: inset 0 0 0 2px #fcf7ff, 0 5px 0 #8759b9, 0 12px 25px #6b351b40;
  animation: panel-in .15s ease-out;
}
.palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.palette-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 80px;
  padding: 7px;
  border: 2px solid #ddc8ef;
  border-radius: 16px;
  background: #fff9;
  transition: background .15s, border-color .15s;
}
.palette-card.active { border-color: #a178d1; background: #dbc1f4; box-shadow: inset 0 0 0 2px #f7eaff; }
.palette-card .mini-board { display: block; width: 60px; height: 60px; background-size: 100% 100%; background-position: left center; background-repeat: no-repeat; transform: rotate(-13deg); }
.palette-card .shape-mini { transform: none; }
.palette-card > span:last-child { display: none; }
.palette-card.locked::after { content: '✦ ' attr(data-cost); position: absolute; bottom: 3px; font-size: 10px; }
.mode-switch { display: flex; gap: 5px; padding: 5px; border-radius: 15px; background: #e2d3f1; }
.mode-switch button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 6px; border: 0; border-radius: 11px; background: transparent; color: #75558f; font-size: 13px; }
.mode-switch svg { width: 18px; height: 18px; }
.mode-switch .selected { background: #fff; color: #7146a5; box-shadow: 0 2px 3px #8b65ab1f; }
.settings-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.panel-button { display: grid; place-items: center; min-height: 46px; padding: 0; border: 2px solid #dac0ed; border-radius: 13px; background: #fff9; color: #8157aa; }
.panel-button[aria-pressed="false"] { background: #e4d6ef; color: #85718f; }
.settings-wallet { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; color: #90653e; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.settings-wallet > span:first-child { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #ffebaf; border-radius: 50%; background: #f7ce68; color: #b77e2c; font-size: 18px; }

.play-area { padding: 24px 0 0; }
.game-stage { position: relative; isolation: isolate; width: min(680px, 100%); margin: 0 auto; }
canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
canvas.pointer-focus:focus-visible { outline: none; }
.overlay { position: absolute; inset: 40px 0 20px; display: grid; place-items: center; z-index: 3; background: #6b3a2280; backdrop-filter: blur(5px); border-radius: 30px; }
.overlay-card { background: #fffffff2; text-align: center; border: 1px solid #fff; border-radius: 26px; box-shadow: 0 14px 70px #3e265529; padding: 28px 30px; width: min(330px, 90%); animation: panel-in .2s ease-out; }
.overlay-icon { font-size: 29px; color: #a58bd7; background: #f1ebfc; width: 61px; height: 61px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; }
.overlay-kicker { font-size: 9px; letter-spacing: 1.6px; color: #a299b2; }
.overlay h2 { font-size: 28px; letter-spacing: -.8px; margin: 10px 0; }
.overlay p { font-size: 13px; line-height: 1.7; color: #92899e; margin: 0 0 22px; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 15px; background: #8968c9; color: #fff; border: 0; border-radius: 13px; min-height: 46px; padding: 10px 20px; font-size: 13px; width: 100%; }
.primary-button svg { width: 17px; height: 17px; }
.pop-toast { position: absolute; left: 50%; bottom: 28px; transform: translate(-50%, 10px); opacity: 0; background: #3f354eea; color: #fff; white-space: nowrap; padding: 10px 16px; border-radius: 20px; font-size: 11px; transition: .25s; pointer-events: none; z-index: 5; }
.pop-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.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; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) {
  .arcade-button:hover { background: linear-gradient(150deg, #fff8ff, #dfbdf9); }
  .panel-button:hover:not(:disabled), .palette-card:hover { background: #fff; border-color: #b08ad7; }
  .primary-button:hover { background: #7653b7; }
}
@media (max-width: 740px) {
  .app-shell { width: 100%; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); padding-top: max(6px, env(safe-area-inset-top)); }
  .arcade-bar { width: calc(100% - 12px); }
  .play-area { padding-top: 12px; }
  .game-stage { width: 100%; }
  canvas:focus-visible { outline-offset: -3px; }
}
@media (max-width: 520px) {
  .arcade-bar { --button-size: 44px; min-height: 76px; gap: 8px; padding: 9px 8px; border-radius: 23px; }
  .arcade-actions { gap: 6px; }
  .arcade-button svg { width: 22px; height: 22px; }
  .arcade-readouts { gap: 4px; }
  .arcade-score { min-height: 25px; padding: 2px 7px; font-size: 15px; }
  .arcade-timer { min-height: 25px; padding: 2px 5px; gap: 3px; font-size: 12px; }
  .arcade-timer svg { width: 12px; height: 12px; }
  .arcade-progress { height: 12px; }
  .overlay { inset: 20px 0 0; }
  .overlay-card { padding: 20px; width: min(300px, 90%); }
  .overlay-icon { height: 44px; width: 44px; font-size: 24px; margin-bottom: 10px; }
  .overlay h2 { font-size: 23px; }
  .overlay p { font-size: 12px; margin-bottom: 15px; }
  .overlay-kicker { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

a.arcade-button { text-decoration: none; }
a.arcade-button:focus-visible { outline: 3px solid #55358d; outline-offset: 4px; }
.game-page-title{font-size:20px;text-align:center;color:#4c2516;margin:0 0 14px}.how-to{max-width:760px;margin:32px auto;padding:22px;border-radius:18px;background:#fff2d9e8;color:#4b2d1c;font-size:15px;line-height:1.7}.how-to h2{font-size:23px}.how-to a{color:inherit}