/* Curio — cabinet de curiosités. Light theme by default, dark via [data-theme="dark"]. */
:root {
  --bg: #f4ecdd;
  --bg2: #ebe0cb;
  --paper: #fffaf0;
  --ink: #2b2118;
  --ink-soft: #6d5c4a;
  --line: #d6c6a8;
  --accent: #8a3b12;
  --accent-ink: #fffaf0;
  --gold: #c8901a;
  --star: #e0a400;
  --star-off: #cbbb9f;
  --wood: #8b5a33;
  --wood-hi: #b07b4b;
  --wood-lo: #5e3a1d;
  --cell: rgba(94, 58, 29, 0.10);
  --cell-line: rgba(94, 58, 29, 0.22);
  --shadow: 0 6px 18px rgba(60, 35, 10, 0.18);
  --ok: #2e7d32;
  --danger: #c62828;
  --daily: #2a5d8f;
  --it: 56px;
  font-synthesis: none;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #16110d;
  --bg2: #201812;
  --paper: #2a2019;
  --ink: #f3e9d8;
  --ink-soft: #b9a68b;
  --line: #4a3a2b;
  --accent: #e08a4f;
  --accent-ink: #1b130d;
  --gold: #e8b923;
  --star: #f2c94c;
  --star-off: #5a4a38;
  --wood: #5a3a22;
  --wood-hi: #7d5434;
  --wood-lo: #2e1d10;
  --cell: rgba(255, 230, 190, 0.06);
  --cell-line: rgba(255, 230, 190, 0.14);
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  --ok: #66bb6a;
  --danger: #ef5350;
  --daily: #6fa8dc;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(ellipse at 50% -10%, var(--bg2), transparent 60%);
  color: var(--ink);
  font: 16px/1.45 "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }
.noscript { padding: 2rem; text-align: center; }

.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 980px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#game.screen { height: 100vh; height: 100dvh; }

/* Top bar */
.bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.bar-brand { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.bar-title { font-size: 1.1rem; font-weight: 700; }
.bar-spacer { flex: 1; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper);
  display: inline-grid; place-items: center; cursor: pointer; font-size: 1.15rem;
}
.icon-btn:focus-visible, .btn:focus-visible, .bonus:focus-visible, .slot:focus-visible, .level-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Buttons */
.btn {
  border: 1px solid var(--line); background: var(--paper); border-radius: 14px;
  padding: 12px 18px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .08s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-big { font-size: 1.3rem; padding: 16px 22px; }
.btn-daily { border-color: var(--daily); color: var(--daily); }
.btn-daily.done { opacity: .75; }
.btn[disabled] { opacity: .45; cursor: default; }

/* Home */
.home-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 16px 24px; text-align: center; }
.home-hero { position: relative; width: 220px; height: 130px; margin-bottom: 4px; }
.hero-item { position: absolute; width: 96px; height: 96px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); animation: float 4s ease-in-out infinite; }
.hero-item.h1 { left: 62px; top: 0; width: 104px; height: 104px; z-index: 2; }
.hero-item.h2 { left: 0; top: 30px; animation-delay: -1.3s; transform: rotate(-12deg); }
.hero-item.h3 { right: 0; top: 30px; animation-delay: -2.6s; }
@keyframes float { 50% { translate: 0 -8px; } }
.home-title { font-size: clamp(2.6rem, 11vw, 3.6rem); margin: 0; letter-spacing: .06em; color: var(--accent); line-height: 1.05; }
.home-sub { margin: 2px 0 14px; color: var(--ink-soft); font-style: italic; font-size: 1.1rem; }
.home-stats { display: flex; gap: 8px; margin-bottom: 22px; }
.chip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 12px; }
.star { color: var(--star); }
.home-actions { display: grid; gap: 12px; width: min(340px, 100%); }
.home-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-foot { text-align: center; color: var(--ink-soft); font-size: .85rem; padding: 12px 16px 18px; }

/* Level map */
.levels-main { padding: 6px 16px 24px; }
.level-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 10px; }
.level-btn {
  width: 100%; aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; box-shadow: var(--shadow);
  font-weight: 700; font-size: 1.25rem;
}
.level-btn small { font-size: .8rem; letter-spacing: 1px; color: var(--star-off); }
.level-btn small .on { color: var(--star); }
.level-btn .tag { font-size: .7rem; font-weight: 400; color: var(--ink-soft); }
.level-btn[disabled] { opacity: .4; box-shadow: none; cursor: default; }
.level-btn.current { border: 2px solid var(--accent); }

/* HUD */
.hud { display: flex; justify-content: center; gap: 6px; padding: 0 12px; }
.hud-cell { flex: 1; max-width: 140px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px; text-align: center; display: grid; }
.hud-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.hud-cell b { font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-cell.warn b { color: var(--danger); animation: pulse .6s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .45; } }

.combo { height: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .2s; }
.combo.on { opacity: 1; }
.combo-text { font-weight: 700; color: var(--accent); }
.combo-bar { width: 90px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.combo-bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; }

/* Board */
.board-wrap { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; padding: 4px 10px; touch-action: none; }
.board { display: grid; gap: calc(var(--it) * .32) calc(var(--it) * .3); justify-content: center; align-content: center; }
.shelf { position: relative; width: calc(var(--it) * 3 + var(--it) * .36); padding: calc(var(--it) * .42) calc(var(--it) * .18) 0; }
.shelf .back { position: absolute; left: calc(var(--it) * .18); right: calc(var(--it) * .18); top: 0; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; }
.shelf .back .ghost { width: var(--it); height: calc(var(--it) * .6); overflow: hidden; display: grid; justify-items: center; opacity: .34; filter: grayscale(.7) brightness(.85); }
.shelf .back .ghost svg { width: calc(var(--it) * .78); height: calc(var(--it) * .78); }
.shelf .row { position: relative; display: grid; grid-template-columns: repeat(3, var(--it)); background: var(--cell); border: 1px solid var(--cell-line); border-bottom: 0; border-radius: 10px 10px 0 0; }
.shelf .plank {
  height: calc(var(--it) * .22); border-radius: 4px;
  background: linear-gradient(var(--wood-hi), var(--wood) 45%, var(--wood-lo));
  box-shadow: 0 4px 8px rgba(0,0,0,.25); margin: 0 calc(var(--it) * -.12);
}
.shelf .depth {
  position: absolute; right: calc(var(--it) * -.05); top: calc(var(--it) * .1); font-size: .72rem; font-weight: 700;
  background: var(--wood); color: #fff3df; border-radius: 999px; padding: 0 6px; line-height: 1.5; z-index: 3;
}
.slot { width: var(--it); height: var(--it); position: relative; outline-offset: -3px; }
.slot.target { background: radial-gradient(circle, color-mix(in srgb, var(--gold) 35%, transparent) 0 45%, transparent 70%); }
.item { position: absolute; inset: 4%; display: grid; place-items: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.item svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.22)); pointer-events: none; }
.item.sel svg { animation: bob .5s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
@keyframes bob { to { transform: translateY(-10%) scale(1.06); } }
.item.lifted { opacity: .25; }
.item.pop { animation: pop .34s ease-in forwards; }
@keyframes pop { 30% { transform: scale(1.25); } 100% { transform: scale(0); opacity: 0; } }
.item.arrive { animation: arrive .3s ease-out; }
@keyframes arrive { from { transform: translateY(-30%) scale(.75); opacity: .3; filter: grayscale(.7); } }
.item.domed { cursor: not-allowed; }
.dome {
  position: absolute; inset: -6% -4% -2%; border-radius: 50% 50% 14% 14% / 62% 62% 14% 14%;
  background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.85) 0 8%, rgba(255,255,255,.18) 18%, rgba(190,225,255,.22) 60%, rgba(160,200,240,.35));
  border: 2px solid rgba(170, 205, 235, .9); box-shadow: inset 0 -3px 6px rgba(120,160,200,.35);
  pointer-events: none;
}
.dome b { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #3d6f99; color: #fff; font: 700 .75rem/20px system-ui, sans-serif; text-align: center; }
.dome.crack { animation: crack .35s ease-out forwards; }
@keyframes crack { to { transform: scale(1.3); opacity: 0; } }
.shelf.locked .row { filter: grayscale(.6) brightness(.8); }
.lockov { position: absolute; inset: calc(var(--it) * .42) 0 calc(var(--it) * .22); display: grid; place-items: center; align-content: center; gap: 2px; z-index: 4; pointer-events: none; }
.lockov svg { width: calc(var(--it) * .8); height: calc(var(--it) * .8); filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.lockov span { display: flex; align-items: center; gap: 2px; font: 700 .75rem/1.4 system-ui, sans-serif; background: rgba(30,20,10,.75); color: #fff; border-radius: 999px; padding: 1px 8px 1px 4px; }
.lockov span svg { width: 18px; height: 18px; filter: none; }
.shelf.unlocking .lockov { animation: crack .5s ease-out forwards; }
.shelf.shake { animation: shake .3s; }
@keyframes shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.spark { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 50; animation: spark .6s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.float-score { position: fixed; z-index: 50; pointer-events: none; font-weight: 700; color: var(--accent); text-shadow: 0 1px 0 var(--paper); animation: rise .9s ease-out forwards; }
@keyframes rise { to { transform: translateY(-46px); opacity: 0; } }
.drag-ghost { position: fixed; z-index: 60; pointer-events: none; width: var(--it); height: var(--it); margin: calc(var(--it) * -.5) 0 0 calc(var(--it) * -.5); transform: scale(1.15); }
.drag-ghost svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 8px rgba(0,0,0,.35)); }

.loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--ink-soft); background: var(--bg); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bonus bar */
.bonus-bar { display: flex; justify-content: center; gap: 8px; padding: 8px 10px 12px; }
.bonus {
  position: relative; flex: 1; max-width: 104px; border: 1px solid var(--line); background: var(--paper); border-radius: 14px;
  padding: 6px 4px; display: grid; justify-items: center; cursor: pointer; box-shadow: var(--shadow);
}
.bonus-ic { font-size: 1.35rem; line-height: 1.1; }
.bonus-lb { font-size: .74rem; color: var(--ink-soft); }
.bonus-n { position: absolute; top: -7px; right: -5px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font: 700 .78rem/22px system-ui, sans-serif; text-align: center; padding: 0 5px; }
.bonus.empty .bonus-n { background: var(--star-off); }
.bonus.empty { opacity: .6; }
.bonus:active { transform: scale(.97); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(20, 12, 5, .55); backdrop-filter: blur(3px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal-card { width: min(380px, 100%); max-height: 90dvh; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35); text-align: center; animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(20px) scale(.97); opacity: 0; } }
.modal-card h2 { margin: 0 0 8px; color: var(--accent); font-size: 1.5rem; }
.modal-card p { margin: 6px 0; }
.modal-card .muted { color: var(--ink-soft); font-size: .92rem; }
.modal-art { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.modal-art svg { width: 64px; height: 64px; }
.modal-actions { display: grid; gap: 10px; margin-top: 16px; }
.big-stars { font-size: 2.6rem; letter-spacing: 4px; color: var(--star-off); margin: 4px 0; }
.big-stars span { display: inline-block; }
.big-stars .on { color: var(--star); animation: starIn .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.big-stars .on:nth-child(2) { animation-delay: .18s; }
.big-stars .on:nth-child(3) { animation-delay: .36s; }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } }
.score-line { font-size: 1.3rem; font-weight: 700; }
.reward { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 22%, transparent); font-weight: 700; }
.help-list { text-align: left; padding-left: 1.1rem; margin: 8px 0 0; }
.help-list li { margin: 6px 0; }

.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translate(-50%, -20px); z-index: 90; background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s; max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}