/* screen: focus */

/* ============================================================
   Scene root : plein écran radical, position fixed pour ignorer
   toute contrainte de layout de la coquille (masquée par base.css).
   ============================================================ */

.focus-scene {
  position: fixed;
  /* inset alone sizes to the viewport. 100vw *includes* the classic scrollbar,
     so it pushed the page 15px wide the moment focus mode opened. */
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font);

  /* ---- palette locale : wagon en bois miel baigné de lumière dorée (thème clair) ---- */
  --scene-wall-a: #E7C28D;
  --scene-wall-b: #B98A50;
  --scene-wall-line: rgba(255, 244, 214, .35);
  --scene-frame: #6E4A28;
  --scene-frame-light: #C89A5E;
  --scene-sky-a: #6FB8EA;
  --scene-sky-b: #CDEAF6;
  --scene-sun: #FFF0C4;
  --scene-cloud: rgba(255, 255, 255, .92);
  --scene-mtn-far: #9DB8D6;
  --scene-mtn-near: #5C8A5B;
  --scene-lake-a: #BFE6EE;
  --scene-lake-b: #4E9DBE;
  --scene-lake-shine: rgba(255, 255, 255, .6);
  --scene-tree: #2F6B42;
  --scene-tree-2: #204F32;
  --scene-glow: rgba(255, 205, 120, .32);
  --scene-chair: #7FA05F;
  --scene-chair-dark: #56713F;
  --scene-chair-light: #ABC787;
  --scene-hair: #6B4429;
  --scene-hair-hi: #8C5F3B;
  --scene-skin: #E3AB78;
  --scene-laptop: #DAD5C7;
  --scene-laptop-glow: rgba(200, 226, 255, .85);
  --scene-lamp-shade: #E7B85A;
  --scene-lamp-glow: rgba(255, 200, 110, .55);
  --scene-floor: #9C6F40;
  --scene-corridor-a: #CBA26D;
  --scene-corridor-b: #6E4A28;
  --scene-door: #6E4A28;
  --scene-plaque: #7A4A18;
  --scene-rug: #2F5DA8;
  --scene-rug-line: rgba(255, 255, 255, .18);
  --scene-pill-bg: rgba(26, 19, 12, .55);
  --scene-pill-ink: #FFF6E7;
  --scene-pill-line: rgba(255, 255, 255, .18);
  --scene-pill-hover: rgba(255, 255, 255, .14);
  --scene-pill-hover-strong: rgba(255, 255, 255, .24);
  --scene-dust: rgba(255, 224, 150, .9);
  --scene-idle-bg: rgba(30, 20, 10, .22);
  --scene-shadow-soft: rgba(40, 26, 10, .22);
  --scene-shadow-med: rgba(40, 26, 10, .3);
  --scene-shadow-strong: rgba(24, 14, 4, .4);
  /* deep shade used to darken the traveler's fabric, a literal black hex was
     the only hard-coded color left on this screen (integration review) */
  --scene-shade: #17110A;
  --scene-star: #FFFFFF;

  background: var(--scene-floor);
}

/* ---- variante nuit adoucie (thème sombre), seul le brun profond y reste ---- */
[data-theme="dark"] .focus-scene {
  --scene-wall-a: #221A38;
  --scene-wall-b: #120E24;
  --scene-wall-line: rgba(200, 190, 255, .05);
  --scene-frame: #171233;
  --scene-frame-light: #362B5C;
  --scene-sky-a: #2A2154;
  --scene-sky-b: #171233;
  --scene-sun: #C9BFFF;
  --scene-cloud: rgba(230, 225, 255, .32);
  --scene-mtn-far: #4A3F80;
  --scene-mtn-near: #362C5E;
  --scene-lake-a: #1C1638;
  --scene-lake-b: #0A0818;
  --scene-lake-shine: rgba(190, 180, 255, .4);
  --scene-tree: #241C46;
  --scene-tree-2: #171233;
  --scene-glow: rgba(160, 140, 255, .22);
  --scene-chair: #35502F;
  --scene-chair-dark: #263B22;
  --scene-chair-light: #4C6E45;
  --scene-hair: #4A3226;
  --scene-hair-hi: #6B4835;
  --scene-skin: #C79666;
  --scene-laptop: #46406E;
  --scene-laptop-glow: rgba(190, 180, 255, .8);
  --scene-lamp-shade: #E8C15E;
  --scene-lamp-glow: rgba(255, 205, 120, .38);
  --scene-floor: #171233;
  --scene-corridor-a: #221A38;
  --scene-corridor-b: #0B0918;
  --scene-door: #120E24;
  --scene-plaque: #E8C57A;
  --scene-rug: #2C3F82;
  --scene-rug-line: rgba(255, 255, 255, .07);
  --scene-pill-bg: rgba(9, 7, 20, .6);
  --scene-pill-ink: #F3F0FF;
  --scene-pill-line: rgba(255, 255, 255, .1);
  --scene-pill-hover: rgba(255, 255, 255, .08);
  --scene-pill-hover-strong: rgba(255, 255, 255, .16);
  --scene-dust: rgba(216, 206, 255, .7);
  --scene-idle-bg: rgba(6, 4, 16, .34);
  --scene-shadow-soft: rgba(0, 0, 0, .3);
  --scene-shadow-med: rgba(0, 0, 0, .4);
  --scene-shadow-strong: rgba(0, 0, 0, .5);
  --scene-shade: #06040F;
  --scene-star: #E9E5FF;
}

/* ============================================================
   Art : l'intérieur du wagon, tout en CSS
   ============================================================ */

.focus-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      var(--scene-wall-a) 0%, var(--scene-wall-b) 76%,
      var(--scene-floor) 76%, var(--scene-floor) 100%);
}

/* ui-fluide layer 1: the voxel canvas mounted by focus.js (engine.js's
   <canvas class="scene-canvas">) bakes synchronously (200-340ms, D-012)
   inside mountVoxel(); focus.js defers the mount itself (rAF + setTimeout 0)
   and only adds .is-baked to #focus-scene once mountVoxel() has actually
   returned, by then the canvas already holds real painted pixels
   (engine.js's mountVoxel ends with the synchronous `rebuild(); start();`).
   Until .is-baked lands, this rule keeps the canvas invisible so .focus-art
   above (the rich CSS fallback, D-013) shows through as the placeholder: no
   separate token-gradient placeholder needed, this screen already had one. */
.focus-scene .scene-canvas {
  opacity: 0;
  transition: opacity .22s cubic-bezier(0, 0, 0.2, 1);
}
.focus-scene.is-baked .scene-canvas {
  opacity: 1;
}

.focus-wall {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--scene-wall-line) 0 2px, transparent 2px 84px);
  opacity: .7;
}

/* ---- fenêtre ---- */

.focus-window {
  position: absolute;
  left: 5%;
  top: 9%;
  width: clamp(200px, 37vw, 560px);
  height: 60%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 18px 46px var(--scene-shadow-strong);
}

.focus-window-inner { position: absolute; inset: 0; overflow: hidden; }

.focus-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--scene-sky-a) 0%, var(--scene-sky-b) 60%, var(--scene-lake-a) 60%);
}

[data-theme="dark"] .focus-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 18%, var(--scene-star), transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 14%, var(--scene-star), transparent 60%),
    radial-gradient(1.1px 1.1px at 78% 28%, var(--scene-star), transparent 60%),
    radial-gradient(1.4px 1.4px at 34% 42%, var(--scene-star), transparent 60%),
    radial-gradient(1.1px 1.1px at 48% 9%, var(--scene-star), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 50%, var(--scene-star), transparent 60%),
    radial-gradient(1.1px 1.1px at 10% 50%, var(--scene-star), transparent 60%);
  opacity: .6;
}

.focus-sun {
  position: absolute;
  top: 10%;
  right: 15%;
  width: clamp(46px, 8vw, 96px);
  height: clamp(46px, 8vw, 96px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--scene-sun) 0%, transparent 70%);
  filter: blur(1px);
}

.focus-cloud {
  position: absolute;
  width: clamp(36px, 6.4vw, 84px);
  height: clamp(12px, 2.2vw, 24px);
  border-radius: 999px;
  background: var(--scene-cloud);
  filter: blur(1px);
}
.focus-cloud-1 { top: 15%; left: 12%; }
.focus-cloud-2 { top: 24%; left: 46%; width: clamp(24px, 4.6vw, 56px); }

/* ---- relief lointain : montagnes, collines, lac, 3 couches de parallaxe ---- */

.focus-mtn {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
}
.focus-mtn-far { bottom: 42%; height: 24%; }
.focus-mtn-mid { bottom: 36%; height: 16%; }

.focus-mtn-track {
  display: flex;
  width: 200%;
  height: 100%;
}
/* the parallax scroll (focus-parallax-scroll) is gone: .focus-art sits
   entirely UNDER the opaque voxel canvas (fit:'cover', focus.js) once baked,
   which happens within one frame's worth of paint (200-340ms, D-012) of this
   scene mounting. A loop that only ever runs behind an opaque cover burns
   battery for a picture nobody can see (doctrine, case 3), so both mountain
   layers are left parked at their laid-out rest position instead. */

.focus-mtn-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 50%;
  flex: none;
  height: 100%;
}

.focus-peak-shape {
  width: 0; height: 0;
  border-left: clamp(16px, 3.2vw, 42px) solid transparent;
  border-right: clamp(16px, 3.2vw, 42px) solid transparent;
  border-bottom: clamp(20px, 4vw, 54px) solid var(--scene-mtn-far);
  filter: drop-shadow(0 2px 3px var(--scene-shadow-soft));
}
.focus-peak-shape:nth-child(2n) { transform: scaleY(1.3) translateY(2px); }
.focus-peak-shape:nth-child(3n) { transform: scaleY(.78); }
.focus-peak-shape:nth-child(5n) { transform: scaleY(1.1); }

.focus-hill-shape {
  width: clamp(46px, 8vw, 108px);
  height: clamp(30px, 5.2vw, 68px);
  border-radius: 50% 50% 0 0;
  background: var(--scene-mtn-near);
  filter: drop-shadow(0 2px 3px var(--scene-shadow-soft));
}
.focus-hill-shape:nth-child(2n) { height: clamp(20px, 3.6vw, 48px); }
.focus-hill-shape:nth-child(3n) { height: clamp(36px, 6vw, 80px); }

.focus-lake {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, var(--scene-lake-a), var(--scene-lake-b));
  overflow: hidden;
}
/* held at its mid-shimmer opacity instead of breathing forever
   (focus-lake-shimmer removed): same reasoning as the parallax layers above,
   this is a covered-by-the-canvas background detail. */
.focus-lake-shine {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(100deg, var(--scene-lake-shine) 0 6px, transparent 6px 42px);
  opacity: .29;
}

/* ---- rive proche : silhouettes d'arbres qui défilent, couche la plus rapide ---- */

.focus-treeline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15%;
  overflow: hidden;
}
.focus-treeline-track {
  display: flex;
  width: 200%;
  height: 100%;
}
.focus-tree-shape {
  width: 0; height: 0;
  border-left: clamp(9px, 1.6vw, 20px) solid transparent;
  border-right: clamp(9px, 1.6vw, 20px) solid transparent;
  border-bottom: clamp(16px, 2.8vw, 34px) solid var(--scene-tree);
  align-self: flex-end;
}
.focus-tree-shape:nth-child(2n) { border-bottom-color: var(--scene-tree-2); transform: scaleY(1.2); }
.focus-tree-shape:nth-child(3n) { transform: scaleY(.8); }

/* no longer drifting (focus-bird-drift removed): same covered-by-canvas
   reasoning as the rest of .focus-art. */
.focus-bird {
  position: absolute;
  top: 21%;
  left: 55%;
  font-size: clamp(11px, 1.7vw, 17px);
  opacity: .8;
}

.focus-window-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--scene-glow) 0%, transparent 45%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.focus-window-frame {
  position: absolute;
  inset: 0;
  border: clamp(8px, 1.2vw, 14px) solid var(--scene-frame);
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--scene-frame-light);
  pointer-events: none;
}
.focus-mullion { position: absolute; background: var(--scene-frame); opacity: .85; }
.focus-mullion-v { left: 50%; top: 0; bottom: 0; width: clamp(4px, .6vw, 8px); transform: translateX(-50%); }
.focus-mullion-h { top: 58%; left: 0; right: 0; height: clamp(4px, .6vw, 8px); }

/* ---- étagère ---- */

.focus-shelf {
  position: absolute;
  right: 4%;
  top: 8%;
  width: clamp(140px, 19vw, 250px);
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, var(--scene-frame-light), var(--scene-frame));
  border-radius: var(--r-md);
  box-shadow: 0 14px 28px var(--scene-shadow-med);
}
.focus-shelf-row { display: flex; align-items: flex-end; gap: 5px; height: clamp(28px, 3.8vw, 44px); margin-bottom: 8px; }
.focus-book { flex: 1; height: 100%; }
.focus-book.b1 { background: var(--warm); height: 90%; }
.focus-book.b2 { background: var(--blue); }
.focus-book.b3 { background: var(--gold); height: 78%; }
.focus-book.b4 { background: var(--violet); height: 96%; }
.focus-book.b5 { background: var(--accent); height: 84%; }
.focus-book.b6 { background: var(--warm); height: 68%; }
.focus-shelf-deco { position: absolute; right: 10px; bottom: 6px; font-size: clamp(15px, 1.9vw, 21px); opacity: .9; }

/* ---- lampe ---- */

.focus-lamp {
  position: absolute;
  left: 46%;
  top: 16%;
  width: 10px;
  height: 38%;
}
/* held at its mid-pulse size instead of breathing forever
   (focus-lamp-pulse removed): same covered-by-canvas reasoning as the rest
   of .focus-art. */
.focus-lamp-glow {
  position: absolute;
  left: 50%;
  top: -8%;
  width: clamp(110px, 15vw, 210px);
  height: clamp(110px, 15vw, 210px);
  transform: translate(-50%, -30%) scale(1.04);
  border-radius: 50%;
  background: radial-gradient(circle, var(--scene-lamp-glow) 0%, transparent 68%);
  opacity: .85;
}
.focus-lamp-shade {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 28px;
  background: linear-gradient(180deg, var(--scene-lamp-shade), var(--scene-frame-light));
  border-radius: var(--r-sm) var(--r-sm) var(--r-lg) var(--r-lg);
  box-shadow: 0 4px 12px var(--scene-shadow-med);
}
.focus-lamp-pole {
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: calc(100% - 24px);
  background: var(--scene-frame);
  border-radius: var(--r-sm);
}

/* ---- fauteuil + voyageur (silhouette de dos, du volume) ---- */

.focus-chair {
  position: absolute;
  left: 39%;
  bottom: 13%;
  width: clamp(130px, 19vw, 250px);
  height: clamp(150px, 22vw, 280px);
}
.focus-chair-shadow {
  position: absolute;
  left: 4%; bottom: -6%;
  width: 92%; height: 18%;
  background: radial-gradient(ellipse, var(--scene-shadow-strong) 0%, transparent 72%);
  filter: blur(2px);
}
.focus-chair-back {
  position: absolute;
  left: 8%; bottom: 30%;
  width: 84%; height: 66%;
  background: linear-gradient(180deg, var(--scene-chair), var(--scene-chair-dark));
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm);
  box-shadow: 0 16px 26px var(--scene-shadow-med);
}
.focus-chair-back-sheen {
  position: absolute;
  left: 22%; top: 33%;
  width: 40%; height: 46%;
  background: radial-gradient(ellipse, var(--scene-chair-light) 0%, transparent 75%);
  opacity: .55;
  border-radius: var(--r-lg);
}
.focus-chair-arm {
  position: absolute;
  bottom: 12%;
  width: 17%; height: 46%;
  background: linear-gradient(180deg, var(--scene-chair-light), var(--scene-chair-dark));
  border-radius: var(--r-sm);
  box-shadow: 0 8px 14px var(--scene-shadow-soft);
}
.focus-chair-arm-l { left: -3%; }
.focus-chair-arm-r { right: -3%; }
.focus-chair-seat {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 38%;
  background: linear-gradient(180deg, var(--scene-chair), var(--scene-chair-dark));
  border-radius: var(--r-md) var(--r-md) var(--r-lg) var(--r-lg);
  box-shadow: 0 10px 20px var(--scene-shadow-soft);
}

.focus-traveler {
  position: absolute;
  left: 50%; bottom: 30%;
  transform: translateX(-50%);
  width: clamp(60px, 9vw, 110px);
  height: clamp(74px, 11vw, 132px);
  filter: drop-shadow(0 8px 10px var(--scene-shadow-med));
}
.focus-traveler-arm {
  position: absolute;
  bottom: 6%;
  width: 21%; height: 42%;
  background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 60%, var(--scene-shade)));
  border-radius: var(--r-sm);
}
.focus-traveler-arm-l { left: 2%; transform: rotate(8deg); }
.focus-traveler-arm-r { right: 2%; transform: rotate(-8deg); }
.focus-traveler-body {
  position: absolute;
  left: 9%; bottom: 10%;
  width: 82%; height: 64%;
  background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 62%, var(--scene-shade)));
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm);
}
/* jacket collar sits at the shoulder line, shoulders read as posed into the chair */
.focus-traveler-collar {
  position: absolute;
  left: 50%; top: 38%;
  transform: translateX(-50%);
  width: 54%; height: 15%;
  background: color-mix(in srgb, var(--blue) 40%, var(--scene-shade));
  border-radius: 45% 45% 50% 50% / 65% 65% 40% 40%;
}
/* nuque : bande de peau visible entre les cheveux et le col, peinte après le col
   et avant la tête pour que seule sa partie basse dépasse de la chevelure */
.focus-traveler-nape {
  position: absolute;
  left: 50%; top: 31%;
  transform: translateX(-50%);
  width: 22%; height: 15%;
  background: var(--scene-skin);
  border-radius: 0 0 45% 45% / 0 0 65% 65%;
}
.focus-traveler-ear {
  position: absolute;
  top: 17%;
  width: 9%; height: 9%;
  border-radius: 50%;
  background: var(--scene-skin);
}
.focus-traveler-ear-l { left: 6%; }
.focus-traveler-ear-r { right: 6%; }
/* tête : 34-40% de la silhouette (mesuré en audit), teintes chaudes, jamais un aplat sombre */
.focus-traveler-head {
  position: absolute;
  left: 50%; top: 4%;
  transform: translateX(-50%);
  width: 44%; height: 36%;
  border-radius: 50% 50% 42% 42% / 60% 60% 38% 38%;
  background: linear-gradient(155deg, var(--scene-hair-hi), var(--scene-hair));
}
.focus-laptop {
  position: absolute;
  left: 50%; bottom: 30%;
  transform: translateX(-50%);
  width: 46%; height: 16%;
  background: var(--scene-laptop);
  border-radius: var(--r-sm) var(--r-sm) 3px 3px;
  box-shadow: 0 3px 8px var(--scene-shadow-soft);
}
.focus-laptop-glow {
  position: absolute;
  left: 8%; right: 8%; top: -70%;
  height: 70%;
  background: linear-gradient(180deg, var(--scene-laptop-glow), transparent);
  opacity: .8;
  border-radius: 3px 3px 0 0;
}

/* ---- couloir + porte ---- */

.focus-corridor {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 19%;
  background: linear-gradient(90deg, var(--scene-corridor-a), var(--scene-corridor-b));
  clip-path: polygon(30% 0%, 100% 8%, 100% 92%, 30% 100%);
}
.focus-corridor-runner {
  position: absolute;
  left: 42%; right: 8%; top: 30%; bottom: 6%;
  background: repeating-linear-gradient(180deg, var(--scene-rug) 0 16px, var(--scene-rug-line) 16px 18px);
  border-radius: var(--r-sm);
  opacity: .9;
}
.focus-door {
  position: absolute;
  top: 20%; right: 13%;
  width: clamp(28px, 4.2vw, 52px);
  height: clamp(54px, 8.4vw, 96px);
  background: var(--scene-door);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 2px var(--scene-frame-light);
}
.focus-door-plaque {
  position: absolute;
  top: 14%; left: 50%;
  transform: translateX(-50%);
  font-size: clamp(9px, 1.05vw, 12.5px);
  font-weight: 900;
  color: var(--scene-plaque);
  background: var(--scene-shadow-soft);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* ---- tapis : petite emprise, motif tissé discret, bords moins ovales ---- */

.focus-rug {
  position: absolute;
  left: 36%; right: 32%; bottom: 0;
  height: 9%;
  background:
    repeating-radial-gradient(ellipse at 50% 140%, var(--scene-rug-line) 0 2px, transparent 2px 13px),
    var(--scene-rug);
  border-radius: 50% 50% var(--r-sm) var(--r-sm) / 65% 65% var(--r-sm) var(--r-sm);
  box-shadow: inset 0 0 0 2px var(--scene-rug-line);
  opacity: .88;
}

/* ---- poussières de lumière ---- */

.focus-dust {
  position: absolute;
  left: calc(9% + var(--fd) * 6%);
  top: calc(15% + var(--fd) * 8%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--scene-dust);
  box-shadow: 0 0 6px 1px var(--scene-dust);
  opacity: .7;
}

/* ============================================================
   UI : pills translucides sombres, lisibles dans les deux thèmes
   ============================================================ */

.focus-ui { position: absolute; inset: 0; z-index: 2; }

.focus-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--scene-pill-bg);
  border: 1px solid var(--scene-pill-line);
  color: var(--scene-pill-ink);
  font-weight: 800;
  font-size: clamp(12.5px, 1.6vw, 14.5px);
  font-family: var(--font);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px var(--scene-shadow-med);
  transition: transform .2s ease-out, background .2s ease;
}
.focus-pill:hover { transform: translateY(-1px); }
/* ui-fluide layer 2: components.css only styles :active on .btn/.icon-btn,
   and these pills use their own class, so they had no pressed feedback at
   all (barème: scale 0.96-0.98, notably felt on touch where :hover never
   fires). Placed after :hover so the press wins the transform tie while the
   pointer is held down, same fix, same ordering, as .shop-tab:active. */
.focus-pill:active { transform: scale(.97); transition: transform .1s ease-out; }

.focus-top-left {
  position: absolute;
  top: clamp(14px, 2.4vw, 24px);
  left: clamp(14px, 2.4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.focus-timer-digits { min-width: 3.6ch; text-align: center; color: var(--scene-pill-ink); }
.focus-timer-pill.is-hidden .focus-timer-digits { display: none; }

.focus-eye-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px;
  color: var(--scene-pill-ink);
  background: var(--scene-pill-hover);
  transition: background .2s ease, transform .15s ease-out;
}
.focus-eye-btn:hover { background: var(--scene-pill-hover-strong); }
.focus-eye-btn:active { transform: scale(.9); }

.focus-tooltip {
  max-width: 200px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--scene-pill-bg);
  border: 1px solid var(--scene-pill-line);
  color: var(--scene-pill-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .35s ease-out, transform .35s ease-out;
}
.focus-tooltip.visible { opacity: 1; transform: none; }

.focus-bottom-left {
  position: absolute;
  left: clamp(14px, 2.4vw, 24px);
  bottom: clamp(14px, 2.4vw, 24px);
}

.focus-ambience-wrap { position: relative; }
.focus-ambience-btn { cursor: pointer; }

.focus-ambience-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: var(--scene-pill-bg);
  border: 1px solid var(--scene-pill-line);
  border-radius: var(--r-md);
  padding: 6px;
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 32px var(--scene-shadow-strong);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: focus-menu-in .2s ease-out both;
}
/* [hidden] must beat the layout `display` above it: an author-stylesheet class rule
   otherwise outranks the UA's [hidden]{display:none} at equal specificity, so the
   ambience menu stayed visible even while the `hidden` attribute was set. */
.focus-ambience-menu[hidden] { display: none; }
@keyframes focus-menu-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.focus-amb-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--scene-pill-ink);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.focus-amb-opt:hover { background: var(--scene-pill-hover); }
.focus-amb-opt.selected { background: var(--scene-pill-hover-strong); }
/* ui-fluide layer 2: same press-feedback gap as .focus-pill above, this
   menu option is its own class (not .focus-pill), so it needs its own rule. */
.focus-amb-opt:active { transform: scale(.97); transition: transform .1s ease-out; }
.focus-amb-ico { font-size: 17px; }
.focus-amb-txt { display: flex; flex-direction: column; }
.focus-amb-txt b { font-size: 13px; }
.focus-amb-txt small { font-size: 10.5px; opacity: .72; font-weight: 700; }

.focus-exit-btn {
  position: absolute;
  right: clamp(14px, 2.4vw, 24px);
  bottom: clamp(14px, 2.4vw, 24px);
  cursor: pointer;
}

.focus-idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--scene-idle-bg);
  backdrop-filter: blur(1.5px);
  z-index: 3;
  animation: focus-idle-in .3s ease-out both;
}
/* [hidden] must beat the layout `display` above it: same bug, same fix, as
   .focus-ambience-menu[hidden] above: an author-stylesheet class rule
   otherwise outranks the UA's [hidden]{display:none} at equal specificity,
   so this full-screen overlay stayed visible (dimming/blurring the whole
   scene) even while idleEl.hidden was set true for an active session
   (ui-fluide audit finding). */
.focus-idle[hidden] { display: none; }
@keyframes focus-idle-in { from { opacity: 0; } to { opacity: 1; } }

.focus-idle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 32px;
  background: var(--scene-pill-bg);
  border: 1px solid var(--scene-pill-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 46px var(--scene-shadow-strong);
  text-align: center;
  max-width: min(86vw, 320px);
}
.focus-idle-emoji { font-size: 40px; }
.focus-idle-card p { color: var(--scene-pill-ink); font-weight: 800; font-size: 15px; }

/* ============================================================
   Responsive : 375px a 1280px, tout est en %/vw/vh/clamp
   ============================================================ */

@media (max-width: 480px) {
  .focus-pill { padding: 8px 12px; font-size: 12px; gap: 6px; }
  .focus-tooltip { max-width: 170px; font-size: 11px; }
  .focus-ambience-menu { min-width: 190px; }
  .focus-idle-card { padding: 22px 22px; gap: 10px; }
  .focus-idle-emoji { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  /* every loop that used to live in .focus-art (mountain/treeline parallax,
     lake shimmer, bird drift, lamp pulse, dust float) is gone now, not just
     guarded here: this whole layer sits under the opaque voxel canvas once
     baked, so those loops ran forever for no one to see (doctrine, case 3).
     Nothing left in .focus-art needs a reduced-motion override any more. */
  /* ui-fluide layer 2: neutralize the new press-feedback scale (spatial
     dies, feedback survives via the surrounding color/background changes),
     same convention as shop.css's .shop-tab:active / .shop-chip:active.
     .focus-eye-btn:active pre-existed this pass but shared the exact same
     gap, so it is folded into the same fix here rather than left behind. */
  .focus-pill:active,
  .focus-amb-opt:active,
  .focus-eye-btn:active {
    transform: none;
  }
  /* ui-fluide layer 1: this screen sets no residual transition-delay on its
     one JS-gated reveal (.is-baked lands, then fades in): the global net
     (base.css) already clamps transition-duration to .01ms, but zeroing the
     transition explicitly here matches shop.css's identical rule: appearance
     is immediate the instant .is-baked lands, no fade, nothing left to the
     net alone. */
  .focus-scene .scene-canvas {
    transition: none;
  }
}