@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

:root {
  --bg1:#13002b; --bg2:#081a3a; --panel:rgba(9,12,36,.88); --panel2:rgba(17,20,54,.92);
  --primary:#28f7ff; --secondary:#ff3df2; --accent:#ffe45c; --green:#4dff88; --red:#ff4d6d;
  --text:#fff; --muted:#b9c0ff; --shadow:0 0 36px rgba(40,247,255,.25),0 0 90px rgba(255,61,242,.18);
}

[data-theme="luxury"] { --primary:#d4af37; --secondary:#2ee8ff; --accent:#b08dff; --bg1:#070508; --bg2:#1d1430; }
[data-theme="cyber"] { --primary:#00f5ff; --secondary:#ff2bd6; --accent:#f9ff00; --bg1:#07111f; --bg2:#21002f; }
[data-theme="dungeon"] { --primary:#ffb84d; --secondary:#4dff88; --accent:#ff4d6d; --bg1:#0f0a06; --bg2:#172113; }
[data-theme="kids"] { --primary:#4dff88; --secondary:#ff89f7; --accent:#ffe45c; --bg1:#14234e; --bg2:#381866; }

* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; color:var(--text); font-family:Inter,Segoe UI,Arial,sans-serif; background:linear-gradient(135deg,var(--bg1),var(--bg2)); overflow-x:hidden; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.animated-bg { position:fixed; inset:0; z-index:-3; overflow:hidden; background:
  radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--secondary) 28%, transparent), transparent 28%),
  radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 30%),
  linear-gradient(135deg,var(--bg1),var(--bg2)); }
.stars { position:absolute; inset:0; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:33px 33px; opacity:.18; animation:starDrift 35s linear infinite; }
.grid-floor { position:absolute; left:-10%; right:-10%; bottom:-20%; height:48%; background:
  linear-gradient(to right, color-mix(in srgb, var(--secondary) 34%, transparent) 1px, transparent 1px),
  linear-gradient(to bottom, color-mix(in srgb, var(--primary) 26%, transparent) 1px, transparent 1px);
  background-size:70px 70px; transform:perspective(520px) rotateX(62deg); transform-origin:bottom; animation:gridMove 4s linear infinite; opacity:.55; }
.sun-disc { position:absolute; width:290px; height:145px; left:50%; bottom:42%; transform:translateX(-50%); border-radius:290px 290px 0 0; background:linear-gradient(#ff7b4d,#ff3df2); opacity:.72; box-shadow:0 0 55px color-mix(in srgb, var(--secondary) 55%, transparent); mask:repeating-linear-gradient(to bottom,#000 0 9px,transparent 9px 17px); }
.app-shell { width:min(1450px,calc(100% - 32px)); margin:0 auto; padding:34px 0 80px; position:relative; z-index:2; }
.panel,.hero,.game-card,.loading-card,.modal-card { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:2px solid color-mix(in srgb,var(--primary) 75%,transparent); border-radius:28px; box-shadow:var(--shadow); padding:28px; position:relative; overflow:hidden; }
.panel::before,.hero::before,.game-card::before,.loading-card::before,.modal-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035),rgba(255,255,255,.035) 1px,transparent 1px,transparent 6px); }
.panel>*,.hero>*,.game-card>*,.loading-card>*,.modal-card>* { position:relative; }
.hero,.loading-card { text-align:center; }
.logo { margin:10px auto 20px; max-width:780px; }
.logo .retro { display:block; font-size:clamp(28px,6vw,70px); font-weight:900; letter-spacing:.08em; color:var(--primary); text-shadow:0 0 18px var(--primary), 4px 4px 0 #000; }
.logo .word { display:block; font-size:clamp(48px,9vw,118px); font-weight:900; line-height:.85; color:#fff; text-shadow:0 0 18px var(--secondary), 6px 6px 0 #000; }
.logo .premium { display:inline-block; margin-top:10px; color:var(--accent); font-weight:900; letter-spacing:.18em; text-shadow:0 0 14px var(--accent); }
.arcade-label { display:inline-block; font-family:Consolas,monospace; color:var(--accent); letter-spacing:.18em; font-weight:900; text-shadow:0 0 12px var(--accent); text-transform:uppercase; }
h1 { font-size:clamp(34px,6vw,76px); line-height:.95; margin:0 0 16px; font-weight:900; text-transform:uppercase; text-shadow:4px 4px 0 #000,0 0 28px color-mix(in srgb,var(--secondary) 70%,transparent); }
h2,h3 { margin-top:0; }
.muted { color:var(--muted); }
.start-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:22px; align-items:start; }
.controls-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.field { display:grid; gap:8px; text-align:left; }
label { color:var(--primary); text-transform:uppercase; font-weight:900; font-size:13px; letter-spacing:.08em; }
input,select,textarea { width:100%; border:2px solid rgba(255,255,255,.18); border-radius:16px; padding:14px 15px; background:rgba(0,0,0,.34); color:#fff; outline:none; }
textarea { min-height:110px; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent); }
.btn,.tile-btn,.mini-btn { border:0; color:#07102a; font-weight:900; text-transform:uppercase; border-radius:16px; padding:14px 18px; background:linear-gradient(135deg,var(--primary),var(--green)); box-shadow:0 7px 0 rgba(0,0,0,.55),0 0 18px rgba(255,255,255,.14); transition:.13s transform,.13s box-shadow,.13s filter; }
.btn:hover,.tile-btn:hover,.mini-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.btn:active,.tile-btn:active,.mini-btn:active { transform:translateY(4px); box-shadow:0 3px 0 rgba(0,0,0,.55); }
.btn.secondary { background:linear-gradient(135deg,var(--accent),#ffb84d); }
.btn.pink { background:linear-gradient(135deg,var(--secondary),#b08dff); color:white; }
.btn.danger,.mini-btn.danger { background:linear-gradient(135deg,var(--red),#ff89a0); }
.button-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:18px; }
.score-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.score-list li { display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; padding:13px; border:1px solid rgba(255,255,255,.13); border-radius:16px; background:rgba(255,255,255,.07); }
.badge { display:inline-grid; place-items:center; min-width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.08); color:var(--accent); font-weight:900; }
.top-hud { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.hud-box { background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:14px; text-align:center; }
.hud-box span { display:block; color:var(--primary); font-size:12px; text-transform:uppercase; font-weight:900; letter-spacing:.08em; }
.score-digits { font-family:Consolas,monospace; color:var(--accent); font-size:28px; text-shadow:0 0 14px var(--accent); }
.lives { display:flex; gap:6px; justify-content:center; font-size:30px; }
.heart { color:var(--red); text-shadow:0 0 12px var(--red); display:inline-block; }
.heart.lost { color:#777b99; filter:grayscale(1); opacity:.45; animation:heartBreak .55s ease both; }
.description-card { text-align:center; margin:16px auto; max-width:820px; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(0,0,0,.28); padding:18px; }
.description-card strong { color:var(--accent); text-transform:uppercase; }
.word-slots { display:flex; justify-content:center; gap:8px; flex-wrap:nowrap; margin:22px auto; overflow:hidden; max-width:100%; }
.slot { width:54px; height:62px; display:grid; place-items:center; border:2px solid color-mix(in srgb,var(--primary) 50%,transparent); border-radius:12px; background:rgba(0,0,0,.36); box-shadow:inset 0 0 14px rgba(40,247,255,.12),0 0 16px rgba(40,247,255,.12); font-family:Consolas,monospace; font-size:32px; font-weight:900; color:#fff; }
.slot.hidden { color:rgba(255,255,255,.42); }
.slot.revealed { border-color:var(--primary); text-shadow:0 0 12px var(--primary); }
.slot.new { animation:slotFlip .55s cubic-bezier(.2,1,.2,1.2) both; background:color-mix(in srgb,var(--primary) 20%,rgba(0,0,0,.36)); }
.slot.failed { border-color:var(--red); color:var(--accent); }
.risk-meter { max-width:720px; margin:0 auto 18px; padding:12px 14px; border-radius:16px; background:linear-gradient(90deg,rgba(255,61,242,.18),rgba(40,247,255,.12)); border:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.risk-meter b { color:var(--accent); }
.letters { display:grid; grid-template-columns:repeat(13,minmax(42px,1fr)); gap:8px; margin:22px auto; max-width:1100px; }
.tile-btn { min-height:48px; padding:10px 0; background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 76%,white),var(--primary)); }
.tile-btn.correct { background:linear-gradient(135deg,var(--green),var(--primary)); color:#07102a; }
.tile-btn.wrong { background:#34384f; color:#999; box-shadow:none; }
.tile-btn:disabled { cursor:not-allowed; transform:none; }
.solve-row { display:grid; grid-template-columns:1fr auto; gap:12px; max-width:760px; margin:0 auto; }
.bonus-pop { position:fixed; left:50%; top:28%; transform:translate(-50%,-50%); z-index:50; padding:18px 22px; border-radius:18px; border:1px solid var(--accent); background:rgba(7,10,32,.9); color:var(--accent); font-size:28px; font-weight:900; text-shadow:0 0 14px var(--accent); animation:bonusPop 1.05s ease both; pointer-events:none; }
.result-card { text-align:center; min-height:560px; display:grid; align-content:center; gap:18px; }
.revealed-word { font-family:Consolas,monospace; font-size:clamp(28px,5vw,74px); color:var(--accent); text-shadow:0 0 18px var(--accent),5px 5px 0 #000; white-space:nowrap; overflow:hidden; }
.score-pop { width:150px; height:150px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--green)); color:#07102a; font-weight:900; font-size:40px; box-shadow:0 10px 0 rgba(0,0,0,.48),0 0 28px color-mix(in srgb,var(--green) 55%,transparent); animation:scorePop .8s cubic-bezier(.2,1.1,.25,1.35) both; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.stat { padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); }
.stat span { display:block; color:var(--muted); text-transform:uppercase; font-size:12px; }
.stat strong { font-size:24px; color:#fff; }
.modal { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.68); display:grid; place-items:start center; overflow:auto; padding:32px 16px; }
.modal-card { width:min(1250px,100%); }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.admin-list { max-height:420px; overflow:auto; display:grid; gap:8px; padding-right:8px; }
.admin-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:10px; border-radius:14px; background:rgba(255,255,255,.07); }
.admin-word { grid-template-columns:160px 1fr 110px 100px auto; }
.mini-btn { padding:8px 10px; border-radius:11px; font-size:12px; }
.sound-toggle { position:fixed; right:12px; top:max(12px,env(safe-area-inset-top)); z-index:90; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(7,10,32,.78); color:var(--primary); padding:9px 12px; font-weight:900; backdrop-filter:blur(10px); }
.install-tip { position:fixed; z-index:100; left:14px; right:14px; bottom:max(14px,env(safe-area-inset-bottom)); padding:14px 48px 14px 16px; background:rgba(7,10,32,.94); border:1px solid var(--primary); border-radius:18px; box-shadow:var(--shadow); }
.install-tip strong{color:var(--primary)} .install-tip em{color:var(--accent);font-style:normal;font-weight:900}.install-tip button{position:absolute;right:10px;top:8px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;width:30px;height:30px}
@keyframes starDrift{to{background-position:180px 240px}} @keyframes gridMove{to{background-position:0 70px}} @keyframes slotFlip{0%{transform:rotateX(90deg) scale(.8);opacity:.2}65%{transform:rotateX(-12deg) scale(1.08);opacity:1}100%{transform:rotateX(0) scale(1)}} @keyframes heartBreak{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(.9);opacity:.45}} @keyframes bonusPop{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}} @keyframes scorePop{0%{transform:scale(.2) rotate(-18deg);opacity:0}65%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@media(max-width:900px){.app-shell{width:calc(100% - 18px);padding:18px 0 90px}.start-grid,.controls-grid,.top-hud,.admin-grid,.solve-row{grid-template-columns:1fr}.hero,.panel,.game-card,.modal-card{padding:20px 14px;border-radius:22px}.letters{grid-template-columns:repeat(7,1fr)}.slot{width:34px;height:44px;font-size:24px;border-radius:9px}.word-slots{gap:4px}.stats-grid{grid-template-columns:repeat(2,1fr)}.sun-disc{width:210px;height:105px}.admin-row,.admin-word{grid-template-columns:1fr}.revealed-word{font-size:clamp(20px,8vw,44px)}}
@media(max-width:520px){.stats-grid{grid-template-columns:1fr}.score-pop{width:120px;height:120px;font-size:32px}.logo .word{font-size:clamp(44px,14vw,78px)}}


/* Premium Graphics Pass v2
   This layer pushes the real game closer to the richer concept-art direction:
   deeper neon glass panels, layered glows, stronger title treatment, luxury score cards,
   and a more dimensional arcade console feeling.
*/

body {
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 20%),
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--secondary) 24%, transparent), transparent 24%),
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 22%),
    linear-gradient(145deg, var(--bg1), var(--bg2));
}

.animated-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 180deg at 50% 50%,
      transparent,
      color-mix(in srgb, var(--secondary) 14%, transparent),
      transparent,
      color-mix(in srgb, var(--primary) 16%, transparent),
      transparent);
  filter: blur(60px);
  opacity: .8;
  animation: auroraSpin 26s linear infinite;
}

.animated-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.035),
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 5px);
  opacity: .26;
  mix-blend-mode: screen;
}

.sun-disc {
  filter: drop-shadow(0 0 35px color-mix(in srgb, var(--secondary) 70%, transparent));
  opacity: .92;
}

.grid-floor {
  opacity: .75;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--primary) 45%, transparent));
}

.app-shell {
  padding-top: 28px;
}

.hero,
.game-card,
.panel,
.loading-card,
.modal-card {
  border: 1px solid color-mix(in srgb, var(--primary) 72%, white 10%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), transparent 25%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel2) 88%, #ffffff 3%), color-mix(in srgb, var(--panel) 92%, #000000 8%));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 34px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 78px color-mix(in srgb, var(--secondary) 15%, transparent),
    0 22px 70px rgba(0,0,0,.48);
}

.hero::after,
.game-card::after,
.panel::after,
.modal-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 21px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.hero {
  padding: 34px;
}

.logo {
  position: relative;
  isolation: isolate;
  padding: 18px 20px 14px;
  border-radius: 34px;
  width: min(880px, 100%);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 10%, transparent), transparent);
}

.logo::before {
  content: "";
  position: absolute;
  inset: 4px 8%;
  z-index: -1;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--primary) 35%, transparent),
      color-mix(in srgb, var(--secondary) 35%, transparent),
      transparent);
  filter: blur(24px);
  opacity: .95;
}

.logo::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px var(--accent);
}

.logo .retro {
  font-size: clamp(30px, 5vw, 62px);
  color: transparent;
  background: linear-gradient(180deg, #ffffff, var(--primary) 45%, #0cf);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 18px color-mix(in srgb, var(--primary) 75%, transparent),
    3px 3px 0 #000;
}

.logo .word {
  font-size: clamp(58px, 10vw, 132px);
  letter-spacing: .015em;
  color: transparent;
  background:
    linear-gradient(180deg, #fff 0%, #e9faff 30%, var(--primary) 52%, var(--secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--secondary) 75%, transparent));
  text-shadow:
    5px 5px 0 #02030c,
    0 0 8px rgba(255,255,255,.5);
}

.logo .premium {
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(255,255,255,.08), color-mix(in srgb, var(--secondary) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 36%, transparent);
}

.start-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 26px;
}

.panel h2 {
  font-size: clamp(26px, 3vw, 42px);
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 55%, transparent);
}

.controls-grid {
  gap: 16px;
}

.field {
  position: relative;
}

.field label {
  margin-left: 6px;
}

input,
select,
textarea {
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(0,0,0,.34));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 -14px 24px rgba(0,0,0,.18);
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

.btn,
.tile-btn,
.mini-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 7px 0 rgba(0,0,0,.55),
    0 0 20px color-mix(in srgb, var(--primary) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.btn::before,
.tile-btn::before,
.mini-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transition: transform .55s ease;
}

.btn:hover::before,
.tile-btn:hover::before,
.mini-btn:hover::before {
  transform: translateX(120%) skewX(-20deg);
}

.btn.pink {
  background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--primary) 38%, #5d36ff));
}

.btn.secondary {
  background: linear-gradient(135deg, var(--accent), #ff8f4d);
}

.score-list li {
  position: relative;
  grid-template-columns: 52px 1fr auto;
  padding: 16px 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, rgba(255,255,255,.14));
  background:
    linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
    radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.035),
    0 9px 20px rgba(0,0,0,.24);
}

.score-list li::after {
  content: "";
  position: absolute;
  left: 52px;
  right: 12px;
  bottom: 7px;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: .35;
}

.badge {
  background:
    radial-gradient(circle at 35% 25%, #fff, var(--accent) 28%, #9b5b00 75%);
  color: #07102a;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.top-hud {
  gap: 14px;
}

.hud-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(0,0,0,.24)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 45%);
  border: 1px solid color-mix(in srgb, var(--primary) 34%, rgba(255,255,255,.12));
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.035),
    0 12px 28px rgba(0,0,0,.22);
}

.score-digits {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}

.description-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(0,0,0,.28)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--secondary) 15%, transparent), transparent 45%);
  border: 1px solid color-mix(in srgb, var(--secondary) 28%, rgba(255,255,255,.12));
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.035),
    0 0 22px color-mix(in srgb, var(--secondary) 12%, transparent);
}

.word-slots {
  padding: 18px 8px;
  border-radius: 22px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
}

.slot {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.38)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 55%);
  border: 1px solid color-mix(in srgb, var(--primary) 52%, rgba(255,255,255,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -12px 20px rgba(0,0,0,.24),
    0 0 18px color-mix(in srgb, var(--primary) 18%, transparent),
    0 10px 22px rgba(0,0,0,.25);
}

.slot.revealed {
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 35%, rgba(255,255,255,.08)), rgba(0,0,0,.25));
}

.risk-meter {
  border: 1px solid color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,.12));
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--secondary) 18%, rgba(0,0,0,.18)),
      color-mix(in srgb, var(--primary) 14%, rgba(0,0,0,.22)),
      color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,.20)));
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.035),
    0 0 26px color-mix(in srgb, var(--accent) 10%, transparent);
}

.letters {
  padding: 14px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 22px rgba(255,255,255,.025);
}

.tile-btn {
  border-radius: 14px;
  min-height: 54px;
  font-size: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.28), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--secondary) 88%, #fff 8%), color-mix(in srgb, var(--primary) 86%, #fff 5%));
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

.tile-btn.correct {
  color: #06121b;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.45), transparent 38%),
    linear-gradient(135deg, var(--green), var(--primary));
}

.tile-btn.wrong {
  background:
    linear-gradient(135deg, #34384f, #23263a);
  color: #a8abc8;
  border-color: rgba(255,255,255,.08);
}

.result-card {
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 36%),
    linear-gradient(180deg, var(--panel2), var(--panel));
}

.revealed-word {
  color: transparent;
  background: linear-gradient(180deg, #fff, var(--accent), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 72%, transparent));
}

.score-pop {
  border: 4px solid rgba(255,255,255,.22);
  box-shadow:
    0 10px 0 rgba(0,0,0,.48),
    0 0 28px color-mix(in srgb,var(--green) 55%,transparent),
    inset 0 2px 0 rgba(255,255,255,.5);
}

.stats-grid .stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, rgba(255,255,255,.12));
  box-shadow: inset 0 0 18px rgba(255,255,255,.025);
}

.sound-toggle {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.38));
  border-color: color-mix(in srgb, var(--primary) 48%, rgba(255,255,255,.2));
}

@keyframes auroraSpin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.12); }
  to { transform: rotate(360deg) scale(1); }
}

@media(max-width:900px){
  .start-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 24px 14px;
  }

  .logo {
    padding: 10px 8px 12px;
  }

  .tile-btn {
    min-height: 48px;
  }
}


/* Premium v3 feature clarity and definition reveal */

.feature-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px auto 24px;
}

.feature-ribbon span,
.mini-info-grid div,
.definition-reveal {
  border: 1px solid color-mix(in srgb, var(--primary) 24%, rgba(255,255,255,.12));
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(0,0,0,.22)),
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--secondary) 12%, transparent), transparent 38%);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.025),
    0 10px 22px rgba(0,0,0,.18);
}

.feature-ribbon span {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
}

.feature-ribbon b {
  display: block;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.mini-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.mini-info-grid div {
  padding: 11px;
  text-align: left;
}

.mini-info-grid strong {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 13px;
}

.mini-info-grid span {
  color: var(--muted);
  font-size: 12px;
}

.definition-reveal {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 18px 20px;
}

.definition-reveal strong {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
}

.definition-reveal p {
  margin: 8px 0 6px;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.35;
}

.definition-reveal small {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.notice {
  text-align: center;
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 6px auto 12px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
}

@media(max-width:900px) {
  .feature-ribbon,
  .mini-info-grid {
    grid-template-columns: 1fr;
  }
}


/* Premium v5 dropdown readability fix */

html {
  color-scheme: dark;
}

select {
  color: #ffffff;
  background-color: #070a20;
  appearance: auto;
}

select option,
select optgroup {
  color: #ffffff;
  background-color: #070a20;
}

select option:checked,
select option:hover,
select option:focus {
  color: #07102a;
  background-color: var(--accent);
}

input,
textarea {
  color: #ffffff;
}

::placeholder {
  color: rgba(255,255,255,.55);
}


/* Premium v6 hearts and hangman animation */

.lives {
  gap: 9px;
  font-size: 44px;
  line-height: 1;
  align-items: center;
}

.heart {
  transform-origin: center;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--red) 78%, transparent));
}

.heart.lost {
  filter: grayscale(1) drop-shadow(0 0 5px rgba(255,255,255,.18));
}

.hangman-stage {
  width: min(520px, 100%);
  margin: 18px auto 6px;
  padding: 15px 16px 12px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, rgba(255,255,255,.12));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--secondary) 14%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.035),
    0 0 28px color-mix(in srgb, var(--primary) 13%, transparent),
    0 14px 34px rgba(0,0,0,.22);
}

.hangman-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hangman-title span {
  color: var(--primary);
  font-weight: 900;
}

.hangman-title strong {
  color: var(--accent);
  font-weight: 900;
}

.hangman-svg {
  display: block;
  width: 100%;
  height: 220px;
  overflow: visible;
}

.gallows {
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 75%, #ffffff 15%);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#rwqGlow);
  opacity: .9;
}

.gallows.rope,
.gallows.noose {
  stroke: var(--accent);
  stroke-width: 5;
  opacity: .95;
}

.body-part {
  fill: none;
  stroke: var(--red);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#rwqGlow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.body-part.head {
  fill: rgba(255,77,109,.08);
}

.body-part.shown {
  opacity: 1;
  animation: hangmanDraw .42s cubic-bezier(.18,1.25,.32,1) both;
}

.hangman-count {
  font-family: Consolas, monospace;
  font-size: 18px;
  font-weight: 900;
  fill: var(--accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 80%, transparent));
}

@keyframes hangmanDraw {
  0% {
    opacity: 0;
    transform: scale(.5) rotate(-8deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.08) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@media(max-width:900px) {
  .lives {
    font-size: 34px;
    gap: 5px;
  }

  .hangman-stage {
    padding: 12px;
  }

  .hangman-svg {
    height: 175px;
  }
}

@media(max-width:520px) {
  .lives {
    font-size: 30px;
  }

  .hangman-title {
    flex-direction: column;
    gap: 3px;
  }
}


/* Premium v7 hearts-only life display */

.hangman-stage {
  display: none !important;
}

.lives {
  gap: 10px;
  font-size: 50px;
  line-height: 1;
  align-items: center;
}

.heart {
  display: inline-block;
  color: var(--red);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--red) 90%, transparent),
    0 0 22px color-mix(in srgb, var(--red) 55%, transparent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--red) 72%, transparent));
}

.heart.lost {
  color: #69708f;
  opacity: .55;
  text-shadow: none;
  filter: grayscale(1) drop-shadow(0 0 5px rgba(255,255,255,.18));
}

@media(max-width:900px) {
  .lives {
    font-size: 42px;
    gap: 7px;
  }
}

@media(max-width:520px) {
  .lives {
    font-size: 36px;
    gap: 4px;
  }
}


/* Premium v8 definitive large-hearts fix
   The HUD label rule `.hud-box span` was shrinking heart spans.
   These rules specifically override that. */

.hud-box .lives {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin-top: 2px;
}

.hud-box .lives .heart,
.lives span.heart {
  display: inline-block !important;
  font-size: 48px !important;
  line-height: 1 !important;
  color: var(--red) !important;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--red) 90%, transparent),
    0 0 24px color-mix(in srgb, var(--red) 60%, transparent) !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--red) 75%, transparent));
}

.hud-box .lives .heart.lost,
.lives span.heart.lost {
  color: #69708f !important;
  opacity: .5 !important;
  text-shadow: none !important;
  filter: grayscale(1) drop-shadow(0 0 5px rgba(255,255,255,.18));
}

@media(max-width:900px) {
  .hud-box .lives .heart,
  .lives span.heart {
    font-size: 40px !important;
  }

  .hud-box .lives {
    gap: 7px;
    min-height: 48px;
  }
}

@media(max-width:520px) {
  .hud-box .lives .heart,
  .lives span.heart {
    font-size: 34px !important;
  }

  .hud-box .lives {
    gap: 4px;
    min-height: 42px;
  }
}


/* Premium v10 original fun themes
   These are safe original arcade-inspired themes, not branded/copyrighted copies. */

[data-theme="platformer"] {
  --primary:#42e6ff;
  --secondary:#ff4d4d;
  --accent:#ffe45c;
  --green:#55ff7a;
  --red:#ff4d4d;
  --bg1:#113d8f;
  --bg2:#5b1a7d;
}

[data-theme="platformer"] .animated-bg {
  background:
    radial-gradient(circle at 22% 18%, rgba(255,228,92,.34), transparent 12%),
    linear-gradient(180deg, #1d77cf 0%, #5a40b9 48%, #201035 100%);
}

[data-theme="platformer"] .animated-bg::before {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.08) 8% 10%, transparent 10% 20%),
    radial-gradient(circle at 18% 80%, rgba(82,255,101,.25), transparent 14%),
    radial-gradient(circle at 78% 72%, rgba(255,77,77,.22), transparent 16%);
  filter: blur(18px);
}

[data-theme="platformer"] .grid-floor {
  background:
    linear-gradient(to right, rgba(255,228,92,.36) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(66,230,255,.28) 1px, transparent 1px);
}

[data-theme="speeddash"] {
  --primary:#1e9bff;
  --secondary:#ffffff;
  --accent:#ffd447;
  --green:#4dff88;
  --red:#ff4d6d;
  --bg1:#001b5c;
  --bg2:#042b88;
}

[data-theme="speeddash"] .animated-bg {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 8px, transparent 8px 28px),
    radial-gradient(circle at 70% 18%, rgba(255,212,71,.28), transparent 16%),
    linear-gradient(135deg, #001348, #0057c9 48%, #0a1028);
}

[data-theme="speeddash"] .grid-floor {
  transform: perspective(520px) rotateX(62deg) skewX(-8deg);
  animation-duration: 1.6s;
}

[data-theme="speeddash"] .btn,
[data-theme="speeddash"] .tile-btn {
  border-radius: 999px;
}

[data-theme="candypop"] {
  --primary:#74ffb2;
  --secondary:#ff8ff3;
  --accent:#fff06a;
  --green:#74ffb2;
  --red:#ff6fae;
  --bg1:#3d2077;
  --bg2:#117bd3;
}

[data-theme="candypop"] .animated-bg {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,143,243,.38), transparent 12%),
    radial-gradient(circle at 85% 25%, rgba(255,240,106,.34), transparent 14%),
    radial-gradient(circle at 45% 72%, rgba(116,255,178,.28), transparent 18%),
    linear-gradient(135deg, #37206f, #0e8ac8);
}

[data-theme="candypop"] .panel,
[data-theme="candypop"] .hero,
[data-theme="candypop"] .game-card {
  border-radius: 34px;
}

[data-theme="candypop"] .btn,
[data-theme="candypop"] .tile-btn,
[data-theme="candypop"] input,
[data-theme="candypop"] select {
  border-radius: 22px;
}

[data-theme="jungle"] {
  --primary:#52ff65;
  --secondary:#ffb84d;
  --accent:#ffe45c;
  --green:#52ff65;
  --red:#ff5e4d;
  --bg1:#052915;
  --bg2:#173d1f;
}

[data-theme="jungle"] .animated-bg {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,228,92,.2), transparent 12%),
    radial-gradient(circle at 78% 20%, rgba(82,255,101,.25), transparent 16%),
    linear-gradient(160deg, #031d10, #0b4a24 55%, #2b1e11);
}

[data-theme="jungle"] .animated-bg::before {
  background:
    repeating-linear-gradient(120deg, rgba(82,255,101,.1) 0 4px, transparent 4px 22px),
    repeating-linear-gradient(60deg, rgba(255,184,77,.08) 0 3px, transparent 3px 24px);
  filter: blur(10px);
}

[data-theme="jungle"] .grid-floor {
  opacity: .34;
  background:
    linear-gradient(to right, rgba(82,255,101,.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,184,77,.18) 1px, transparent 1px);
}

[data-theme="space"] {
  --primary:#7df9ff;
  --secondary:#a46bff;
  --accent:#ffea70;
  --green:#5effc8;
  --red:#ff4d9d;
  --bg1:#02061f;
  --bg2:#17002f;
}

[data-theme="space"] .animated-bg {
  background:
    radial-gradient(circle at 70% 20%, rgba(164,107,255,.28), transparent 16%),
    radial-gradient(circle at 30% 28%, rgba(125,249,255,.18), transparent 12%),
    linear-gradient(135deg, #02061f, #17002f 60%, #050817);
}

[data-theme="space"] .stars {
  opacity: .38;
  background-size: 22px 22px;
}

[data-theme="space"] .sun-disc {
  background: linear-gradient(#7df9ff, #a46bff);
  opacity: .55;
}

[data-theme="space"] .slot,
[data-theme="space"] .tile-btn {
  clip-path: polygon(8% 0, 92% 0, 100% 18%, 100% 82%, 92% 100%, 8% 100%, 0 82%, 0 18%);
}


/* Premium v11 Overground Platformer theme
   Original bright platform-game style: sky, clouds, grassy ground and blocks.
   No protected characters, names, logos, pipes, mushrooms, or copied artwork. */

[data-theme="overground"] {
  --primary:#38c7ff;
  --secondary:#ff7a3d;
  --accent:#ffe45c;
  --green:#58dd53;
  --red:#ff4d4d;
  --bg1:#63c9ff;
  --bg2:#2477d6;
  --panel:rgba(16, 42, 87, .88);
  --panel2:rgba(31, 81, 150, .9);
  --muted:#d7ecff;
}

[data-theme="overground"] .animated-bg {
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.95) 0 30px, transparent 31px),
    radial-gradient(circle at 16% 15%, rgba(255,255,255,.95) 0 36px, transparent 37px),
    radial-gradient(circle at 20% 17%, rgba(255,255,255,.95) 0 28px, transparent 29px),
    radial-gradient(circle at 76% 14%, rgba(255,255,255,.92) 0 34px, transparent 35px),
    radial-gradient(circle at 81% 13%, rgba(255,255,255,.92) 0 42px, transparent 43px),
    radial-gradient(circle at 87% 15%, rgba(255,255,255,.92) 0 30px, transparent 31px),
    linear-gradient(180deg, #62cfff 0%, #2f9cff 48%, #194faf 100%);
}

[data-theme="overground"] .animated-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .95;
  filter: none;
  animation: none;
  background:
    /* floating block rows */
    linear-gradient(90deg, transparent 0 22%, #b66b32 22% 28%, transparent 28% 42%, #b66b32 42% 48%, transparent 48% 100%) 0 24% / 100% 70px no-repeat,
    linear-gradient(90deg, transparent 0 58%, #b66b32 58% 64%, transparent 64% 72%, #b66b32 72% 78%, transparent 78% 100%) 0 38% / 100% 70px no-repeat,
    /* hills */
    radial-gradient(ellipse at 20% 100%, #58dd53 0 115px, transparent 116px),
    radial-gradient(ellipse at 38% 100%, #47b942 0 85px, transparent 86px),
    radial-gradient(ellipse at 72% 100%, #58dd53 0 135px, transparent 136px),
    radial-gradient(ellipse at 88% 100%, #47b942 0 90px, transparent 91px),
    /* grass strip */
    linear-gradient(to top, #21701f 0 70px, #58dd53 70px 92px, transparent 93px);
}

[data-theme="overground"] .animated-bg::after {
  background:
    repeating-linear-gradient(to right,
      rgba(255,255,255,.09) 0 1px,
      transparent 1px 32px),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.07) 0 1px,
      transparent 1px 32px);
  opacity: .18;
}

[data-theme="overground"] .sun-disc {
  display: none;
}

[data-theme="overground"] .stars {
  display: none;
}

[data-theme="overground"] .grid-floor {
  bottom: 0;
  height: 22%;
  opacity: .65;
  transform: none;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 42px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 42px),
    linear-gradient(#58dd53, #21701f);
  animation: none;
}

[data-theme="overground"] .hero,
[data-theme="overground"] .game-card,
[data-theme="overground"] .panel,
[data-theme="overground"] .modal-card {
  border: 3px solid #ffe45c;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(4,29,74,.86)),
    linear-gradient(135deg, rgba(56,199,255,.16), rgba(255,122,61,.12));
  box-shadow:
    0 8px 0 rgba(0,0,0,.45),
    0 0 0 2px rgba(255,255,255,.16) inset,
    0 0 32px rgba(255,228,92,.28);
}

[data-theme="overground"] .logo .word {
  background: linear-gradient(180deg, #ffffff, #ffe45c 45%, #ff7a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(255,228,92,.8));
}

[data-theme="overground"] .logo .retro {
  background: linear-gradient(180deg, #ffffff, #38c7ff);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="overground"] .slot,
[data-theme="overground"] .tile-btn {
  border-radius: 8px;
  border: 2px solid rgba(90,45,15,.55);
  box-shadow:
    0 5px 0 rgba(70,32,12,.75),
    0 0 12px rgba(255,228,92,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
}

[data-theme="overground"] .tile-btn {
  color: #3d1d0b;
  background:
    linear-gradient(180deg, #fff3a3, #ffb950 48%, #c76c28);
  text-shadow: none;
}

[data-theme="overground"] .tile-btn.correct {
  background:
    linear-gradient(180deg, #d6ffd1, #58dd53 55%, #1f8a25);
  color: #062707;
}

[data-theme="overground"] .tile-btn.wrong {
  background:
    linear-gradient(180deg, #c9c9c9, #7b7b7b);
  color: #333;
}

[data-theme="overground"] .btn {
  border-radius: 12px;
  color: #3d1d0b;
  background:
    linear-gradient(180deg, #fff7b8, #ffe45c 48%, #ff9c3d);
}

[data-theme="overground"] .btn.pink {
  color: white;
  background:
    linear-gradient(180deg, #ffb199, #ff7a3d 55%, #d84f21);
}

[data-theme="overground"] .btn.secondary {
  color: #062707;
  background:
    linear-gradient(180deg, #c8ffc3, #58dd53 55%, #1f8a25);
}

[data-theme="overground"] .heart {
  color: #ff3b3b !important;
}

[data-theme="overground"] .description-card,
[data-theme="overground"] .risk-meter,
[data-theme="overground"] .definition-reveal {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(7,45,104,.62));
  border-color: rgba(255,228,92,.55);
}

[data-theme="overground"] .score-digits,
[data-theme="overground"] .revealed-word {
  color: #ffe45c;
  filter: drop-shadow(0 0 10px rgba(255,228,92,.72));
}


/* Premium v12 — more distinct themes, especially on mobile */

/* Give each theme stronger UI personality, not just background colour */

[data-theme="luxury"] .hero,
[data-theme="luxury"] .game-card,
[data-theme="luxury"] .panel,
[data-theme="luxury"] .modal-card {
  border-color: #d4af37;
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.16), transparent 34%),
    linear-gradient(180deg, rgba(18,12,26,.94), rgba(4,4,8,.92));
  box-shadow:
    0 0 0 1px rgba(212,175,55,.22) inset,
    0 0 38px rgba(212,175,55,.20),
    0 24px 70px rgba(0,0,0,.58);
}

[data-theme="luxury"] .btn,
[data-theme="luxury"] .tile-btn {
  border-radius: 8px;
  background: linear-gradient(180deg, #ffeaa0, #d4af37 48%, #7d5a10);
  color: #120b05;
}

[data-theme="luxury"] .slot {
  border-radius: 6px;
  border-color: #d4af37;
  background: linear-gradient(180deg, rgba(212,175,55,.20), rgba(0,0,0,.42));
}

[data-theme="cyber"] .hero,
[data-theme="cyber"] .game-card,
[data-theme="cyber"] .panel,
[data-theme="cyber"] .modal-card {
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  border-radius: 0;
  border-color: #00f5ff;
}

[data-theme="cyber"] .btn,
[data-theme="cyber"] .tile-btn,
[data-theme="cyber"] .slot,
[data-theme="cyber"] input,
[data-theme="cyber"] select {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  border-radius: 0;
}

[data-theme="cyber"] .logo .word {
  text-shadow:
    3px 0 0 rgba(255,43,214,.75),
    -3px 0 0 rgba(0,245,255,.75),
    6px 6px 0 #000;
}

[data-theme="dungeon"] .hero,
[data-theme="dungeon"] .game-card,
[data-theme="dungeon"] .panel,
[data-theme="dungeon"] .modal-card {
  border-color: #ffb84d;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, rgba(42,30,21,.95), rgba(15,10,6,.92));
}

[data-theme="dungeon"] .btn,
[data-theme="dungeon"] .tile-btn,
[data-theme="dungeon"] .slot {
  border-radius: 4px;
  border-color: #ffb84d;
  background:
    linear-gradient(180deg, rgba(255,184,77,.26), rgba(34,22,14,.72));
  color: #fff0d4;
}

[data-theme="kids"] .hero,
[data-theme="kids"] .game-card,
[data-theme="kids"] .panel,
[data-theme="kids"] .modal-card,
[data-theme="candypop"] .hero,
[data-theme="candypop"] .game-card,
[data-theme="candypop"] .panel,
[data-theme="candypop"] .modal-card {
  border-radius: 36px;
  border-width: 3px;
}

[data-theme="kids"] .btn,
[data-theme="kids"] .tile-btn,
[data-theme="candypop"] .btn,
[data-theme="candypop"] .tile-btn {
  border-radius: 999px;
  font-weight: 900;
}

[data-theme="kids"] .slot,
[data-theme="candypop"] .slot {
  border-radius: 18px;
}

[data-theme="speeddash"] .hero,
[data-theme="speeddash"] .game-card,
[data-theme="speeddash"] .panel,
[data-theme="speeddash"] .modal-card {
  transform: skewX(-1.5deg);
}

[data-theme="speeddash"] .hero > *,
[data-theme="speeddash"] .game-card > *,
[data-theme="speeddash"] .panel > *,
[data-theme="speeddash"] .modal-card > * {
  transform: skewX(1.5deg);
}

[data-theme="speeddash"] .btn,
[data-theme="speeddash"] .tile-btn {
  box-shadow:
    9px 0 0 rgba(255,212,71,.22),
    0 7px 0 rgba(0,0,0,.55),
    0 0 20px rgba(30,155,255,.30);
}

[data-theme="jungle"] .hero,
[data-theme="jungle"] .game-card,
[data-theme="jungle"] .panel,
[data-theme="jungle"] .modal-card {
  border-color: #52ff65;
  background:
    radial-gradient(circle at 10% 0%, rgba(82,255,101,.16), transparent 38%),
    repeating-linear-gradient(120deg, rgba(82,255,101,.045) 0 8px, transparent 8px 28px),
    linear-gradient(180deg, rgba(7,48,22,.92), rgba(7,24,12,.92));
}

[data-theme="jungle"] .btn,
[data-theme="jungle"] .tile-btn {
  border-radius: 26px 8px 26px 8px;
  background: linear-gradient(180deg, #cfff7a, #52ff65 48%, #157422);
  color: #052915;
}

[data-theme="space"] .hero,
[data-theme="space"] .game-card,
[data-theme="space"] .panel,
[data-theme="space"] .modal-card {
  border-color: #7df9ff;
  background:
    radial-gradient(circle at 50% 0%, rgba(125,249,255,.14), transparent 38%),
    linear-gradient(180deg, rgba(5,8,32,.94), rgba(15,5,40,.93));
}

[data-theme="space"] .score-list li,
[data-theme="space"] .hud-box,
[data-theme="space"] .stat {
  clip-path: polygon(7% 0, 93% 0, 100% 20%, 100% 80%, 93% 100%, 7% 100%, 0 80%, 0 20%);
  border-radius: 0;
}

/* Make Overground Platformer feel like a proper level, not just a recolour */

[data-theme="overground"] .animated-bg {
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.95) 0 30px, transparent 31px),
    radial-gradient(circle at 16% 15%, rgba(255,255,255,.95) 0 36px, transparent 37px),
    radial-gradient(circle at 20% 17%, rgba(255,255,255,.95) 0 28px, transparent 29px),
    radial-gradient(circle at 76% 14%, rgba(255,255,255,.92) 0 34px, transparent 35px),
    radial-gradient(circle at 81% 13%, rgba(255,255,255,.92) 0 42px, transparent 43px),
    radial-gradient(circle at 87% 15%, rgba(255,255,255,.92) 0 30px, transparent 31px),
    linear-gradient(180deg, #62cfff 0%, #2f9cff 45%, #194faf 100%);
}

[data-theme="overground"] .animated-bg::before {
  background:
    /* floating block rows */
    linear-gradient(90deg, transparent 0 16%, #b66b32 16% 23%, transparent 23% 31%, #b66b32 31% 38%, transparent 38% 100%) 0 22% / 100% 64px no-repeat,
    linear-gradient(90deg, transparent 0 58%, #b66b32 58% 65%, transparent 65% 72%, #b66b32 72% 79%, transparent 79% 100%) 0 36% / 100% 64px no-repeat,
    /* visible hills and land */
    radial-gradient(ellipse at 18% 100%, #66e85e 0 160px, transparent 161px),
    radial-gradient(ellipse at 42% 100%, #42b640 0 112px, transparent 113px),
    radial-gradient(ellipse at 73% 100%, #66e85e 0 180px, transparent 181px),
    radial-gradient(ellipse at 90% 100%, #42b640 0 125px, transparent 126px),
    linear-gradient(to top, #155b1d 0 105px, #58dd53 105px 132px, transparent 133px);
}

[data-theme="overground"] .grid-floor {
  height: 130px;
  bottom: 0;
  transform: none;
  opacity: .95;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 40px),
    linear-gradient(#58dd53 0 24px, #247b24 24px 100%);
  animation: none;
}

[data-theme="overground"] .app-shell {
  padding-bottom: 165px;
}

[data-theme="overground"] .hero,
[data-theme="overground"] .game-card,
[data-theme="overground"] .panel,
[data-theme="overground"] .modal-card {
  box-shadow:
    0 8px 0 rgba(86,42,13,.72),
    0 0 0 2px rgba(255,255,255,.16) inset,
    0 0 32px rgba(255,228,92,.28);
}

[data-theme="overground"] .score-list li,
[data-theme="overground"] .hud-box,
[data-theme="overground"] .stat,
[data-theme="overground"] .description-card,
[data-theme="overground"] .risk-meter,
[data-theme="overground"] .definition-reveal {
  border-radius: 12px;
  border: 2px solid #ffe45c;
}

/* Mobile-specific theme improvements */

@media(max-width:900px) {
  .animated-bg::after {
    opacity: .18;
  }

  [data-theme="luxury"] .hero,
  [data-theme="luxury"] .game-card,
  [data-theme="luxury"] .panel {
    border-width: 2px;
  }

  [data-theme="cyber"] .hero,
  [data-theme="cyber"] .game-card,
  [data-theme="cyber"] .panel {
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  }

  [data-theme="speeddash"] .hero,
  [data-theme="speeddash"] .game-card,
  [data-theme="speeddash"] .panel,
  [data-theme="speeddash"] .modal-card {
    transform: none;
  }

  [data-theme="speeddash"] .hero > *,
  [data-theme="speeddash"] .game-card > *,
  [data-theme="speeddash"] .panel > *,
  [data-theme="speeddash"] .modal-card > * {
    transform: none;
  }

  [data-theme="overground"] .animated-bg {
    background:
      radial-gradient(circle at 18% 10%, rgba(255,255,255,.96) 0 22px, transparent 23px),
      radial-gradient(circle at 25% 9%, rgba(255,255,255,.96) 0 28px, transparent 29px),
      radial-gradient(circle at 34% 11%, rgba(255,255,255,.96) 0 20px, transparent 21px),
      radial-gradient(circle at 72% 17%, rgba(255,255,255,.90) 0 23px, transparent 24px),
      radial-gradient(circle at 81% 16%, rgba(255,255,255,.90) 0 31px, transparent 32px),
      radial-gradient(circle at 90% 18%, rgba(255,255,255,.90) 0 21px, transparent 22px),
      linear-gradient(180deg, #6bd5ff 0%, #319bff 52%, #1558bb 100%);
  }

  [data-theme="overground"] .animated-bg::before {
    background:
      /* fewer, larger mobile blocks so they are visible */
      linear-gradient(90deg, transparent 0 10%, #b66b32 10% 25%, transparent 25% 58%, #b66b32 58% 73%, transparent 73% 100%) 0 20% / 100% 56px no-repeat,
      linear-gradient(90deg, transparent 0 35%, #b66b32 35% 50%, transparent 50% 100%) 0 33% / 100% 56px no-repeat,
      radial-gradient(ellipse at 18% 100%, #66e85e 0 135px, transparent 136px),
      radial-gradient(ellipse at 70% 100%, #66e85e 0 155px, transparent 156px),
      radial-gradient(ellipse at 100% 100%, #42b640 0 105px, transparent 106px),
      linear-gradient(to top, #155b1d 0 120px, #58dd53 120px 152px, transparent 153px);
  }

  [data-theme="overground"] .grid-floor {
    height: 150px;
  }

  [data-theme="overground"] .app-shell {
    padding-bottom: 185px;
  }

  [data-theme="overground"] .hero,
  [data-theme="overground"] .game-card,
  [data-theme="overground"] .panel {
    background:
      linear-gradient(180deg, rgba(255,255,255,.22), rgba(4,29,74,.82)),
      linear-gradient(135deg, rgba(56,199,255,.20), rgba(255,122,61,.16));
  }
}

@media(max-width:520px) {
  [data-theme="overground"] .grid-floor {
    height: 170px;
  }

  [data-theme="overground"] .app-shell {
    padding-bottom: 200px;
  }

  [data-theme="overground"] .animated-bg::before {
    background:
      linear-gradient(90deg, transparent 0 8%, #b66b32 8% 28%, transparent 28% 61%, #b66b32 61% 81%, transparent 81% 100%) 0 18% / 100% 50px no-repeat,
      linear-gradient(90deg, transparent 0 36%, #b66b32 36% 56%, transparent 56% 100%) 0 31% / 100% 50px no-repeat,
      radial-gradient(ellipse at 15% 100%, #66e85e 0 130px, transparent 131px),
      radial-gradient(ellipse at 72% 100%, #66e85e 0 150px, transparent 151px),
      linear-gradient(to top, #155b1d 0 135px, #58dd53 135px 168px, transparent 169px);
  }

  [data-theme="overground"] .hero,
  [data-theme="overground"] .game-card,
  [data-theme="overground"] .panel {
    border-width: 2px;
  }
}


/* v14 Sombeel Word Quest logo/artwork update */

.logo.logo-art {
  width: min(1040px, 100%);
  padding: 0;
  background: transparent;
  border-radius: 0;
  filter:
    drop-shadow(0 0 22px color-mix(in srgb, var(--primary) 45%, transparent))
    drop-shadow(0 18px 32px rgba(0,0,0,.45));
}

.logo.logo-art::before,
.logo.logo-art::after {
  display: none;
}

.logo.logo-art picture,
.logo.logo-art img {
  display: block;
  width: 100%;
  height: auto;
}

.logo.logo-art img {
  max-height: 430px;
  object-fit: contain;
  margin: 0 auto;
}

.hero {
  padding-top: 20px;
}

/* Cohesive Sombeel arcade styling */
.hero .muted {
  font-size: clamp(15px, 2vw, 20px);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

[data-theme="overground"] .hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(4,29,74,.78)),
    radial-gradient(circle at 50% 10%, rgba(255,228,92,.16), transparent 34%);
}

[data-theme="overground"] .logo.logo-art {
  filter:
    drop-shadow(0 0 20px rgba(255,228,92,.45))
    drop-shadow(0 18px 28px rgba(65,32,10,.55));
}

[data-theme="candypop"] .logo.logo-art,
[data-theme="kids"] .logo.logo-art {
  filter:
    drop-shadow(0 0 22px rgba(255,143,243,.42))
    drop-shadow(0 0 18px rgba(116,255,178,.30))
    drop-shadow(0 18px 28px rgba(0,0,0,.34));
}

[data-theme="luxury"] .logo.logo-art {
  filter:
    drop-shadow(0 0 20px rgba(212,175,55,.35))
    drop-shadow(0 18px 30px rgba(0,0,0,.58));
}

[data-theme="cyber"] .logo.logo-art {
  filter:
    drop-shadow(3px 0 0 rgba(255,43,214,.38))
    drop-shadow(-3px 0 0 rgba(0,245,255,.38))
    drop-shadow(0 18px 30px rgba(0,0,0,.5));
}

[data-theme="space"] .logo.logo-art {
  filter:
    drop-shadow(0 0 24px rgba(125,249,255,.38))
    drop-shadow(0 0 18px rgba(164,107,255,.32))
    drop-shadow(0 18px 30px rgba(0,0,0,.52));
}

@media(max-width:900px) {
  .logo.logo-art {
    width: min(640px, 100%);
  }

  .logo.logo-art img {
    max-height: 360px;
  }

  .hero {
    padding-top: 14px;
  }
}

@media(max-width:520px) {
  .logo.logo-art {
    width: min(420px, 100%);
  }

  .logo.logo-art img {
    max-height: 300px;
  }

  .feature-ribbon {
    margin-top: 8px;
  }
}


/* v15 rounded logo frame
   Makes the logo artwork feel integrated with the game UI rather than a square image. */

.logo.logo-art {
  width: min(980px, 100%);
  margin-bottom: 14px;
  padding: 8px;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 24%, transparent), color-mix(in srgb, var(--secondary) 16%, transparent));
  border: 2px solid color-mix(in srgb, var(--accent) 72%, #ffffff 10%);
  box-shadow:
    0 8px 0 rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 28px color-mix(in srgb, var(--primary) 32%, transparent),
    0 0 42px color-mix(in srgb, var(--accent) 18%, transparent);
  overflow: hidden;
}

.logo.logo-art picture {
  display: block;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(0,0,0,.28);
}

.logo.logo-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 390px;
  object-fit: cover;
  border-radius: 26px;
}

.logo.logo-art::before,
.logo.logo-art::after {
  display: none !important;
}

[data-theme="overground"] .logo.logo-art {
  border-color: #ffe45c;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,228,92,.18)),
    linear-gradient(135deg, rgba(56,199,255,.20), rgba(255,122,61,.16));
  box-shadow:
    0 8px 0 rgba(86,42,13,.72),
    0 0 0 2px rgba(255,255,255,.18) inset,
    0 0 32px rgba(255,228,92,.30);
}

[data-theme="luxury"] .logo.logo-art {
  border-color: #d4af37;
  background:
    linear-gradient(180deg, rgba(212,175,55,.20), rgba(0,0,0,.22));
}

[data-theme="cyber"] .logo.logo-art {
  border-radius: 18px;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}

[data-theme="cyber"] .logo.logo-art picture,
[data-theme="cyber"] .logo.logo-art img {
  border-radius: 12px;
}

@media(max-width:900px) {
  .logo.logo-art {
    width: min(620px, 100%);
    padding: 7px;
    border-radius: 28px;
  }

  .logo.logo-art picture,
  .logo.logo-art img {
    border-radius: 21px;
  }

  .logo.logo-art img {
    max-height: 330px;
    object-fit: contain;
  }
}

@media(max-width:520px) {
  .logo.logo-art {
    width: min(390px, 100%);
    padding: 6px;
    border-radius: 24px;
  }

  .logo.logo-art picture,
  .logo.logo-art img {
    border-radius: 18px;
  }

  .logo.logo-art img {
    max-height: 280px;
  }
}


/* v16 integrated larger logo
   Fixes inherited max-width making the logo too small, and softens the box effect. */

.logo.logo-art {
  width: min(1080px, 100%) !important;
  max-width: 1080px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 38px !important;
  background: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 36%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--primary) 24%, transparent))
    drop-shadow(0 20px 34px rgba(0,0,0,.42)) !important;
}

.logo.logo-art picture {
  display: block !important;
  border-radius: 38px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 68%, #ffffff 6%),
    0 0 0 8px rgba(0,0,0,.28),
    0 0 36px color-mix(in srgb, var(--primary) 26%, transparent);
}

.logo.logo-art img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 38px !important;
}

.hero {
  padding-top: 18px !important;
}

.hero > .muted {
  margin-top: 14px;
}

/* Make the logo feel more like a floating badge in overground/platform themes */
[data-theme="overground"] .logo.logo-art picture,
[data-theme="platformer"] .logo.logo-art picture {
  box-shadow:
    0 0 0 4px #ffe45c,
    0 0 0 8px rgba(86,42,13,.55),
    0 12px 0 rgba(86,42,13,.55),
    0 0 34px rgba(255,228,92,.34);
}

[data-theme="overground"] .logo.logo-art,
[data-theme="platformer"] .logo.logo-art {
  filter:
    drop-shadow(0 0 18px rgba(255,228,92,.42))
    drop-shadow(0 18px 26px rgba(86,42,13,.38)) !important;
}

[data-theme="luxury"] .logo.logo-art picture {
  box-shadow:
    0 0 0 4px #d4af37,
    0 0 0 8px rgba(0,0,0,.36),
    0 0 34px rgba(212,175,55,.25);
}

[data-theme="cyber"] .logo.logo-art,
[data-theme="cyber"] .logo.logo-art picture,
[data-theme="cyber"] .logo.logo-art img {
  clip-path: none !important;
  border-radius: 28px !important;
}

[data-theme="cyber"] .logo.logo-art picture {
  box-shadow:
    0 0 0 3px #00f5ff,
    0 0 0 7px rgba(255,43,214,.20),
    0 0 34px rgba(0,245,255,.32);
}

@media(max-width:900px) {
  .logo.logo-art {
    width: min(660px, 100%) !important;
    max-width: 660px !important;
  }

  .logo.logo-art,
  .logo.logo-art picture,
  .logo.logo-art img {
    border-radius: 30px !important;
  }

  .logo.logo-art picture {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent) 70%, #ffffff 5%),
      0 0 0 6px rgba(0,0,0,.25),
      0 0 28px color-mix(in srgb, var(--primary) 24%, transparent);
  }
}

@media(max-width:520px) {
  .logo.logo-art {
    width: min(410px, 100%) !important;
    max-width: 410px !important;
  }

  .logo.logo-art,
  .logo.logo-art picture,
  .logo.logo-art img {
    border-radius: 24px !important;
  }

  .logo.logo-art picture {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 70%, #ffffff 5%),
      0 0 0 5px rgba(0,0,0,.24),
      0 0 20px color-mix(in srgb, var(--primary) 24%, transparent);
  }
}


/* v17 mobile gameplay optimisation
   Keeps desktop styling, but makes phone layout much more compact and app-like. */

@media(max-width:700px) {
  html,
  body {
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .app-shell {
    width: calc(100% - 18px) !important;
    padding: calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 88px) !important;
  }

  .game-wrap,
  .app-shell.game-wrap {
    width: calc(100% - 12px) !important;
    padding-top: calc(env(safe-area-inset-top) + 6px) !important;
  }

  .hero,
  .game-card,
  .panel,
  .modal-card {
    padding: 14px 10px !important;
    border-radius: 20px !important;
  }

  .game-card {
    margin-top: 4px;
  }

  .sound-toggle {
    top: calc(env(safe-area-inset-top) + 6px) !important;
    right: 8px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    opacity: .86;
    z-index: 120;
  }

  .sound-toggle::before {
    content: "🔊 ";
  }

  .top-hud {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .hud-box {
    min-height: 66px !important;
    padding: 8px 8px !important;
    border-radius: 16px !important;
  }

  .hud-box span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
    margin-bottom: 3px !important;
  }

  .hud-box strong {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .score-digits {
    font-size: 24px !important;
    padding: 2px 8px !important;
  }

  .hud-box .lives {
    min-height: 32px !important;
    gap: 5px !important;
    margin-top: 0 !important;
  }

  .hud-box .lives .heart,
  .lives span.heart {
    font-size: 30px !important;
  }

  .notice {
    font-size: 13px !important;
    line-height: 1.25 !important;
    padding: 8px 10px !important;
    margin: 6px 0 8px !important;
    border-radius: 14px;
    background: rgba(0,0,0,.16);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  }

  .description-card {
    margin: 8px auto !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  .description-card strong {
    font-size: 12px !important;
    letter-spacing: .08em !important;
  }

  .description-card p {
    margin: 7px 0 !important;
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .description-card small {
    display: block;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .word-slots {
    margin: 10px auto !important;
    padding: 8px 3px !important;
    gap: 4px !important;
    overflow-x: auto;
    justify-content: flex-start !important;
    scrollbar-width: none;
  }

  .word-slots::-webkit-scrollbar {
    display: none;
  }

  .slot {
    flex: 0 0 auto;
    width: 38px !important;
    height: 48px !important;
    font-size: 24px !important;
    border-radius: 9px !important;
  }

  .risk-meter {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 10px !important;
    margin: 8px auto 10px !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .risk-meter span {
    display: block;
  }

  .risk-meter b {
    font-size: 14px !important;
  }

  .letters {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 7px !important;
    margin: 10px auto !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .tile-btn {
    min-height: 44px !important;
    padding: 5px 0 !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }

  .solve-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .solve-row input {
    min-height: 44px !important;
    padding: 11px 13px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  .solve-row .btn,
  #solveForm .btn {
    min-height: 48px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  .button-row {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .button-row .btn {
    padding: 10px 13px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
  }

  #quitBtn {
    min-width: 96px;
  }

  .feature-ribbon,
  .mini-info-grid {
    gap: 8px !important;
  }

  .feature-ribbon span,
  .mini-info-grid div {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }

  .controls-grid {
    gap: 9px !important;
  }

  .field label {
    font-size: 10px !important;
  }

  input,
  select,
  textarea {
    padding: 11px 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  .stats-grid {
    gap: 8px !important;
  }

  .stat {
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .stat span {
    font-size: 10px !important;
  }

  .stat strong {
    font-size: 19px !important;
  }

  .result-card {
    min-height: auto !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    gap: 10px !important;
  }

  .revealed-word {
    font-size: clamp(24px, 8vw, 42px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .definition-reveal {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .definition-reveal p {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .score-pop {
    width: 96px !important;
    height: 96px !important;
    font-size: 26px !important;
  }
}

/* Very small phone screens */
@media(max-width:390px) {
  .app-shell,
  .game-wrap,
  .app-shell.game-wrap {
    width: calc(100% - 10px) !important;
  }

  .hero,
  .game-card,
  .panel,
  .modal-card {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .hud-box {
    min-height: 60px !important;
    padding: 7px 6px !important;
  }

  .hud-box strong {
    font-size: 15px !important;
  }

  .score-digits {
    font-size: 21px !important;
  }

  .hud-box .lives .heart,
  .lives span.heart {
    font-size: 27px !important;
  }

  .description-card p {
    font-size: 14px !important;
  }

  .slot {
    width: 34px !important;
    height: 44px !important;
    font-size: 22px !important;
  }

  .letters {
    gap: 6px !important;
    padding: 8px !important;
  }

  .tile-btn {
    min-height: 40px !important;
    font-size: 16px !important;
  }

  .risk-meter {
    font-size: 12px !important;
  }
}

/* Mobile Safari address-bar friendliness */
@supports(height: 100dvh) {
  @media(max-width:700px) {
    body {
      min-height: 100dvh;
    }
  }
}


/* v19 mobile long-word fitting
   Long words now shrink to fit rather than running off the right edge. */

.word-slots {
  max-width: 100%;
}

@media(max-width:700px) {
  .word-slots {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .slot {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .slot.space {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media(max-width:390px) {
  .word-slots {
    gap: 2px !important;
  }
}


/* v20 true mobile long-word fit
   Previous mobile rules used fixed !important slot sizes.
   This version allows JS to calculate exact slot sizes and applies them inline with !important. */

@media(max-width:700px) {
  .word-slots {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  .word-slots .slot {
    min-width: 0 !important;
    max-width: none !important;
  }

  .word-slots .slot.hidden,
  .word-slots .slot.revealed,
  .word-slots .slot.new,
  .word-slots .slot.failed {
    box-sizing: border-box !important;
  }
}

/* On very narrow phones, reduce visual weight so tiny slots still read clearly. */
@media(max-width:390px) {
  .word-slots .slot {
    border-width: 1px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -8px 14px rgba(0,0,0,.22),
      0 0 9px color-mix(in srgb, var(--primary) 14%, transparent) !important;
  }
}


/* v21 Arcane Card Duel pack/theme */

[data-theme="arcane"] {
  --primary:#b26bff;
  --secondary:#4df7ff;
  --accent:#ffe45c;
  --green:#61ffb0;
  --red:#ff4d9d;
  --bg1:#12051f;
  --bg2:#26104a;
  --panel:rgba(18, 8, 40, .9);
  --panel2:rgba(38, 16, 74, .92);
}

[data-theme="arcane"] .animated-bg {
  background:
    radial-gradient(circle at 20% 18%, rgba(178,107,255,.32), transparent 18%),
    radial-gradient(circle at 78% 22%, rgba(77,247,255,.20), transparent 18%),
    radial-gradient(circle at 50% 75%, rgba(255,228,92,.12), transparent 26%),
    linear-gradient(135deg, #12051f, #26104a 58%, #060712);
}

[data-theme="arcane"] .animated-bg::before {
  background:
    repeating-conic-gradient(from 45deg, rgba(178,107,255,.10) 0 12deg, transparent 12deg 24deg),
    radial-gradient(circle at 50% 50%, rgba(77,247,255,.12), transparent 36%);
  filter: blur(20px);
}

[data-theme="arcane"] .hero,
[data-theme="arcane"] .game-card,
[data-theme="arcane"] .panel,
[data-theme="arcane"] .modal-card {
  border-color: #b26bff;
  background:
    radial-gradient(circle at 50% 0%, rgba(178,107,255,.18), transparent 36%),
    linear-gradient(180deg, rgba(38,16,74,.94), rgba(11,6,24,.93));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 34px rgba(178,107,255,.28),
    0 0 52px rgba(77,247,255,.14),
    0 24px 70px rgba(0,0,0,.55);
}

[data-theme="arcane"] .btn,
[data-theme="arcane"] .tile-btn {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.28), transparent 38%),
    linear-gradient(135deg, #b26bff, #4df7ff);
  color: #13051f;
}

[data-theme="arcane"] .slot {
  border-color: #b26bff;
  background:
    radial-gradient(circle at 50% 0%, rgba(178,107,255,.24), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.38));
}

[data-theme="arcane"] .description-card,
[data-theme="arcane"] .risk-meter,
[data-theme="arcane"] .definition-reveal {
  border-color: rgba(178,107,255,.55);
  background:
    radial-gradient(circle at 50% 0%, rgba(178,107,255,.16), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28));
}


/* v22 MTG Test theme - plain test styling only */

[data-theme="mtg_test"] {
  --primary:#f2d27c;
  --secondary:#7d5cff;
  --accent:#65f0ff;
  --green:#73ff9b;
  --red:#ff5e7d;
  --bg1:#110a18;
  --bg2:#2b1736;
  --panel:rgba(20, 12, 32, .92);
  --panel2:rgba(44, 24, 62, .94);
}

[data-theme="mtg_test"] .animated-bg {
  background:
    radial-gradient(circle at 18% 18%, rgba(242,210,124,.20), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(125,92,255,.22), transparent 20%),
    radial-gradient(circle at 50% 72%, rgba(101,240,255,.12), transparent 28%),
    linear-gradient(135deg, #110a18, #2b1736 58%, #07050d);
}

[data-theme="mtg_test"] .hero,
[data-theme="mtg_test"] .game-card,
[data-theme="mtg_test"] .panel,
[data-theme="mtg_test"] .modal-card {
  border-color:#f2d27c;
  background:
    radial-gradient(circle at 50% 0%, rgba(242,210,124,.14), transparent 34%),
    linear-gradient(180deg, rgba(44,24,62,.94), rgba(12,7,20,.94));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 34px rgba(242,210,124,.18),
    0 0 52px rgba(125,92,255,.18),
    0 24px 70px rgba(0,0,0,.55);
}

[data-theme="mtg_test"] .btn,
[data-theme="mtg_test"] .tile-btn {
  background:linear-gradient(135deg,#f2d27c,#7d5cff);
  color:#13051f;
}

[data-theme="mtg_test"] .slot {
  border-color:#f2d27c;
}

/* v14 global dark luxe game skin */
body, body[data-theme], body[data-theme="overground"], body[data-theme="arcane"], body[data-theme="luxury"] {
  background: radial-gradient(circle at 50% -10%, rgba(201,146,46,.16), transparent 32%), linear-gradient(135deg, #030303 0%, #0b0b0b 42%, #181008 76%, #050505 100%) !important;
  color: #f8f1df !important;
}
.bg {
  background: radial-gradient(circle at 20% 0%, rgba(248,223,144,.10), transparent 26%), radial-gradient(circle at 82% 14%, rgba(183,121,31,.12), transparent 28%), linear-gradient(135deg, #030303 0%, #0b0b0b 42%, #181008 76%, #050505 100%) !important;
}
.bg::before,.bg:before {
  background: linear-gradient(90deg, rgba(248,223,144,.045) 1px, transparent 1px), linear-gradient(rgba(248,223,144,.045) 1px, transparent 1px) !important;
  background-size: 54px 54px !important;
}
.hero,.panel,.card,.modal-card {
  border-color: rgba(248,223,144,.22) !important;
  background: radial-gradient(circle at 50% 0%, rgba(248,223,144,.08), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.020)) !important;
  box-shadow: 0 26px 76px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.025) inset !important;
  color: #f8f1df !important;
}
.eyebrow,.feedback,.score,.hud-tile strong,.ladder-label,.centre-callout,.instruction-card .tip { color: #f8df90 !important; }
h1,h2 { font-family: Georgia, "Times New Roman", serif !important; letter-spacing: -.04em; }
.muted,.hero p,.panel p,.card p { color: rgba(248,241,223,.72) !important; }
button,.btn { color:#090909 !important; background:linear-gradient(135deg,#fff8d6,#d6a84d 48%,#8f5d1c) !important; box-shadow:0 7px 0 rgba(0,0,0,.45),0 0 22px rgba(183,121,31,.18) !important; }
button.green,.btn.green { background:linear-gradient(135deg,#fff8d6,#d6a84d 48%,#8f5d1c) !important; color:#090909 !important; }
button.red,.btn.red { background:linear-gradient(135deg,#4b1c1c,#a34132 48%,#d6a84d) !important; color:#fff8d6 !important; }
input,select,textarea,.big-input,.ladder-input { background:rgba(0,0,0,.45) !important; color:#f8f1df !important; border-color:rgba(248,223,144,.24) !important; }
.tile,.game-icon,.show-icon { background:linear-gradient(135deg,#fff8d6,#b7791f) !important; color:#080808 !important; }
.hud-tile,.pill,.word-list .pill { background:rgba(255,255,255,.035) !important; border:1px solid rgba(248,223,144,.14) !important; color:#f8f1df !important; }
.health { border-color:rgba(248,223,144,.20) !important; }
.health span,.timer-bar span { background:linear-gradient(90deg,#8f5d1c,#d6a84d,#fff8d6) !important; }
.ladder-word.start,.ladder-word.target,.ladder-word.fixed { border-color:rgba(248,223,144,.38) !important; color:#f8df90 !important; }
.ladder-input.active { border-color:rgba(248,223,144,.85) !important; box-shadow:0 0 18px rgba(248,223,144,.24) !important; }

/* v15 premium visual polish */
.wrap {
  max-width: 1180px !important;
}

.hero,
.panel {
  position: relative;
  overflow: hidden;
  border-radius: 34px !important;
}

.hero::before,
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,248,214,.12), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(214,168,77,.10), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,0));
  z-index: 0;
}

.hero > *,
.panel > * {
  position: relative;
  z-index: 1;
}

.hero,
.panel,
.card {
  border: 1px solid rgba(248,223,144,.34) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 42px rgba(183,121,31,.10) !important;
}

h1 {
  background: linear-gradient(135deg, #fff8d6, #f8df90 32%, #b7791f 70%, #fff2b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}

h2 {
  color: #fff8d6 !important;
  text-shadow: 0 0 24px rgba(248,223,144,.14);
}

.compact-hud {
  gap: 14px !important;
}

.hud-tile {
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24) inset;
}

.hud-tile span {
  color: rgba(248,223,144,.72) !important;
}

.hud-tile strong {
  font-family: Georgia, "Times New Roman", serif;
}

.big-input,
.ladder-input {
  border-radius: 18px !important;
  min-height: 56px !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.28) inset !important;
}

button,
.btn {
  border-radius: 999px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.word-list {
  justify-content: center;
}

.pill {
  border-radius: 999px !important;
}

.ladder-board {
  max-width: 560px !important;
  gap: 12px !important;
}

.ladder-word,
.ladder-input {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.32)) !important;
  border: 1px solid rgba(248,223,144,.20) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.025) inset !important;
}

.ladder-word.start,
.ladder-word.target {
  background:
    linear-gradient(135deg, rgba(248,223,144,.16), rgba(183,121,31,.10)) !important;
}

.letter-check {
  border-color: rgba(248,223,144,.20) !important;
  background: rgba(0,0,0,.30) !important;
}

@media(max-width:760px) {
  .hero,
  .panel {
    border-radius: 24px !important;
  }
}