/* En målarateljé: tavlan överst, träpaletten under. Själva spelet ritas i canvas. */
:root {
  --ink: #3b2a4a;
  --ink-soft: #7a6a86;
  --cream: #fffaf0;
  --sun: #ffc93c;
  --rose: #ff6fae;
  --panel: rgba(255, 250, 240, .92);
  --display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: #f6ead8; color: var(--ink); font-family: var(--body); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hud { position: fixed; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-side { display: flex; gap: 6px; }
.pill { background: var(--panel); border-radius: 999px; padding: 6px 12px; box-shadow: 0 3px 0 rgba(90, 60, 30, .12), 0 8px 20px rgba(90, 60, 30, .12);
  font: 600 15px/1.1 var(--display); color: var(--ink); border: 0; }
button.pill { cursor: pointer; display: grid; place-items: center; min-width: 42px; min-height: 40px; padding: 6px 10px; touch-action: manipulation; }
button.pill:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
button.pill:disabled { opacity: .45; cursor: default; }
#muteBtn[aria-pressed="true"] { opacity: .45; }
.mid { display: grid; gap: 5px; justify-items: center; min-width: 0; }
.lvl { font: 700 17px/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 1px 0 #fff; }
.bar { width: min(220px, 100%); height: 11px; border-radius: 999px; background: rgba(120, 90, 50, .18); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ff9ac4, #ffcf3f, #7fdc5e, #6cc0f5); background-size: 220px 100%; transition: width .35s cubic-bezier(.2,.8,.2,1); }
.count { display: grid; justify-items: center; gap: 2px; font: 700 17px/1 var(--display); min-width: 54px; }
.count small { font: 800 10px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.stars { font-size: 12px; letter-spacing: 1px; color: var(--sun); text-shadow: 0 1px 0 #b3801a; min-height: 12px; }
.stars .off { color: rgba(120, 90, 50, .25); text-shadow: none; }
.undo { position: fixed; z-index: 2; font-size: 14px; }

.bubble { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 5; transform: translateX(-50%); width: min(340px, calc(100% - 24px)); box-sizing: border-box; background: var(--cream); color: var(--ink);
  border-radius: 16px; padding: 8px 14px; font: 600 14px/1.3 var(--body); box-shadow: 0 4px 0 rgba(90,60,30,.12), 0 14px 30px rgba(60,40,20,.22);
  text-align: center; transition: opacity .25s, transform .25s; pointer-events: none; }
.bubble b { font-family: var(--display); font-weight: 600; color: #d94b8a; }
.bubble.hide { opacity: 0; transform: translateX(-50%) translateY(-8px); }

.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(255, 240, 220, .5); padding: 16px; z-index: 10; touch-action: manipulation; }
.overlay.low { align-items: end; background: rgba(255, 240, 220, .2); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
.card { background: var(--cream); border-radius: 28px; padding: 20px 20px 18px; max-height: calc(100vh - 32px); overflow-y: auto; width: min(340px, 100%); box-sizing: border-box; text-align: center;
  box-shadow: 0 6px 0 rgba(90,60,30,.15), 0 30px 60px rgba(60,40,20,.25); display: grid; gap: 12px; animation: pop .45s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.card h1 { margin: 0; font: 700 38px/1.05 var(--display); color: #c9862a; }
.card h2 { margin: 0; font: 700 30px/1.05 var(--display); color: #c9862a; }
.card p { margin: 0; color: var(--ink-soft); font-weight: 600; line-height: 1.35; }
.card p b { color: var(--ink); }
.bigstars { font-size: 44px; letter-spacing: 6px; color: var(--sun); text-shadow: 0 3px 0 #c78d14; }
.bigstars span { display: inline-block; animation: starin .5s cubic-bezier(.2,1.6,.4,1) both; }
.bigstars span:nth-child(2) { animation-delay: .2s; } .bigstars span:nth-child(3) { animation-delay: .4s; }
.bigstars .off { color: #e5d8c3; text-shadow: none; }
@keyframes starin { from { transform: scale(0) rotate(-90deg); } }
.btn { font: 700 18px/1 var(--display); border: 0; border-radius: 16px; padding: 14px 12px; cursor: pointer; color: #fff;
  background: linear-gradient(#ff8cc0, #f1579b); box-shadow: 0 5px 0 #b73a72, 0 10px 18px rgba(183, 58, 114, .3); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b73a72; }
.btn.alt { background: linear-gradient(#fff, #f3eadb); color: var(--ink); box-shadow: 0 5px 0 #d9c7a8; }
.btn:focus-visible { outline: 3px solid #4cb8ff; outline-offset: 3px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.title { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 10px); text-align: center; pointer-events: none; }
.title h1 { margin: 0; font: 700 36px/1 var(--display); color: #fff; text-shadow: 0 3px 0 #e2a23a, 0 5px 0 #b8771c, 0 10px 20px rgba(160, 100, 30, .35); }
.title p { margin: 8px 0 0; font: 800 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #8c5a2b; }
.stats { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 72px); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; white-space: nowrap; font-size: 13px; padding: 5px 12px; }
.xp { display: block; width: 62px; height: 8px; border-radius: 99px; background: rgba(120, 90, 50, .2); overflow: hidden; }
.xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9ac4, #ffcf3f); }
.corner { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: max(10px, env(safe-area-inset-right, 0px)); }
.corner-left { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: max(10px, env(safe-area-inset-left, 0px)); }
.hall-nav { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); z-index: 1; }
.hall-nav.prev { left: max(10px, env(safe-area-inset-left, 0px)); }
.hall-nav.next { right: max(10px, env(safe-area-inset-right, 0px)); }
.daily-btn { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap; font-size: 14px; padding: 6px 16px !important; }
.win-extra { color: var(--ink) !important; font-size: 14px; }
.win-extra:empty { display: none; }
.card.wide { width: min(440px, 100%); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tab { font: 600 16px/1 var(--display); border: 0; border-radius: 12px; padding: 11px 6px; cursor: pointer; background: #efe3cd; color: var(--ink-soft); }
.tab[aria-selected="true"] { background: #f1cf96; color: var(--ink); }
.tab:focus-visible { outline: 3px solid #4cb8ff; outline-offset: 2px; }
.book { display: grid; gap: 12px; max-height: 62vh; overflow-y: auto; touch-action: pan-y; text-align: left; }
.book h3 { margin: 0 0 6px; font: 600 16px/1.2 var(--display); }
.book h3 small { font: 600 12px/1 var(--body); color: var(--ink-soft); }
.sketches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.sketch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; font-size: 11.5px; line-height: 1.2; color: var(--ink-soft); font-weight: 600; }
.sketch b { color: var(--ink); font: 600 13px/1.15 var(--display); }
.sketch canvas, .sketch .blank { width: 100%; aspect-ratio: 4 / 5; display: block; border-radius: 4px; box-shadow: 0 1px 3px rgba(70, 40, 20, .3); }
.sketch .blank { background: repeating-linear-gradient(45deg, #efe6d4 0 5px, #e8decb 5px 10px); }
.style-btn { font: 600 14px/1 var(--display); border: 0; border-radius: 10px; padding: 8px 10px; margin-top: 6px; background: #efe3cd; color: var(--ink); cursor: pointer; }
.style-btn[aria-pressed="true"] { background: #f1cf96; }
.medal { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; }
.medal small { display: block; color: var(--ink-soft); font-size: 12px; }
.medal .dots { display: flex; gap: 4px; }
.medal .dots i { width: 14px; height: 14px; border-radius: 50%; background: #e7dcc7; }
.medal .dots i.m0.on { background: #c08552; }
.medal .dots i.m1.on { background: #b9bfc7; }
.medal .dots i.m2.on { background: #f2c94c; }
.xp-line { color: #b0651d !important; font: 600 15px/1.2 var(--display); }
.detail-art { width: min(190px, 56vw, 34vh); margin: 0 auto; border: 7px solid #e7bd4d; box-shadow: 0 0 0 1px #8f5c12, 0 6px 14px rgba(70, 40, 20, .3); }
.bigstars.small { font-size: 22px; letter-spacing: 3px; text-shadow: 0 2px 0 #c78d14; }
.brushes { display: grid; gap: 8px; max-height: 56vh; overflow-y: auto; touch-action: pan-y; padding-bottom: 5px; }
.brush-card { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; text-align: left; border: 2px solid transparent; border-radius: 14px; padding: 9px 12px; cursor: pointer; color: var(--ink);
  background: linear-gradient(#fff, #f3eadb); box-shadow: 0 3px 0 #d9c7a8; font-family: var(--body); }
.brush-card[aria-pressed="true"] { border-color: #d94b8a; background: #fff3f8; }
.brush-card:focus-visible { outline: 3px solid #4cb8ff; outline-offset: 2px; }
.brush-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #f1cf96; font: 700 20px/1 var(--display); }
.brush-card b { display: block; font: 600 16px/1.15 var(--display); }
.brush-card small { display: block; margin-top: 2px; font-weight: 600; font-size: 13px; line-height: 1.25; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .card, .bigstars span { animation: none; }
  .bar i, .bubble { transition: none; }
}