* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1f3d1a; }
body { font: 15px/1.4 "Trebuchet MS", Verdana, "PingFang SC", sans-serif; color: #3b2412; user-select: none; }
canvas#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; }
.hidden { display: none !important; }

/* Wooden frame with parchment inside */
.wood {
  background: #f8dfab;
  border: 3px solid #4a2410;
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px #d9924a, inset 0 0 0 6px #9c5520, 0 5px 0 rgba(0, 0, 0, .35);
  padding: 10px 14px;
}
.btn {
  font: inherit; font-weight: bold; color: #fff4d6; cursor: pointer;
  background: #c26b2a; border: 2px solid #4a2410; border-radius: 5px; padding: 5px 12px;
  box-shadow: inset 0 -3px 0 #8a4516, inset 0 2px 0 #e59a55;
}
.btn:hover { background: #d67b35; }
.btn:active { box-shadow: inset 0 2px 0 #8a4516; transform: translateY(1px); }
.btn.ghost { background: #a38263; box-shadow: inset 0 -3px 0 #6e5238, inset 0 2px 0 #c4a383; }

/* ---------- HUD: quick buttons on top, map panel (minimap + status bar) below ---------- */
#top-right { position: fixed; top: 14px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#quick { display: flex; gap: 8px; }
#map-panel { position: relative; padding: 7px; display: flex; flex-direction: column; }
#minimap { width: 300px; height: 200px; image-rendering: pixelated; display: block; box-shadow: 0 0 0 1px rgba(74, 36, 16, .55); }
@media (max-height: 560px), (max-width: 700px) { #minimap { width: 187px; height: 125px; } }
#map-min {
  position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; padding: 0;
  font: bold 12px/1 sans-serif; color: #fff4d6; cursor: pointer;
  background: rgba(40, 24, 10, .62); border: 1px solid rgba(255, 244, 214, .45); border-radius: 4px;
}
#map-min:hover { background: rgba(40, 24, 10, .88); }
#minimap-tip {
  position: fixed; z-index: 60; pointer-events: none;
  transform: translate(calc(-100% - 14px), -50%);
  max-width: 250px; padding: 5px 8px;
  background: #2a1a0c; border: 1px solid #7a5a32; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  font: 12px "Trebuchet MS", Verdana, sans-serif; line-height: 1.35; text-align: left;
}
#minimap-tip b { display: block; color: #fff; }
#minimap-tip span { display: block; color: #d8bf90; font-size: 11px; }
#hud {
  margin-top: 7px; padding: 6px 9px 7px;
  background: linear-gradient(#f7e8c4, #eedcb2);
  border: 1px solid #d9b98a; border-radius: 6px;
  box-shadow: inset 0 1px 0 #fff8e4;
}
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hud-row + .hud-row { margin-top: 4px; }
.hud-row.sub { font-size: 12px; }
#day { font-weight: bold; color: #6a4a28; }
#weather { color: #8a6a4a; text-transform: capitalize; }
#clock { font-weight: bold; font-size: 16px; font-variant-numeric: tabular-nums; }
#gold-row {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
  background: #3b2412; color: #ffd54f; border-radius: 10px; font-size: 14px; font-weight: bold;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.coin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ffc107; box-shadow: inset -2px -2px 0 #e08e00, 0 0 0 2px #7a4a00; }

#bottom-right { position: fixed; right: 14px; bottom: 14px; display: flex; align-items: flex-end; gap: 10px; }
#hunger-box {
  width: 56px; padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.vbar { width: 18px; height: 150px; background: #3b2412; border: 2px solid #2a170a; border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.vbar i { display: block; width: 100%; height: 100%; background: #4caf50; transition: height .3s, background .3s; box-shadow: inset 3px 0 0 rgba(255, 255, 255, .25); }
#hunger { font-weight: bold; font-size: 13px; }
#hunger-box small { font-size: 10px; letter-spacing: 1px; color: #7a4a22; }
#hunger-box.low { animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }

#status {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(59, 36, 18, .9); color: #ffcc80; font-weight: bold;
  padding: 8px 18px; border-radius: 6px; border: 2px solid #ffb74d;
}


#notebook { position: fixed; top: 14px; left: 14px; width: 340px; max-height: 60vh; display: flex; flex-direction: column; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.panel-head .btn { padding: 0 8px; }
#notes { margin: 0; padding-left: 18px; overflow-y: auto; font-size: 13px; }
#notes li { margin-bottom: 4px; }
#notes:empty::before { content: "No mistakes yet. Keep talking!"; color: #8a6a4a; font-style: italic; margin-left: -18px; }
.nb-tabs { display: flex; gap: 6px; margin: 2px 0 8px; }
.nb-tabs button { flex: 1; }
.nb-tabs button.on { background: #ffb74d; color: #4a2408; font-weight: bold; }

/* ---------- Day-end summary: the night sky that closes the day ---------- */
/* The text and button rules below are prefixed `#dayend` on purpose. This block sits *above* the generic
   `.modal-card h1` / `.modal-card .sub` / `.btn.big` rules further down the file, and those are what this
   card is built out of — at equal specificity the later ones win, which painted the brown-on-cream colours
   of a wooden card onto a midnight-blue one. The id keeps the night palette in charge; do not drop it. */
#dayend { background: radial-gradient(circle at 50% 45%, rgba(28, 32, 74, .74), rgba(6, 8, 22, .9)); }
#dayend .dayend-card {
  width: min(430px, calc(100vw - 32px)); padding: 0; overflow: hidden; color: #ece7ff;
  background: linear-gradient(#131a3c, #262a5c 58%, #392e5e);
  border: 3px solid #d9a13c; border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.dayend-head { position: relative; padding: 16px 22px 10px; text-align: center; }
/* the stars are the panel's own background: cheap, and they cost nothing to animate */
.dayend-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background-image:
    radial-gradient(1.5px 1.5px at 16% 24%, #fff8d6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 18%, #fff8d6 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 62%, #d8e4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 74%, #fff8d6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 58%, #d8e4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 74%, #fff8d6 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 12%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 40%, #ffffff 50%, transparent 51%);
}
.dayend-moon { font-size: 32px; line-height: 1.1; filter: drop-shadow(0 2px 7px rgba(255, 214, 130, .5)); }
#dayend .dayend-card h1 { margin: 4px 0 0; font-size: 21px; letter-spacing: .04em; color: #ffe6a6; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
#dayend .dayend-card .sub { margin: 3px 0 0; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #a9a2d6; }

/* the day in four numbers: a dash means nothing happened, never a zero to read past */
#dayend-list { padding: 4px 18px 0; }
.de-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.de-tile {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15);
}
.de-tile .de-ico { font-size: 17px; line-height: 1; }
.de-tile b { font-size: 19px; font-variant-numeric: tabular-nums; color: #fff; }
.de-tile small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #a9a2d6; }
.de-tile.none { opacity: .5; }
.de-tile.none b { font-weight: normal; color: #948ec4; }
.de-row { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; }
.de-rIco { font-size: 13px; line-height: 1.5; }
.de-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.de-chips span {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px; padding: 1px 9px; font-size: 12.5px;
}
.de-chips span small { color: #a9a2d6; margin-left: 5px; }

.dayend-card .modal-foot { padding: 16px 18px 18px; }
#dayend .dayend-card .btn {
  width: 100%; font-size: 17px; padding: 9px 20px; letter-spacing: .03em;
  color: #40230c; background: linear-gradient(#ffd76a, #f0a52c); border: 2px solid #8a5a12;
  box-shadow: inset 0 -3px 0 #c07d15, inset 0 2px 0 #ffe9a8, 0 3px 0 #6b430c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
#dayend .dayend-card .btn:hover { background: linear-gradient(#ffe08a, #f6b03c); }
#dayend .dayend-card .btn:active { box-shadow: inset 0 2px 0 #c07d15; transform: translateY(2px); }

/* ---------- Dialogue box (bottom) ---------- */
#chat {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(860px, calc(100vw - 160px)); display: flex; gap: 10px; align-items: flex-end;
  animation: rise .18s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 20px); } }
#dlg-side { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; flex: none; }
#portrait {
  width: 96px; height: 96px; image-rendering: pixelated;
  background: linear-gradient(#a8d8f0, #d8efc8); border: 3px solid #4a2410; border-radius: 6px;
  box-shadow: inset 0 0 0 3px #d9924a, 0 4px 0 rgba(0, 0, 0, .35);
}
.nameplate {
  background: #c26b2a; color: #fff4d6; font-weight: bold; padding: 2px 10px; border-radius: 4px;
  border: 2px solid #4a2410; white-space: nowrap; text-shadow: 1px 1px 0 #4a2410;
}
#chat-role { color: #fff4d6; font-size: 11px; text-shadow: 1px 1px 0 #000; text-align: center; }
#chat-mood { font-size: 18px; min-height: 22px; }
#dlg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
#menu { font-size: 12px; color: #7a4a22; border-bottom: 2px dashed #d9a86a; padding-bottom: 5px; }
#log { height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; user-select: text; }
#log::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-thumb { background: #c9935a; border-radius: 4px; }
.msg { animation: fadein .2s; max-width: 92%; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
.msg.npc { align-self: flex-start; font-size: 16px; }
.msg.npc::before { content: attr(data-who) ": "; font-weight: bold; color: #9c4a1a; }
.msg.me { align-self: flex-end; color: #1d4f91; font-size: 15px; }
.msg.me::before { content: "You: "; font-weight: bold; }
.msg.me.live { opacity: .55; } /* live voice transcript, not sent yet */
.msg.sys { align-self: center; color: #8a6a4a; font-style: italic; font-size: 12px; text-align: center; }
.msg.hint { align-self: flex-start; background: #e4f1ff; border-left: 4px solid #5b9bd5; padding: 3px 8px; font-size: 13px; color: #24507a; border-radius: 3px; }
.msg.fix { align-self: flex-start; background: #fff1b8; border-left: 4px solid #e0a800; padding: 3px 8px; font-size: 13px; border-radius: 3px; }
#offer { background: #d8ecb8; border: 2px solid #6d9b3a; border-radius: 5px; padding: 5px 10px; font-size: 13px; }
#chat-form { display: flex; gap: 6px; }
#chat-input {
  flex: 1; min-width: 0; font: inherit; color: #3b2412; padding: 7px 10px;
  background: #fffaf0; border: 2px solid #9c5520; border-radius: 5px; outline: none;
}
#chat-input:focus { border-color: #4a2410; box-shadow: 0 0 0 2px #f0b060; }

.msg.old { opacity: .5; font-size: 13px; }
.msg.npc.live::after { content: "▍"; animation: blink 1s infinite; } /* reply still streaming in */
.msg.divider { align-self: stretch; text-align: center; font-size: 11px; color: #a07a52; border-top: 1px dashed #d9a86a; padding-top: 2px; margin-top: 2px; max-width: none; }
/* Voice mode (default): one big hold-to-talk bar, WeChat 按住说话 style. Text mode: input + Send. */
#chat-form.voice #chat-input, #chat-form.voice #send-btn, #chat-form.text #ptt { display: none; }
#mode-btn { flex: none; width: 40px; padding: 0; font-size: 18px; }
#ptt {
  flex: 1; min-width: 0; font: inherit; font-weight: bold; color: #5a3416; cursor: pointer; touch-action: none;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 10px; white-space: nowrap;
  background: #fffaf0; border: 2px solid #9c5520; border-radius: 5px; box-shadow: inset 0 -3px 0 #ecd3a3;
}
#ptt:hover { background: #fff3dc; }
#ptt small { font-weight: normal; color: #8a6a4a; }
#ptt kbd { font: inherit; font-size: 12px; padding: 0 10px; background: #f8dfab; border: 2px solid #9c5520; border-bottom-width: 4px; border-radius: 4px; }
#ptt.rec { background: #c26b2a; color: #fff4d6; border-color: #4a2410; box-shadow: inset 0 3px 0 #8a4516; }
#ptt.rec small { color: #ffe2b8; }
#ptt.busy { color: #1d4f91; cursor: progress; }
#ptt.off { color: #a08a74; cursor: not-allowed; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.wave i { width: 3px; height: 100%; background: currentColor; border-radius: 2px; animation: wave .9s infinite ease-in-out; }
.wave i:nth-child(2) { animation-delay: -.7s; } .wave i:nth-child(3) { animation-delay: -.5s; }
.wave i:nth-child(4) { animation-delay: -.3s; } .wave i:nth-child(5) { animation-delay: -.1s; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.msg.typing { animation: blink 1s infinite; font-size: 18px; }
@keyframes blink { 50% { opacity: .3; } }
#offer { cursor: pointer; }
#chat-hearts { color: #e53958; font-size: 14px; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
#chat-hearts.up { animation: heart-up .6s; }
#chat-hearts.down { animation: heart-down .6s; }
/* Before ASI knows you: one big "fill in your profile" button replaces the talk bar. */
#chat-form.fill #mode-btn, #chat-form.fill #ptt, #chat-form.fill #chat-input, #chat-form.fill #send-btn { display: none; }
#fill-profile { flex: 1; min-width: 0; font-size: 16px; padding: 10px 16px; }
@keyframes heart-up { 40% { transform: scale(1.4); filter: brightness(1.5); } }
@keyframes heart-down { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* ---------- Quick buttons / money ---------- */
.yuan { font-weight: bold; color: #ffb300; }
.btn.icon { position: relative; font-size: 20px; padding: 4px 9px; line-height: 1.2; }
#phone-badge {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; border-radius: 9px;
  background: #e53935; color: #fff; font: bold 11px/18px sans-serif; font-style: normal; border: 2px solid #4a2410;
}
.linkbtn { background: none; border: none; padding: 0; margin-top: 4px; font: inherit; font-size: 11px; color: #9c4a1a; text-decoration: underline; cursor: pointer; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); white-space: pre-line; text-align: center;
  background: rgba(40, 24, 10, .92); color: #fff4d6; font-weight: bold; padding: 8px 18px; border-radius: 8px;
  border: 2px solid #f0b060; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); animation: drop .25s ease-out; max-width: 80vw;
}
@keyframes drop { from { opacity: 0; transform: translate(-50%, -12px); } }

/* ---------- Phone (daily tasks) — wooden panel like the notebook ---------- */
#phone { position: fixed; top: 14px; left: 14px; width: 340px; max-height: 60vh; display: flex; flex-direction: column; }
#task-list { list-style: none; margin: 0 0 6px; padding: 0; overflow-y: auto; }
#task-list li { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px dashed #d9b98a; font-size: 13px; }
#task-list li:last-child { border-bottom: none; }
#task-list li div { flex: 1; display: flex; flex-direction: column; }
#task-list li small { color: #8a6a4a; font-size: 11px; }
#task-list .check { font-size: 16px; color: #9e9e9e; width: 18px; text-align: center; }
#task-list .reward { font-weight: bold; color: #2e7d32; white-space: nowrap; }
#task-list li.done { opacity: .5; }
#task-list li.done b { text-decoration: line-through; }
#task-list li.done .check { color: #2e7d32; }
#task-list li.special { background: #ffebee; border-radius: 6px; }
#task-list li.empty { color: #8a6a4a; font-style: italic; justify-content: center; }
.phone-foot { color: #8a6a4a; font-size: 11px; text-align: center; margin-top: 8px; }

/* ---------- Home decoration panel ---------- */
#decor { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(760px, calc(100vw - 360px)); }
#decor-tip { font-size: 12px; color: #7a4a22; margin-bottom: 6px; }
#decor-tip.warn { color: #c62828; font-weight: bold; }
#decor-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.decor-item {
  flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  background: #fff6e0; border: 2px solid #c9935a; border-radius: 6px; padding: 4px 2px; font: inherit;
}
.decor-item canvas { height: 40px; width: auto; max-width: 64px; object-fit: contain; image-rendering: pixelated; }
.decor-item .nm { font-size: 10px; line-height: 1.1; text-align: center; }
.decor-item .pr { font-size: 11px; font-weight: bold; color: #2e7d32; }
.decor-item:hover { border-color: #4a2410; background: #fff; }
.decor-item.active { border-color: #2e7d32; box-shadow: 0 0 0 2px #81c784; }
.decor-item.poor { opacity: .5; }
.decor-item.poor .pr { color: #c62828; }

/* ---------- Fainted overlay ---------- */
#faint { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; animation: blackout 1.2s ease-in; }
@keyframes blackout { from { background: rgba(0, 0, 0, 0); } }
.faint-card { max-width: 520px; text-align: center; color: #eee; padding: 20px; }
.faint-card h1 { margin: 0 0 12px; color: #ffcc80; }
.faint-card p { font-size: 15px; line-height: 1.6; }

@media (max-width: 900px) {
  #chat { width: calc(100vw - 150px); left: 8px; transform: none; animation: none; }
  #dlg-side { width: 70px; }
  #portrait { width: 64px; height: 64px; }
}

/* ---------- Start / pause modal ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(20, 12, 4, .6); backdrop-filter: blur(2px); animation: fadein .2s; }
.modal-card { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 26px 18px; animation: drop .25s ease-out; }
.modal-card h1 { margin: 0 0 4px; font-size: 26px; text-align: center; color: #5a2a10; }
.modal-card .sub { margin: 0 0 14px; text-align: center; color: #7a4a22; }
.modal-card h2 { font-size: 15px; margin: 0 0 6px; color: #9c4a1a; }
.modal-card .cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 16px; }
.modal-card ul { margin: 0; padding-left: 18px; font-size: 13px; }
.modal-card li { margin-bottom: 5px; }
.keys { border-collapse: collapse; font-size: 13px; width: 100%; }
.keys td { padding: 3px 4px; border-bottom: 1px dashed #d9a86a; }
.keys td:first-child { white-space: nowrap; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 2px; text-align: center; font: bold 12px/20px monospace; color: #3b2412; background: #fff4d6; border: 2px solid #9c5520; border-bottom-width: 3px; border-radius: 4px; }
.modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.modal-foot .grow { flex: 1; }
#llm-tag { font-size: 11px; color: #8a6a4a; }
.btn.big { font-size: 18px; padding: 8px 26px; }
@media (max-width: 640px) { .modal-card .cols { grid-template-columns: 1fr; } }

/* ---------- New-game onboarding (name / native language / level) — wide, fields stacked ---------- */
#setup .modal-card { width: min(560px, calc(100vw - 32px)); }
#setup .sub { margin-bottom: 16px; }
#setup .field { display: block; margin-bottom: 12px; }
#setup .field > span { display: block; margin-bottom: 4px; font-weight: bold; color: #3b2412; }
#setup .field input, #setup .field select {
  width: 100%; font: inherit; color: #3b2412; padding: 8px 10px;
  background: #fffaf0; border: 2px solid #9c5520; border-radius: 5px; outline: none;
}
#setup .field input:focus, #setup .field select:focus { border-color: #4a2410; box-shadow: 0 0 0 2px #f0b060; }
#setup-err { color: #c62828; font-size: 13px; min-height: 18px; margin: 0 0 2px; }

/* ---------- Phone: NPC request (hidden quest) section ---------- */
.quests-head { padding-top: 10px; border-top: 1px dashed #c08a52; margin-top: 8px; font-size: 13px; }
#quest-list { list-style: none; margin: 0 0 6px; padding: 0; overflow-y: auto; }
#quest-list li { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px dashed #d9b98a; font-size: 13px; }
#quest-list li:last-child { border-bottom: none; }
.when { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: #fff3cd; color: #8a5a00; font-size: 11px; font-weight: normal; white-space: nowrap; }
.when.off { background: #ffebee; color: #c62828; }
#quest-list li div { flex: 1; display: flex; flex-direction: column; }
#quest-list li small { color: #8a6a4a; font-size: 11px; }
#quest-list .check { font-size: 16px; color: #9e9e9e; width: 18px; text-align: center; }
#quest-list li.done { opacity: .55; }
#quest-list li.done b { text-decoration: line-through; }
#quest-list .empty { color: #8a6a4a; font-size: 12px; }

/* ---------- Unlock fanfare banner ---------- */
#unlock { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); z-index: 70; pointer-events: none; }
#unlock-card {
  min-width: 320px; max-width: 460px; text-align: center; padding: 18px 26px;
  background: linear-gradient(160deg, #3a2410, #1f1206); color: #ffe9b0;
  border: 3px solid #ffc845; border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(60, 36, 8, .9), 0 0 34px rgba(255, 200, 69, .55), 0 14px 40px rgba(0, 0, 0, .5);
  animation: unlock-pop .45s cubic-bezier(.2, 1.6, .4, 1), unlock-glow 1.6s ease-in-out infinite alternate;
}
#unlock-card.leaving { animation: unlock-out .4s ease-in forwards; }
#unlock-title { font-size: 19px; font-weight: bold; letter-spacing: .5px; color: #ffd75e; text-shadow: 0 2px 0 #000; }
#unlock-body { margin-top: 6px; font-size: 14px; line-height: 1.5; color: #fff3d0; }
#unlock-body small { display: block; margin-top: 4px; color: #d9b96a; }
/* a hidden quest's keepsake: the card itself, big, above its name */
#unlock-card.keepsake .ks-big { width: 104px; margin: 6px auto 8px; }
#unlock-card.keepsake .ks-big .art { height: 92px; }
#unlock-body i { display: block; margin-top: 6px; color: #ffe9b0; }
@keyframes unlock-pop { 0% { transform: scale(.4) translateY(-30px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes unlock-out { to { transform: translateY(-16px) scale(.92); opacity: 0; } }
@keyframes unlock-glow { from { box-shadow: 0 0 0 3px rgba(60, 36, 8, .9), 0 0 22px rgba(255, 200, 69, .4), 0 14px 40px rgba(0, 0, 0, .5); } to { box-shadow: 0 0 0 3px rgba(60, 36, 8, .9), 0 0 44px rgba(255, 214, 100, .8), 0 14px 40px rgba(0, 0, 0, .5); } }

/* ---------- Debug panel (dev only) ---------- */
#debug {
  position: fixed; left: 8px; bottom: 8px; z-index: 80; width: 250px;
  font: 11px/1.5 monospace; color: #b9f6ca; background: rgba(8, 18, 10, .88);
  border: 1px solid #2e7d32; border-radius: 8px; user-select: none;
}
.dbg-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; font-weight: bold; color: #69f0ae; border-bottom: 1px solid #2e7d32; }
.dbg-head button { background: none; border: 1px solid #2e7d32; color: #69f0ae; border-radius: 4px; cursor: pointer; font: inherit; padding: 0 6px; }
#dbg-body { padding: 6px 8px; max-height: 46vh; overflow-y: auto; }
.dbg-sec { margin-bottom: 8px; }
.dbg-sec > b { color: #ffe082; }
.dbg-sub { margin: 6px 0 2px; color: #80cbc4; border-top: 1px dashed #2e7d32; padding-top: 4px; }
.dbg-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.dbg-row label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbg-row input[type="number"] { width: 56px; background: #0d2412; color: #b9f6ca; border: 1px solid #2e7d32; border-radius: 3px; font: inherit; padding: 1px 3px; }
.dbg-row input[type="range"] { width: 110px; accent-color: #69f0ae; }
.dbg-row select { background: #0d2412; color: #b9f6ca; border: 1px solid #2e7d32; border-radius: 3px; font: inherit; }
.dbg-dim { color: #6a8f70; }
.dbg-x, #dbg-flag-add { background: none; border: 1px solid #2e7d32; color: #b9f6ca; border-radius: 3px; cursor: pointer; font: inherit; padding: 0 5px; }
.dbg-x:disabled { opacity: .35; cursor: default; }
.dbg-danger { border: 1px solid #c62828; color: #ef9a9a; background: none; border-radius: 3px; cursor: pointer; font: inherit; padding: 2px 8px; }
#dbg-flag { background: #0d2412; color: #b9f6ca; border: 1px solid #2e7d32; border-radius: 3px; font: inherit; padding: 1px 3px; }

/* ---------- Phone: backpack ---------- */
#inv-list { list-style: none; margin: 0; padding: 6px; background: #eef3e8; border-radius: 10px; overflow-y: auto; }
#inv-list li { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid #d8e2cc; font-size: 13px; }
#inv-list li:last-child { border-bottom: none; }
#inv-list li div { flex: 1; display: flex; flex-direction: column; }
#inv-list li small { color: #74886a; font-size: 11px; }
#inv-list .empty { color: #74886a; font-size: 12px; }
.eat-btn { background: #4caf50; color: #fff; border: none; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.eat-btn:hover { background: #43a047; }
#quest-list .step { color: #9c6b1e; font-size: 11px; margin-top: 2px; }

/* ---------- Backpack modal (centered, key I) ---------- */
.backpack-card { width: min(640px, calc(100vw - 32px)); }
.backpack-card .panel-head { margin-bottom: 10px; }
.backpack-foot { margin-top: 12px; font-size: 12px; color: #8a6a4a; text-align: center; }
.inv-grid { min-height: 140px; }
.inv-grid .empty { text-align: center; color: #8a7a66; font-size: 14px; line-height: 1.8; padding: 36px 0; }
.inv-cat { font-size: 13px; font-weight: bold; color: #9c4a1a; border-bottom: 2px dashed #d9a86a; padding-bottom: 3px; margin-top: 6px; }
.inv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.inv-card { position: relative; background: #fffdf6; border: 2px solid #c9b28a; border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.inv-card b { color: #3b2412; }
.inv-card small { color: #8a7a66; font-size: 11px; }
.inv-card .qty { position: absolute; top: 6px; right: 9px; font-weight: bold; color: #9c6b1e; font-size: 12px; }
.inv-card.quest { border-color: #c2185b; background: #fdf0f5; }
.inv-card.food { border-color: #7cb342; background: #f6fcef; }
.inv-card.furniture { border-color: #8d6e63; background: #f5f0ea; }
.inv-card .eat-btn { align-self: flex-start; margin-top: 4px; }

/* ---------- Neighbor board: a cork board of pinned polaroids; tap one for that neighbor's diary page ---------- */
.board-card {
  position: relative; width: min(720px, calc(100vw - 32px)); height: min(600px, calc(100vh - 32px)); padding: 0; overflow: hidden;
  display: flex; flex-direction: column; color: #3b2412;
  background:
    radial-gradient(circle at 18% 22%, rgba(120,70,30,.28) 0 1.5px, transparent 2px) 0 0 / 23px 23px,
    radial-gradient(circle at 62% 71%, rgba(255,230,180,.22) 0 1.5px, transparent 2px) 0 0 / 17px 17px,
    radial-gradient(circle at 40% 55%, rgba(90,50,20,.22) 0 1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(ellipse at 50% 40%, #d9a768, #b98446 75%, #a2713a);
  border: 14px solid #6b3f1d; border-radius: 10px;
  box-shadow: inset 0 0 0 2px #3a1f0c, inset 0 0 26px rgba(40,20,5,.55), 0 0 0 3px #3a1f0c, 0 10px 0 rgba(0,0,0,.35);
}
.board-card .panel-head { flex: none; margin: 0; padding: 12px 18px 4px; }
.board-card .panel-head b { font: 700 21px/1 "Marker Felt", "Bradley Hand", "Kaiti SC", "Comic Sans MS", cursive; color: #fff3d6; text-shadow: 0 2px 0 rgba(58,31,12,.6); letter-spacing: .5px; }
.board-card .panel-head b small { font: 12px "Trebuchet MS", sans-serif; opacity: .8; margin-left: 8px; letter-spacing: 0; }
.board-view { flex: 1; min-height: 0; position: relative; }
.board-foot { flex: none; text-align: center; font-size: 11px; color: rgba(255,243,214,.8); padding: 0 0 9px; text-shadow: 0 1px 0 rgba(58,31,12,.6); }

.board-list { position: absolute; inset: 0; overflow-y: auto; padding: 18px 22px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 26px 20px; align-content: start; justify-items: center; }
.board-list .empty { grid-column: 1 / -1; align-self: center; margin-top: 70px; text-align: center; line-height: 1.9; color: #fff3d6; font: 17px/1.9 "Marker Felt", "Bradley Hand", "Kaiti SC", cursive; text-shadow: 0 1px 0 rgba(58,31,12,.6); }
.board-list .empty small { font: 12px "Trebuchet MS", sans-serif; opacity: .8; }

.polaroid {
  position: relative; width: 148px; padding: 10px 10px 8px; font: inherit; color: #3b2412; text-align: center; cursor: pointer;
  background: #fdfbf3; border: 0; border-radius: 2px; transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 8px 14px rgba(50,25,5,.38); transition: transform .15s, box-shadow .15s;
  animation: pinned .4s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.polaroid:hover { transform: rotate(0) translateY(-5px) scale(1.04); box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 16px 20px rgba(50,25,5,.42); z-index: 2; }
.polaroid .pin { position: absolute; top: -9px; left: 50%; width: 15px; height: 15px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9b86, #d9442b 55%, #8e2514); box-shadow: 0 3px 3px rgba(0,0,0,.4); }
.polaroid .ph { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: linear-gradient(#a8d8f0 0 62%, #8cc46a 62%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 0 14px rgba(255,255,255,.25); }
.polaroid canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; object-position: top; }
.polaroid .cap { display: block; margin-top: 7px; font: 700 17px/1.1 "Marker Felt", "Bradley Hand", "Kaiti SC", "Comic Sans MS", cursive; }
.polaroid .cap small { display: block; font: 10px "Trebuchet MS", sans-serif; color: #9a8a76; margin-top: 3px; letter-spacing: .3px; }
.polaroid .hearts { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 2px; color: #e0435e; }
.polaroid .badge { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #e0435e; color: #fff; font: 700 12px/24px "Trebuchet MS", sans-serif; text-align: center; border: 2px solid #fdfbf3; box-shadow: 0 2px 3px rgba(0,0,0,.35); }
@keyframes pinned { from { opacity: 0; transform: translateY(-18px) rotate(calc(var(--tilt, 0deg) * 3)) scale(1.1); } }

/* the diary page */
.board-detail { position: absolute; inset: 0; overflow-y: auto; padding: 18px 26px 20px; animation: fadein .25s; }
.board-detail .empty { color: #fff3d6; text-align: center; padding: 60px 0; }
.board-back { font: 700 14px/1 "Marker Felt", "Bradley Hand", "Kaiti SC", cursive; color: #fff3d6; background: rgba(58,31,12,.5); border: 0; border-radius: 14px; padding: 6px 13px; cursor: pointer; margin-bottom: 14px; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.board-back:hover { background: rgba(58,31,12,.75); }
.diary { position: relative; display: flex; gap: 22px; align-items: flex-start; padding: 26px 26px 22px; background: #fdf8e8 repeating-linear-gradient(transparent 0 27px, rgba(120,150,190,.28) 27px 28px); border-radius: 3px; transform: rotate(-.4deg); box-shadow: 0 10px 18px rgba(50,25,5,.4); }
.diary::before { content: ''; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(240,200,90,.78); transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.diary .side { flex: none; width: 138px; text-align: center; }
.diary .side .polaroid { cursor: default; animation: none; --tilt: -3deg; width: 138px; }
.diary .side .polaroid:hover { transform: rotate(var(--tilt)); box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 8px 14px rgba(50,25,5,.38); }
.diary .main { flex: 1; min-width: 0; }
.diary h2 { margin: 0; font: 700 28px/1.1 "Marker Felt", "Bradley Hand", "Kaiti SC", "Comic Sans MS", cursive; color: #3b2412; }
.diary h2 small { font: 13px "Trebuchet MS", sans-serif; color: #9a8a76; margin-left: 8px; }
.diary .role { margin: 4px 0 12px; font-size: 12px; color: #8a6a4a; font-style: italic; }
.diary h3 { margin: 16px 0 7px; font: 700 15px/1 "Marker Felt", "Bradley Hand", "Kaiti SC", cursive; color: #b4532a; }
.notes { display: flex; flex-direction: column; gap: 12px; }
.sticky { position: relative; padding: 11px 13px; font-size: 13px; line-height: 1.6; color: #4a3a2a; background: #fff3a8; transform: rotate(var(--tilt, 0deg)); box-shadow: 1px 3px 5px rgba(60,35,10,.28); border-radius: 1px 1px 14px 1px; }
.sticky:nth-child(3n+2) { background: #ffd0cf; }
.sticky:nth-child(3n) { background: #cdeed2; }
.q { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; }
.q .box { flex: none; width: 17px; height: 17px; margin-top: 2px; border: 2px solid #8a5a2a; border-radius: 4px 6px 4px 5px; text-align: center; font: 700 14px/13px sans-serif; color: #2f8a4a; }
.q b { display: block; font-size: 14px; color: #3b2412; }
.q small { display: block; margin-top: 1px; font-size: 12px; color: #8a6a4a; }
.q.done b { text-decoration: line-through; color: #9a8a76; }
.q.done .box { border-color: #2f8a4a; background: #e1f4e4; }
.diary .bio { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #4a3a2a; }
.board-empty { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: #a8977c; font-style: italic; }
@media (max-width: 560px) { .diary { flex-direction: column; align-items: center; } .diary .main { width: 100%; } }

/* ---------- Backpack: Stardew-style slot grid ---------- */
.backpack-card { width: min(560px, calc(100vw - 32px)); }
.inv-slots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.slot {
  aspect-ratio: 1; background: #e8dcc4; border: 2px solid #b89a6a; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.slot.filled { background: #fff8e8; cursor: pointer; }
.slot.filled:hover { border-color: #8d6e3a; background: #fff; }
.slot.sel { border-color: #c2185b; box-shadow: 0 0 0 2px #f48fb1; background: #fff; }
.slot .ico { font-size: 24px; line-height: 1; }
.slot canvas { image-rendering: pixelated; }
.slot .qty {
  position: absolute; right: 3px; bottom: 1px; font: bold 11px/1 monospace; color: #5a2a10;
  text-shadow: 0 1px 0 #fff;
}
.slot.quest { border-color: #c2185b; background: #fdf0f5; }
.inv-detail {
  margin-top: 12px; min-height: 86px; background: #fffdf6; border: 2px dashed #c9b28a;
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
}
.inv-detail b { color: #3b2412; font-size: 14px; }
.inv-detail p { margin: 4px 0; color: #6a5a44; line-height: 1.5; }
.inv-detail .dim { color: #a89880; font-size: 12px; }
.inv-actions { display: flex; gap: 8px; margin-top: 8px; }
.inv-actions .btn { font-size: 13px; }
.inv-actions .btn:disabled { opacity: .5; cursor: default; }

/* ---------- Items menu (centered, key B): backpack · collection · words ---------- */
/* No title row: the tab strip IS the header — a segmented control on the wood, with the close button
   sitting at its right end. The open tab reads as the raised page you are looking at. */
/* The card stops at a comfortable reading height and the *pane* scrolls. Letting the card grow to the
   viewport instead (the generic .modal-card rule) turns the whole thing into one long scroll: the tab strip
   rides up out of view and the ✕ with it, so the way out of a 47-item book is to scroll back to the top. */
.menu-card {
  width: min(680px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 64px));
  display: flex; flex-direction: column; overflow: hidden;
}
.menu-head { flex: none; }
/* No flex-grow here on purpose: the card is content-sized until it hits its cap, so there is never free
   space to grow into. `min-height: 0` is what lets the pane shrink past its content once the cap is hit —
   and that shrink, plus `overflow-y`, is the scrollbar. */
#menu-pane-bag, #menu-pane-collect, #menu-pane-ach, #menu-pane-words {
  min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #c9935a transparent;
}
#menu-pane-bag::-webkit-scrollbar, #menu-pane-collect::-webkit-scrollbar, #menu-pane-ach::-webkit-scrollbar,
#menu-pane-words::-webkit-scrollbar { width: 8px; }
#menu-pane-bag::-webkit-scrollbar-thumb, #menu-pane-collect::-webkit-scrollbar-thumb, #menu-pane-ach::-webkit-scrollbar-thumb,
#menu-pane-words::-webkit-scrollbar-thumb { background: #c9935a; border-radius: 4px; }
.menu-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; }
.menu-tabs {
  flex: 1; display: flex; gap: 3px; padding: 3px; border-radius: 11px;
  background: rgba(74, 36, 16, .16); box-shadow: inset 0 2px 4px rgba(74, 36, 16, .22);
}
.menu-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  padding: 8px 4px; font: 600 14px/1.2 inherit; color: #6b3f1d; cursor: pointer;
  background: none; border: 0; border-radius: 8px; transition: background .12s, color .12s;
}
.menu-tab:hover { background: rgba(255, 253, 246, .55); }
.menu-tab.on { color: #3b2412; background: #fffdf6; box-shadow: 0 2px 0 rgba(74, 36, 16, .28); }
.menu-tab .mi { font-size: 18px; line-height: 1; }
.menu-tab small { font-size: 11px; font-weight: normal; color: #96775a; }
.menu-tab.on small { color: #9c6b1e; }
.menu-tab.done .mi { filter: drop-shadow(0 0 6px #ffca45); }
.menu-x {
  flex: none; width: 34px; height: 34px; padding: 0; cursor: pointer;
  font: bold 15px/1 "Trebuchet MS", sans-serif; color: #fff4d6; background: #c26b2a;
  border: 2px solid #4a2410; border-radius: 50%; box-shadow: inset 0 -3px 0 #8a4516, inset 0 2px 0 #e59a55;
}
.menu-x:hover { background: #d67b35; }
.menu-x:active { box-shadow: inset 0 2px 0 #8a4516; transform: translateY(1px); }
@media (max-width: 460px) { .menu-tab span:not(.mi) { display: none; } }

/* icons: collectible sprites, furniture sprites, shop-good emoji and letter badges */
.cico { display: block; image-rendering: pixelated; }
.cico.emoji { display: inline-block; line-height: 1; }
.cico.wbadge {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
  font-weight: bold; color: #fff; background: hsl(calc(var(--h) * 1deg) 45% 46%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}

/* collection book: a found thing is simply green — no tick, no day, no count */
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.col-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 6px; cursor: pointer;
  font: inherit; background: #fffdf6; border: 2px solid #c9b28a; border-radius: 10px;
}
.col-card:hover { border-color: #8d6e3a; background: #fff; }
.col-card b { font-size: 13px; color: #3b2412; }
.col-card small { font-size: 11px; color: #8a7a66; }
/* found: the whole card turns green — a colour reads at a glance across a full page of cards, where a 12px
   tick in the corner did not. Nothing is written on it: this is "you have it", not "how many, when". */
.col-card.got {
  border-color: #6aa84f; background: linear-gradient(#f2fbe9, #dcf0cf);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(74, 36, 16, .08);
}
.col-card.got:hover { border-color: #4e8a38; background: linear-gradient(#eaf7dd, #cfe9bd); }
.col-card.got b { color: #2f5d20; }
.col-card.got small { color: #4a6b3a; }
.col-card:not(.got) .cico { filter: grayscale(1) opacity(.55); }
.col-card:not(.got) b { color: #8a7a66; }
/* …and the selected card keeps its pink ring over the green: it is what the detail panel below is describing */
.col-card.got.sel, .col-card.sel { border-color: #c2185b; box-shadow: 0 0 0 2px #f48fb1; }
#collect-detail { margin-top: 10px; }

#ach-grid { padding: 5px; } /* the tier frame and the selection ring draw outside each card: keep them clear of the pane's clip */
#ach-detail { margin-top: 10px; }

/* keepsakes (one per hidden quest): same grid cell, but a metal frame by tier around a dark, glowing art window.
   Not earned yet: a plain cream card with a grey icon like the collection book's, and "? ? ?" (menu.js keepsakeFace). */
.ks { --a: #b06a34; --b: #f0b37a; --c: #6e3c18; --glow: rgba(240, 160, 90, .55); }
.ks.t2 { --a: #8f9aa6; --b: #eef3f7; --c: #4f5964; --glow: rgba(200, 220, 240, .45); }
.ks.t3 { --a: #d49a1c; --b: #ffe58a; --c: #8a5a08; --glow: rgba(255, 210, 90, .6); }
.ks.t4 { --a: #2f9a78; --b: #a8f0d0; --c: #145a44; --glow: rgba(120, 240, 190, .5); }
.ks.t5 { --b: #ffd6ff; --glow: rgba(255, 200, 255, .65); }
.col-card.ks, .ks-big.ks {
  padding: 3px; gap: 0; border: 0;
  background: linear-gradient(145deg, var(--b), var(--a) 45%, var(--c) 55%, var(--b));
  box-shadow: 0 0 0 1px #4a2410, 0 2px 0 rgba(74, 36, 16, .3);
}
.col-card.ks:hover { background: linear-gradient(145deg, var(--b), var(--a) 45%, var(--c) 55%, var(--b)); filter: brightness(1.06); }
.col-card.ks.t5, .ks-big.ks.t5 {
  background: linear-gradient(120deg, #ff9ad5, #ffe08a, #9af0c8, #8ab8ff, #d49aff, #ff9ad5);
  background-size: 300% 300%; animation: ks-holo 5s linear infinite;
}
.ks .in { width: 100%; flex: 1; overflow: hidden; border-radius: 8px; background: linear-gradient(#fffaf0, #f3e2bf); display: flex; flex-direction: column; align-items: center; }
.ks .art {
  position: relative; width: 100%; height: 58px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, var(--glow), transparent 65%), #2c1a10;
}
.ks.t5 .art { background: radial-gradient(circle at 50% 55%, var(--glow), transparent 65%), linear-gradient(#1a1240, #2c1a40); }
.ks .rays { position: absolute; inset: -60%; opacity: .32; animation: ks-spin 24s linear infinite; background: repeating-conic-gradient(var(--b) 0 7deg, transparent 7deg 22deg); }
.ks .cico { position: relative; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.ks .shine {
  position: absolute; inset: 0; transform: translateX(-120%); animation: ks-shine 4.5s ease-in-out infinite;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 48%, transparent 60%);
}
.col-card.ks b { margin-top: 3px; padding: 0 3px; font-size: 12px; text-align: center; color: #3b2412; }
.col-card.ks small { padding-bottom: 5px; color: #8a6a4a; text-align: center; }
.ks:not(.got), .col-card.ks:not(.got):hover {
  background: #fffdf6 !important; animation: none !important; filter: none;
  box-shadow: inset 0 0 0 2px #c9b28a;
}
.col-card.ks:not(.got):hover { box-shadow: inset 0 0 0 2px #8d6e3a; }
.ks:not(.got) .in, .ks:not(.got) .art { background: none; }
.ks:not(.got) .rays, .ks:not(.got) .shine { display: none; }
.col-card.ks:not(.got) .cico, .ks:not(.got) .cico { filter: grayscale(1) opacity(.55); }
.col-card.ks:not(.got) b, .col-card.ks:not(.got) small { color: #8a7a66; }
.col-card.ks.sel, .col-card.ks:not(.got).sel { box-shadow: 0 0 0 2px #c2185b, 0 0 0 4px #f48fb1; }
/* the detail panel: a big copy of the card beside the text */
.ks-big { flex: none; border-radius: 10px; }
@keyframes ks-spin { to { transform: rotate(360deg); } }
@keyframes ks-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes ks-holo { to { background-position: 300% 0; } }

/* everything found: a badge at the top of the book */
.col-badge {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 14px;
  font-size: 14px; color: #6b3f1d; background: linear-gradient(#fff6d8, #ffe6a8);
  border: 2px solid #d9a13c; border-radius: 10px; box-shadow: 0 2px 0 rgba(74, 36, 16, .2);
}
.col-badge b { color: #9c4a1a; }
.col-badge small { color: #8a6a4a; font-size: 12px; }

/* word book */
.word-filter {
  width: 100%; margin-bottom: 8px; padding: 6px 10px; font: inherit; font-size: 13px; color: #3b2412;
  background: #fffdf6; border: 2px solid #c9b28a; border-radius: 8px;
  /* the pane scrolls now (see .menu-card), so the list must not scroll inside it — and the search box,
     being opaque, can just stick to the top of that scroll instead of living in a scroll region of its own */
  position: sticky; top: 0; z-index: 1;
}
.word-list { overflow: visible; }
.word-list .dim { color: #8a7a66; font-style: italic; font-size: 13px; padding: 10px 2px; }
.word-item { border-bottom: 1px dashed #d9a86a; }
.word-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; cursor: pointer; }
.word-row:hover { background: #fff6e0; }
.word-row .w { flex: 1; font-size: 14px; }
.word-row .w small { color: #b08a5a; font-size: 11px; }
.word-row .g { color: #8a6a4a; font-size: 12px; }
.word-row .chev { color: #b08a5a; font-size: 11px; }
.word-row.open .chev { transform: rotate(90deg); }
.word-ex { padding: 0 6px 8px 36px; }
.word-ex .ex { font-size: 12.5px; color: #5a4a38; padding: 2px 0; }
.word-ex .ex .who { color: #9c6b1e; margin-right: 6px; }
.word-ex .ex.dim { color: #a89880; font-style: italic; }