/* ==========================================================================
   COMPONENTS  (reusable pieces, not tied to one page)
   1. Buttons and links   2. Section label   3. Game card   4. Dialog
   ========================================================================== */

/* 1. BUTTONS AND LINKS --------------------------------------------------- */
/* html: <a class="primary"> */
.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:53px;padding:15px 25px;background:linear-gradient(110deg,#56613b,#434a30);border:1px solid #a8b873;border-radius:2px;box-shadow:inset 0 0 15px #c8d29418;font-size:15px;font-weight:500;letter-spacing:.04em;transition:background .2s,box-shadow .2s,transform .2s}
.primary span{font-size:25px;line-height:1}
.primary:hover{background:#677744;box-shadow:0 0 26px #adbf5f25;transform:translateY(-2px)}

/* html: <button class="text-link">. Theme it with --link-color, --link-line, --link-hover */
.text-link{display:inline-flex;align-items:center;gap:17px;padding:0 0 10px;background:none;border:0;border-bottom:1px solid var(--link-line,var(--moss));color:var(--link-color,var(--moss));font-size:12px;letter-spacing:.08em}
.text-link:hover{color:var(--link-hover,#e1f1ac)}
.text-link span{font-size:21px}

/* html: <a class="btn-outline"> full-width outlined button. Add aria-disabled="true" for "coming soon" */
.btn-outline{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:16px 20px;border:1px solid #d4e4cf38;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.btn-outline:not([aria-disabled]):hover{border-color:var(--link-line,var(--moss));color:var(--link-hover,#e1f1ac)}

@media (max-width: 600px) {
  .primary{padding:14px 20px;font-size:13px}
  .text-link{min-height:44px}
}

/* 2. SECTION LABEL  (html: .section-label in #games) --------------------- */
.section-label{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:28px}
.section-label h2{margin:0;font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--moss)}
.section-label>span{flex:1;height:1px;background:var(--line)}
.section-label p{margin:0;font-size:12px;letter-spacing:.03em;color:#d4ddd5}
@media (max-width: 950px) { .section-label p{display:none} }

/* 3. GAME CARD  (html: article.game, add .game--veil for the teal theme) -- */
.game-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:24px}
.game{--card-bg:linear-gradient(130deg,#13221de6,#0c171bc9);--number-color:#bacaa7;display:flex;flex-direction:column;background:var(--card-bg);border:1px solid #d4e4cf38;border-radius:4px;backdrop-filter:blur(18px);box-shadow:0 20px 55px #0003;transition:transform .25s,border-color .25s}
.game:hover{transform:translateY(-5px);border-color:#bace9080}
.game--veil{--card-bg:linear-gradient(130deg,#112125e3,#11151dce);--number-color:#a6c6c9;--link-color:#b2d0cc;--link-line:#a3bfc1;--link-hover:#d9efec}

.game-copy{display:flex;flex:1;flex-direction:column;min-height:375px;padding:44px}
.game-number{margin:0 0 36px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--number-color)}
.game h3{margin-bottom:16px;font-size:clamp(28px,3vw,43px)}
.game .eyebrow{margin-bottom:24px;font-size:10px;letter-spacing:.23em}
.game .description{max-width:390px;margin:0 0 32px;font-size:17px;line-height:1.7;letter-spacing:-.01em;color:#d4ddd6}
.game .text-link{align-self:flex-start;margin-top:auto}

/* Optional card extras: art panel, status badge, tag chips, stacked button */
.game-art{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid #d4e4cf38;border-radius:3px 3px 0 0}
.game-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.game-art + .game-copy{min-height:0}
.badge{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:10px;padding:9px 14px;background:#061010b3;border:1px solid var(--link-line,var(--moss));font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--link-color,var(--moss));backdrop-filter:blur(6px)}
.tag-list{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.tag-list li{padding:7px 13px;border:1px solid #d4e4cf38;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--number-color)}
.game .btn-outline{margin-bottom:24px}
.game--veil .description{max-width:none}

@media (max-width: 950px) { .game-copy{padding:30px} }
@media (max-width: 600px) {
  .game-grid{grid-template-columns:1fr;gap:18px}
  .game-copy{min-height:330px}
  .game-number{margin-bottom:28px}
  .game h3{font-size:34px}
  .game,.badge{backdrop-filter:none}
  .game .description{font-size:16px}
  .badge{top:12px;right:12px;padding:7px 10px;font-size:9px}
}

/* 4. DIALOG  (js: main.js initDialogs opens/closes these) ---------------- */
dialog{width:min(580px,calc(100% - 32px));max-height:90dvh;overflow:auto;padding:50px;background:#101917;color:var(--paper);border:1px solid #526047;border-radius:3px;box-shadow:0 25px 100px #0009}
dialog::backdrop{background:#030908c9;backdrop-filter:blur(7px)}
dialog h2{margin:0 0 25px;font-size:38px;font-weight:400;letter-spacing:-.04em;line-height:1.1}
dialog p{line-height:1.65}
dialog p:not(.eyebrow){color:#c9cfc6}
.close{position:absolute;top:10px;right:14px;padding:3px 10px;background:none;border:0;font-size:28px}
.dialog-contact{display:block;margin-top:28px;font-size:14px;overflow-wrap:anywhere;color:var(--moss)}
.social-actions{display:flex;gap:14px;margin-top:24px}
.social-actions a{display:flex;flex-direction:column;gap:8px;padding:16px 23px;border:1px solid var(--line)}
.social-actions small{margin:0}
@media (max-width: 600px) {
  dialog{padding:42px 26px}
  dialog h2{font-size:32px}
  .close{min-width:44px;min-height:44px}
}