/* In-game overlay. Quiet by default: text with soft shadows, no boxes except dialogue. */
.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; font-family: var(--sans); }
body[data-page="game"] .hud { display: block; }
body.hud-off .hud > :not(#dialogue) { visibility: hidden; }
body[data-modal="dialogue"] #hint, body[data-modal="dialogue"] #near-word { visibility: hidden; }
/* one thing at a time: while something to do is offered (E · Look in the basket) the floating word near it steps back */
body.prompt-up #near-word { opacity: 0; pointer-events: none; }
/* standing still: all but the objective (and a prompt she is facing) fade away */
#indicator, #hint, #near-word, #counter { transition: opacity .8s; }
body.hud-quiet #indicator, body.hud-quiet #hint, body.hud-quiet #near-word, body.hud-quiet #counter { opacity: 0; }
.hud > * { pointer-events: auto; }
.hud { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .25); }

/* Objective (top-left), LP style: ✦ serif main goal, sans sub-step underneath. */
.objective { position: absolute; left: 5vw; top: 6vh; max-width: 40vw; pointer-events: none; }
.obj-main { font-family: var(--serif); font-size: clamp(22px, 1.9vw, 32px); }
.obj-main i { font-style: normal; color: var(--gold); font-size: .75em; margin-right: .3em; }
.obj-step { font-size: clamp(15px, 1.2vw, 19px); opacity: .9; margin: .45em 0 0 1.6em; }
.objective.pulse .obj-main, .objective.pulse .obj-step { animation: rise .8s var(--ease); }
.objective.pulse.after .obj-main, .objective.pulse.after .obj-step { animation: rise .7s var(--ease) .2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.obj-goals { margin: .9em 0 0 1.6em; padding: .8em 1.1em; list-style: none; background: rgba(10, 14, 30, .45); border-left: 2px solid var(--gold); font-size: 15px; line-height: 1.9; }
.obj-goals li::before { content: '○ '; opacity: .7; }
.obj-goals li.done { opacity: .55; text-decoration: line-through; }
.obj-goals li.done::before { content: '✓ '; color: var(--gold); text-decoration: none; }
.obj-goals li.current::before { content: '✦ '; color: var(--gold); }
.obj-tab { margin: .7em 0 0 1.6em; font-size: 12px; opacity: .55; }
.objective.expanded .obj-tab { opacity: .8; }

/* Word counter (top-right). */
.counter { position: absolute; right: 5vw; top: 6.4vh; display: flex; align-items: center; gap: 8px; font-size: 15px; opacity: .9; }
.counter svg { width: 11px; height: 15px; fill: var(--gold); }
.counter.bump { animation: bump .6s var(--ease); }
@keyframes bump { 30% { transform: scale(1.15); color: var(--gold); } }

/* Off-screen target: "✦ name · 12 m" pinned to the screen edge. */
.indicator {
  /* readable over sunlit grass: a soft dark pill (Glimpse could not read "the glimmer · 6 m") */
  position: absolute; transform: translate(-50%, -50%); font-size: 17px; white-space: nowrap; pointer-events: none;
  padding: 5px 13px; border-radius: 999px; background: rgba(16, 14, 28, .55); text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.indicator i { font-style: normal; color: var(--gold); margin-right: 4px; }
.indicator[data-side="left"] { transform: translate(0, -50%); }
.indicator[data-side="right"] { transform: translate(-100%, -50%); }

/* Near-word label: quiet English word floating over the object. */
.near-word { position: absolute; transform: translate(-50%, -100%); text-align: center; cursor: pointer; animation: float-in .6s var(--ease); }
.nw-word { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 36px); font-weight: 500; letter-spacing: .02em; color: #fffaf0; text-shadow: 0 0 14px rgba(255, 236, 190, .8), 0 1px 3px rgba(0, 0, 0, .5); }
.nw-hint { font-size: 12px; opacity: .75; margin-top: 2px; }
.nw-hint kbd { font-size: 11px; }
@keyframes float-in { from { opacity: 0; transform: translate(-50%, -80%); } }

/* Control hint (bottom centre), one at a time. */
.hint { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font-size: clamp(15px, 1.2vw, 19px); white-space: nowrap; pointer-events: none; }
.hint.in { animation: rise .7s var(--ease); }
.hint { transition: opacity .6s ease; }
.hint.out { opacity: 0; }

/* Interaction prompt with hold ring. */
.prompt { position: absolute; left: 50%; bottom: 17vh; transform: translateX(-50%); display: grid; grid-template-columns: 52px auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; cursor: pointer; }
.prompt .ring { grid-column: 1; grid-row: 1 / 3; width: 52px; height: 52px; transform: rotate(-90deg); }
.prompt-text { grid-column: 2; grid-row: 1; white-space: nowrap; }
.prompt-key { grid-row: 1 / 3; grid-column: 1; justify-self: center; align-self: center; border: 0; background: none; font-size: 17px; }
.ring-bg { fill: rgba(10, 14, 30, .35); stroke: rgba(246, 239, 220, .55); stroke-width: 2; }
.ring-fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.prompt-en { font-family: var(--serif); font-size: clamp(22px, 1.9vw, 30px); }
.prompt-tr { font-size: 14px; opacity: .85; }
.prompt.no-hold { grid-template-rows: auto; }
.prompt-hold { grid-column: 2; grid-row: 2; font-size: 11px; letter-spacing: .2em; opacity: .55; }
.prompt.no-hold .ring-fill { display: none; }

/* Cast word (SHRINK!) rising while held. */
.cast { position: absolute; left: 50%; top: 40%; transform: translate(-50%, calc(-50% - var(--p, 0) * 40px)) scale(calc(.8 + var(--p, 0) * .6)); font-family: var(--serif); font-weight: 600; font-size: 72px; letter-spacing: .08em; color: #fff3cc; opacity: calc(.3 + var(--p, 0) * .7); text-shadow: 0 0 30px rgba(230, 198, 117, .9); pointer-events: none; }

/* 做错反馈. */
.feedback { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.feedback.in { animation: wobble .9s var(--ease); }
.fb-word { font-family: var(--serif); font-size: 46px; font-style: italic; }
.fb-text { font-size: 15px; opacity: .85; }
@keyframes wobble { 0% { opacity: 0; transform: translateX(-50%) scale(.8); } 30% { opacity: 1; transform: translateX(-50%) rotate(-4deg); } 55% { transform: translateX(-50%) rotate(3deg); } 100% { transform: translateX(-50%); } }

/* Dialogue: a leaf of warm, slightly translucent paper with ink lettering. The paper lives on ::before so its edge
   can melt into the scene (a wide shadow in the paper's own colour) while the name tag sits on top, uncut. */
.dialogue {
  position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(64vw, 1040px); min-height: 150px;
  padding: 36px 52px 28px; color: var(--ink); text-shadow: none; cursor: pointer; isolation: isolate;
}
.dialogue::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 18px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(252, 244, 224, .93), rgba(240, 225, 192, .9) 70%, rgba(226, 205, 162, .88)),
    repeating-linear-gradient(0deg, rgba(120, 90, 40, .025) 0 2px, transparent 2px 5px);
  box-shadow: 0 0 22px 12px rgba(240, 225, 192, .55), 0 18px 50px rgba(20, 14, 6, .28), inset 0 0 36px rgba(160, 120, 60, .22);
}
.dialogue.in { animation: rise .45s var(--ease); }
.dlg-name { position: absolute; top: -21px; left: 40px; padding: 6px 20px 6px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); border: 1px solid var(--gold-deep); font-family: var(--serif); font-size: 21px; box-shadow: 0 4px 12px rgba(20, 14, 6, .3); }
.dlg-name i { font-style: normal; color: #f0b4b4; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; margin-right: 6px; vertical-align: 2px; }
.dlg-en { font-family: var(--serif); font-size: clamp(23px, 1.6vw, 28px); line-height: 1.6; font-weight: 500; }
.dlg-tr { font-family: var(--cjk), var(--serif); font-size: clamp(19px, 1.4vw, 24px); color: #3a2a12; margin-top: 8px; line-height: 1.65; }
.dlg-next { position: absolute; right: 18px; bottom: 12px; opacity: .55; font-size: 11px; animation: breathe 2s infinite; }
.dlg-next kbd { border-color: rgba(29, 42, 82, .5); background: rgba(255, 255, 255, .35); color: var(--ink); }
/* words in the line that have a card: a faint dotted underline, a click hangs their small tag from the box */
.dlg-word { border-bottom: 1px dotted rgba(29, 42, 82, .4); transition: color .15s, border-color .15s; }
.dlg-word:hover { color: #7a3d12; border-bottom-color: currentColor; }
.dialogue.has-tag { padding-right: 290px; }
/* the small tag: tied to the box's top edge, hanging down over its right end (same paper as the large tag) */
.tag-small { position: absolute; right: 60px; top: -10px; width: 210px; padding-top: 18px; transform-origin: 50% 0; z-index: 2; cursor: zoom-in; filter: drop-shadow(0 10px 16px rgba(20, 14, 6, .3)); text-align: left; }
.tag-small .tag-string { height: 40px; }
.tag-small .tag-paper { padding: 36px 18px 14px; }
.tag-small .tag-eyelet { top: 12px; width: 12px; height: 12px; margin-left: -6px; box-shadow: 0 0 0 4px #e7d4a8, 0 0 0 5px rgba(120, 90, 40, .35); }
.tag-small.swing { animation: tag-sway-small 1.1s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes tag-sway-small { 0% { transform: rotate(-24deg) scaleY(.6); opacity: 0; } 35% { transform: rotate(8deg); opacity: 1; } 58% { transform: rotate(-4.5deg); } 78% { transform: rotate(2deg); } 100% { transform: none; } }
.st-close { position: absolute; top: 6px; right: 10px; font-size: 20px; color: var(--sepia, #7a5a2e); opacity: .7; }
.st-word { display: block; font: 700 36px/1 'Caveat', var(--serif); overflow-wrap: anywhere; }
.st-mean { margin-top: 6px; font-family: var(--serif); font-size: 16px; line-height: 1.35; }
.st-mean:lang(zh), .st-mean:lang(zh-CN) { font-family: var(--cjk), var(--serif); }
.st-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.st-play { width: 28px; height: 28px; }
.st-more { font: 12px var(--sans); color: var(--sepia, #7a5a2e); }
.st-more kbd { border-color: rgba(122, 90, 46, .5); background: rgba(255, 255, 255, .35); color: inherit; }

/* 藏词处 close-up: a painted picture filling the screen, its things marked by soft glints */
.closeup { position: fixed; inset: 0; z-index: 15; background: #0b1028; opacity: 0; transition: opacity .6s; font-family: var(--sans); color: var(--ink-light, #f6efe2); }
.closeup.open { opacity: 1; }
.cu-pic { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 8s ease-out; }
.closeup.open .cu-pic { transform: scale(1); }
.cu-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.cu-pic video.on { opacity: 1; }
.cu-head { position: absolute; left: 40px; top: 28px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.cu-title { font-family: var(--serif, Georgia); font-size: 24px; } .cu-title::before { content: "✦ "; color: var(--gold, #f2c86b); }
.cu-sub { font-size: 13px; opacity: .85; margin: 4px 0 0 24px; }
.cu-back { position: absolute; right: 36px; top: 26px; border: 1px solid rgba(255,255,255,.6); border-radius: 18px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; background: rgba(10,14,30,.35); color: inherit; }
.cu-spot { position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.cu-spot::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(#fff8e0, rgba(255,214,140,0) 70%); box-shadow: 0 0 18px 8px rgba(255,220,150,.7); animation: cu-tw 2.4s ease-in-out infinite; }
.cu-spot.seen::before { opacity: .35; animation: none; }
.cu-spot span { position: absolute; top: -6px; left: 50%; transform: translate(-50%, -100%); white-space: nowrap; font-family: var(--serif, Georgia); font-size: 20px; color: #fff7e2; opacity: 0; transition: opacity .2s; text-shadow: 0 0 12px rgba(0,0,0,.9), 0 0 4px #000; }
.cu-spot:hover span, .cu-spot:focus span { opacity: 1; }
@keyframes cu-tw { 50% { transform: scale(1.35); opacity: .7; } }

/* the journal picture's flash */
.shot-flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: #fff8ea; animation: shot-flash .65s ease-out forwards; }
@keyframes shot-flash { 0% { opacity: .28; } 100% { opacity: 0; } }   /* a soft glint, not a white-out (Glimpse: the full flash jarred) */

/* ── Touch screens (js/touch.js) ── the layer under the overlay takes every finger; nothing here on a desktop */
.touch-layer, .touch-menu { display: none; }
body.touch .touch-layer { display: block; position: absolute; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
body.touch .hud { -webkit-tap-highlight-color: transparent; }
.stick { position: absolute; left: 22vw; top: 72vh; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  border: 1.5px solid rgba(255, 246, 225, .35); background: rgba(20, 24, 40, .12); opacity: .45; transition: opacity .3s; pointer-events: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255, 246, 225, .55); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.stick.on { opacity: 1; transition: none; }
body.hud-off .stick { opacity: 0; }
body.touch .touch-menu { display: flex; flex-direction: column; justify-content: center; gap: 4px; position: absolute; right: 14px; top: max(14px, env(safe-area-inset-top));
  width: 40px; height: 40px; padding: 0 10px; border-radius: 50%; background: rgba(20, 24, 40, .35); }
.touch-menu i { display: block; height: 2px; border-radius: 1px; background: var(--gold, #e6c675); }
body.touch .counter { right: 68px; top: max(24px, calc(env(safe-area-inset-top) + 10px)); }
/* no keys on a phone: the near word, the prompt, the dialogue and the goals lose their key caps; the hint keeps its
   cap (左手 · 右手 · 点) except when it waits for a key, where it becomes a button to tap */
body.touch .hud kbd:not(#hint kbd), body.touch .obj-tab { display: none; }
body.touch #hint[data-kind="custom"] { pointer-events: auto; cursor: pointer; padding: 10px 18px; border-radius: 22px;
  background: rgba(20, 24, 40, .45); border: 1px solid rgba(230, 198, 117, .5); }
body.touch #hint[data-kind="custom"] kbd { display: none; }
body.touch #hint[data-kind="custom"] span::after { content: '  ›'; color: var(--gold, #e6c675); }
@media (max-width: 700px) {
  body.touch .hint { white-space: normal; text-align: center; width: 86vw; justify-content: center; bottom: 5vh; }
  body.touch .objective { max-width: 62vw; left: 16px; top: max(16px, env(safe-area-inset-top)); }
  body.touch .counter { right: 14px; top: calc(max(14px, env(safe-area-inset-top)) + 50px); }   /* under the menu, clear of the objective */
}
/* the pause menu lists the touch controls instead of the keys; the map's corner buttons drop their key caps */
.keys.keys-touch, body.touch .keys:not(.keys-touch) { display: none; }
body.touch .keys.keys-touch { display: grid; }
body.touch #page-map kbd, body.touch #prologue-skip kbd { display: none; }