/* The homepage is a game's front page drawn as a manga volume: a cover where a drawing gets its kit live (cut on a
   slash), 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; }

/* focus lines: only behind the hero as its role is stamped, behind the spotlight hero, and behind the last call */
.burst { position: absolute; inset: -45%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(20,20,22,.9) 0deg .7deg, transparent .7deg 4.2deg); -webkit-mask: radial-gradient(circle, transparent 26%, #000 50%); mask: radial-gradient(circle, transparent 26%, #000 50%); opacity: 0; }
.burst.on { animation: burstin 1.2s ease-out forwards; }
@keyframes burstin { 0% { opacity: 0; transform: scale(.7) rotate(0); } 16% { opacity: .6; } 100% { opacity: .1; transform: scale(1.08) rotate(5deg); } }

/* ---- 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 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; }
.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; }
.rolebar { display: inline-flex; margin-top: 9px; background: var(--rc); color: #fff; padding: 4px 16px 3px 14px; transform: skewX(-12deg); font-family: var(--display); font-size: 15px; }
.rolebar > span { transform: skewX(12deg); display: inline-flex; gap: 8px; align-items: center; }
.rolebar .ic { width: 16px; height: 16px; }
.rolebar small { font-family: var(--text); font-weight: 700; font-size: 13px; opacity: .92; }
.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; }
.fresh { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.fresh a { --rc: var(--graphite); display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--board); border: 3px solid var(--ink); border-top: 6px solid var(--rc); border-radius: 3px; overflow: hidden; box-shadow: 3px 3px 0 var(--drop); transition: transform .1s; }
.fresh a:hover { transform: translate(-2px, -2px); } .fresh a:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
.fresh img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-bottom: 2px solid var(--ink); }
.fresh b { font-size: 12.5px; font-weight: 900; padding: 5px 7px 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fresh small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 0 7px 6px; color: var(--rc); }
.fresh small .ic { width: 12px; height: 12px; }
.finale { position: relative; overflow: hidden; margin-top: 64px; padding: 46px 24px 50px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; background: var(--board); color: var(--ink); border: 4px solid var(--ink); border-radius: 3px; box-shadow: 8px 8px 0 var(--drop); }
.finale .burst { opacity: .2; inset: -120% -20%; }
.finale h2 { position: relative; margin: 0; font-size: clamp(26px, 3.8vw, 44px); max-width: 18ch; background: var(--board); padding: 4px 14px; }
.finale .btn { position: relative; } .finale .btn.big { font-size: 21px; padding: 15px 26px; box-shadow: 6px 6px 0 var(--drop); }

@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; }
  .fresh { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hide-s, .livechip { display: none !important; }
  .rolebar small { display: none; } .rolebar { font-size: 14px; }
  .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; }
  .fresh { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .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; }