/* isvelcrovnfang.com — dancehall signs and sound-system boxes: plywood boards, flat sign paint, nails,
   painted letters with a second ink printed off-register, hard afternoon sun from the upper left */
:root {
  --ink: #16130F;
  --ply: #D6B486;
  --plyEdge: #9C7042;
  --red: #B02A14;
  --green: #127040;
  --pink: #F2448F;
  --yellow: #FFD21F;
  --white: #F7F1E3;
  --dim: #CFC6B4;
  --pad: 64px;
  --off: 6px;
  --bw: 6px;
  --sun: 10px 8px 14px rgb(22 19 15 / .32);
  --disp: "Bowlby One", Impact, "Arial Black", sans-serif;
  --text: "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 899px) { :root { --pad: 16px; --off: 3px; --bw: 4px; --sun: 6px 5px 8px rgb(22 19 15 / .32); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ply) url(../img/plywood.webp) 0 0 / 600px 300px; color: var(--ink); font: 400 17px/1.55 var(--text); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--yellow); color: var(--ink); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.in { position: relative; z-index: 2; width: 100%; max-width: 1368px; margin: 0 auto; padding: 0 var(--pad); }
.ply { background: var(--ply) url(../img/plywood.webp) 0 0 / 600px 300px; }
.p { font-size: 17px; line-height: 1.6; color: var(--ink); }
.p + .p { margin-top: 12px; }
.p--w { color: var(--white); }
.lead { font-size: 17px; max-width: 720px; }
.lead--ink { color: var(--ink); }
@media (max-width: 899px) { body { font-size: 15px; } .p, .lead { font-size: 15px; } }

/* ---------- painted letters, second ink off-register ---------- */
.pt { font-family: var(--disp); font-weight: 400; letter-spacing: -.01em; line-height: .96; color: var(--ink); text-shadow: var(--off) var(--off) 0 var(--red); }
.h1 { font-size: 46px; line-height: 1.04; text-shadow: 3px 3px 0 var(--red); }
.h2 { font-size: 46px; }
.h2--y { color: var(--yellow); text-shadow: var(--off) var(--off) 0 var(--red); }
.h2--green { color: var(--ink); text-shadow: var(--off) var(--off) 0 var(--green); }
.h2--pink { text-shadow: var(--off) var(--off) 0 var(--pink); }
.h2--w { color: var(--white); text-shadow: var(--off) var(--off) 0 var(--ink); }
.h1-page { font-size: 72px; max-width: 900px; }
.h2s { font-size: 30px; margin-bottom: 12px; text-shadow: 3px 3px 0 var(--red); }
.h2s--green { text-shadow: 3px 3px 0 var(--green); }
.h2s--pink { text-shadow: 3px 3px 0 var(--pink); }
.h2s--y { color: var(--yellow); text-shadow: 3px 3px 0 var(--red); }
.head { display: grid; gap: 18px; max-width: 760px; margin-bottom: 36px; }
.sec--ink .lead, .sec--red .lead { color: var(--white); }
@media (max-width: 899px) { .h1 { font-size: 34px; } .h2 { font-size: 30px; } .h1-page { font-size: clamp(28px, 9.4vw, 40px); overflow-wrap: anywhere; } .h2s { font-size: 24px; } }

/* ---------- world pieces ---------- */
.nail { position: absolute; z-index: 3; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #C9C5BC, #77736B 55%, #4A4741); box-shadow: 2px 2px 2px rgb(22 19 15 / .45); }
.n1 { left: 12px; top: 12px; } .n2 { right: 12px; top: 12px; }
.hole { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgb(59 42 24 / .8); }
.cut { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(var(--plyEdge) 0 4px, #C49A66 4px 7px, var(--plyEdge) 7px 11px, #7A5530 11px); z-index: 3; }
.stripes { position: absolute; display: flex; pointer-events: none; z-index: 1; }
.stripes i:nth-child(1) { background: var(--red); } .stripes i:nth-child(2) { background: var(--yellow); } .stripes i:nth-child(3) { background: var(--green); }
.stripes--v { right: 4px; top: 0; bottom: 0; }
.stripes--v i { width: 14px; }
.stripes--h { left: 0; right: 0; top: 0; flex-direction: column; }
.stripes--h i { height: 8px; }
.cone { position: absolute; z-index: 1; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.2 var(--text); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); flex: none; }
.dot--red { background: var(--red); } .dot--pink { background: var(--pink); } .dot--green { background: var(--green); }
.dot--yellow { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); } .dot--white { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; justify-self: start; padding: 15px 24px; border: 0; background: var(--ink); color: var(--white); font: 700 17px/1.2 var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--white { background: var(--white); color: var(--ink); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--red); }
.btn--sm { padding: 10px 14px; font-size: 14px; }
.board { position: relative; border: var(--bw) solid var(--ink); box-shadow: var(--sun); background: var(--ply) url(../img/plywood.webp) 0 0 / 600px 300px; }
.board--white { background: var(--white); }
.board--yellow { background: var(--yellow); }
@media (max-width: 899px) { .btn { padding: 12px 18px; font-size: 15px; } .stripes--v i { width: 8px; } }

/* ---------- header: logo sign + nailed «Menu» plaque in the corner ---------- */
.top { position: absolute; left: 0; right: 0; top: 0; z-index: 40; }
.top-in { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 20px/1 var(--disp); letter-spacing: -.02em; }
.mark { display: grid; place-items: center; width: 44px; height: 44px; background: var(--ink); border: 3px solid var(--yellow); }
.mark span { font: 400 27px/1 var(--disp); color: var(--yellow); text-shadow: 1.5px 1.5px 0 var(--red); }
.menu-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--yellow); border: 4px solid var(--ink); box-shadow: var(--sun); transform: rotate(-2deg); transform-origin: 50% 0; }
.menu-btn .nail { left: calc(50% - 5px); top: -6px; width: 10px; height: 10px; }
.bars { display: grid; gap: 4px; }
.bars i { display: block; width: 22px; height: 3px; background: var(--ink); }
.mb-t { display: grid; text-align: left; line-height: 1.1; }
.mb-t b { font: 900 17px var(--text); }
.mb-t small { font: 500 12px var(--text); }
.menu-btn[aria-expanded="true"] { transform: rotate(0); }
.menu { position: absolute; right: var(--pad); top: calc(100% - 8px); width: 320px; padding: 34px 32px 28px; background: var(--ink); border: 4px solid var(--yellow); box-shadow: var(--sun); }
.menu[hidden] { display: none; }
.menu ul { display: grid; gap: 6px; }
.menu a { display: inline-block; font: 400 38px/1.15 var(--disp); color: var(--white); text-decoration: none; }
.menu a:hover { color: var(--yellow); }
.menu a[aria-current] { color: var(--white); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 5px; text-underline-offset: 6px; }
.js .menu.is-open { animation: swing-in .5s ease-out both; transform-origin: 50% 0; }
@keyframes swing-in { 0% { transform: rotate(-3deg); opacity: 0; } 40% { transform: rotate(1.5deg); opacity: 1; } 70% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
@media (max-width: 899px) { .top-in { padding-top: 14px; padding-bottom: 14px; } .logo { font-size: 15px; } .mark { width: 34px; height: 34px; } .mark span { font-size: 21px; } .menu-btn { padding: 10px 12px; } .mb-t small { display: none; } .menu { left: var(--pad); width: auto; } .menu a { font-size: 30px; } }

/* ---------- hero ---------- */
.hero { position: relative; height: 880px; overflow: clip; }
.hero > .stripes--v { right: 4px; }
.brand-lines { position: absolute; left: calc(max(0px, (100% - 1368px) / 2) + 58px); top: 104px; z-index: 1; display: grid; font: 400 160px/.9 var(--disp); letter-spacing: -.02em; will-change: transform; }
.bl--0 { color: var(--green); text-shadow: 9px 9px 0 var(--ink); }
.bl--1 { color: var(--red); text-shadow: 9px 9px 0 var(--ink); }
.bl--2 { color: var(--ink); text-shadow: 9px 9px 0 var(--pink); }
.stack { position: absolute; left: calc(max(0px, (100% - 1368px) / 2) + 664px); top: 92px; z-index: 2; width: 524px; height: auto; filter: drop-shadow(12px 10px 14px rgb(22 19 15 / .35)); will-change: transform; }
.lineup { position: absolute; left: calc(max(0px, (100% - 1368px) / 2) + 1075px); top: 168px; z-index: 3; width: 252px; padding: 26px 16px 14px; background: var(--ink); border: 5px solid var(--yellow); box-shadow: var(--sun); color: var(--white); transform: rotate(2deg); transform-origin: 50% 12px; }
.lineup .n1 { left: calc(50% - 6px); top: 6px; } .lineup .n2 { display: none; }
/* the line-up board swings once on its nail (±1.5°) */
.js .lineup { animation: nail-swing 1.6s ease-out .5s both; }
@keyframes nail-swing { 0% { transform: rotate(2deg); } 25% { transform: rotate(3.5deg); } 50% { transform: rotate(.5deg); } 75% { transform: rotate(2.8deg); } 100% { transform: rotate(2deg); } }
.lu-t { font: 400 22px/1 var(--disp); color: var(--yellow); text-shadow: 2px 2px 0 var(--red); margin-bottom: 12px; }
.lineup ul { display: grid; gap: 10px; }
.lineup a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lineup img { width: 36px; height: 36px; border: 2px solid var(--white); }
.lineup b { display: block; font: 700 14px/1.2 var(--text); }
.lineup small { font-size: 12px; color: var(--dim); }
.lineup a:hover b { color: var(--yellow); text-decoration: underline; }
.lu-f { margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--yellow); font-size: 12px; color: var(--dim); }
.hero-text { position: absolute; left: calc(max(0px, (100% - 1368px) / 2) + 64px); top: 552px; z-index: 3; width: 520px; display: grid; gap: 18px; justify-items: start; }
.hero-text .p { font-size: 17px; }
.h1x { left: 38px; top: 40px; } .h2x { left: 520px; bottom: 34px; } .h3x { right: 78px; bottom: 60px; }
@media (max-width: 1199px) and (min-width: 900px) { .brand-lines { font-size: 120px; } .stack { left: auto; right: 210px; width: 420px; } .lineup { left: auto; right: 30px; } .hero-text { width: 440px; } }
@media (max-width: 899px) {
  .hero { height: auto; padding: 70px 0 40px; display: flex; flex-direction: column; }
  .brand-lines { position: relative; left: auto; top: auto; padding: 0 var(--pad); font-size: 60px; }
  .bl--0, .bl--1 { text-shadow: 4px 4px 0 var(--ink); } .bl--2 { text-shadow: 4px 4px 0 var(--pink); }
  .stack { left: auto; right: 14px; top: 66px; width: 165px; }
  .hero-text { order: 2; position: relative; left: auto; top: auto; width: auto; padding: 96px var(--pad) 0; }
  .lineup { order: 3; position: relative; left: auto; top: auto; width: auto; margin: 32px var(--pad) 0; transform: none; }
  .js .lineup { animation: none; }
  .lineup .n2 { display: block; } .lineup .n1 { left: 12px; top: 12px; }
  .lineup img { width: 30px; height: 30px; }
  .hole { display: none; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding: 96px 0 104px; overflow: clip; }
.sec--ink { background: var(--ink); color: var(--white); }
.sec--red { background: var(--red); color: var(--white); }
.sec--yellow { background: var(--yellow); }
.swipe { margin-top: 14px; font-size: 13px; color: var(--dim); }
@media (max-width: 899px) { .sec { padding: 56px 0 60px; } }

/* ---------- G: the shelf of game boards ---------- */
.cone--g { right: -140px; top: -220px; width: 520px; height: 520px; }
.shelf { position: relative; padding-top: 20px; }
.shelf-board { position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--ply) url(../img/plywood.webp) 0 0 / 600px 300px; box-shadow: var(--sun); }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tile a { position: relative; display: grid; gap: 8px; align-content: start; height: 100%; padding: 12px 12px 16px; border: var(--bw) solid var(--ink); background: var(--ply) url(../img/plywood.webp) 0 0 / 600px 300px; color: var(--ink); text-decoration: none; box-shadow: var(--sun); transform-origin: 50% 0; transition: transform .25s ease-out, border-color .25s; }
.tile--red a { border-color: var(--red); } .tile--pink a { border-color: var(--pink); } .tile--green a { border-color: var(--green); } .tile--yellow a { border-color: var(--yellow); } .tile--white a { border-color: var(--white); }
.t-hang { position: absolute; left: calc(50% - 6px); top: -24px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #C9C5BC, #77736B 55%, #4A4741); }
.t-hang::after { content: ""; position: absolute; left: 5px; top: 12px; width: 2px; height: 10px; background: var(--ink); }
.t-cv img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.t-title { font: 400 17px/1 var(--disp); letter-spacing: -.01em; }
.t-line { font-size: 13px; line-height: 1.4; }
.t-more { font: 700 13px var(--text); text-decoration: underline; }
/* hover: the board tilts on its nail and its frame turns day-glo pink */
.tile a:hover, .tile a:focus-visible { transform: rotate(3deg); border-color: var(--pink); }
.tile a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
@media (max-width: 1199px) and (min-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 899px) {
  .cone--g { width: 260px; height: 260px; right: -90px; top: -130px; opacity: .6; }
  .shelf { overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 20px var(--pad) 12px; scrollbar-width: none; }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf-board { left: var(--pad); right: auto; width: calc(6 * 190px + 5 * 14px); }
  .tiles { grid-template-columns: repeat(6, 190px); width: max-content; }
}
@media (min-width: 900px) { .sec--ink:not(.sec--gl) .swipe { display: none; } }

/* ---------- C: genre signs ---------- */
.stripes--c { right: 12px; }
.signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sign { position: relative; padding: 22px 26px 24px; border: var(--bw) solid var(--white); box-shadow: var(--sun); display: grid; gap: 10px; align-content: start; color: var(--white); }
.sign .nail { display: none; }
.sign--red { background: var(--red); } .sign--pink { background: var(--pink); color: var(--ink); } .sign--green { background: var(--green); }
.sign--ink { background: var(--ink); } .sign--yellow { background: var(--yellow); color: var(--ink); border-color: var(--ink); } .sign--white { background: var(--white); color: var(--ink); border-color: var(--ink); }
.sg-t { font: 400 26px/1 var(--disp); }
.sign p { font-size: 15px; }
.sg-g { font-weight: 700; font-size: 13px !important; }
.sg-g a { text-underline-offset: 3px; }
@media (max-width: 1099px) { .signs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .signs { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ---------- N: update dates ---------- */
.cone--n { right: -120px; top: 120px; width: 460px; height: 460px; }
.sec--red .board { max-width: 820px; padding: 26px 36px 30px; color: var(--ink); }
.upd { width: 100%; border-collapse: collapse; font-size: 15px; }
.upd th, .upd td { text-align: left; padding: 12px 16px 12px 0; }
.upd thead th { font-size: 13px; border-bottom: 3px solid var(--ink); }
.upd tbody tr { border-bottom: 2px solid rgb(22 19 15 / .35); }
.upd tbody th a { text-decoration: none; font-weight: 700; }
.upd tbody th a:hover { color: var(--red); text-decoration: underline; }
@media (max-width: 899px) { .cone--n { display: none; } .sec--red .board { padding: 20px 16px; } .upd { font-size: 13px; } }

/* ---------- F: questions ---------- */
.qas { border-top: 3px solid var(--ink); }
.qa { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 28px; padding: 18px 0; border-bottom: 3px solid var(--ink); align-items: baseline; }
.qa h3 { font: 400 19px/1.2 var(--disp); }
.qa p { font-size: 15px; }
@media (max-width: 899px) { .qa { grid-template-columns: minmax(0, 1fr); gap: 6px; } .qa h3 { font-size: 17px; } }

/* ---------- A: who is behind ---------- */
.sec--yellow { padding: 64px 0 72px; }
.a-k { font: 700 15px var(--text); margin: 8px 0 18px; }
.a-body { font: 400 40px/1.15 var(--disp); max-width: 1000px; margin-bottom: 28px; }
@media (max-width: 899px) { .a-body { font-size: 24px; } }

/* ---------- footer with the giant plywood wordmark ---------- */
.footer { background: var(--ink); color: var(--white); padding: 72px 0 40px; }
.footer .in { display: grid; gap: 48px; }
.f-top { display: flex; justify-content: space-between; gap: 56px; }
.f-about { max-width: 420px; display: grid; gap: 16px; justify-items: start; }
.f-about p { font-size: 17px; }
.f-mail { font-weight: 700; color: var(--yellow); text-underline-offset: 3px; }
.f-cols { display: flex; gap: 64px; }
.f-cols ul { display: grid; gap: 10px; align-content: start; }
.f-cols a, .linkish { font: 700 15px var(--text); color: var(--white); text-decoration: none; background: none; border: 0; padding: 0; text-align: left; }
.f-cols a:hover, .linkish:hover { color: var(--yellow); }
.f-soc li { font-size: 14px; color: var(--dim); }
.f-word { min-width: 0; font: 400 calc((min(100vw, 1368px) - 2 * var(--pad) - 12px) / 9.9)/.9 var(--disp); letter-spacing: -.02em; white-space: nowrap; color: transparent; background: var(--ply) url(../img/plywood.webp) 0 0 / 420px 210px; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(var(--off) var(--off) 0 var(--red)); }
.f-bot { display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--dim); }
@media (max-width: 899px) { .footer { padding: 44px 0 28px; } .footer .in { gap: 32px; } .f-top, .f-bot { flex-direction: column; gap: 24px; } .f-cols { flex-wrap: wrap; gap: 28px; }  }

/* ---------- inner page heads ---------- */
.phead { position: relative; padding: 120px 0 60px; overflow: clip; }
.phead .in { display: grid; gap: 22px; justify-items: start; }
.cone--head { right: -140px; top: 66px; width: 360px; height: 360px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 14px var(--text); }
.crumbs li { display: inline-flex; gap: 10px; }
.crumbs li + li::before { content: "›"; }
.crumbs a { text-underline-offset: 3px; }
.crumbs [aria-current] { font-weight: 700; }
@media (max-width: 899px) { .phead { padding: 84px 0 40px; } .cone--head { width: 180px; height: 180px; right: -80px; top: 50px; opacity: .7; } }

/* ---------- games: accordion boards, one open at a time ---------- */
.sec--gl { padding-top: 48px; }
.gaccs { display: grid; gap: 10px; }
.gacc details { border: var(--bw) solid var(--white); background: var(--ply) url(../img/plywood.webp) 0 0 / 600px 300px; color: var(--ink); }
.gacc--red details { border-color: var(--red); } .gacc--pink details { border-color: var(--pink); } .gacc--green details { border-color: var(--green); } .gacc--yellow details { border-color: var(--yellow); }
.gacc summary { display: flex; align-items: center; gap: 18px; padding: 10px 12px; cursor: pointer; list-style: none; }
.gacc summary::-webkit-details-marker { display: none; }
.ga-th img { width: 52px; height: 52px; }
.gacc details[open] .ga-th { display: none; }
.ga-h { flex: 1; display: grid; gap: 6px; }
.ga-t { font: 400 28px/1 var(--disp); }
.ga-m { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; }
.ga-btn { flex: none; padding: 10px 16px; font: 700 15px var(--text); background: var(--yellow); border: 3px solid var(--ink); }
.ga-btn .c { display: none; }
.gacc details[open] .ga-btn { background: var(--ink); color: var(--white); }
.gacc details[open] .ga-btn .o { display: none; }
.gacc details[open] .ga-btn .c { display: inline; }
.gacc summary:hover .ga-t { text-decoration: underline; text-decoration-thickness: 3px; }
.ga-b { display: flex; gap: 22px; padding: 4px 16px 18px; }
.ga-cv { flex: none; width: 160px; padding: 6px; border: 2px solid var(--red); }
.ga-cv img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ga-r { display: grid; gap: 14px; align-content: start; justify-items: start; max-width: 720px; }
.ga-f div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; font-size: 13px; padding: 2px 0; }
.ga-f dt { font-weight: 700; }
@media (max-width: 899px) { .ga-t { font-size: 20px; } .ga-th img { width: 40px; height: 40px; } .ga-btn { padding: 8px 10px; font-size: 13px; } .ga-b { flex-direction: column; } .ga-cv { width: 70%; } .ga-m span:last-child { display: none; } }

/* ---------- game page ---------- */
.ghead { position: relative; padding: 110px 0 40px; overflow: clip; }
.gh-in { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.gh-t { display: grid; gap: 18px; justify-items: start; max-width: 660px; }
.h1-game { font-size: 64px; }
.meta { font-size: 13px; }
.gh-cv { flex: none; width: 380px; padding: 10px; border-width: 4px; border-color: var(--plyEdge); }
.gh-cv img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.fstrip { background: var(--ink); color: var(--white); padding: 22px 0; }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 24px; }
.strip dt { font: 700 12px var(--text); color: var(--yellow); }
.strip dd { font-size: 13px; line-height: 1.45; }
.sec--gb { padding-top: 56px; }
.cone--gb { right: -160px; top: 460px; width: 400px; height: 400px; }
.gcol { max-width: 680px; display: grid; gap: 40px; }
.gcol .p + .p { margin-top: 12px; }
.board--keys { padding: 18px 22px; }
.keys { width: 100%; border-collapse: collapse; font-size: 14px; }
.keys th, .keys td { text-align: left; padding: 10px 0; }
.keys tr + tr > * { border-top: 2px solid rgb(22 19 15 / .5); }
.keys th { width: 40%; font-weight: 700; }
.ruled { border-top: 3px solid var(--ink); }
.ruled li { padding: 10px 0; border-bottom: 2px solid var(--ink); font-size: 15px; }
.sub { font: 700 15px var(--text); margin: 14px 0 8px; }
.ruled-qa .qa--g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 0; border-bottom: 0; border-top: 3px solid var(--ink); }
.ruled-qa .qa--g h3 { font-size: 17px; }
.sims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sim { display: flex; gap: 12px; padding: 10px; border: 4px solid var(--ink); background: var(--ply) url(../img/plywood.webp) 0 0 / 600px 300px; box-shadow: var(--sun); text-decoration: none; height: 100%; transition: transform .2s; }
.sim--red { border-color: var(--red); } .sim--pink { border-color: var(--pink); } .sim--green { border-color: var(--green); } .sim--yellow { border-color: var(--yellow); } .sim--white { border-color: var(--white); }
.sim:hover { transform: rotate(-1.5deg); }
.sim img { width: 60px; height: 60px; flex: none; }
.sim b { display: block; font: 400 15px/1.15 var(--disp); }
.sim small { font-size: 13px; }
.where { position: relative; padding: 26px 26px 24px; background: var(--ink); border: 5px solid var(--yellow); box-shadow: var(--sun); color: var(--white); display: grid; gap: 10px; justify-items: start; }
.wh-t { font: 400 20px var(--disp); color: var(--yellow); }
.where p { font-size: 15px; }
.where a { font-weight: 700; color: var(--white); text-underline-offset: 3px; }
.where a:hover { color: var(--yellow); }
@media (max-width: 1099px) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gh-cv { width: 300px; } }
@media (max-width: 899px) { .ghead { padding: 80px 0 32px; } .gh-in { flex-direction: column; align-items: flex-start; gap: 24px; } .h1-game { font-size: 42px; } .gh-cv { width: 300px; max-width: 100%; } .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cone--gb { display: none; } .sims { grid-template-columns: minmax(0, 1fr); } }

/* ---------- about ---------- */
.sec--about { padding-top: 56px; }
.stripes--a { right: 24px; }
.acol { max-width: 720px; display: grid; gap: 30px; }
.acol .p--w + .p--w { margin-top: 10px; }
.contact { padding: 26px 28px; display: grid; gap: 12px; color: var(--ink); }
.contact .n1, .contact .n2 { top: 10px; }
.bul { display: grid; gap: 6px; }
.bul li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.bul li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.crow div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; font-size: 14px; padding: 4px 0; }
.crow dt { font-weight: 700; }
.crow a { font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 899px) { .stripes--a { display: none; } .contact { padding: 20px 16px; } }

/* ---------- legal ---------- */
.sec--legal { padding-top: 24px; }
.sheet { max-width: 760px; padding: 40px 48px 44px; display: grid; gap: 26px; }
.sheet-sum { font-size: 17px; }
.lsec { padding-top: 14px; border-top: 3px solid var(--ink); display: grid; gap: 8px; }
.lsec h2 { font: 400 22px/1.15 var(--disp); }
.lsec .p { font-size: 15px; }
@media (max-width: 899px) { .sheet { padding: 28px 18px; } .lsec h2 { font-size: 19px; } }

/* ---------- cookie board ---------- */
.cookie { position: fixed; z-index: 90; right: 24px; bottom: 24px; width: min(500px, calc(100% - 32px)); padding: 26px 24px 24px; background: var(--ink); color: var(--white); border: 5px solid var(--yellow); box-shadow: var(--sun); display: grid; gap: 14px; }
.cookie[hidden] { display: none; }
.cookie .n1 { left: 8px; top: 8px; width: 9px; height: 9px; } .cookie .n2 { right: 8px; top: 8px; width: 9px; height: 9px; }
.ck-title { font-size: 32px; color: var(--yellow); text-shadow: 3px 3px 0 var(--red); }
.cookie > p { font-size: 17px; }
.ck-link { justify-self: start; font-weight: 700; color: var(--white); text-underline-offset: 3px; }
.ck-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck-acts .btn { justify-self: stretch; }
.ck-manage { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border: 2px dashed var(--yellow); }
.ck-manage[hidden] { display: none; }
.ck-opt { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.ck-opt input { accent-color: var(--yellow); width: 16px; height: 16px; }
.cookie :focus-visible { outline-color: var(--yellow); }
.js .cookie.is-open { animation: swing-in .5s ease-out both; transform-origin: 50% 0; }
@media (max-width: 899px) { .cookie { left: 15px; right: 15px; bottom: 15px; width: auto; padding: 20px 16px; } .ck-title { font-size: 26px; } .cookie > p { font-size: 15px; } .ck-acts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .brand-lines, .stack { transform: none !important; }
  .tile a:hover, .tile a:focus-visible { transform: none; }
  .sim:hover, .btn:hover { transform: none; }
}

/* social icons */
.soc{display:flex;gap:8px;align-items:center;margin:0}
.soc-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:inherit;opacity:.85;transition:opacity .2s}
.soc-ico:hover,.soc-ico:focus-visible{opacity:1}
.soc-ico svg{width:18px;height:18px;fill:currentColor}