/* Cité des rêves — Mur des souhaits : scène photo, plaques, plaque au sol,
   légende du cycle et codex des vœux. */

.wall-sec { background: radial-gradient(ellipse 70% 50% at 40% 40%, rgba(120, 60, 30, .14), transparent 70%); }
.wall-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 28px; align-items: start; }

.stage {
  --cx: 0; --cy: 0; --cw: 1080; --ch: 600;
  position: relative; overflow: hidden; aspect-ratio: var(--cw) / var(--ch);
  background: #160b08; border: 1px solid var(--line);
  user-select: none; -webkit-user-select: none;
}
.stage-inner { position: absolute; width: calc(1080 / var(--cw) * 100%); aspect-ratio: 1080 / 600; left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); }
.stage-photo { width: 100%; height: 100%; }
.plates { position: absolute; inset: 0; }
.plate {
  position: absolute; left: calc(var(--x) / 1080 * 100%); top: calc(var(--y) / 600 * 100%);
  width: calc(66 / 1080 * 100%); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%;
  transform: translate(-50%, -50%); background: transparent; cursor: crosshair;
}
.plate::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 228, 190, 0); transition: box-shadow .2s; }
.plate:hover::before, .plate:focus-visible::before { box-shadow: inset 0 0 0 2px rgba(255, 228, 190, .75), 0 0 18px rgba(255, 200, 140, .35); }
.plate:focus-visible { outline: none; }
.plate img {
  position: absolute; inset: 4%; width: 92%; height: 92%; border-radius: 50%;
  opacity: 0; transform: scale(.8); transition: opacity .16s ease, transform .2s ease;
  filter: sepia(.18) brightness(.94);
  box-shadow: 0 0 16px rgba(255, 214, 160, .35);
}
.plate.has img { opacity: 1; transform: scale(1); }
.plate.hit::after { content: ''; position: absolute; inset: -12%; border-radius: 50%; border: 2px solid rgba(255, 240, 215, .95); animation: hit .32s ease-out forwards; pointer-events: none; }
@keyframes hit { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.15); } }
.plate.granted img { animation: grant 1.7s ease forwards; }
@keyframes grant {
  0% { filter: sepia(.18) brightness(.94); }
  22%, 62% { filter: brightness(3.2) saturate(0); box-shadow: 0 0 34px 10px rgba(255, 255, 255, .85); opacity: 1; }
  100% { filter: brightness(3) saturate(0); box-shadow: 0 0 0 rgba(255, 255, 255, 0); opacity: 0; transform: scale(.92); }
}
.plate.rejected img { animation: reject 1.7s ease forwards; }
@keyframes reject {
  0% { filter: sepia(.18) brightness(.94); }
  18%, 62% { filter: sepia(1) saturate(7) hue-rotate(-28deg) brightness(.92); box-shadow: 0 0 26px 6px rgba(255, 90, 30, .7); opacity: 1; }
  100% { filter: sepia(1) saturate(7) hue-rotate(-28deg) brightness(.6); box-shadow: 0 0 0 rgba(255, 90, 30, 0); opacity: 0; }
}
.floor {
  position: absolute; left: calc(512 / 1080 * 100%); top: calc(500 / 600 * 100%);
  width: calc(190 / 1080 * 100%); height: calc(54 / 600 * 100%);
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.floor-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 rgba(150, 255, 230, 0); transition: box-shadow .3s; }
.floor:hover .floor-ring, .floor:focus-visible .floor-ring { box-shadow: 0 0 34px 10px rgba(150, 255, 230, .4), inset 0 0 18px rgba(150, 255, 230, .5); }
.floor:focus-visible { outline: none; }
.floor.active .floor-ring { animation: floor-pulse 1s ease-out; }
@keyframes floor-pulse { 0% { box-shadow: 0 0 0 0 rgba(170, 255, 235, .9), inset 0 0 30px rgba(170, 255, 235, .9); } 100% { box-shadow: 0 0 60px 30px rgba(170, 255, 235, 0), inset 0 0 0 rgba(170, 255, 235, 0); } }
.stage-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); }
.stage-flash.go { animation: stage-flash 1.4s ease-out; }
.stage-flash.bad { background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255, 110, 40, .55), rgba(255, 110, 40, 0) 70%); animation: stage-flash 1.4s ease-out; }
@keyframes stage-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

.wall-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 16px; background: var(--panel-solid); border: 1px solid var(--line); border-top: 0; }
.hud-help { margin: 0; font-size: .8rem; color: var(--muted); }
.hud-help b { color: var(--pearl); font-weight: 600; }
.hud-actions { display: flex; align-items: center; gap: 10px; }
.hud-count { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--gold); font-variant-numeric: tabular-nums; }
.wall-status { min-height: 1.6em; margin: 14px 0 26px; font-family: var(--font-lore); font-style: italic; font-size: 1.25rem; color: var(--pearl); }
.wall-status.ok { color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .5); }
.wall-status.bad { color: #ffb08a; }

.legend { padding: 20px; background: var(--panel-solid); border: 1px solid var(--line); }
.legend-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.legend-family p { margin: 0 0 8px; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.legend-family ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.legend-family li { position: relative; }
.legend-family img { width: 100%; aspect-ratio: 1; border-radius: 50%; }
.legend-family span { position: absolute; right: -2px; bottom: -2px; min-width: 18px; padding: 0 3px; font-size: .6rem; font-weight: 700; line-height: 16px; text-align: center; background: var(--night); color: var(--muted); border: 1px solid var(--line-strong); }

.codex { background: var(--panel-solid); border: 1px solid var(--line); padding: 20px 18px 8px; }
.codex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.codex-head .panel-title { flex: 1; }
.codex-count { margin: 0 0 14px; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.codex-count b { color: var(--gold-hi); font-size: 1rem; }
.codex-list { margin: 0; padding: 0 4px 0 0; list-style: none; max-height: 1060px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.wish { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wish:last-child { border-bottom: 0; }
.wish-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; align-self: start; padding: 4px; background: #1a0e0a; border: 1px solid rgba(255, 210, 160, .15); }
.wish-grid i { aspect-ratio: 1; border-radius: 50%; background: #070404; box-shadow: inset 0 0 0 1px rgba(255, 210, 160, .18); overflow: hidden; }
.wish-grid img { width: 100%; height: 100%; }
.wish-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wish h3 { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pearl); }
.wish .state { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.wish.granted .state { color: var(--exotic); }
.wish .text { margin: 4px 0 4px; font-family: var(--font-lore); font-style: italic; font-size: 1.08rem; line-height: 1.3; color: #ece4d0; }
.wish .effect { margin: 0 0 8px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.wish .fill { padding: 0; border: 0; background: none; cursor: pointer; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.wish .fill:hover { color: #fff; }
.wish.locked .wish-grid { opacity: .35; }
.wish.flash { animation: wish-flash 1.6s ease; }
@keyframes wish-flash { 25% { background: rgba(206, 174, 51, .16); } }

@media (max-width: 1020px) {
  .wall-layout { grid-template-columns: minmax(0, 1fr); }
  .codex-list { max-height: none; }
}
@media (max-width: 680px) {
  .stage { --cx: 300; --cy: 118; --cw: 470; --ch: 446; }
  .plate { width: calc(70 / 1080 * 100%); }
  .legend-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wish { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .hud-actions { width: 100%; }
  .hud-actions .d-btn { flex: 1; }
}