/* Le Cuirassé — les deux mini-jeux de la section des clés : « Le chant des vers » (js/worms.js)
   et « L'odeur du ver » (js/scent.js). Le cadre vient de css/components/game.css.
   États : #vers-arena[data-phase] (idle, hunt, rune, console, ogre, fed, feed),
           #odeur-arena[data-phase] (idle, scent, won, lost). */

/* ---------- Le chant des vers ---------- */
.vers-arena { position: relative; aspect-ratio: 16 / 7.6; margin: 18px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #07080a; user-select: none; -webkit-user-select: none; }
.vers-arena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(.8); }
.vers-arena[data-phase="ogre"] > img { filter: brightness(.32) saturate(.6) hue-rotate(-10deg); }
.vers-field { position: absolute; inset: 0; }
.vers-thrall, .vers-rune, .vers-console, .vers-ogre { position: absolute; left: var(--x); top: var(--y); padding: 0; transform: translate(-50%, -50%); border: 0; cursor: pointer; }
.vers-thrall[hidden], .vers-rune[hidden], .vers-console[hidden], .vers-ogre[hidden] { display: none; }
.vers-thrall:focus-visible, .vers-rune:focus-visible, .vers-console:focus-visible, .vers-ogre:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* un Esclave : une silhouette voûtée, deux yeux verts */
.vers-thrall { width: 46px; height: 58px; background: none; animation: vers-in .25s ease-out; }
.vers-thrall::before { content: ''; position: absolute; inset: 0; background: #1a1c16; clip-path: polygon(50% 0, 78% 18%, 92% 52%, 100% 100%, 64% 78%, 50% 100%, 36% 78%, 0 100%, 8% 52%, 22% 18%); filter: drop-shadow(0 0 6px rgba(183, 197, 138, .5)); }
.vers-thrall::after { content: ''; position: absolute; left: 34%; top: 20%; width: 32%; height: 6px; background: radial-gradient(circle at 15% 50%, #c6ff6a 0 30%, transparent 35%), radial-gradient(circle at 85% 50%, #c6ff6a 0 30%, transparent 35%); }
@keyframes vers-in { from { transform: translate(-50%, -30%); opacity: 0; } }
/* la rune : un losange gravé ; dorée pour le Chanteur, verte pour le Nourrisseur */
.vers-rune { width: 42px; height: 42px; background: linear-gradient(135deg, #fff0c4, #e0c06a); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 22px #e0c06a; animation: vers-glow 1.2s ease-in-out infinite; }
.vers-rune.feeder { background: linear-gradient(135deg, #e6ffd0, #8fd06a); }
@keyframes vers-glow { 50% { filter: brightness(1.5); } }
.vers-console { width: 70px; height: 54px; border: 2px solid var(--worm); background: rgba(20, 16, 6, .85); box-shadow: 0 0 20px rgba(224, 192, 106, .7); animation: vers-glow 1.4s ease-in-out infinite; }
.vers-console::after { content: ''; position: absolute; inset: 12px 22px; background: var(--worm); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* l'Ogre : une masse sombre, une jauge de vie */
.vers-ogre { width: 120px; height: 120px; background: none; transition: left .6s ease, top .6s ease; }
.vers-ogre::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, #3a2f22 0 34%, #1b1610 60%, transparent 70%); border-radius: 50% 50% 40% 40%; filter: drop-shadow(0 0 14px rgba(255, 122, 92, .55)); }
.vers-ogre::after { content: ''; position: absolute; left: 34%; top: 30%; width: 32%; height: 8px; border-radius: 4px; background: #ff7a5c; box-shadow: 0 0 14px #ff7a5c; }
.vers-ogre i { position: absolute; left: 10%; right: 10%; bottom: -10px; height: 5px; background: rgba(255, 255, 255, .15); }
.vers-ogre i::after { content: ''; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--hp, 1)); background: #ff7a5c; }
.vers-ogre.hurt::before { animation: vers-hurt .3s; }
@keyframes vers-hurt { 40% { filter: brightness(2.2) drop-shadow(0 0 20px #fff); } }
.vers-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #8fd06a, #e6ffd0); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
.vers-bar[hidden] { display: none; }

.vers-ring { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin: 14px 24px 0; padding: 0; list-style: none; }
.vers-ring li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); text-align: center; font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; color: var(--faint); transition: color .3s, border-color .3s, background .3s; }
.vers-key { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.vers-key::after { content: ''; position: absolute; left: 100%; top: 50%; width: 9px; height: 2px; margin-top: -1px; background: currentColor; }
.vers-ring li.held { color: var(--worm-hi); border-color: var(--worm); background: rgba(224, 192, 106, .12); box-shadow: 0 0 14px rgba(224, 192, 106, .35); }
.vers-ring li.open { color: var(--bone-hi); border-color: color-mix(in srgb, var(--bone) 60%, transparent); background: rgba(183, 197, 138, .08); }
.vers-riddle { min-height: 1.4em; margin: 12px 24px 0; font-family: var(--font-lore); font-style: italic; font-size: 1.2rem; color: var(--worm-hi); }

/* ---------- L'odeur du ver ---------- */
.odeur-arena { position: relative; display: grid; grid-template-columns: 10% minmax(0, 1fr) 12%; align-items: stretch; aspect-ratio: 16 / 6.4; margin: 18px 24px 0; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 120%, rgba(183, 197, 138, .12), transparent 60%), linear-gradient(180deg, #0c0d0a, #050604); }
.odeur-arena::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--worm), var(--worm-hi)); transform-origin: 0 50%; transform: scaleX(var(--scent, 0)); }
.odeur-arena.fall { animation: odeur-fall .45s; }
@keyframes odeur-fall { 30% { box-shadow: inset 0 0 0 200px rgba(255, 110, 80, .18); } }
.odeur-ledge, .odeur-chest { position: relative; align-self: center; height: 34%; background: linear-gradient(180deg, #3a3626, #1a1810); border: 1px solid rgba(238, 245, 210, .25); }
.odeur-chest::after { content: ''; position: absolute; left: 50%; top: -28px; width: 36px; height: 24px; margin-left: -18px; background: linear-gradient(180deg, #e0c06a, #8a6f2c); border: 1px solid #fff0c4; box-shadow: 0 0 18px rgba(224, 192, 106, .6); }
.odeur-arena[data-phase="won"] .odeur-chest::after { box-shadow: 0 0 34px 8px rgba(255, 240, 196, .9); }
.odeur-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 12px 6px; }
.odeur-col { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; }
.odeur-cell { padding: 0; border: 1px dashed rgba(238, 245, 210, .07); background: transparent; cursor: pointer; transition: background .3s, border-color .3s, box-shadow .3s; }
.odeur-cell:disabled { cursor: default; }
.odeur-cell:not(:disabled):hover, .odeur-cell:not(:disabled):focus-visible { border-color: rgba(238, 245, 210, .4); outline: none; }
.odeur-cell.hint { animation: odeur-hint 2.4s ease-in-out infinite; }
@keyframes odeur-hint { 50% { background: rgba(224, 192, 106, .1); box-shadow: inset 0 0 12px rgba(224, 192, 106, .25); } }
.odeur-cell.solid { border-style: solid; border-color: var(--worm); background: linear-gradient(180deg, rgba(224, 192, 106, .35), rgba(120, 100, 40, .25)); box-shadow: 0 0 12px rgba(224, 192, 106, .4); }

@media (max-width: 680px) {
  .vers-arena, .odeur-arena { margin-inline: 16px; }
  .vers-arena { aspect-ratio: 4 / 4.2; }
  .odeur-arena { aspect-ratio: 4 / 3.6; }
  .vers-ring { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 16px; }
  .vers-riddle { margin-inline: 16px; }
  .vers-ogre { width: 90px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .vers-rune, .vers-console, .odeur-cell.hint, .vers-thrall, .odeur-arena.fall { animation: none; }
  .odeur-cell.hint { background: rgba(224, 192, 106, .08); }
}