/* ============================================================================
   STARFALL ONLINE v3.34 — the login screen ("Hall of Heroes")
   One canvas (#login-heroes, drawn by js/login-effects.js) fills the first fold: night sky, falling stars and the eight
   classes on a ring of runes. Everything here is laid over it: brand bar, class panel, medallions, the sign-in card.
   The class in front sets --hoh-c (its colour); the panel, the ring and the card's edge pick it up.
   ============================================================================ */
.hoh-screen {
  --hoh-c: #fbbf24; --hoh-gold: #fde68a; --hoh-ink: #05060f; --hoh-line: rgba(190, 200, 255, .16);
  display: block; padding: 0; gap: 0; overflow-x: hidden; background: var(--hoh-ink); scrollbar-width: thin;
}
.hoh-fold { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.hoh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; image-rendering: auto; }
/* darker corners and a soft floor, so text stays readable whatever the sky is doing */
.hoh-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 42%, transparent 52%, rgba(3, 4, 12, .62) 100%),
    linear-gradient(180deg, rgba(3, 4, 12, .55), transparent 16%, transparent 78%, rgba(3, 4, 12, .78));
}

/* ---------------------------------------------------------------- brand bar */
.hoh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(10px, 2.2vh, 22px) clamp(14px, 3vw, 44px) 0; }
.hoh-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hoh-emblem { width: clamp(40px, 5.4vh, 58px); height: clamp(40px, 5.4vh, 58px); image-rendering: pixelated; filter: drop-shadow(0 0 14px rgba(253, 230, 138, .65)); animation: hohFloat 5s ease-in-out infinite; }
.hoh-word { display: grid; line-height: 1; min-width: 0; }
.hoh-word-main {
  font: 400 clamp(17px, 2.5vh, 27px)/1 'Press Start 2P', monospace; letter-spacing: .04em;
  background: linear-gradient(180deg, #fffbe0 8%, #fde68a 38%, #f59e0b 62%, #b45309); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #5b2606) drop-shadow(0 0 16px rgba(251, 191, 36, .35));
}
.hoh-word-sub { display: flex; align-items: baseline; gap: 10px; margin-top: 7px; font: 400 clamp(8px, 1.15vh, 11px)/1 'Press Start 2P', monospace; letter-spacing: .5em; color: #c4b5fd; white-space: nowrap; }
.hoh-word-sub i { font: 600 clamp(11px, 1.5vh, 14px)/1 'Kanit', sans-serif; letter-spacing: .12em; color: #fef3c7; font-style: normal; opacity: .9; }
.hoh-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.hoh-ver { font: italic 600 12px 'Chakra Petch', sans-serif; letter-spacing: .08em; color: #a5b4fc; padding: 0 4px; }
.hoh-tool {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; cursor: pointer;
  font: 600 13px 'Kanit', sans-serif; color: #e0e7ff; border-radius: 999px; border: 1px solid var(--hoh-line);
  background: rgba(10, 12, 30, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .15s, background .15s, transform .08s;
}
.hoh-tool:hover { border-color: rgba(253, 230, 138, .6); background: rgba(30, 26, 70, .7); }
.hoh-tool:active { transform: translateY(1px); }
.hoh-tool:focus-visible, .hoh-arrow:focus-visible, .hoh-med:focus-visible, .hoh-boss:focus-visible, .hoh-scroll:focus-visible { outline: 2px solid var(--hoh-gold); outline-offset: 2px; }
.hoh-dot { width: 7px; height: 7px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 8px #fb7185; }
.hoh-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.hoh-eq i { width: 3px; height: 4px; border-radius: 1px; background: #94a3b8; }
.hoh-tool[aria-pressed="true"] { border-color: color-mix(in srgb, var(--hoh-c) 65%, transparent); color: #fff; }
.hoh-tool[aria-pressed="true"] .hoh-eq i { background: var(--hoh-c); animation: hohEq .9s ease-in-out infinite; }
.hoh-tool[aria-pressed="true"] .hoh-eq i:nth-child(2) { animation-delay: .18s; }
.hoh-tool[aria-pressed="true"] .hoh-eq i:nth-child(3) { animation-delay: .36s; }

/* ---------------------------------------------------------------- showcase + card */
.hoh-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 404px); gap: clamp(12px, 2.6vw, 44px); align-items: center;
  padding: clamp(6px, 1.4vh, 16px) clamp(14px, 3vw, 44px); min-height: 0;
}
.hoh-show { position: relative; display: grid; grid-template-columns: minmax(230px, 36%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-self: center; height: 100%; max-height: 740px; min-height: clamp(340px, 60vh, 680px); }
.hoh-stage { grid-column: 1 / -1; grid-row: 1; position: relative; touch-action: pan-y; cursor: grab; }
.hoh-stage:active { cursor: grabbing; }
.hoh-arrow {
  position: absolute; top: var(--hoh-ay, 58%); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0 0 4px;
  font: 400 28px/1 'Kanit', sans-serif; color: #e0e7ff; border: 1px solid var(--hoh-line); background: rgba(10, 12, 30, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: .55; transition: opacity .15s, border-color .15s, transform .12s;
}
.hoh-arrow:hover { opacity: 1; border-color: var(--hoh-c); transform: scale(1.08); }
.hoh-prev { left: var(--hoh-al, 31%); } .hoh-next { left: var(--hoh-ar, calc(100% - 42px)); }

/* the class in front: number, name, role, strengths, signature skills */
.hoh-class { grid-column: 1; grid-row: 1; align-self: center; position: relative; z-index: 2; pointer-events: none; padding-right: 6px; }
.hoh-class > * { animation: hohRise .55s cubic-bezier(.2, .8, .2, 1) both; }
.hoh-class > :nth-child(2) { animation-delay: .05s; } .hoh-class > :nth-child(3) { animation-delay: .1s; }
.hoh-class > :nth-child(4) { animation-delay: .15s; } .hoh-class > :nth-child(5) { animation-delay: .2s; } .hoh-class > :nth-child(6) { animation-delay: .25s; }
.hoh-no { display: flex; align-items: center; gap: 10px; font: italic 700 13px 'Chakra Petch', sans-serif; letter-spacing: .3em; color: var(--hoh-c); text-shadow: 0 0 14px color-mix(in srgb, var(--hoh-c) 60%, transparent); }
.hoh-no::after { content: ''; flex: none; width: 54px; height: 1px; background: linear-gradient(90deg, var(--hoh-c), transparent); }
.hoh-name {
  margin: 4px 0 0; font: 700 clamp(44px, 8.4vh, 92px)/1.06 'Kanit', sans-serif; letter-spacing: -.01em; padding-bottom: .08em;
  background: linear-gradient(175deg, #fff 22%, color-mix(in srgb, var(--hoh-c) 55%, #fff) 58%, var(--hoh-c)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px color-mix(in srgb, var(--hoh-c) 50%, transparent)) drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
}
.hoh-en { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; font: italic 700 clamp(13px, 1.9vh, 18px) 'Chakra Petch', sans-serif; letter-spacing: .34em; color: #e0e7ff; text-transform: uppercase; }
.hoh-en span { font: 600 12px 'Kanit', sans-serif; letter-spacing: .02em; text-transform: none; padding: 2px 10px; border-radius: 999px; color: #fff; border: 1px solid color-mix(in srgb, var(--hoh-c) 60%, transparent); background: color-mix(in srgb, var(--hoh-c) 20%, rgba(5, 6, 15, .5)); }
.hoh-tagline { margin-top: 12px; font: 600 clamp(15px, 2.1vh, 19px)/1.35 'Kanit', sans-serif; color: var(--hoh-gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.hoh-desc { margin-top: 3px; max-width: 30em; font: 400 clamp(13px, 1.7vh, 15px)/1.55 'Sarabun', sans-serif; color: #cbd5f5; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.hoh-bars { display: grid; gap: 6px; margin-top: 14px; max-width: 250px; }
.hoh-bar { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; font: 600 12px 'Kanit', sans-serif; color: #a5b4fc; }
.hoh-bar i { display: flex; gap: 4px; }
.hoh-bar i b { flex: 1; height: 6px; border-radius: 2px; background: rgba(160, 170, 220, .2); transform: skewX(-18deg); }
.hoh-bar i b.on { background: linear-gradient(90deg, color-mix(in srgb, var(--hoh-c) 70%, #fff), var(--hoh-c)); box-shadow: 0 0 10px color-mix(in srgb, var(--hoh-c) 70%, transparent); animation: hohPip .45s ease-out both; }
.hoh-bar i b.on:nth-child(2) { animation-delay: .06s; } .hoh-bar i b.on:nth-child(3) { animation-delay: .12s; }
.hoh-bar i b.on:nth-child(4) { animation-delay: .18s; } .hoh-bar i b.on:nth-child(5) { animation-delay: .24s; }
.hoh-skills { display: flex; align-items: center; gap: 8px; margin-top: 14px; pointer-events: auto; }
.hoh-skills em { font: 600 11px 'Kanit', sans-serif; font-style: normal; letter-spacing: .08em; color: #8b93c9; margin-right: 2px; }
.hoh-skills img { width: 38px; height: 38px; border-radius: 9px; image-rendering: pixelated; border: 1px solid color-mix(in srgb, var(--hoh-c) 55%, transparent); background: rgba(5, 6, 15, .6); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); transition: transform .12s; }
.hoh-skills img:hover { transform: translateY(-3px) scale(1.08); }

/* the eight medallions: one is in front, its ring fills until the carousel turns by itself */
.hoh-roster { grid-column: 2; grid-row: 2; display: flex; justify-content: center; gap: clamp(4px, .7vw, 10px); padding: 6px 0 2px; }
.hoh-med { position: relative; flex: none; display: grid; justify-items: center; gap: 3px; width: clamp(48px, 4.4vw, 68px); padding: 0; border: 0; background: none; cursor: pointer; color: #9aa3d4; font: 600 11px/1.2 'Kanit', sans-serif; }
.hoh-med-face { position: relative; display: block; width: clamp(40px, 3.8vw, 56px); aspect-ratio: 1; border-radius: 50%; padding: 3px; background: rgba(160, 170, 220, .22); transition: transform .2s cubic-bezier(.2, .8, .2, 1.4), box-shadow .2s; }
.hoh-med-face canvas { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 42%, #141833), #070916 78%); image-rendering: auto; filter: saturate(.55) brightness(.8); transition: filter .2s; }
.hoh-med:hover .hoh-med-face { transform: translateY(-3px); }
.hoh-med:hover canvas { filter: none; }
.hoh-med.on { color: #fff; }
.hoh-med.on .hoh-med-face { transform: translateY(-5px) scale(1.14); background: conic-gradient(var(--c) calc(var(--p, 0) * 1turn), rgba(160, 170, 220, .25) 0); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 65%, transparent); }
.hoh-med.on canvas { filter: none; }
.hoh-med span { white-space: nowrap; text-shadow: 0 1px 4px #000; }

/* ---------------------------------------------------------------- the sign-in card */
.hoh-side { position: relative; display: grid; gap: 8px; min-width: 0; align-self: center; }
.hoh-screen .hoh-card {
  width: auto; padding: 22px 22px 18px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(165deg, rgba(28, 26, 64, .78), rgba(9, 10, 26, .86)); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px color-mix(in srgb, var(--hoh-c) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: box-shadow .6s;
}
/* a light that travels round the edge of the card, in the colour of the class in front */
.hoh-screen .hoh-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--hoh-a, 0deg), transparent 0 62%, var(--hoh-c) 78%, #fff 84%, var(--hoh-gold) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hohSpin 6s linear infinite; opacity: .95;
}
@property --hoh-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hoh-card-head { text-align: center; margin-bottom: 14px; }
.hoh-card-kicker { display: block; font: italic 700 10.5px 'Chakra Petch', sans-serif; letter-spacing: .34em; color: var(--hoh-c); transition: color .6s; }
.hoh-card-title { margin: 5px 0 0; font: 700 23px/1.25 'Kanit', sans-serif; color: #fff; text-shadow: 0 2px 18px rgba(253, 230, 138, .35); }
.hoh-screen .pt-tabs { margin-bottom: 14px; background: rgba(3, 4, 14, .55); border: 1px solid var(--hoh-line); border-radius: 14px; }
.hoh-screen .pt-tabs .tab { border-radius: 10px; padding: 10px 6px; font-size: 14.5px; box-shadow: none; }
.hoh-screen .pt-tabs .tab.active { background: linear-gradient(180deg, color-mix(in srgb, var(--hoh-c) 55%, #6d5df0), #3b2f96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px color-mix(in srgb, var(--hoh-c) 30%, transparent); }
#screen-login .hoh-field { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 14px; border-radius: 14px; color: inherit; font-size: inherit; background: rgba(3, 4, 14, .6); border: 1px solid var(--hoh-line); transition: border-color .15s, box-shadow .15s, background .15s; }
#screen-login .hoh-field:focus-within { border-color: var(--hoh-gold); background: rgba(3, 4, 14, .8); box-shadow: 0 0 0 3px rgba(251, 191, 36, .16), 0 0 24px rgba(251, 191, 36, .12); }
#screen-login .hoh-field > span { flex: none; width: 20px; text-align: center; opacity: .8; }
#screen-login .hoh-field input { display: block; flex: 1; width: auto; min-width: 0; margin: 0; padding: 14px 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; outline: none; font: 400 15.5px 'Sarabun', sans-serif; color: #fff; }
#screen-login .hoh-field input::placeholder { color: #7f88bd; }
.hoh-screen .hoh-go {
  position: relative; overflow: hidden; width: 100%; margin-top: 4px; padding: 14px 16px; border-radius: 14px; font: 700 18px 'Kanit', sans-serif; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 30px rgba(251, 191, 36, .34), 0 0 0 1px rgba(120, 53, 15, .4);
}
.hoh-screen .hoh-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: hohSweep 3.4s ease-in-out infinite; }
.hoh-screen .hoh-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hoh-screen .pt-or { margin: 14px 0 10px; color: #8b93c9; }
.hoh-screen .pt-social { gap: 9px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.hoh-screen .pt-social .pt-btn { border-radius: 13px; padding: 11px 14px; }
.hoh-screen .pt-btn-guest { background: linear-gradient(135deg, rgba(16, 185, 129, .92), rgba(13, 110, 120, .92)); border-color: rgba(110, 231, 183, .55); }
.hoh-screen .hoh-status { margin-top: 13px; padding: 8px 12px; border-radius: 999px; text-align: center; font-size: 12.5px; background: rgba(3, 4, 14, .5); border: 1px solid var(--hoh-line); color: #c7d2fe; line-height: 1.5; }
.hoh-hint { min-height: 0; color: #a5b4fc; }
.hoh-hint:empty { display: none; }

/* ---------------------------------------------------------------- strip under the fold, news below */
.hoh-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 8px clamp(14px, 3vw, 44px) clamp(30px, 5vh, 46px); }
.hoh-feats, .hoh-bosses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.hoh-feats span { font: 600 12.5px 'Kanit', sans-serif; color: #c7d2fe; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--hoh-line); background: rgba(10, 12, 30, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; }
.hoh-feats b { color: var(--hoh-gold); }
.hoh-bosses em { font: 600 11px 'Kanit', sans-serif; font-style: normal; letter-spacing: .1em; color: #8b93c9; }
.hoh-boss { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 12.5px 'Kanit', sans-serif; color: color-mix(in srgb, var(--c) 50%, #fff); padding: 4px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, rgba(10, 12, 30, .6)); white-space: nowrap; transition: transform .12s, box-shadow .15s; }
.hoh-boss::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.hoh-boss:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.hoh-scroll { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: grid; justify-items: center; padding: 0 12px; border: 0; background: none; cursor: pointer; color: #a5b4fc; font: 600 11px 'Kanit', sans-serif; letter-spacing: .12em; opacity: .8; }
.hoh-scroll i { font: 400 18px/.7 'Kanit', sans-serif; font-style: normal; animation: hohBob 1.6s ease-in-out infinite; }
.hoh-scroll:hover { color: #fff; opacity: 1; }
.hoh-below { position: relative; display: grid; justify-items: center; gap: 14px; padding: 22px 16px 26px; background: linear-gradient(180deg, #05060f, #0b0a24 60%, #05060f); border-top: 1px solid var(--hoh-line); }
.hoh-screen .hoh-news { width: min(1120px, 100%); max-height: none; padding: 14px 18px; }
.hoh-screen .hoh-footer { color: #6f78ad; font-size: 12px; text-align: center; }

/* ---------------------------------------------------------------- boss dossier (opened from the strip) */
.hoh-dossier { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 14px; background: rgba(2, 3, 10, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: hohFade .18s ease-out; }
.hoh-dossier.out { opacity: 0; transition: opacity .18s; }
.hoh-dos-card { position: relative; width: min(600px, 100%); max-height: min(86vh, 720px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 65%, transparent); background: #0b0a22; box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 70px color-mix(in srgb, var(--c) 28%, transparent); animation: hohRise .3s cubic-bezier(.2, .8, .2, 1) both; }
.hoh-dos-head { padding: 20px 22px 16px; background: radial-gradient(ellipse 90% 140% at 20% 0, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%), linear-gradient(180deg, #17143a, #0b0a22); border-bottom: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.hoh-dos-badge { display: inline-block; font: 600 12px 'Kanit', sans-serif; padding: 2px 11px; border-radius: 999px; color: color-mix(in srgb, var(--c) 45%, #fff); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); }
.hoh-dos-head h2 { margin: 8px 0 0; font: 700 27px/1.2 'Kanit', sans-serif; color: #fff; }
.hoh-dos-sub { font: 600 14px 'Kanit', sans-serif; color: var(--hoh-gold, #fde68a); }
.hoh-dos-map { margin-top: 5px; font-size: 13px; color: #cbd5f5; }
.hoh-dos-body { overflow-y: auto; padding: 14px 22px; font: 400 14px/1.6 'Sarabun', sans-serif; color: #dbe1ff; scrollbar-width: thin; }
.hoh-dos-body h3 { margin: 14px 0 7px; font: 600 14px 'Kanit', sans-serif; color: color-mix(in srgb, var(--c) 50%, #fff); }
.hoh-dos-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hoh-dos-skills div { padding: 8px 11px; border-radius: 10px; border-left: 3px solid var(--c); background: rgba(255, 255, 255, .045); }
.hoh-dos-skills b { display: block; font: 600 13.5px 'Kanit', sans-serif; color: #fff; }
.hoh-dos-skills p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: #b9c2f0; }
.hoh-dos-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.hoh-dos-body li::before { content: '✦ '; color: var(--hoh-gold, #fde68a); }
.hoh-dos-foot { padding: 12px 22px 16px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .07); }
.hoh-dos-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: #fff; font-size: 15px; }

/* ---------------------------------------------------------------- motion */
@keyframes hohSpin { to { --hoh-a: 360deg; } }
@keyframes hohSweep { 0%, 58% { left: -40%; } 100% { left: 130%; } }
@keyframes hohRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hohPip { from { opacity: 0; transform: skewX(-18deg) scaleX(.2); } to { opacity: 1; transform: skewX(-18deg); } }
@keyframes hohFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hohFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hohBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes hohEq { 0%, 100% { height: 4px; } 50% { height: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .hoh-emblem, .hoh-scroll i, .hoh-screen .hoh-go::after, .hoh-screen .hoh-card::before, .hoh-tool[aria-pressed="true"] .hoh-eq i { animation: none; }
  .hoh-class > *, .hoh-bar i b.on { animation-duration: .01s; }
}

/* ---------------------------------------------------------------- narrower desktop / tablet landscape */
@media (max-width: 1180px) {
  .hoh-show { grid-template-columns: minmax(200px, 40%) minmax(0, 1fr); }
  .hoh-roster { grid-column: 1 / -1; }
  .hoh-tool-t { display: none; }
  .hoh-tool { padding: 0 11px; }
}
/* short screens (laptops at 125 %, phones on their side): everything tightens, the strengths go */
@media (max-height: 700px) {
  .hoh-bars { display: none; }
  .hoh-skills img { width: 32px; height: 32px; }
  .hoh-screen .hoh-card { padding: 16px 18px 14px; }
  .hoh-card-head { margin-bottom: 10px; }
  .hoh-card-title { font-size: 20px; }
  #screen-login .hoh-field input { padding: 11px 0 !important; }
  .hoh-screen .hoh-go { padding: 11px 16px; font-size: 16.5px; }
  .hoh-strip { padding-bottom: 28px; }
}
/* ---------------------------------------------------------------- portrait phones and tablets: showcase on top, card under it */
@media (max-width: 860px) and (orientation: portrait), (max-width: 620px) {
  .hoh-top { padding-top: 12px; gap: 8px; }
  .hoh-ver { display: none; }
  .hoh-brand { gap: 8px; } .hoh-emblem { width: 34px; height: 34px; }
  .hoh-word-main { font-size: 15px; }
  .hoh-word-sub { margin-top: 5px; gap: 7px; font-size: 7px; letter-spacing: .34em; } .hoh-word-sub i { font-size: 10.5px; letter-spacing: .04em; }
  .hoh-tools { gap: 6px; } .hoh-tool { height: 34px; padding: 0 9px; }
  .hoh-main { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 4px; }
  .hoh-show { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(290px, 39vh, 440px) auto; height: auto; max-height: none; min-height: 0; }
  .hoh-class { grid-row: 1; align-self: start; text-align: center; padding: 4px 0 0; }
  .hoh-no { justify-content: center; }
  .hoh-no::after { display: none; }
  .hoh-no { font-size: 11px; }
  .hoh-name { margin-top: 0; font-size: clamp(36px, 11vw, 60px); }
  .hoh-en { justify-content: center; font-size: 12px; letter-spacing: .26em; }
  .hoh-en span { font-size: 11px; padding: 1px 9px; }
  .hoh-tagline { margin-top: 4px; font-size: 14.5px; }
  .hoh-desc, .hoh-bars, .hoh-skills { display: none; }
  .hoh-stage { grid-row: 1; }
  .hoh-roster { grid-column: 1; grid-row: 2; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 10px 4px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .hoh-roster::-webkit-scrollbar { display: none; }
  .hoh-med { width: 62px; scroll-snap-align: center; }
  .hoh-med-face { width: 50px; }
  .hoh-arrow { width: 38px; height: 38px; }
  .hoh-side { width: min(440px, 100%); justify-self: center; }
  .hoh-strip { justify-content: center; }
  .hoh-feats, .hoh-bosses { justify-content: center; }
  .hoh-dos-skills { grid-template-columns: 1fr; }
}
@media (min-width: 621px) and (max-width: 860px) and (orientation: portrait) {
  .hoh-roster { justify-content: center; }
}
/* ---------------------------------------------------------------- phones on their side: two columns, compact */
@media (max-height: 520px) and (orientation: landscape) {
  .hoh-top { padding-top: 8px; }
  .hoh-emblem { width: 34px; height: 34px; }
  .hoh-word-main { font-size: 15px; } .hoh-word-sub { margin-top: 5px; font-size: 7px; } .hoh-word-sub i { font-size: 10px; }
  .hoh-tool { height: 30px; }
  .hoh-main { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); align-items: start; gap: 12px; }
  .hoh-show { align-self: start; min-height: 0; height: calc(100vh - 62px); height: calc(100dvh - 62px); grid-template-columns: minmax(150px, 42%) minmax(0, 1fr); }
  .hoh-no { font-size: 10px; letter-spacing: .2em; } .hoh-no::after { display: none; }
  .hoh-name { font-size: clamp(30px, 11vh, 46px); }
  .hoh-en { font-size: 11px; letter-spacing: .22em; }
  .hoh-en span { font-size: 10.5px; padding: 1px 7px; }
  .hoh-tagline { margin-top: 6px; font-size: 13px; }
  .hoh-desc, .hoh-skills { display: none; }
  .hoh-med span { display: none; }
  .hoh-med { width: 40px; } .hoh-med-face { width: 36px; }
  .hoh-arrow { width: 34px; height: 34px; font-size: 22px; }
  .hoh-card-kicker { display: none; }
  .hoh-card-head { margin-bottom: 8px; } .hoh-card-title { margin: 0; font-size: 17px; }
  .hoh-screen .pt-tabs { margin-bottom: 9px; } .hoh-screen .pt-tabs .tab { padding: 7px 6px; }
  #screen-login .hoh-field { margin-bottom: 7px; } #screen-login .hoh-field input { padding: 9px 0 !important; }
  .hoh-screen .pt-or { margin: 9px 0 7px; }
  .hoh-screen .hoh-status { margin-top: 9px; }
  .hoh-feats span:nth-child(n+4) { display: none; }
}