/* Ground-up visual layer. Loaded after styles.css on purpose. */
:root{
  --rb-ink:#07111f;
  --rb-paper:#f8fbff;
  --rb-line:rgba(255,255,255,.22);
  --rb-gold:#f6c85f;
  --rb-teal:#42d6c9;
  --rb-coral:#ff7b5f;
  --rb-blue:#244c7c;
}

body{
  background:#07111f !important;
  color:#f8fbff;
}

#app:has(#screen-home.active){max-width:none}
#screen-home{
  min-height:100dvh !important;
  display:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  align-items:stretch;
  justify-content:end;
  gap:16px;
  padding:24px clamp(16px,5vw,56px) calc(26px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg,rgba(5,11,20,0) 0%,rgba(5,11,20,.58) 50%,#050b14 100%),
    radial-gradient(circle at 76% 18%,rgba(246,200,95,.52) 0 54px,transparent 140px),
    linear-gradient(135deg,#4ed3c8 0%,#3269a3 48%,#07111f 100%) !important;
}
#screen-home.active{display:flex}
.home-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.home-bg::before,.home-bg::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  background-repeat:repeat-x;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.18));
}
.home-bg::before{
  bottom:38%;
  height:230px;
  background:
    linear-gradient(140deg,transparent 0 42%,rgba(255,255,255,.88) 43% 47%,rgba(24,54,81,.7) 48% 68%,transparent 69%) 0 100%/300px 190px;
  animation:rb-pan 34s linear infinite;
}
.home-bg::after{
  bottom:0;
  height:46%;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(66,214,201,.5),transparent 62%),
    linear-gradient(180deg,transparent,#050b14 72%);
}
.home-bg span{position:absolute;border-radius:50%;background:rgba(255,255,255,.78);box-shadow:0 0 22px rgba(255,255,255,.58)}
.home-bg span:nth-child(1){width:5px;height:5px;left:18%;top:14%;animation:rb-twinkle 2.8s infinite}
.home-bg span:nth-child(2){width:3px;height:3px;left:56%;top:10%;animation:rb-twinkle 3.4s infinite .7s}
.home-bg span:nth-child(3){width:4px;height:4px;right:18%;top:28%;animation:rb-twinkle 2.4s infinite .2s}
@keyframes rb-pan{to{background-position:300px 100%}}
@keyframes rb-twinkle{50%{opacity:.25;scale:.6}}

.home-copy{width:min(920px,100%);margin:0 auto}
.home-kicker{
  margin:0 0 6px;
  color:#bff9f4;
  font:900 13px "Baloo 2",system-ui;
  text-transform:uppercase;
  letter-spacing:.16em;
}
#screen-home .game-title{
  max-width:900px;
  margin:0;
  font-family:"Cinzel","Segoe UI",serif;
  font-size:clamp(48px,14vw,118px);
  line-height:.84;
  letter-spacing:0;
  text-align:left;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.42));
}
#screen-home .tagline{
  margin:12px 0 8px;
  color:#e8fbff;
  font:900 clamp(16px,4vw,24px) "Baloo 2",system-ui;
  text-align:left;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

#screen-home .game-card{
  width:min(920px,100%);
  min-height:clamp(150px,25dvh,230px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(116px,34%) 1fr;
  gap:18px;
  align-items:center;
  padding:16px;
  border-radius:28px;
  border:1px solid var(--rb-line);
  color:#fff;
  overflow:hidden;
  position:relative;
  background:rgba(8,17,31,.76) !important;
  box-shadow:0 26px 60px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(18px);
  transform:translateZ(0);
}
#screen-home .game-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.92;
}
#screen-home .game-card::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-90px;
  top:-94px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  filter:blur(2px);
}
#screen-home .game-card-sudoku::before{
  background:
    linear-gradient(100deg,rgba(255,123,95,.96),rgba(36,76,124,.36)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 28px);
}
#screen-home .game-card-crossword::before{
  background:
    linear-gradient(100deg,rgba(66,214,201,.96),rgba(36,76,124,.44)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 28px);
}
#screen-home .game-card:active{
  transform:translateY(4px) scale(.99);
  box-shadow:0 16px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.2);
}
#screen-home .game-card b{
  color:#fff;
  font-family:"Cinzel","Segoe UI",serif;
  font-size:clamp(28px,7vw,56px);
  line-height:.94;
  letter-spacing:0;
  text-shadow:0 8px 20px rgba(0,0,0,.38);
}
#screen-home .game-card small{
  display:block;
  margin-top:10px;
  color:#f3fffd;
  font:900 clamp(13px,3.2vw,18px) "Baloo 2",system-ui;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.game-live{
  width:100%;
  aspect-ratio:1;
  min-height:112px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  padding:10px;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 34px rgba(0,0,0,.22);
}
.game-live i{
  display:grid;
  place-items:center;
  min-width:0;
  border-radius:10px;
  color:#091426;
  background:rgba(255,255,255,.9);
  font:900 clamp(16px,5vw,32px) "Cinzel","Segoe UI",serif;
  font-style:normal;
  box-shadow:0 5px 0 rgba(0,0,0,.18);
}
.game-live i:empty{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.sudoku-live i:nth-child(2),.sudoku-live i:nth-child(6),.word-live i:nth-child(4),.word-live i:nth-child(8){
  animation:rb-cell 1.8s ease-in-out infinite;
}
@keyframes rb-cell{50%{translate:0 -4px;background:#f6c85f}}
#screen-home .mute-toggle{
  top:16px;
  right:16px;
  background:rgba(8,17,31,.8) !important;
  border-color:rgba(255,255,255,.24);
  backdrop-filter:blur(12px);
}

.cw-title-screen{
  min-height:100dvh !important;
  justify-content:end;
  align-items:stretch;
  padding:40px 18px calc(28px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg,rgba(5,11,20,0),rgba(5,11,20,.8) 66%,#050b14),
    radial-gradient(circle at 74% 16%,rgba(246,200,95,.7) 0 44px,transparent 108px),
    linear-gradient(135deg,#61d7ce,#496dcc 56%,#07111f) !important;
}
.cw-title-screen .cw-sun{
  margin:0;
  width:116px;
  height:116px;
  border-radius:30px;
  background:rgba(255,255,255,.9);
  color:#07111f;
  box-shadow:0 0 48px rgba(246,200,95,.58),0 12px 28px rgba(0,0,0,.28);
}
.cw-title-screen .game-title{
  margin:0;
  font-family:"Cinzel","Segoe UI",serif;
  font-size:clamp(46px,12vw,82px);
  line-height:.88;
  letter-spacing:0;
  text-align:left;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
}
.cw-title-screen .tagline{margin:4px 0 12px;color:#e8fbff;text-align:left;font-size:20px}
.cw-title-screen .btn-big{width:100%;max-width:520px}

.cw-screen.active{
  --sky1:#69d9d1;
  --sky2:#bbdfc1;
  --ground:#dfc27b;
  --panel:#102a42;
  --tile:#fffdf3;
  --tile2:#ead18c;
  --glow:#f6c85f;
  display:grid !important;
  grid-template-rows:auto minmax(126px,23dvh) minmax(168px,1fr) auto auto auto !important;
  max-width:560px;
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  gap:8px;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  overflow:hidden;
  background:#07111f !important;
  color:#07111f;
}
.cw-screen[data-realm="bazaar"]{--sky1:#ffb173;--sky2:#ffd988;--ground:#7d3154;--panel:#371b3a;--tile:#fff1cc;--tile2:#dfa05e;--glow:#ff8fb5}
.cw-screen[data-realm="forest"]{--sky1:#34b39c;--sky2:#a2da8b;--ground:#1f4730;--panel:#12372f;--tile:#f1ffe1;--tile2:#a7d96c;--glow:#c4ff7a}
.cw-screen[data-realm="river"]{--sky1:#3bbbe0;--sky2:#a6eeff;--ground:#3d7497;--panel:#10374f;--tile:#effcff;--tile2:#a8e2ff;--glow:#7bddff}
.cw-screen[data-realm="cave"]{--sky1:#333477;--sky2:#8179d8;--ground:#19162e;--panel:#15132d;--tile:#f0ebff;--tile2:#bbaaff;--glow:#c9b6ff}
.cw-screen[data-realm="shrine"]{--sky1:#92d8e6;--sky2:#f3fdff;--ground:#9eb8ca;--panel:#24485c;--tile:#fff;--tile2:#cbe8f4;--glow:#fff0b8}
.cw-screen[data-realm="storm"]{--sky1:#33336f;--sky2:#6b7dda;--ground:#3a3f69;--panel:#14193f;--tile:#fff6ca;--tile2:#bbc4ff;--glow:#ffe680}
.cw-screen[data-realm="snow"]{--sky1:#a8e4ff;--sky2:#f2fdff;--ground:#dbf2fb;--panel:#16415a;--tile:#fff;--tile2:#c9edf8;--glow:#9adfff}
.cw-screen[data-realm="stars"]{--sky1:#101548;--sky2:#412279;--ground:#12133c;--panel:#100d2b;--tile:#f1eaff;--tile2:#9a83ff;--glow:#ffd45f}
.cw-screen[data-realm="summit"]{--sky1:#f7d278;--sky2:#fff9de;--ground:#f2dfa5;--panel:#4f3512;--tile:#fff8d6;--tile2:#ffd45f;--glow:#fff}
.cw-hud{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
  min-height:46px;
  padding:6px 8px;
  border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 88%,white),var(--panel)) !important;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 0 rgba(0,0,0,.18);
}
.cw-hud b{font-size:14px;line-height:1.05}
.cw-hud span{font-size:10px;color:#c9f7ef}
#cw-lives,#cw-score{font-size:14px;font-weight:900;color:#fff}
.cw-scene{
  position:relative !important;
  inset:auto !important;
  min-height:126px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.26);
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%,#fff8d2 0 23px,var(--glow) 24px 62px,transparent 63px),
    linear-gradient(180deg,var(--sky1),var(--sky2) 48%,var(--ground) 100%) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.cw-scene::before{
  content:"";
  position:absolute;
  left:-24%;
  right:-24%;
  bottom:14%;
  height:70%;
  background:
    linear-gradient(140deg,transparent 0 40%,#f8fbff 41% 46%,color-mix(in srgb,var(--panel) 54%,white) 47% 68%,transparent 69%) 0 100%/210px 150px repeat-x;
  animation:cwDrift 28s linear infinite;
}
.cw-scene::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:42%;
  height:78%;
  translate:-50% 0;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.68) 0 4px,transparent 5px 22px),
    linear-gradient(180deg,color-mix(in srgb,var(--glow) 42%,transparent),rgba(72,45,20,.28));
  clip-path:polygon(45% 0,55% 0,88% 100%,12% 100%);
}
.cw-cloud{z-index:1;animation-duration:34s !important}
.cw-peak{z-index:1;bottom:8%;height:74%;width:60%}
.cw-yogi{
  z-index:3 !important;
  left:calc(8% + var(--cw-progress,0%) * .78) !important;
  bottom:13% !important;
  top:auto !important;
  width:52px;
  height:52px;
  animation:cwYogiClimb 2.3s ease-in-out infinite;
}
#cw-board{
  align-self:center;
  justify-self:center;
  width:min(94vw,430px);
  max-height:100%;
  margin:0 !important;
  padding:8px;
  gap:5px;
  border-radius:20px;
  background:rgba(255,255,255,.11) !important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));
}
.cw-cell.play{
  border-radius:10px;
  color:#101827;
  background:linear-gradient(180deg,var(--tile),var(--tile2));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 4px 0 rgba(45,35,25,.22);
  transform:none !important;
  font-size:clamp(15px,5vw,28px);
}
.cw-cell.active{background:linear-gradient(180deg,#fff8b8,var(--glow));box-shadow:0 4px 0 rgba(125,80,18,.32),0 0 20px color-mix(in srgb,var(--glow) 56%,transparent)}
.cw-cell.done{background:linear-gradient(180deg,#e6ffdb,#75e99d)}
.cw-active{
  padding:11px 12px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 88%,white),var(--panel)) !important;
  box-shadow:0 5px 0 rgba(0,0,0,.18);
}
#cw-clue{font-size:clamp(15px,4vw,18px);line-height:1.22;color:#fff}
#cw-entry{gap:5px;min-height:38px}
#cw-entry span{width:min(34px,8vw);height:36px;border-radius:8px;font-size:20px}
#cw-clues{gap:7px}
.cw-clue-btn{
  flex:0 0 86%;
  padding:10px 12px;
  border-radius:13px;
  background:#f8fbff !important;
  color:#162338;
  font-size:13px;
  line-height:1.18;
}
.cw-clue-btn.active{background:linear-gradient(180deg,#fff8b8,var(--glow)) !important}
#cw-letters{grid-template-columns:repeat(auto-fit,minmax(38px,1fr));gap:6px}
.cw-letter{height:44px;border-radius:12px;font-size:21px}
.cw-actions{gap:6px}
.cw-actions .btn{min-width:0;padding:10px 4px;font-size:12px;border-radius:12px}
@media (min-width:720px){
  #screen-home{justify-content:center;padding:64px}
  #screen-home .game-card{min-height:190px}
  .cw-clue-btn{flex-basis:48%}
}
@media (max-height:690px){
  .cw-screen.active{grid-template-rows:auto minmax(104px,21dvh) minmax(142px,1fr) auto auto auto !important}
  .cw-scene{min-height:104px}
  #cw-entry span{height:30px;font-size:17px}
  .cw-letter{height:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- Legacy crossword layer ---------- */
.cw-title-screen{
  background:
    linear-gradient(180deg,rgba(4,9,16,.04),rgba(4,9,16,.78) 58%,#040914),
    url("assets/crossword-caseboard-bg.png") center/cover no-repeat !important;
}
.cw-title-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 74% 18%,rgba(255,232,170,.28),transparent 22%),linear-gradient(90deg,rgba(4,9,16,.42),transparent 52%);
}
.cw-title-art{
  position:relative;
  width:min(54vw,210px);
  aspect-ratio:1.18;
  margin-bottom:4px;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.38));
}
.cw-polaroid,.cw-lens,.cw-note{
  position:absolute;
  display:grid;
  place-items:center;
}
.cw-polaroid{
  inset:8% 22% 10% 0;
  rotate:-8deg;
  border-radius:8px;
  background:linear-gradient(180deg,#f8fbff 0 72%,#d9c7a2 73%);
  box-shadow:0 10px 22px rgba(0,0,0,.32);
}
.cw-polaroid::before{
  content:"";
  position:absolute;
  inset:10px 10px 34%;
  border-radius:5px;
  background:url("assets/crossword-caseboard-bg.png") center/cover no-repeat;
}
.cw-lens{
  right:4%;
  bottom:8%;
  width:44%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#e7fbff 0 10%,#21466f 11% 48%,#050b14 49% 70%,#f6c85f 71%);
  box-shadow:0 10px 24px rgba(0,0,0,.4),inset 0 0 0 6px rgba(255,255,255,.18);
  animation:rb-lens 3.2s ease-in-out infinite;
}
.cw-note{
  right:9%;
  top:8%;
  width:42%;
  height:34%;
  rotate:8deg;
  border-radius:8px;
  background:#f6c85f;
  color:#111827;
  font:900 22px "Cinzel",serif;
  box-shadow:0 8px 18px rgba(0,0,0,.3);
}
@keyframes rb-lens{50%{scale:1.04;filter:saturate(1.2)}}

.cw-screen.active{
  --panel:#111827;
  --paper:#f6efe0;
  --paper2:#d9c7a2;
  --ink:#121826;
  --accent:#f6c85f;
  --danger:#ff7b5f;
  grid-template-rows:auto minmax(128px,22dvh) auto minmax(164px,1fr) auto auto auto auto !important;
  background:
    linear-gradient(180deg,rgba(4,9,16,.2),#040914 70%),
    url("assets/crossword-caseboard-bg.png") center/cover no-repeat !important;
}
.cw-screen.active::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,9,16,.14),rgba(4,9,16,.84) 56%,#040914 100%);
}
.cw-screen.active > *{position:relative;z-index:2}
.cw-hud{
  background:rgba(10,18,31,.82) !important;
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.cw-hud .btn-tiny{
  background:rgba(255,255,255,.12);
  box-shadow:none;
}
#cw-lives{color:#ffd7cc}
#cw-score{color:#ffe3a3}
.cw-scene{
  min-height:128px;
  border-radius:20px;
  background:rgba(8,14,23,.28) !important;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(2px);
}
.cw-scene::before,.cw-scene::after{display:none}
.cw-photo-bg{
  position:absolute;
  inset:0;
  background:url("assets/crossword-caseboard-bg.png") center/cover no-repeat;
  filter:saturate(.95) contrast(1.03);
  transform:scale(1.03);
}
.cw-desk-lamp{
  position:absolute;
  right:8%;
  top:8%;
  width:70px;
  height:70px;
  border-radius:50%;
  background:radial-gradient(circle,#fff8d2 0 20%,rgba(246,200,95,.52) 21% 48%,transparent 70%);
  animation:rb-lamp 2.8s ease-in-out infinite;
}
@keyframes rb-lamp{50%{opacity:.72;scale:1.08}}
.cw-map-lines{
  position:absolute;
  left:8%;
  right:12%;
  bottom:12%;
  height:46%;
  opacity:.66;
  background:
    linear-gradient(28deg,transparent 0 44%,rgba(246,200,95,.8) 45% 47%,transparent 48%),
    linear-gradient(132deg,transparent 0 58%,rgba(66,214,201,.62) 59% 61%,transparent 62%),
    radial-gradient(circle at 24% 68%,#f6c85f 0 4px,transparent 5px),
    radial-gradient(circle at 72% 28%,#42d6c9 0 4px,transparent 5px);
}
.cw-evidence-card{
  position:absolute;
  width:74px;
  height:48px;
  border-radius:7px;
  background:linear-gradient(180deg,#fff7e7,#d9c7a2);
  box-shadow:0 10px 18px rgba(0,0,0,.28);
}
.cw-evidence-card::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:12px;
  height:4px;
  background:#8a6b3e;
  box-shadow:0 10px 0 rgba(138,107,62,.6);
}
.card-a{left:9%;top:15%;rotate:-7deg;animation:rb-float 4s ease-in-out infinite}
.card-b{right:16%;bottom:13%;rotate:5deg;animation:rb-float 4.6s ease-in-out infinite .4s}
.cw-compass{
  position:absolute;
  left:50%;
  bottom:8%;
  width:52px;
  height:52px;
  margin-left:-26px;
  border-radius:50%;
  background:radial-gradient(circle,#f8fbff 0 12%,#f6c85f 13% 48%,#5c4322 49% 62%,transparent 63%);
  box-shadow:0 10px 20px rgba(0,0,0,.32);
}
.cw-compass::before{
  content:"";
  position:absolute;
  inset:12px;
  background:#121826;
  clip-path:polygon(50% 0,62% 50%,50% 100%,38% 50%);
  animation:rb-needle 5s ease-in-out infinite;
}
@keyframes rb-float{50%{translate:0 -5px}}
@keyframes rb-needle{50%{rotate:18deg}}
.cw-lore{
  border-radius:15px;
  padding:9px 12px;
  color:#f8fbff;
  background:rgba(10,18,31,.78);
  border:1px solid rgba(255,255,255,.18);
  font:800 13px/1.25 "Baloo 2",system-ui;
  backdrop-filter:blur(14px);
}
#cw-board{
  padding:9px;
  border-radius:18px;
  background:rgba(10,18,31,.64) !important;
  border:1px solid rgba(255,255,255,.18);
}
.cw-cell.play{
  background:linear-gradient(180deg,var(--paper),var(--paper2));
  color:var(--ink);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 4px 0 rgba(60,45,26,.36),0 8px 14px rgba(0,0,0,.16);
}
.cw-cell.active{
  background:linear-gradient(180deg,#fff8c7,var(--accent));
  box-shadow:0 4px 0 rgba(108,76,24,.42),0 0 22px rgba(246,200,95,.5);
}
.cw-active{
  background:rgba(10,18,31,.84) !important;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(16px);
}
.cw-clue-btn{
  background:linear-gradient(180deg,#f8fbff,#dce7f4) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.16);
}
.cw-clue-btn.active{
  background:linear-gradient(180deg,#fff8c7,var(--accent)) !important;
}
.cw-letter{
  background:linear-gradient(180deg,#fff8c7,var(--accent)) !important;
  color:#111827;
}
@media (max-height:720px){
  .cw-screen.active{grid-template-rows:auto minmax(94px,19dvh) auto minmax(132px,1fr) auto auto auto auto !important}
  .cw-lore{font-size:12px;padding:7px 10px}
}

/* ---------- Cipher Dossier hard rebuild ---------- */
.cw-title-screen{
  background:
    linear-gradient(180deg,rgba(3,7,12,.02),rgba(3,7,12,.56) 46%,#03070c 100%),
    url("assets/crossword-caseboard-bg.png") center/cover no-repeat !important;
}
.cw-title-screen .game-title{
  font-family:"Cinzel","Segoe UI",serif;
  font-size:clamp(48px,13vw,92px);
  line-height:.84;
  text-shadow:0 18px 38px rgba(0,0,0,.55);
}
.cw-title-screen .tagline{
  max-width:520px;
  color:#f4eee5;
  font:900 18px/1.2 "Baloo 2",system-ui;
}
.cw-title-art{
  width:min(50vw,190px);
}
.cw-title-art .cw-polaroid::before{
  background:url("assets/crossword-caseboard-bg.png") center/cover no-repeat;
}

.cw-screen.active{
  --panel:#0b111b;
  --glass:rgba(11,17,27,.76);
  --paper:#f3ead7;
  --paper2:#cdbb96;
  --ink:#111827;
  --accent:#f2bc59;
  --line:rgba(255,255,255,.18);
  display:grid !important;
  grid-template-rows:auto minmax(128px,23dvh) auto minmax(166px,1fr) auto auto auto auto !important;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  gap:8px;
  background:
    linear-gradient(180deg,rgba(3,7,12,.08),rgba(3,7,12,.72) 48%,#03070c 100%),
    url("assets/crossword-caseboard-bg.png") center/cover no-repeat !important;
}
.cw-screen.active::before{
  background:
    radial-gradient(circle at 72% 16%,rgba(242,188,89,.18),transparent 22%),
    linear-gradient(180deg,rgba(3,7,12,.08),rgba(3,7,12,.86) 60%,#03070c 100%);
}
.cw-hud,.cw-lore,.cw-active{
  background:var(--glass) !important;
  border:1px solid var(--line);
  box-shadow:0 14px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(18px);
}
.cw-hud{
  min-height:44px;
  border-radius:14px;
}
.cw-hud b{font:900 14px/1.05 "Cinzel",serif;letter-spacing:.02em}
.cw-hud span{color:#c9d7e8}
#cw-lives,#cw-score{font:900 13px "Baloo 2",system-ui}

.cw-scene{
  min-height:128px;
  border-radius:18px;
  background:rgba(3,7,12,.22) !important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 34px rgba(0,0,0,.34);
}
.cw-photo-bg{
  background:url("assets/crossword-caseboard-bg.png") center/cover no-repeat;
  transform:scale(1.02);
}
.cw-map-lines{
  background:
    linear-gradient(22deg,transparent 0 44%,rgba(242,188,89,.82) 45% 46%,transparent 47%),
    linear-gradient(148deg,transparent 0 55%,rgba(91,202,190,.65) 56% 57%,transparent 58%),
    radial-gradient(circle at 23% 68%,#f2bc59 0 4px,transparent 5px),
    radial-gradient(circle at 70% 22%,#5bcabe 0 4px,transparent 5px);
}
.cw-evidence-card{
  background:linear-gradient(180deg,#fff7e8,#cdbb96);
}
.cw-compass{
  background:radial-gradient(circle,#f8fbff 0 12%,#f2bc59 13% 48%,#4d3518 49% 62%,transparent 63%);
}
.cw-lore{
  border-radius:14px;
  padding:9px 11px;
  color:#f8fbff;
  font:800 13px/1.22 "Baloo 2",system-ui;
}
#cw-board{
  width:min(94vw,420px);
  border-radius:18px;
  padding:8px;
  gap:5px;
  background:rgba(3,7,12,.5) !important;
  border:1px solid rgba(255,255,255,.16);
}
.cw-cell.play{
  border-radius:8px;
  background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 0 rgba(47,36,22,.38);
  color:var(--ink);
  font-family:"Cinzel","Segoe UI",serif;
}
.cw-cell.active{
  background:linear-gradient(180deg,#fff2b8,var(--accent));
}
.cw-cell .cw-num{
  color:#5d4c34;
  font-size:7px;
}
.cw-active{
  border-radius:15px;
  padding:10px 11px;
}
#cw-clue{
  font:900 clamp(15px,4vw,18px)/1.2 "Baloo 2",system-ui;
  color:#fff;
}
#cw-entry span{
  background:linear-gradient(180deg,#f8fbff,#dbe5ef);
  color:#0b111b;
}
.cw-clue-btn{
  flex:0 0 88%;
  background:linear-gradient(180deg,#f8fbff,#d7e0ec) !important;
  color:#111827;
  font:900 13px/1.18 "Baloo 2",system-ui;
}
.cw-clue-btn.active{
  background:linear-gradient(180deg,#fff2b8,var(--accent)) !important;
}
.cw-letter{
  height:43px;
  border-radius:11px;
  background:linear-gradient(180deg,#fff2b8,var(--accent)) !important;
}
.cw-actions .btn{
  background:rgba(11,17,27,.82);
  border-color:rgba(255,255,255,.16);
}
.cw-actions .btn-primary{
  background:linear-gradient(180deg,#f2bc59,#b97824);
  color:#111827;
}
@media (max-height:700px){
  .cw-screen.active{grid-template-rows:auto minmax(92px,18dvh) auto minmax(128px,1fr) auto auto auto auto !important}
  .cw-scene{min-height:92px}
  .cw-lore{font-size:12px;padding:7px 10px}
  .cw-letter{height:37px}
}