/* Comic-book themed CSS replacement:
   bold inks, halftone textures, thick outlines, speech-bubble game panel,
   punchy primary palette (red, yellow, black), comic fonts & punchy headings. */

:root{
  --paper:#fff6d8;           /* comic paper */
  --ink:#0b0b0b;             /* strong ink */
  --accent:#d92a1a;         /* comic red */
  --accent-2:#ffd400;       /* comic yellow */
  --muted:#333333;
  --page-width:920px;
  --page-height:820px;
  --thick-ink: 4px;
  --dot-size: 6px;
}

/* overall comic halftone background */
html,body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(0,0,0,0.06) 0 2%, transparent 6%),
    linear-gradient(180deg, #fff9e8 0%, #fff4d6 50%, #fff9e8 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* halftone overlay for comic texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: var(--dot-size) var(--dot-size);
  opacity:0.18;
  mix-blend-mode:multiply;
  transform: translateZ(0);
}

/* bold comic title */
.main-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:18px 12px 4px;
  text-align:center;
  /* subtle tilt for a hand-placed comic masthead */
  transform: rotate(-1deg);
}
/* add a dramatic halftone burst behind the title */
.main-title::before{
  content:"";
  position:absolute;
  width:520px;
  height:320px;
  background:
    radial-gradient(circle at 30% 30%, rgba(217,42,26,0.08) 0 15%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(255,212,0,0.06) 0 12%, transparent 28%);
  z-index:-1;
  top:18px;
  left:50%;
  transform:translateX(-50%) rotate(-6deg);
  border-radius:50%;
  filter: blur(6px);
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* main-title tweaks remain unchanged */
.main-title .title-line{
  font-weight:900;
  color:var(--ink);
  font-size:48px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-family: "Impact", "Arial Black", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    linear-gradient(180deg, #fff 0%, #ffeaa7 100%);
  -webkit-text-stroke: 0.8px rgba(0,0,0,0.95);
  padding:10px 20px;
  border-radius:8px;
  box-shadow: 0 10px 0 var(--accent), 0 18px 30px rgba(0,0,0,0.22);
  transform: skewY(-3deg);
  line-height:1.02;
}

/* subtitle stronger, comic font */
.main-title .subtitle{
  color:var(--muted);
  font-size:18px;
  font-weight:900;
  padding:6px 12px;
  letter-spacing:0.6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
  font-family: "Impact", "Arial Black", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-transform:uppercase;
  transform: translateY(-6px) scale(1.02);
  border-top:3px dashed rgba(0,0,0,0.06);
  line-height:1;
}

/* notebook layout simplified for comic panels */
.notebook{
  display:flex;
  gap:18px;
  padding:18px;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  max-width:1080px;
  margin:0 auto;
  /* slight perspective for panels */
  perspective: 1200px;
}

/* pages become comic panels with thick ink border */
.page{
  width:var(--page-width);
  height:var(--page-height);
  background: var(--paper);
  border-radius:6px;
  padding:20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  overflow:auto;
  border: var(--thick-ink) solid var(--ink);
  position:relative;
  transition: transform 160ms ease, box-shadow 160ms ease;
  transform-origin: center top;
  /* give each page a slightly different tilt to mimic pasted panels */
  transform: rotate(-2deg);
}

/* on hover, panels pop forward with a stronger comic shadow */
.page:hover{
  transform: rotate(0deg) translateY(-6px) scale(1.01);
  box-shadow: 0 40px 80px rgba(0,0,0,0.45);
}

/* comic panel caption */
.page-header{
  display:inline-block;
  font-weight:800;
  font-size:22px;
  color:var(--ink);
  margin:0 0 14px 0;
  letter-spacing:0.6px;
  padding:8px 12px;
  background: var(--accent-2);
  color:#000;
  border-radius:6px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.45);
  line-height:1.1;
}

/* topic boxes: bright comic labels with halftone interior and heavy outline */
.topic{
  margin:14px 0;
  padding:16px 18px;
  border-radius:8px;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.92) 40%),
    radial-gradient(circle at 10% 20%, rgba(0,0,0,0.02) 0 2%, transparent 6%);
  border:4px solid var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease;
  cursor:default;
  position:relative;
  overflow:visible;
}

/* stronger comic badge on topic headers */
.topic h3{
  margin:0 0 10px 0;
  font-size:20px;
  color:var(--ink);
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-family: "Impact", "Arial Black", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing:0.4px;
  text-transform:uppercase;
  font-weight:900;
}

/* replace small POP! with a punchy POW! badge and thicker ink border */
.topic h3::after{
  content:"POW!";
  margin-left:auto;
  color:#fff;
  font-weight:900;
  font-size:14px;
  background:var(--accent);
  padding:6px 10px;
  border-radius:8px;
  border:3px solid var(--ink);
  transform:skewX(-8deg) translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.32);
}

/* small speech-bubble pointer for each topic */
.topic::before{
  content:"";
  position:absolute;
  right:16px;
  top:8px;
  width:0;
  height:0;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-bottom:18px solid rgba(255,255,255,0.85);
  transform:rotate(-8deg);
  box-shadow: -6px 6px 0 var(--ink);
  opacity:0.9;
  pointer-events:none;
}

/* hidden lists remain hidden */
.topic ul{ display:none; }

/* game overlay: bold comic-style speech bubble panel with tail */
#game{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
  z-index:60;
  padding:22px;
  backdrop-filter: blur(2px);
}
.game-card{
  width:820px;
  max-width:96%;
  background: var(--accent-2);
  color:#000;
  border-radius:16px;
  padding:28px;
  box-shadow: 0 60px 120px rgba(0,0,0,0.7);
  position:relative;
  text-align:center;
  border:8px solid var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transform: rotate(-3deg);
}

/* speech-bubble tail */
.game-card::after{
  content:"";
  position:absolute;
  left:24px;
  bottom:-42px;
  width:0;
  height:0;
  border-left:28px solid transparent;
  border-right:28px solid transparent;
  border-top:42px solid var(--accent-2);
  transform:rotate(10deg);
  border-top-color: var(--accent-2);
  box-shadow: -6px 6px 0 var(--ink);
}

/* bold heading and comic copy */
.game-card h2{
  margin:0 0 6px 0;
  color:var(--ink);
  font-size:34px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  text-shadow: 0 4px 0 var(--accent);
  padding:6px 12px;
  background:#fff;
  display:inline-block;
  border-radius:8px;
  -webkit-text-stroke:0.8px rgba(0,0,0,0.9);
  line-height:1;
  font-weight:800;
}
.game-card p{
  margin:8px 0 12px 0;
  font-size:18px;
  color:var(--ink);
  line-height:1.2;
  font-weight:700;
  text-transform:uppercase;
}

/* hint text style: slightly larger impact font */
.hint{
  font-family: "Impact", "Arial Black", sans-serif;
  font-weight:900;
  font-size:26px;
  color:var(--ink);
  background: rgba(255,255,255,0.98);
  display:inline-block;
  padding:16px 20px;
  border-radius:14px;
  border:6px solid var(--ink);
  box-shadow: 0 22px 44px rgba(0,0,0,0.36);
  min-width:380px;
  min-height:72px;
  line-height:1.12;
  text-align:center;
}

/* inputs stylized as comic caption boxes (slightly bigger) */
.inputs{
  display:flex;
  gap:10px;
  margin:14px 0;
  align-items:stretch;
}
.inputs input{
  flex:1;
  padding:14px 16px;
  border-radius:8px;
  border:4px solid var(--ink);
  background: linear-gradient(180deg,#fff,#fff6e6);
  outline:none;
  transition: transform 120ms ease;
  font-size:18px;
  font-family: "Impact", "Arial Black", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing:0.4px;
}
.inputs input:focus{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }

/* bold comic buttons */
.game-controls{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  margin-top:12px;
  flex-wrap:wrap;
}
.game-controls button{
  padding:12px 18px;
  border-radius:10px;
  border:4px solid var(--ink);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  font-weight:900;
  box-shadow: 0 16px 32px rgba(0,0,0,0.5);
  font-family: "Impact", "Arial Black", sans-serif;
  text-transform:uppercase;
}
#skipBtn{ background:#fff; color:var(--ink); border:3px solid var(--ink); }

/* timer styled like a comic burst */
#timer{
  background: radial-gradient(circle at 30% 30%, #fff 0%, var(--accent-2) 50%);
  color:#000;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
  font-family: "Impact", "Arial Black", sans-serif;
}

/* result text strong punch */
#result{
  margin-top:12px;
  font-size:18px;
  color:var(--ink);
  min-height:24px;
  font-weight:900;
}

/* close button - comic ink X */
#closeGame{
  position:absolute;
  top:12px;
  right:12px;
  background:#fff;
  border:3px solid var(--ink);
  font-size:20px;
  color:var(--ink);
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

/* perfect state: explosive burst */
.game-card.perfect{
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 80px 200px rgba(0,0,0,0.85);
  border-color: #000;
  animation: bang 720ms ease-out;
}
@keyframes bang{
  0%{ transform: scale(0.98) rotate(-3deg); }
  60%{ transform: scale(1.06) rotate(0deg); }
  100%{ transform: scale(1.04) rotate(0deg); }
}

/* scoreboard: punchy comic badges */
.scoreboard{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin:10px auto 6px;
  max-width:980px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.score-player, .score-opponent, .score-rounds{
  background:var(--accent-2);
  padding:8px 14px;
  border-radius:8px;
  border:4px solid var(--ink);
  text-align:center;
  min-width:120px;
}
.score-label{ font-size:12px; color:#000; font-weight:900; text-transform:uppercase; }
.score-value{ font-size:56px; font-weight:900; color:var(--accent); -webkit-text-stroke:2px var(--ink); }
.round-label{ font-size:12px; color:#000; font-weight:900; text-transform:uppercase; }
.round-value{ font-size:32px; font-weight:900; color:var(--ink); }

/* responsive */
@media (max-width:1100px){
  :root{ --page-width:620px; --page-height:740px; }
  .inputs{gap:8px}
}
@media (max-width:900px){
  .inputs{flex-direction:column}
  .notebook{padding:12px;gap:12px}
  .page{width:360px;height:640px;padding:12px}
  .topic ul{column-count:1}
  .spine{display:none}
  .wb-table-btn{ font-size:15px; padding:10px 6px; }
  .hint{ font-size:20px; min-width:280px; min-height:56px; padding:12px 14px; }
}

/* image placed above the Winter Topics header — centered and enlarged */
.image-top{
  display:flex;
  justify-content:center; /* center images horizontally */
  align-items:flex-start;
  margin-bottom:18px;
  pointer-events:none;
}
.image-top img{
  width:280px;           /* larger default size */
  max-width:48%;
  height:auto;
  border:8px solid var(--ink);
  border-radius:10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
  transform: translateY(-8px) rotate(-2deg);
  background:linear-gradient(180deg,#fff,#fff7e6);
  display:block;
}
@media (max-width:1100px){
  .image-top img{ width:220px; max-width:46%; transform: translateY(-6px) rotate(-2deg); }
}
@media (max-width:900px){
  .image-top img{ width:140px; max-width:44%; transform: translateY(-4px) rotate(-1deg); }
}

/* Word Bank panel moved to bottom notebook-style table */
.word-bank{
  position: static;
  left: auto;
  top: auto;
  transform: none;
  width: calc(100% - 48px);
  max-width:1400px;
  margin: 18px auto 40px;
  height: auto;
  display:block;
  background: linear-gradient(180deg,#fff8d8,#fff3c8);
  border:10px dotted var(--ink);
  border-radius:12px;
  padding:14px;
  z-index:20;
  box-shadow: 0 28px 80px rgba(0,0,0,0.28);
  font-family: "Cinzel", "Copperplate", "Impact", "Arial Black", serif;
  justify-content:space-between;
  overflow:visible;
}

/* table wrapper to allow horizontal scroll on very small screens
   Modified to allow full height expansion so all rows remain visible */
.wb-table-wrap{
  overflow: visible;
  max-width:100%;
  max-height: none;
}

/* allow table to size naturally so rows aren't clipped by fixed layout */
.wb-table{
  table-layout: auto;
}

/* table styles */
.wb-table{
  width:100%;
  background: linear-gradient(180deg,#fffdf6,#fff8e6);
  border-radius:8px;
  border:4px solid rgba(0,0,0,0.06);
}

.wb-table thead th{
  background: linear-gradient(180deg,var(--accent-2),#fff);
  color: #000;
  padding:10px 12px;
  border-bottom:4px solid var(--ink);
  text-transform:uppercase;
  font-weight:900;
  font-size:13px;
  text-align:left;
  position:sticky;
  top:0;
  z-index:2;
}

.wb-table tbody tr{
  border-bottom:1px dashed rgba(0,0,0,0.06);
}

.wb-table-td{
  padding:10px 10px;
  vertical-align:middle;
  min-width:240px;
}

/* reuse wb-card styling for table buttons but adjust for inline layout */
.wb-table-btn{
  display:inline-block;
  background:transparent;
  border:none;
  padding:14px 10px;
  text-transform:none;
  font-variant:normal;
  font-weight:900;
  cursor:pointer;
  color:var(--ink);
  text-align:left;
  font-size:20px;
  line-height:1.2;
  letter-spacing:0.2px;
}
.wb-table-btn:focus{ outline:none; box-shadow: 0 10px 24px rgba(0,0,0,0.2); transform:none; }

/* selected state when a word is used */
.wb-card.selected, .wb-table-btn.selected{
  background:linear-gradient(180deg,#ffefb8,#ffd24d) !important;
  color:#000 !important;
  border-radius:6px;
}

/* controls aligned right below table */
.wb-controls{
  display:flex;
  gap:10px;
  margin-top:12px;
  justify-content:flex-end;
}
.wb-controls button{
  padding:8px 10px;
  border-radius:10px;
  border:4px solid var(--ink);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  font-size:13px;
}

/* slight sparkle animation for selected cards */
.wb-table-btn.selected{
  animation: sparkle 900ms ease-in-out;
}
@keyframes sparkle{
  0%{ box-shadow: 0 0 0 rgba(255,212,0,0); transform:translateY(0) scale(1); }
  50%{ box-shadow: 0 18px 36px rgba(255,212,0,0.18); transform:translateY(-4px) scale(1.02); }
  100%{ box-shadow: 0 6px 14px rgba(255,212,0,0.12); transform:translateY(0) scale(1); }
}

/* responsive tweaks */
@media (max-width:900px){
  .word-bank{
    width: calc(100% - 20px);
    padding:10px;
    margin:10px auto 18px;
  }
  .wb-table thead th{ font-size:12px; padding:8px; }
  .wb-table-td{ padding:6px 4px; min-width:140px; }
  .wb-table-btn{ padding:8px 6px; font-size:13px; }
}

/* Snow canvas sits above background halftone but behind the app UI */
#snowCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5; /* behind game overlay (z-index:60) and word-bank (z-index:20) */
  mix-blend-mode:screen;
  opacity:0.95;
}

/* ensure main content layers above the snow canvas */
header.main-title, .notebook, .word-bank, #game, .scoreboard {
  position:relative;
  z-index:10;
}