:root {
  --wall: #e9dcc3;
  --wall-2: #dccaa7;
  --board: #2e4a3a;
  --board-2: #263f31;
  --wood: #8a5a2b;
  --wood-2: #6b4220;
  --chalk: #f4f1e8;
  --chalk-dim: #c9d3c6;
  --paper: #fffbea;
  --ink: #2b2b2b;
  --hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --print: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font-family: var(--print);
  color: var(--chalk);
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, #0000000a 118px 120px),
    linear-gradient(180deg, var(--wall), var(--wall-2));
}

.room { padding: 28px 24px 18px; max-width: 1280px; margin: 0 auto; }

/* ---------- a tábla ---------- */
.board {
  position: relative;
  padding: 26px 34px 70px;
  border-radius: 10px;
  border: 18px solid var(--wood);
  border-image: linear-gradient(135deg, #a06a35, var(--wood) 30%, var(--wood-2) 70%, #93602f) 1;
  box-shadow: 0 18px 40px #0005, inset 0 0 80px #0007;
  background:
    radial-gradient(ellipse at 20% 15%, #ffffff10, transparent 45%),
    radial-gradient(ellipse at 80% 70%, #ffffff0c, transparent 50%),
    radial-gradient(ellipse at 55% 40%, #ffffff08, transparent 35%),
    linear-gradient(160deg, var(--board), var(--board-2));
  overflow: hidden;
}
/* kréta-maszat */
.board::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60px 18px at 30% 62%, #ffffff0d, transparent),
    radial-gradient(90px 22px at 70% 22%, #ffffff0b, transparent),
    radial-gradient(120px 30px at 15% 88%, #ffffff09, transparent);
  filter: blur(2px);
}

.board-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: relative; z-index: 1; }
.date-corner { font-family: var(--hand); font-size: 1.5rem; line-height: 1.1; display: flex; flex-direction: column; color: var(--chalk-dim); }
.lang { font-family: var(--hand); font-size: 1.6rem; display: flex; align-items: center; gap: 4px; color: var(--chalk-dim); }
.lang button {
  background: none; border: 0; color: var(--chalk-dim); font: inherit; cursor: pointer; padding: 0 6px;
  border-radius: 50%;
}
.lang button.on { color: var(--chalk); outline: 2px solid #f4f1e8aa; outline-offset: -2px; border-radius: 40% 55% 45% 60%; }

/* ---------- fejléc ---------- */
.hero { position: relative; display: flex; align-items: center; gap: 22px; margin: 6px 0 22px; min-height: 170px; }
.hero h1 {
  font-family: var(--hand); font-weight: 700; margin: 0;
  font-size: clamp(3.2rem, 9vw, 6.2rem); line-height: .9; letter-spacing: 1px;
  text-shadow: 0 0 2px #fff8, 2px 2px 0 #ffffff14, -1px 1px 3px #fff3;
  transform: rotate(-2deg);
}
.topic { font-family: var(--hand); font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 10px 0 0; color: var(--chalk-dim); }
.topic u { text-decoration-color: #ffd43b; text-decoration-thickness: 2px; text-underline-offset: 5px; color: var(--chalk); }

.flask { width: 110px; flex: none; transform: rotate(-6deg); }
.flask .glass { fill: none; stroke: var(--chalk); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.flask .liquid, .flask .wave { fill: #69db7c; opacity: .75; }
.flask .wave { animation: slosh 3s ease-in-out infinite; }
.flask .bubble { fill: #e6fcf5; opacity: .9; animation: rise 2.4s ease-in infinite; }
.flask .b2 { animation-delay: .6s; }
.flask .b3 { animation-delay: 1.2s; animation-duration: 2.9s; }
.flask .b4 { animation-delay: 1.8s; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-58px); opacity: 0; } }
@keyframes slosh { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-30px); } }

.doodle { position: absolute; color: var(--chalk-dim); opacity: .55; pointer-events: none; font-family: var(--hand); }
.benzene { width: 92px; right: 6%; top: 0; transform: rotate(12deg); }
.benzene polygon, .benzene circle { fill: none; stroke: var(--chalk-dim); stroke-width: 3; stroke-linejoin: round; }
.formula { font-size: 1.8rem; }
.f1 { right: 20%; top: 8px; transform: rotate(-8deg); }
.f2 { right: 3%; bottom: -6px; transform: rotate(3deg); font-size: 1.5rem; }
.f3 { right: 40%; top: 0; transform: rotate(6deg); font-size: 1.5rem; }

/* ---------- leckék ---------- */
.lessons h2 { font-family: var(--hand); font-size: 2.3rem; margin: 0 0 14px; font-weight: 700; position: relative; }
.lessons h2 small { font-size: 1.5rem; color: var(--chalk-dim); font-weight: 500; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 22px; }

.card {
  position: relative; display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 18px 16px 16px; border-radius: 4px; text-decoration: none; font: inherit; cursor: pointer;
  transform: rotate(var(--tilt));
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.ready {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 8px 18px #0006, inset 0 -30px 40px -30px #00000012;
}
.card.ready:hover, .card.ready:focus-visible {
  transform: rotate(0deg) scale(1.05) translateY(-4px);
  box-shadow: 0 16px 28px #0007;
  outline: none;
}
.card.soon {
  background: transparent; color: var(--chalk);
  border: 2.5px dashed #f4f1e899; border-radius: 14px 18px 12px 20px;
}
.card.soon:hover { border-color: var(--chalk); }
.card.shake { animation: shake .45s ease; }
@keyframes shake {
  0%, 100% { transform: rotate(var(--tilt)); }
  20% { transform: rotate(calc(var(--tilt) - 4deg)) translateX(-4px); }
  40% { transform: rotate(calc(var(--tilt) + 4deg)) translateX(4px); }
  60% { transform: rotate(calc(var(--tilt) - 2deg)); }
  80% { transform: rotate(calc(var(--tilt) + 2deg)); }
}

.pin {
  position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a8a, #d6332f 60%, #8f1d1a);
  box-shadow: 1px 3px 4px #0006;
}

.tile {
  flex: none; position: relative; width: 70px; height: 76px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--c); background: color-mix(in srgb, var(--c) 22%, transparent);
  font-family: "Segoe UI", system-ui, sans-serif;
}
.card.ready .tile { background: color-mix(in srgb, var(--c) 35%, white); border-color: color-mix(in srgb, var(--c) 70%, black); }
.card.soon .tile { border-style: dashed; color: var(--chalk); }
.tile-num { position: absolute; top: 3px; left: 6px; font-size: .75rem; opacity: .8; }
.tile-sym { font-size: 2rem; font-weight: 800; }

.card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-body b { font-family: var(--hand); font-size: 1.75rem; line-height: 1; }
.card-body > span { font-size: 1.05rem; line-height: 1.25; }
.card.soon .card-body > span { color: var(--chalk-dim); }
.go { margin-top: 6px; font-family: var(--hand); font-size: 1.5rem !important; color: #c92a2a; }
.soon-tag { margin-top: 6px; font-size: .95rem !important; color: #ffd43b !important; }
.soon-tag i { color: var(--chalk-dim); }

/* ---------- cetlik ---------- */
.extras { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 26px; margin-top: 40px; align-items: start; }
.note {
  position: relative; color: var(--ink); padding: 20px 18px 16px;
  box-shadow: 0 8px 16px #0005;
}
.note h3 { font-family: var(--hand); font-size: 1.9rem; margin: 0 0 6px; line-height: 1; }
.note p, .note li { font-size: 1.12rem; line-height: 1.35; }
.note p { margin: 0 0 10px; }
.note ol { margin: 0; padding-left: 22px; }
.joke { background: #fff3bf; transform: rotate(-1.5deg); }
.rules { background: #d0ebff; transform: rotate(1.2deg); }
.homework { background: #ffdeeb; transform: rotate(-.6deg); }
#joke { min-height: 3em; }
#joke.write { animation: write .5s ease-out; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.chalk-btn {
  font-family: var(--hand); font-size: 1.4rem; cursor: pointer;
  background: var(--board); color: var(--chalk); border: 0; border-radius: 6px; padding: 4px 14px;
  box-shadow: 0 3px 0 #1a2c22;
}
.chalk-btn:hover { background: #355743; }
.chalk-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a2c22; }

/* ---------- krétatartó ---------- */
.tray {
  position: absolute; left: -18px; right: -18px; bottom: -18px; height: 26px;
  background: linear-gradient(180deg, #a06a35, var(--wood-2));
  box-shadow: 0 -2px 6px #0004;
}
.chalk { position: absolute; bottom: 14px; height: 10px; border-radius: 3px; background: #f8f9fa; box-shadow: inset -3px 0 0 #dee2e6; }
.c1 { left: 12%; width: 54px; }
.c2 { left: 18%; width: 30px; background: #ffd8a8; transform: rotate(-4deg); }
.c3 { left: 64%; width: 40px; background: #a5d8ff; }
.eraser {
  position: absolute; bottom: 14px; right: 14%; width: 86px; height: 24px; border-radius: 4px;
  background: linear-gradient(180deg, #c08a4e 0 55%, #495057 55%);
  box-shadow: 0 2px 3px #0005;
}

.foot { text-align: center; color: #6b5435; font-size: 1.05rem; margin-top: 30px; }

/* ---------- értesítés ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 140%);
  background: var(--board); color: var(--chalk); font-family: var(--hand); font-size: 1.6rem;
  padding: 8px 20px; border-radius: 10px; border: 3px solid var(--wood);
  box-shadow: 0 10px 24px #0006; transition: transform .3s ease, opacity .3s ease; pointer-events: none;
  opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 860px) {
  .extras { grid-template-columns: 1fr; }
  .doodle.f1, .doodle.f3 { display: none; }
}
@media (max-width: 560px) {
  .room { padding: 12px 8px; }
  .board { padding: 16px 16px 60px; border-width: 12px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding-right: 78px; }
  .lessons h2 { line-height: 1.1; }
  .flask { width: 70px; position: absolute; right: 0; top: 0; }
  .benzene, .doodle.f2 { display: none; }
  .date-corner { font-size: 1.2rem; }
}