:root {
  --bg0: #04100b;
  --bg1: #0a251a;
  --panel: rgba(0, 0, 0, .42);
  --panel2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .16);
  --text: #f3fff8;
  --muted: rgba(243, 255, 248, .72);
  --accent: #50ff9a;
  --danger: #ff477e;
  --canvas: #f8fff9;
  --red: #ff315d;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--text);
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
  background:
    radial-gradient(circle at 15% 12%, rgba(80,255,154,.16), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(60,170,255,.11), transparent 36%),
    linear-gradient(135deg, var(--bg0), var(--bg1));
}
a { color: inherit; }
.shell { width: min(1240px, calc(100% - 24px)); margin: 0 auto; padding: 18px 0; }
.topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 14px; }
.brand { font-weight: 950; letter-spacing: -.06em; font-size: clamp(26px, 4vw, 54px); line-height: .95; margin-inline-end:auto; }
.pill { border:1px solid var(--line); background:var(--panel2); border-radius:999px; padding:8px 12px; color:var(--muted); }
.pill b { color: var(--text); }
.grid { display:grid; grid-template-columns: 360px 1fr; gap:14px; align-items:stretch; }
.grid.host-grid { grid-template-columns: 410px 1fr; }
.card { border:1px solid var(--line); background:var(--panel); border-radius:24px; padding:16px; box-shadow: 0 22px 70px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.card h2, .card h3 { margin:0 0 10px; }
.muted { color: var(--muted); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin: 8px 0; }
.stack { display:grid; gap:10px; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%; border:1px solid var(--line); background:rgba(255,255,255,.08); color:var(--text);
  border-radius:14px; padding:10px 12px; outline:none;
}
textarea { min-height: 70px; resize: vertical; direction:ltr; }
button { border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.10); border-radius:14px; padding:10px 14px; cursor:pointer; }
button:hover { border-color: rgba(80,255,154,.55); background: rgba(80,255,154,.14); }
button.primary { background: rgba(80,255,154,.18); border-color: rgba(80,255,154,.45); }
button.danger { background: rgba(255,71,126,.13); border-color: rgba(255,71,126,.35); }
hr { width:100%; border:0; border-top:1px solid rgba(255,255,255,.12); }
.canvas-wrap { min-height: 640px; position:relative; overflow:hidden; border-radius:24px; border:1px solid rgba(0,0,0,.18); background: var(--canvas); }
canvas { display:block; width:100%; height:100%; min-height:640px; touch-action:none; cursor: crosshair; }
.hud { position:absolute; inset:14px 14px auto 14px; display:flex; gap:10px; flex-wrap:wrap; pointer-events:none; }
.hud .pill { background:rgba(0,0,0,.42); color:#fff; }
.timer-big { font-weight:950; font-size: clamp(36px, 7vw, 92px); letter-spacing:-.06em; }
.timer-line { height:8px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; }
.timer-line > div { height:100%; width:0%; background:var(--accent); transition:width .25s linear; }
.score-row { display:grid; grid-template-columns: 48px 1fr auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.score-row:last-child { border-bottom:0; }
.xp-row { display:grid; grid-template-columns: 42px minmax(80px,1fr) auto auto auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.10); font-size: 14px; }
.xp-row:last-child { border-bottom:0; }
.rank { color:var(--accent); font-weight:900; }
.name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-row { display:grid; grid-template-columns: 120px 1fr; gap:8px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.chat-row b { color: var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--muted); }
.toolbox { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toolbox input[type="range"] { width: 140px; }
.toolbox input[type="color"] { width:46px; height:40px; padding:2px; }
.swatches { display:flex; gap:6px; align-items:center; }
.swatch { width:30px; height:30px; border-radius:50%; padding:0; border:2px solid rgba(255,255,255,.55); }
.word-box { font-size: clamp(24px, 5vw, 54px); font-weight:950; letter-spacing:-.04em; color:var(--accent); }
.correct-banner { position:fixed; left:50%; top:24px; transform:translate(-50%, -120px); background:rgba(80,255,154,.92); color:#031008; font-weight:950; padding:14px 24px; border-radius:999px; transition:transform .22s ease; z-index:20; box-shadow:0 18px 70px rgba(0,0,0,.35); max-width: calc(100% - 28px); text-align:center; }
.correct-banner.show { transform:translate(-50%, 0); }
.menu { min-height:100vh; display:grid; place-items:center; padding:24px; }
.menu-card { width:min(900px, 100%); border:1px solid var(--line); background:var(--panel); border-radius:30px; padding:28px; }
.menu-title { font-size: clamp(42px, 8vw, 96px); font-weight:950; letter-spacing:-.08em; margin:0 0 10px; }
.menu-links { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-top:18px; }
.menu-links a { text-decoration:none; border:1px solid var(--line); background:var(--panel2); border-radius:20px; padding:18px; display:block; }
.menu-links a b { display:block; margin-bottom:6px; }
.overlay-body { background: transparent !important; overflow:hidden; }
.overlay-card { position:fixed; inset:auto 20px 20px 20px; display:flex; align-items:end; justify-content:space-between; gap:16px; pointer-events:none; }
.overlay-panel { background:rgba(0,0,0,.52); border:1px solid rgba(255,255,255,.18); border-radius:24px; padding:14px 18px; backdrop-filter:blur(8px); }
.coin-dot { color: var(--red); filter: drop-shadow(0 0 8px rgba(255,49,93,.6)); }
@media (max-width: 900px) { .grid, .grid.host-grid { grid-template-columns: 1fr; } .canvas-wrap, canvas { min-height: 520px; } .xp-row { grid-template-columns: 38px 1fr auto; } .xp-row span:nth-child(4), .xp-row span:nth-child(5) { display:none; } }
/* v0.9 paint tools */
.paint-tools label {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.paint-tools select {
  min-width: 110px;
  padding: 8px 10px;
}
.paint-tools button {
  white-space: nowrap;
}
.swatches {
  flex-wrap: wrap;
  max-width: 100%;
}
.swatch {
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset, 0 3px 10px rgba(0,0,0,.22);
}
.swatch:hover {
  transform: translateY(-1px) scale(1.04);
}
/* v0.9.1 word mask + live fixes */
.word-hint-card {
  border: 1px solid rgba(80,255,154,.26);
  background: rgba(0,0,0,.24);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  gap: 6px;
}
.word-mask {
  direction: rtl;
  unicode-bidi: isolate;
  font-weight: 950;
  letter-spacing: .12em;
  font-size: clamp(22px, 3.4vw, 44px);
  line-height: 1.25;
  color: var(--text);
  text-shadow: 0 2px 20px rgba(80,255,154,.18);
}
.overlay-word-mask {
  font-size: clamp(26px, 4vw, 56px);
  letter-spacing: .10em;
}
.word-overlay-panel {
  min-width: 360px;
}
.word-box {
  font-size: clamp(26px, 5vw, 58px);
  font-weight: 950;
  letter-spacing: -.03em;
  text-align: center;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(80,255,154,.22);
  background: rgba(0,0,0,.22);
}
/* v0.9.7 bucket + transparent overlay */
body[data-page="overlay"],
body[data-page="overlay"] .canvas-wrap,
body[data-page="overlay"] canvas {
  background: transparent !important;
}
body[data-page="overlay"] .canvas-wrap {
  border-color: transparent !important;
}
/* v0.10.1 stable paint tools */
body[data-page="overlay"],
body[data-page="overlay"] .canvas-wrap,
body[data-page="overlay"] canvas {
  background: transparent !important;
}
body[data-page="overlay"] .canvas-wrap {
  border-color: transparent !important;
}
.paint-tools .swatches {
  width: 100%;
}
.paint-tools .swatch {
  width: 32px;
  height: 32px;
}
.paint-tools input[type="color"] {
  width: 58px;
  min-width: 58px;
  height: 44px;
}
.paint-tools-note {
  width: 100%;
  font-size: 13px;
}
/* v0.10.3 hard transparent overlay */
html:has(body[data-page="overlay"]),
body[data-page="overlay"],
body[data-page="overlay"].overlay-body,
body[data-page="overlay"] .canvas-wrap,
body[data-page="overlay"] #mainCanvas,
body[data-page="overlay"] canvas {
  background: rgba(0,0,0,0) !important;
  background-color: rgba(0,0,0,0) !important;
}
body[data-page="overlay"] .canvas-wrap {
  border: 0 !important;
  box-shadow: none !important;
}
/* v0.10.4 transparent overlay safety */
body[data-page="overlay"],
body[data-page="overlay"] .canvas-wrap,
body[data-page="overlay"] #mainCanvas,
body[data-page="overlay"] canvas {
  background: transparent !important;
  background-color: transparent !important;
}
body[data-page="overlay"] .canvas-wrap {
  border: 0 !important;
  box-shadow: none !important;
}