:root {
  --green:#24da7e;
  --mint:#aaffc7;
  --navy:#000080;
  --gold:#ffc145;
  --ink:#17254e;
  --muted:#526457
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:#effcf1;
  color:var(--navy);
  font-family:Avenir,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit
}
img {
  display:block;
  max-width:100%
}
a:focus-visible {
  outline:3px solid var(--navy);
  outline-offset:5px;
  border-radius:8px
}
.skip-link {
  position:absolute;
  top:-80px;
  left:16px;
  z-index:10;
  padding:12px;
  background:white
}
.skip-link:focus {
  top:12px
}
.site-header {
  background:var(--green);
  border-bottom:1px solid #00008014
}
.header-inner {
  max-width:1180px;
  padding:23px 32px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.brand img {
  width:202px;
  height:38px
}
.header-link {
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:18px
}
.header-link span {
  font-size:22px
}
.page {
  max-width:1180px;
  margin:auto;
  padding:54px 32px 40px
}
.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  column-gap:70px;
  row-gap:32px;
  align-items:start
}
.eyebrow {
  font-size:11px;
  letter-spacing:.16em;
  font-weight:800;
  margin:0 0 22px;
  color:#387047;
  display:flex;
  align-items:center;
  gap:10px
}
.eyebrow span {
  font-size:24px;
  letter-spacing:0;
  color:var(--navy)
}
h1 {
  font-size:clamp(36px,4.7vw,60px);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0 0 22px;
  font-weight:800
}
.hero-description {
  font-size:18px;
  line-height:1.6;
  max-width:410px;
  margin:0 0 30px;
  color:var(--ink)
}
.games {
  display:grid;
  grid-auto-rows:1fr;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.game-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:24px 22px 18px;
  border:1px solid #e4b94b;
  border-radius:18px;
  background:linear-gradient(135deg,#ffdb79,var(--gold));
  text-decoration:none;
  box-shadow:0 4px 0 #ad7f1520;
  transition:transform .18s ease,box-shadow .18s ease
}
.game-card:hover {
  transform:translateY(-3px);
  box-shadow:0 9px 20px #8a67152b
}
.card-suit {
  position:absolute;
  right:17px;
  top:14px;
  font-size:20px;
  opacity:.3
}
.game-logo {
  width:auto;
  max-width:calc(100% - 22px);
  height:32px;
  object-fit:contain;
  object-position:left center;
  margin:0 0 16px
}
/* Bound the frame independently of each file's intrinsic dimensions. */
.meme-frame {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: clamp(112px, 18vw, 220px);
  overflow: hidden;
  border: 1px solid #a979202b;
  border-radius: 12px;
  background: #fff3ce;
  margin-bottom: 16px;
}
.meme-frame .game-meme {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.game-card[data-game-card="batak"] .game-meme {
  object-fit:cover;
  object-position:35% center
}
.game-card[data-game-card="eslibatak"] .game-meme,
.game-card[data-game-card="ihale"] .game-meme {
  object-fit:cover;
  object-position:center
}
.game-description {
  font-size:13px;
  color:#5d491b;
  line-height:1.45;
  flex:1
}
.game-action {
  margin-top:21px;
  padding-top:12px;
  border-top:1px solid #00008018;
  font-size:14px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.game-action span {
  font-size:20px;
  line-height:1
}
.play-note {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:21px 0 0
}
.hero-content,
.hero-visual {
  display:contents
}
.hero-intro { grid-column:1; grid-row:1 }
.hero .games { grid-column:1; grid-row:2; margin-top:0 }
.hero .play-note { grid-column:1; grid-row:3; margin-top:0 }
.hero .logo-plate { grid-column:2; grid-row:1; justify-self:center; align-self:center }
.hero .game-preview { grid-column:2; grid-row:2 / span 2; align-self:start }
.corner-logo {
  display:block;
  width:clamp(80px,9vw,112px);
  height:auto;
  border-radius:16px;
  box-shadow:0 8px 20px #17472a14
}
.game-preview {
  position:relative;
  margin:0;
  text-align:center;
  padding:22px 22px 16px;
  background:linear-gradient(155deg,#aaffc7,#70eda8);
  border:1px solid #57c38366;
  border-radius:32px
}
.preview-label {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  margin-bottom:18px;
  color:#205137
}
.live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1a8d4f
}
.table-frame {
  border:5px solid white;
  border-radius:19px;
  overflow:hidden;
  box-shadow:0 16px 32px #17472a26
}
.table-frame img {
  width:100%;
  height:auto
}
figcaption {
  font-size:11px;
  color:#205137;
  margin-top:16px
}
.elo-panel {
  margin-top:44px;
  padding:30px 32px;
  display:flex;
  align-items:center;
  gap:24px;
  border:1px solid #ddb34e;
  border-radius:22px;
  background:linear-gradient(110deg,#fff1be,#f6d97f 75%,#efc351);
  box-shadow:0 6px 20px #8266280c
}
.elo-medallion {
  display:flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  border-radius:50%;
  flex:none;
  background:linear-gradient(135deg,#b88726,#8f5d12);
  color:#fff4d0;
  border:3px solid #fff4d0;
  box-shadow:0 3px 12px #9b751b3d
}
.elo-medallion svg {
  width:31px;
  height:31px
}
.elo-intro {
  flex:1
}
.elo-intro .eyebrow {
  margin-bottom:9px;
  font-size:10px;
  color:#79531b
}
.elo-intro h2 {
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 8px
}
.elo-intro p:last-child {
  font-size:13px;
  line-height:1.6;
  color:#705520;
  margin:0
}
.elo-highlights {
  display:flex;
  gap:24px;
  border-left:1px solid #8c652f30;
  padding-left:28px
}
.elo-highlights span {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:11px;
  color:#705520;
  white-space:nowrap
}
.elo-highlights strong {
  font-size:14px;
  color:var(--navy)
}
.site-footer {
  max-width:1180px;
  margin:auto;
  padding:0 32px 30px;
  color:var(--muted);
  font-size:11px
}
.footer-top {
  border-top:1px solid #00008012;
  padding-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px
}
.footer-brand img {
  width:152px;
  height:29px;
  opacity:.85
}
.site-footer nav {
  display:flex;
  gap:22px;
  flex-wrap:wrap
}
.site-footer a {
  text-decoration:none
}
.site-footer nav a:hover {
  text-decoration:underline
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:20px;
  line-height:1.7
}
.footer-bottom p {
  margin:0
}
@media(min-width:1500px) {
  .page {
    padding-top:70px
  }
}
@media(max-width:1000px) {
  .hero {
    gap:32px;
    grid-template-columns:minmax(0,1fr) 290px
  }
  .game-card {
    padding:20px 16px 16px
  }
  .elo-panel {
    gap:18px;
    padding:24px
  }
  .elo-highlights {
    gap:16px;
    padding-left:18px
  }
  .elo-intro h2 {
    font-size:22px
  }
  .site-footer nav {
    gap:16px
  }
}
@media(max-width:760px) {
  .header-inner {
    padding:18px 22px
  }
  .page {
    padding:36px 22px 30px
  }
  .hero {
    grid-template-columns:1fr;
    gap:30px
  }
  .hero-content { display:block }
  .hero-visual {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px
  }
  .hero .games { margin-top:32px }
  .hero .play-note { margin-top:21px }
  .hero-description {
    max-width:100%;
    font-size:16px
  }
  .eyebrow {
    margin-bottom:17px
  }
  h1 {
    font-size:44px
  }
  .game-card {
    padding:22px 18px 18px
  }
  .game-preview {
    width:min(100%,340px);
    margin:0 auto
  }
  .game-preview {
    width:min(100%,290px)
  }
  .elo-panel {
    margin-top:32px;
    display:grid;
    grid-template-columns:48px 1fr;
    padding:24px 20px;
    gap:16px
  }
  .elo-medallion {
    width:48px;
    height:48px
  }
  .elo-medallion svg {
    width:26px;
    height:26px
  }
  .elo-intro h2 {
    font-size:22px
  }
  .elo-highlights {
    grid-column:1/-1;
    border-left:0;
    border-top:1px solid #8c652f30;
    padding:18px 0 0;
    justify-content:space-between;
    gap:12px
  }
  .site-footer {
    padding:0 22px 24px
  }
  .footer-top {
    align-items:flex-start;
    flex-direction:column
  }
  .site-footer nav {
    gap:14px 20px
  }
  .footer-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:12px
  }
}
@media(max-width:370px) {
  .header-inner {
    padding:16px
  }
  .brand img {
    width:184px;
    height:auto
  }
  .header-link {
    gap:7px;
    font-size:12px
  }
  .page {
    padding:30px 16px
  }
  h1 {
    font-size:38px
  }
  .games {
    gap:10px
  }
  .game-card {
    padding:20px 12px 14px
  }
  .game-logo {
    height:27px;
    max-width:calc(100% - 10px)
  }
  .card-suit {
    right:9px;
    top:9px;
    font-size:16px
  }
  .game-meme {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 16px;
}
.game-description {
    font-size:12px
  }
  .elo-panel {
    padding:22px 16px
  }
  .elo-intro h2 {
    font-size:20px
  }
  .elo-highlights strong {
    font-size:13px
  }
  .site-footer {
    padding-right:16px;
    padding-left:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .game-card {
    transition:none
  }
  .game-card:hover {
    transform:none
  }
}

/* Review-only artwork framing. */
.game-card .meme-frame .game-meme { object-fit:cover; object-position:center; }

/* Preserve the four matching illustration compositions, including mobile. */
.game-card .meme-frame { height:auto; aspect-ratio:3 / 2; }

/* Logo plate uses the same gold finish as the Elo panel. */
.logo-plate {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:24px;
  border:1px solid #ddb34e;
  border-radius:22px;
  background:linear-gradient(110deg,#fff1be,#f6d97f 75%,#efc351);
  box-shadow:inset 0 1px 0 #fff9,0 6px 20px #8266280c;
}
.logo-plate .corner-logo { box-shadow:0 6px 16px #82662826; }
@media(max-width:760px) { .logo-plate { width:min(100%,290px); } }

/* Review revision 4: a compact rectangular gold frame, half the previous top padding. */
.logo-plate {
  width:fit-content;
  padding:12px;
  border-radius:6px;
}
.logo-plate .corner-logo { border-radius:3px; }
@media(max-width:760px) { .logo-plate { width:fit-content; } }

/* Review revision 5: match the desktop headline block's visual height. */
@media(min-width:761px) {
  .logo-plate .corner-logo { width:184px; height:auto; }
}