/* Home · /  — the Hall of the Scale, the menu, the sidebar, and the scroll */

/* ---------- hero ---------- */
.hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; padding: 26px clamp(16px, 3vw, 34px);
  background-color: var(--band);
  background-image: repeating-linear-gradient(135deg, var(--band-stripe) 0 14px, transparent 14px 28px);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); color: var(--on-band);
}
.hero-text { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(38px, 5.4vw, 70px); line-height: 1.12; color: var(--title-fill); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--title-shadow); }
.hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 20px; }
.hero-sub [lang="ar"] { font-size: 32px; line-height: 1.2; color: var(--title-fill); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.hero-sub .hiero { color: var(--lapis); font-size: 22px; }
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.hero-chips .sticker { font-size: 15px; }
.hazard { display: inline-flex; padding: 3px; border: 2px solid var(--ink); background-image: repeating-linear-gradient(45deg, var(--ink) 0 7px, var(--a4) 7px 14px); transform: rotate(-1deg); }
.hazard > span { padding: 1px 8px; background: var(--ink); color: var(--a4-text); font-size: 15px; }
.hero-line { margin-top: 6px; align-self: flex-start; padding: 6px 12px; background: var(--ink); color: var(--a2-text); font-family: var(--f-term); font-size: 21px; line-height: 1.2; }

/* ---------- the Hall of the Scale ---------- */
.judge { flex: 1 1 380px; max-width: 520px; margin: 0 auto; color: var(--ink); }
.judge .win-bar h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.judge .win-bar [lang="ar"] { font-size: 17px; }
.judge-body { padding: 10px 12px 12px; background-color: var(--a4-soft); background-image: radial-gradient(color-mix(in srgb, var(--gold) 50%, transparent) 1px, transparent 1.6px); background-size: 9px 9px; }
.scale-svg { width: 100%; height: auto; }
.sv-paper { fill: var(--paper-hi); } .sv-a1 { fill: var(--a1); } .sv-a2 { fill: var(--a2); } .sv-gold { fill: var(--gold); } .sv-lapis { fill: var(--lapis); }
.sv-heart { fill: var(--cute); }
.verdict-icon { fill: var(--cute); }
.judge[data-verdict="heavy"] .verdict-icon { fill: var(--a1-text); }
.judge[data-verdict="light"] .verdict-icon { fill: var(--a3); }
/* now and then Cleo judges in her Anubis mask */
.judge.is-anubis .judge-cleo { display: none; }
.judge.is-anubis .judge-anubis { display: inline; }

.verdict-term { display: grid; margin-top: 8px; padding: 8px 12px; min-height: 74px; font-size: 21px; line-height: 1.25; }
.verdict-term > div { grid-area: 1 / 1; }
.ph { opacity: 0; }
.p1 { color: var(--a2-text); } .p2 { color: var(--a4-text); } .p3 { color: var(--a1-text); }
.v-label { color: var(--a2-text); }
.judge[data-verdict="heavy"] .v-label { color: var(--a1-text); }
.judge[data-verdict="light"] .v-label { color: var(--a3-text); }
.judge-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.verdict-chip { display: inline-block; padding: 4px 12px; background: var(--a2); color: var(--on-a2); border: 2px solid var(--ink); font-family: var(--f-display); font-size: 16px; box-shadow: 3px 3px 0 var(--ink); }
.judge[data-verdict="heavy"] .verdict-chip { background: var(--a1); color: var(--on-a1); }
.judge[data-verdict="light"] .verdict-chip { background: var(--a3); color: var(--on-a3); }

/* the swing: beam rocks around its final tilt, pans counter-swing, three status lines, then the verdict.
   home.js restarts it by toggling .run on .judge */
.judge.run .sw { animation: sw 4.4s ease-in-out both; transform-box: view-box; transform-origin: 300px 64px; }
.judge.run .ct { animation: ct 4.4s ease-in-out both; transform-box: view-box; transform-origin: 0 0; }
.judge.run .p1 { animation: ph1 4.4s steps(1) both; }
.judge.run .p2 { animation: ph2 4.4s steps(1) both; }
.judge.run .p3 { animation: ph3 4.4s steps(1) both; }
.judge.run .final { animation: fade 0.35s steps(3) 4.4s both; }
.judge.run .pop-chip { animation: pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 4.5s both; }
.judge.run .pop { animation: pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 4.5s both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sw { 0% { transform: rotate(-26deg); } 13% { transform: rotate(20deg); } 27% { transform: rotate(-13deg); } 41% { transform: rotate(8deg); } 55% { transform: rotate(-5deg); } 69% { transform: rotate(3deg); } 84% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }
@keyframes ct { 0% { transform: rotate(26deg); } 13% { transform: rotate(-20deg); } 27% { transform: rotate(13deg); } 41% { transform: rotate(-8deg); } 55% { transform: rotate(5deg); } 69% { transform: rotate(-3deg); } 84% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } }
@keyframes ph1 { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ph2 { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ph3 { 0% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ph { display: none; } }

/* ---------- columns: menu · scroll · sidebar ----------
   phones: menu, then the sidebar as a row you can swipe, then the scroll (it never ends, so it goes last)
   tablets: menu and sidebar share the left column · desktops: three columns, and the menu follows you down */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "left" "right" "main"; }
.side-l { grid-area: left; }
.side-r { grid-area: right; }
.main { grid-area: main; }
.side { min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 18px 16px; }
.side-stick { display: flex; flex-direction: column; gap: 18px; }
.side-l { background: radial-gradient(color-mix(in srgb, var(--a3) 34%, transparent) 1px, transparent 1.7px) 0 0 / 14px 14px, var(--side-l); border-bottom: 3px solid var(--ink); }
.side-r { background: radial-gradient(color-mix(in srgb, var(--a2-deep) 22%, transparent) 1px, transparent 1.7px) 0 0 / 14px 14px, var(--side-r); border-bottom: 3px solid var(--ink); }
.main { min-width: 0; padding: 22px clamp(10px, 2.5vw, 28px) 30px; }
@media (max-width: 699px) {
  /* the sidebar's little boxes pack into two columns */
  .side-r { display: block; column-count: 2; column-gap: 14px; }
  .side-r > * { break-inside: avoid; margin-bottom: 16px; }
  .side-r .box-head { font-size: 15px; }
  .season-body { font-size: 14px; }
  .season-body .btn { padding: 6px 8px; font-size: 15px; }
  .main { padding-left: 8px; padding-right: 8px; }
  .scroll-win { margin-left: 10px; margin-right: 10px; }
  .term-body { font-size: clamp(17px, 4.7vw, 21px); }
}
@media (max-width: 359px) { .side-r { column-count: 1; } }
@media (min-width: 700px) {
  .cols { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "left main" "right main"; }
  .side-l, .side-r { border-bottom: none; border-right: 3px solid var(--ink); }
  .side-l { padding-bottom: 6px; }
}
@media (min-width: 1040px) {
  .cols { grid-template-columns: 210px minmax(0, 1fr) 230px; grid-template-rows: auto; grid-template-areas: "left main right"; }
  .side-r { border-right: none; border-left: 3px solid var(--ink); }
  .side-l { padding-bottom: 18px; }
}
@media (min-width: 1040px) and (min-height: 640px) {
  .side-stick { position: sticky; top: 14px; }
}

.box { background: var(--paper-hi); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.box-head { padding: 6px 10px; background: var(--ink); color: var(--a4-text); font-size: 17px; line-height: 1.3; text-align: center; }
.box-head.head-a2 { background: var(--a2); color: var(--on-a2); }
.box-head.head-a1 { background: var(--a1); color: var(--on-a1); }
.box-head.head-gold { background: var(--gold); color: var(--ink); }
.box-dark { background: var(--panel); box-shadow: 4px 4px 0 var(--a2); }
.box-out { min-height: 1.3em; font-size: 19px; line-height: 1.3; text-align: center; color: var(--a1-deep); }

.menu { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.menu-btn { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 18px; line-height: 1.3; transition: transform 0.12s ease, background 0.12s ease; }
.menu-btn [lang="ar"] { font-size: 16px; opacity: 0.8; white-space: nowrap; }
.menu-btn:hover { transform: translate(-2px, -2px); background: var(--hover) !important; color: var(--on-hover); }
.menu-btn[aria-current] { box-shadow: inset 0 0 0 2px var(--paper-hi), 3px 3px 0 var(--ink); }
.m1 { background: var(--a1-soft); } .m2 { background: var(--a2-soft); } .m3 { background: var(--a4-soft); } .m4 { background: var(--a3-soft); }

.log { padding: 10px 12px 12px; font-size: 19px; line-height: 1.35; color: var(--a2-soft); }

.webring { text-align: center; }
.ring-name { margin: 10px 8px 4px; font-size: 17px; }
.ring-links { display: flex; justify-content: space-between; gap: 2px; padding: 0 4px 6px; font-size: 16px; }
.ring-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 3px; white-space: nowrap; }

/* ---------- right sidebar ---------- */
.counter { text-align: center; }
.counter-body { padding: 12px 10px; font-size: 16px; line-height: 1.5; }
.digits { display: flex; justify-content: center; gap: 3px; margin: 6px 0; }
.digits span { width: 22px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--a4-text); font-family: var(--f-term); font-size: 24px; }
.digits .hot { color: var(--cute); }
.blinkies { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.side-r .blinkie { width: 100%; max-width: 180px; }
.blinkie { display: inline-block; width: 168px; max-width: 100%; padding: 4px 0; text-align: center; background: var(--ink); font-size: 15px; animation: blinkie 1.6s steps(1) infinite; }
.bk-1 { color: var(--a1-text); border: 2px solid var(--a1-text); }
.bk-2 { color: var(--cute); border: 2px solid var(--cute); animation-delay: 0.4s; }
.bk-3 { color: var(--a3-text); border: 2px solid var(--a3-text); animation-delay: 0.8s; }
@keyframes blinkie { 50% { background: var(--a4); color: var(--on-a4); } }

.night-box { background: var(--panel-2); }
.night-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 10px 14px; background: radial-gradient(circle at 80% 40%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%); }
.candle-cleo { width: 100%; height: auto; }

.season-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 12px 14px; background: radial-gradient(color-mix(in srgb, var(--a1) 30%, transparent) 1px, transparent 1.6px) 0 0 / 10px 10px, var(--paper); text-align: center; font-size: 16px; line-height: 1.5; }
.season-art { width: 100%; display: flex; justify-content: center; }
.season-cleo { width: min(180px, 86%); height: auto; }

.pet-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 12px 14px; }
.pet-screen { position: relative; width: 132px; height: 120px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: linear-gradient(transparent 70%, color-mix(in srgb, var(--a2) 35%, transparent) 70%), var(--panel); border: 3px solid var(--ink); border-radius: 10px; box-shadow: inset 0 0 0 3px var(--a2-deep); }
.pet-cleo { width: 72px; height: 72px; image-rendering: pixelated; }
.pet-heart { position: absolute; top: 8px; left: 50%; margin-left: -8px; color: var(--cute); font-size: 22px; line-height: 1; opacity: 0; pointer-events: none; }
.pet-heart.up { animation: heart-up 1.1s ease-out both; }
@keyframes heart-up { 0% { opacity: 0; transform: translateY(16px) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px) scale(1.2); } }
.pet-status { font-size: 19px; line-height: 1.2; color: var(--muted-ink); }

/* ---------- the scroll: a terminal rolled between two rods ---------- */
.scroll { position: relative; }
.rod { position: relative; z-index: 1; height: 22px; border: 2px solid var(--ink); border-radius: 11px; background: linear-gradient(var(--a4-soft), var(--gold) 45%, color-mix(in srgb, var(--gold) 65%, var(--ink))); box-shadow: 3px 3px 0 var(--ink); }
.rod::before, .rod::after { content: ""; position: absolute; top: -7px; width: 14px; height: 32px; border: 2px solid var(--ink); border-radius: 6px; background: var(--lapis); }
.rod::before { left: 4px; }
.rod::after { right: 4px; }
.scroll-win { position: relative; margin: -4px 14px; border: 2px solid var(--ink); border-top: none; border-bottom: none; box-shadow: 6px 0 0 var(--a3); }
.scroll-win .win-bar { margin-top: 4px; }
.scroll-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; background: var(--panel-2); border-bottom: 1px dashed color-mix(in srgb, var(--a2-text) 40%, transparent); font-family: var(--f-term); font-size: 18px; color: var(--muted); }
.ctl { min-height: 32px; padding: 2px 10px; background: transparent; color: var(--a2-text); border: 1.5px solid var(--a2-text); font-family: var(--f-term); font-size: 18px; line-height: 1; cursor: pointer; }
.ctl:hover, .ctl[aria-pressed="true"] { background: var(--a2); color: var(--on-a2); }
.seed { margin-left: auto; white-space: nowrap; }
.seed [data-seed] { color: var(--a4-text); }
.rod-b { display: flex; justify-content: center; margin-top: -4px; }
.unroll { position: relative; top: 16px; min-height: 44px; padding: 6px 18px; background: var(--a4); color: var(--on-a4); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 3px 3px 0 var(--ink); font-family: var(--f-display); font-size: 15px; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; }
.unroll:hover { transform: translate(-2px, -2px); background: var(--hover); }
.scroll { padding-bottom: 26px; }
html:not(.js) .scroll-ctl, html:not(.js) .rod-b .unroll { display: none; }

.term-body { padding: 16px clamp(12px, 2.4vw, 20px) 18px; }
.term-body .ln { min-height: 1.3em; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-guest { color: var(--a4-text); } .p-cleo { color: var(--cute); } .p-you { color: var(--a2-text); } .p-ghost { color: var(--muted); }
.scene { margin-top: 2px; }
.live { margin-top: 2px; }


/* Cleo's outfits, as if the terminal could show pictures */
.shot { margin: 8px 0 10px; }
.shot svg { display: block; height: auto; max-width: 100%; padding: 8px; background-color: var(--a4-soft); background-image: radial-gradient(color-mix(in srgb, var(--gold) 45%, transparent) 1px, transparent 1.6px); background-size: 10px 10px; border: 2px solid var(--a2-text); box-shadow: 4px 4px 0 var(--a1); overflow: hidden; }
.shot-pixel_pet svg { padding: 12px; background: var(--panel-2); image-rendering: pixelated; }
.shot-ghost svg { animation: haunt 4s ease-in-out infinite; }
.wall-msg { margin: 8px 0; padding: 6px 10px; border: 1.5px dashed var(--a1-text); }
.wall-msg > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.hr-line { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; color: var(--gold); text-align: center; }
.hr-line::before, .hr-line::after { content: ""; flex: 1 1 20px; border-top: 1.5px dashed currentColor; }
.ask .ln { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.yn { min-width: 40px; min-height: 32px; padding: 0 10px; background: transparent; color: var(--a2-text); border: 1.5px solid var(--a2-text); font-family: var(--f-term); font-size: 20px; line-height: 1; cursor: pointer; }
.yn:hover:not(:disabled) { background: var(--a2); color: var(--on-a2); }
.yn:disabled { cursor: default; opacity: 0.45; }
.yn[aria-pressed="true"] { opacity: 1; background: var(--a2); color: var(--on-a2); }
.swapped { animation: glitch 0.5s steps(2) 1; }
@keyframes glitch { 0% { transform: translateX(-3px); color: var(--a2-text); } 50% { transform: translateX(3px); color: var(--a1-text); } 100% { transform: none; } }

/* the labyrinth: a square window it can turn over in */
.maze-wrap { width: min(100%, 420px); aspect-ratio: 1; display: grid; place-items: center; margin: 10px 0 12px; overflow: hidden; border: 1.5px dashed color-mix(in srgb, var(--gold) 70%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--a3) 14%, transparent), transparent 70%); }
.maze { margin: 0; font-family: var(--f-term); font-size: clamp(8px, 2.6vw, 17px); line-height: 1.05; white-space: pre; color: var(--a3-text); transition: transform 0.85s cubic-bezier(0.6, -0.2, 0.3, 1.3); }
.mz-mark { color: var(--gold); }
.mz-cleo { color: var(--cute); }