/* Violet's Little Wonders — UI styling. Pixel frames are built from borders,
   stepped clip-paths and hard shadows (no images), matching the game palette. */
:root {
  --ink: #3d2a45; --plum: #4a3350; --plum2: #6e5577; --lilac: #cdb8ef; --lilac0: #efe3ff; --lilac2: #a58fd3;
  --cream: #fffbf2; --cream1: #fbefd9; --cream2: #ead5b6; --pink: #f8c3d3; --pink0: #ffe6ee; --rose: #e897b2; --rose2: #c06f93;
  --sage: #b9d8a0; --sage2: #8fb885; --butter: #ffe699; --butter2: #f4c76e; --sky: #b7ddf0; --sky2: #8abbdb;
  --ts: 1;
  --f: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html { touch-action: none; -webkit-text-size-adjust: 100%; }
.book-body, .panel, #decoBar .deco-row { touch-action: pan-y pan-x; }
html, body { margin: 0; height: 100%; background: #2f2436; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--f); color: var(--ink); -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none; }
body.bigtext { --ts: 1.18; }
#app { position: fixed; inset: 0; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#game { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
[hidden] { display: none !important; }

/* ---------- pixel frame ---------- */
.frame {
  background: var(--cream);
  border: 3px solid var(--plum);
  box-shadow: inset -3px -3px 0 var(--cream2), inset 3px 3px 0 #fff, 0 4px 0 rgba(74, 51, 80, .45);
  clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
}
.btn {
  font: inherit; font-size: calc(17px * var(--ts)); font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--cream); border: 3px solid var(--plum); padding: 8px 16px; min-height: 44px; min-width: 44px;
  box-shadow: inset -3px -3px 0 var(--cream2), inset 3px 3px 0 #fff, 0 3px 0 var(--plum);
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; transition: transform .06s;
}
.btn:hover { background: #fff; }
.btn:active, .btn.down { transform: translateY(2px); box-shadow: inset -3px -3px 0 var(--cream2), inset 3px 3px 0 #fff, 0 1px 0 var(--plum); }
.btn.primary { background: var(--pink); box-shadow: inset -3px -3px 0 var(--rose), inset 3px 3px 0 var(--pink0), 0 3px 0 var(--plum); }
.btn.primary:hover { background: #ffd4e0; }
.btn.big { font-size: calc(24px * var(--ts)); padding: 10px 34px; }
.btn.sq { padding: 6px; width: 44px; }
.btn:focus-visible, .tab:focus-visible, input:focus-visible, .cell:focus-visible { outline: 3px dashed var(--rose2); outline-offset: 3px; }
.btn img, .chip img { width: 24px; height: 24px; image-rendering: pixelated; }
.soft { color: var(--plum2); }
.small { font-size: calc(14px * var(--ts)); }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); pointer-events: none; gap: 8px; }
#hud > * { pointer-events: auto; }
.hud-r { display: flex; gap: 8px; align-items: center; }
.chip {
  background: rgba(255, 251, 242, .94); border: 3px solid var(--plum); padding: 6px 12px; font-size: calc(16px * var(--ts)); font-weight: 600;
  display: inline-flex; gap: 8px; align-items: center; box-shadow: 0 3px 0 rgba(74, 51, 80, .45); max-width: min(60vw, 520px);
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
}
.chip.small { padding: 6px 10px; min-height: 44px; }
#objective { transition: transform .3s, opacity .3s; line-height: 1.2; }
#objective.pulse { animation: pulse .7s ease 2; }
#objective .obj-ico { width: 10px; height: 10px; background: var(--rose); flex: none; box-shadow: 0 0 0 2px var(--plum); transform: rotate(45deg); }
#objective .obj-ico.pic { width: 40px; height: 34px; background: var(--lilac0); box-shadow: 0 0 0 2px var(--plum); transform: none; display: flex; align-items: center; justify-content: center; }
#objective .obj-ico.pic canvas { width: 36px; height: 32px; }
#objective { cursor: pointer; }
#objective.empty { opacity: 0; transform: translateY(-8px); }
@keyframes pulse { 50% { transform: scale(1.05); background: var(--pink0); } }
.btn.icon b { font-size: calc(15px * var(--ts)); }

/* ---------- prompt & toasts ---------- */
.prompt {
  position: absolute; left: 50%; bottom: 28%; transform: translate(-50%, -100%); background: rgba(255, 251, 242, .95); border: 3px solid var(--plum);
  padding: 5px 12px 5px 6px; font-weight: 600; font-size: calc(16px * var(--ts)); display: flex; align-items: center; gap: 8px; pointer-events: auto; cursor: pointer;
  box-shadow: 0 3px 0 rgba(74, 51, 80, .5); animation: pop .18s ease-out;
}
.prompt .key { background: var(--plum); color: var(--cream); padding: 2px 7px; font-size: calc(14px * var(--ts)); }
body.touch .prompt .key { display: none; }
@keyframes pop { from { transform: translate(-50%, -100%) scale(.7); opacity: 0; } }
#toasts { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 520px); }
.toast { background: var(--cream); border: 3px solid var(--plum); padding: 7px 14px; font-weight: 600; font-size: calc(16px * var(--ts)); box-shadow: 0 3px 0 rgba(74, 51, 80, .45); animation: toastIn .3s ease-out; display: flex; gap: 8px; align-items: center; text-align: center; }
.toast img { width: 32px; height: 32px; image-rendering: pixelated; }
.toast.gold { background: var(--butter); }
.toast.out { animation: toastOut .35s ease-in forwards; }
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }

/* ---------- dialogue ---------- */
#dialog {
  position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 760px);
  padding: 14px 18px 14px 14px; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; min-height: 116px; animation: dlgIn .18s ease-out;
}
@keyframes dlgIn { from { transform: translate(-50%, 12px); opacity: 0; } }
.portrait { flex: none; width: 84px; height: 76px; background: var(--lilac0); border: 3px solid var(--plum); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.portrait canvas { width: 80px; height: 72px; }
.portrait.none { display: none; }
.dlg-body { flex: 1; min-width: 0; }
.who { position: absolute; top: -22px; left: 14px; font-weight: 600; font-size: calc(17px * var(--ts)); color: var(--plum); background: var(--pink); border: 3px solid var(--plum); padding: 2px 12px; letter-spacing: .5px; box-shadow: inset -2px -2px 0 var(--rose); }
.who:empty { display: none; }
#dialog { overflow: visible; clip-path: none; margin-top: 24px; }
#dlgText { margin: 0; font-size: calc(19px * var(--ts)); line-height: 1.38; min-height: 2.6em; }
.w { visibility: hidden; border-radius: 3px; padding: 0 1px; margin: 0 -1px; cursor: pointer; }
.w.in { visibility: visible; }
.w.hl { background: var(--butter); box-shadow: 0 2px 0 var(--butter2); }
.w.said { background: var(--pink); }
.dlg-side { display: flex; flex-direction: column; gap: 8px; align-self: stretch; justify-content: flex-end; }
#dlgNext { width: 56px; min-height: 52px; font-size: 22px; animation: bob 1s steps(2) infinite; }
#dialog.typing #dlgNext { animation: none; opacity: .6; }
#dlgSay { font-size: 18px; }
.more { position: absolute; right: 16px; bottom: 8px; color: var(--rose2); font-size: 14px; animation: bob .8s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
#dialog.typing .more { visibility: hidden; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.choices .btn { font-size: calc(16px * var(--ts)); padding: 6px 12px; }
.choices .btn canvas { width: 60px; height: 45px; }
.choices .btn { min-height: 56px; }

/* ---------- reveal ---------- */
#reveal { background: #2f2436 !important; }
#reveal, #activity { position: absolute; inset: 0; background: rgba(47, 36, 54, .55); display: flex; align-items: center; justify-content: center; animation: fadeIn .25s; }
#revealCv, #actCv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); touch-action: none; cursor: pointer; }
@keyframes fadeIn { from { opacity: 0; } }
.r-top { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); color: var(--plum); background: var(--cream); border: 3px solid var(--plum); box-shadow: 0 3px 0 rgba(74,51,80,.45); padding: 6px 18px; font-size: calc(22px * var(--ts)); font-weight: 600; text-align: center; max-width: 92vw; pointer-events: none; transition: opacity .3s; }
.r-top:empty { display: none; }
.r-taps { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; pointer-events: none; }
.r-taps i { width: 22px; height: 22px; background: var(--cream); border: 3px solid var(--plum); transform: rotate(45deg); transition: background .15s, transform .15s; }
.r-taps i.on { background: var(--rose); transform: rotate(45deg) scale(1.25); }
.r-card { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(92vw, 520px); padding: 14px 20px 16px; text-align: center; animation: cardIn .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cardIn { from { transform: translate(-50%, 30px); opacity: 0; } }
.r-card h2 { margin: 2px 0 4px; font-size: calc(30px * var(--ts)); color: var(--plum); }
.r-card p { margin: 0 0 6px; font-size: calc(17px * var(--ts)); line-height: 1.35; }
.r-new { display: inline-block; background: var(--butter); border: 3px solid var(--plum); padding: 2px 10px; font-weight: 600; font-size: calc(14px * var(--ts)); }
.r-new.dup { background: var(--sky); }
.r-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.r-btns.col { flex-direction: column; align-items: center; }
.act-btns { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 96vw; }
.act-btns .btn { font-size: calc(18px * var(--ts)); }
.act-btns .btn canvas { width: 48px; height: 48px; }
.act-btns.many { max-height: 34vh; overflow-y: auto; touch-action: pan-y; }
.act-btns.many .btn { min-width: 64px; }

/* ---------- modals ---------- */
.modal { position: absolute; inset: 0; background: rgba(47, 36, 54, .6); display: flex; align-items: center; justify-content: center; padding: 12px; animation: fadeIn .2s; }
.panel { width: min(94vw, 480px); padding: 18px 22px; max-height: 94vh; overflow: auto; }
.panel h2 { margin: 0 0 10px; color: var(--plum); }
.panel h3 { margin: 10px 0 4px; font-size: calc(17px * var(--ts)); color: var(--rose2); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: calc(18px * var(--ts)); padding: 7px 0; font-weight: 600; }
.row.check { justify-content: flex-start; }
.row input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--rose2); }
input[type=range] { width: 52%; accent-color: var(--rose2); height: 28px; }
.controls-help p { margin: 3px 0; font-size: calc(15px * var(--ts)); }

/* ---------- scrapbook ---------- */
.book { width: min(96vw, 900px); height: min(92vh, 640px); display: flex; flex-direction: column; background: var(--cream1); padding: 0; }
.tabs { display: flex; gap: 4px; padding: 10px 10px 0; background: var(--lilac); border-bottom: 3px solid var(--plum); align-items: flex-end; flex-wrap: wrap; }
.tab { font: inherit; font-weight: 600; font-size: calc(17px * var(--ts)); border: 3px solid var(--plum); border-bottom: none; background: var(--lilac0); padding: 8px 14px; cursor: pointer; color: var(--ink); min-height: 44px; }
.tab.on { background: var(--cream1); transform: translateY(3px); }
.tabs .close { margin-left: auto; margin-bottom: 6px; }
.book-body { flex: 1; overflow: auto; padding: 14px; display: flex; gap: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; flex: 1; align-content: start; }
.land-head { grid-column: 1 / -1; font-weight: 600; color: var(--rose2); font-size: calc(17px * var(--ts)); margin-top: 6px; display: flex; justify-content: space-between; }
.cell { background: var(--cream); border: 3px solid var(--cream2); padding: 4px; display: flex; flex-direction: column; align-items: center; cursor: pointer; font: inherit; font-size: calc(13px * var(--ts)); color: var(--ink); min-height: 96px; }
.cell canvas { width: 72px; height: 72px; }
.cell.sel { border-color: var(--rose2); background: var(--pink0); }
.cell.miss { color: var(--plum2); }
.cell .star { color: var(--rose2); }
.detail { width: 300px; flex: none; background: var(--cream); border: 3px solid var(--cream2); padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.detail canvas { width: 144px; height: 144px; cursor: pointer; }
.detail h3 { margin: 4px 0; color: var(--plum); font-size: calc(22px * var(--ts)); }
.detail p { margin: 4px 0; font-size: calc(15px * var(--ts)); line-height: 1.35; }
.detail .meta { font-size: calc(14px * var(--ts)); color: var(--plum2); }
.lands { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; width: 100%; align-content: start; }
.land-card { background: var(--cream); border: 3px solid var(--plum); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.land-card canvas { width: 100%; aspect-ratio: 16 / 9; background: var(--lilac0); }
.land-card h3 { margin: 0; color: var(--plum); }
.land-card.locked { opacity: .6; }
.land-card .btn { align-self: stretch; }
.qlist { width: 100%; }
.q { background: var(--cream); border: 3px solid var(--cream2); padding: 8px 12px; margin-bottom: 8px; }
.q h4 { margin: 0 0 4px; color: var(--plum); font-size: calc(17px * var(--ts)); }
.q.done h4::after { content: " ✓"; color: var(--sage2); }
.q p { margin: 0; font-size: calc(15px * var(--ts)); }
.friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; width: 100%; align-content: start; }
.friend { background: var(--cream); border: 3px solid var(--cream2); padding: 10px; display: flex; gap: 10px; align-items: center; }
.friend canvas { width: 66px; height: 60px; flex: none; }
.friend p { margin: 2px 0 0; font-size: calc(14px * var(--ts)); }
.friend b { color: var(--plum); }
.dinofacts .friend canvas { width: 96px; height: 60px; }

/* ---------- title ---------- */
#title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#titleCv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.title-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 7vh 16px max(7vh, env(safe-area-inset-bottom)); text-align: center; pointer-events: none; }
.title-ui > * { pointer-events: auto; }
.title-ui h1 { font-size: clamp(34px, 6.4vw, 70px); margin: 0; color: var(--plum); line-height: 1; letter-spacing: 1px; background: var(--cream); border: 4px solid var(--plum); padding: 12px 28px 16px; box-shadow: inset -4px -4px 0 var(--cream2), inset 4px 4px 0 #fff, 0 6px 0 rgba(74, 51, 80, .45);
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)); }
.title-ui h1 span { display: block; font-size: .5em; color: var(--rose2); margin-bottom: 4px; }
.title-ui #installTip { margin-top: 6px; background: var(--butter); }
.title-ui .soft { color: var(--plum); background: rgba(255, 251, 242, .9); padding: 4px 12px; border: 2px solid var(--plum); margin-top: 14px; display: inline-block; }

#fade { position: absolute; inset: 0; background: #fffbf2; opacity: 0; pointer-events: none; transition: opacity .35s; }
#fade.on { opacity: 1; }
#fade.dark { background: #2f2436; }

/* ---------- touch ---------- */
#touchZone { position: absolute; left: 0; bottom: 0; width: 50%; height: 62%; display: none; }
#stick { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 3px solid rgba(255, 251, 242, .8); background: rgba(74, 51, 80, .25); display: none; pointer-events: none; }
#stick.on { display: block; }
#knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%; background: var(--cream); border: 3px solid var(--plum); transform: translate(-50%, -50%); }
#actBtn { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 78px; height: 78px; border-radius: 50%; font-size: 34px; color: var(--plum); background: var(--pink); border: 4px solid var(--plum); box-shadow: 0 4px 0 var(--plum), inset -4px -4px 0 var(--rose); display: none; font-family: var(--f); cursor: pointer; }
#actBtn.down { transform: translateY(3px); box-shadow: 0 1px 0 var(--plum), inset -4px -4px 0 var(--rose); }
body.touch #actBtn { display: block; }
#touchZone, #stick { display: none !important; }
body.touch.overlay #touchZone, body.touch.overlay #actBtn, body.touch.nomove #touchZone, body:not(.playing) #actBtn, body:not(.playing) #touchZone, body.dlg #actBtn, body.dlg #touchZone { display: none; }
@media (max-width: 640px) { #objective { font-size: calc(13px * var(--ts)); padding: 4px 8px; } #objective .obj-ico.pic { width: 30px; height: 26px; } #objective .obj-ico.pic canvas { width: 28px; height: 25px; } }

body.touch #dialog { bottom: max(10px, env(safe-area-inset-bottom)); }

/* ---------- decorate mode ---------- */
#decoBar { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(96vw, 820px); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
#decoBar .deco-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
#decoBar .cell { min-width: 82px; min-height: 84px; }
#decoBar .cell canvas { width: 48px; height: 48px; }
#decoBar .deco-tools { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
#decoBar .deco-tools span { font-weight: 600; font-size: calc(15px * var(--ts)); }

@media (max-width: 640px) {
  .book-body { flex-direction: column-reverse; }
  .detail { width: 100%; flex-direction: row; text-align: left; gap: 10px; }
  .detail canvas { width: 96px; height: 96px; flex: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .cell canvas { width: 56px; height: 56px; }
  #dlgText { font-size: calc(17px * var(--ts)); }
  .portrait { width: 60px; height: 56px; }
  .portrait canvas { width: 56px; height: 50px; }
  .btn.icon .lbl { display: none; }
  .chip { font-size: calc(14px * var(--ts)); }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition: none !important; } }
body.reduce * { animation-duration: .01ms !important; transition: none !important; }

/* floating remarks */
.bark { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; font-weight: 600; font-size: calc(17px * var(--ts)); max-width: min(90vw, 560px); animation: toastIn .25s ease-out; pointer-events: none; }
.bark canvas { width: 40px; height: 36px; flex: none; }
.bark.out { animation: toastOut .3s ease-in forwards; }

/* layering: dialogue always sits above the title, menus and overlays */
#title { z-index: 10; }
#reveal, #activity { z-index: 20; }
.modal { z-index: 30; }
#decoBar { z-index: 25; }
#dialog { z-index: 40; }
#toasts, .bark { z-index: 45; }
#fade { z-index: 60; }