:root{
  --paper:#f6f2e8;
  --paper-2:#efe9d8;
  --ink:#1a1a1a;
  --ink-soft:#2a2a2a;
  --line:#1a1a1a;
  --muted:#9a958a;
  --hi:#fff45c;
  --accent:#ff5a3c;
  --accent-2:#3d6bff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family: 'Noto Sans Hebrew', sans-serif;}
.en, .lbl, .meta, .ipa{font-family:"Patrick Hand","Special Elite",monospace;}
.ro{font-family:"Special Elite","Patrick Hand",monospace;}
body{
  background-image:
    radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 22px 22px, 7px 7px;
  background-position: 0 0, 11px 11px;
}

@media (prefers-reduced-motion: no-preference){
  body{animation:pageFadeIn .3s ease-out;}
  @keyframes pageFadeIn{from{opacity:0;}to{opacity:1;}}
}

/* ── App Shell ─────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  box-shadow:0 6px 0 -3px rgba(0,0,0,.08);
}
.topbar-row{display:contents;}
.topbar h1{
  margin:0;font-family:"Playfair Display",serif;font-weight:700;font-size:34px;letter-spacing:.3px;
  display:flex;align-items:center;gap:10px;
}
.nav-toggle{display:none;}
.topbar h1 .stamp{
  font-family: 'Noto Sans Hebrew', sans-serif;font-style:italic;font-size:14px;
  border:1.5px solid var(--ink);padding:3px 12px;border-radius:4px;background:var(--hi);
  white-space:nowrap;
}
.topbar .crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;font-family: 'Noto Sans Hebrew', sans-serif;font-size:22px;color:var(--ink-soft);}
.topbar .crumbs #nav-links{display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;}
.topbar .crumbs a{color:inherit;text-decoration:none;padding-bottom:2px;border-bottom:2px dashed transparent;cursor:pointer;}
.topbar .crumbs a.active{border-bottom-color:var(--ink);}
.topbar .crumbs a#random-activity{
  border:1.5px solid var(--ink);border-radius:4px;padding:3px 10px;background:var(--hi);
  transform:rotate(-2deg);
}
.topbar .crumbs a#random-activity:hover{transform:rotate(0deg) translateY(-1px);}
.topbar .meta{font-family:"Special Elite";font-size:11px;color:#666;direction:ltr;}
.topbar .crumbs .daily-goal{
  display:flex;align-items:center;gap:6px;
  font-family:"Special Elite",monospace;font-size:12px;color:var(--ink-soft);
  border:1.5px solid var(--ink);border-radius:4px;padding:4px 10px;background:var(--paper-2);
  cursor:default;white-space:nowrap;
}
.topbar .crumbs .daily-goal .dg-bar{
  width:40px;height:6px;border:1px solid var(--ink);border-radius:3px;background:#fffef8;overflow:hidden;
}
.topbar .crumbs .daily-goal .dg-fill{height:100%;background:var(--hi);width:0%;transition:width .3s;}
.topbar .crumbs .daily-goal.done{background:var(--hi);}
.topbar .crumbs .daily-goal.done .dg-fill{background:var(--accent);}

.site-footer{
  max-width:1480px;margin:0 auto;padding:20px 28px 40px;
  border-top:2px dashed var(--ink);
}
.site-footer-inner{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:"Special Elite",monospace;font-size:12px;color:#777;text-align:center;
}
.site-footer-inner a{color:inherit;}
@media (max-width:720px){ .site-footer{padding:16px 16px 32px;} }

.page{max-width:1480px;margin:0 auto;padding:28px 28px 120px;}
.page-hd{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:18px;border-bottom:2px dashed var(--ink);padding-bottom:14px;
}
.page-hd h2{
  margin:0;font-family: 'Noto Sans Hebrew', sans-serif;font-weight:400;font-size:42px;line-height:1.1;
}
.page-hd h2 em{font-style:normal;background:var(--hi);padding:0 6px;transform:rotate(-1deg);display:inline-block;}
.page-hd p{margin:0;max-width:540px;font-size:18px;color:#3a3a3a;line-height:1.4;}

.vset-tabs{display:flex;gap:0;margin-top:14px;}
.vset-tabs button{
  appearance:none;background:transparent;border:2px solid var(--ink);border-left:0;
  font-family: 'Noto Sans Hebrew', sans-serif;font-size:20px;padding:6px 16px;cursor:pointer;color:var(--ink);
  transform:rotate(-.3deg);
}
.vset-tabs button:last-child{border-left:2px solid var(--ink);}
.vset-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

/* ── Wireframe Grid ─────────────────────────────────── */
.wf-grid{display:grid;gap:28px;}
.wf-grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr));}
.wf-grid.cols-1{grid-template-columns:minmax(0,1fr);}
@media (max-width: 1100px){.wf-grid.cols-2{grid-template-columns:minmax(0,1fr);}}

.wf{
  position:relative;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:6px;
  padding:18px;
  box-shadow:-6px 6px 0 0 rgba(0,0,0,.85);
  transform:rotate(-.15deg);
}
.wf:nth-child(2n){transform:rotate(.2deg);}
.wf:nth-child(3n){transform:rotate(-.3deg);}
.wf-frame{
  position:relative;
  border:2px solid var(--ink);
  background:#fffef8;
  border-radius:4px;
  overflow:hidden;
}

/* generic */
.box{border:2px solid var(--ink);background:#fff;border-radius:4px;}
.box.dashed{border-style:dashed;}
.box.fill{background:var(--paper-2);}
.box.dark{background:var(--ink);color:var(--paper);}
.lbl{font-family:"Special Elite";font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#666;direction:ltr;text-align:right;}
.placeholder-img{
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 6px, transparent 6px 12px),
    #fffef8;
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:"Special Elite";font-size:11px;color:#555;text-align:center;padding:6px;direction:ltr;
}
.pill{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:3px 10px;font-size:14px;background:#fff;font-family: 'Noto Sans Hebrew', sans-serif;}
.pill.hi{background:var(--hi);}
.pill.dark{background:var(--ink);color:var(--paper);}
.pill.gold{background:#f5c542;border-color:#1a1a1a;}
.pill.free{background:#c8f5b0;}
a.pill{text-decoration:none;color:inherit;cursor:pointer;transition:transform .1s;}
a.pill:hover{transform:translateY(-2px);}
.hp4 .ribbon a{text-decoration:none;color:inherit;cursor:pointer;}
.hp4 .ribbon a:hover{text-decoration:underline;}

/* ── Ad placements ── */
.ad-banner{
  border:2px dashed #777;background:repeating-linear-gradient(45deg,#f5f3ec,#f5f3ec 8px,#ebe8df 8px,#ebe8df 16px);
  padding:10px 14px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;
  font-family:"Special Elite";font-size:11px;color:#555;direction:ltr;text-align:left;
}
.ad-banner .ad-tag{background:#fff;border:1px solid #888;border-radius:3px;padding:1px 5px;font-size:9px;letter-spacing:1px;}
.ad-banner .ad-body{flex:1;padding:0 12px;font-size:12px;color:#444;}
.ad-banner .ad-cta{border:1.5px solid #555;background:#fff;padding:3px 10px;border-radius:3px;font-size:11px;}
.ad-native{
  border:2px dashed #888;background:#f8f6ee;border-radius:6px;padding:10px;
  display:flex;flex-direction:column;gap:4px;position:relative;
}
.ad-native .ad-tag{
  position:absolute;top:6px;left:6px;background:#fff;border:1px solid #888;border-radius:3px;
  padding:1px 5px;font-size:9px;letter-spacing:1px;font-family:"Special Elite";color:#555;direction:ltr;
}
.ad-native .ad-img{
  height:60px;background:repeating-linear-gradient(45deg,#ddd,#ddd 6px,#ccc 6px,#ccc 12px);
  border:1px solid #aaa;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:"Special Elite";font-size:10px;color:#666;direction:ltr;margin-top:14px;
}
.ad-native .ad-ttl{font-family: 'Noto Sans Hebrew', sans-serif;font-size:16px;color:#333;}
.ad-native .ad-meta{font-family:"Special Elite";font-size:10px;color:#666;direction:ltr;}

/* density */
.wf-grid.packed{gap:18px;}
.wf-grid.packed .wf{padding:12px;box-shadow:-4px 4px 0 0 rgba(0,0,0,.85);}
.wf-grid.sparse{gap:42px;}
.wf-grid.sparse .wf{padding:24px;box-shadow:-8px 8px 0 0 rgba(0,0,0,.85);}

/* ── Home A: ridiculous mascot ── */
.hp1{padding:20px;display:grid;grid-template-columns:1.2fr .9fr;gap:20px;min-height:380px;}
.hp1 .hero h3{font-family: 'Noto Sans Hebrew', sans-serif;font-weight:400;font-size:42px;margin:0 0 6px;line-height:1.1;}
.hp1 .hero .accent{background:var(--hi);padding:0 6px;}
.hp1 .goat{
  border:2px solid var(--ink);background:#fff;border-radius:6px;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-family:"Special Elite";font-size:11px;color:#555;text-align:center;direction:ltr;
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 8px, transparent 8px 16px);
  position:relative;
}
.hp1 .goat .speech{
  position:absolute;top:-14px;left:-10px;
  border:2px solid var(--ink);background:var(--hi);
  padding:6px 10px;font-family: 'Noto Sans Hebrew', sans-serif;font-size:18px;transform:rotate(-4deg);
  border-radius:14px 14px 2px 14px;
}
.hp1 .ctas{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.hp1 .cta{border:2px solid var(--ink);padding:10px 16px;background:#fff;border-radius:4px;font-family: 'Noto Sans Hebrew', sans-serif;font-size:22px;}
.hp1 .cta.primary{background:var(--ink);color:var(--paper);box-shadow:-3px 3px 0 var(--accent);}
.hp1 .strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.hp1 .strip .b{border:2px solid var(--ink);height:64px;background:#fff;display:flex;align-items:center;justify-content:center;font-family: 'Noto Sans Hebrew', sans-serif;font-size:18px;}
.hp1 .strip .b:nth-child(2){background:var(--hi);}

/* ── Home B: 3-panel menu ── */
.hp2{display:grid;grid-template-columns:repeat(3,1fr);min-height:380px;}
.hp2 .panel{border-left:2px solid var(--ink);padding:20px;display:flex;flex-direction:column;justify-content:space-between;position:relative;}
.hp2 .panel:last-child{border-left:0;}
.hp2 .panel:nth-child(2){background:var(--paper-2);}
.hp2 .panel h4{font-family: 'Noto Sans Hebrew', sans-serif;font-weight:400;font-size:30px;margin:0 0 6px;line-height:1.15;}
.hp2 .panel .num{font-family:"Special Elite";font-size:12px;color:#888;direction:ltr;}
.hp2 .panel .icon{
  height:80px;border:2px dashed var(--ink);border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:"Special Elite";font-size:11px;color:#666;margin:14px 0;direction:ltr;
}
.hp2 .panel button{
  align-self:flex-start;border:2px solid var(--ink);background:#fff;
  padding:8px 14px;font-family: 'Noto Sans Hebrew', sans-serif;font-size:20px;cursor:pointer;
}

/* ── Home C: journey map ── */
.hp3{padding:20px;min-height:380px;position:relative;}
.hp3 h3{font-family: 'Noto Sans Hebrew', sans-serif;font-weight:400;font-size:32px;margin:0 0 14px;}
.hp3 .map{position:relative;height:260px;border:2px dashed var(--ink);border-radius:4px;background:#fff;}
.hp3 .station{
  position:absolute;width:54px;height:54px;border-radius:50%;
  border:2.5px solid var(--ink);background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family: 'Noto Sans Hebrew', sans-serif;font-size:18px;font-weight:700;
}
.hp3 .station.done{background:var(--hi);}
.hp3 .station.now{background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--ink);}
.hp3 .lbl-st{position:absolute;font-family: 'Noto Sans Hebrew', sans-serif;font-size:16px;color:#333;}
.hp3 svg.line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* ── Home D: magazine collage ── */
.hp4{padding:18px;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto 1fr auto;gap:14px;min-height:380px;}
.hp4 .big{
  grid-column:1/2;grid-row:1/3;
  border:2px solid var(--ink);background:#fff;padding:18px;position:relative;
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 28px);
}
.hp4 .big h3{font-family: 'Noto Sans Hebrew', sans-serif;font-weight:400;font-size:48px;line-height:1.05;margin:0 0 10px;}
.hp4 .big .underline{background:var(--hi);padding:0 6px;}
.hp4 .side1{grid-column:2/3;grid-row:1/2;border:2px solid var(--ink);padding:14px;background:var(--paper-2);}
.hp4 .side2{grid-column:2/3;grid-row:2/3;border:2px solid var(--ink);padding:14px;background:var(--ink);color:var(--paper);}
.hp4 .ribbon{grid-column:1/-1;grid-row:3/4;border:2px solid var(--ink);background:#fff;padding:10px;display:flex;justify-content:space-between;font-family: 'Noto Sans Hebrew', sans-serif;font-size:18px;}

/* ── Library 2 — tarot ── */
.lib2{padding:18px;min-height:420px;background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 6px, transparent 6px 14px);}
.lib2 .deck{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;}
.lib2 .tarot{
  border:2px solid var(--ink);background:#fff;border-radius:6px;
  aspect-ratio:2/3;padding:8px;position:relative;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:-2px 2px 0 var(--ink);
  min-width:0;
}
.lib2 .tarot:nth-child(2n){transform:rotate(-1deg);background:var(--paper-2);}
.lib2 .tarot:nth-child(3n){transform:rotate(1.5deg);}
.lib2 .tarot .ttl{font-family: 'Noto Sans Hebrew', sans-serif;font-size:16px;line-height:1.1;text-align:center;}
.lib2 .tarot .ill{flex:1;margin:6px 0;border:2px dashed var(--ink);display:flex;align-items:center;justify-content:center;font-family:"Special Elite";font-size:9px;color:#666;direction:ltr;}
.lib2 .tarot .tarot-hd{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px;}
.lib2 .tarot .tarot-hd .ttl{text-align:center;flex:none;min-width:0;}
.lib2 .tarot .tarot-hd .fav-heart{width:38px;height:38px;font-size:20px;}
.fav-heart{
  width:32px;height:32px;padding:0;border:1.5px solid var(--ink);border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;cursor:pointer;opacity:.65;flex:none;
  transition:transform .15s, opacity .15s, background .15s;
}
.fav-heart:hover{opacity:1;transform:scale(1.12);}
.fav-heart.active{background:#ffd9d2;color:var(--accent);opacity:1;}
@keyframes heart-pop{
  0%{transform:scale(1) rotate(0);}
  30%{transform:scale(1.55) rotate(-10deg);}
  55%{transform:scale(.85) rotate(6deg);}
  75%{transform:scale(1.1) rotate(-3deg);}
  100%{transform:scale(1) rotate(0);}
}
.fav-heart.pulse{animation:heart-pop .5s ease;}

.lib2 .tarot.ad-slot{
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 6px, transparent 6px 14px);
  border-style:dashed;align-items:center;justify-content:center;text-align:center;
  box-shadow:none;transform:none !important;
}
.lib2 .tarot.ad-slot .ad-tag{background:#fff;border:1px solid #888;border-radius:3px;padding:1px 5px;font-size:9px;letter-spacing:1px;}
.lib2 .tarot.ad-slot .lbl{font-family:"Special Elite";font-size:10px;color:#666;margin-top:6px;direction:ltr;}

/* ── Game In-Play 1 — flashcards ── */
.gp1{padding:20px;min-height:440px;display:grid;grid-template-rows:auto 1fr auto;gap:14px;}
.gp1 .gp-hd{display:flex;justify-content:space-between;align-items:center;}
.gp1 .progress{height:14px;border:2px solid var(--ink);background:#fff;flex:1;margin:0 14px;}
.gp1 .progress span{display:block;height:100%;background:var(--hi);width:42%;border-left:2px solid var(--ink);float:right;}
.gp1 .cardstage{display:flex;align-items:center;justify-content:center;position:relative;}
.gp1 .card-big{
  width:60%;aspect-ratio:5/3;border:3px solid var(--ink);background:#fff;border-radius:10px;
  box-shadow:-6px 6px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
}
.gp1 .card-big .word-ro{font-family:"Special Elite";font-size:48px;direction:ltr;}
.gp1 .card-big .ipa{font-family:"Special Elite";color:#666;font-size:14px;margin-top:6px;direction:ltr;}
.gp1 .card-big .he-hint{font-family: 'Noto Sans Hebrew', sans-serif;font-size:22px;color:#888;margin-top:10px;}
.gp1 .card-big .flip{position:absolute;bottom:8px;left:10px;font-family: 'Noto Sans Hebrew', sans-serif;font-size:18px;color:#888;}
.gp1 .actions{display:flex;justify-content:center;gap:14px;}
.gp1 .actions .btn{border:2.5px solid var(--ink);padding:12px 22px;font-family: 'Noto Sans Hebrew', sans-serif;font-size:22px;background:#fff;border-radius:6px;}
.gp1 .actions .btn.no{background:#ffd9d2;}
.gp1 .actions .btn.yes{background:var(--hi);}

/* ── Game In-Play 2 — sentence builder ── */
.gp2{padding:20px;min-height:440px;display:flex;flex-direction:column;gap:14px;}
.gp2 .promptq{font-family: 'Noto Sans Hebrew', sans-serif;font-weight:400;font-size:26px;line-height:1.2;}
.gp2 .promptq em{background:var(--hi);font-style:normal;padding:0 4px;}
.gp2 .canvas{
  flex:1;border:2px dashed var(--ink);background:#fff;border-radius:6px;padding:18px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.gp2 .slots, .gp2 .pool{direction:ltr;}
.gp2 .slots{display:flex;gap:8px;flex-wrap:wrap;}
.gp2 .slot{
  border-bottom:2.5px solid var(--ink);min-width:70px;height:38px;padding:4px 8px;
  font-family:"Special Elite";font-size:18px;
}
.gp2 .slot.filled{background:var(--paper-2);border:2px solid var(--ink);border-radius:6px;}
.gp2 .pool{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;border-top:2px solid var(--ink);}
.gp2 .tile{
  border:2px solid var(--ink);background:#fff;padding:8px 14px;border-radius:6px;
  font-family:"Special Elite";font-size:16px;box-shadow:2px 2px 0 var(--ink);cursor:grab;
}
.gp2 .tile.used{opacity:.3;}
.gp2 .tile.hi{background:var(--hi);}

/* ── Game In-Play 3 — story dialog ── */
.gp3{padding:0;min-height:440px;display:grid;grid-template-columns:1fr 1.2fr;}
.gp3 .scene{
  border-left:2px solid var(--ink);padding:18px;background:var(--paper-2);
  display:flex;flex-direction:column;gap:12px;
}
.gp3 .scene .img{
  flex:1;border:2px solid var(--ink);background:#fff;
  background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 6px, transparent 6px 12px);
  display:flex;align-items:center;justify-content:center;font-family:"Special Elite";font-size:11px;color:#666;direction:ltr;text-align:center;
}
.gp3 .scene .who{font-family: 'Noto Sans Hebrew', sans-serif;font-size:22px;}
.gp3 .dialog{padding:18px;display:flex;flex-direction:column;gap:10px;}
.gp3 .bubble{
  border:2px solid var(--ink);padding:8px 12px;border-radius:14px;
  max-width:90%;font-family: 'Noto Sans Hebrew', sans-serif;font-size:17px;background:#fff;
}
.gp3 .bubble.npc{align-self:flex-start;border-radius:14px 14px 14px 2px;direction:ltr;text-align:left;}
.gp3 .bubble.me{align-self:flex-end;background:var(--hi);border-radius:14px 14px 2px 14px;}
.gp3 .choices{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.gp3 .choice{
  border:2px solid var(--ink);padding:8px 12px;border-radius:6px;background:#fff;
  font-size:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.gp3 .choice .ro{font-family:"Special Elite";direction:ltr;}
.gp3 .choice .he{font-family: 'Noto Sans Hebrew', sans-serif;font-size:14px;color:#777;}

/* ── Game In-Play 4 — matching ── */
.gp4{padding:18px;min-height:440px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;}
.gp4 .hud{display:flex;justify-content:space-between;align-items:center;font-family:"Special Elite";font-size:12px;direction:ltr;}
.gp4 .hud .score{font-family: 'Noto Sans Hebrew', sans-serif;font-size:26px;color:var(--accent);}
.gp4 .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gp4 .tile{
  border:2.5px solid var(--ink);border-radius:6px;background:#fff;padding:10px;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:20px;line-height:1.1;box-shadow:-3px 3px 0 var(--ink);
}
.gp4 .tile .ro{font-family:"Special Elite";direction:ltr;}
.gp4 .tile .he{font-family: 'Noto Sans Hebrew', sans-serif;}
.gp4 .tile.matched{background:var(--hi);font-size:14px;}
.gp4 .tile.miss{background:#ffd9d2;}
.gp4 .tile.flip{background:var(--ink);color:var(--paper);}
.gp4 .timer{display:flex;align-items:center;gap:10px;}
.gp4 .timer .bar{flex:1;height:14px;border:2px solid var(--ink);background:#fff;}
.gp4 .timer .bar span{display:block;height:100%;background:var(--accent);width:68%;}

.credits{
  margin-top:60px;font-family: 'Noto Sans Hebrew', sans-serif;font-size:18px;color:#666;text-align:center;
  border-top:2px dashed var(--ink);padding-top:16px;
}

/* ════════════════════ RESPONSIVE ════════════════════ */

@media (max-width: 1100px){
  .page{padding:22px 18px 100px;}
  .topbar{padding:12px 18px;}
  .page-hd h2{font-size:36px;}
  .vset-tabs button{font-size:18px;padding:5px 12px;}
}

@media (max-width: 720px){
  .topbar{
    flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px;
  }
  .topbar-row{display:flex;align-items:center;justify-content:space-between;width:100%;}
  .topbar h1{font-size:26px;justify-content:flex-start;}
  .topbar h1 .stamp{font-size:10px;padding:2px 6px;}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:36px;height:36px;border:1.5px solid var(--ink);border-radius:6px;
    background:var(--paper-2);color:var(--ink);font-size:18px;cursor:pointer;
    box-shadow:-2px 2px 0 0 rgba(0,0,0,.85);
  }
  .nav-toggle:active{transform:translate(-1px,1px);box-shadow:-1px 1px 0 0 rgba(0,0,0,.85);}
  .topbar .crumbs{
    gap:14px;font-size:18px;flex-wrap:wrap;row-gap:8px;
    border-top:1.5px dashed var(--ink);padding-top:8px;
  }
  .topbar .crumbs #nav-links{
    display:none;flex-direction:column;align-items:stretch;gap:10px;
    flex:1 1 100%;
  }
  .topbar .crumbs #nav-links.open{display:flex;}
  .topbar .crumbs .daily-goal{font-size:11px;padding:3px 8px;gap:4px;}
  .topbar .meta{display:none;}

  .page{padding:16px 12px 80px;}
  .page-hd{flex-direction:column;align-items:stretch;gap:14px;}
  .page-hd h2{font-size:30px;}
  .page-hd p{font-size:15px;}
  .vset-tabs{flex-wrap:wrap;}
  .vset-tabs button{flex:1 1 auto;min-width:0;font-size:16px;padding:5px 10px;}
  .vset-tabs button:first-child{border-left:2px solid var(--ink);}

  .wf-grid{gap:34px;}
  .wf-grid.cols-2, .wf-grid.cols-1{grid-template-columns:minmax(0,1fr);}
  .wf-grid.sparse{gap:42px;}
  .wf-grid.packed{gap:22px;}
  .wf{padding:14px;box-shadow:-4px 4px 0 0 rgba(0,0,0,.85);}
  .wf-grid.sparse .wf{padding:16px;box-shadow:-5px 5px 0 0 rgba(0,0,0,.85);}

  .hp1{grid-template-columns:1fr;padding:14px;gap:14px;min-height:0;}
  .hp1 .hero h3{font-size:30px;}
  .hp1 .goat{aspect-ratio:2/1;}
  .hp1 .strip{grid-template-columns:repeat(2,1fr);}
  .hp1 .cta{font-size:18px;padding:8px 12px;}

  .hp2{grid-template-columns:1fr;min-height:0;}
  .hp2 .panel{
    border-left:0;border-bottom:2px solid var(--ink);padding:16px;
  }
  .hp2 .panel:last-child{border-bottom:0;}
  .hp2 .panel h4{font-size:24px;}
  .hp2 .panel .icon{height:60px;}

  .hp3{padding:14px;min-height:0;}
  .hp3 h3{font-size:24px;}
  .hp3 .map{height:200px;overflow-x:auto;overflow-y:hidden;}
  .hp3 .map{position:relative;}
  .hp3 .map::after{content:"";display:block;width:600px;height:1px;}
  .hp3 .station{width:42px;height:42px;font-size:14px;}

  .hp4{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;padding:14px;min-height:0;}
  .hp4 .big{grid-column:1;grid-row:1;}
  .hp4 .big h3{font-size:32px;}
  .hp4 .side1{grid-column:1;grid-row:2;}
  .hp4 .side2{grid-column:1;grid-row:3;}
  .hp4 .ribbon{grid-column:1;grid-row:4;flex-wrap:wrap;gap:8px;justify-content:flex-start;font-size:15px;}

  .lib2{padding:14px;min-height:0;}
  .lib2 .deck{grid-template-columns:repeat(2,1fr);gap:18px;}
  .lib2 .tarot .ttl{font-size:15px;}

  .gp1{padding:14px;min-height:0;gap:12px;}
  .gp1 .card-big{width:100%;aspect-ratio:4/3;}
  .gp1 .card-big .word-ro{font-size:46px;}
  .gp1 .card-big .he-hint{font-size:18px;}
  .gp1 .actions{flex-wrap:wrap;gap:8px;}
  .gp1 .actions .btn{font-size:18px;padding:10px 14px;flex:1 1 auto;}
  .gp1 .progress{margin:0 8px;}

  .gp2{padding:14px;min-height:0;}
  .gp2 .promptq{font-size:20px;}
  .gp2 .canvas{padding:12px;}
  .gp2 .tile{font-size:18px;padding:6px 10px;}
  .gp2 .slot{font-size:18px;min-width:50px;height:32px;}

  .gp3{grid-template-columns:1fr;min-height:0;}
  .gp3 .scene{
    border-left:0;border-bottom:2px solid var(--ink);padding:14px;
  }
  .gp3 .scene .img{min-height:120px;}
  .gp3 .dialog{padding:14px;}
  .gp3 .choice{font-size:16px;flex-direction:column;align-items:flex-start;gap:2px;}

  .gp4{padding:14px;min-height:0;}
  .gp4 .grid4{grid-template-columns:repeat(3,1fr);gap:8px;}
  .gp4 .tile{font-size:15px;padding:6px;}
  .gp4 .tile.matched{font-size:11px;}
  .gp4 .hud{flex-wrap:wrap;gap:8px;}
  .gp4 .hud .score{font-size:20px;}
  .gp4 .timer{order:3;flex-basis:100%;}
}

@media (max-width: 380px){
  .page-hd h2{font-size:24px;}
  .topbar h1{font-size:22px;}
  .topbar .crumbs{font-size:16px;gap:10px;}
  .topbar .crumbs .daily-goal .dg-bar{display:none;}
  .lib2 .deck{grid-template-columns:1fr 1fr;gap:18px;}
  .gp4 .grid4{grid-template-columns:repeat(2,1fr);}
}