/* ============================================================
     Raked Sand at Dawn — a meditative linear-regression game.
     Single file, vanilla, zero dependencies.
     ============================================================ */
  :root{
    /* palette */
    --point:        rgba(154,133,104,0.88);  /* #9A8568 pebble fill */
    --point-rim:    rgba(182,165,132,0.50);  /* #B6A584 */
    --furrow:       #7C8B6E;
    --furrow-lit:   rgba(147,162,131,0.40);  /* #93A283 */
    --residual:     #A89A7E;
    --reveal:       #D98E5A;
    --reveal-halo:  rgba(233,178,126,0.22);  /* #E9B27E */
    --arc:          #D8C7AC;
    --accent:       #B08D63;
    --accent-soft:  rgba(176,141,99,0.30);
    --text:         #4C4334;
    --muted:        #8C7E66;
    --panel:        rgba(234,220,196,0.60);  /* #EADCC4 */
    --panel-hi:     rgba(246,238,221,0.55);
    --panel-lo:     rgba(203,184,147,0.40);

    --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:#EFE3CF;
    -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));
  }

  /* breathing dawn-sand field, behind everything */
  .bg{
    position:fixed; inset:-10vmax;          /* overscan so brightness filter has no edges */
    z-index:-1;
    background:radial-gradient(120% 130% at 50% 8%,
      #F3E9D8 0%, #EFE3CF 38%, #E8DAC4 72%, #E1D2BB 100%);
    will-change:filter;                       /* breath driven from JS: one 7s clock */
  }

  .stage{
    width:100%;
    max-width:720px;
    margin:auto;                 /* centers when there's room, scrolls when there isn't */
    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 plot ---- */
  .plot-wrap{
    position:relative;
    /* viewport-aware: leaves ~290px for label + panel + button + gaps,
       so the whole game fits one viewport on short desktop windows too */
    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:grab;
    touch-action:none;
    box-shadow:
      inset 0 1px 0 rgba(246,238,221,0.55),
      inset 0 -1px 0 rgba(203,184,147,0.35),
      inset 0 0 36px rgba(203,184,147,0.18),
      0 1px 2px rgba(120,100,70,0.06);
    outline:none;
    transition:box-shadow 240ms var(--ease-calm);
  }
  canvas#plot:active{ cursor:grabbing; }
  canvas#plot:focus-visible{
    box-shadow:
      inset 0 1px 0 rgba(246,238,221,0.55),
      inset 0 -1px 0 rgba(203,184,147,0.35),
      0 0 0 3px var(--accent-soft);
  }

  .hint{
    position:absolute; left:12px; right:12px; bottom:10px;   /* pinned to the plot — zero flow height */
    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; }

  /* ---- controls ---- */
  .panel{
    width:100%;
    display:flex; align-items:center; gap:14px;
    padding:14px 18px;
    border-radius:20px;
    background:var(--panel);
    box-shadow:
      inset 0 1px 0 var(--panel-hi),
      inset 0 -1px 0 var(--panel-lo);
  }
  .nudge{
    flex:0 0 auto;
    width:52px; height:52px;
    border:none; border-radius:50%;
    background:rgba(176,141,99,0.12);
    color:var(--accent);
    font-size:22px; line-height:1;
    display:none; align-items:center; justify-content:center;
    cursor:pointer;
    transition:transform 200ms var(--ease-calm), background 200ms var(--ease-calm);
    -webkit-tap-highlight-color:transparent;
  }
  .nudge::before{
    content:""; width:18px; height:18px; border-radius:50%;
    border:1.5px solid currentColor; opacity:0.55;
    display:block; position:absolute;
  }
  .nudge span{ position:relative; z-index:1; }
  .nudge:active{ transform:scale(0.94); background:rgba(176,141,99,0.20); }
  .nudge:focus-visible{ box-shadow:0 0 0 3px var(--accent-soft); outline:none; }

  .slider-wrap{ flex:1 1 auto; display:flex; align-items:center; min-width:0; }
  input[type="range"]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:56px;       /* hit-slop */
    background:transparent; margin:0; cursor:pointer;
  }
  input[type="range"]:focus-visible{ outline:none; }   /* the thumb glow is the focus ring */
  /* webkit track */
  input[type="range"]::-webkit-slider-runnable-track{
    height:6px; border-radius:999px;
    background:linear-gradient(90deg,
      var(--accent) 0%, var(--accent) var(--fill,50%),
      rgba(176,141,99,0.20) var(--fill,50%), rgba(176,141,99,0.20) 100%);
  }
  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(120,100,70,0.25), inset 0 0 0 5px rgba(255,255,255,0.0);
    position:relative;
    transition:box-shadow 200ms var(--ease-calm);
  }
  /* hollow-ring eyelet echo on thumb via inner ring */
  input[type="range"]::-webkit-slider-thumb{
    box-shadow:0 1px 3px rgba(120,100,70,0.25),
               inset 0 0 0 1.5px rgba(246,238,221,0.55);
  }
  input[type="range"]:focus-visible::-webkit-slider-thumb{
    box-shadow:0 1px 3px rgba(120,100,70,0.25),
               inset 0 0 0 1.5px rgba(246,238,221,0.55),
               0 0 0 6px var(--accent-soft);
  }
  /* firefox */
  input[type="range"]::-moz-range-track{
    height:6px; border-radius:999px; background:rgba(176,141,99,0.20);
  }
  input[type="range"]::-moz-range-progress{
    height:6px; border-radius:999px; background:var(--accent);
  }
  input[type="range"]::-moz-range-thumb{
    width:22px; height:22px; border:none; border-radius:50%;
    background:var(--accent);
    box-shadow:0 1px 3px rgba(120,100,70,0.25), inset 0 0 0 1.5px rgba(246,238,221,0.55);
  }
  input[type="range"]:focus-visible::-moz-range-thumb{
    box-shadow:0 1px 3px rgba(120,100,70,0.25),
               inset 0 0 0 1.5px rgba(246,238,221,0.55),
               0 0 0 6px var(--accent-soft);
  }

  .arrow-hint{
    flex:0 0 auto; color:var(--muted); opacity:0.5;
    font-size:14px; letter-spacing:0.1em; user-select:none;
  }

  /* ---- action + outcome ---- */
  .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(176,141,99,0.16);
    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(176,141,99,0.24); }
  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; }

  .outcome{
    position:absolute; inset:0;                 /* floats over the plot — zero page height */
    border-radius:28px;                          /* matches the canvas */
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; padding:18px;
    background:radial-gradient(120% 120% at 50% 46%,
      rgba(240,229,208,0.88) 0%, rgba(240,229,208,0.80) 55%, rgba(238,226,202,0.62) 100%);
    opacity:0; pointer-events:none;
    /* base duration = the RELEASE: the old result clears in ~180ms on advance */
    transition:opacity 180ms var(--ease-calm);
  }
  .outcome.show{
    opacity:1; pointer-events:auto;
    /* the bloom-in is unhurried — it arrives with the score, after the line lands */
    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; }

  .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){
    :root{ --plot-max:560px; }
    .stage{ gap:18px; }
    .nudge{ display:flex; }
    .arrow-hint{ display:none; }
    .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; }
  }

/* ---- records (the quiet stats panel) ---- */
.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(176,141,99,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(240,229,208,0.92);
  box-shadow:
    inset 0 1px 0 var(--panel-hi),
    inset 0 -1px 0 var(--panel-lo),
    0 6px 24px rgba(120,100,70,0.10);
  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);
}

/* ---- the room link (to The Still Pool) ---- */
.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(176,141,99,0.10); }
.room-link:focus-visible{ box-shadow:0 0 0 3px var(--accent-soft); outline:none; opacity:0.9; }