/* ============================================================
     The Still Pool — dusk sibling of Raked Sand at Dawn.
     ============================================================ */
  :root{
    --water:        #0e1f22;
    --water-hi:     #152a2b;
    --water-lo:     #0b1a1d;
    --leaf:         rgba(196,189,154,0.88);
    --reveal:       #D98E5A;
    --reveal-halo:  rgba(233,178,126,0.22);
    --accent:       #C9B27E;
    --accent-soft:  rgba(201,178,126,0.30);
    --text:         #D8DCD2;
    --muted:        #8FA098;
    --panel:        rgba(21,42,43,0.72);
    --panel-hi:     rgba(46,72,70,0.45);
    --panel-lo:     rgba(5,12,13,0.50);

    --font-ui:    ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

    --ease-calm:    cubic-bezier(0.33, 0.00, 0.20, 1.00);
    --ease-exhale:  cubic-bezier(0.16, 0.84, 0.30, 1.00);

    --plot-max: 560px;
  }

  *{ box-sizing:border-box; }

  html,body{ height:100%; }
  body{
    margin:0;
    min-height:100svh;
    font-family:var(--font-ui);
    color:var(--text);
    background:#0c1b1e;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overscroll-behavior:none;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
    display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start;
    padding:
      max(20px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .bg{
    position:fixed; inset:-10vmax;
    z-index:-1;
    background:radial-gradient(120% 130% at 50% 8%,
      #142628 0%, #0e1f22 38%, #0b191c 72%, #081316 100%);
    will-change:filter;
  }

  .stage{
    width:100%;
    max-width:720px;
    margin:auto;
    display:flex; flex-direction:column; align-items:center;
    gap:clamp(14px, 2.4vh, 26px);
  }

  .round-label{
    font-size:clamp(12px,1.6vw,14px);
    font-weight:500;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0;
    transition:opacity 400ms var(--ease-calm);
  }
  .round-label.fade{ opacity:0; }

  /* ---- the pool ---- */
  .plot-wrap{
    position:relative;
    width:min(100%, var(--plot-max), calc(100svh - 290px));
    aspect-ratio:1/1;
  }
  canvas#plot{
    display:block;
    width:100%; height:100%;
    border-radius:28px;
    background:transparent;
    cursor:pointer;
    touch-action:none;
    box-shadow:
      inset 0 1px 0 rgba(46,72,70,0.45),
      inset 0 -1px 0 rgba(5,12,13,0.55),
      inset 0 0 36px rgba(5,12,13,0.35),
      0 1px 2px rgba(0,0,0,0.25);
    outline:none;
    transition:box-shadow 240ms var(--ease-calm);
  }

  .hint{
    position:absolute; left:12px; right:12px; bottom:10px;
    margin:0;
    font-size:clamp(14px,1.9vw,16px);
    font-weight:400; letter-spacing:0.005em; line-height:1.6;
    color:var(--muted);
    text-align:center;
    pointer-events:none;
    transition:opacity 240ms var(--ease-calm);
  }
  .hint.gone{ opacity:0; }

  /* ---- the reveal overlay ---- */
  .outcome{
    position:absolute; inset:0;
    border-radius:28px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; padding:18px;
    background:radial-gradient(120% 120% at 50% 46%,
      rgba(14,31,34,0.88) 0%, rgba(14,31,34,0.80) 55%, rgba(11,26,29,0.62) 100%);
    opacity:0; pointer-events:none;
    transition:opacity 180ms var(--ease-calm);
  }
  .outcome.show{
    opacity:1; pointer-events:auto;
    transition:opacity 700ms var(--ease-calm);
  }
  .score{
    font-family:var(--font-serif);
    font-size:clamp(40px,9vw,68px); font-weight:300; letter-spacing:-0.01em; line-height:1;
    font-variant-numeric:tabular-nums;
    color:var(--text);
    opacity:0; transition:opacity 600ms var(--ease-calm);
  }
  .score.show{ opacity:1; }
  .rule{
    width:54px; height:1px; background:var(--accent); opacity:0.4;
    margin:6px 0 2px;
    transform:scaleX(0); transform-origin:center;
    transition:transform 600ms var(--ease-calm);
  }
  .rule.show{ transform:scaleX(1); }
  .verdict{
    font-family:var(--font-serif);
    font-size:clamp(17px,2.4vw,22px); font-weight:400; line-height:1.5;
    color:var(--text); text-align:center; max-width:40ch;
    opacity:0; transition:opacity 700ms var(--ease-calm);
  }
  .verdict.show{ opacity:1; }
  .caption{
    font-family:var(--font-serif);
    font-size:13px; font-weight:400; letter-spacing:0.02em; line-height:1.4;
    color:var(--muted);
    opacity:0; transition:opacity 700ms var(--ease-calm);
  }
  .caption.show{ opacity:1; }
  .newbed{
    background:none; border:none; cursor:pointer;
    font-family:var(--font-ui); font-size:14px; letter-spacing:0.04em;
    color:var(--accent);
    min-height:44px; padding:10px 16px; margin-top:2px;
    display:inline-flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 700ms var(--ease-calm);
    -webkit-tap-highlight-color:transparent;
  }
  .newbed.show{ opacity:1; }
  .newbed:hover{ color:var(--text); }
  .newbed:focus-visible{ box-shadow:0 0 0 3px var(--accent-soft); outline:none; border-radius:8px; }

  /* ---- controls: the two canonical sliders ---- */
  .panel{
    width:100%;
    display:flex; flex-direction:column; gap:2px;
    padding:10px 18px;
    border-radius:20px;
    background:var(--panel);
    box-shadow:
      inset 0 1px 0 var(--panel-hi),
      inset 0 -1px 0 var(--panel-lo);
  }
  .axis-row{
    display:flex; align-items:center; gap:14px;
  }
  .axis-label{
    flex:0 0 56px;
    font-size:12px; font-weight:500; letter-spacing:0.10em;
    text-transform:uppercase;
    color:var(--muted);
  }
  input[type="range"]{
    -webkit-appearance:none; appearance:none;
    flex:1 1 auto; min-width:0;
    height:44px;
    background:transparent; margin:0; cursor:pointer;
  }
  input[type="range"]:focus-visible{ outline:none; }   /* the thumb glow is the focus ring */
  input[type="range"]::-webkit-slider-runnable-track{
    height:6px; border-radius:999px;
    background:rgba(201,178,126,0.20);
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:22px; height:22px; margin-top:-8px;
    border-radius:50%;
    background:var(--accent);
    border:none;
    box-shadow:0 1px 3px rgba(0,0,0,0.35),
               inset 0 0 0 1.5px rgba(46,72,70,0.55);
  }
  input[type="range"]:focus-visible::-webkit-slider-thumb{
    box-shadow:0 1px 3px rgba(0,0,0,0.35),
               inset 0 0 0 1.5px rgba(46,72,70,0.55),
               0 0 0 6px var(--accent-soft);
  }
  input[type="range"]::-moz-range-track{
    height:6px; border-radius:999px; background:rgba(201,178,126,0.20);
  }
  input[type="range"]::-moz-range-thumb{
    width:22px; height:22px; border:none; border-radius:50%;
    background:var(--accent);
    box-shadow:0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1.5px rgba(46,72,70,0.55);
  }
  input[type="range"]:focus-visible::-moz-range-thumb{
    box-shadow:0 1px 3px rgba(0,0,0,0.35),
               inset 0 0 0 1.5px rgba(46,72,70,0.55),
               0 0 0 6px var(--accent-soft);
  }
  input[type="range"][disabled]{ opacity:0.4; pointer-events:none; }

  /* ---- action ---- */
  .action{
    min-height:56px;
    display:flex; justify-content:center; align-items:flex-start;
    width:100%;
  }
  button.primary{
    min-width:220px; min-height:52px;
    padding:0 28px;
    border:none; border-radius:26px;
    background:rgba(201,178,126,0.14);
    color:var(--text);
    font-family:var(--font-ui); font-size:15px; font-weight:500; letter-spacing:0.04em;
    cursor:pointer;
    transition:transform 200ms var(--ease-calm), background 200ms var(--ease-calm), opacity 300ms var(--ease-calm);
    -webkit-tap-highlight-color:transparent;
  }
  button.primary:hover{ background:rgba(201,178,126,0.22); }
  button.primary:active{ transform:scale(0.985); }
  button.primary:focus-visible{ box-shadow:0 0 0 3px var(--accent-soft); outline:none; }
  button.primary[disabled]{ opacity:0; pointer-events:none; }

  /* ---- the room link + records (dusk) ---- */
  .room-link{
    position:fixed;
    top:max(10px, env(safe-area-inset-top));
    left:max(12px, env(safe-area-inset-left));
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    color:var(--muted);
    font-size:17px; text-decoration:none;
    opacity:0.55;
    transition:opacity 240ms var(--ease-calm), background 240ms var(--ease-calm);
    -webkit-tap-highlight-color:transparent;
  }
  .room-link:hover{ opacity:0.9; background:rgba(201,178,126,0.10); }
  .room-link:focus-visible{ box-shadow:0 0 0 3px var(--accent-soft); outline:none; opacity:0.9; }

  .records-toggle{
    position:fixed;
    top:max(10px, env(safe-area-inset-top));
    right:max(12px, env(safe-area-inset-right));
    width:44px; height:44px;
    border:none; border-radius:50%;
    background:transparent;
    color:var(--muted);
    font-size:18px; letter-spacing:0.08em; line-height:1;
    cursor:pointer;
    opacity:0.55;
    transition:opacity 240ms var(--ease-calm), background 240ms var(--ease-calm);
    -webkit-tap-highlight-color:transparent;
  }
  .records-toggle:hover{ opacity:0.9; background:rgba(201,178,126,0.10); }
  .records-toggle:focus-visible{ box-shadow:0 0 0 3px var(--accent-soft); outline:none; opacity:0.9; }
  .records-toggle[aria-expanded="true"]{ opacity:0.9; }

  .records{
    position:fixed;
    top:calc(max(10px, env(safe-area-inset-top)) + 50px);
    right:max(12px, env(safe-area-inset-right));
    width:min(240px, calc(100vw - 24px));
    padding:14px 18px;
    border-radius:16px;
    background:rgba(18,36,38,0.94);
    box-shadow:
      inset 0 1px 0 var(--panel-hi),
      inset 0 -1px 0 var(--panel-lo),
      0 6px 24px rgba(0,0,0,0.35);
    z-index:10;
  }
  .records dl{ margin:0; }
  .records-row{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:16px;
    padding:6px 0;
  }
  .records dt{
    font-size:13px; font-weight:400; letter-spacing:0.02em;
    color:var(--muted);
  }
  .records dd{
    margin:0;
    font-family:var(--font-serif);
    font-size:18px; font-weight:400;
    font-variant-numeric:tabular-nums;
    color:var(--text);
  }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

  /* ---- mobile ---- */
  @media (max-width:767px){
    .stage{ gap:18px; }
    .plot-wrap{ width:min(100%, 88svh); }
  }
  @media (max-height:640px){
    .stage{ gap:12px; }
  }

  @media (prefers-reduced-motion: reduce){
    .bg{ animation:none; filter:none; }
    *{ transition-duration:1ms !important; }
  }