/* Threadbare — dark, smart, slightly-smug. One accent: amber thread. */
:root{
  --bg:#0d0f14;
  --bg-2:#141822;
  --panel:#181d29;
  --panel-2:#1f2533;
  --ink:#e8eaf0;
  --ink-dim:#9aa3b8;
  --ink-faint:#5b6479;
  --line:#2a3142;
  --accent:#e0a23c;        /* amber thread */
  --accent-soft:#3a2f1a;
  --green:#3fae6b;
  --green-soft:#1c3326;
  --amber:#e0a23c;
  --amber-soft:#3a2f1a;
  --decoy:#3a4151;
  --radius:13px;
  --shadow:0 6px 18px rgba(0,0,0,.45);
  --shadow-lift:0 14px 34px rgba(0,0,0,.6);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 620px at 50% -8%, #1a2030 0%, var(--bg) 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  touch-action:manipulation;
  overflow-x:hidden;
}

.wrap{max-width:680px;margin:0 auto;padding:18px 16px 60px;}

/* ---- Header ---- */
header.site{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand .logo{font-size:22px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.brand h1{font-size:21px;margin:0;letter-spacing:.5px;font-weight:700;}
.brand h1 .thin{color:var(--accent);font-weight:800;}
.brand .sub{font-size:12px;color:var(--ink-faint);margin-top:1px;letter-spacing:.3px;}
.head-actions{display:flex;gap:8px;align-items:center;}
.icon-btn{
  background:var(--panel);border:1px solid var(--line);color:var(--ink-dim);
  width:36px;height:36px;border-radius:10px;font-size:15px;cursor:pointer;
  display:grid;place-items:center;transition:.15s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--accent);}

.daymeta{display:flex;align-items:baseline;gap:10px;margin:10px 2px 2px;flex-wrap:wrap;}
.daymeta .n{font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.4px;}
.daymeta .date{font-size:12px;color:var(--ink-faint);}
.topic-pill{
  margin:14px 0 6px;display:inline-flex;align-items:center;gap:7px;
  background:var(--panel-2);border:1px solid var(--line);
  padding:6px 13px;border-radius:999px;font-size:13px;color:var(--ink-dim);
}
.topic-pill b{color:var(--ink);font-weight:600;}

/* ---- Legend & guess counter ---- */
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 8px;flex-wrap:wrap;}
.legend{font-size:11.5px;color:var(--ink-dim);line-height:1.7;}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:3px;}
.legend .g{background:var(--green);}
.legend .a{background:var(--amber);}
.guesses{display:flex;gap:5px;align-items:center;}
.guesses .dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:.2s;}
.guesses .dot.used{background:var(--ink-faint);}
.guesses .label{font-size:11px;color:var(--ink-faint);margin-left:4px;}

/* ---- Sentence track ---- */
.track-label{font-size:11px;color:var(--ink-faint);letter-spacing:1.5px;text-transform:uppercase;margin:14px 2px 7px;}
.track{
  display:flex;flex-wrap:wrap;gap:7px;
  background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 12px;min-height:108px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.slot{
  min-width:46px;min-height:38px;border-radius:9px;
  border:1.5px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s, background .15s;
  position:relative;
}
.slot.empty::after{content:attr(data-i);position:absolute;font-size:10px;color:var(--ink-faint);opacity:.5;}
.slot.over{border-color:var(--accent);background:rgba(224,162,60,.07);}
.slot.filled{border-style:solid;border-color:transparent;}

/* ---- Tiles ---- */
.tile{
  background:linear-gradient(180deg,#2b3243 0%, #222838 100%);
  border:1px solid #3a4255;
  color:var(--ink);
  padding:9px 13px;border-radius:9px;
  font-size:15px;font-weight:600;letter-spacing:.2px;
  cursor:grab;user-select:none;white-space:nowrap;
  box-shadow:0 3px 7px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .12s, box-shadow .12s, border-color .12s, opacity .2s;
  touch-action:none;position:relative;
}
.tile:active{cursor:grabbing;}
.tile.dragging{opacity:.35;}
.tile.ghost{
  position:fixed;z-index:9999;pointer-events:none;margin:0;
  box-shadow:var(--shadow-lift);transform:scale(1.06) rotate(-1.5deg);
  border-color:var(--accent);
}
.tile.snap{animation:snap .22s ease;}
@keyframes snap{0%{transform:scale(1.12);}60%{transform:scale(.97);}100%{transform:scale(1);}}

/* feedback color states on placed tiles */
.tile.fb-green{border-color:var(--green);box-shadow:0 0 0 1.5px var(--green) inset, 0 3px 7px rgba(0,0,0,.4);background:linear-gradient(180deg,#1f3a2a,#16291f);}
.tile.fb-amber{border-color:var(--amber);box-shadow:0 0 0 1.5px var(--amber) inset, 0 3px 7px rgba(0,0,0,.4);background:linear-gradient(180deg,#3a3019,#2a2412);}
.tile.fb-decoy{opacity:.55;}

/* ---- The web (tangle) ---- */
.web-label{font-size:11px;color:var(--ink-faint);letter-spacing:1.5px;text-transform:uppercase;margin:20px 2px 7px;}
.web{
  position:relative;
  background:
    radial-gradient(600px 280px at 50% 40%, rgba(224,162,60,.04), transparent 70%),
    var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 10px;min-height:200px;
  display:flex;flex-wrap:wrap;gap:9px 8px;justify-content:center;align-items:center;
}
.web .tile{transform-origin:center;}
.web .tile.placed{opacity:0;pointer-events:none;width:0;height:0;padding:0;margin:0;border:0;overflow:hidden;}

/* ---- Controls ---- */
.controls{display:flex;gap:10px;margin-top:18px;align-items:stretch;}
.btn{
  flex:1;border:none;border-radius:11px;padding:14px;font-size:15px;font-weight:700;
  cursor:pointer;letter-spacing:.4px;transition:.15s;font-family:var(--sans);
}
.btn-primary{background:var(--accent);color:#1a1206;box-shadow:0 5px 16px rgba(224,162,60,.32);}
.btn-primary:hover{filter:brightness(1.07);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
.btn-ghost{flex:0 0 auto;background:var(--panel);color:var(--ink-dim);border:1px solid var(--line);padding:14px 16px;}
.btn-ghost:hover{color:var(--ink);}

.feedback-line{
  text-align:center;margin-top:14px;min-height:26px;font-size:15px;font-weight:600;
  color:var(--ink-dim);transition:.2s;
}
.feedback-line .gc{color:var(--green);}
.feedback-line .ac{color:var(--amber);}

/* ---- History rows ---- */
.history{margin-top:14px;display:flex;flex-direction:column;gap:5px;}
.hrow{display:flex;gap:3px;align-items:center;justify-content:center;}
.hcell{width:15px;height:15px;border-radius:3px;background:var(--decoy);}
.hcell.g{background:var(--green);}
.hcell.a{background:var(--amber);}
.hcell.b{background:var(--line);}

/* ---- SVG thread overlay (untangle anim) ---- */
.thread-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible;}
.thread-path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(224,162,60,.5));opacity:.85;}

/* ---- Modal ---- */
.modal-back{
  position:fixed;inset:0;background:rgba(6,8,12,.78);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:18px;
}
.modal-back.show{display:flex;animation:fade .25s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:linear-gradient(180deg,var(--panel) 0%, var(--bg-2) 100%);
  border:1px solid var(--line);border-radius:18px;max-width:480px;width:100%;
  padding:26px 22px 22px;box-shadow:var(--shadow-lift);
  animation:rise .35s cubic-bezier(.2,.8,.25,1);max-height:92vh;overflow-y:auto;
}
@keyframes rise{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal .res-title{font-size:22px;font-weight:800;margin:0 0 4px;letter-spacing:.3px;}
.modal .res-sub{font-size:13px;color:var(--ink-dim);margin:0 0 18px;}

.factcard{
  background:linear-gradient(165deg,#22293a,#171c28);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:13px;padding:18px 18px 16px;margin:6px 0 4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  animation:rise .5s .12s both;
}
.factcard .ft-topic{font-size:12px;color:var(--accent);letter-spacing:.6px;text-transform:uppercase;margin-bottom:9px;font-weight:700;}
.factcard .ft-sentence{font-family:var(--serif);font-size:20px;line-height:1.4;color:#fff;margin:0 0 10px;font-weight:500;}
.factcard .ft-why{font-size:14px;color:var(--ink-dim);line-height:1.5;margin:0;}

.countdown{text-align:center;margin:18px 0 4px;font-size:13px;color:var(--ink-dim);}
.countdown b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:16px;}

.share-block{margin-top:16px;}
.share-pre{
  background:#0c0f16;border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.55;color:var(--ink);white-space:pre;overflow-x:auto;margin:0 0 11px;
  letter-spacing:1px;
}
.share-btns{display:flex;gap:9px;flex-wrap:wrap;}
.share-btns .btn{flex:1;min-width:130px;padding:12px;font-size:14px;}
.btn-x{background:#1d2230;color:var(--ink);border:1px solid var(--line);}
.btn-x:hover{border-color:var(--accent);}
.btn-copy{background:var(--accent);color:#1a1206;}
.copied{color:var(--green)!important;}

.teaser-box{
  margin-top:12px;background:var(--accent-soft);border:1px dashed var(--accent);
  border-radius:11px;padding:12px 14px;font-size:13px;color:#f0d9a8;line-height:1.5;
}
.teaser-box b{color:#fff;}

.stats-row{display:flex;gap:10px;margin-top:18px;}
.stat{flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:11px 8px;text-align:center;}
.stat .v{font-size:21px;font-weight:800;color:var(--ink);}
.stat .l{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;}

/* ---- Rules overlay ---- */
.rules-back{position:fixed;inset:0;background:rgba(6,8,12,.86);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:200;padding:18px;}
.rules-back.show{display:flex;}
.rules{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:18px;max-width:430px;width:100%;padding:28px 24px;box-shadow:var(--shadow-lift);animation:rise .3s ease;}
.rules h2{margin:0 0 4px;font-size:23px;}
.rules h2 .thin{color:var(--accent);}
.rules .tag{font-size:13px;color:var(--ink-dim);margin:0 0 18px;}
.rules ol{margin:0 0 6px;padding-left:20px;}
.rules li{margin-bottom:11px;font-size:14.5px;color:var(--ink);line-height:1.5;}
.rules li b{color:var(--accent);}
.mini-legend{display:flex;flex-direction:column;gap:7px;margin:14px 0 18px;font-size:13px;}
.mini-legend div{display:flex;align-items:center;gap:9px;color:var(--ink-dim);}
.mini-legend .sw{width:15px;height:15px;border-radius:4px;flex:none;}

footer{margin-top:34px;text-align:center;font-size:11.5px;color:var(--ink-faint);line-height:1.8;}
footer a{color:var(--ink-dim);text-decoration:none;}
footer a:hover{color:var(--accent);}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
  padding:11px 18px;border-radius:11px;font-size:14px;box-shadow:var(--shadow);
  opacity:0;transition:.25s;z-index:300;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:480px){
  .wrap{padding:14px 12px 50px;}
  .tile{font-size:14px;padding:8px 11px;}
  .brand h1{font-size:19px;}
  .modal .res-title{font-size:20px;}
  .factcard .ft-sentence{font-size:18px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.05ms!important;}
}