:root {
  --plaster: #f3e3b3;
  --plaster-2: #ead598;
  --oil: #4e8c82;
  --oil-2: #3f776e;
  --stripe: #2c5751;
  --skirting: #3b2a1e;
  --terrazzo: #cbb99a;
  --frame: #efe8d8;
  --ink: #2a2420;
  --paper: #fffbea;
  --chalk: #f4f1e8;
  --board: #2e4a3a;
  --sign: "Baloo 2", "Trebuchet MS", sans-serif;
  --hand: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  --chalkfont: "Caveat", "Segoe Print", cursive;
  --bay-h: 440px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--hand);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 30%, #ffffff40, transparent 30%),
    radial-gradient(circle at 80% 10%, #ffffff30, transparent 35%),
    linear-gradient(180deg, var(--plaster), var(--plaster-2));
}

/* ---------- bejárat: tábla, óra ---------- */
.entrance {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "sign clock lang" "tag tag tag";
  align-items: center;
  gap: 10px 16px;
  padding: 22px 24px 4px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.sign {
  grid-area: sign;
  justify-self: start;
  padding: 8px 22px 6px;
  background: var(--stripe);
  color: var(--frame);
  border: 4px solid var(--frame);
  outline: 3px solid var(--stripe);
  border-radius: 10px;
  box-shadow: 0 6px 0 #0000001f;
  transform: rotate(-1.5deg);
}
.sign h1 { margin: 0; font-family: var(--sign); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1; }
.sign p { margin: 2px 0 0; font-family: var(--sign); font-weight: 600; font-size: 1rem; opacity: 0.85; }

.clock { grid-area: clock; width: 92px; height: 92px; filter: drop-shadow(0 5px 0 #0000001f); }
.clock .rim { fill: #333; }
.clock .face { fill: #fffdf4; }
.clock .ticks line { stroke: #333; stroke-width: 2.4; stroke-linecap: round; }
.clock .hand { stroke: #222; stroke-linecap: round; }
.clock .h { stroke-width: 5; }
.clock .m { stroke-width: 3.4; }
.clock .s { stroke: #c8372d; stroke-width: 1.4; }
.clock .pin { fill: #c8372d; }

.lang {
  grid-area: lang;
  justify-self: end;
  font-family: var(--sign);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 6px 14px;
  border: 3px solid var(--stripe);
  border-radius: 999px;
  background: var(--frame);
  color: var(--stripe);
  cursor: pointer;
}
.lang:hover { background: #fff; }

.tagline {
  grid-area: tag;
  margin: 6px 0 0;
  text-align: center;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
}

/* ---------- a folyosó ---------- */
.corridor {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: var(--bay-h);
  width: 100%;
  margin-top: 14px;
}

/* minden fülke saját falat, olajfestéket, lábazatot és padlót rajzol, így a sorok hézagmentesen illeszkednek */
.bay {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      transparent 0 220px,
      var(--stripe) 220px 226px,
      #ffffff26 226px 229px,
      var(--oil) 229px 330px,
      var(--oil-2) 364px,
      var(--skirting) 364px 372px,
      transparent 372px);
}
/* terrazzo padló */
.bay::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--bay-h) - 372px);
  background:
    radial-gradient(circle at 30% 40%, #8f7d63 0 1.5px, transparent 2px) 0 0 / 23px 19px,
    radial-gradient(circle at 60% 70%, #f2e7d0 0 2px, transparent 2.5px) 0 0 / 31px 27px,
    radial-gradient(circle at 20% 80%, #6f8f88 0 1.2px, transparent 1.7px) 0 0 / 17px 21px,
    linear-gradient(180deg, #e3d4b8, var(--terrazzo) 30%, #bba887);
  z-index: 0;
}

/* ---------- ajtók ---------- */
.door {
  --w: min(150px, 74%);
  position: absolute;
  left: 50%;
  bottom: calc(var(--bay-h) - 368px);
  width: var(--w);
  height: 270px;
  transform: translateX(-50%);
  perspective: 800px;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  z-index: 1;
  cursor: pointer;
}
.door.soon { cursor: default; }
.door:focus-visible { outline: none; }
.door:focus-visible .frame { outline: 4px solid #ffd43b; outline-offset: 3px; }

.frame {
  position: absolute;
  inset: -11px -11px 0;
  background: var(--frame);
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 0 0 2px #00000014, 0 4px 0 #00000014;
}

/* a tanterem, amit a résnyire nyílt ajtó mutat */
.inside {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 60% 20%, #fff6d0, transparent 70%),
    linear-gradient(180deg, #f6ead0 0 70%, #c9a874 70%);
}
.inside .board {
  position: absolute;
  left: 16%; right: 8%; top: 16%;
  height: 32%;
  display: grid;
  place-items: center;
  background: var(--board);
  border: 4px solid #8a5a2b;
  color: var(--chalk);
  font-family: var(--chalkfont);
  font-size: 1.5rem;
  white-space: nowrap;
}
.inside .desks {
  position: absolute;
  left: 22%; right: 6%; top: 62%;
  height: 12%;
  background:
    linear-gradient(90deg, #8a5a2b 0 40%, transparent 40% 56%, #8a5a2b 56%) 0 0 / 100% 7px no-repeat,
    linear-gradient(90deg, #6b4220 0 4px, transparent 4px 36%, #6b4220 36% calc(36% + 4px), transparent 0 56%, #6b4220 56% calc(56% + 4px), transparent 0 calc(100% - 4px), #6b4220 0) 0 7px / 100% 100% no-repeat;
}

.leaf {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1);
  background:
    linear-gradient(90deg, #ffffff1f, transparent 30%, #0000001a),
    var(--door);
  border-radius: 3px 3px 0 0;
  box-shadow:
    inset 0 0 0 3px #00000026,
    inset 12px 150px 0 -1px transparent;
  backface-visibility: hidden;
}
/* alsó betét a lapon */
.leaf::after {
  content: "";
  position: absolute;
  left: 16%; right: 16%;
  bottom: 18px;
  height: 78px;
  border-radius: 3px;
  box-shadow: inset 2px 2px 0 #0000002e, inset -2px -2px 0 #ffffff2a;
}

.window {
  position: absolute;
  left: 16%; right: 16%;
  top: 18px;
  height: 104px;
  overflow: hidden;
  border: 5px solid #00000030;
  border-radius: 3px;
  background:
    linear-gradient(135deg, #ffffff30 0 18%, transparent 18% 30%, #ffffff1c 30% 36%, transparent 36%),
    var(--board);
}
.window.frosted {
  background:
    repeating-linear-gradient(45deg, #ffffff22 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #dfe8e4, #b9c9c3);
}
.doodle { width: 100%; height: 100%; padding: 8px; }
.doodle path, .doodle circle, .doodle ellipse {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
}
.doodle .dash { stroke-dasharray: 2 7; stroke-width: 3.4; }
.doodle text { fill: var(--chalk); font-family: var(--chalkfont); font-size: 46px; opacity: 0.88; }

.knob {
  position: absolute;
  right: 9px;
  top: 150px;
  width: 22px; height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f1d68b, #b38a2e);
  box-shadow: 0 2px 0 #0000003a;
}

/* felragasztott cetli az ajtón: mi van bent */
.paper {
  position: absolute;
  left: 50%;
  top: 158px;
  width: 78%;
  transform: translateX(-50%) rotate(-3deg);
  padding: 6px 7px 7px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 0.98rem;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 3px 4px #00000030;
}
.paper::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 38px; height: 14px;
  transform: translateX(-50%) rotate(4deg);
  background: #ffffff9c;
  box-shadow: 0 0 0 1px #0000000d;
}

/* névtábla az ajtó fölött */
.plate {
  position: absolute;
  left: 50%;
  top: -64px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 14px 2px;
  white-space: nowrap;
  background: linear-gradient(180deg, #fbf6e8, #e6dcc2);
  border: 2px solid #b7a67c;
  border-radius: 6px;
  box-shadow: 0 3px 0 #0000001c;
}
.plate b { font-family: var(--sign); font-weight: 800; font-size: 1.25rem; color: var(--door); filter: brightness(0.8); }
.plate small { font-family: var(--sign); font-weight: 600; font-size: 0.85rem; color: #6d6450; }

/* fény a padlón, ha nyílik az ajtó */
.spill {
  position: absolute;
  left: 0; right: -30%;
  top: 100%;
  height: 60px;
  clip-path: polygon(0 0, 100% 0, 130% 100%, -10% 100%);
  background: linear-gradient(180deg, #fff3c4cc, transparent);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}

a.door:hover .leaf, a.door:focus-visible .leaf { transform: rotateY(-34deg); }
a.door:hover .spill, a.door:focus-visible .spill { opacity: 0.55; }
a.door.opening .leaf { transform: rotateY(-108deg); transition-duration: 0.6s; }
a.door.opening .spill { opacity: 1; }
a.door.opening .inside { animation: glow 0.6s forwards; }
@keyframes glow { to { filter: brightness(1.25); } }

/* hamarosan nyíló termek: festés alatt */
.door.soon .plate { opacity: 0.7; }
.door.soon .leaf { filter: saturate(0.7); }
.door.soon .window { filter: grayscale(0.4) brightness(0.85); }
.tape {
  position: absolute;
  left: -14%;
  width: 128%;
  height: 22px;
  top: 112px;
  background: repeating-linear-gradient(-45deg, #f6c400 0 12px, #1c1c1c 12px 24px);
  box-shadow: 0 2px 3px #0000004a;
}
.tape.t1 { transform: rotate(28deg); }
.tape.t2 { transform: rotate(-28deg); }
.door.soon .paper { top: 186px; z-index: 1; transform: translateX(-50%) rotate(2deg); }

/* tanári: kopogtatható */
.door.staff .paper { font-size: 1.15rem; }
.door.staff.knocked .leaf { animation: knock 0.4s; }
@keyframes knock {
  20% { transform: translateX(-2px) rotate(-0.4deg); }
  40% { transform: translateX(2px) rotate(0.4deg); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(1px); }
}
.bubble {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 190px;
  transform: translate(-50%, 6px);
  padding: 10px 12px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-family: var(--hand);
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 3;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -9px;
  width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: #fff;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.bubble.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- hirdetőtábla ---------- */
.cork {
  position: absolute;
  left: 8%; right: 8%;
  top: 60px;
  height: 250px;
  z-index: 1;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
  align-content: start;
  background:
    radial-gradient(circle at 20% 30%, #00000014 0 1px, transparent 1.5px) 0 0 / 7px 9px,
    radial-gradient(circle at 70% 60%, #ffffff1f 0 1px, transparent 1.5px) 0 0 / 11px 8px,
    #c49a63;
  border: 9px solid #8a5a2b;
  border-radius: 4px;
  box-shadow: 0 6px 0 #00000022;
}
.note {
  position: relative;
  padding: 8px 8px 7px;
  background: var(--paper);
  box-shadow: 0 2px 3px #0000003a;
  font-size: 0.9rem;
  line-height: 1.15;
}
.note h3 { margin: 0 0 2px; font-family: var(--sign); font-weight: 800; font-size: 0.82rem; }
.note p { margin: 0; }
.note.n0 { transform: rotate(-2deg); background: #fff4a8; }
.note.n1 { transform: rotate(1.5deg); }
.note.n2 { grid-column: 1 / -1; transform: rotate(-0.8deg); background: #d6ecff; }
.tack {
  position: absolute;
  top: -4px; left: 50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8f8f, #c8372d);
  box-shadow: 0 2px 0 #0000003a;
}

/* ---------- díszletek ---------- */
.prop { position: absolute; z-index: 1; }
.paint { right: 4%; bottom: calc(var(--bay-h) - 376px); width: 84px; }
.paint .ladder { fill: none; stroke: #9a6a38; stroke-width: 5; stroke-linecap: round; }
.paint .bucket { fill: #d9d9d9; stroke: #777; stroke-width: 2; }
.paint .drip { fill: var(--door); }

.plant { left: 50%; transform: translateX(-50%); bottom: calc(var(--bay-h) - 376px); width: 110px; }
.plant .leafy { fill: #4f9a4a; stroke: #2f6d2d; stroke-width: 2; }
.plant .pot { fill: #c06a3e; }
.plant .pot-rim { fill: #a85a33; }

.bench { left: 50%; transform: translateX(-50%); bottom: calc(var(--bay-h) - 380px); width: 170px; }
.bench .seat { fill: #b07a43; }
.bench .legs { fill: none; stroke: #444; stroke-width: 5; stroke-linecap: round; }
.bench .bag { fill: #e0574e; }
.bench .bag-flap { fill: #c2443c; }

.lockers {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bay-h) - 366px);
  width: min(150px, 80%);
  height: 230px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: #5d6b78;
}
.lockers i {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, #00000033 14px 16px) 50% 14px / 60% 34px no-repeat,
    linear-gradient(90deg, #8ea4b8, #7b93a8);
}
.lockers i::after {
  content: "";
  position: absolute;
  right: 6px; top: 46%;
  width: 4px; height: 16px;
  border-radius: 2px;
  background: #3b4652;
}
.lockers .sticker::before {
  content: "";
  position: absolute;
  left: 18%; top: 62%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 40%, #222 0 2px, transparent 2.5px), radial-gradient(circle at 65% 40%, #222 0 2px, transparent 2.5px), #ffd43b;
  transform: rotate(-12deg);
}

/* ---------- lábléc ---------- */
.foot {
  padding: 14px 16px 20px;
  text-align: center;
  background: #bba887;
}
.foot a { color: var(--ink); font-size: 1.1rem; }

/* ---------- keskeny képernyő ---------- */
@media (max-width: 560px) {
  .entrance {
    grid-template-columns: 1fr auto;
    grid-template-areas: "sign lang" "clock clock" "tag tag";
    padding: 16px 16px 0;
  }
  .clock { width: 72px; height: 72px; justify-self: center; }
  .corridor { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .door { --w: min(140px, 80%); }
  .plate b { font-size: 1.05rem; }
  .cork { left: 4%; right: 4%; grid-template-columns: 1fr; padding: 8px; gap: 6px; }
  .note.n2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .leaf, .spill, .bubble { transition: none; }
  .door.staff.knocked .leaf { animation: none; }
}