:root{
    --paper:#f5f4ef;
    --panel:#ffffff;
    --ink:#17181a;
    --ink-soft:#5c5f63;
    --line:#e3e1d9;
    --jade:#12805f;
    --jade-deep:#0b5c44;
    --gold:#e0a52e;
    --blue:#2563eb;
    --btn-hover:#f0efe9;
    --sub:#3c3e41;
    --input-bg:#faf9f5;
    --slot-line:#ccc9bf;
    --slot-bg:rgba(0,0,0,.025);
    --faint:#a3a49e;
    /* tile material */
    --tile-a:#ffffff; --tile-b:#f4f2ec;
    --tile-line:#d9d6cc;
    --tile-e1:#dcd9cf; --tile-e2:#c6c2b4;
    --tile-shadow:rgba(30,32,28,.22);
    --back-a:#159068; --back-b:#0b5c44; --back-line:#0a4b38;
    --back-e1:#0f6b4f; --back-e2:#0a4b38;
    --tw:56px; --th:72px;
    --zx:-6px; --zy:-8px;
  }
  /* Night: true black ground, everything dialled down. Tuned for playing
     in a dark room, so no surface approaches white and contrast stays low. */
  :root[data-theme="dark"]{
    --paper:#000000;
    --panel:#141613;
    --ink:#b3b3aa;          /* never white: soft warm grey */
    --ink-soft:#71726a;
    --line:#232520;
    --jade:#2f7a60;
    --jade-deep:#1e5744;
    --gold:#9a7a3c;
    --blue:#3f5f96;
    --btn-hover:#1c1e1a;
    --sub:#8a8b83;
    --input-bg:#0e100d;
    --slot-line:#2a2c27;
    --slot-bg:rgba(255,255,255,.02);
    --faint:#4e504a;
    /* tiles: dim slate faces, soft edges, no glare */
    --tile-a:#3a3d38; --tile-b:#2e312c;
    --tile-line:#464943;
    --tile-e1:#262824; --tile-e2:#1a1c19;
    --tile-shadow:rgba(0,0,0,.6);
    --back-a:#1e3d33; --back-b:#152b24; --back-line:#25443a;
    --back-e1:#17322a; --back-e2:#0f2019;
    --glyph-dim:.72;
    color-scheme:dark;
  }
  :root{color-scheme:light; --glyph-dim:1;}
  /* glyphs are dimmed rather than recolored, so the tile set stays
     recognizable across themes while losing its glare at night */
  [data-theme="dark"] .glyph,
  [data-theme="dark"] .traytile svg,
  [data-theme="dark"] .flyer svg{opacity:var(--glyph-dim);}
  [data-theme="dark"] .back::after{color:rgba(255,255,255,.42);}
  [data-theme="dark"] .wordmark .o svg circle{fill:#2f7a60;}
  [data-theme="dark"] .card{box-shadow:0 24px 70px rgba(0,0,0,.7);}
  [data-theme="dark"] .overlay{background:rgba(0,0,0,.72);}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--paper);color:var(--ink);
    display:flex;flex-direction:column;align-items:center;
    min-height:100vh;   /* fallback */
    min-height:100dvh;  /* fit the visible viewport, not behind mobile toolbars */
    user-select:none;
  }
  header{
    width:100%;max-width:920px;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px 10px;border-bottom:1px solid var(--line);
  }
  /* newspaper dateline: edition number over the date, ruled like a masthead */
  /* newspaper dateline: matching hairlines, date leading */
  .daytag{
    font-family:'Zilla Slab',Georgia,serif;text-align:right;
    line-height:1.3;
  }
  .daytag .pzno{
    display:block;font-weight:700;font-size:13.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);
  }
  /* the numero "o" floats up, masthead style: Nº */
  .daytag .pzno sup{
    font-size:.56em;letter-spacing:0;font-weight:700;text-transform:lowercase;
    vertical-align:baseline;position:relative;top:-.62em;
    text-decoration:underline;text-underline-offset:.1em;margin:0 .1em 0 .06em;
  }
  .daytag .dt{
    display:block;font-size:9.5px;letter-spacing:.18em;font-weight:600;
    text-transform:uppercase;color:var(--ink-soft);margin-top:2px;
  }
  .wordmark{
    font-family:'Zilla Slab',Georgia,serif;font-weight:700;
    font-size:clamp(22px,4.5vw,28px);letter-spacing:.1em;
    display:flex;align-items:center;gap:.06em;
  }
  /* the O is a miniature game tile: same face material, border,
     extruded edge and radius as the board tiles */
  .wordmark .o{
    display:inline-flex;align-items:center;justify-content:center;
    width:.92em;height:1.18em;border-radius:.18em;
    background:linear-gradient(165deg,var(--tile-a) 0%,var(--tile-b) 100%);
    border:1px solid var(--tile-line);
    box-shadow:1.5px 2px 0 0 var(--tile-e1),2.5px 3px 0 0 var(--tile-e2),3px 5px 6px rgba(30,32,28,.18);
    color:var(--jade);line-height:1;
    transform:translateY(-.04em);
  }
  .wordmark .o svg{width:.62em;height:.62em;display:block;}

  .hud{
    width:100%;max-width:920px;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:12px;padding:10px 20px 2px;
  }
  .hudside{display:flex;gap:6px;}
  #btnUndo{display:none;} /* hidden, not removed: rewind supersedes it */
  .hudside.sideleft{justify-self:start;}
  .hudside.sideright{justify-self:end;}
  .hud .clock{
    justify-self:center;
    font-variant-numeric:tabular-nums;font-weight:700;font-size:20px;
    color:var(--ink);font-family:'Zilla Slab',serif;letter-spacing:.02em;
  }
  button{
    font-family:inherit;font-size:12px;font-weight:600;
    border:1px solid var(--line);background:var(--panel);color:var(--ink);
    border-radius:8px;padding:6px 11px;cursor:pointer;
    transition:background .12s ease, transform .08s ease;
  }
  button:hover{background:var(--btn-hover);}
  button:active{transform:scale(.97);}
  button:focus-visible{outline:2px solid var(--jade);outline-offset:2px;}
  button.primary{background:var(--jade);border-color:var(--jade-deep);color:#fff;}
  button.primary:hover{background:#149770;}
  button:disabled{opacity:.35;cursor:default;}

  #boardWrap{position:relative;width:100%;max-width:920px;flex:1;min-height:380px;overflow:hidden;}
  #board{position:absolute;transform-origin:0 0;}

  /* ---------- tiles ----------
     Animation ownership, to keep motion smooth:
     - .flip owns rotateY only (peek/reveal transition)
     - .tile owns clearing/undo keyframes (scale + fade)
     - selection is a ring on the faces, no transform, so it never
       competes with either of the above */
  .tile{
    position:absolute;width:var(--tw);height:var(--th);
    cursor:pointer;perspective:600px;
    transform-origin:center center;
    will-change:transform,opacity;
  }
  .flip{
    position:absolute;inset:0;border-radius:9px;
    transform-style:preserve-3d;
    transition:transform .45s cubic-bezier(.4,.1,.2,1.2);
  }
  .flip.down{transform:rotateY(180deg);}
  .fface{
    position:absolute;inset:0;border-radius:9px;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .front{
    background:linear-gradient(165deg,var(--tile-a) 0%,var(--tile-b) 100%);
    border:1px solid var(--tile-line);
    box-shadow:2px 3px 0 0 #dcd9cf, 3px 4px 0 0 #c6c2b4, 5px 8px 12px var(--tile-shadow);
  }
  .back{
    transform:rotateY(180deg);
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px),
      linear-gradient(165deg,var(--back-a) 0%,var(--back-b) 100%);
    border:1px solid var(--back-line);
    box-shadow:2px 3px 0 0 var(--back-e1), 3px 4px 0 0 var(--back-e2), 5px 8px 12px var(--tile-shadow);
  }
  .back::after{
    content:"J";font-family:'Zilla Slab',serif;font-weight:700;
    color:rgba(255,255,255,.85);font-size:22px;
  }
  /* selection ring is inset: with left-to-right paint order, flush
     neighbors cover anything outside the tile body, so an outer ring
     would be clipped on its right and bottom sides */
  .tile.sel .front, .tile.sel .back{
    box-shadow:2px 3px 0 0 var(--tile-e1),3px 4px 0 0 var(--tile-e2),5px 8px 12px var(--tile-shadow),
      inset 0 0 0 3px var(--gold);
  }
  .tile.gone{opacity:0;visibility:hidden;pointer-events:none;}
  .tile.wiggle{animation:wig .28s ease;}
  @keyframes wig{0%,100%{margin-left:0}25%{margin-left:-4px}75%{margin-left:4px}}

  .tile.clearing{
    animation:clearpop .16s ease-in forwards;
    pointer-events:none;
    z-index:99998 !important; /* pop above neighbors while shrinking */
  }
  @keyframes clearpop{
    0%{transform:scale(1);opacity:1}
    30%{transform:scale(1.07)}
    100%{transform:scale(.15);opacity:0}
  }
  .tile.undoback{animation:undoin .4s cubic-bezier(.3,1.4,.5,1);}
  .tile.undoback .front, .tile.undoback .back{
    box-shadow:2px 3px 0 0 var(--tile-e1),3px 4px 0 0 var(--tile-e2),5px 8px 12px var(--tile-shadow),inset 0 0 0 3px var(--blue);
  }
  @keyframes undoin{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
  .tile.hintglow .front, .tile.hintglow .back{animation:hintpulse 1s ease infinite;}
  @keyframes hintpulse{
    0%,100%{box-shadow:2px 3px 0 0 var(--tile-e1),3px 4px 0 0 var(--tile-e2),5px 8px 12px var(--tile-shadow),inset 0 0 0 3px rgba(18,128,95,.95);}
    50%{box-shadow:2px 3px 0 0 var(--tile-e1),3px 4px 0 0 var(--tile-e2),5px 8px 12px var(--tile-shadow),inset 0 0 0 6px rgba(18,128,95,.35);}
  }
  .tile .badge{
    position:absolute;top:-7px;right:-7px;z-index:5;background:var(--blue);color:#fff;
    font-size:10px;font-weight:700;border-radius:8px;padding:1px 5px;
    box-shadow:0 1px 3px rgba(0,0,0,.3);
  }
  .glyph{width:38px;height:38px;display:block;}

  .flyer{
    position:fixed;z-index:100000;pointer-events:none;
    border-radius:9px;
    background:linear-gradient(165deg,var(--tile-a) 0%,var(--tile-b) 100%);
    border:1px solid var(--tile-line);
    box-shadow:2px 3px 0 0 var(--tile-e1),3px 4px 0 0 var(--tile-e2),5px 8px 12px var(--tile-shadow);
    display:flex;align-items:center;justify-content:center;
  }
  .flyer svg{width:32px;height:32px;display:block;}
  #archiveChips{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    margin:14px 0 6px;
  }
  .archchip{
    border:1px solid var(--line);border-radius:10px;background:var(--panel);
    padding:8px 6px;font-size:12px;cursor:pointer;text-align:center;
    transition:background .12s ease;
  }
  .archchip:hover{background:var(--btn-hover);}
  .archchip b{display:block;font-size:13px;color:var(--ink);}
  .archchip span{color:var(--ink-soft);font-size:11px;}
  #shareTxt{
    display:none;margin-top:12px;width:100%;padding:9px 10px;
    border:1px solid var(--line);border-radius:8px;
    font-size:13px;text-align:center;font-family:inherit;color:var(--ink);
    background:var(--input-bg);
  }

  /* ---------- tray mode ---------- */
  #trayWrap{
    width:100%;max-width:920px;display:none;
    justify-content:center;align-items:center;
    height:80px;padding:2px 20px 8px;box-sizing:border-box;
    flex:0 0 auto;
  }
  #tray{display:flex;gap:8px;}
  .slot{
    width:50px;height:64px;border-radius:8px;
    border:1.5px dashed var(--slot-line);background:var(--slot-bg);
    display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;
    transition:border-color .15s ease;
  }
  .slot.hint{box-shadow:inset 0 0 0 3px var(--jade);}
  #tray.shake{animation:trayshake .3s ease;}
  @keyframes trayshake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  .traytile{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:60px;border-radius:7px;
    border:1px solid var(--tile-line);
    background:linear-gradient(165deg,var(--tile-a) 0%,var(--tile-b) 100%);
    box-shadow:1.5px 2px 0 0 var(--tile-e1),2.5px 3px 0 0 var(--tile-e2),3px 5px 6px var(--tile-shadow);
  }
  .traytile svg{width:29px;height:29px;display:block;}



  footer{
    width:100%;max-width:920px;padding:4px 20px 14px;
    display:flex;justify-content:flex-end;font-size:11px;color:var(--faint);
    letter-spacing:.01em;
  }
  footer a{color:var(--faint);cursor:pointer;text-decoration:underline;}

  /* ---------- overlays ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(23,24,26,.55);
    display:flex;align-items:center;justify-content:center;z-index:9999;
    backdrop-filter:blur(2px);
    opacity:1;transition:opacity .22s ease;
  }
  .overlay.off{opacity:0;pointer-events:none;}
  .card{
    background:var(--panel);color:var(--ink);border-radius:18px;
    padding:28px 30px;max-width:430px;width:calc(100% - 40px);
    box-shadow:0 24px 70px rgba(0,0,0,.35);
    animation:cardin .35s cubic-bezier(.3,1.3,.5,1);
  }
  @keyframes cardin{0%{transform:scale(.85) translateY(14px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
  .card h2{font-family:'Zilla Slab',Georgia,serif;margin:0 0 8px;font-size:28px;letter-spacing:.02em;}
  .card p{margin:8px 0;font-size:14px;line-height:1.55;color:var(--sub);}
  .card .big{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;margin:8px 0;font-family:'Zilla Slab',serif;}
  .cardbtns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center;}
  .card.center{text-align:center;}
  .card.center .cardbtns{justify-content:center;}
  .eyebrow{
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--jade);margin-bottom:6px;
  }
  .introdate{font-size:13px;color:var(--ink-soft);margin:0 0 4px;}
  /* ---- start / play modal ---- */
  .card.intro{padding-top:30px;}
  .wordmark-lg{
    justify-content:center;font-size:clamp(30px,9vw,42px);
    letter-spacing:.14em;margin:0 0 2px;
  }
  .introtag{
    font-family:'Zilla Slab',Georgia,serif;font-style:italic;font-weight:600;
    font-size:15px;color:var(--jade);margin:0 0 12px;letter-spacing:.01em;
  }
  .editionline{
    display:flex;align-items:baseline;justify-content:center;gap:.55em;
    font-family:'Zilla Slab',Georgia,serif;font-weight:700;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-soft);margin:0 0 16px;
  }
  .editionline #introNum sup{
    font-size:.6em;vertical-align:baseline;position:relative;top:-.55em;
    text-transform:none;text-decoration:underline;text-underline-offset:.1em;margin:0 .08em;
  }
  .editionline #introDay{font-weight:600;letter-spacing:.09em;}
  .editionline #introDay::before{content:"·";margin-right:.6em;color:var(--line);}
  .card.intro .rule:last-child{border-bottom:none;}
  button.wide{width:100%;padding:12px;font-size:15px;margin-top:4px;}
  /* board-loading state */
  .loadcard{text-align:center;}
  .loadcard .wordmark-lg{animation:loadpulse 1.4s ease-in-out infinite;}
  .loadmsg{
    font-family:'Zilla Slab',Georgia,serif;font-style:italic;
    font-size:14px;color:var(--ink-soft);margin:10px 0 0;
  }
  @keyframes loadpulse{0%,100%{opacity:.55}50%{opacity:1}}
  /* .card .fortune (not .fortune) so it outweighs `.card p` and its
     margin:8px 0, which was killing the auto-centering. No rule above it
     any more — the little asterisk is the only separator. */
  .card .fortune{
    font-family:'Zilla Slab',Georgia,serif;font-style:italic;
    font-size:12.5px;line-height:1.5;color:var(--ink-soft);
    margin:20px auto 0;max-width:300px;text-align:center;
  }
  .fortune::before{
    content:"\274B";display:block;font-style:normal;
    color:var(--jade);opacity:.55;font-size:11px;margin-bottom:8px;
  }
  /* ---- win / Solved card ---- */
  .card.win{max-width:400px;padding:34px 32px 26px;}
  .wineyebrow{
    font-family:'Zilla Slab',Georgia,serif;font-weight:700;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--jade);margin-bottom:10px;
  }
  .wineyebrow sup{font-size:.62em;position:relative;top:-.5em;text-decoration:underline;text-underline-offset:.1em;margin:0 .06em;}
  .winhead{font-size:24px;margin:0;color:var(--ink-soft);letter-spacing:.02em;}
  .wintime{font-size:52px;line-height:1.05;margin:2px 0 2px;}
  .winsub{font-size:13px;color:var(--ink-soft);margin:0 0 6px;}
  .winstats{margin:18px auto 4px;max-width:330px;}
  .pctwrap{margin:0 0 20px;}
  .pctbar{
    position:relative;height:10px;border-radius:999px;
    background:var(--line);overflow:visible;
  }
  .pctfill{
    position:absolute;left:0;top:0;bottom:0;border-radius:999px;width:0;
    background:linear-gradient(90deg,var(--jade),#1aa87b);
    transition:width .9s cubic-bezier(.3,1,.4,1);
  }
  .pctmark{
    position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;
    background:var(--panel);border:3px solid var(--jade);
    transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.3,1,.4,1);
    box-shadow:0 1px 4px rgba(0,0,0,.25);
  }
  .pctlabel{
    margin-top:12px;font-size:13.5px;line-height:1.4;color:var(--sub);
  }
  .pctlabel b{color:var(--ink);font-variant-numeric:tabular-nums;}
  .statrow{
    display:flex;align-items:stretch;justify-content:center;gap:0;
    border-top:1px solid var(--line);padding-top:14px;
  }
  .statcell{flex:1;display:flex;flex-direction:column;gap:3px;}
  .statdiv{width:1px;background:var(--line);margin:2px 0;}
  .statnum{
    font-family:'Zilla Slab',Georgia,serif;font-weight:700;font-size:22px;
    color:var(--ink);font-variant-numeric:tabular-nums;
  }
  .statlbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
  .winnote{font-size:13px;color:var(--ink-soft);font-style:italic;margin:14px 0 2px;}
  .rules{
    text-align:left;border-top:1px solid var(--line);
    margin:0 auto;max-width:320px;
  }
  .rule{
    font-size:13.5px;line-height:1.5;color:var(--sub);
    padding:9px 2px;border-bottom:1px solid var(--line);
  }
  .rule b{color:var(--ink);}
  .copied{color:var(--jade);font-weight:600;font-size:13px;}
  #statsLine{
    font-size:13px;color:var(--ink-soft);
    border-top:1px solid var(--line);padding-top:10px;margin-top:10px;
  }
  #statsLine b{color:var(--ink);}
  .toast{
    position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(8px);
    background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;
    padding:11px 26px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.3);
    opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
    z-index:9500;text-align:center;line-height:1.4;
    width:max-content;max-width:min(560px, calc(100% - 32px));
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
  .toast button{
    margin-left:10px;background:var(--jade);border:1px solid var(--jade-deep);
    color:#fff;padding:5px 13px;border-radius:999px;font-size:12px;font-weight:600;
  }
  .toast button:disabled{opacity:.6;}
  /* the tray-full penalty gets its own jade toast */
  .toast.penalty{
    background:linear-gradient(180deg,#17936c 0%,#0f6f52 100%);
    color:#fff;font-weight:600;
    box-shadow:0 10px 30px rgba(15,111,82,.45);
  }
  .tile.rewindin{animation:rewindin .3s cubic-bezier(.3,1.3,.5,1);}
  @keyframes rewindin{
    0%{transform:translateY(-18px) scale(.4);opacity:0}
    70%{transform:translateY(2px) scale(1.05);opacity:1}
    100%{transform:none;opacity:1}
  }
  .tile.badmove .front,.tile.badmove .back{animation:badpulse 1.1s ease infinite;}
  @keyframes badpulse{
    0%,100%{box-shadow:2px 3px 0 0 var(--tile-e1),3px 4px 0 0 var(--tile-e2),5px 8px 12px var(--tile-shadow),inset 0 0 0 3px rgba(220,38,38,.95);}
    50%{box-shadow:2px 3px 0 0 var(--tile-e1),3px 4px 0 0 var(--tile-e2),5px 8px 12px var(--tile-shadow),inset 0 0 0 6px rgba(220,38,38,.35);}
  }
  /* undo attention: lit up, with a jiggle every few seconds */
  button.attn{
    background:var(--jade);border-color:var(--jade-deep);color:#fff;
    animation:jig 2.6s ease infinite;
  }
  button.attn:hover{background:#149770;}
  @keyframes jig{
    0%,8%,100%{transform:rotate(0)}
    2%{transform:rotate(-3deg) translateY(-1px)}
    4%{transform:rotate(3deg) translateY(-1px)}
    6%{transform:rotate(-2deg)}
  }
  #confetti{position:fixed;inset:0;pointer-events:none;z-index:10000;}

  /* ---------- debug ---------- */
  #debugPanel{
    position:fixed;right:12px;bottom:12px;z-index:9000;
    background:#1b1d1f;border:1px solid #35383c;border-radius:12px;
    padding:14px;width:280px;font-size:12px;color:#d7d9d4;display:none;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
  }
  #debugPanel h3{margin:0 0 8px;font-size:13px;color:var(--gold);}
  #debugPanel input[type=date]{width:100%;padding:5px;border-radius:6px;border:1px solid #35383c;background:#101214;color:#d7d9d4;font-family:inherit;}
  #debugPanel .row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
  #debugPanel button{font-size:11px;padding:5px 8px;background:#26292c;border-color:#3a3d41;color:#d7d9d4;}
  #debugOut{margin-top:8px;max-height:150px;overflow:auto;white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:11px;color:#9fb8ab;}
  @media (prefers-reduced-motion: reduce){
    .flip{transition:none;}
    .tile.wiggle,.tile.undoback,.tile.hintglow .front,.tile.hintglow .back,button.attn,.tile.rewindin{animation:none;}
    .tile.badmove .front,.tile.badmove .back{
      animation:none;
      box-shadow:2px 3px 0 0 var(--tile-e1),3px 4px 0 0 var(--tile-e2),5px 8px 12px var(--tile-shadow),inset 0 0 0 3px rgba(220,38,38,.95);
    }
    .tile.clearing{animation:none;opacity:0;}
    .card{animation:none;}
  }