:root{
  --bg:#07090c;
  --bg-raised:#101418;
  --bg-inset:#030405;
  --line:#233038;
  --line-soft:#1a252b;
  --text:#e6f6fa;
  --text-muted:#7c96a0;
  --accent:#00e5ff;
  --accent-soft:rgba(0,229,255,.18);
  --accent-ring:rgba(0,229,255,.55);
  --good:#6fae66;
  --good-soft:rgba(111,174,102,.18);
  --bad:#d1495b;
  --bad-soft:rgba(209,73,91,.22);
  --font-wordmark:'Orbitron',sans-serif;
}

*{box-sizing:border-box;}
/* The Artifact viewer injects this automatically, but a standalone build of
   this same page does not -- without it, a plain `hidden` attribute loses to
   any ordinary `display` rule for that element (author styles beat the
   browser's default [hidden] rule regardless of specificity), so every
   hide/show toggle in this page needs it declared explicitly here. */
[hidden]{display:none !important;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Archivo','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
}

.jp-face{font-family:'Archivo','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;}
.mono-num{font-variant-numeric:tabular-nums;}

.page{
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 60px;
  position:relative;
  background:
    radial-gradient(circle at 3px 3px, rgba(255,255,255,.035) 1px, transparent 1.4px) 0 0/14px 14px,
    var(--bg);
  min-height:100vh;
}

/* ---------- header ---------- */
.masthead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.wordmark{
  font-family:var(--font-wordmark);
  font-weight:400;
  font-size:clamp(28px,5vw,46px);
  letter-spacing:.5px;
  line-height:1;
  margin:0 0 8px;
  color:var(--text);
  text-shadow:0 0 18px var(--accent-soft), 2px 2px 0 rgba(0,0,0,.4);
  text-wrap:balance;
}
.stats-readout{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  flex-shrink:0;
  max-width:100%;
}
.stat{
  background:var(--bg-raised);
  border:1px solid var(--line);
  padding:8px 16px;
  min-width:96px;
  text-align:center;
}
.stat-label{
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.stat-value{
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;
  font-weight:700;
  color:var(--accent);
  margin-top:2px;
}
.stat-toggle{
  cursor:pointer;
  font:inherit;
}
.stat-toggle .stat-value{font-size:16px;}
.stat-toggle:hover{border-color:var(--accent);}
.stat-toggle.toggled .stat-value{color:var(--text-muted);}
.stat-toggle:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;}

/* ---------- deck (difficulty + actions) ---------- */
.deck{
  display:flex;
  align-items:center;
  gap:8px 12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.actions{margin-left:auto;}
.difficulty-switch{
  display:flex;
  gap:2px;
  background:var(--bg-inset);
  padding:3px;
  border:1px solid var(--line);
}
.diff-btn{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:.06em;
  color:var(--text-muted);
  background:transparent;
  border:none;
  padding:9px 16px;
  cursor:pointer;
  line-height:1;
  transition:background .15s,color .15s;
}
.diff-btn:hover{color:var(--text);}
.diff-btn.active{
  background:var(--accent);
  color:#1a0d05;
}
.diff-btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;}

.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.actions button{
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:13px;
  color:var(--text);
  background:var(--bg-raised);
  border:1px solid var(--line);
  padding:9px 14px;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.actions button:hover{border-color:var(--accent);color:var(--accent);}
.actions button:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;}
.actions button:active{background:var(--bg-inset);}
.actions button.toggled{border-color:var(--accent);color:var(--accent);}

.script-switch{
  display:flex;
  gap:2px;
  background:var(--bg-inset);
  padding:3px;
  border:1px solid var(--line);
}
.script-btn{
  font-family:'Barlow Condensed','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--text-muted);
  background:transparent;
  border:none;
  padding:8px 14px;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.script-btn:hover{color:var(--text);}
.script-btn.active{background:var(--accent);color:#1a0d05;}
.script-btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;}

/* ---------- kana pad ---------- */
.kana-pad{
  background:var(--bg-raised);
  border:1px solid var(--line);
  padding:10px 12px;
  margin-bottom:16px;
}
.kana-pad-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 8px;
}
/* Same sizing family as .roman-key below -- key size stays consistent
   whichever script (romaji/katakana) is active. */
.kana-grid{
  display:grid;
  grid-template-columns:repeat(10, minmax(0,38px));
  gap:4px;
  margin-bottom:6px;
  justify-content:center;
}
.kana-extra{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:center;
}
.kana-key{
  font-family:'Archivo','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--text);
  background:var(--bg-inset);
  border:1px solid var(--line);
  padding:9px 0;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.kana-key:hover{border-color:var(--accent);color:var(--accent);}
.kana-key:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;}
.kana-key.empty{visibility:hidden;pointer-events:none;}
.kana-key-extra{min-width:34px;flex:0 0 auto;padding:9px 8px;}
.kana-key-del{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);flex:0 0 auto;min-width:44px;margin-left:auto;}

/* ---------- roman (QWERTY) pad -- same idea as the kana pad: tapping a
   key never touches the phone's own keyboard/IME, so typing behaves
   identically no matter what keyboard the visitor has installed */
.roman-pad{
  background:var(--bg-raised);
  border:1px solid var(--line);
  padding:10px 12px;
  margin-bottom:16px;
}
.roman-pad-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 8px;
}
.roman-row{
  display:flex;
  gap:4px;
  margin-bottom:4px;
  justify-content:center;
}
.roman-key{
  font-family:'Archivo',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--text);
  background:var(--bg-inset);
  border:1px solid var(--line);
  flex:1 1 0;
  max-width:38px;
  padding:9px 0;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.roman-key:hover{border-color:var(--accent);color:var(--accent);}
.roman-key:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;}
.roman-key-del{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);flex:0 0 auto;max-width:none;min-width:90px;}

/* ---------- active clue banner ---------- */
.active-clue-banner{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  padding:11px 16px;
  margin-bottom:16px;
  font-size:14.5px;
  flex-wrap:wrap;
}
.full-notice{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bad-soft);
  border:1px solid var(--bad);
  border-left:4px solid var(--bad);
  padding:11px 16px;
  margin-bottom:16px;
  font-size:14px;
  color:var(--text);
}
.clue-num{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--accent);
  min-width:1.4em;
}
.clue-dir{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  border:1px solid var(--line);
  padding:2px 7px;
}
.clue-text{flex:1;min-width:180px;color:var(--text);}
.clue-genre-dot{
  width:9px;height:9px;flex-shrink:0;
  border:1px solid rgba(0,0,0,.35);
}
.clue-genre-label{font-size:12px;color:var(--text-muted);}

/* ---------- board layout ---------- */
.board-area{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:20px;
  align-items:start;
}
@media (max-width:880px){
  .board-area{grid-template-columns:1fr;}
}

.grid-scroll{
  overflow-x:auto;
  background:var(--bg-raised);
  border:1px solid var(--line);
  padding:16px;
}

.crossword-grid{
  display:grid;
  gap:1px;
  background:var(--line);
  width:max-content;
  margin:0 auto;
  position:relative;
  --cell-size:32px;
}
@media (max-width:640px){
  .crossword-grid{--cell-size:26px;}
}

.cell{
  width:var(--cell-size);
  height:var(--cell-size);
  position:relative;
  background:var(--bg);
}
.cell.block{background:var(--bg-inset);}
.cell:not(.block){cursor:pointer;}

.cell .num{
  position:absolute;
  top:1px;left:2px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:calc(var(--cell-size) * 0.4);
  color:var(--text);
  line-height:1;
  pointer-events:none;
  z-index:2;
}

.cell .letter{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:var(--text);
  text-transform:uppercase;
  font-family:'Archivo','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:calc(var(--cell-size) * 0.48);
  pointer-events:none;
  user-select:none;
}

.cell.active-word{background:var(--accent-soft);}
.cell.active-cell{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 2px var(--accent);
}
.cell.correct .letter{color:var(--good);}
.cell.wrong{background:var(--bad-soft);}
.cell.wrong .letter{color:var(--bad);}
.cell.revealed .letter{color:var(--accent);}

/* Single input shared by every cell in romaji mode: it never loses focus
   while a word is being typed, it's just repositioned on top of whichever
   cell is active. This avoids the per-cell focus-jumping that iOS Safari
   and Chrome (both WebKit) handle unreliably with autocorrect/QuickType,
   which caused stuck "needs Enter" and duplicated-letter bugs. */
.hidden-typer{
  position:absolute;
  top:0; left:0;
  border:none;
  outline:none;
  background:transparent;
  color:transparent;
  caret-color:transparent;
  padding:0;
  margin:0;
  font-size:16px; /* keeps iOS from auto-zooming the page on focus */
  z-index:5;
}

@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-3px);}
  75%{transform:translateX(3px);}
}
.cell.shake{animation:shake .18s ease 2;}
@media (prefers-reduced-motion:reduce){
  .cell.shake{animation:none;}
}

/* ---------- clue panel ---------- */
.clue-panel{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.clue-group h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  letter-spacing:.1em;
  margin:0 0 8px;
  color:var(--text);
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
}
.clue-group h2 .jp{
  font-family:'Archivo','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
  font-size:12px;
  letter-spacing:0;
  color:var(--text-muted);
  font-weight:400;
}
.clue-list{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.clue-list li{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:8px 8px;
  cursor:pointer;
  background:var(--bg-raised);
  border-left:3px solid transparent;
  font-size:13.5px;
  line-height:1.4;
}
.clue-list li:hover{background:var(--bg-inset);}
.clue-list li.active{
  border-left-color:var(--accent);
  background:var(--accent-soft);
}
.clue-list li.solved .li-clue{color:var(--good);}
.clue-list .li-num{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  color:var(--text-muted);
  min-width:1.6em;
  text-align:right;
  flex-shrink:0;
}
.clue-list .li-body{flex:1;min-width:0;}
.clue-list .li-clue{color:var(--text);}
.clue-list .li-genre{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  font-size:11px;
  color:var(--text-muted);
}
.li-genre .dot{width:7px;height:7px;flex-shrink:0;border:1px solid rgba(0,0,0,.35);}

/* ---------- completion overlay ---------- */
.complete-overlay{
  position:fixed;
  inset:0;
  background:rgba(6,6,8,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:20px;
}
.complete-overlay[hidden]{display:none;}
.complete-card{
  background:var(--bg-raised);
  border:1px solid var(--accent);
  box-shadow:0 0 40px var(--accent-soft);
  padding:36px 40px;
  text-align:center;
  max-width:360px;
}
.complete-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.16em;
  font-size:12px;
  color:var(--accent);
  margin:0 0 6px;
}
.complete-card h2{
  font-family:var(--font-wordmark);
  font-weight:400;
  font-size:32px;
  margin:0 0 12px;
  color:var(--text);
}
.complete-card p{color:var(--text-muted);font-size:14px;margin:0 0 20px;}
.complete-card button{
  font-family:'Archivo',sans-serif;
  font-weight:700;
  font-size:13px;
  color:#1a0d05;
  background:var(--accent);
  border:none;
  padding:11px 26px;
  cursor:pointer;
}
.complete-card button + button{margin-left:10px;}
.complete-card button:focus-visible{outline:2px solid #fff;outline-offset:2px;}

.page-footer{
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--text-muted);
  font-size:12px;
}
.other-packs{margin-top:14px;}
.other-packs-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 8px;
}
.other-packs-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.other-packs-link{
  font-family:'Archivo',sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  background:var(--bg-inset);
  border:1px solid var(--line);
  padding:7px 12px;
  text-decoration:none;
  transition:border-color .15s,color .15s;
}
.other-packs-link:hover{border-color:var(--accent);color:var(--accent);}

.support-link-wrap{margin-top:14px;}
.support-link{
  display:inline-block;
  font-family:'Archivo',sans-serif;
  font-size:12px;
  font-weight:700;
  color:#1a0d05;
  background:var(--accent);
  padding:8px 14px;
  text-decoration:none;
  transition:opacity .15s;
}
.support-link:hover{opacity:.85;}

/* ---------- keyboard notice (shown once before play starts, mainly for
   touch devices where the on-screen pad replaces the device's own
   keyboard) ---------- */
.keyboard-notice-overlay{
  position:fixed;
  inset:0;
  background:rgba(6,6,8,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
  padding:20px;
}
.keyboard-notice-card{
  background:var(--bg-raised);
  border:1px solid var(--accent);
  box-shadow:0 0 40px var(--accent-soft);
  padding:28px 30px;
  text-align:center;
  max-width:360px;
}
.keyboard-notice-text{
  color:var(--text);
  font-size:14px;
  line-height:1.6;
  margin:0 0 18px;
}
.keyboard-notice-checkbox{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--text-muted);
  font-size:13px;
  margin:0 0 20px;
  cursor:pointer;
}
.keyboard-notice-ok{
  font-family:'Archivo',sans-serif;
  font-weight:700;
  font-size:13px;
  color:#1a0d05;
  background:var(--accent);
  border:none;
  padding:11px 26px;
  cursor:pointer;
}
.keyboard-notice-ok:focus-visible{outline:2px solid #fff;outline-offset:2px;}