/* Tile & Seek — all rules scoped under .tns-app so they never touch your theme */
.tns-app{
  --tns-ink:#15303a; --tns-ink-2:#204552;
  --tns-parchment:#e9e0cd; --tns-parchment-2:#ded2b9;
  --tns-tile:#fbf6ea; --tns-tile-edge:#cdbf9d;
  --tns-amber:#e0a536; --tns-amber-deep:#c4862a;
  --tns-rust:#cf6a45; --tns-moss:#4f7c53; --tns-moss-deep:#3d6541;
  --tns-slate-gray:#5b6b6f;
  --tns-shadow:0 2px 0 rgba(0,0,0,.18),0 6px 14px rgba(9,30,36,.14);
  --tns-font-display:"Bricolage Grotesque",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --tns-font-ui:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  position:relative;
  max-width:1080px;
  margin:24px auto;
  font-family:var(--tns-font-ui);
  color:var(--tns-ink);
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(224,165,54,.10), transparent 60%),
    var(--tns-parchment);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(9,30,36,.12);
  line-height:1.5;
}
.tns-app *{box-sizing:border-box}
.tns-app button{font-family:var(--tns-font-ui)}

/* header */
.tns-app .tns-topbar{background:var(--tns-ink);color:var(--tns-tile);border-bottom:3px solid var(--tns-amber)}
.tns-app .tns-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px}
.tns-app .tns-wordmark{display:flex;align-items:center;gap:10px;font-family:var(--tns-font-display)}
.tns-app .tns-wm-word{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1}
.tns-app .tns-wm-amp{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--tns-amber);color:var(--tns-ink);border-radius:5px;font-weight:800;font-size:19px;box-shadow:inset 0 -3px 0 var(--tns-amber-deep)}
.tns-app .tns-tagline{font-size:12.5px;color:#a9c2c9;letter-spacing:.14em;text-transform:uppercase}

/* tabs */
.tns-app .tns-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 12px;background:var(--tns-parchment-2)}
.tns-app .tns-tabs::-webkit-scrollbar{display:none}
.tns-app .tns-tab{appearance:none;border:0;background:transparent;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--tns-ink-2);padding:14px 15px 12px;white-space:nowrap;opacity:.7;border-bottom:3px solid transparent;transition:opacity .15s}
.tns-app .tns-tab:hover{opacity:1}
.tns-app .tns-tab[aria-selected="true"]{opacity:1;color:var(--tns-ink);border-bottom-color:var(--tns-amber)}
.tns-app .tns-em{margin-right:7px}

/* layout */
.tns-app .tns-main{padding:22px 22px 40px}
.tns-app .tns-panel{display:none}
.tns-app .tns-panel.tns-active{display:block;animation:tns-fade .25s ease both}
@keyframes tns-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tns-app .tns-lede{font-size:15px;color:var(--tns-ink-2);max-width:64ch;margin:0 0 20px;line-height:1.55}
.tns-app .tns-lede b{color:var(--tns-ink)}

/* controls */
.tns-app .tns-card{background:linear-gradient(var(--tns-tile),#f5eede);border:1px solid var(--tns-tile-edge);border-radius:12px;padding:18px;box-shadow:var(--tns-shadow);margin-bottom:22px}
.tns-app .tns-field-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.tns-app .tns-field{display:flex;flex-direction:column;gap:6px}
.tns-app .tns-field.tns-grow{flex:1 1 220px}
.tns-app .tns-field label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tns-ink-2);margin:0}
.tns-app input[type=text]{font-family:var(--tns-font-ui);font-size:16px;color:var(--tns-ink);background:#fffdf7;border:1.5px solid var(--tns-tile-edge);border-radius:8px;padding:11px 12px;width:100%;letter-spacing:.04em;margin:0;box-shadow:none;line-height:normal;height:auto}
.tns-app input.tns-input-lg{font-family:var(--tns-font-display);font-weight:700;font-size:22px;letter-spacing:.18em;text-transform:uppercase}
.tns-app input:focus-visible,.tns-app select:focus-visible,.tns-app button:focus-visible,.tns-app .tns-wtile:focus-visible{outline:3px solid var(--tns-amber);outline-offset:2px}
.tns-app select{font-family:var(--tns-font-ui);font-size:15px;color:var(--tns-ink);background:#fffdf7;border:1.5px solid var(--tns-tile-edge);border-radius:8px;padding:10px 12px;height:auto}
.tns-app .tns-btn{appearance:none;cursor:pointer;font-family:var(--tns-font-display);font-weight:700;font-size:15.5px;color:var(--tns-ink);background:var(--tns-amber);border:0;border-radius:9px;padding:12px 20px;box-shadow:inset 0 -3px 0 var(--tns-amber-deep),0 4px 10px rgba(9,30,36,.18);transition:transform .08s;text-transform:none;letter-spacing:0}
.tns-app .tns-btn:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 var(--tns-amber-deep)}
.tns-app .tns-btn.tns-ghost{background:transparent;color:var(--tns-ink-2);box-shadow:none;border:1.5px solid var(--tns-tile-edge);font-weight:600}
.tns-app .tns-btn[disabled]{opacity:.45;cursor:not-allowed}
.tns-app .tns-toggles{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.tns-app .tns-chk{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--tns-ink-2);cursor:pointer;margin:0}
.tns-app .tns-chk input{width:16px;height:16px;accent-color:var(--tns-moss);margin:0}

/* results */
.tns-app .tns-status{font-family:var(--tns-font-display);font-weight:700;font-size:17px;margin:6px 0 4px}
.tns-app .tns-status .tns-n{color:var(--tns-amber-deep)}
.tns-app .tns-subnote{font-size:13px;color:var(--tns-slate-gray);margin-bottom:16px}
.tns-app .tns-group{margin-bottom:22px}
.tns-app .tns-group h3{font-family:var(--tns-font-ui);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tns-ink-2);margin:0 0 10px;display:flex;align-items:center;gap:8px;padding:0;border:0}
.tns-app .tns-group h3::after{content:"";flex:1;height:1px;background:var(--tns-parchment-2)}
.tns-app .tns-words{display:flex;flex-wrap:wrap;gap:9px}
.tns-app .tns-word{display:inline-flex;gap:2px;padding:5px;border-radius:8px;transition:transform .1s}
.tns-app .tns-word:hover{transform:translateY(-2px)}
.tns-app .tns-mtile{position:relative;display:inline-grid;place-items:center;width:26px;height:30px;background:var(--tns-tile);border:1px solid var(--tns-tile-edge);border-radius:4px;font-family:var(--tns-font-display);font-weight:700;font-size:16px;color:var(--tns-ink);text-transform:uppercase;box-shadow:0 1px 0 var(--tns-tile-edge)}
.tns-app .tns-mtile sub{position:absolute;right:2px;bottom:0;font-family:var(--tns-font-ui);font-size:8px;font-weight:600;color:var(--tns-slate-gray)}
.tns-app .tns-score{align-self:center;margin-left:6px;font-size:12px;font-weight:600;color:var(--tns-amber-deep);font-family:var(--tns-font-ui)}
.tns-app .tns-empty{text-align:center;padding:42px 16px;color:var(--tns-slate-gray);border:1.5px dashed var(--tns-parchment-2);border-radius:12px;background:rgba(255,255,255,.35)}
.tns-app .tns-empty .tns-big{font-family:var(--tns-font-display);font-size:18px;color:var(--tns-ink-2);margin-bottom:6px}

/* wordle */
.tns-app .tns-wgrid{display:grid;gap:8px;width:max-content;margin-bottom:16px}
.tns-app .tns-wrow{display:grid;grid-template-columns:repeat(5,52px);gap:8px}
.tns-app .tns-wtile{width:52px;height:52px;display:grid;place-items:center;cursor:pointer;font-family:var(--tns-font-display);font-weight:800;font-size:26px;text-transform:uppercase;background:var(--tns-tile);border:2px solid var(--tns-tile-edge);border-radius:6px;color:var(--tns-ink);user-select:none;transition:background .12s,color .12s,border-color .12s}
.tns-app .tns-wtile.tns-state-absent{background:var(--tns-slate-gray);border-color:var(--tns-slate-gray);color:#eef2f2}
.tns-app .tns-wtile.tns-state-present{background:var(--tns-amber);border-color:var(--tns-amber-deep);color:var(--tns-ink)}
.tns-app .tns-wtile.tns-state-correct{background:var(--tns-moss);border-color:var(--tns-moss-deep);color:#f3f7f0}
.tns-app .tns-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--tns-ink-2);margin:2px 0 16px}
.tns-app .tns-legend span{display:inline-flex;align-items:center;gap:7px}
.tns-app .tns-sw{width:15px;height:15px;border-radius:3px;display:inline-block}

/* scramble worksheet */
.tns-app .tns-worksheet{display:grid;gap:12px}
.tns-app .tns-ws-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tns-app .tns-ws-num{font-family:var(--tns-font-display);font-weight:700;color:var(--tns-amber-deep);width:26px;text-align:right}
.tns-app .tns-ws-answer{font-family:var(--tns-font-ui);font-weight:600;color:var(--tns-moss-deep);font-size:14px}
.tns-app .tns-ws-blank{flex:1;min-width:120px;border-bottom:2px dotted var(--tns-tile-edge);height:20px}
.tns-app textarea{font-family:var(--tns-font-ui);font-size:15px;color:var(--tns-ink);background:#fffdf7;border:1.5px solid var(--tns-tile-edge);border-radius:8px;padding:12px;width:100%;min-height:150px;resize:vertical;line-height:1.6}

/* share bar */
.tns-app .tns-sharebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--tns-slate-gray);margin-top:6px}
.tns-app .tns-sharebar code{font-family:var(--tns-font-ui);background:#fffdf7;border:1px solid var(--tns-tile-edge);border-radius:6px;padding:3px 8px;color:var(--tns-ink-2)}

/* scoped loading overlay (never covers the whole site) */
.tns-app .tns-loading{position:absolute;inset:0;background:var(--tns-parchment);display:grid;place-items:center;z-index:5}
.tns-app .tns-loading .tns-spin{width:34px;height:34px;border:4px solid var(--tns-tile-edge);border-top-color:var(--tns-amber);border-radius:50%;margin:0 auto 14px;animation:tns-spin .8s linear infinite}
.tns-app .tns-loading .tns-lbl{font-family:var(--tns-font-display);font-weight:700;color:var(--tns-ink-2);text-align:center}
@keyframes tns-spin{to{transform:rotate(360deg)}}

@media (max-width:560px){
  .tns-app .tns-wm-word{font-size:22px}
  .tns-app .tns-wrow{grid-template-columns:repeat(5,44px)}
  .tns-app .tns-wtile{width:44px;height:44px;font-size:22px}
  .tns-app input.tns-input-lg{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .tns-app *{animation:none!important;transition:none!important}
}
@media print{
  body *{visibility:hidden}
  .tns-app,.tns-app *{visibility:visible}
  .tns-app{position:absolute;left:0;top:0;box-shadow:none;background:#fff;margin:0}
  .tns-app .tns-topbar,.tns-app .tns-tabs,.tns-app .tns-card,.tns-app .tns-lede,.tns-app .tns-no-print{display:none!important}
  .tns-app .tns-panel:not(.tns-active){display:none}
}
