/* The homepage is the League's front page drawn as a manga volume: a cover where a drawing gets its kit live (cut on a
   slash, and a page you can draw on), the hall of fame on a podium, a wall of drawings, a hero select, the ways to
   play, a match as one manga page, house rules and a last call to draw. */
.home { max-width: 1180px; }
.board { background: var(--board); color: var(--ink); border: 3px solid var(--ink); border-radius: 3px; }
.sechead { margin: 68px 0 18px; }
.sechead h2 { color: var(--on-mat); font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 6px; }
.sechead p { color: var(--on-mat-dim); margin: 0; max-width: 68ch; font-size: 16px; }
.linkish { font-size: 14.5px; }


/* ---- the cover --------------------------------------------------------------------------------------------------- */
.cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); margin-top: 6px; background: var(--board); color: var(--ink); border: 4px solid var(--ink); border-radius: 3px; box-shadow: 8px 8px 0 var(--drop); }
.pitch { position: relative; z-index: 1; padding: 52px 30px 40px 46px; display: flex; flex-direction: column; justify-content: center; }
.pitch .eyebrow { color: var(--gold-deep); }
.pitch h1 { font-size: clamp(36px, 3.95vw, 58px); line-height: 1.02; margin: 0 0 22px; letter-spacing: -.01em; }
.pitch h1 span { display: block; white-space: nowrap; }
.pitch h1 em { font-style: normal; background: linear-gradient(transparent 8%, var(--gold) 8%, var(--gold) 92%, transparent 92%); padding: 0 .1em; }
.lede { font-size: 18px; line-height: 1.6; max-width: 44ch; margin: 0 0 26px; color: #2a2b30; }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; } .ctas .btn.big { font-size: 19px; padding: 14px 22px; }
.ctas .btn.primary { box-shadow: 6px 6px 0 var(--drop); } .ctas .btn.primary:active { box-shadow: 1px 1px 0 var(--drop); transform: translate(5px, 5px); }
.small { font-size: 14px; color: var(--graphite); margin: 18px 0 0; max-width: 48ch; min-height: 2.9em; }
/* the demo panel is cut on a slash: an ink layer under a board layer clipped a few pixels further in */
.demo { position: relative; margin: 0 0 0 -84px; min-height: 580px; background: var(--ink); clip-path: polygon(84px 0, 100% 0, 100% 100%, 0 100%); }
.demo-in { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(92px 0, 100% 0, 100% 100%, 8px 100%); background: var(--board); }
.demo-in::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(20,20,22,.13) 1.1px, transparent 1.3px) 0 0 / 8px 8px; -webkit-mask: linear-gradient(transparent 56%, #000 84%); mask: linear-gradient(transparent 56%, #000 84%); }
.demo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo .burst { inset: -50% -40% -20% -30%; }
.stamp { position: absolute; left: 112px; top: 28px; font-family: var(--display); font-size: 24px; padding: 4px 14px 2px; border: 4px solid currentColor; background: var(--board); transform: rotate(-6deg); display: flex; gap: 8px; align-items: center; }
.stamp .ic { width: 22px; height: 22px; }
.stamp.in { animation: stampin .32s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes stampin { from { transform: rotate(-14deg) scale(1.9); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.plate { position: absolute; left: 34px; bottom: 154px; background: var(--ink); color: var(--board); padding: 7px 20px 6px 22px; transform: skewX(-12deg); max-width: calc(100% - 60px); animation: platein .35s cubic-bezier(.2, 1.3, .5, 1) both; }
.plate > * { display: block; transform: skewX(12deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.plate small { font-size: 13px; font-weight: 700; color: var(--hi); }
@keyframes platein { from { transform: skewX(-12deg) translateX(-40px); opacity: 0; } }
.demo .abar { position: absolute; left: 30px; right: 26px; bottom: 22px; }

/* ability tiles: the one tile language of the game (the Studio's sheet and the match dock speak it too) */
.abar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.abil { position: relative; min-width: 0; display: block; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); font: inherit; animation: slam .3s cubic-bezier(.2, 1.5, .5, 1) both; }
button.abil { cursor: pointer; } button.abil:hover .ico { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--drop); }
button.abil:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@keyframes slam { from { transform: translateY(-18px) scale(1.25); opacity: 0; } }
.abil .ico { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: var(--el, var(--ink)); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--drop); overflow: hidden; font-family: var(--display); font-size: clamp(26px, 3.2vw, 44px); line-height: 1; color: var(--gl, #fff); transition: transform .1s, box-shadow .1s; }
.abil.ult .ico { border-width: 4px; }
.abil.ult .ico::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(20,20,22,.28) 1.2px, transparent 1.4px) 0 0 / 6px 6px; }
.abil .ico .ic { width: 54%; height: 54%; position: relative; z-index: 1; }
.abil .ico::after { content: ""; position: absolute; inset: 0; background: conic-gradient(rgba(20,20,22,.66) calc(var(--cd) * 1turn), transparent 0); }
.abil .cap { position: absolute; z-index: 2; left: -7px; top: -9px; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 400; font-size: 13px; line-height: 1; padding: 4px 6px 3px; border-radius: 2px; }
.abil .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-weight: 900; font-size: 13px; line-height: 1.18; hyphens: auto; -webkit-hyphens: auto; }
@property --cd { syntax: '<number>'; inherits: false; initial-value: 0; }
.abil.cast .ico { animation: castpop .38s cubic-bezier(.2, 1.6, .5, 1); }
.abil.cast .ico::after { animation: cool 2.6s linear; }
.abil.cast .cap { background: var(--hi); color: var(--ink); }
@keyframes castpop { 40% { transform: scale(1.14) rotate(-3deg); } }
@keyframes cool { from { --cd: 1; } to { --cd: 0; } }

/* the live ticker along the cover's foot, like a broadcast lower third */
.ticker { grid-column: 1 / -1; position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 30px; background: var(--ink); color: #e9eae6; padding: 12px 24px 11px; font-weight: 700; font-size: 15px; }
.ticker b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--hi); margin-right: 4px; font-variant-numeric: tabular-nums; }
.ticker .on { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 400; font-size: 15px; color: #fff; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(227,52,44,.55); animation: live 1.8s ease-out infinite; flex: none; display: inline-block; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(227,52,44,0); } 100% { box-shadow: 0 0 0 0 rgba(227,52,44,0); } }
.livenote { color: var(--on-mat-dim); font-size: 14px; margin: 12px 2px 0; }
.livechip { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--on-mat); border: 2px solid var(--mat-line2); padding: 2px 10px; border-radius: 2px; }

/* ---- hero select ------------------------------------------------------------------------------------------------- */
.selgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.spot { --rc: var(--ink); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); border-width: 4px; border-top: 12px solid var(--rc); overflow: hidden; box-shadow: 7px 7px 0 var(--drop); transition: border-color .2s; }
.spotart { position: relative; min-height: 440px; border-right: 3px solid var(--ink); overflow: hidden; background: linear-gradient(transparent 70%, color-mix(in srgb, var(--rc) 10%, transparent) 70%), var(--board); }
.spotart canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spotart .burst { inset: -60%; }
.spotart .cue { position: absolute; z-index: 1; left: 12px; top: 12px; background: #fff; border: 2.5px solid var(--ink); padding: 4px 10px; font-size: 13.5px; font-weight: 700; max-width: calc(100% - 24px); }
.cue:empty { display: none; }
.rolemark { position: absolute; right: -14px; bottom: -18px; width: 150px; height: 150px; color: var(--rc); opacity: .13; pointer-events: none; transform: rotate(-12deg); }
.rolemark .ic { width: 100%; height: 100%; }
.spotinfo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.spotname h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 0; line-height: 1.05; }
.spotname .rolebar { margin-top: 9px; }
.spot q.bio { margin: 0; font-size: 15px; line-height: 1.5; color: #2a2b30; quotes: "“" "”"; }
.spot q.bio:empty { display: none; }
.abar.inline { gap: 10px; }
.abar.inline .ico { font-size: clamp(22px, 2.3vw, 32px); }
.abar.inline .nm { font-size: 12px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; }
.stats div { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 8px; }
.stats dt { font-size: 13px; font-weight: 700; color: var(--graphite); }
.stats dd { margin: 0; display: flex; gap: 3px; }
.stats dd i { flex: 1; height: 10px; border: 2px solid var(--ink); background: var(--board); transform: skewX(-12deg); }
.stats dd i.on { background: var(--rc); }
.stats b { font-family: var(--display); font-weight: 400; font-size: 14px; min-width: 3.4ch; text-align: right; font-variant-numeric: tabular-nums; }
.spotcta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; }
.roster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pick { --rc: var(--ink); position: relative; display: flex; flex-direction: column; background: var(--board); color: var(--ink); border: 3px solid var(--ink); border-top: 8px solid var(--rc); border-radius: 3px; padding: 0; text-align: left; cursor: pointer; box-shadow: 4px 4px 0 var(--drop); transition: transform .1s, box-shadow .1s; font: inherit; overflow: hidden; }
.pick:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--drop); }
.pick:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.pick img { width: 100%; aspect-ratio: 1.45; object-fit: contain; background: #fff; border-bottom: 3px solid var(--ink); display: block; }
.pick .lab { display: flex; align-items: center; gap: 8px; padding: 6px 9px 8px; min-width: 0; }
.pick .lab > span { display: flex; flex-direction: column; min-width: 0; }
.pick .lab b { font-family: var(--display); font-weight: 400; font-size: 15px; line-height: 1.15; color: var(--rc); }
.pick .lab small { font-size: 12px; font-weight: 700; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kan { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: var(--rc); color: #fff; border: 2px solid var(--ink); font-style: normal; }
.kan .ic { width: 18px; height: 18px; }
.pick[aria-pressed="true"] { background: #fffbe0; box-shadow: 6px 6px 0 var(--rc); transform: translate(-2px, -2px); }
.pick[aria-pressed="true"] .lab { background: var(--hi); }

/* ---- ways to play ------------------------------------------------------------------------------------------------ */
.modegrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.mode { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 18px; align-items: start; box-shadow: 5px 5px 0 var(--drop); }
.mode.main { border-width: 4px; }
.mode h3 { font-size: 21px; margin: 0 0 6px; } .mode p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: #2a2b30; }
.mode .row { gap: 10px; }
.mapsvg { width: 104px; height: 104px; display: block; }
.mapsvg .pg { fill: var(--board); stroke: var(--ink); stroke-width: 3; }
.mapsvg .river { stroke: var(--guide); stroke-width: 15; stroke-linecap: round; opacity: .55; fill: none; }
.mapsvg .lane { stroke: #b9bcc4; stroke-width: 9; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mapsvg .b { fill: var(--blue); stroke: var(--ink); stroke-width: 2; } .mapsvg .r { fill: var(--red); stroke: var(--ink); stroke-width: 2; }
.mapsvg .heads { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.watch { color: var(--on-mat-dim); margin: 16px 2px 0; font-size: 15px; } .watch a { color: var(--on-mat); font-weight: 700; }

/* ---- a match as a manga page: board sheet, white gutters, inked panels, narration boxes -------------------------- */
.koma-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "k1 k2" "k1 k3" "k4 k4"; gap: 12px; background: var(--board); border: 4px solid var(--ink); border-radius: 3px; padding: 14px; box-shadow: 7px 7px 0 var(--drop); }
.koma { position: relative; margin: 0; border: 3px solid var(--ink); overflow: hidden; background: #e9ebe6; min-height: 0; }
.koma img { display: block; width: 100%; height: 100%; object-fit: cover; }
.k1 { grid-area: k1; } .k2 { grid-area: k2; aspect-ratio: 16 / 10; } .k3 { grid-area: k3; aspect-ratio: 16 / 10; } .k4 { grid-area: k4; height: 280px; }
.k4 img { object-position: center 12%; }
.koma figcaption { position: absolute; left: 10px; top: 10px; max-width: min(320px, calc(100% - 20px)); background: #fff; color: var(--ink); border: 2.5px solid var(--ink); padding: 6px 11px 8px; font-size: 13.5px; line-height: 1.42; box-shadow: 3px 3px 0 var(--drop); }
.koma figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; margin-bottom: 1px; }
.k4 figcaption { left: auto; right: 10px; top: auto; bottom: 10px; }

/* ---- house rules, fresh heroes, the last call -------------------------------------------------------------------- */
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.panel { padding: 16px 20px 18px; } .panel h3 { font-size: 19px; margin: 0 0 6px; } .panel p { margin: 0; line-height: 1.55; font-size: 15px; color: #2a2b30; }
.finale .eyebrow { position: relative; margin: 0 0 -10px; color: var(--gold-deep); background: var(--board); padding: 2px 10px; }

@media (max-width: 1020px) {
  .cover { grid-template-columns: 1fr; }
  .pitch { padding: 34px 26px 30px; }
  .demo { margin: 0; min-height: 520px; clip-path: polygon(0 46px, 100% 0, 100% 100%, 0 100%); }
  .demo-in { clip-path: polygon(0 54px, 100% 8px, 100% 100%, 0 100%); }
  .stamp { left: 22px; top: 70px; }
  .selgrid { grid-template-columns: 1fr; } .roster { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .pick .lab small { display: none; } .pick .lab { padding: 5px 6px 6px; gap: 6px; } .pick .lab b { font-size: 13px; }
  .modegrid { grid-template-columns: 1fr; } .rules { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .livechip { display: none !important; }
  .roster { gap: 9px; } .pick .lab b { font-size: 12.5px; } .pick .kan { width: 24px; height: 24px; } .pick .kan .ic { width: 14px; height: 14px; } .pick .lab { gap: 5px; padding: 5px 5px 6px; }
  .pitch h1 { font-size: clamp(34px, 10vw, 52px); } .pitch h1 span { white-space: normal; } .lede { font-size: 16px; }
  .ctas .btn.big { flex: 1 1 auto; text-align: center; }
  .demo { min-height: 470px; }
  .plate { left: 14px; bottom: 132px; } .plate b { font-size: 21px; }
  .demo .abar { left: 14px; right: 14px; bottom: 16px; gap: 8px; }
  .abil .nm { font-size: 11px; } .abil .cap { font-size: 11px; padding: 3px 5px 2px; left: -5px; top: -7px; }
  .ticker { gap: 4px 18px; padding: 11px 16px; font-size: 13.5px; } .ticker b { font-size: 18px; }
  .spot { grid-template-columns: 1fr; } .spotart { min-height: 300px; border-right: none; border-bottom: 3px solid var(--ink); }
  .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr; }
  .mode { grid-template-columns: 76px minmax(0, 1fr); padding: 14px; gap: 12px; } .mapsvg { width: 76px; height: 76px; }
  .koma-grid { grid-template-columns: 1fr; grid-template-areas: "k1" "k2" "k3" "k4"; padding: 10px; gap: 10px; }
  .k1, .k4 { height: auto; aspect-ratio: auto; }
  .koma figcaption { position: static; max-width: none; box-shadow: none; border-width: 0; border-top: 3px solid var(--ink); }
  .k4 figcaption { position: static; }
  .koma { display: flex; flex-direction: column; } .koma img { aspect-ratio: 4 / 3; height: auto; }
  .k2, .k3 { aspect-ratio: auto; }
  .sechead { margin-top: 52px; }
}
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } .abil, .plate { animation: none; } }

/* a tile drawn from the hero itself (public/skillicon.js): the picture fills it, the element sits in a corner badge */
.abil .ico.pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.abil .ico.pic .elb { position: absolute; z-index: 1; right: 3px; bottom: 3px; width: 30%; aspect-ratio: 1; display: grid; place-items: center; background: var(--el); color: var(--gl, #fff); border: 2px solid var(--ink); font-style: normal; }
.abil .ico.pic .elb .ic { width: 70%; height: 70%; }
.abil .ico.pic .icplay { z-index: 2; }

/* ---- draw on the cover: the demo panel becomes a page with an undo, a clear and the big button ------------------- */
.padbtn { position: absolute; z-index: 3; right: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 8px 12px; background: var(--ink); color: var(--gold); border: 2.5px solid var(--ink); border-radius: 3px; box-shadow: 3px 3px 0 var(--gold); font: 400 16px/1 var(--display); cursor: pointer; animation: padcall 2.4s ease-in-out 3s infinite; }
.padbtn .ic { width: 18px; height: 18px; }
.padbtn:hover { background: #2a2b30; } .padbtn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@keyframes padcall { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-4deg) scale(1.06); } 86% { transform: rotate(3deg) scale(1.06); } }
.demo.drawing canvas { cursor: crosshair; touch-action: none; }
.demo.drawing .stamp, .demo.drawing .plate, .demo.drawing .abar, .demo.drawing .burst { display: none; }
.demo.drawing .demo-in::before { opacity: .4; }
.pad { position: absolute; inset: 0; pointer-events: none; }
.pad > * { pointer-events: auto; }
.padhint { position: absolute; left: 110px; right: 24px; top: 16px; margin: 0; text-align: center; font-weight: 900; font-size: 14.5px; color: var(--graphite); }
.padbar { position: absolute; left: 40px; right: 24px; bottom: 88px; display: flex; justify-content: center; gap: 8px; }
.padbar .btn { padding: 5px 12px; font-size: 14px; } .padbar .btn:disabled { opacity: .35; }
.padgo { position: absolute; left: 50%; bottom: 22px; transform: translateX(-42%); white-space: nowrap; }
.padgo:disabled { opacity: .45; box-shadow: none; } .padgo:not(:disabled) { animation: padready .5s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes padready { from { transform: translateX(-42%) scale(.8); } }
.padgo:active:not(:disabled) { transform: translate(-42%, 0) translate(5px, 5px); }

/* ---- the hall of fame -------------------------------------------------------------------------------------------- */
.hallgrid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.podium { position: relative; display: flex; flex-direction: column; overflow: hidden; border-width: 4px; box-shadow: 8px 8px 0 var(--drop); }
.podstage { position: relative; height: 400px; overflow: hidden; cursor: pointer; border-bottom: 3px solid var(--ink); background: radial-gradient(60% 70% at 50% 0%, rgba(242, 193, 78, .22), transparent 70%), repeating-conic-gradient(from 0deg at 50% -10%, rgba(20, 20, 22, .05) 0deg 2deg, transparent 2deg 9deg), var(--board); }
.podstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.podstage .burst { inset: -70%; }
.pods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 12px 14px 14px; list-style: none; gap: 10px; }
.pods li { --rc: var(--ink); grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.pods li.p1 { grid-column: 2; } .pods li.p2 { grid-column: 1; } .pods li.p3 { grid-column: 3; }
.pods .place { font: 900 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.pods .p1 .place { color: var(--gold-deep); }
.pods a { color: var(--ink); text-decoration: none; max-width: 100%; } .pods a:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--gold); }
.pods a b { display: block; font: 400 clamp(15px, 1.6vw, 20px)/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pods small { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 900; color: var(--rc); } .pods small .ic { width: 13px; height: 13px; }
.pst { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--graphite); } .pst > .ic { width: 15px; height: 15px; margin-left: 6px; } .pst b { color: var(--ink); font-weight: 900; }
.pfav { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; background: var(--board); color: #b9bcc4; border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; } .pfav .ic { width: 15px; height: 15px; }
.pfav:hover { color: var(--red); } .pfav.on { background: var(--red); color: #fff; } .pfav:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.hallside { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 14px; }
.hcard { --rc: var(--ink); display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 10px; text-decoration: none; border-left: 8px solid var(--rc); box-shadow: 5px 5px 0 var(--drop); transition: transform .12s, box-shadow .12s; }
.hcard:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--drop); } .hcard:focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; }
.hcard img { width: 104px; aspect-ratio: 1; object-fit: contain; background: #fff; border: 2.5px solid var(--ink); padding: 6px; }
.hcard span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hcard small { font: 900 11px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.hcard b { font: 400 21px/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-weight: 900; font-size: 13.5px; color: var(--rc); } .hcard em .ic { width: 15px; height: 15px; }

/* ---- the wall: two rows of drawings drifting opposite ways; a hover holds them -------------------------------- */
.marquee { display: grid; gap: 16px; margin: 0 -16px; padding: 4px 0 12px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mrow { overflow: hidden; padding: 4px 0 8px; }
.mtrack { display: flex; width: max-content; animation: drift var(--dur, 60s) linear infinite; }
.mrow.rev .mtrack { animation-direction: reverse; }
.marquee:hover .mtrack, .marquee:focus-within .mtrack { animation-play-state: paused; }
.mset { display: flex; gap: 16px; padding-right: 16px; }
@keyframes drift { to { transform: translateX(-50%); } }
.wcard { --rc: var(--ink); flex: none; width: 168px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--board); border: 3px solid var(--ink); border-top: 7px solid var(--rc); border-radius: 3px; box-shadow: 4px 4px 0 var(--drop); transition: transform .12s; }
.wcard:nth-child(odd) { transform: rotate(-1.2deg); } .wcard:nth-child(even) { transform: rotate(1deg) translateY(6px); }
.wcard:hover { transform: translateY(-6px) rotate(0) scale(1.04); } .wcard:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
.wcard img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8%; background: #fff; border-bottom: 2.5px solid var(--ink); }
.wcard b { padding: 7px 9px 0; font: 400 15px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard small { display: flex; align-items: center; gap: 4px; padding: 3px 9px 8px; font-size: 12px; font-weight: 900; color: var(--rc); } .wcard small .ic { width: 13px; height: 13px; }
.wcard small span { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--graphite); } .wcard small span .ic { color: var(--red); }

@media (max-width: 1020px) {
  .hallgrid { grid-template-columns: 1fr; }
  .hallside { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hcard { grid-template-columns: 1fr; padding: 10px; border-left-width: 3px; border-top: 7px solid var(--rc); } .hcard img { width: 100%; }
}
@media (max-width: 720px) {
  .padbtn { right: 12px; top: 64px; font-size: 14px; padding: 8px 12px 7px 10px; }
  .demo.drawing { min-height: 540px; }
  .padhint { left: 16px; right: 16px; top: auto; bottom: 130px; font-size: 13.5px; }
  .padbar { left: 12px; right: 12px; bottom: 84px; }
  .padgo { left: 16px; right: 16px; transform: none; text-align: center; } .padgo:not(:disabled) { animation: none; } .padgo:active:not(:disabled) { transform: translate(3px, 3px); }
  .podstage { height: 300px; }
  .pods { padding: 10px 8px 12px; gap: 6px; } .pst > .ic, .pst > .ic + b { display: none; }
  .hallside { grid-template-columns: 1fr; gap: 10px; }
  .hcard { grid-template-columns: 76px minmax(0, 1fr); border-top: 3px solid var(--ink); border-left: 7px solid var(--rc); } .hcard img { width: 76px; } .hcard b { font-size: 18px; }
  .wcard { width: 136px; } .wcard b { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mtrack { animation: none; } .mrow { overflow-x: auto; } .mset[aria-hidden] { display: none; } .padbtn { animation: none; }
}