:root {
  --bg: #1e1f22;
  --text: #e5e5e5;
  --container-bg: #2a2b30;
  --card-bg: #34363a;
  --square-bg: #3c3f45;
  --square-border: #4a4d52;
  --square-hover-bg: #45484d;
  --line-bg: #33353a;
  --line-border: #44464a;
  --line-hover-bg: #3f4045;
  --chip-bg: #2f3134;
  --muted-text: #dcdcdc;
  --input-bg: #2f3034;
  --input-border: #555;
  --input-hover-bg: #3a3b3f;
  --input-focus-bg: #404145;
  --btn-bg: #505154;
  --btn-text: #eaeaea;
  --btn-hover-bg: #5a5b5f;
  --hl-word-bg: rgba(96,99,106,0.45);
  --hl-word-border: #8a8c91;
  --hl-wrong-bg: rgba(255, 80, 80, 0.35);
  --hl-wrong-border: #ff9a9a;
  --hl-hinted-bg: rgba(255, 220, 120, 0.38);
  --hl-hinted-ring: rgba(255, 220, 120, 0.35);
  --ctrl-size: 42px;
  --ctrl-fs: 18px;
  --ctrl-bg: rgba(255,255,255,0.08);
  --ctrl-border: rgba(255,255,255,0.10);
  --ctrl-color: #fffae6;
  --ctrl-hover-bg: rgba(255,255,255,0.16);
  --ctrl-hover-shadow: 0 6px 16px rgba(0,0,0,0.25);
  --ctrl-active-scale: 0.985;
  --ctrl-focus-ring: 0 0 0 3px rgba(122,162,230,0.5);
  --ctrl-trans: 260ms cubic-bezier(.22,.61,.36,1);
}
.light-theme {
  --bg: #f5f7fb;
  --text: #222;
  --container-bg: #fff;
  --card-bg: #eef0f4;
  --square-bg: #fff;
  --square-border: #cfd6e3;
  --square-hover-bg: #f2f5f9;
  --line-bg: #f4f6fa;
  --line-border: #d8deea;
  --line-hover-bg: #e9eef7;
  --chip-bg: #e7ecf6;
  --muted-text: #333;
  --input-bg: #fff;
  --input-border: #cfd6e3;
  --input-hover-bg: #f6f8fc;
  --input-focus-bg: #eef3fb;
  --btn-bg: #e9edf6;
  --btn-text: #222;
  --btn-hover-bg: #dbe3f3;
  --hl-word-bg: rgba(0, 0, 0, 0.08);
  --hl-word-border: #9aa2b1;
  --hl-wrong-bg: rgba(255, 60, 60, 0.18);
  --hl-wrong-border: #ff6b6b;
  --hl-hinted-bg: rgba(255, 225, 120, 0.45);
  --hl-hinted-ring: rgba(255, 210, 90, 0.35);
  --ctrl-bg: rgba(0,0,0,0.06);
  --ctrl-border: rgba(0,0,0,0.10);
  --ctrl-color: #222;
  --ctrl-hover-bg: rgba(0,0,0,0.12);
  --ctrl-hover-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
@media (max-width: 520px){ :root{ --ctrl-size:38px; --ctrl-fs:16px; } }
*{ box-sizing:border-box; font-family:'Roboto Mono',monospace; }
html,body{ min-height:100vh; margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
body{ display:flex; justify-content:center; align-items:flex-start; padding:40px 0; }
.container{
  background:var(--container-bg); border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,.12);
  padding:20px; width:fit-content; min-width:1100px; max-width:95vw;
  display:flex; flex-direction:column; align-items:center; gap:20px; position:relative; z-index:1;
}
.crossword{
  display:grid; justify-content:center; align-items:center; gap:6px;
  background:var(--card-bg); padding:12px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.square{
  position:relative; width:44px; height:44px; background:var(--square-bg);
  border:1px solid var(--square-border); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:clamp(14px,1.6vw,20px); color:inherit; text-transform:uppercase; text-align:center;
  transition:background 160ms ease;
}
.square:hover{ background:var(--square-hover-bg); }
.crossword .square span.char{
  position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;
  pointer-events:none !important; z-index:2 !important;
}
.crossword .square input.cell-input{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; display:block !important;
  background:transparent !important; border:none !important; outline:none !important;
  text-align:center !important; line-height:1 !important; color:inherit !important; z-index:1 !important;
  font-weight:700; font-size:clamp(14px,1.6vw,20px); letter-spacing:.02em; text-transform:uppercase; caret-color:currentColor;
}
.crossword .square .num{
  position:absolute !important;
  z-index:5 !important;
  pointer-events:none !important;
  font-size:10px; font-weight:700; line-height:1; opacity:.92; color:inherit;
  padding:0 1px;
}
.crossword .square .num-across{ left:4px !important; top:4px !important; right:auto !important; bottom:auto !important; }
.crossword .square .num-down{ right:4px !important; top:4px !important; left:auto !important; bottom:auto !important; }
.square.highlighted{ background:var(--hl-word-bg) !important; box-shadow:inset 0 0 0 2px var(--hl-word-border) !important; transition:background 220ms ease, box-shadow 220ms ease; }
.square.wrong{ background:var(--hl-wrong-bg) !important; box-shadow:inset 0 0 0 2px var(--hl-wrong-border) !important; transition:background 220ms ease, box-shadow 220ms ease; }
.square.correct{ background:rgba(60,200,120,0.35) !important; box-shadow:inset 0 0 0 2px rgba(90,230,140,0.9) !important; transition:background 220ms ease, box-shadow 220ms ease; }
.square.hinted{ background:var(--hl-hinted-bg) !important; animation:hintedFlash 1.2s ease; }
@keyframes hintedFlash{ 0%{box-shadow:0 0 0 0 var(--hl-hinted-ring);} 30%{box-shadow:0 0 0 6px var(--hl-hinted-ring);} 100%{box-shadow:0 0 0 0 var(--hl-hinted-ring);} }
.success-pulse{ animation:successPulse .9s ease; }
@keyframes successPulse{ 0%{transform:scale(1);} 30%{transform:scale(1.02);} 100%{transform:scale(1);} }
.lines{ width:100%; display:flex; flex-direction:column; gap:10px; }
.line{ display:flex; align-items:center; gap:10px; background:var(--line-bg); border:1px solid var(--line-border); border-radius:4px; padding:8px; transition:background 200ms ease, border-color 200ms ease; }
.line:hover{ background:var(--line-hover-bg); }
.line-num{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--chip-bg); border:1px solid var(--line-border); color:var(--muted-text); font-size:13px; font-weight:700; }
.word,.clue{ border:1px solid var(--input-border); border-radius:4px; padding:8px 10px; font-size:16px; background:var(--input-bg); color:var(--text); outline:none; transition:background 200ms ease, border-color 200ms ease; }
.word:hover,.clue:hover{ background:var(--input-hover-bg); }
.word:focus,.clue:focus{ background:var(--input-focus-bg); }
.word{ width:180px; }
.clue{ flex:1; }
@media (max-width:768px){
  .container{ width:95%; }
  .crossword{ transform:scale(.9); transform-origin:top center; }
  .square{ width:36px; height:36px; }
  .word{ width:100%; }
  .line{ flex-direction:column; }
}
.line{ min-width:0; }
.center.inputs{ width:100%; max-width:100%; }
.lines{ width:100%; max-width:100%; }
.line{ flex-wrap:nowrap; width:100%; box-sizing:border-box; }
.word{ flex-shrink:0; }
.clue{ min-width:0; }
.square.end-across .char, .square.end-across input.cell-input{ padding-right:8px; }
.square.end-down   .char, .square.end-down   input.cell-input{ padding-bottom:6px; }
.theme-controls{
  position:fixed; top:15px; right:15px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; z-index:2000; max-height:calc(100vh - 30px); overflow:auto; padding:2px; pointer-events:auto;
}
.theme-controls, .theme-controls *{ pointer-events:auto; }
.theme-controls .control-btn, .theme-controls .theme-toggle, .theme-controls .btn-hint-mini{
  width:var(--ctrl-size); height:var(--ctrl-size); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ctrl-bg); border:1px solid var(--ctrl-border); color:var(--ctrl-color);
  font-size:var(--ctrl-fs); cursor:pointer;
  transition:transform var(--ctrl-trans), background-color var(--ctrl-trans), box-shadow var(--ctrl-trans), filter var(--ctrl-trans);
  outline:none; will-change:transform, background-color, box-shadow, filter;
}
.theme-controls .control-btn:hover, .theme-controls .theme-toggle:hover, .theme-controls .btn-hint-mini:hover{
  background:var(--ctrl-hover-bg); transform:translateY(-1px) scale(1.03); box-shadow:var(--ctrl-hover-shadow); filter:saturate(1.05);
}
.theme-controls .control-btn:active, .theme-controls .theme-toggle:active, .theme-controls .btn-hint-mini:active{ transform:translateY(0) scale(var(--ctrl-active-scale)); }
.theme-controls .control-btn:focus-visible, .theme-controls .theme-toggle:focus-visible, .theme-controls .btn-hint-mini:focus-visible{ box-shadow:var(--ctrl-hover-shadow), var(--ctrl-focus-ring); }
.theme-controls .icon{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .icon{ display:none; }
.light-theme .theme-toggle .icon-sun{ display:block; }
body:not(.light-theme) .theme-toggle .icon-moon{ display:block; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}