:root{
  --gap:16px;
  --bg:#f6f6f6;
  --card-bg:#fff;
  --fg:#111;
  --accent:#0b66ff;
  --comic-primary:#ffdd57;
  --comic-accent:#ff6b6b;
  --comic-ink:#212121;
  --square-size: min(92vmin, 720px);
  --card-radius:12px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}

/* Comic-style page background: halftone dots, soft panels and scattered speech-bubble motifs */
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--gap);
  padding:24px;
  min-height:100vh;
  box-sizing:border-box;
  overflow:auto;

  /* layered comic effect using gradients to avoid external images */
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.9) 0px, rgba(255,255,255,0.0) 120px),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.95) 0px, rgba(255,255,255,0) 140px),
    linear-gradient(180deg, rgba(255,245,230,0.6), rgba(255,245,230,0.35)),
    repeating-radial-gradient(circle at 20% 10%, rgba(0,0,0,0.02) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(135deg, rgba(11,102,255,0.03) 0 2px, transparent 2px 10px),
    #fffaf0;
  background-blend-mode:normal,normal,overlay,overlay,overlay,normal;
  position:relative;
}

/* Decorative comic bubbles using pseudo-elements so they don't affect layout */
body::before,
body::after{
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.12;
  filter: blur(0.5px);
}

/* Large soft speech bubble top-left */
body::before{
  top: 40px;
  left: 6%;
  width: 260px;
  height: 120px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.85) 35%),
    linear-gradient(90deg, var(--comic-primary), #ffd36b);
  border-radius: 36px;
  transform: rotate(-6deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

/* Small comic burst bottom-right with text-like motifs */
body::after{
  right: 6%;
  bottom: 80px;
  width: 220px;
  height: 100px;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.8) 30%),
    linear-gradient(90deg, #ffb3b3, var(--comic-accent));
  border-radius: 26px;
  transform: rotate(8deg);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

/* Faint, playful words layered as pseudo-element on the grid to hint comic tone (non-offensive) */
.cards-grid::before{
  content: "ARGH  !  WHOA  STOP  HMM";
  position:absolute;
  top: calc( (100vh - var(--square-size)) / 2 + 20px );
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  font-size: 46px;
  font-weight: 800;
  color: rgba(33,33,33,0.03);
  letter-spacing: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* Page title above cards */
.page-title{
  width:var(--square-size);
  max-width:100%;
  text-align:center;
  font-weight:700;
  letter-spacing:0.06em;
  font-size:clamp(28px, 6vw, 48px);
  color:var(--comic-ink);
  margin-top:6px;
  margin-bottom:6px;
  text-transform:uppercase;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(0,0,0,0.06);
}

/* Top square video */
.video-header{
  width:var(--square-size);
  height:var(--square-size);
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(180deg,#000,#111);
  border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,0.18);
  position:relative;
  flex-shrink:0;
  overflow:visible;
}

/* Add a subtle halftone frame around the video */
.video-header::after{
  content: "";
  position:absolute;
  inset:6px;
  border-radius:10px;
  background:
    radial-gradient(circle at 10% 10%, rgba(0,0,0,0.06), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* Force the video into a square and show the whole face */
#topVideo{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:8px;
  background:#000;
}

/* Cards grid */
.cards-grid{
  width:100%;
  max-width:1100px;
  display:grid;
  /* Fixed three columns layout by default, with flexible sizing */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  align-items:start;
  padding-bottom:40px;
  position:relative; /* so pseudo decorations can position relative to grid */
  z-index:1;
}

/* Responsive fallbacks: 2 columns on medium, 1 column on narrow */
@media (max-width:900px){
  .cards-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:520px){
  .cards-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Card */
.card{
  background:linear-gradient(180deg,var(--card-bg), #fffaf7);
  border-radius:var(--card-radius);
  box-shadow:0 8px 22px rgba(16,24,40,0.08);
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
  min-height:300px;
  border: 1px solid rgba(11,102,255,0.04);
}

.card:focus,
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(16,24,40,0.14);
  outline:3px solid rgba(11,102,255,0.12);
}

.card-image-wrap{
  width:100%;
  aspect-ratio:16/10;
  background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(11,102,255,0.02));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

/* small comic corner accent on each image */
.card-image-wrap::before{
  content: "";
  position:absolute;
  top:8px;
  right:8px;
  width:56px;
  height:24px;
  background:linear-gradient(90deg,var(--comic-primary), #ffd36b);
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,0.08);
  transform: rotate(6deg);
  opacity:0.9;
}

/* subtle halftone overlay on images */
.card-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  mix-blend-mode: normal;
  position:relative;
}

/* Body */
.card-body{
  padding:12px 14px 16px 14px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-direction:column;
}

.card-question{
  font-size:18px;
  line-height:1.1;
  margin:0 0 6px 0;
  color:var(--comic-ink);
}

/* Model answer text below the question */
.card-answer{
  font-size:14px;
  line-height:1.3;
  margin:0;
  color:#3b3b3b;
  opacity:0.95;
}

/* Accessibility: ensure large tap targets on mobile */
@media (max-width:520px){
  .card{min-height:220px}
  .card-question{font-size:16px}
}

/* Model answer level styling */
.model-answers{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.model-level{background:rgba(11,102,255,0.04);padding:8px;border-radius:8px;font-size:14px}
.model-level strong{display:block;margin-bottom:6px;font-weight:700;color:var(--accent)}
.model-a2{background:rgba(0,0,0,0.03)}
.model-b2{background:rgba(11,102,255,0.04)}
.model-c1{background:rgba(11,102,255,0.06)}
.model-level p{margin:0;color:#333;line-height:1.3}

/* Glossary styling */
.glossary{width:100%;display:block}
.glossary-title{font-size:20px;margin:6px 0 8px;font-weight:700;color:var(--comic-ink)}
.glossary-note{font-size:13px;color:#555;margin-bottom:8px}
.glossary-table-wrap{background:var(--card-bg);border-radius:10px;padding:8px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.glossary-row{display:grid;grid-template-columns:1fr 2fr 1.2fr;gap:12px;padding:10px;border-bottom:1px solid rgba(0,0,0,0.04);align-items:center}
.glossary-head{font-weight:700;background:transparent;border-bottom:2px solid rgba(0,0,0,0.06);padding-top:12px;padding-bottom:12px}
.cell{font-size:14px;color:#333}
.cell.word{font-weight:700;color:#b41a1a}
.cell.polite{color:#0b66ff;font-weight:600}
.cell.usage{color:#444;font-size:13px}
@media (max-width:820px){
  .glossary-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .glossary-row .usage{grid-column:1 / -1;margin-top:6px}
}
@media (max-width:520px){
  .glossary-title{font-size:18px}
  .glossary-row{padding:8px;gap:8px}
  .cell{font-size:13px}
}