/* Hidden Color Echoes V40. Site-native EN/TR lobby, fixed play surface, RAM-only.
   V38: Miri hosts the lobby (portrait + bubble + Listen), her voice plays in
   game, and the action buttons wear the house pair (gold does the thing, quiet
   surface leaves) instead of the thin lilac pills Deniz rejected. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body.hce-is-playing { overflow: hidden; }
.hce-page { width: 100%; }
.hce-app { color: var(--color-text); font-family: var(--font-body); }
.hce-app button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.hce-picker { width: min(100%, var(--shell-max)); margin: 0 auto; padding: var(--space-3) var(--space-4) var(--space-6); }
.hce-back { min-height: 48px; width: fit-content; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 2px solid var(--kf-lilac); border-radius: var(--radius-pill); background: var(--kf-cream); color: var(--kf-purple-deep); box-shadow: var(--shadow-soft); font-family: var(--font-heading); font-weight: 700; text-decoration: none; }
.hce-back span:first-child { font-size: 1.45rem; line-height: 1; }
.hce-picker-head { max-width: 46rem; margin: var(--space-4) auto var(--space-5); text-align: center; }
.hce-kicker { margin: 0; color: var(--color-kicker); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; }
.hce-picker-head h1 { margin: var(--space-1) 0 var(--space-2); color: var(--kf-purple-deep); font-family: var(--font-heading); font-size: var(--text-3xl); line-height: 1.05; }
.hce-picker-head > p:last-child { margin: 0; font-size: var(--text-lg); line-height: 1.45; }
.hce-picker-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.hce-picker-option { min-width: 0; min-height: 64px; margin: 0; padding: var(--space-3); border: 2px solid var(--kf-lilac); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--kf-purple-deep); box-shadow: var(--shadow-soft); cursor: pointer; font-family: var(--font-heading); font-size: var(--text-child-label); font-weight: 700; line-height: 1.15; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.hce-picker-art { display: block; overflow: hidden; width: 100%; margin-bottom: var(--space-3); aspect-ratio: 4 / 5; border: 2px solid var(--kf-lilac-soft); border-radius: var(--radius-md); background: var(--kf-cream); }
.hce-picker-option img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (hover: hover) { .hce-picker-option:hover { transform: translateY(-3px); border-color: var(--kf-gold); box-shadow: var(--shadow-lift); } }

/* The lobby host: Miri's portrait beside her speech bubble, with its own
   Listen (LookRememberLobby pattern; the bubble is what makes this read as
   speech instead of a bio card). */
.hce-hello { width: min(100%, 46rem); margin: 0 auto var(--space-5); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.hce-portrait { width: 224px; height: auto; display: block; border-radius: var(--radius-lg); }
.hce-bubble { position: relative; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border: 2px solid var(--kf-lilac); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-soft); }
.hce-script { margin: 0; color: var(--color-text); text-align: left; }

.hce-play-shell { position: fixed; inset: 0; z-index: 500; min-width: 320px; min-height: 31rem; overflow: hidden; padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-2), env(safe-area-inset-right)) max(var(--space-2), env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left)); background: linear-gradient(180deg, var(--kf-lilac-soft), var(--kf-cream) 52%, var(--kf-teal-soft)); }
.hce-app:fullscreen .hce-play-shell { position: absolute; }
.hce-topbar { width: min(100%, var(--content-max)); min-height: 64px; margin: 0 auto var(--space-2); display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px 64px; align-items: center; gap: var(--space-2); }
.hce-heading { min-width: 0; text-align: center; }
.hce-heading p, .hce-heading .hce-play-title { margin: 0; }
.hce-heading p { color: var(--color-link); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; }
.hce-heading .hce-play-title { color: var(--kf-purple-deep); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; line-height: 1.05; }
.hce-exit, .hce-sound, .hce-fullscreen { width: 64px; height: 64px; display: grid; place-items: center; padding: 0; border: 2px solid var(--kf-lilac); border-radius: var(--radius-md); background: var(--kf-cream); color: var(--kf-purple-deep); box-shadow: var(--shadow-soft); cursor: pointer; text-decoration: none; }
.hce-exit span { font-size: 2rem; font-weight: 800; line-height: 1; }
.hce-sound { grid-column: 3; }
.hce-sound-mobile { display: none; }
.hce-fullscreen { grid-column: 4; }
.hce-fullscreen svg, .hce-sound svg, .hce-opening-sound svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; }

/* V39 (Deniz: "butonları resmin yanına alalım"): on wide screens the tools
   live in a side tray next to the picture instead of a bar under it; the
   picture keeps the height budget the bar used to eat. */
.hce-layout { width: min(100%, var(--content-max)); height: calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: 0 auto; display: grid; grid-template-columns: auto auto; grid-template-rows: minmax(0, 1fr); gap: var(--space-4); align-items: center; justify-content: center; }
/* The width caps: the picture may never push the tray off screen (the vw cap
   reserves the tray plus gaps) and never outgrow the viewport height. The
   phone block below replaces this with a full-width stacked flow. */
.hce-scene { position: relative; width: min(calc(100vw - 268px), calc((100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1122 / 1402)); height: auto; aspect-ratio: 1122 / 1402; overflow: hidden; border: 2px solid var(--kf-lilac); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-lift); isolation: isolate; }
.hce-line-layer, .hce-exact-fill-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.hce-line-layer { z-index: 3; margin: 0; pointer-events: none; }
.hce-line-layer img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hce-exact-fill-layer { z-index: 2; pointer-events: none; }
.hce-exact-fill-layer img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
[data-hce-prototype="v43"] .hce-exact-fill-layer [data-hce-complete-fill] { opacity: 0; transition: opacity 1100ms cubic-bezier(.22, .61, .36, 1); will-change: opacity; }
[data-hce-prototype="v43"] .hce-exact-fill-layer [data-hce-complete-fill].is-revealed { opacity: 1; }
.hce-target { position: absolute; z-index: 4; left: var(--target-x); top: var(--target-y); width: max(var(--target-width), 64px); height: max(var(--target-height), 64px); min-width: 64px; min-height: 64px; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
[data-hce-prototype="v43"] .hce-target { width: max(var(--target-width), 72px); height: max(var(--target-height), 72px); min-width: 72px; min-height: 72px; pointer-events: none; }
.hce-target.is-found { pointer-events: none; }
.hce-target:focus { outline: none; box-shadow: none; }
.hce-target:focus-visible { outline: 3px solid var(--kf-gold); outline-offset: 2px; }
.hce-target.is-hint { outline: 3px dashed var(--kf-gold); outline-offset: 2px; }

.hce-controls { width: auto; min-width: 8.5rem; max-width: 11rem; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.hce-progress-wrap { min-width: 0; }
.hce-progress-pictures { display: grid; grid-template-columns: repeat(2, 56px); gap: 6px; justify-content: center; }
/* The chips are the scene's ONE approved target drawing (V39, Deniz: a scene
   crop gives the location away). Unfound = the line drawing; found = the same
   drawing's colored twin; if the twin ever fails to load the line stays. */
.hce-progress-item { position: relative; display: block; overflow: hidden; border: 2px solid var(--kf-lilac); border-radius: var(--radius-sm); background: var(--color-surface); }
.hce-progress-item { aspect-ratio: 1 / 1; opacity: .55; }
.hce-progress-item.is-found { opacity: 1; border-color: var(--kf-gold); box-shadow: 0 0 0 2px var(--kf-gold-soft); }
.hce-progress-item.is-found::after { content: '\2713'; position: absolute; right: 1px; bottom: 1px; z-index: 2; width: 16px; height: 16px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--kf-purple-deep); color: var(--kf-cream); font-family: var(--font-heading); font-size: 12px; font-weight: 800; line-height: 1; }
.hce-progress-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; }
[data-hce-progress-color] { opacity: 0; }
.hce-progress-item.is-found [data-hce-progress-color] { opacity: 1; }
.hce-progress-item.is-found:not(.hce-no-color) [data-hce-progress-line] { opacity: 0; }
.hce-progress-item.is-found.hce-no-color [data-hce-progress-color] { opacity: 0; }
.hce-hint, .hce-choose, .hce-reopen, .hce-state-actions button, .hce-curtain-actions button, .hce-opening-sound { min-width: 64px; min-height: 64px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 2px solid var(--kf-lilac); border-radius: var(--radius-pill); background: var(--kf-cream); color: var(--kf-purple-deep); box-shadow: var(--shadow-soft); cursor: pointer; font-family: var(--font-heading); font-weight: 700; }
.hce-hint svg, .hce-choose svg, .hce-reopen svg, .hce-state-actions svg, .hce-curtain-actions svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
/* HOUSE BUTTONS (Deniz, 2026-08-25: "düğmelerini de bizim diğer oyunlarla
   aynı yap görünüm olarak"): the same pair the rest of the house uses
   (kf-look-remember win buttons): a gold one that does the thing, a quiet
   surface one that leaves, both on a 3px deep-purple border with the hard
   0 4px 0 shadow; the hint is the house gold-soft lantern pill. */
.hce-state-actions button, .hce-curtain-actions button, .hce-opening-sound, .hce-choose, .hce-reopen, .hce-sound-mobile {
  border: 3px solid var(--kf-purple-deep);
  background: var(--color-surface);
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.22), var(--shadow-soft);
}
.hce-curtain-actions .hce-play, [data-hce-final] [data-hce-see] {
  background: linear-gradient(180deg, #ffd94d 0%, #f0b929 100%);
  border-color: var(--kf-purple-deep);
  box-shadow: 0 4px 0 rgba(45, 27, 78, 0.28), var(--shadow-soft);
}
.hce-hint {
  background: linear-gradient(180deg, #fff6dc 0%, #ffe9a8 100%);
  border: 3px solid var(--kf-gold);
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}
@media (hover: hover) {
  .hce-state-actions button:hover, .hce-curtain-actions button:hover, .hce-hint:hover, .hce-choose:hover, .hce-reopen:hover, .hce-sound-mobile:hover, .hce-opening-sound:hover { filter: brightness(1.05); transform: translateY(-1px); }
}
.hce-state-actions button:focus-visible, .hce-curtain-actions button:focus-visible, .hce-hint:focus-visible, .hce-choose:focus-visible, .hce-reopen:focus-visible, .hce-sound-mobile:focus-visible, .hce-opening-sound:focus-visible { outline: 3px solid var(--kf-purple-deep); outline-offset: 3px; }

.hce-message { margin: 0; max-width: 11rem; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; }
.hce-controls.is-reviewing .hce-progress-wrap, .hce-controls.is-reviewing .hce-hint, .hce-controls.is-reviewing .hce-choose, .hce-controls.is-reviewing .hce-sound-mobile { display: none; }
.hce-controls.is-reviewing { justify-content: center; }

.hce-curtain, .hce-confirm, .hce-state { position: fixed; inset: 0; z-index: 700; display: grid; place-items: center; overflow: auto; padding: var(--space-3); background: var(--scrim-navy); }
.hce-state { position: absolute; }
.hce-curtain-card, .hce-confirm-card, .hce-state-card { width: min(100%, 36rem); padding: var(--space-4); border: 2px solid var(--kf-lilac); border-radius: var(--radius-lg); background: var(--kf-cream); box-shadow: var(--shadow-lift); text-align: center; }
.hce-curtain-card h2, .hce-confirm-card h2, .hce-state-card h2 { margin: var(--space-1) 0; color: var(--kf-purple-deep); font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1.1; }
.hce-curtain-card p, .hce-confirm-card p, .hce-state-card p { margin: var(--space-2) 0 0; }
.hce-opening-goal { min-height: 7rem; margin: var(--space-3) auto; display: grid; place-items: center; }
.hce-opening-icon { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--kf-purple-deep); }
.hce-opening-icon img { display: block; width: 96px; height: 96px; object-fit: contain; }
.hce-opening-icon strong { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1; }
.hce-curtain-actions, .hce-state-actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.hce-curtain-actions > button, .hce-state-actions > button { max-width: 100%; white-space: normal; text-align: center; }
.hce-opening-sound { margin-top: var(--space-3); }

.hce-noscript { width: min(calc(100% - 2rem), 42rem); margin: var(--space-4) auto; padding: var(--space-4); border: 2px solid var(--kf-lilac); border-radius: var(--radius-lg); background: var(--kf-lilac-soft); text-align: center; }
.hce-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 40rem) { .hce-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .hce-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 42rem) {
  body.hce-is-playing { overflow: auto; }
  .hce-picker { padding-inline: var(--space-3); }
  .hce-picker-head { margin-block: var(--space-4); }
  .hce-hello { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hce-portrait { width: 168px; }
  .hce-play-shell { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: var(--space-4); }
  .hce-topbar, [data-hce-has-sound="false"] .hce-topbar { grid-template-columns: 64px minmax(0, 1fr) 64px; }
  .hce-heading .hce-play-title { font-size: clamp(1.05rem, .88rem + 1.05vw, 1.3rem); white-space: normal; }
  .hce-sound-desktop { display: none; }
  .hce-fullscreen { grid-column: 3; }
  .hce-layout { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .hce-scene { width: 100%; }
  .hce-controls { width: 100%; min-width: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: var(--space-2); align-items: center; }
  .hce-progress-wrap { grid-column: 1 / -1; }
  .hce-progress-pictures { display: grid; grid-template-columns: repeat(5, 36px); gap: 3px; justify-content: center; }
  .hce-progress-item { width: 36px; }
  .hce-message { grid-column: 1 / -1; max-width: none; }
  .hce-controls.is-reviewing { display: grid; grid-template-columns: 1fr; justify-items: center; }
  .hce-hint, .hce-choose, .hce-reopen { width: 100%; padding-inline: var(--space-2); }
  .hce-controls .hce-sound-mobile { width: 100%; height: auto; min-width: 64px; min-height: 64px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-pill); grid-column: auto; font-family: var(--font-heading); font-weight: 700; }
  .hce-controls.is-reviewing { display: grid; grid-template-columns: 1fr; }
  .hce-message { display: none; }
  .hce-curtain-card, .hce-confirm-card, .hce-state-card { padding: var(--space-3); }
}
@media (max-width: 26rem) {
  .hce-curtain-actions > button, .hce-state-actions > button { width: 100%; }
}
@media (max-height: 42rem) {
  .hce-heading p { display: none; }
  .hce-layout { height: calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .hce-message { display: none; }
}
@media (max-width: 42rem) and (max-height: 42rem) { .hce-layout { height: auto; } }
@media (prefers-reduced-motion: reduce) { .hce-picker-option, [data-hce-prototype="v43"] .hce-exact-fill-layer [data-hce-complete-fill] { transition: none; } }