/* La Tour — scène de la Cour : plan stylisé, objets sûrs, « Le sol est en feu »
   (brasier, pilier de lumière, Gardien) et balles. Les positions viennent de
   js/courtyard-map.js sous forme de variables --x, --y, --w, --h (en %). */

.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 40%, rgba(224, 106, 69, .1), transparent 70%); }

.court {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; container-type: inline-size;
  background: #0b101d; border: 1px solid var(--line);
  user-select: none; -webkit-user-select: none;
}
.court > * { position: absolute; }

/* ---------- Sol, remparts, passerelle ---------- */
.court-ground {
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(156, 200, 234, .1), transparent 75%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 6.25%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3.9%),
    linear-gradient(180deg, #131a2c, #0d1220);
}
.court-ground::after {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 236, 150, .85), transparent 13%),
    radial-gradient(circle at 68% 62%, rgba(255, 220, 120, .8), transparent 15%),
    radial-gradient(circle at 44% 82%, rgba(255, 200, 90, .7), transparent 12%),
    radial-gradient(circle at 84% 22%, rgba(255, 210, 110, .7), transparent 11%),
    linear-gradient(120deg, #7a1407, #d8400f 35%, #ff7a1a 55%, #c92f0a 78%, #7a1407);
  background-size: 180% 180%, 160% 160%, 200% 200%, 170% 170%, 300% 300%;
  background-position: var(--lava-shift, 0%) 0%;
}
.is-lava .court-ground::after { opacity: 1; animation: lava-flow 9s linear infinite alternate; }
@keyframes lava-flow { to { background-position: 100% 60%, 0% 100%, 60% 0%, 100% 40%, 100% 100%; } }

.court-ramparts { left: 0; right: 0; top: 0; height: 4.2%; background: repeating-linear-gradient(90deg, #3a4257 0 3%, #252c3f 3% 4.2%); border-bottom: 1px solid rgba(255, 255, 255, .22); }
.court-walkway {
  left: 6%; right: 6%; top: 80%; bottom: 3%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 14px), rgba(120, 132, 160, .16);
  border: 1px solid rgba(255, 255, 255, .16);
}
.is-lava .court-walkway { background-color: rgba(60, 12, 4, .25); border-color: rgba(255, 190, 120, .35); }
.court-ring {
  left: var(--x); top: var(--y); width: calc(var(--r) * 2); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 1.2cqw rgba(255, 255, 255, .045), inset 0 0 0 1.35cqw rgba(255, 255, 255, .16);
}
.court-label { left: var(--x); top: var(--y); font-size: clamp(.42rem, 1.15cqw, .62rem); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .42); white-space: nowrap; pointer-events: none; }
.court-label.turn { writing-mode: vertical-rl; }

/* ---------- Objets sûrs ---------- */
.obj { left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: grid; place-items: center; pointer-events: none; transition: box-shadow .4s, border-color .4s; }
.obj span { padding: 0 .4cqw; font-size: clamp(.4rem, 1.05cqw, .6rem); font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-align: center; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.obj--crate { background: linear-gradient(135deg, #8a5a34, #5f3c22); border: 1px solid #c08a55; box-shadow: inset 0 0 0 .35cqw rgba(0, 0, 0, .22); }
.obj--crate::before, .obj--crate::after { content: ''; position: absolute; inset: 12%; border-top: 1px solid rgba(255, 220, 170, .35); transform: rotate(40deg); }
.obj--crate::after { transform: rotate(-40deg); }
.obj--rail { background: linear-gradient(90deg, #c9d2e4, #8f9bb4); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.obj--rail.obj--tall { background: linear-gradient(180deg, #c9d2e4, #8f9bb4); }
.obj--bed { border: 1px solid #6f8a5a; border-radius: 3px; background: radial-gradient(circle at 20% 50%, #5fa05a 0 14%, transparent 15%), radial-gradient(circle at 50% 45%, #74b56a 0 16%, transparent 17%), radial-gradient(circle at 80% 55%, #5fa05a 0 14%, transparent 15%), #24361f; }
.obj--bench { border: 1px solid #a98c63; background: repeating-linear-gradient(90deg, #6d5638 0 22%, #57432a 22% 25%); }
.obj--tank { border-radius: 50%; border: 1px solid #f0b08a; background: radial-gradient(circle, #2c120a 0 20%, #d9d2c1 21% 30%, #c4552d 31% 100%); }
.obj--stand { border: 1px solid rgba(255, 255, 255, .34); background: linear-gradient(180deg, rgba(224, 106, 69, .5) 0 16%, rgba(20, 28, 48, .92) 16%); }
.is-lava .obj { box-shadow: 0 0 1.4cqw rgba(140, 220, 255, .55); border-color: rgba(190, 235, 255, .9); }

/* ---------- Caisse « Ne me ramassez pas » ---------- */
.pickup {
  left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 4;
  padding: .5cqw .9cqw; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--gold-hi); background: rgba(8, 12, 24, .9); color: var(--gold-hi);
  font-size: clamp(.5rem, 1.2cqw, .68rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  animation: pickup-pulse 2.6s ease-in-out infinite;
}
.pickup:hover, .pickup:focus-visible { background: var(--gold-hi); color: var(--night); }
.pickup[hidden] { display: none; }
@keyframes pickup-pulse { 50% { box-shadow: 0 0 1.6cqw rgba(241, 219, 164, .55); } }

/* ---------- Pilier de lumière et Gardien ---------- */
.beam { left: var(--x); top: var(--y); width: calc(var(--r) * 2); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 16%, rgba(120, 210, 255, .9) 30%, rgba(60, 150, 255, .35) 60%, transparent 72%); box-shadow: 0 0 3cqw 1cqw rgba(90, 180, 255, .7); }
.beam i { position: absolute; inset: -30%; border-radius: 50%; border: 2px solid rgba(170, 225, 255, .9); animation: beam-ring 1.5s ease-out infinite; }
@keyframes beam-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.beam[hidden], .guardian[hidden] { display: none; }
.guardian { left: var(--x); top: var(--y); width: 2.2cqw; min-width: 12px; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); z-index: 5; pointer-events: none;
  background: #fff; border: 2px solid #ff9c6b; box-shadow: 0 0 1.6cqw .4cqw rgba(255, 120, 60, .8); }
.guardian.burning { background: #ffb38a; animation: burn .16s linear infinite alternate; }
@keyframes burn { to { box-shadow: 0 0 2.6cqw 1cqw rgba(255, 60, 20, .95); } }
.has-quickness .guardian { border-color: #7fd4ff; box-shadow: 0 0 1.8cqw .5cqw rgba(110, 200, 255, .9); }
.court.is-lava { cursor: none; touch-action: none; }
.court.burned::after { content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(255, 90, 30, .75), rgba(120, 10, 0, .5)); animation: burned 1.1s ease-out forwards; }
@keyframes burned { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Balles ---------- */
.ball {
  left: var(--x); top: var(--y); width: 3.6cqw; min-width: 18px; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 6; border-radius: 50%;
  cursor: grab; touch-action: none;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), var(--ball) 42%, color-mix(in srgb, var(--ball) 55%, #000) 100%);
  box-shadow: 0 .5cqw 1cqw rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .35), 0 0 1.4cqw color-mix(in srgb, var(--ball) 70%, transparent);
}
.ball.held { cursor: grabbing; transform: translate(-50%, -50%) scale(1.18); }
.ball.spawn { animation: ball-spawn .6s var(--ease); }
@keyframes ball-spawn { 0% { transform: translate(-50%, -50%) scale(0); } 70% { transform: translate(-50%, -50%) scale(1.25); } }
.ball[hidden], .giant[hidden] { display: none; }
.is-lava .ball { opacity: .35; pointer-events: none; }
.giant {
  left: 50%; top: 44%; width: 30cqw; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 7; border-radius: 50%; pointer-events: none;
  background:
    repeating-conic-gradient(from 20deg, rgba(120, 140, 170, .16) 0 12deg, transparent 12deg 30deg),
    radial-gradient(circle at 38% 32%, #fff, #e9edf5 38%, #a9b4c8 72%, #6c7890 100%);
  box-shadow: 0 0 6cqw 1.5cqw rgba(255, 255, 255, .45), inset -2cqw -2.5cqw 5cqw rgba(40, 50, 80, .45);
}
.giant.rise { animation: giant-rise 1.6s var(--ease); }
@keyframes giant-rise { from { transform: translate(-50%, 10%) scale(.1); opacity: 0; } }

/* ---------- Barre sous la scène ---------- */
.court-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; }
.court-hud .hud-help { margin: 0; font-size: .8rem; color: var(--muted); }
.court-hud .hud-help b { color: var(--pearl); font-weight: 600; }
.court-hud .hud-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.shield { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; }
.shield[hidden], .court-hud [hidden] { display: none; }
.shield span { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.shield .bar { flex: 1; height: 8px; background: rgba(255, 255, 255, .1); }
.shield .bar i { display: block; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #ff6a3c, #ffd27a); }
.court-status { min-height: 3.2em; margin: 14px 0 6px; font-family: var(--font-lore); font-style: italic; font-size: 1.2rem; line-height: 1.35; color: var(--pearl); }
.court-status.ok { color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .5); }
.court-status.bad { color: #ffb08a; }
.court-status.hot { color: #ffd9a8; }
.court-note { margin: 0; font-size: .78rem; color: var(--faint); }