/* kinsthegame.com - dressed in the game's own UI. Every image is exported from the Quest repo by
   tools/build_ui.py; every colour below is a number from the game's scripts:
     window fills   win_GradeTop / win_GradeBottom (win_TownPanel.gml), faded f^2 down the booth like win_DrawGrade
     valance        GRADE_CLOTH / _SHADE / GRADE_GOLD / _SHADE and the node cloth (win_DrawValance)
     text           white with the engine's black copy at +2 under it (v1492), names in yellow, the
                    title screen's "Coming soon" orange
   Sizes: one window art pixel = --a CSS px, one kin art pixel = --k, one font pixel = 2px (16px text). */

@font-face { font-family: "Quest Narrow"; src: url("/assets/fonts/quest-narrow.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Kins Classic"; src: url("/assets/fonts/kins-classic.woff") format("woff"); font-display: swap; }

:root {
  --a: 3px;
  --k: 2px;
  --fill: .9;
  --yellow: #ffff00;
  --orange: #ffa040;
  --cyan: #00ffff;
  --gold: #f6bc36;
  --gold-shade: #c2670a;
  --cloth: #6c3181;
  --cloth-shade: #492066;
  --node-cloth: #4b2e49;
  --node-cloth-shade: #372135;
  --ink: #000;
  --wrap: 1120px;
  color-scheme: dark;
}

.s1 { --grade: linear-gradient(rgb(176 44 44 / var(--fill)) 0%, rgb(174 43 44 / var(--fill)) 12.5%, rgb(170 42 43 / var(--fill)) 25%, rgb(162 39 41 / var(--fill)) 37.5%, rgb(151 34 38 / var(--fill)) 50%, rgb(137 29 35 / var(--fill)) 62.5%, rgb(120 22 32 / var(--fill)) 75%, rgb(100 14 27 / var(--fill)) 87.5%, rgb(77 5 22 / var(--fill)) 100%); --frame: url("/assets/ui/frame-seat1.png"); }
.s2 { --grade: linear-gradient(rgb(49 121 172 / var(--fill)) 0%, rgb(49 120 170 / var(--fill)) 12.5%, rgb(47 116 166 / var(--fill)) 25%, rgb(45 111 158 / var(--fill)) 37.5%, rgb(42 103 148 / var(--fill)) 50%, rgb(37 93 134 / var(--fill)) 62.5%, rgb(32 80 118 / var(--fill)) 75%, rgb(26 66 98 / var(--fill)) 87.5%, rgb(19 49 76 / var(--fill)) 100%); --frame: url("/assets/ui/frame-seat2.png"); }
.s3 { --grade: linear-gradient(rgb(33 137 36 / var(--fill)) 0%, rgb(33 136 36 / var(--fill)) 12.5%, rgb(31 133 34 / var(--fill)) 25%, rgb(29 127 32 / var(--fill)) 37.5%, rgb(26 120 28 / var(--fill)) 50%, rgb(22 110 24 / var(--fill)) 62.5%, rgb(17 98 19 / var(--fill)) 75%, rgb(11 83 13 / var(--fill)) 87.5%, rgb(4 67 6 / var(--fill)) 100%); --frame: url("/assets/ui/frame-seat3.png"); }
.s4 { --grade: linear-gradient(rgb(166 127 8 / var(--fill)) 0%, rgb(165 126 8 / var(--fill)) 12.5%, rgb(160 123 8 / var(--fill)) 25%, rgb(153 117 7 / var(--fill)) 37.5%, rgb(144 110 7 / var(--fill)) 50%, rgb(131 100 6 / var(--fill)) 62.5%, rgb(116 88 6 / var(--fill)) 75%, rgb(98 74 5 / var(--fill)) 87.5%, rgb(77 58 4 / var(--fill)) 100%); --frame: url("/assets/ui/frame-seat4.png"); }
.s0 { --grade: linear-gradient(rgb(140 90 174 / var(--fill)) 0%, rgb(139 89 173 / var(--fill)) 12.5%, rgb(135 87 169 / var(--fill)) 25%, rgb(130 83 163 / var(--fill)) 37.5%, rgb(122 77 154 / var(--fill)) 50%, rgb(111 70 143 / var(--fill)) 62.5%, rgb(98 61 130 / var(--fill)) 75%, rgb(83 50 114 / var(--fill)) 87.5%, rgb(66 38 95 / var(--fill)) 100%); }
.node { --grade: linear-gradient(rgb(43 26 41 / var(--fill)) 0%, rgb(43 26 41 / var(--fill)) 12.5%, rgb(42 26 40 / var(--fill)) 25%, rgb(41 25 39 / var(--fill)) 37.5%, rgb(40 24 38 / var(--fill)) 50%, rgb(38 23 36 / var(--fill)) 62.5%, rgb(35 22 34 / var(--fill)) 75%, rgb(32 20 32 / var(--fill)) 87.5%, rgb(29 18 29 / var(--fill)) 100%); --cloth: var(--node-cloth); --cloth-shade: var(--node-cloth-shade); }
.card { --grade: linear-gradient(rgb(55 34 54 / var(--fill)) 0%, rgb(55 34 54 / var(--fill)) 12.5%, rgb(54 33 53 / var(--fill)) 25%, rgb(53 33 52 / var(--fill)) 37.5%, rgb(51 32 50 / var(--fill)) 50%, rgb(49 30 48 / var(--fill)) 62.5%, rgb(47 28 46 / var(--fill)) 75%, rgb(44 26 43 / var(--fill)) 87.5%, rgb(40 24 39 / var(--fill)) 100%); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font: 16px/24px "Quest Narrow", monospace;
  text-shadow: 2px 2px 0 var(--ink);
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; image-rendering: pixelated; }
h1, h2, h3 { font-family: "Kins Classic", monospace; font-weight: 400; margin: 0; line-height: 1.25; }
h2 { font-size: 24px; }
h3 { font-size: 16px; color: var(--yellow); margin-bottom: 8px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 400; color: var(--yellow); }
em { font-style: normal; color: var(--cyan); }
a { color: var(--yellow); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
:focus-visible { outline: 2px dashed #fff; outline-offset: 4px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------ zones: each section stands on a camp backdrop */
.zone {
  position: relative;
  background: #000 center / cover no-repeat;
  image-rendering: pixelated;
  padding: 72px 0;
}
.zone::before { /* the screen dim a scene lays under its windows, so the art stays art and the text stays read */
  content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .25); pointer-events: none;
}
.zone > * { position: relative; }
/* a long page keeps its backdrop screen-sized: the scene holds still behind the windows, as a menu over it does */
.backdrop { position: fixed; inset: 0; z-index: -1; background: #000 center / cover no-repeat; image-rendering: pixelated; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .25); }
.zone.clear { background: none; }
.zone.clear::before { content: none; }
.z1 { background-image: url("/assets/bg/zone1.webp"); }
.z2 { background-image: url("/assets/bg/zone2.webp"); }
.z3 { background-image: url("/assets/bg/zone3.webp"); }
.z4 { background-image: url("/assets/bg/zone4.webp"); }
.z5 { background-image: url("/assets/bg/zone5.webp"); }
.z6 { background-image: url("/assets/bg/zone6.webp"); }
.z7 { background-image: url("/assets/bg/zone7.webp"); }
.z8 { background-image: url("/assets/bg/zone8.webp"); }
.z9 { background-image: url("/assets/bg/zone9.webp"); }
.z10 { background-image: url("/assets/bg/zone10.webp"); }
.zt { background-image: url("/assets/bg/tavern.webp"); }

/* ------------------------------------------------------------ windows: wood over a graded booth */
.win {
  position: relative;
  border-style: solid;
  border-width: calc(6 * var(--a)) calc(7 * var(--a)) calc(5 * var(--a)) calc(8 * var(--a));
  border-image: var(--frame, url("/assets/ui/frame-wood.png")) 6 7 5 8 / calc(6 * var(--a)) calc(7 * var(--a)) calc(5 * var(--a)) calc(8 * var(--a)) repeat;
  background: var(--grade, none) padding-box;
  image-rendering: pixelated;
  padding: 16px 20px 20px;
}
.win.bare { padding: 0; background: #000 padding-box; }
.win.bare > video, .win.bare > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* the slim plate (Choose Upgrade's offers): two art px of wood */
.plate {
  border-style: solid;
  border-width: calc(3 * var(--a)) calc(2 * var(--a)) calc(2 * var(--a)) calc(3 * var(--a));
  border-image: url("/assets/ui/frame-slim.png") 3 2 2 3 / calc(3 * var(--a)) calc(2 * var(--a)) calc(2 * var(--a)) calc(3 * var(--a)) repeat;
  background: var(--grade, none) padding-box;
  image-rendering: pixelated;
}

/* the valance: a titled shared panel's cloth, its shade, a gold edge, then the gold hem and its tips */
.val {
  margin: -16px -20px 24px;
  padding: 10px 20px 10px;
  position: relative;
  background: linear-gradient(var(--cloth) 0 calc(100% - 2 * var(--a)), var(--cloth-shade) 0 calc(100% - var(--a)), var(--gold) 0);
}
.val::before, .val::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--a); top: 100%;
  -webkit-mask: url("/assets/ui/dither2.png") 0 0 / calc(32 * var(--a)) var(--a) repeat-x;
          mask: url("/assets/ui/dither2.png") 0 0 / calc(32 * var(--a)) var(--a) repeat-x;
  background: var(--gold);
}
.val::after {
  -webkit-mask-image: url("/assets/ui/dither3.png"); mask-image: url("/assets/ui/dither3.png");
  background: var(--gold-shade); top: calc(100% + var(--a));
}
.val h1, .val h2 { color: #fff; }

/* ------------------------------------------------------------ menu rows: the title screen's chevrons flank the chosen one */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.row {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none !important; padding: 4px 36px; cursor: pointer;
  background: none; border: 0; font: inherit; text-shadow: inherit;
}
.row::before, .row::after {
  content: ""; position: absolute; top: 50%; width: calc(8 * var(--a)); height: calc(8 * var(--a));
  margin-top: calc(-4 * var(--a)); background: url("/assets/ui/selector.png") 0 0 / 100% 100%;
  image-rendering: pixelated; visibility: hidden;
}
.row::before { left: 0; }
.row::after { right: 0; transform: scaleX(-1); }
.row:hover::before, .row:hover::after, .row:focus-visible::before, .row:focus-visible::after,
.row.on::before, .row.on::after { visibility: visible; }
.row:focus-visible { outline: none; }
.row:hover, .row.on, .row:focus-visible { color: var(--yellow); }   /* the chosen row reads yellow, as in-game */
.row .glyph { width: 18px; height: 18px; flex: none; filter: drop-shadow(2px 2px 0 #000); }

/* a plate you press: the slim plate on the node black, the face-button glyph, the label */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 18px 8px 14px; color: #fff; text-decoration: none !important;
  font: 16px/24px "Quest Narrow", monospace;
}
.btn:hover { transform: translateY(-2px); --fill: 1; }
.btn:active { transform: translateY(2px); }
.btn .glyph { width: 18px; height: 18px; flex: none; filter: drop-shadow(2px 2px 0 #000); }
.btn.big { font-size: 24px; padding: 12px 24px 12px 18px; }
.btn.big .glyph { width: 36px; height: 36px; }

/* ------------------------------------------------------------ the bar across the top */
.bar { position: sticky; top: 0; z-index: 30; }
.bar > .plate { --fill: .96; }
.bar-row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 2px 8px 2px 12px; }
.bar-logo { font: 24px/1 "Kins Classic", monospace; color: #fff; text-decoration: none !important; }
.bar-links { display: flex; align-items: center; }
@media (min-width: 1181px) { .bar-links.plate { border: 0; background: none; } }
.bar-links .row { padding: 4px 12px 4px 30px; }
.bar-links .row::after { display: none; }
.bar-links .row::before { left: 4px; }
.bar-toggle { display: none; }
@media (max-width: 1180px) {
  .bar-toggle { display: inline-flex; }
  .bar-links {
    display: none; position: absolute; right: 8px; top: calc(100% + 4px);
    flex-direction: column; align-items: stretch; min-width: 220px; padding: 8px 4px;
  }
  .bar-links.open { display: flex; }
  .bar-links .row { padding: 8px 12px 8px 36px; }
  .bar-links .row::before { left: 6px; }
}

/* ------------------------------------------------------------ the title screen */
.title { min-height: calc(100svh - 52px); display: flex; align-items: center; padding: 48px 0 56px; }
.title-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.title-mid { text-align: center; }
.title h1 { font-size: 96px; line-height: 1; text-shadow: 6px 6px 0 var(--ink); margin-bottom: 20px; }
.title-tag { margin: 0 auto 28px; max-width: 30em; }
.title .rows { justify-items: center; font-size: 24px; line-height: 32px; }
.title-date { margin-top: 28px; color: var(--orange); }
.kin { --kw: 48; --n: 2; --t: 1s; width: calc(var(--kw) * var(--k)); aspect-ratio: 1; overflow: hidden; flex: none; }
.kin img { width: calc(var(--n) * 100%); max-width: none; height: 100%; animation: kin var(--t) steps(var(--n)) infinite; }
@keyframes kin { to { transform: translateX(-100%); } }
.title .kin { --k: 5px; justify-self: center; }
.kin.flip { transform: scaleX(-1); }
@media (max-width: 900px) {
  .title-body { grid-template-columns: 1fr 1fr; }
  .title-mid { grid-column: 1 / -1; grid-row: 2; }
  .title .kin { --k: 3px; }
  .title h1 { font-size: 64px; text-shadow: 4px 4px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .kin img, .prompt { animation: none !important; } }

/* ------------------------------------------------------------ section layouts */
.head { max-width: 760px; margin: 0 auto 32px; }

.video { max-width: 1000px; margin: 0 auto; }
.facts { list-style: none; padding: 0; margin: 32px auto 0; max-width: 1000px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.facts li { text-align: center; padding: 12px 8px 14px; }
.facts b { display: block; font: 48px/1.1 "Kins Classic", monospace; color: var(--yellow); text-shadow: 4px 4px 0 var(--ink); margin-bottom: 4px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } .facts b { font-size: 32px; text-shadow: 2px 2px 0 var(--ink); } }
@media (max-width: 480px) {
  .facts { gap: 8px; --a: 2px; } .facts li { padding: 8px 4px 10px; } .facts b { font-size: 24px; }
  .title .rows { font-size: 16px; line-height: 24px; }
  .win { padding: 12px 14px 16px; } .val { margin: -12px -14px 20px; padding: 8px 14px; }
  .btn.big { font-size: 16px; padding: 8px 16px 8px 12px; } .btn.big .glyph { width: 18px; height: 18px; }
}
.win, .plate { min-width: 0; overflow-wrap: break-word; }
.talk > *, .feature > *, .press-grid > * { min-width: 0; }

.feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.feature + .feature { margin-top: 56px; }
.feature.flip > .win:first-child { order: 2; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: 20px; } .feature.flip > .win:first-child { order: 0; } }

.list { list-style: none; padding: 0; margin: 0; }
.list li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: calc(6 * var(--a)); height: calc(6 * var(--a));
  background: url("/assets/ui/selector.png") 0 0 / 100% 100%; image-rendering: pixelated;
}

/* the class roster: every kin standing in its role's seat colour */
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } }
.role h3 { margin: 0; }
.roster { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.roster li { min-width: 88px; text-align: center; }
.roster a { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none !important; }
.roster a:hover .kin, .roster a:focus-visible .kin { transform: translateY(-4px); }
.roster a:hover span, .roster a:focus-visible span { color: #fff; }
.roster .kin { margin: -20px -20px -28px; }   /* the 64px cell is mostly air around the kin: let the names set the width */
.roster span { font: 16px/20px "Kins Classic", monospace; color: var(--yellow); display: block; white-space: nowrap; overflow-wrap: normal; }
.role { text-align: center; padding-left: 8px; padding-right: 8px; }

.pets { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards li { padding: 12px 16px 16px; }
@media (max-width: 900px) { .pets { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.note { max-width: 760px; margin: 28px auto 0; }

/* screenshots: each one on a slim plate */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.shots a {
  display: block; position: relative;
  border-style: solid;
  border-width: calc(3 * var(--a)) calc(2 * var(--a)) calc(2 * var(--a)) calc(3 * var(--a));
  border-image: url("/assets/ui/frame-slim.png") 3 2 2 3 / calc(3 * var(--a)) calc(2 * var(--a)) calc(2 * var(--a)) calc(3 * var(--a)) repeat;
  background: #000 padding-box; image-rendering: pixelated;
}
.shots a:hover, .shots a:focus-visible { transform: translateY(-2px); outline: none; }
.shots a:hover::before, .shots a:focus-visible::before {
  content: ""; position: absolute; left: -30px; top: 50%; margin-top: -12px; width: 24px; height: 24px;
  background: url("/assets/ui/selector.png") 0 0 / 100% 100%; image-rendering: pixelated; z-index: 2;
}
.shots img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 900px) { .shots { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .shots { grid-template-columns: 1fr; } }

.lightbox { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 12px; }
.lightbox[hidden] { display: none; }
.lightbox .win { max-width: min(1300px, 100%); }
.lightbox img { max-height: calc(100vh - 160px); width: auto; }
.lightbox .rows { display: flex; gap: 8px; }

/* the call to wishlist */
.cta { max-width: 760px; margin: 0 auto; text-align: center; }
.cta .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 20px; }

/* the studio speaks like a town NPC: a kin, the name plate, the words, the A prompt blinking in the corner */
.talk { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: end; }
.talk .win { padding-bottom: 36px; }
.talk .speaker { font: 16px/1 "Kins Classic", monospace; color: var(--yellow); margin-bottom: 12px; display: block; }
.talk .kin { --k: 3px; }
.talk .prompt { position: absolute; right: 14px; bottom: 10px; width: 18px; height: 18px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
@media (max-width: 560px) { .talk { grid-template-columns: 1fr; } .talk .kin { margin: 0 auto -12px; } }

/* ------------------------------------------------------------ the bottom bar */
.foot { background: url("/assets/bg/tavern.webp") center / cover; image-rendering: pixelated; padding: 24px 0 32px; position: relative; }
.foot::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.foot .wrap { position: relative; }
.foot .plate { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding: 10px 16px; }
.foot nav { display: flex; flex-wrap: wrap; }
.foot .row { padding: 2px 12px 2px 30px; }
.foot .row::after { display: none; }
.foot .row::before { left: 4px; }

/* ------------------------------------------------------------ the press kit */
.press-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .press-grid { grid-template-columns: 1fr; } }
.factsheet { position: sticky; top: 72px; }
@media (max-width: 900px) { .factsheet { position: static; } }
.factsheet dl { margin: 0; }
.factsheet dt { color: var(--yellow); font: 16px/24px "Kins Classic", monospace; margin-top: 12px; }
.factsheet dt:first-child { margin-top: 0; }
.factsheet dd { margin: 0; overflow-wrap: anywhere; }
.stack > * + * { margin-top: 24px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.dl-grid a { display: block; color: #fff; text-decoration: none !important; }
.dl-grid a:hover { transform: translateY(-2px); }
.dl-grid img { width: 100%; height: 130px; object-fit: contain; background: #000; }
.dl-grid span { display: block; padding: 6px 10px 8px; }
.dl-grid small { color: var(--cyan); }

/* ------------------------------------------------------------ the Class Guide (/classes/), after oClassGuide
   Colours are its Draw_64's: the category tint (classguide_CatColor), tag blue (150,200,255), heading gold
   (255,214,112), and the cast bar's phases - GREEN casting, PURPLE release, GRAY instant. The hotbar is the
   combat panel's diamond (draw_SkillBinding: L R on top, Y between, X B, A at the foot), 51 art px apart,
   each slot the class's own frame (sSkillFrame<Class>) over its 32x32 icon. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guide { padding-top: 24px; padding-bottom: 48px; }
.cg-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 16px 14px; }
.cg-pick h2 { font-size: 16px; margin: 0 0 4px 36px; white-space: nowrap; overflow-wrap: normal; }
.cg-pick .rows { gap: 0; }
.cg-pick .row { padding: 2px 12px 2px 32px; }
.cg-pick .row::after { display: none; }
.cg-pick .row::before { left: 4px; }
@media (max-width: 760px) { .cg-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 8px 12px; } .cg-pick h2 { margin-left: 8px; } }

.cg-grid { display: grid; grid-template-columns: 400px 1fr 400px; gap: 20px; margin-top: 20px; align-items: start; }
.cg-left, .cg-right { min-height: 620px; }
.cg-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 620px; }

.cg-hotbar { --hs: 2; --u: calc(var(--hs) * 1px); position: relative; margin: 4px auto 20px;
  width: calc((2 * 51 + 64) * var(--u)); height: calc((1.5 * 51 + 64) * var(--u)); }
.cg-slot { position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  width: calc(64 * var(--u)); height: calc(64 * var(--u));
  left: calc(50% + var(--cx) * 51 * var(--u) - 32 * var(--u)); top: calc(var(--cy) * 51 * var(--u)); }
.cg-slot img { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; image-rendering: pixelated; }
.cg-slot::after { content: ""; position: absolute; inset: 0; pointer-events: none; image-rendering: pixelated;
  background: var(--frame) calc(var(--sub) * -64 * var(--u)) 0 / calc(320 * var(--u)) 100% no-repeat; }
.cg-slot:hover { filter: brightness(1.15); }
.cg-slot.held { transform: translateY(2px); filter: brightness(.8); }
.cg-slot.nope { animation: nope .25s steps(4); }
@keyframes nope { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
.cg-cd { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; display: flex; align-items: center; justify-content: center;
  font: normal 16px/1 "Kins Classic", monospace; color: #fff; z-index: 1; }
.cg-slot.cooling .cg-cd { background: rgb(0 0 0 / .62); }
.cg-key { position: absolute; right: 14%; bottom: 10%; font: 400 16px/1 "Quest Narrow", monospace; color: var(--yellow); z-index: 2; }
.cg-slot:focus-visible { outline: 2px dashed #fff; outline-offset: 2px; }

.cg-abil h2 { font-size: 24px; margin-bottom: 6px; }
.cg-tags { color: #96c8ff; margin-bottom: 8px; }
.cg-desc { color: #d7dce8; }
.cg-hint { color: #969baa; text-align: center; }
.cg-card { margin-top: 14px; }
.cg-card h3 { color: #ffd670; margin-bottom: 4px; }
.cg-card p { margin: 0; }

.cg-name { font-size: 32px; margin-bottom: 4px; }
.cg-cat { color: #aab4c8; margin-bottom: 12px; }
.cg-blue { color: #96c8ff; margin: 16px 0 4px; }
.cg-how { font-size: 24px; margin-top: 20px; }
.cg-more { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: #96c8ff; }
.cg-more .row { padding: 2px 30px; }

.cg-bar { width: 240px; height: 24px; border: 3px solid #000; background: var(--res); position: relative; box-shadow: 0 0 0 2px rgb(255 255 255 / .25); }
.cg-bar span, .cg-cast span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; }
.cg-kin { --k: 5px; --n: 3; --t: 1.5s; width: calc(64 * var(--k)); height: calc(64 * var(--k)); overflow: hidden; margin: -40px 0 -56px; }
.cg-kin img { width: calc(var(--n) * 100%); max-width: none; height: 100%; animation: kin var(--t) steps(var(--n)) infinite; image-rendering: pixelated; }
.cg-cast { width: 280px; height: 28px; border: 3px solid #000; background: #10141c; position: relative; }
.cg-cast[hidden] { display: block; visibility: hidden; }
.cg-cast i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.cg-cast.casting i { background: rgb(60 175 80); }
.cg-cast.release i { background: rgb(140 60 200); }
.cg-cast.instant i { background: rgb(110 110 125); }

.cg-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; margin-top: 20px; padding: 8px 16px; }
.cg-keys b { color: var(--yellow); }

@media (max-width: 1180px) {
  .cg-grid { grid-template-columns: 1fr 1fr; }
  .cg-mid { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .cg-left, .cg-right { min-height: 0; }
}
@media (max-width: 760px) {
  .cg-grid { grid-template-columns: 1fr; }
  .cg-kin { --k: 3px; margin: -18px 0 -30px; }
  .cg-hotbar { --hs: 1.5; }
}