.afro-eights-root,
.afro-eights-root * { box-sizing: border-box; }

.afro-eights-root {
  --ae-gold: #f4c24f;
  --ae-cream: #fff7df;
  --ae-ink: #25130b;
  --ae-panel: rgba(34, 17, 10, .86);
  width: var(--afro-eights-width, 100%);
  max-width: 1180px;
  height: var(--afro-eights-height, 720px);
  min-height: 560px;
  margin: 0 auto 1.5rem;
  color: var(--ae-cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.35;
  border-radius: 24px;
  overflow: hidden;
  background: #23120d;
  box-shadow: 0 22px 55px rgba(0,0,0,.30);
  isolation: isolate;
}

.afro-eights-loading {
  height: 100%;
  min-height: 320px;
  display: grid;
  place-content: center;
  background: radial-gradient(circle at 50% 35%, #78311d, #20100b 65%);
  font-weight: 900;
}

.afro-eights-board {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  gap: 10px;
  padding: clamp(12px, 2vw, 22px);
  background-image: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.44)), var(--ae-bg-image);
  background-size: cover;
  background-position: center;
}

.afro-eights-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(244,194,79,.14), transparent 34%);
}

.afro-eights-topbar {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr auto;
  gap: 12px;
  align-items: center;
}

.afro-eights-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.afro-eights-brand img { max-width: min(210px, 46vw); height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.38)); }

.afro-eights-status,
.afro-eights-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.afro-eights-actions { justify-content: flex-end; }

.afro-eights-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.34);
  color: var(--ae-cream);
  font-size: 13px;
  font-weight: 850;
}
.afro-eights-pill strong { color: var(--ae-gold); }
.afro-eights-active-suit { display: inline-flex; align-items: center; gap: 6px; }
.afro-eights-active-suit img { width: 19px; height: 19px; object-fit: contain; }

.afro-eights-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  background: linear-gradient(180deg, #fff0a6, #d99524);
  color: #241208;
  box-shadow: 0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.55);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, opacity .14s ease;
}
.afro-eights-btn:hover,
.afro-eights-btn:focus-visible { transform: translateY(-1px); filter: brightness(1.04); }
.afro-eights-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; filter: grayscale(.35); }
.afro-eights-btn-secondary { background: rgba(255,248,230,.14); color: var(--ae-cream); border: 1px solid rgba(255,255,255,.18); }

.afro-eights-opponents {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--ae-opponents, 1), minmax(0, 1fr));
}

.afro-eights-player-panel {
  min-height: 106px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.17);
  background: var(--ae-panel);
  padding: 10px;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  overflow: hidden;
}
.afro-eights-player-panel.is-current { border-color: var(--ae-gold); box-shadow: 0 0 0 2px rgba(244,194,79,.24), 0 14px 30px rgba(0,0,0,.28); }
.afro-eights-player-panel.has-won { border-color: #51d47e; }
.afro-eights-player-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 900; }
.afro-eights-player-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.afro-eights-turn-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.25); flex: 0 0 auto; }
.is-current .afro-eights-turn-dot { background: var(--ae-gold); box-shadow: 0 0 14px rgba(244,194,79,.75); }
.afro-eights-score { color: rgba(255,247,223,.78); font-size: 12px; }

.afro-eights-mini-hand,
.afro-eights-hand-cards { display: flex; align-items: center; min-height: 68px; }
.afro-eights-mini-hand { padding-left: 12px; overflow: hidden; }
.afro-eights-card-back-mini { width: 42px; height: 62px; flex: 0 0 auto; margin-left: -10px; border-radius: 8px; background: #1e0f0a var(--ae-card-back) center/cover no-repeat; box-shadow: 0 4px 10px rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.18); }

.afro-eights-table { display: grid; grid-template-columns: minmax(190px,1fr) minmax(320px,1.2fr) minmax(190px,1fr); gap: clamp(10px,2vw,22px); align-items: center; min-height: 205px; }
.afro-eights-table-slot { min-height: 176px; border-radius: 20px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; box-shadow: inset 0 0 35px rgba(0,0,0,.16); }
.afro-eights-table-label { color: rgba(255,247,223,.72); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.afro-eights-pile-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

.afro-eights-card {
  --ae-card-w: 92px;
  --ae-card-h: 134px;
  width: var(--ae-card-w);
  height: var(--ae-card-h);
  border-radius: 13px;
  border: 2px solid rgba(255,255,255,.84);
  background: radial-gradient(circle at 75% 18%, rgba(255,255,255,.82), transparent 16%), linear-gradient(145deg, #fffdf2, #f4d995 55%, #f7eee0);
  color: #26130c;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,.36);
  user-select: none;
}
button.afro-eights-card { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, opacity .14s ease; }
button.afro-eights-card:hover,
button.afro-eights-card:focus-visible { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 18px 28px rgba(0,0,0,.42), 0 0 0 3px rgba(244,194,79,.25); }
button.afro-eights-card[disabled] { cursor: not-allowed; opacity: .52; filter: grayscale(.5) brightness(.84); }
button.afro-eights-card.is-playable { box-shadow: 0 13px 25px rgba(0,0,0,.38), 0 0 0 3px rgba(75,210,125,.35); }
.afro-eights-card.is-red { color: #a81e1a; }
.afro-eights-card.is-back { background: #1e0f0a var(--ae-card-back) center/cover no-repeat; border-color: rgba(255,255,255,.22); }
.afro-eights-card-rank-top,
.afro-eights-card-rank-bottom { position: absolute; left: 9px; font-size: 18px; line-height: 1; font-weight: 1000; letter-spacing: -.03em; }
.afro-eights-card-rank-top { top: 9px; }
.afro-eights-card-rank-bottom { right: 9px; left: auto; bottom: 9px; transform: rotate(180deg); }
.afro-eights-card-suit-top,
.afro-eights-card-suit-bottom { position: absolute; width: 18px; height: 18px; object-fit: contain; left: 9px; }
.afro-eights-card-suit-top { top: 30px; }
.afro-eights-card-suit-bottom { right: 9px; left: auto; bottom: 30px; transform: rotate(180deg); }
.afro-eights-card-center { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.16)); }
.afro-eights-card-joker { font-size: 15px; font-weight: 1000; letter-spacing: .18em; writing-mode: vertical-rl; text-orientation: mixed; color: #111; }

.afro-eights-deck-button { appearance: none; padding: 0; border: 0; background: transparent; cursor: pointer; color: inherit; }
.afro-eights-deck-button .afro-eights-card { pointer-events: none; }
.afro-eights-deck-button[disabled] { cursor: not-allowed; opacity: .58; }
.afro-eights-deck-count { display: inline-flex; justify-content: center; align-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px; margin-top: -4px; background: rgba(0,0,0,.46); color: var(--ae-gold); font-size: 13px; font-weight: 900; }

.afro-eights-message { min-height: 44px; padding: 12px 14px; border-radius: 16px; background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.13); text-align: center; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.afro-eights-message.is-alert { border-color: rgba(227,86,69,.55); color: #ffe2dd; }
.afro-eights-message.is-good { border-color: rgba(75,210,125,.55); color: #dcffe8; }
.afro-eights-human-panel { min-height: 158px; }
.afro-eights-hand-cards { overflow-x: auto; overflow-y: visible; padding: 16px 6px 8px; gap: 0; scrollbar-color: rgba(255,255,255,.28) transparent; }
.afro-eights-hand-cards .afro-eights-card { flex: 0 0 auto; margin-left: -20px; }
.afro-eights-hand-cards .afro-eights-card:first-child { margin-left: 0; }
.afro-eights-log { max-height: 76px; overflow: auto; padding: 8px 12px; border-radius: 14px; background: rgba(0,0,0,.30); color: rgba(255,247,223,.78); font-size: 12px; border: 1px solid rgba(255,255,255,.12); width: 100%; }
.afro-eights-log p { margin: 0 0 4px; }
.afro-eights-log p:last-child { margin-bottom: 0; }

.afro-eights-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.55); backdrop-filter: blur(5px); }
.afro-eights-modal-card { width: min(520px, 100%); border-radius: 24px; padding: 22px; background: linear-gradient(180deg, rgba(55,28,18,.98), rgba(25,13,9,.98)); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 24px 70px rgba(0,0,0,.55); text-align: center; }
.afro-eights-modal-card h3 { color: var(--ae-gold); margin: 0 0 8px; font-size: clamp(22px,4vw,32px); }
.afro-eights-modal-card p { margin: 0 0 18px; color: rgba(255,247,223,.80); }
.afro-eights-suit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.afro-eights-suit-choice,
.afro-eights-choice-button { appearance: none; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.09); color: var(--ae-cream); cursor: pointer; font-weight: 1000; padding: 12px; transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.afro-eights-suit-choice:hover,
.afro-eights-suit-choice:focus-visible,
.afro-eights-choice-button:hover,
.afro-eights-choice-button:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.15); border-color: var(--ae-gold); }
.afro-eights-suit-choice img { display: block; width: min(68px,12vw); height: min(68px,12vw); object-fit: contain; margin: 0 auto 7px; }
.afro-eights-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.afro-eights-round-summary { text-align: left; margin: 14px 0; border-radius: 16px; padding: 12px; background: rgba(255,255,255,.08); }
.afro-eights-round-summary strong { color: var(--ae-gold); }
.afro-eights-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px,1px,1px,1px) !important; white-space: nowrap !important; }

@media (max-width: 840px) {
  .afro-eights-root { height: auto; min-height: 780px; }
  .afro-eights-board { min-height: 780px; grid-template-rows: auto auto auto auto; }
  .afro-eights-topbar { grid-template-columns: 1fr; text-align: center; }
  .afro-eights-brand, .afro-eights-actions { justify-content: center; }
  .afro-eights-opponents { grid-template-columns: 1fr; }
  .afro-eights-table { grid-template-columns: 1fr; }
  .afro-eights-table-slot { min-height: 138px; }
  .afro-eights-card { --ae-card-w: 78px; --ae-card-h: 114px; }
  .afro-eights-hand-cards .afro-eights-card { margin-left: -12px; }
  .afro-eights-suit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Managed WordPress page created by the plugin on activation. */
body.afro-eights-managed-page .entry-content,
body.afro-eights-managed-page .wp-block-post-content {
  max-width: none;
}

body.afro-eights-managed-page .afro-eights-root {
  max-width: min(1280px, calc(100vw - 32px));
  margin-top: clamp(8px, 2vw, 24px);
  margin-bottom: clamp(16px, 3vw, 40px);
}

/* v0.3.0 app shell, menus, mode setup, and multiplayer lobby flow. */
.afro-eights-board.afro-eights-shell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3vw, 30px);
  overflow: auto;
  padding: clamp(18px, 4vw, 42px);
}

.afro-eights-board.afro-eights-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 15%, rgba(244,194,79,.18), transparent 28%),
    radial-gradient(circle at 82% 86%, rgba(196,61,37,.18), transparent 32%);
}

.afro-eights-hero {
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: center;
}

.afro-eights-brand-large { justify-content: center; margin-bottom: 12px; }
.afro-eights-brand-large img { max-width: min(300px, 72vw); }

.afro-eights-kicker {
  margin: 0 0 8px;
  color: var(--ae-gold);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.afro-eights-hero h1,
.afro-eights-setup-card h2 {
  margin: 0;
  color: var(--ae-cream);
  font-size: clamp(34px, 7vw, 72px);
  line-height: .96;
  letter-spacing: -.05em;
  text-shadow: 0 10px 28px rgba(0,0,0,.45);
}

.afro-eights-setup-card h2 { font-size: clamp(28px, 5vw, 48px); }

.afro-eights-lede,
.afro-eights-setup-card > p {
  max-width: 680px;
  margin: 12px auto 0;
  color: rgba(255,247,223,.82);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 650;
}

.afro-eights-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 18px);
}

.afro-eights-mode-card,
.afro-eights-lobby-card,
.afro-eights-rule-card,
.afro-eights-setup-card {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(48,25,16,.88), rgba(22,12,8,.88));
  box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

.afro-eights-mode-card {
  appearance: none;
  display: flex;
  min-height: 190px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 9px;
  padding: 20px;
  color: var(--ae-cream);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.afro-eights-mode-card:hover,
.afro-eights-mode-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(244,194,79,.68);
  box-shadow: 0 22px 46px rgba(0,0,0,.36), 0 0 0 3px rgba(244,194,79,.12);
}

.afro-eights-mode-card strong {
  display: block;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1;
}

.afro-eights-mode-card span:not(.afro-eights-mode-badge) {
  color: rgba(255,247,223,.72);
  font-size: 14px;
  font-weight: 700;
}

.afro-eights-mode-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(244,194,79,.16);
  color: var(--ae-gold);
  border: 1px solid rgba(244,194,79,.28);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.afro-eights-menu-footer { display: flex; justify-content: center; }

.afro-eights-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.afro-eights-screen-head .afro-eights-brand-large { margin: 0; justify-content: flex-start; }
.afro-eights-screen-head .afro-eights-brand-large img { max-width: min(220px, 52vw); }

.afro-eights-setup-card {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 4vw, 34px);
  text-align: center;
}

.afro-eights-form-grid,
.afro-eights-name-grid,
.afro-eights-lobby-grid,
.afro-eights-rules-grid {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}

.afro-eights-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afro-eights-name-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.afro-eights-lobby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
.afro-eights-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }

.afro-eights-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: rgba(255,247,223,.82);
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.afro-eights-field select,
.afro-eights-field input,
.afro-eights-lobby-card input {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.34);
  color: var(--ae-cream);
  padding: 9px 12px;
  font: inherit;
  font-weight: 850;
}

.afro-eights-field select:focus,
.afro-eights-field input:focus,
.afro-eights-lobby-card input:focus {
  outline: 2px solid rgba(244,194,79,.55);
  outline-offset: 2px;
}

.afro-eights-lobby-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(255,247,223,.78);
}

.afro-eights-lobby-card strong {
  color: var(--ae-gold);
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: .08em;
}

.afro-eights-lobby-card p { margin: 0; }

.afro-eights-rule-card {
  display: grid;
  grid-template-columns: minmax(62px, auto) 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  color: rgba(255,247,223,.78);
}

.afro-eights-rule-card strong {
  color: var(--ae-gold);
  font-size: 22px;
}

.afro-eights-choice-row-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.afro-eights-ai-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,247,223,.72);
  font-size: 10px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .08em;
}

.afro-eights-hand-helper {
  margin: -3px 0 2px;
  color: rgba(255,247,223,.72);
  font-size: 12px;
  font-weight: 750;
}

.afro-eights-inline-notice {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(227,86,69,.50);
  background: rgba(120,38,26,.34);
  color: #ffe2dd;
  font-weight: 850;
}

@media (max-width: 980px) {
  .afro-eights-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afro-eights-name-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .afro-eights-board.afro-eights-shell { justify-content: flex-start; }
  .afro-eights-mode-grid,
  .afro-eights-form-grid,
  .afro-eights-name-grid,
  .afro-eights-lobby-grid,
  .afro-eights-rules-grid,
  .afro-eights-choice-row,
  .afro-eights-choice-row-three { grid-template-columns: 1fr; }
  .afro-eights-screen-head { align-items: flex-start; flex-direction: column; }
  .afro-eights-mode-card { min-height: 150px; }
}

/* v0.3 mode menu and game-flow shell */
.afro-eights-menu-screen {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  overflow: auto;
  background-image: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.52)), var(--ae-bg-image);
  background-size: cover;
  background-position: center;
}
.afro-eights-menu-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(244,194,79,.22), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(255,247,223,.12), transparent 22%),
    radial-gradient(circle at 50% 92%, rgba(130,46,26,.30), transparent 36%);
}
.afro-eights-menu-card {
  position: relative;
  width: min(940px, 100%);
  border-radius: 30px;
  padding: clamp(20px, 4vw, 42px);
  background: linear-gradient(180deg, rgba(45,22,14,.93), rgba(19,10,7,.96));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 28px 80px rgba(0,0,0,.48);
}
.afro-eights-menu-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,247,223,.72);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.afro-eights-menu-brand img { max-width: 190px; max-height: 72px; object-fit: contain; filter: drop-shadow(0 8px 15px rgba(0,0,0,.35)); }
.afro-eights-menu-card h1 {
  margin: 16px 0 8px;
  color: var(--ae-gold);
  font-size: clamp(36px, 7vw, 72px);
  line-height: .94;
  letter-spacing: -.045em;
}
.afro-eights-menu-subtitle {
  max-width: 760px;
  color: rgba(255,247,223,.82);
  font-size: clamp(15px, 2vw, 18px);
  margin: 0 0 24px;
}
.afro-eights-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.afro-eights-mode-card {
  appearance: none;
  min-height: 156px;
  text-align: left;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.075);
  color: var(--ae-cream);
  padding: 18px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.18);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.afro-eights-mode-card:hover,
.afro-eights-mode-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(244,194,79,.78);
  background: rgba(255,255,255,.12);
  box-shadow: 0 18px 38px rgba(0,0,0,.28), 0 0 0 3px rgba(244,194,79,.16);
}
.afro-eights-mode-card strong {
  display: block;
  color: var(--ae-gold);
  font-size: 21px;
  margin: 6px 0;
}
.afro-eights-mode-card span:last-child { display: block; color: rgba(255,247,223,.78); }
.afro-eights-mode-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: rgba(244,194,79,.16);
  color: var(--ae-gold);
  font-size: 24px;
  font-weight: 1000;
}
.afro-eights-menu-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.afro-eights-setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.afro-eights-field {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.15);
}
.afro-eights-field span {
  color: var(--ae-gold);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.afro-eights-field select,
.afro-eights-room-row input {
  width: 100%;
  min-height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.34);
  color: var(--ae-cream);
  padding: 0 12px;
  font: inherit;
  font-weight: 850;
}
.afro-eights-field p { margin: 0; color: rgba(255,247,223,.76); }
.afro-eights-field-note { grid-column: span 1; }
.afro-eights-online-panel,
.afro-eights-rules {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.075);
  padding: clamp(16px, 2vw, 24px);
}
.afro-eights-online-panel h2,
.afro-eights-rules h2 { color: var(--ae-gold); margin: 0 0 6px; }
.afro-eights-online-panel p,
.afro-eights-online-panel li,
.afro-eights-rules p,
.afro-eights-rules li { color: rgba(255,247,223,.80); }
.afro-eights-room-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto;
  gap: 10px;
  margin: 16px 0;
}
.afro-eights-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.afro-eights-rules section {
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
}
.afro-eights-rules ul { margin: 8px 0 0; padding-left: 18px; }
.afro-eights-player-name small {
  display: inline-flex;
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(244,194,79,.14);
  color: rgba(255,247,223,.74);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.afro-eights-turn-gate { max-width: 560px; }
.afro-eights-turn-gate h3 { font-size: clamp(26px, 5vw, 42px); }

@media (max-width: 840px) {
  .afro-eights-menu-screen { min-height: 780px; place-items: start center; }
  .afro-eights-menu-card { border-radius: 24px; }
  .afro-eights-mode-grid,
  .afro-eights-setup-grid,
  .afro-eights-rules { grid-template-columns: 1fr; }
  .afro-eights-room-row { grid-template-columns: 1fr; }
  .afro-eights-menu-actions { justify-content: stretch; }
  .afro-eights-menu-actions .afro-eights-btn { flex: 1 1 180px; }
}

/* v0.3.0 app flow: menu, mode setup, local multiplayer, and online scaffold. */
.afro-eights-screen {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  background-image: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.56)), var(--ae-bg-image);
  background-size: cover;
  background-position: center;
}

.afro-eights-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 24%, rgba(244,194,79,.24), transparent 24%),
    radial-gradient(circle at 18% 72%, rgba(166,58,32,.22), transparent 25%),
    rgba(20, 9, 5, .24);
}

.afro-eights-screen-card {
  position: relative;
  width: min(900px, 100%);
  max-height: 100%;
  overflow: auto;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(52,25,15,.92), rgba(23,11,7,.92));
  box-shadow: 0 28px 80px rgba(0,0,0,.48);
  padding: clamp(18px, 4vw, 38px);
}

.afro-eights-main-menu .afro-eights-screen-card { width: min(940px, 100%); }
.afro-eights-menu-head { text-align: center; margin-bottom: clamp(16px, 3vw, 28px); }
.afro-eights-hero-logo { display: block; width: min(320px, 82vw); height: auto; margin: 0 auto 10px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.42)); }
.afro-eights-fallback-title { margin: 0; color: var(--ae-gold); font-size: clamp(32px, 8vw, 64px); }
.afro-eights-menu-head h2 { color: var(--ae-gold); font-size: clamp(28px, 6vw, 48px); line-height: 1; margin: 8px 0 10px; }
.afro-eights-tagline,
.afro-eights-menu-head p { max-width: 650px; margin: 0 auto; color: rgba(255,247,223,.82); font-weight: 750; }
.afro-eights-notice { margin: 0 0 16px; border: 1px solid rgba(244,194,79,.38); border-radius: 16px; padding: 12px 14px; background: rgba(244,194,79,.12); color: var(--ae-cream); font-weight: 850; text-align: center; }

.afro-eights-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.afro-eights-mode-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afro-eights-mode-card {
  appearance: none;
  text-align: left;
  min-height: 166px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  color: var(--ae-cream);
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.afro-eights-mode-card:hover,
.afro-eights-mode-card:focus-visible { transform: translateY(-4px); border-color: var(--ae-gold); background: linear-gradient(180deg, rgba(244,194,79,.17), rgba(255,255,255,.07)); box-shadow: 0 22px 42px rgba(0,0,0,.30); }
.afro-eights-mode-card strong { display: block; margin: 8px 0; color: var(--ae-gold); font-size: clamp(20px, 3vw, 28px); line-height: 1.05; }
.afro-eights-mode-card span:last-child { display: block; color: rgba(255,247,223,.78); font-weight: 700; }
.afro-eights-mode-kicker { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.32); color: rgba(255,247,223,.86); font-size: 12px; font-weight: 1000; text-transform: uppercase; letter-spacing: .08em; }

.afro-eights-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.afro-eights-field { display: grid; gap: 7px; color: rgba(255,247,223,.86); font-weight: 900; }
.afro-eights-field input,
.afro-eights-field select {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  color: var(--ae-cream);
  padding: 9px 12px;
  font: inherit;
  font-weight: 750;
}
.afro-eights-field input:disabled { opacity: .55; cursor: not-allowed; }
.afro-eights-field select option { color: #241208; }
.afro-eights-toggle { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: rgba(255,247,223,.86); font-weight: 900; }
.afro-eights-toggle input { width: 18px; height: 18px; }
.afro-eights-menu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.afro-eights-online-panel,
.afro-eights-rules-list { border-radius: 22px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.22); padding: clamp(14px, 3vw, 22px); }
.afro-eights-online-panel p,
.afro-eights-rules-list p { margin: 0 0 10px; color: rgba(255,247,223,.82); font-weight: 720; }
.afro-eights-rules-list p:last-child { margin-bottom: 0; }
.afro-eights-status-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; margin-bottom: 12px; border-radius: 999px; background: rgba(227,86,69,.18); border: 1px solid rgba(227,86,69,.38); color: #ffe2dd; font-size: 12px; font-weight: 1000; text-transform: uppercase; letter-spacing: .08em; }
.afro-eights-hand-helper { margin: -3px 0 6px; color: rgba(255,247,223,.70); font-size: 12px; font-weight: 800; }

@media (max-width: 840px) {
  .afro-eights-screen { min-height: 780px; align-items: start; }
  .afro-eights-mode-grid,
  .afro-eights-mode-grid-two,
  .afro-eights-form-grid { grid-template-columns: 1fr; }
  .afro-eights-mode-card { min-height: 128px; }
  .afro-eights-menu-actions .afro-eights-btn { width: 100%; }
}

/* Native app shell / main menu screens. */
.afro-eights-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(14px, 2.4vw, 28px);
  background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.56)), var(--ae-bg-image);
  background-size: cover;
  background-position: center;
}

.afro-eights-menu-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 20%, rgba(244,194,79,.24), transparent 24%),
    radial-gradient(circle at 90% 85%, rgba(128,46,28,.44), transparent 34%),
    linear-gradient(135deg, rgba(30,12,7,.90), rgba(16,8,6,.70));
}

.afro-eights-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.afro-eights-menu-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 1000;
}

.afro-eights-menu-brand img {
  width: min(220px, 52vw);
  height: auto;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.42));
}

.afro-eights-menu-brand span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,247,223,.82);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
}

.afro-eights-menu-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.afro-eights-menu-main,
.afro-eights-setup {
  display: grid;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  position: relative;
  z-index: 1;
}

.afro-eights-menu-main {
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, .85fr);
}

.afro-eights-setup {
  place-items: center;
  padding: 18px 0;
}

.afro-eights-hero-card,
.afro-eights-panel-card,
.afro-eights-menu-side {
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(52,25,15,.88), rgba(23,12,8,.88));
  box-shadow: 0 24px 70px rgba(0,0,0,.36);
  backdrop-filter: blur(7px);
}

.afro-eights-hero-card,
.afro-eights-panel-card {
  padding: clamp(20px, 4vw, 38px);
}

.afro-eights-panel-card {
  width: min(840px, 100%);
}

.afro-eights-menu-side {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.afro-eights-menu-icon {
  width: 78px;
  height: 78px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,.34);
  margin-bottom: 14px;
}

.afro-eights-eyebrow {
  margin: 0 0 8px;
  color: var(--ae-gold);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.afro-eights-hero-card h2,
.afro-eights-panel-card h2 {
  margin: 0 0 12px;
  color: var(--ae-cream);
  font-size: clamp(30px, 5vw, 58px);
  line-height: .96;
  letter-spacing: -.05em;
}

.afro-eights-panel-card h2 { font-size: clamp(28px, 4vw, 46px); }

.afro-eights-hero-card p,
.afro-eights-panel-card p,
.afro-eights-muted {
  color: rgba(255,247,223,.82);
}

.afro-eights-menu-actions {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.afro-eights-menu-actions.is-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.afro-eights-big-button,
.afro-eights-side-tile {
  appearance: none;
  text-align: left;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--ae-cream);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.afro-eights-big-button {
  display: grid;
  gap: 4px;
  border-radius: 22px;
  padding: 18px 20px;
  background: rgba(255,255,255,.09);
}

.afro-eights-big-button span,
.afro-eights-side-tile strong {
  color: var(--ae-gold);
  font-size: 20px;
  font-weight: 1000;
}

.afro-eights-big-button small,
.afro-eights-side-tile span {
  color: rgba(255,247,223,.74);
  font-size: 13px;
  font-weight: 800;
}

.afro-eights-big-button:hover,
.afro-eights-big-button:focus-visible,
.afro-eights-side-tile:hover,
.afro-eights-side-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(244,194,79,.72);
  background: rgba(255,255,255,.14);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

.afro-eights-side-tile {
  display: grid;
  gap: 6px;
  width: 100%;
  border-radius: 20px;
  padding: 16px;
  background: rgba(0,0,0,.24);
}

.afro-eights-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.afro-eights-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ae-gold);
  font-size: 13px;
  font-weight: 950;
}

.afro-eights-form-grid input,
.afro-eights-form-grid select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(0,0,0,.36);
  color: var(--ae-cream);
  font: inherit;
  font-weight: 800;
}

.afro-eights-form-grid select option {
  color: #241208;
}

.afro-eights-inline-notice {
  margin-top: 16px;
  border-radius: 16px;
  border: 1px solid rgba(244,194,79,.40);
  background: rgba(244,194,79,.12);
  color: #fff7df;
  padding: 12px 14px;
  font-weight: 850;
}

.afro-eights-rules-list {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.afro-eights-rules-list div {
  display: grid;
  grid-template-columns: minmax(72px, .35fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.afro-eights-rules-list strong { color: var(--ae-gold); }
.afro-eights-rules-list span { color: rgba(255,247,223,.82); }

.afro-eights-hand-hidden {
  min-height: 96px;
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 4px;
  border-radius: 18px;
  border: 1px dashed rgba(244,194,79,.44);
  background: rgba(0,0,0,.26);
  color: rgba(255,247,223,.82);
  padding: 16px;
}

.afro-eights-hand-hidden strong {
  color: var(--ae-gold);
  font-size: 18px;
}

.afro-eights-hand-hidden span { max-width: 380px; }

@media (max-width: 840px) {
  .afro-eights-shell { min-height: 780px; height: auto; }
  .afro-eights-menu-header { align-items: flex-start; flex-direction: column; }
  .afro-eights-menu-main { grid-template-columns: 1fr; align-items: stretch; }
  .afro-eights-form-grid { grid-template-columns: 1fr; }
  .afro-eights-menu-actions.is-inline { align-items: stretch; flex-direction: column; }
  .afro-eights-menu-actions.is-inline .afro-eights-btn { width: 100%; }
  .afro-eights-rules-list div { grid-template-columns: 1fr; }
}

body.afro-eights-game-page .entry-content,
body.afro-eights-game-page .wp-block-post-content {
  max-width: none;
}

body.afro-eights-game-page .afro-eights-root {
  max-width: min(1280px, calc(100vw - 32px));
  margin-top: clamp(8px, 2vw, 24px);
  margin-bottom: clamp(16px, 3vw, 40px);
}

/* v0.4.0 fit, landscape gameplay, drag/drop, and real room UI overrides. */
body.afro-eights-game-page .afro-eights-installed-page,
body.afro-eights-managed-page .afro-eights-installed-page {
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
}

body.afro-eights-game-page .entry-content > *,
body.afro-eights-managed-page .entry-content > *,
body.afro-eights-game-page .wp-block-post-content > *,
body.afro-eights-managed-page .wp-block-post-content > * {
  max-width: none;
}

body.afro-eights-game-page .afro-eights-root,
body.afro-eights-managed-page .afro-eights-root,
.afro-eights-root.afro-eights-fit-viewport {
  width: min(var(--afro-eights-width, 100%), calc(100vw - 18px));
  max-width: min(1360px, calc(100vw - 18px));
  height: min(var(--afro-eights-height, 720px), calc(100svh - 52px));
  min-height: min(560px, calc(100svh - 52px));
  margin-top: clamp(4px, 1.2vw, 12px);
  margin-bottom: clamp(8px, 1.8vw, 18px);
}

body.admin-bar.afro-eights-game-page .afro-eights-root,
body.admin-bar.afro-eights-managed-page .afro-eights-root {
  height: min(var(--afro-eights-height, 720px), calc(100svh - 84px));
  min-height: min(540px, calc(100svh - 84px));
}

.afro-eights-shell {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: auto;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}

.afro-eights-menu-main,
.afro-eights-setup {
  min-height: 0;
}

.afro-eights-menu-main {
  grid-template-columns: minmax(0, 1.22fr) minmax(240px, .78fr);
  align-items: stretch;
}

.afro-eights-hero-card,
.afro-eights-panel-card,
.afro-eights-menu-side {
  min-height: 0;
}

.afro-eights-hero-card,
.afro-eights-panel-card {
  padding: clamp(16px, 2.8vw, 30px);
}

.afro-eights-menu-icon {
  width: clamp(54px, 7vw, 74px);
  height: clamp(54px, 7vw, 74px);
  margin-bottom: 8px;
}

.afro-eights-hero-card h2,
.afro-eights-panel-card h2 {
  font-size: clamp(28px, 4.8vw, 50px);
}

.afro-eights-menu-actions {
  gap: 10px;
  margin-top: 16px;
}

.afro-eights-big-button {
  min-height: 0;
  padding: clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 18px);
  border-radius: 18px;
}

.afro-eights-side-tile {
  padding: clamp(12px, 1.8vw, 16px);
  border-radius: 18px;
}

.afro-eights-big-button span,
.afro-eights-side-tile strong {
  font-size: clamp(18px, 2.2vw, 24px);
}

.afro-eights-room-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin: 12px 0;
  padding: 10px 18px;
  border-radius: 16px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(244,194,79,.48);
  color: var(--ae-gold);
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 1000;
  letter-spacing: .08em;
}

.afro-eights-room-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.afro-eights-room-player {
  display: grid;
  gap: 4px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.afro-eights-room-player strong { color: var(--ae-gold); }
.afro-eights-room-player span { color: rgba(255,247,223,.80); font-weight: 800; }

.afro-eights-discard-drop {
  position: relative;
  display: grid;
  place-items: center;
  min-width: calc(var(--ae-card-w, 92px) + 28px);
  min-height: calc(var(--ae-card-h, 134px) + 34px);
  padding: 12px;
  border-radius: 18px;
  border: 2px dashed rgba(244,194,79,0);
  transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}

.afro-eights-discard-drop.is-drag-over {
  border-color: rgba(244,194,79,.92);
  background: rgba(244,194,79,.15);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(244,194,79,.18), 0 18px 34px rgba(0,0,0,.24);
}

.afro-eights-drop-hint {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(255,247,223,.72);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  pointer-events: none;
}

button.afro-eights-card.is-playable {
  cursor: grab;
  touch-action: none;
}
button.afro-eights-card.is-playable:active { cursor: grabbing; }
.afro-eights-card.is-dragging-source { opacity: .35; filter: grayscale(.3); }
.afro-eights-card-ghost {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 999999;
  pointer-events: none;
  margin: 0 !important;
  opacity: .96;
  box-shadow: 0 22px 45px rgba(0,0,0,.46) !important;
}

.afro-eights-modal-passive .afro-eights-modal-card {
  max-width: 420px;
}

@media (max-height: 760px) and (min-width: 841px) {
  .afro-eights-menu-header { gap: 8px; }
  .afro-eights-menu-brand img { width: min(170px, 28vw); }
  .afro-eights-menu-brand span { font-size: 11px; padding: 4px 8px; }
  .afro-eights-hero-card h2 { font-size: clamp(30px, 4.2vw, 44px); }
  .afro-eights-hero-card p { font-size: 15px; }
  .afro-eights-menu-icon { width: 54px; height: 54px; margin-bottom: 6px; }
  .afro-eights-big-button { padding: 12px 16px; }
  .afro-eights-side-tile { padding: 12px 14px; }
}

@media (max-width: 840px) {
  body.afro-eights-game-page .afro-eights-root,
  body.afro-eights-managed-page .afro-eights-root,
  .afro-eights-root.afro-eights-fit-viewport {
    width: min(100%, calc(100vw - 10px));
    max-width: calc(100vw - 10px);
    height: auto;
    min-height: min(760px, calc(100svh - 24px));
    border-radius: 16px;
  }
  .afro-eights-room-players { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 620px) {
  body.afro-eights-game-page,
  body.afro-eights-managed-page {
    overflow: hidden;
  }

  body.afro-eights-game-page .afro-eights-root,
  body.afro-eights-managed-page .afro-eights-root,
  .afro-eights-root.afro-eights-fit-viewport {
    width: 100vw;
    max-width: 100vw;
    height: calc(100svh - 6px);
    min-height: 0;
    margin: 0 auto;
    border-radius: 10px;
  }

  body.admin-bar.afro-eights-game-page .afro-eights-root,
  body.admin-bar.afro-eights-managed-page .afro-eights-root {
    height: calc(100svh - 38px);
    min-height: 0;
  }

  .afro-eights-board.afro-eights-gameplay {
    min-height: 0;
    height: 100%;
    grid-template-rows: auto minmax(48px, .42fr) minmax(104px, 1fr) minmax(104px, .72fr);
    gap: 5px;
    padding: 6px;
    overflow: hidden;
  }

  .afro-eights-topbar {
    grid-template-columns: minmax(74px, 112px) minmax(0, 1fr) auto;
    gap: 6px;
  }

  .afro-eights-brand img { max-width: 104px; }
  .afro-eights-status { gap: 4px; justify-content: center; }
  .afro-eights-pill { min-height: 22px; padding: 3px 7px; font-size: 10px; }
  .afro-eights-actions { gap: 4px; }
  .afro-eights-btn { padding: 6px 8px; font-size: 11px; }

  .afro-eights-opponents {
    grid-template-columns: repeat(var(--ae-opponents, 1), minmax(0, 1fr));
    gap: 5px;
    min-height: 0;
  }

  .afro-eights-player-panel {
    min-height: 0;
    border-radius: 12px;
    padding: 6px;
  }
  .afro-eights-player-head { margin-bottom: 4px; font-size: 11px; }
  .afro-eights-score { font-size: 10px; }
  .afro-eights-mini-hand { min-height: 32px; padding-left: 8px; }
  .afro-eights-card-back-mini { width: 24px; height: 36px; margin-left: -6px; border-radius: 5px; }

  .afro-eights-table {
    grid-template-columns: minmax(120px,.85fr) minmax(130px,1fr) minmax(120px,.85fr);
    gap: 5px;
    min-height: 0;
  }
  .afro-eights-table-slot {
    min-height: 92px;
    border-radius: 12px;
    gap: 4px;
    padding: 5px;
  }
  .afro-eights-table-label { font-size: 9px; }
  .afro-eights-message { min-height: 32px; padding: 5px 6px; font-size: 10.5px; border-radius: 10px; }
  .afro-eights-log { max-height: 42px; padding: 5px 7px; font-size: 10px; border-radius: 9px; }
  .afro-eights-pile-row { gap: 7px; }

  .afro-eights-card {
    --ae-card-w: clamp(44px, 8.4vw, 58px);
    --ae-card-h: clamp(64px, 12vw, 84px);
    border-radius: 8px;
    border-width: 1px;
  }
  .afro-eights-card-rank-top,
  .afro-eights-card-rank-bottom { font-size: 12px; left: 5px; }
  .afro-eights-card-rank-top { top: 5px; }
  .afro-eights-card-rank-bottom { right: 5px; bottom: 5px; }
  .afro-eights-card-suit-top,
  .afro-eights-card-suit-bottom { width: 11px; height: 11px; left: 5px; }
  .afro-eights-card-suit-top { top: 20px; }
  .afro-eights-card-suit-bottom { right: 5px; bottom: 20px; }
  .afro-eights-card-center { width: 30px; height: 30px; }
  .afro-eights-card-joker { font-size: 10px; }
  .afro-eights-discard-drop { min-width: calc(var(--ae-card-w, 58px) + 16px); min-height: calc(var(--ae-card-h, 84px) + 22px); padding: 6px; border-radius: 10px; }
  .afro-eights-drop-hint { display: none; }
  .afro-eights-deck-count { min-width: 24px; height: 18px; font-size: 10px; }

  .afro-eights-human-panel { min-height: 0; }
  .afro-eights-hand-cards { min-height: 72px; padding: 7px 4px 2px; overflow-x: auto; }
  .afro-eights-hand-cards .afro-eights-card { margin-left: -13px; }
  button.afro-eights-card:hover,
  button.afro-eights-card:focus-visible { transform: translateY(-4px); }

  .afro-eights-modal { padding: 8px; }
  .afro-eights-modal-card { width: min(440px, 96vw); padding: 14px; border-radius: 16px; }
  .afro-eights-modal-card h3 { font-size: 22px; }
  .afro-eights-suit-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
  .afro-eights-suit-choice img { width: 42px; height: 42px; }
}

@media (orientation: landscape) and (max-height: 460px) {
  .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(34px, .34fr) minmax(84px, .95fr) minmax(86px, .62fr);
    gap: 4px;
    padding: 4px;
  }
  .afro-eights-brand img { max-width: 84px; }
  .afro-eights-pill:nth-of-type(n+5) { display: none; }
  .afro-eights-table-slot:first-child { display: none; }
  .afro-eights-table { grid-template-columns: minmax(130px, 1fr) minmax(110px, .75fr); }
  .afro-eights-table-slot { min-height: 78px; }
  .afro-eights-card { --ae-card-w: 42px; --ae-card-h: 61px; }
  .afro-eights-hand-cards { min-height: 60px; }
}

/* v0.4.0 viewport fitting, drag/drop, online room, and mobile landscape gameplay overrides. */
.afro-eights-root {
  height: min(var(--afro-eights-height, 720px), var(--ae-fit-height, 720px));
  min-height: min(540px, var(--ae-fit-height, 540px));
  max-height: var(--ae-fit-height, 720px);
}

.afro-eights-root.afro-eights-is-game { min-height: min(500px, var(--ae-fit-height, 500px)); }
.afro-eights-root.afro-eights-is-menu { min-height: min(520px, var(--ae-fit-height, 520px)); }
.afro-eights-shell { overflow: auto; min-height: 100%; }
.afro-eights-menu-main,
.afro-eights-setup { min-height: 0; }
.afro-eights-hero-card h2 { font-size: clamp(30px, 4.4vw, 52px); }
.afro-eights-panel-card h2 { font-size: clamp(26px, 3.6vw, 42px); }
.afro-eights-menu-icon { width: 64px; height: 64px; margin-bottom: 8px; }
.afro-eights-big-button { padding: 14px 18px; }
.afro-eights-side-tile { padding: 14px; }
.afro-eights-menu-actions { margin-top: 16px; }

body.afro-eights-managed-page .afro-eights-installed-page,
body.afro-eights-game-page .afro-eights-installed-page {
  margin: 0 !important;
  padding: 0 !important;
}
body.afro-eights-managed-page .afro-eights-page-intro,
body.afro-eights-game-page .afro-eights-page-intro { display: none !important; }
body.afro-eights-managed-page .afro-eights-root,
body.afro-eights-game-page .afro-eights-root {
  max-width: min(1280px, calc(100vw - 16px));
  margin-top: 8px;
  margin-bottom: 8px;
}

.afro-eights-discard-drop {
  position: relative;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 18px;
  border: 2px dashed rgba(255,255,255,.12);
  transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.afro-eights-discard-drop.is-drag-over {
  border-color: rgba(244,194,79,.9);
  background: rgba(244,194,79,.14);
  transform: scale(1.03);
  box-shadow: 0 0 0 4px rgba(244,194,79,.16), 0 18px 40px rgba(0,0,0,.35);
}
.afro-eights-drop-hint {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%, 100%);
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: var(--ae-gold);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
  pointer-events: none;
}
.afro-eights-card.is-dragging-source {
  opacity: .38;
  filter: saturate(.8);
}
.afro-eights-card-ghost {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 999999;
  pointer-events: none !important;
  opacity: .92;
  transform-origin: center;
  box-shadow: 0 24px 54px rgba(0,0,0,.48), 0 0 0 4px rgba(244,194,79,.24) !important;
}
button.afro-eights-card[draggable="true"] { touch-action: pan-x; }

.afro-eights-room-card { text-align: center; }
.afro-eights-room-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  margin: 12px auto;
  padding: 10px 16px;
  border-radius: 18px;
  background: rgba(244,194,79,.14);
  border: 1px solid rgba(244,194,79,.42);
  color: var(--ae-gold);
  font-size: clamp(24px, 5vw, 44px);
  font-weight: 1000;
  letter-spacing: .12em;
}
.afro-eights-room-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.afro-eights-room-player {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.22);
  text-align: left;
}
.afro-eights-room-player strong { color: var(--ae-gold); }
.afro-eights-room-player span { color: rgba(255,247,223,.80); font-weight: 800; }

@media (max-height: 720px) and (min-width: 841px) {
  .afro-eights-shell { padding: clamp(12px, 2vw, 20px); }
  .afro-eights-menu-main { gap: 16px; }
  .afro-eights-hero-card,
  .afro-eights-panel-card { padding: clamp(18px, 3vw, 30px); }
  .afro-eights-menu-icon { display: none; }
  .afro-eights-hero-card h2 { font-size: clamp(32px, 4vw, 46px); }
  .afro-eights-hero-card p { margin-top: 6px; margin-bottom: 0; }
  .afro-eights-big-button { padding: 12px 16px; border-radius: 18px; }
  .afro-eights-side-tile { padding: 12px 14px; }
}

@media (max-width: 840px) {
  .afro-eights-root {
    height: min(var(--afro-eights-height, 720px), var(--ae-fit-height, 720px));
    min-height: min(600px, var(--ae-fit-height, 600px));
  }
  .afro-eights-shell { min-height: 100%; height: 100%; }
  .afro-eights-menu-main { grid-template-columns: 1fr; align-items: stretch; }
  .afro-eights-room-players { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .afro-eights-root.afro-eights-is-game {
    border-radius: 14px;
    min-height: min(320px, var(--ae-fit-height, 420px));
  }
  .afro-eights-board {
    grid-template-rows: auto minmax(48px, auto) minmax(104px, 1fr) auto;
    gap: 6px;
    padding: 7px;
  }
  .afro-eights-topbar {
    grid-template-columns: minmax(80px, 135px) 1fr auto;
    gap: 6px;
  }
  .afro-eights-brand img { max-width: 128px; }
  .afro-eights-status { gap: 4px; justify-content: center; }
  .afro-eights-actions { gap: 5px; }
  .afro-eights-pill {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 11px;
  }
  .afro-eights-btn {
    padding: 7px 10px;
    font-size: 12px;
  }
  .afro-eights-opponents {
    gap: 6px;
  }
  .afro-eights-player-panel {
    min-height: 54px;
    padding: 6px;
    border-radius: 12px;
  }
  .afro-eights-player-head {
    margin-bottom: 4px;
    font-size: 11px;
  }
  .afro-eights-score { font-size: 10px; }
  .afro-eights-mini-hand,
  .afro-eights-hand-cards { min-height: 42px; }
  .afro-eights-card-back-mini {
    width: 27px;
    height: 40px;
    margin-left: -7px;
    border-radius: 6px;
  }
  .afro-eights-table {
    grid-template-columns: minmax(120px,.8fr) minmax(190px,1.1fr) minmax(130px,.85fr);
    gap: 6px;
    min-height: 112px;
  }
  .afro-eights-table-slot {
    min-height: 104px;
    padding: 6px;
    border-radius: 13px;
    gap: 5px;
  }
  .afro-eights-table-label { font-size: 9px; }
  .afro-eights-pile-row { gap: 8px; }
  .afro-eights-card {
    --ae-card-w: 56px;
    --ae-card-h: 82px;
    border-radius: 8px;
  }
  .afro-eights-card-rank-top,
  .afro-eights-card-rank-bottom { font-size: 12px; left: 6px; }
  .afro-eights-card-rank-top { top: 6px; }
  .afro-eights-card-rank-bottom { right: 6px; bottom: 6px; }
  .afro-eights-card-suit-top,
  .afro-eights-card-suit-bottom { width: 12px; height: 12px; left: 6px; }
  .afro-eights-card-suit-top { top: 20px; }
  .afro-eights-card-suit-bottom { right: 6px; bottom: 20px; }
  .afro-eights-card-center { width: 32px; height: 32px; }
  .afro-eights-card-joker { font-size: 10px; }
  .afro-eights-deck-count {
    min-width: 24px;
    height: 20px;
    font-size: 10px;
  }
  .afro-eights-discard-drop { padding: 4px; border-radius: 12px; }
  .afro-eights-drop-hint { display: none; }
  .afro-eights-message {
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 11px;
  }
  .afro-eights-log {
    max-height: 54px;
    padding: 5px 7px;
    border-radius: 10px;
    font-size: 10px;
  }
  .afro-eights-human-panel { min-height: 88px; }
  .afro-eights-hand-cards {
    min-height: 76px;
    padding: 7px 4px 4px;
  }
  .afro-eights-hand-cards .afro-eights-card { margin-left: -13px; }
  .afro-eights-modal { padding: 8px; }
  .afro-eights-modal-card {
    width: min(460px, 96vw);
    padding: 14px;
    border-radius: 18px;
  }
  .afro-eights-modal-card h3 { font-size: 22px; }
  .afro-eights-modal-card p { margin-bottom: 10px; font-size: 12px; }
  .afro-eights-suit-grid { gap: 6px; }
  .afro-eights-suit-choice,
  .afro-eights-choice-button { padding: 8px; border-radius: 12px; }
  .afro-eights-suit-choice img { width: 38px; height: 38px; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .afro-eights-root.afro-eights-is-game { min-height: min(300px, var(--ae-fit-height, 360px)); }
  .afro-eights-status .afro-eights-pill:nth-child(2),
  .afro-eights-status .afro-eights-pill:nth-child(4) { display: none; }
  .afro-eights-table { min-height: 96px; }
  .afro-eights-table-slot { min-height: 90px; }
  .afro-eights-human-panel { min-height: 78px; }
}

@media (orientation: landscape) and (max-height: 460px) {
  .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(34px, .28fr) minmax(74px, .72fr) minmax(112px, 1fr);
  }
  .afro-eights-table-slot { min-height: 72px; }
  .afro-eights-human-panel { padding: 5px; }
  .afro-eights-human-panel .afro-eights-player-head { margin-bottom: 2px; }
  .afro-eights-hand-cards { min-height: 66px; padding: 4px 4px 0; }
  .afro-eights-card { --ae-card-w: 40px; --ae-card-h: 58px; }
  .afro-eights-discard-drop { min-height: calc(var(--ae-card-h, 58px) + 14px); }
}

@media (orientation: landscape) and (max-height: 460px) {
  .afro-eights-table { grid-template-columns: minmax(130px, .9fr) minmax(180px, 1.4fr); min-height: 74px; }
  .afro-eights-table-slot:first-child { display: none; }
}

/* v0.5.0 up-to-8-player room and table layout overrides. */
.afro-eights-gameplay .afro-eights-opponents {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.afro-eights-room-players {
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

.afro-eights-room-player.is-open {
  opacity: .72;
  border-style: dashed;
}

.afro-eights-room-player.is-filled {
  border-color: rgba(244,194,79,.28);
}

.afro-eights-local-name-field {
  min-width: 0;
}

@media (max-width: 620px) {
  .afro-eights-room-players { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .afro-eights-gameplay .afro-eights-opponents {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .afro-eights-gameplay .afro-eights-opponents .afro-eights-player-panel {
    flex: 0 0 clamp(104px, 18vw, 150px);
  }
  .afro-eights-gameplay .afro-eights-opponents .afro-eights-player-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .afro-eights-gameplay .afro-eights-opponents .afro-eights-score {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .afro-eights-gameplay .afro-eights-opponents .afro-eights-player-panel {
    flex-basis: clamp(88px, 16vw, 126px);
  }
  .afro-eights-gameplay .afro-eights-opponents .afro-eights-mini-hand {
    display: none;
  }
}

/* v0.5.0 compact opponent text for 5-8 player tables. */
.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 3px;
}

.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-name,
.afro-eights-gameplay .afro-eights-opponents .afro-eights-score {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afro-eights-gameplay .afro-eights-opponents .afro-eights-score {
  white-space: normal;
  line-height: 1.2;
}

/* v0.6.0 full-page shell, fullscreen controls, safe-area fitting, and mobile rotation guidance. */
.afro-eights-root {
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.afro-eights-full-page-shell {
  margin: 0 !important;
  min-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #20100b;
}

body.afro-eights-full-page-shell .afro-eights-full-page-main {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body.admin-bar.afro-eights-full-page-shell .afro-eights-full-page-main {
  padding-top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar.afro-eights-full-page-shell .afro-eights-full-page-main {
    padding-top: 46px;
  }
}

body.afro-eights-game-page.afro-eights-managed-page .site-header,
body.afro-eights-game-page.afro-eights-managed-page .site-footer,
body.afro-eights-game-page.afro-eights-managed-page header.wp-block-template-part,
body.afro-eights-game-page.afro-eights-managed-page footer.wp-block-template-part,
body.afro-eights-game-page.afro-eights-managed-page .entry-header,
body.afro-eights-game-page.afro-eights-managed-page .page-header,
body.afro-eights-game-page.afro-eights-managed-page .comments-area,
body.afro-eights-game-page.afro-eights-managed-page .widget-area,
body.afro-eights-game-page.afro-eights-managed-page aside.sidebar {
  display: none !important;
}

body.afro-eights-game-page.afro-eights-managed-page .site,
body.afro-eights-game-page.afro-eights-managed-page .site-main,
body.afro-eights-game-page.afro-eights-managed-page main,
body.afro-eights-game-page.afro-eights-managed-page article,
body.afro-eights-game-page.afro-eights-managed-page .entry-content,
body.afro-eights-game-page.afro-eights-managed-page .wp-site-blocks,
body.afro-eights-game-page.afro-eights-managed-page .wp-block-post-content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.afro-eights-full-page-shell .afro-eights-root,
.afro-eights-root.afro-eights-native-fullscreen,
.afro-eights-root:fullscreen,
.afro-eights-root:-webkit-full-screen {
  width: 100vw !important;
  max-width: none !important;
  height: var(--ae-viewport-height, 100vh) !important;
  height: var(--ae-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.admin-bar.afro-eights-full-page-shell .afro-eights-root {
  height: calc(100vh - 32px) !important;
  height: calc(100dvh - 32px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar.afro-eights-full-page-shell .afro-eights-root {
    height: calc(100vh - 46px) !important;
    height: calc(100dvh - 46px) !important;
  }
}

.afro-eights-root.afro-eights-native-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
}

.afro-eights-root.afro-eights-native-fullscreen .afro-eights-board,
.afro-eights-root.afro-eights-native-fullscreen .afro-eights-shell,
.afro-eights-root:fullscreen .afro-eights-board,
.afro-eights-root:fullscreen .afro-eights-shell,
.afro-eights-root:-webkit-full-screen .afro-eights-board,
.afro-eights-root:-webkit-full-screen .afro-eights-shell,
body.afro-eights-full-page-shell .afro-eights-board,
body.afro-eights-full-page-shell .afro-eights-shell {
  height: 100%;
  min-height: 0;
}

body.afro-eights-full-page-shell .afro-eights-shell,
.afro-eights-root.afro-eights-native-fullscreen .afro-eights-shell,
.afro-eights-root:fullscreen .afro-eights-shell,
.afro-eights-root:-webkit-full-screen .afro-eights-shell {
  overflow: auto;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
}

body.afro-eights-full-page-shell .afro-eights-board.afro-eights-gameplay,
.afro-eights-root.afro-eights-native-fullscreen .afro-eights-board.afro-eights-gameplay,
.afro-eights-root:fullscreen .afro-eights-board.afro-eights-gameplay,
.afro-eights-root:-webkit-full-screen .afro-eights-board.afro-eights-gameplay {
  overflow: hidden;
  grid-template-rows: auto minmax(72px, .45fr) minmax(136px, 1fr) minmax(118px, .72fr);
  gap: clamp(6px, 1.15vmin, 12px);
  padding-top: max(clamp(7px, 1.2vmin, 18px), env(safe-area-inset-top));
  padding-right: max(clamp(7px, 1.2vmin, 18px), env(safe-area-inset-right));
  padding-bottom: max(clamp(7px, 1.2vmin, 18px), env(safe-area-inset-bottom));
  padding-left: max(clamp(7px, 1.2vmin, 18px), env(safe-area-inset-left));
}

.afro-eights-fullscreen-btn {
  white-space: nowrap;
}

.afro-eights-landscape-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(244,194,79,.36);
  background: rgba(244,194,79,.13);
  color: var(--ae-gold);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.afro-eights-device-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 80;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 25%, rgba(244,194,79,.20), transparent 30%), rgba(12, 6, 4, .86);
  backdrop-filter: blur(8px);
}

.afro-eights-root.afro-eights-show-rotate-hint .afro-eights-device-overlay {
  display: grid;
}

.afro-eights-root.afro-eights-show-rotate-hint .afro-eights-board.afro-eights-gameplay {
  filter: blur(2px) saturate(.75);
}

.afro-eights-device-card {
  width: min(460px, 100%);
  border-radius: 28px;
  padding: clamp(20px, 6vw, 34px);
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(55,28,18,.98), rgba(24,12,8,.98));
  color: var(--ae-cream);
  box-shadow: 0 28px 80px rgba(0,0,0,.56);
  text-align: center;
}

.afro-eights-device-card h3 {
  margin: 12px 0 8px;
  color: var(--ae-gold);
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1;
}

.afro-eights-device-card p {
  margin: 0 auto 18px;
  color: rgba(255,247,223,.84);
  font-weight: 760;
}

.afro-eights-device-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.afro-eights-device-actions .afro-eights-btn {
  min-width: 150px;
}

.afro-eights-rotate-icon {
  display: inline-grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: rgba(244,194,79,.14);
  border: 1px solid rgba(244,194,79,.38);
}

.afro-eights-rotate-icon span {
  position: relative;
  display: block;
  width: 34px;
  height: 54px;
  border: 3px solid var(--ae-gold);
  border-radius: 10px;
  box-shadow: 0 0 0 5px rgba(244,194,79,.10);
}

.afro-eights-rotate-icon span::after {
  content: "↻";
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ae-gold);
  font-size: 26px;
  font-weight: 1000;
}

@media (prefers-reduced-motion: no-preference) {
  .afro-eights-root.afro-eights-show-rotate-hint .afro-eights-rotate-icon span {
    animation: afro-eights-rotate-phone 1.9s ease-in-out infinite;
    transform-origin: center;
  }
}

@keyframes afro-eights-rotate-phone {
  0%, 100% { transform: rotate(0deg); }
  45%, 70% { transform: rotate(90deg); }
}

@media (min-width: 841px) {
  body.afro-eights-full-page-shell .afro-eights-topbar,
  .afro-eights-root.afro-eights-native-fullscreen .afro-eights-topbar {
    grid-template-columns: minmax(132px, 220px) minmax(0, 1fr) auto;
  }

  body.afro-eights-full-page-shell .afro-eights-table,
  .afro-eights-root.afro-eights-native-fullscreen .afro-eights-table {
    min-height: 0;
  }

  body.afro-eights-full-page-shell .afro-eights-human-panel,
  .afro-eights-root.afro-eights-native-fullscreen .afro-eights-human-panel {
    min-height: 0;
  }
}

@media (orientation: portrait) and (max-width: 840px) {
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-is-game,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-is-game,
  .afro-eights-root.afro-eights-portrait-device.afro-eights-is-game {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.afro-eights-full-page-shell .afro-eights-board.afro-eights-gameplay,
  .afro-eights-root.afro-eights-native-fullscreen .afro-eights-board.afro-eights-gameplay,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay {
    height: auto;
    min-height: 100%;
    overflow: visible;
    grid-template-rows: auto auto auto auto;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-topbar {
    grid-template-columns: 1fr;
    gap: 7px;
    text-align: center;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-brand,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-actions,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-status {
    justify-content: center;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-brand img {
    max-width: min(170px, 54vw);
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-actions .afro-eights-btn {
    padding: 8px 10px;
    font-size: 12px;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-status .afro-eights-pill:nth-child(n+5) {
    display: none;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents {
    display: grid;
    grid-template-columns: 1fr;
    max-height: 26vh;
    max-height: 26dvh;
    overflow: auto;
    gap: 7px;
    padding-right: 2px;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-player-panel {
    min-height: 54px;
    padding: 7px;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-mini-hand {
    display: none;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-table {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 7px;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-table-slot {
    min-height: 0;
    padding: 8px;
    border-radius: 14px;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-table-slot:first-child {
    order: 2;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-table-slot:nth-child(2) {
    order: 1;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-table-slot:nth-child(3) {
    order: 3;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-card {
    --ae-card-w: clamp(56px, 17vw, 74px);
    --ae-card-h: clamp(82px, 24vw, 108px);
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel {
    min-height: 108px;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards {
    min-height: 84px;
    padding-top: 8px;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-is-game,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-is-game,
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game {
    overflow: hidden;
  }

  body.afro-eights-full-page-shell .afro-eights-board.afro-eights-gameplay,
  .afro-eights-root.afro-eights-native-fullscreen .afro-eights-board.afro-eights-gameplay,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-board.afro-eights-gameplay {
    height: 100%;
    min-height: 0 !important;
    overflow: hidden;
    grid-template-rows: auto minmax(38px, .32fr) minmax(82px, .88fr) minmax(78px, .62fr) !important;
    gap: 5px;
    padding: max(5px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-topbar {
    grid-template-columns: minmax(74px, 128px) minmax(0, 1fr) auto;
    gap: 5px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-brand img {
    max-width: min(118px, 20vw);
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-status,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-actions {
    gap: 4px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-pill {
    min-height: 22px;
    padding: 3px 6px;
    font-size: 10px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-btn {
    padding: 6px 8px;
    font-size: 11px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents {
    display: flex;
    gap: 5px;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1px;
    scrollbar-width: thin;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-panel {
    flex: 0 0 clamp(92px, 17vw, 140px);
    min-height: 0;
    padding: 5px;
    border-radius: 10px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-player-head {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-score {
    display: none;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-mini-hand,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards {
    min-height: 40px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-back-mini {
    width: 24px;
    height: 36px;
    margin-left: -7px;
    border-radius: 5px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-table {
    grid-template-columns: minmax(116px,.78fr) minmax(170px,1.15fr) minmax(120px,.82fr);
    gap: 5px;
    min-height: 0;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot {
    min-height: 70px;
    padding: 5px;
    border-radius: 11px;
    gap: 4px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-label {
    font-size: 8.5px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-message {
    min-height: 28px;
    padding: 4px 6px;
    font-size: 10px;
    border-radius: 9px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-log {
    max-height: 38px;
    padding: 4px 6px;
    font-size: 9.5px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-card {
    --ae-card-w: clamp(42px, 8vw, 58px);
    --ae-card-h: clamp(61px, 11.5vw, 84px);
    border-width: 1px;
    border-radius: 8px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop {
    min-width: calc(var(--ae-card-w, 58px) + 12px);
    min-height: calc(var(--ae-card-h, 84px) + 16px);
    padding: 4px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-drop-hint {
    display: none;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel {
    min-height: 0;
    padding: 5px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards {
    min-height: 58px;
    padding: 4px 4px 0;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards .afro-eights-card {
    margin-left: -12px;
  }
}

@media (orientation: landscape) and (max-height: 430px) {
  .afro-eights-root.afro-eights-landscape-device .afro-eights-status .afro-eights-pill:nth-child(n+4) {
    display: none;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-table {
    grid-template-columns: minmax(132px, 1fr) minmax(112px, .76fr);
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot:first-child {
    display: none;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot {
    min-height: 60px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-card {
    --ae-card-w: 40px;
    --ae-card-h: 58px;
  }

  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-mini-hand {
    display: none;
  }
}

/* v0.6.1 card-art readability and placement animation overrides. */
.afro-eights-card {
  background: #fff !important;
  color: #21100a;
  border-color: rgba(34,17,8,.76) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.34), inset 0 0 0 2px rgba(255,255,255,.95), inset 0 0 0 5px rgba(213,174,86,.18);
  isolation: isolate;
}
.afro-eights-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  border-radius: inherit;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31,17,9,.10);
  pointer-events: none;
}
.afro-eights-card.is-back::before { display: none; }
.afro-eights-card.is-back {
  background: #1e0f0a var(--ae-card-back) center/cover no-repeat !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.34);
}
.afro-eights-card-rank-top,
.afro-eights-card-rank-bottom,
.afro-eights-card-suit-top,
.afro-eights-card-suit-bottom,
.afro-eights-card-center,
.afro-eights-card-joker {
  z-index: 3;
}
.afro-eights-card-rank-top,
.afro-eights-card-rank-bottom {
  min-width: 20px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  padding: 2px 3px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.afro-eights-card-art {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
  pointer-events: none;
}
.afro-eights-card-art img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  filter: none;
}
.afro-eights-card-art.is-face-art {
  inset: 3px;
  border-radius: 10px;
}
.afro-eights-card-art.is-face-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.afro-eights-card-art.is-power-art {
  inset: 24px 11px 22px;
  padding: 2px;
}
.afro-eights-card.has-card-art.is-face-art .afro-eights-card-suit-top,
.afro-eights-card.has-card-art.is-face-art .afro-eights-card-suit-bottom {
  width: 15px;
  height: 15px;
  padding: 1px;
  border-radius: 50%;
  background: rgba(255,255,255,.84);
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
.afro-eights-card.has-card-art.is-power-art .afro-eights-card-center { display: none; }
button.afro-eights-card.is-playable {
  box-shadow: 0 13px 25px rgba(0,0,0,.35), 0 0 0 3px rgba(75,210,125,.38), inset 0 0 0 2px rgba(255,255,255,.95), inset 0 0 0 5px rgba(213,174,86,.18);
}
button.afro-eights-card.is-playable:hover,
button.afro-eights-card.is-playable:focus-visible {
  box-shadow: 0 18px 32px rgba(0,0,0,.42), 0 0 0 4px rgba(244,194,79,.32), inset 0 0 0 2px rgba(255,255,255,.95), inset 0 0 0 5px rgba(213,174,86,.18);
}
.afro-eights-card.is-placing-source {
  opacity: .22 !important;
  transform: translateY(-4px) scale(.98) !important;
}
.afro-eights-discard-drop.is-receiving-card {
  border-color: rgba(244,194,79,.95) !important;
  background: rgba(244,194,79,.18) !important;
  box-shadow: 0 0 0 5px rgba(244,194,79,.18), inset 0 0 0 2px rgba(244,194,79,.22), 0 18px 40px rgba(0,0,0,.30) !important;
}
.afro-eights-card-play-anim {
  position: fixed !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  transform-origin: center center !important;
  will-change: transform, opacity;
  opacity: .98 !important;
  transition: transform 300ms cubic-bezier(.18,.82,.25,1.08), opacity 300ms ease, filter 300ms ease !important;
  box-shadow: 0 26px 58px rgba(0,0,0,.46), 0 0 0 4px rgba(244,194,79,.18) !important;
}
.afro-eights-card-play-anim.is-flying-to-pile {
  opacity: .99 !important;
  filter: saturate(1.06) brightness(1.04);
}
.afro-eights-card-ghost.afro-eights-card-play-anim {
  opacity: .98 !important;
}
button.afro-eights-card[draggable="true"] {
  touch-action: none !important;
  -webkit-user-drag: element;
}

@media (min-width: 900px) and (min-height: 720px) {
  .afro-eights-root.afro-eights-is-game .afro-eights-card {
    --ae-card-w: 104px;
    --ae-card-h: 152px;
  }
}
@media (orientation: landscape) and (max-height: 700px) {
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card {
    --ae-card-w: clamp(50px, 8.6vw, 70px);
    --ae-card-h: clamp(73px, 12.5vw, 102px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-art.is-power-art {
    inset: 17px 7px 15px;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-rank-top,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-rank-bottom {
    min-width: 15px;
    min-height: 15px;
    padding: 1px 2px;
  }
}
@media (orientation: landscape) and (max-height: 430px) {
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card {
    --ae-card-w: 48px;
    --ae-card-h: 70px;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-art.is-face-art { inset: 2px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-art.is-power-art { inset: 16px 6px 14px; }
}

/* Keep the original illustrations visible by reducing hand overlap after card-art mode is applied. */
.afro-eights-hand-cards .afro-eights-card { margin-left: -10px; }
@media (orientation: landscape) and (max-height: 700px) {
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards .afro-eights-card { margin-left: -6px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards .afro-eights-card { margin-left: -5px; }
}

/* v0.7.0 full-card artwork, no-hint default, larger gameplay table, and theme store. */
.afro-eights-root.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
  grid-template-rows: auto auto minmax(190px, 1fr) minmax(190px, auto);
  gap: clamp(8px, 1.3vw, 14px);
}
.afro-eights-root.afro-eights-is-game .afro-eights-card {
  --ae-card-w: clamp(102px, 9.2vw, 138px);
  --ae-card-h: clamp(144px, 13vw, 194px);
}
.afro-eights-card.is-image-card {
  display: block;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: max(8px, calc(var(--ae-card-w) * .055));
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.58);
}
.afro-eights-card-face-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.afro-eights-card.is-image-card.is-back {
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.afro-eights-discard-drop .afro-eights-card.is-image-card,
.afro-eights-deck-button .afro-eights-card.is-back {
  --ae-card-w: clamp(110px, 10vw, 146px);
  --ae-card-h: clamp(155px, 14.1vw, 206px);
}
.afro-eights-hand-cards {
  gap: clamp(6px, .75vw, 12px);
  padding: 18px 8px 10px;
  align-items: center;
}
.afro-eights-hand-cards .afro-eights-card,
.afro-eights-root.afro-eights-is-game .afro-eights-hand-cards .afro-eights-card {
  margin-left: 0 !important;
}
.afro-eights-human-panel {
  min-height: clamp(200px, 27vh, 280px);
}
.afro-eights-table.is-clean-table {
  grid-template-columns: 1fr;
  min-height: clamp(190px, 28vh, 270px);
}
.afro-eights-table.is-clean-table .afro-eights-table-slot {
  min-height: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(244,194,79,.15), rgba(0,0,0,.20) 56%, rgba(0,0,0,.32));
  border-style: dashed;
}
.afro-eights-no-hints .afro-eights-message,
.afro-eights-no-hints .afro-eights-table-label,
.afro-eights-no-hints .afro-eights-drop-hint,
.afro-eights-no-hints .afro-eights-log {
  display: none !important;
}
.afro-eights-no-hints button.afro-eights-card[disabled] {
  opacity: 1;
  filter: none;
}
.afro-eights-no-hints button.afro-eights-card.is-playable,
.afro-eights-no-hints button.afro-eights-card.is-playable:hover,
.afro-eights-no-hints button.afro-eights-card.is-playable:focus-visible {
  box-shadow: 0 16px 30px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.58);
}
.afro-eights-no-hints .afro-eights-status .afro-eights-pill:nth-child(1),
.afro-eights-no-hints .afro-eights-status .afro-eights-pill:nth-child(3),
.afro-eights-no-hints .afro-eights-status .afro-eights-pill:nth-child(4) {
  display: none;
}
.afro-eights-store-card { width: min(1080px, 100%); }
.afro-eights-store-card h3 {
  margin: 22px 0 12px;
  color: var(--ae-gold);
  font-size: clamp(18px, 2.2vw, 24px);
}
.afro-eights-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.afro-eights-store-item {
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 10px;
  background: rgba(0,0,0,.22);
  color: var(--ae-cream);
  cursor: pointer;
  text-align: left;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.afro-eights-store-item:hover,
.afro-eights-store-item:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(244,194,79,.72);
  background: rgba(255,255,255,.09);
}
.afro-eights-store-item.is-selected {
  border-color: var(--ae-gold);
  box-shadow: 0 0 0 3px rgba(244,194,79,.22), 0 16px 34px rgba(0,0,0,.28);
}
.afro-eights-store-item strong { display: block; margin-top: 9px; color: var(--ae-gold); font-size: 15px; }
.afro-eights-store-item small { display: block; color: rgba(255,247,223,.72); font-weight: 800; }
.afro-eights-store-preview {
  display: block;
  width: 100%;
  border-radius: 14px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.afro-eights-store-preview.is-background {
  aspect-ratio: 16 / 9;
  background-size: cover;
}
.afro-eights-store-preview.is-card-back {
  width: 74px;
  aspect-ratio: 640 / 902;
  margin: 0 auto;
  background-size: contain;
}
.afro-eights-card-ghost,
.afro-eights-card-play-anim {
  background: #fff !important;
}
.afro-eights-card-ghost .afro-eights-card-face-img,
.afro-eights-card-play-anim .afro-eights-card-face-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
button.afro-eights-card[draggable="true"] {
  cursor: grab;
  touch-action: none !important;
}
button.afro-eights-card[draggable="true"]:active { cursor: grabbing; }

@media (max-width: 760px) {
  .afro-eights-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afro-eights-store-preview.is-card-back { width: 62px; }
}

@media (orientation: landscape) and (max-height: 700px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(40px, .28fr) minmax(126px, .78fr) minmax(132px, 1fr);
    gap: 5px;
    padding: max(5px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(64px, 9.5vw, 86px);
    --ae-card-h: clamp(90px, 13.4vw, 121px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(68px, 10vw, 92px);
    --ae-card-h: clamp(96px, 14.1vw, 130px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-topbar {
    grid-template-columns: minmax(70px, 110px) 1fr auto;
    gap: 5px;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-brand img { max-width: 94px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-btn { padding: 6px 9px; font-size: 11px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-pill { min-height: 22px; padding: 3px 7px; font-size: 10.5px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents { gap: 4px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-player-panel { min-height: 0; padding: 5px; border-radius: 11px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-player-head { margin-bottom: 3px; font-size: 10px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-score { font-size: 9px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-mini-hand { min-height: 30px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-back-mini { width: 22px; height: 32px; margin-left: -6px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table { min-height: 126px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot { min-height: 116px; padding: 4px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel { min-height: 130px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards { min-height: 112px; gap: 5px; padding: 5px 4px 2px; }
}

@media (orientation: landscape) and (max-height: 430px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(30px, .22fr) minmax(108px, .65fr) minmax(112px, 1fr);
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(56px, 8.4vw, 72px);
    --ae-card-h: clamp(79px, 11.9vw, 102px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(60px, 9vw, 78px);
    --ae-card-h: clamp(85px, 12.7vw, 110px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table { min-height: 108px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot { min-height: 100px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel { min-height: 108px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards { min-height: 94px; gap: 4px; }
}

/* v0.7.0 precise compact status pills. */
.afro-eights-no-hints .afro-eights-status .afro-eights-pill { display: inline-flex; }
.afro-eights-no-hints .afro-eights-status .afro-eights-pill.is-mode,
.afro-eights-no-hints .afro-eights-status .afro-eights-pill.is-round,
.afro-eights-no-hints .afro-eights-status .afro-eights-pill.is-direction { display: none; }

/* v0.7.0 final card image fix: do not cover full-card artwork with the old generated white face. */
.afro-eights-card.is-image-card::before { display: none !important; }
.afro-eights-card.is-image-card .afro-eights-card-face-img {
  position: relative;
  z-index: 2;
}

/* v0.7.0 mobile landscape clean-table fix: older compact rules hid the first slot, which is the only slot when hints are off. */
@media (orientation: landscape) and (max-height: 700px) {
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table .afro-eights-table-slot,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table .afro-eights-table-slot:first-child {
    display: flex !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table .afro-eights-pile-row {
    display: flex !important;
    gap: clamp(7px, 1.4vw, 12px);
  }
}
@media (orientation: landscape) and (max-height: 430px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(54px, 7.6vw, 64px);
    --ae-card-h: clamp(76px, 10.75vw, 90px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(56px, 8vw, 68px);
    --ae-card-h: clamp(79px, 11.25vw, 96px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel { min-height: 102px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards { min-height: 88px; padding-bottom: 4px; }
}

/* v0.7.0 avoid clipping the bottom edge of full-card art on very short landscape screens. */
@media (orientation: landscape) and (max-height: 430px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(52px, 7.3vw, 61px);
    --ae-card-h: clamp(73px, 10.25vw, 86px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards { min-height: 92px; }
}

/* v0.7.0 store previews use real images so card backs/backgrounds are visible in all browsers. */
.afro-eights-store-preview img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}
.afro-eights-store-preview.is-background img { object-fit: cover; }
.afro-eights-store-preview.is-card-back img { object-fit: contain; }

/* v0.8.0 mobile parity, stronger turn feedback, faster card rendering, and larger phone-landscape cards. */
.afro-eights-root.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
  position: relative;
}

.afro-eights-turn-flash {
  position: absolute;
  z-index: 15;
  top: max(54px, calc(env(safe-area-inset-top) + 48px));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  min-width: min(320px, calc(100% - 32px));
  min-height: 38px;
  padding: 7px 18px;
  border-radius: 999px;
  color: #241208;
  background: linear-gradient(180deg, #fff6bb, #f4c24f 60%, #d99524);
  border: 1px solid rgba(255, 255, 255, .64);
  box-shadow: 0 12px 34px rgba(0,0,0,.42), 0 0 0 5px rgba(244,194,79,.16);
  font-size: clamp(13px, 1.9vw, 18px);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.afro-eights-turn-flash span { white-space: nowrap; }
.afro-eights-turn-flash.is-passive-turn {
  opacity: 0;
  visibility: hidden;
}
.afro-eights-turn-flash.is-pick-turn {
  top: 50%;
  min-width: min(390px, calc(100% - 36px));
  min-height: 74px;
  font-size: clamp(28px, 6.2vw, 58px);
  color: #fff7df;
  background: linear-gradient(180deg, #a83825, #6e1d16);
  border-color: rgba(255, 226, 221, .72);
  box-shadow: 0 20px 60px rgba(0,0,0,.58), 0 0 0 8px rgba(227,86,69,.20);
  animation: afro-eights-pick-flash 1.05s ease-in-out infinite;
}
.afro-eights-turn-flash.is-drawn-turn {
  color: #fff7df;
  background: linear-gradient(180deg, rgba(64, 31, 18, .98), rgba(32, 14, 9, .98));
  border-color: rgba(244,194,79,.78);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 5px rgba(244,194,79,.22);
}

.afro-eights-gameplay.is-your-turn {
  box-shadow: inset 0 0 0 2px rgba(244,194,79,.62), inset 0 0 70px rgba(244,194,79,.11);
}
.afro-eights-gameplay.is-your-turn .afro-eights-human-panel.is-current,
.afro-eights-gameplay .afro-eights-player-panel.is-current {
  border-color: rgba(244,194,79,.92);
  background: linear-gradient(180deg, rgba(72, 38, 20, .95), rgba(30, 15, 9, .92));
  box-shadow: 0 0 0 2px rgba(244,194,79,.28), 0 0 34px rgba(244,194,79,.22), 0 14px 34px rgba(0,0,0,.34);
}
.afro-eights-gameplay.is-your-turn .afro-eights-human-panel.is-current .afro-eights-turn-dot {
  animation: afro-eights-turn-dot-pulse 1.1s ease-in-out infinite;
}
.afro-eights-status .afro-eights-pill.is-turn {
  border-color: rgba(244,194,79,.34);
}
.afro-eights-gameplay.is-your-turn .afro-eights-status .afro-eights-pill.is-turn {
  color: #241208;
  background: linear-gradient(180deg, #fff6bb, #f4c24f);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 0 0 4px rgba(244,194,79,.18);
}
.afro-eights-gameplay.is-your-turn .afro-eights-status .afro-eights-pill.is-turn strong { color: #241208; }
.afro-eights-gameplay.has-pending-draw .afro-eights-deck-button:not([disabled]) {
  animation: afro-eights-pick-shake .9s ease-in-out infinite;
}

@keyframes afro-eights-turn-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(244,194,79,.75); }
  50% { transform: scale(1.45); box-shadow: 0 0 24px rgba(244,194,79,1); }
}
@keyframes afro-eights-pick-flash {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  50% { transform: translate(-50%, -50%) scale(1.045); filter: brightness(1.18); }
}
@keyframes afro-eights-pick-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px) rotate(-1deg); }
  40% { transform: translateX(3px) rotate(1deg); }
  60% { transform: translateX(-2px) rotate(-1deg); }
  80% { transform: translateX(2px) rotate(1deg); }
}

.afro-eights-card.is-image-card,
.afro-eights-card-face-img {
  background-color: #fff !important;
}
.afro-eights-card-face-img {
  content-visibility: visible;
  contain-intrinsic-size: 512px 722px;
  transform: translateZ(0);
}
.afro-eights-card.is-drawn-this-turn {
  box-shadow: 0 16px 32px rgba(0,0,0,.40), 0 0 0 3px rgba(244,194,79,.52), 0 0 28px rgba(244,194,79,.26) !important;
}
.afro-eights-native-drag-image {
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  z-index: -1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: #fff !important;
}
.afro-eights-card-ghost,
.afro-eights-card-play-anim,
.afro-eights-native-drag-image {
  border-radius: max(8px, calc(var(--ae-card-w) * .055));
  overflow: hidden;
}

/* Keep the v0.7 full-card/shop UI on phones too; older compact mobile rules are overridden here. */
@media (max-width: 840px) {
  .afro-eights-root.afro-eights-is-menu {
    min-height: min(620px, var(--ae-fit-height, 700px));
  }
  .afro-eights-shell {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .afro-eights-menu-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch;
    gap: 14px;
  }
  .afro-eights-menu-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .afro-eights-side-tile {
    min-height: 88px;
  }
  .afro-eights-store-card {
    width: 100%;
    max-height: none;
  }
  .afro-eights-store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .afro-eights-store-item {
    padding: 8px;
    border-radius: 16px;
  }
}
@media (max-width: 460px) {
  .afro-eights-menu-side { grid-template-columns: 1fr; }
  .afro-eights-store-grid { grid-template-columns: 1fr !important; }
}

/* Phone/tablet landscape gameplay: bigger card art and less chrome. */
@media (orientation: landscape) and (max-height: 740px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game,
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-is-game {
    border-radius: 10px;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(40px, .22fr) minmax(132px, .8fr) minmax(150px, 1fr) !important;
    gap: 5px !important;
    padding: max(5px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-topbar {
    grid-template-columns: minmax(64px, 100px) 1fr auto !important;
    gap: 5px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-brand img { max-width: 92px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-status {
    justify-content: center;
    gap: 4px;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-actions {
    gap: 4px;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-pill {
    min-height: 22px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-actions .afro-eights-btn {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(76px, 11vw, 108px) !important;
    --ae-card-h: clamp(107px, 15.5vw, 152px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(80px, 11.7vw, 116px) !important;
    --ae-card-h: clamp(113px, 16.5vw, 164px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents {
    gap: 4px !important;
    align-content: stretch;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-panel {
    min-height: 36px !important;
    padding: 5px !important;
    border-radius: 10px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-player-head {
    margin-bottom: 2px !important;
    font-size: 10px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-score { font-size: 9px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-mini-hand { min-height: 26px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-back-mini {
    width: 20px !important;
    height: 29px !important;
    margin-left: -6px !important;
    border-radius: 5px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table {
    min-height: 132px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot {
    min-height: 126px !important;
    padding: 4px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel {
    min-height: 150px !important;
    padding: 6px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards {
    min-height: 128px !important;
    gap: 6px !important;
    padding: 4px 4px 3px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards .afro-eights-card {
    margin-left: 0 !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-turn-flash {
    top: max(38px, calc(env(safe-area-inset-top) + 32px));
    min-height: 28px;
    padding: 4px 12px;
    font-size: 11px;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-turn-flash.is-pick-turn {
    top: 50%;
    min-height: 62px;
    font-size: clamp(24px, 6vw, 42px);
  }
}

@media (orientation: landscape) and (max-height: 460px) {
  .afro-eights-root.afro-eights-landscape-device .afro-eights-brand { display: none !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(34px, .18fr) minmax(116px, .74fr) minmax(132px, 1fr) !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(68px, 10.2vw, 92px) !important;
    --ae-card-h: clamp(96px, 14.4vw, 130px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(72px, 10.8vw, 98px) !important;
    --ae-card-h: clamp(102px, 15.25vw, 138px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table { min-height: 116px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot { min-height: 110px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel { min-height: 132px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards { min-height: 116px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-status .afro-eights-pill.is-active-suit,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-status .afro-eights-pill.is-direction { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .afro-eights-turn-flash,
  .afro-eights-turn-dot,
  .afro-eights-deck-button { animation: none !important; }
}

/* v0.9.0: brighter original-style table, clearer counts, mobile fit, and frame-by-frame card flight. */
.afro-eights-root {
  --ae-bright-panel: rgba(64, 37, 18, .46);
  --ae-bright-panel-strong: rgba(58, 33, 15, .58);
  background-color: #c9a65c !important;
}
body.afro-eights-full-page-shell,
body.afro-eights-game-page {
  background: #20100b !important;
}
body.afro-eights-full-page-shell .afro-eights-full-page-main,
body.afro-eights-game-page .afro-eights-installed-page,
body.afro-eights-managed-page .afro-eights-installed-page {
  overflow: hidden !important;
}
.afro-eights-root.afro-eights-is-game,
.afro-eights-root.afro-eights-is-game .afro-eights-board,
.afro-eights-root.afro-eights-is-menu .afro-eights-shell {
  background-color: #c8a35a !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.20), rgba(255,255,255,0) 29%),
    linear-gradient(180deg, rgba(255, 244, 197, .15), rgba(92, 58, 23, .05)),
    var(--ae-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
}
.afro-eights-root.afro-eights-is-game .afro-eights-board::before {
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,245,195,.04) 44%, rgba(82,51,20,.06)) !important;
}
.afro-eights-hero-card,
.afro-eights-menu-side,
.afro-eights-panel-card,
.afro-eights-player-panel,
.afro-eights-human-panel,
.afro-eights-table-slot,
.afro-eights-modal-card,
.afro-eights-store-card,
.afro-eights-store-item,
.afro-eights-side-tile,
.afro-eights-big-button {
  background: var(--ae-bright-panel) !important;
  border-color: rgba(255, 247, 221, .34) !important;
  box-shadow: 0 18px 38px rgba(35,18,10,.22), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.afro-eights-human-panel,
.afro-eights-menu-side,
.afro-eights-panel-card {
  background: var(--ae-bright-panel-strong) !important;
}
.afro-eights-table-slot,
.afro-eights-table.is-clean-table .afro-eights-table-slot {
  background: rgba(255, 239, 181, .18) !important;
  border-color: rgba(255, 247, 211, .38) !important;
}
.afro-eights-discard-drop {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,247,211,.40) !important;
}
.afro-eights-card-count-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2.15em;
  height: 1.72em;
  padding: 0 .52em;
  margin-left: .4em;
  border-radius: 999px;
  border: 1px solid rgba(255,247,218,.72);
  background: linear-gradient(180deg, #ffd95b, #eaa72b);
  color: #261209;
  font-size: .86em;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,.28);
}
.afro-eights-card-count-badge::after {
  content: " cards";
  font-size: .72em;
  margin-left: .25em;
  opacity: .82;
}
.afro-eights-card-count-badge.is-you::after { content: ""; }
.afro-eights-player-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}
.afro-eights-player-head .afro-eights-score {
  grid-column: 1 / -1;
}
.afro-eights-opponents .afro-eights-score {
  display: block !important;
}
.afro-eights-card.is-placing-source,
.afro-eights-card.is-dragging-source {
  opacity: .36 !important;
  filter: saturate(.7) brightness(.92) !important;
}
.afro-eights-card-play-anim,
.afro-eights-card-ghost,
.afro-eights-native-drag-image {
  background: #fff !important;
  border: 1px solid rgba(36,21,12,.22) !important;
  box-shadow: 0 24px 58px rgba(0,0,0,.42), 0 0 0 2px rgba(255,255,255,.35) !important;
}
.afro-eights-card-play-anim.is-frame-flight {
  position: fixed !important;
  z-index: 2147483600 !important;
  pointer-events: none !important;
  transition: none !important;
  will-change: transform, opacity !important;
  transform-origin: center center !important;
  contain: layout paint style !important;
  backface-visibility: hidden !important;
}
.afro-eights-discard-drop.is-receiving-card {
  outline: 3px solid rgba(255, 217, 91, .82) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 5px rgba(255,217,91,.18), 0 18px 44px rgba(0,0,0,.22) !important;
}

@media (max-width: 840px) and (orientation: portrait) {
  .afro-eights-root {
    height: min(var(--afro-eights-height, 100dvh), var(--ae-fit-height, 100dvh)) !important;
    min-height: 0 !important;
    max-height: var(--ae-fit-height, 100dvh) !important;
    border-radius: 0 !important;
  }
  .afro-eights-root.afro-eights-is-menu .afro-eights-shell {
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    display: block !important;
  }
  .afro-eights-menu-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .afro-eights-menu-brand {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .afro-eights-menu-brand img {
    width: min(172px, 48vw) !important;
    max-height: 54px !important;
    object-fit: contain !important;
  }
  .afro-eights-menu-brand span,
  .afro-eights-landscape-badge {
    min-height: 30px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .afro-eights-menu-header-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: stretch !important;
  }
  .afro-eights-menu-header-actions .afro-eights-btn {
    min-height: 38px !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }
  .afro-eights-menu-main,
  .afro-eights-setup {
    display: block !important;
    min-height: 0 !important;
  }
  .afro-eights-hero-card,
  .afro-eights-panel-card {
    width: 100% !important;
    padding: 18px 16px !important;
    border-radius: 24px !important;
    margin: 0 0 10px !important;
  }
  .afro-eights-menu-icon {
    width: 62px !important;
    height: 62px !important;
    margin-bottom: 10px !important;
  }
  .afro-eights-hero-card h2,
  .afro-eights-panel-card h2 {
    font-size: clamp(30px, 9.6vw, 46px) !important;
    line-height: .98 !important;
    margin: 8px 0 12px !important;
  }
  .afro-eights-hero-card p,
  .afro-eights-panel-card p {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.28 !important;
  }
  .afro-eights-menu-actions,
  .afro-eights-menu-actions.is-inline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 10px 0 !important;
  }
  .afro-eights-big-button,
  .afro-eights-side-tile,
  .afro-eights-menu-actions .afro-eights-btn {
    min-height: 62px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }
  .afro-eights-menu-side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 10px !important;
    margin-bottom: 18px !important;
    border-radius: 24px !important;
  }
  .afro-eights-side-tile strong,
  .afro-eights-big-button strong {
    font-size: clamp(21px, 6.4vw, 30px) !important;
    line-height: 1.04 !important;
  }
  .afro-eights-side-tile span,
  .afro-eights-big-button span {
    font-size: clamp(13px, 3.9vw, 16px) !important;
  }
  .afro-eights-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  .afro-eights-field input,
  .afro-eights-field select {
    min-height: 44px !important;
    font-size: 17px !important;
  }
  .afro-eights-panel-card .afro-eights-primary,
  .afro-eights-panel-card .afro-eights-btn {
    width: 100% !important;
    min-height: 50px !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }
  .afro-eights-toggle {
    min-height: 52px !important;
    padding: 11px 13px !important;
  }
  .afro-eights-toggle input {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (orientation: landscape) and (max-height: 740px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game {
    height: min(var(--afro-eights-height, 100dvh), var(--ae-fit-height, 100dvh)) !important;
    min-height: 0 !important;
    max-height: var(--ae-fit-height, 100dvh) !important;
    overflow: hidden !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: minmax(26px, auto) minmax(34px, auto) minmax(106px, .82fr) minmax(126px, 1fr) !important;
    gap: 4px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 26px !important;
    gap: 5px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-brand { display: none !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-status {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-pill.is-mode,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-pill.is-round,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-pill.is-direction {
    display: none !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-pill,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-actions .afro-eights-btn {
    min-height: 26px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-actions [data-action="new-game"] {
    display: none !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents {
    min-height: 34px !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-panel {
    min-height: 32px !important;
    padding: 4px 7px !important;
    border-radius: 10px !important;
    overflow: visible !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-mini-hand,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-score {
    display: none !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-count-badge {
    display: inline-flex !important;
    font-size: 11px !important;
    min-width: 30px !important;
    height: 22px !important;
    padding: 0 8px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-count-badge::after { content: "" !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-player-name {
    font-size: 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(68px, 9.4vw, 94px) !important;
    --ae-card-h: clamp(96px, 13.3vw, 133px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(72px, 9.9vw, 100px) !important;
    --ae-card-h: clamp(102px, 14vw, 142px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot {
    min-height: 106px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot {
    padding: 4px !important;
    border-radius: 12px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-pile-row {
    gap: 10px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel {
    min-height: 126px !important;
    padding: 5px 6px 4px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel .afro-eights-player-head {
    margin-bottom: 2px !important;
    min-height: 18px !important;
    font-size: 12px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards {
    min-height: 98px !important;
    padding: 2px 4px 4px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: flex-start !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards .afro-eights-card {
    margin-left: 0 !important;
    flex: 0 0 var(--ae-card-w) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-turn-flash {
    top: max(32px, calc(env(safe-area-inset-top) + 28px)) !important;
    min-height: 26px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    max-width: min(54vw, 390px) !important;
    pointer-events: none !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-turn-flash.is-pick-turn {
    top: 50% !important;
    min-height: 60px !important;
    font-size: clamp(24px, 6vw, 44px) !important;
    max-width: 82vw !important;
  }
}

@media (orientation: landscape) and (max-height: 460px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: minmax(24px, auto) minmax(30px, auto) minmax(96px, .78fr) minmax(116px, 1fr) !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(62px, 8.8vw, 84px) !important;
    --ae-card-h: clamp(88px, 12.45vw, 119px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(66px, 9.3vw, 90px) !important;
    --ae-card-h: clamp(93px, 13.15vw, 127px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot { min-height: 96px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel { min-height: 116px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards { min-height: 88px !important; }
}


/* v0.9.0 final: keep the bright table while making menu chrome readable on light backgrounds. */
.afro-eights-menu-brand img {
  opacity: 1 !important;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)) drop-shadow(0 10px 24px rgba(0,0,0,.30)) !important;
}
.afro-eights-menu-brand span,
.afro-eights-landscape-badge,
.afro-eights-menu-header-actions .afro-eights-btn {
  background: rgba(68, 45, 24, .68) !important;
  color: #fff7df !important;
  border-color: rgba(255, 247, 223, .38) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}
.afro-eights-landscape-badge {
  background: rgba(244, 194, 79, .92) !important;
  color: #2a1509 !important;
  text-shadow: none !important;
}

/* v0.10.0: mobile parity, clearer physical dragging, draw animations, suit overlay and setup-page polish. */
.afro-eights-root {
  --ae-panel: rgba(70, 39, 20, .38);
  --ae-panel-soft: rgba(255, 244, 214, .14);
}
.afro-eights-board,
.afro-eights-menu-screen {
  background-image: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12)), var(--ae-bg-image) !important;
}
.afro-eights-board::before,
.afro-eights-menu-bg {
  opacity: .72 !important;
}
.afro-eights-table-slot,
.afro-eights-player-panel,
.afro-eights-human-panel,
.afro-eights-panel-card,
.afro-eights-menu-card,
.afro-eights-hero-card,
.afro-eights-menu-side {
  background-color: rgba(62, 32, 17, .48) !important;
  backdrop-filter: saturate(1.08) blur(2px);
}
.afro-eights-table-slot,
.afro-eights-human-panel,
.afro-eights-player-panel {
  border-color: rgba(244, 194, 79, .58) !important;
}
.afro-eights-opponents .afro-eights-player-panel {
  min-height: 92px;
  overflow: visible !important;
}
.afro-eights-opponents .afro-eights-mini-hand {
  display: flex !important;
  align-items: center;
  gap: 0;
  min-height: 48px;
  padding-left: 13px;
  overflow: visible !important;
}
.afro-eights-card-back-mini {
  display: inline-block !important;
  width: 34px;
  height: 50px;
  margin-left: -9px;
  transform: translateY(calc((var(--ae-mini-i, 0) % 2) * 2px)) rotate(calc((var(--ae-mini-i, 0) - 4) * .35deg));
  background: #fff var(--ae-card-back) center/cover no-repeat !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.30);
}
.afro-eights-mini-count,
.afro-eights-card-count-badge {
  display: inline-grid !important;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff2ad, #e4a526);
  color: #241208;
  font-weight: 1000;
  box-shadow: 0 5px 12px rgba(0,0,0,.24);
}
.afro-eights-mini-count { margin-left: 5px; }
.afro-eights-discard-drop { position: relative !important; }
.afro-eights-active-suit-overlay {
  position: absolute;
  z-index: 6;
  right: -8px;
  top: -9px;
  min-width: 54px;
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  color: #1c110b;
  border: 2px solid rgba(244, 194, 79, .98);
  box-shadow: 0 12px 28px rgba(0,0,0,.36), 0 0 0 4px rgba(244,194,79,.20);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .03em;
  pointer-events: none;
}
.afro-eights-active-suit-overlay img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.afro-eights-card-ghost,
.afro-eights-card-play-anim {
  opacity: 1 !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  box-shadow: 0 34px 70px rgba(0,0,0,.62), 0 0 0 5px rgba(244,194,79,.20) !important;
}
.afro-eights-card-ghost.is-touch-lifted {
  filter: saturate(1.06) brightness(1.04);
  transform-origin: center center;
}
.afro-eights-card.is-touch-drag-source,
.afro-eights-card.is-dragging-source {
  opacity: .18 !important;
  filter: grayscale(.45) brightness(.72) !important;
}
button.afro-eights-card[draggable="true"],
button.afro-eights-card[draggable="true"] *,
.afro-eights-card-face-img {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.afro-eights-card-play-anim.is-draw-flight {
  filter: saturate(1.1) brightness(1.06);
}
.afro-eights-round-summary p { margin: .35rem 0; }
.afro-eights-account-box {
  max-width: 980px;
  margin: 28px auto;
  padding: clamp(18px, 3vw, 32px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(51,26,14,.92), rgba(31,15,9,.94));
  color: #fff7df;
  border: 1px solid rgba(244,194,79,.38);
  box-shadow: 0 20px 52px rgba(0,0,0,.22);
}
.afro-eights-account-box h2 { margin-top: 0; color: #f4c24f; }
.afro-eights-account-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.afro-eights-account-stats span,
.afro-eights-leaderboard-table th,
.afro-eights-leaderboard-table td { padding: 10px 12px; }
.afro-eights-account-stats span { border-radius: 16px; background: rgba(255,255,255,.10); }
.afro-eights-leaderboard-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 16px; }
.afro-eights-leaderboard-table th { color: #f4c24f; text-align: left; background: rgba(0,0,0,.22); }
.afro-eights-leaderboard-table tr:nth-child(even) td { background: rgba(255,255,255,.06); }

@media (max-width: 840px) and (orientation: portrait) {
  .afro-eights-root:not(.afro-eights-is-game) {
    height: auto !important;
    min-height: min(920px, var(--ae-fit-height, 100dvh)) !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }
  .afro-eights-root:not(.afro-eights-is-game) .afro-eights-menu-screen {
    min-height: var(--ae-fit-height, 100dvh) !important;
    height: auto !important;
    overflow: visible !important;
    padding: max(18px, env(safe-area-inset-top)) 12px max(42px, env(safe-area-inset-bottom)) !important;
    place-items: start stretch !important;
  }
  .afro-eights-menu-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    margin-bottom: 12px !important;
  }
  .afro-eights-menu-header-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    transform: none !important;
  }
  .afro-eights-menu-header-actions .afro-eights-btn,
  .afro-eights-landscape-badge {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: clamp(12px, 3.35vw, 15px) !important;
    white-space: nowrap !important;
  }
  .afro-eights-hero-card,
  .afro-eights-menu-card,
  .afro-eights-panel-card,
  .afro-eights-menu-side {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }
  .afro-eights-setup,
  .afro-eights-panel-card {
    min-height: 0 !important;
  }
  .afro-eights-panel-card {
    padding: 18px 14px !important;
  }
  .afro-eights-panel-card h2,
  .afro-eights-hero-card h2 {
    font-size: clamp(32px, 10vw, 50px) !important;
    line-height: .96 !important;
    margin-right: 0 !important;
  }
  .afro-eights-menu-actions,
  .afro-eights-menu-actions.is-inline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .afro-eights-menu-actions .afro-eights-btn,
  .afro-eights-primary {
    min-height: 52px !important;
    border-radius: 18px !important;
  }
}

@media (orientation: landscape) and (max-height: 740px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: minmax(28px, auto) minmax(46px, auto) minmax(106px, .86fr) minmax(124px, 1fr) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08)), var(--ae-bg-image) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents {
    min-height: 46px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-panel {
    min-height: 44px !important;
    padding: 4px 7px !important;
    display: grid !important;
    grid-template-columns: minmax(88px, .9fr) minmax(80px, 1.2fr) !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-head {
    margin: 0 !important;
    min-width: 0 !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-score { display: none !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-mini-hand {
    display: flex !important;
    min-height: 38px !important;
    overflow: visible !important;
    padding-left: 8px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-card-back-mini {
    display: inline-block !important;
    width: 22px !important;
    height: 32px !important;
    margin-left: -6px !important;
    border-radius: 5px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-mini-count {
    min-width: 24px !important;
    height: 22px !important;
    font-size: 10px !important;
    margin-left: 3px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-card-count-badge {
    display: none !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel {
    background-color: rgba(62, 32, 17, .30) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-active-suit-overlay {
    right: -10px !important;
    top: -8px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 7px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-active-suit-overlay img {
    width: 23px !important;
    height: 23px !important;
  }
}

/* v0.10.0b: stop mobile menu header chips from running off-screen. */
@media (max-width: 840px) and (orientation: portrait) {
  .afro-eights-menu-brand {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .afro-eights-menu-brand img {
    max-width: min(220px, 62vw) !important;
    height: auto !important;
  }
  .afro-eights-menu-brand span {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: calc(100vw - 34px) !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: clamp(10px, 2.9vw, 13px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    letter-spacing: .11em !important;
  }
  .afro-eights-menu-header-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  .afro-eights-menu-header-actions .afro-eights-landscape-badge {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
}
.afro-eights-card.is-draw-target-pending {
  opacity: .12 !important;
  filter: grayscale(.5) brightness(.85) !important;
}

/* v0.11.0: default immersive page, inviteable rooms, better no-hint touch drag, and safer mobile layout. */
body.afro-eights-full-page-shell #wpadminbar { display: none !important; }
body.afro-eights-full-page-shell { overflow: hidden !important; overscroll-behavior: none !important; }
body.afro-eights-full-page-shell .afro-eights-full-page-main { overflow: hidden !important; }
.afro-eights-root.afro-eights-native-fullscreen,
body.afro-eights-full-page-shell .afro-eights-root {
  width: 100vw !important;
  max-width: none !important;
  height: var(--ae-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  max-height: var(--ae-viewport-height, 100dvh) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.afro-eights-root.afro-eights-native-fullscreen .afro-eights-shell,
body.afro-eights-full-page-shell .afro-eights-shell {
  min-height: 0 !important;
  height: 100% !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
.afro-eights-root.afro-eights-native-fullscreen .afro-eights-board,
body.afro-eights-full-page-shell .afro-eights-board {
  min-height: 0 !important;
}

.afro-eights-invite-box {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(244,194,79,.38);
  background: rgba(255,247,223,.10);
}
.afro-eights-invite-box label {
  display: grid;
  gap: 7px;
  color: rgba(255,247,223,.88);
  font-size: 13px;
  font-weight: 900;
}
.afro-eights-invite-box input {
  width: 100%;
  min-height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.94);
  color: #261209;
  padding: 9px 11px;
  font: inherit;
  font-weight: 750;
}
.afro-eights-inline-notice.is-friendly {
  border-color: rgba(244,194,79,.45) !important;
  background: rgba(244,194,79,.16) !important;
  color: #fff7df !important;
}
.afro-eights-room-actions { position: sticky; bottom: 0; z-index: 5; padding-top: 8px; background: linear-gradient(180deg, rgba(47,24,14,0), rgba(47,24,14,.86) 28%, rgba(47,24,14,.96)); }

.afro-eights-no-hints button.afro-eights-card,
.afro-eights-no-hints button.afro-eights-card[draggable="true"] {
  cursor: grab !important;
  opacity: 1 !important;
  filter: none !important;
  touch-action: none !important;
}
.afro-eights-no-hints button.afro-eights-card:active { cursor: grabbing !important; }
.afro-eights-no-hints button.afro-eights-card[disabled] { cursor: grab !important; }
.afro-eights-deck-button,
.afro-eights-deck-button * {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.afro-eights-deck-button.is-dragging-source { opacity: .35 !important; filter: saturate(.7) brightness(.92) !important; }
.afro-eights-human-panel.is-draw-drag-over {
  outline: 3px solid rgba(244,194,79,.78) !important;
  outline-offset: -5px !important;
  box-shadow: 0 0 0 5px rgba(244,194,79,.14), 0 18px 44px rgba(0,0,0,.22) !important;
}
.afro-eights-card-ghost.is-deck-lifted { background: #fff var(--ae-card-back) center/contain no-repeat !important; }

@media (max-width: 840px) and (orientation: portrait) {
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-is-menu,
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-is-menu {
    height: var(--ae-viewport-height, 100dvh) !important;
    max-height: var(--ae-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }
  .afro-eights-root.afro-eights-is-menu .afro-eights-shell {
    display: block !important;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .afro-eights-menu-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    z-index: 3 !important;
  }
  .afro-eights-menu-header-actions {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .afro-eights-menu-header-actions .afro-eights-landscape-badge { display: none !important; }
  .afro-eights-menu-header-actions .afro-eights-fullscreen-btn { display: none !important; }
  .afro-eights-menu-header-actions .afro-eights-btn {
    min-height: 38px !important;
    padding: 7px 9px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .afro-eights-menu-brand { min-height: 48px !important; }
  .afro-eights-menu-brand img { max-width: min(178px, 54vw) !important; max-height: 54px !important; }
  .afro-eights-menu-brand span { font-size: 10px !important; padding: 4px 7px !important; }
  .afro-eights-hero-card,
  .afro-eights-panel-card,
  .afro-eights-menu-side {
    margin: 0 0 10px !important;
    padding: 16px 14px !important;
    border-radius: 22px !important;
  }
  .afro-eights-hero-card h2,
  .afro-eights-panel-card h2 {
    font-size: clamp(28px, 8.8vw, 42px) !important;
    line-height: 1 !important;
    margin: 7px 0 10px !important;
  }
  .afro-eights-hero-card p,
  .afro-eights-panel-card p { font-size: clamp(14px, 3.9vw, 17px) !important; }
  .afro-eights-big-button,
  .afro-eights-side-tile,
  .afro-eights-menu-actions .afro-eights-btn {
    min-height: 54px !important;
    padding: 10px 12px !important;
  }
  .afro-eights-room-card .afro-eights-room-actions {
    position: static !important;
    background: transparent !important;
  }
}

@media (orientation: landscape) and (max-height: 740px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-topbar {
    position: relative !important;
    z-index: 30 !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
    padding-right: max(2px, env(safe-area-inset-right)) !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    max-width: min(48vw, 430px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 5px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-actions .afro-eights-btn {
    min-height: 28px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
  }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-actions .afro-eights-fullscreen-btn {
    max-width: 112px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-mini-hand {
    display: flex !important;
    min-height: 28px !important;
    padding-left: 8px !important;
    overflow: hidden !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-card-back-mini {
    width: 18px !important;
    height: 26px !important;
    border-radius: 4px !important;
    margin-left: -5px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-panel {
    min-height: 58px !important;
  }
}


/* v0.11.0 final polish: full-page first launch, safe controls, mobile touch drag, and no-hints neutrality. */
body.afro-eights-full-page-shell,
html:has(body.afro-eights-full-page-shell) {
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #20100b !important;
}
body.afro-eights-full-page-shell .afro-eights-installed-page,
body.afro-eights-full-page-shell .entry-content,
body.afro-eights-full-page-shell .wp-site-blocks,
body.afro-eights-full-page-shell .afro-eights-full-page-main {
  width: 100vw !important;
  max-width: none !important;
  height: var(--ae-viewport-height, 100dvh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.afro-eights-root.afro-eights-native-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
  background: #20100b !important;
}
.afro-eights-native-drag-image,
.afro-eights-card-ghost,
.afro-eights-card-play-anim {
  /* Keep these promoted without declaring transform: flight/touch ghosts use
     inline transform values every frame, and an !important transform here
     can freeze the card animation on WebKit/iOS. */
  backface-visibility: hidden;
  transform-origin: center center !important;
  will-change: transform, opacity !important;
}
.afro-eights-card-ghost.is-touch-lifted {
  position: fixed !important;
  z-index: 2147483600 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 28px 28px rgba(0,0,0,.45)) !important;
}
.afro-eights-root.afro-eights-no-hints button.afro-eights-card,
.afro-eights-root.afro-eights-no-hints button.afro-eights-card[disabled],
.afro-eights-root.afro-eights-no-hints button.afro-eights-card[aria-disabled="true"] {
  opacity: 1 !important;
  filter: none !important;
  cursor: grab !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: none !important;
}
.afro-eights-root.afro-eights-no-hints button.afro-eights-card:not(.is-playable):hover,
.afro-eights-root.afro-eights-no-hints button.afro-eights-card:not(.is-playable):focus,
.afro-eights-root.afro-eights-no-hints button.afro-eights-card:not(.is-playable):focus-visible {
  box-shadow: 0 16px 30px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.52) !important;
  outline: none !important;
}
.afro-eights-root.afro-eights-no-hints .afro-eights-drop-hint,
.afro-eights-root.afro-eights-no-hints .afro-eights-card:not(.is-playable)::after,
.afro-eights-root.afro-eights-no-hints .afro-eights-card:not(.is-playable)::before {
  display: none !important;
  content: none !important;
}
.afro-eights-room-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: -4px 0 10px;
  position: sticky;
  top: 0;
  z-index: 8;
  pointer-events: none;
}
.afro-eights-room-top-actions .afro-eights-btn { pointer-events: auto; }
.afro-eights-leave-room-top { border-color: rgba(255,247,223,.34) !important; }
.afro-eights-game-exit-btn { white-space: nowrap !important; }
@media (max-width: 840px) and (orientation: portrait) {
  body.afro-eights-full-page-shell .afro-eights-root,
  .afro-eights-root.afro-eights-native-fullscreen {
    width: 100vw !important;
    height: var(--ae-viewport-height, 100dvh) !important;
    max-height: var(--ae-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }
  .afro-eights-root.afro-eights-is-menu .afro-eights-shell {
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(86px, calc(env(safe-area-inset-bottom) + 44px)) max(12px, env(safe-area-inset-left)) !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-padding-bottom: 110px !important;
  }
  .afro-eights-menu-header { position: relative !important; top: auto !important; display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; margin: 0 0 10px !important; padding: 0 !important; }
  .afro-eights-menu-header-actions { position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; width: 100% !important; transform: none !important; z-index: 5 !important; }
  .afro-eights-menu-header-actions .afro-eights-landscape-badge,
  .afro-eights-menu-header-actions .afro-eights-fullscreen-btn { display: none !important; }
  .afro-eights-menu-header-actions .afro-eights-btn { min-height: 38px !important; padding: 7px 10px !important; border-radius: 999px !important; font-size: 13px !important; line-height: 1.05 !important; white-space: nowrap !important; }
  .afro-eights-menu-brand { min-height: 44px !important; align-items: center !important; }
  .afro-eights-menu-brand img { max-height: 52px !important; max-width: min(190px, 62vw) !important; }
  .afro-eights-menu-brand span { font-size: 10px !important; padding: 4px 7px !important; }
  .afro-eights-menu-main,
  .afro-eights-setup,
  .afro-eights-store-screen { display: block !important; min-height: auto !important; padding: 0 0 24px !important; }
  .afro-eights-hero-card,
  .afro-eights-panel-card,
  .afro-eights-menu-side { width: 100% !important; margin: 0 0 10px !important; padding: 15px 14px !important; border-radius: 22px !important; transform: none !important; }
  .afro-eights-panel-card h2,
  .afro-eights-hero-card h2 { font-size: clamp(27px, 8vw, 41px) !important; line-height: 1.03 !important; margin: 6px 0 10px !important; }
  .afro-eights-form-grid label,
  .afro-eights-invite-box label { font-size: 14px !important; }
  .afro-eights-menu-actions.is-inline,
  .afro-eights-choice-row { grid-template-columns: 1fr !important; }
  .afro-eights-menu-actions .afro-eights-btn,
  .afro-eights-big-button,
  .afro-eights-side-tile { min-height: 54px !important; padding: 10px 13px !important; border-radius: 18px !important; }
  .afro-eights-room-actions { position: static !important; background: transparent !important; padding: 8px 0 0 !important; }
}
@media (orientation: landscape) and (max-height: 760px) {
  .afro-eights-root.afro-eights-is-game .afro-eights-board { padding: max(3px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important; grid-template-rows: auto minmax(42px, .34fr) minmax(118px, .92fr) minmax(116px, .72fr) !important; gap: 4px !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-topbar { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 6px !important; align-items: start !important; min-height: 34px !important; padding: 0 !important; z-index: 45 !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-brand { display: none !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-status { grid-column: 1 !important; max-width: none !important; overflow-x: auto !important; padding-left: 2px !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions { grid-column: 2 !important; display: flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; align-items: center !important; gap: 4px !important; max-width: min(54vw, 380px) !important; overflow-x: auto !important; overflow-y: visible !important; padding-right: max(2px, env(safe-area-inset-right)) !important; -webkit-overflow-scrolling: touch !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-btn { min-height: 28px !important; padding: 5px 8px !important; border-radius: 999px !important; font-size: clamp(10px, 2.3vw, 12px) !important; line-height: 1 !important; flex: 0 0 auto !important; white-space: nowrap !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-fullscreen-btn { display: none !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-turn-flash { top: 32px !important; max-width: min(48vw, 460px) !important; min-height: 26px !important; font-size: 12px !important; padding: 4px 12px !important; z-index: 36 !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-table { min-height: 118px !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-human-panel { min-height: 112px !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-player-head { min-height: 22px !important; }
}


/* v0.11.0 user fixes: stronger safe-area controls and touch drag parity. */
.afro-eights-root.afro-eights-native-fullscreen,
body.afro-eights-full-page-shell .afro-eights-root {
  width: 100vw !important;
  height: var(--ae-viewport-height, 100dvh) !important;
  max-height: var(--ae-viewport-height, 100dvh) !important;
  overflow: hidden !important;
}
.afro-eights-root.afro-eights-no-hints .afro-eights-card[data-card-playable="false"] {
  cursor: grab !important;
}
.afro-eights-root.afro-eights-no-hints .afro-eights-card[data-card-playable="false"] * {
  pointer-events: none !important;
}
.afro-eights-room-top-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 8px 0 10px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
.afro-eights-room-top-actions .afro-eights-btn {
  pointer-events: auto !important;
}
.afro-eights-game-exit-btn,
.afro-eights-leave-room-top {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
@media (max-width: 840px) and (orientation: portrait) {
  .afro-eights-root.afro-eights-is-menu .afro-eights-shell {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 64px)) !important;
  }
  .afro-eights-menu-header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  .afro-eights-menu-header-actions .afro-eights-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .afro-eights-room-top-actions {
    justify-content: stretch !important;
  }
  .afro-eights-room-top-actions .afro-eights-btn {
    width: 100% !important;
  }
}
@media (orientation: landscape) and (max-height: 780px) {
  .afro-eights-root.afro-eights-is-game .afro-eights-board {
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    overflow: visible !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    max-width: min(58vw, 440px) !important;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
    padding-left: 4px !important;
    scrollbar-width: none !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions::-webkit-scrollbar { display: none !important; }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-btn {
    min-width: max-content !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-fullscreen-btn {
    display: none !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-game-exit-btn {
    display: inline-flex !important;
  }
}
@media (pointer: coarse) {
  .afro-eights-card[draggable="true"],
  .afro-eights-deck-button[data-draw-source="deck"] {
    -webkit-touch-callout: none !important;
    touch-action: none !important;
  }
  .afro-eights-card-ghost.is-touch-lifted {
    opacity: .98 !important;
    transform-origin: center center !important;
  }
}

/* v0.11.0 final mobile/fullscreen polish: keep exit controls reachable and room invites easy to leave. */
.afro-eights-room-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 10px 0 14px;
}
.afro-eights-room-top-actions .afro-eights-btn { min-height: 38px; }
.afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-fullscreen-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.afro-eights-root.afro-eights-is-game .afro-eights-actions {
  scrollbar-width: thin;
}
@media (orientation: landscape) and (max-height: 740px) {
  .afro-eights-root.afro-eights-is-game .afro-eights-actions {
    grid-column: 2 !important;
    max-width: min(62vw, 470px) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-left: 2px !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-btn {
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: clamp(10px, 2vw, 12px) !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-fullscreen-btn {
    display: inline-flex !important;
    max-width: 82px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (max-width: 840px) and (orientation: portrait) {
  .afro-eights-room-top-actions {
    display: grid;
    grid-template-columns: 1fr;
    position: sticky;
    top: 0;
    z-index: 8;
    padding: 8px 0;
    background: linear-gradient(180deg, rgba(49, 25, 15, .96), rgba(49, 25, 15, .75));
    border-radius: 18px;
  }
  .afro-eights-room-card .afro-eights-room-actions {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 8;
    background: linear-gradient(0deg, rgba(49, 25, 15, .96), rgba(49, 25, 15, .72));
    padding: 8px;
    border-radius: 18px;
  }
}

/* v0.11.0 final patch: always keep gameplay exit/fullscreen controls visible. */
.afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-fullscreen-btn,
.afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-game-exit-btn {
  display: inline-flex !important;
}
@media (orientation: landscape) and (max-height: 780px) {
  .afro-eights-root.afro-eights-is-game .afro-eights-actions {
    max-width: min(68vw, 560px) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-btn {
    min-height: 30px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .afro-eights-root.afro-eights-is-game .afro-eights-actions .afro-eights-fullscreen-btn {
    max-width: 88px !important;
  }
}

.afro-eights-store-note,
.afro-eights-howto-note {
  margin-top: -0.25rem;
}

/* v0.14.2 gameplay animation stability: keep mobile ghosts inside the active fullscreen layer and avoid iOS/WebKit flicker. */
.afro-eights-animation-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483500 !important;
  pointer-events: none !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
}
.afro-eights-animation-layer .afro-eights-card-ghost,
.afro-eights-animation-layer .afro-eights-card-play-anim {
  position: fixed !important;
  pointer-events: none !important;
}
.afro-eights-card-ghost.is-touch-lifted {
  opacity: .99 !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  transform-origin: center center !important;
  will-change: transform, opacity !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
}
.afro-eights-player-panel.is-observed-moving {
  box-shadow: 0 0 0 3px rgba(244,194,79,.36), 0 18px 38px rgba(0,0,0,.24) !important;
}
.afro-eights-player-panel.is-observed-drawing .afro-eights-card-count-badge {
  box-shadow: 0 0 0 4px rgba(244,194,79,.24) !important;
}
@media (pointer: coarse) {
  button.afro-eights-card[draggable="true"],
  .afro-eights-deck-button[draggable="true"] {
    -webkit-user-drag: none !important;
    user-drag: none !important;
  }
  .afro-eights-card-ghost.is-touch-lifted,
  .afro-eights-card-ghost.is-deck-lifted {
    transition: none !important;
    filter: none !important;
  }
}

/* v0.14.3 gameplay interaction pass: face-up draw-choice ghost, clearer observed opponent moves, and portrait hand scrolling. */
.afro-eights-draw-choice-ghost {
  background: transparent !important;
  overflow: visible !important;
  perspective: 900px !important;
  transform-origin: center center !important;
}
.afro-eights-animation-layer .afro-eights-draw-choice-ghost .afro-eights-card-play-anim,
.afro-eights-draw-choice-ghost .afro-eights-card-play-anim {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}
.afro-eights-draw-choice-ghost .afro-eights-draw-choice-back {
  opacity: 0;
  animation: afro-eights-draw-back-peek .24s ease-out both;
}
.afro-eights-draw-choice-ghost .afro-eights-draw-choice-front {
  opacity: 1;
  transform-origin: center center !important;
  animation: afro-eights-draw-card-reveal .26s cubic-bezier(.2,.85,.2,1) both;
  box-shadow: 0 20px 46px rgba(0,0,0,.52), 0 0 0 4px rgba(244,194,79,.30) !important;
}
@keyframes afro-eights-draw-back-peek {
  0% { opacity: 1; transform: rotateY(0deg) scale(1); }
  54% { opacity: 1; transform: rotateY(82deg) scale(1.02); }
  55%, 100% { opacity: 0; transform: rotateY(88deg) scale(1.02); }
}
@keyframes afro-eights-draw-card-reveal {
  0%, 42% { opacity: 0; transform: rotateY(-88deg) scale(1.02); }
  43% { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg) scale(1.02); }
}
.afro-eights-card-play-anim.is-observed-flight,
.afro-eights-draw-choice-ghost.is-observed-flight {
  box-shadow: 0 24px 58px rgba(0,0,0,.60), 0 0 0 5px rgba(244,194,79,.34), 0 0 34px rgba(244,194,79,.34) !important;
  filter: saturate(1.13) brightness(1.08) !important;
}
.afro-eights-player-panel.is-observed-playing,
.afro-eights-player-panel.is-observed-drawing {
  position: relative;
  outline: 2px solid rgba(244,194,79,.42) !important;
  outline-offset: -2px !important;
}
.afro-eights-card-back-mini.is-observed-source-card,
.afro-eights-card-back-mini.is-observed-target-card {
  opacity: .28 !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 0 0 3px rgba(244,194,79,.45), 0 10px 22px rgba(0,0,0,.42) !important;
}
.afro-eights-observed-move-toast {
  position: fixed !important;
  z-index: 2147483650 !important;
  pointer-events: none !important;
  transform: translate(-50%, -100%) !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(23, 12, 8, .92) !important;
  border: 1px solid rgba(244,194,79,.56) !important;
  color: #fff7df !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 22px rgba(244,194,79,.18) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  animation: afro-eights-observed-toast 1.42s ease both !important;
}
@keyframes afro-eights-observed-toast {
  0% { opacity: 0; transform: translate(-50%, -76%) scale(.92); }
  14%, 76% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -128%) scale(.98); }
}
@media (max-width: 840px) and (orientation: portrait) {
  .afro-eights-root.afro-eights-portrait-device.afro-eights-is-game,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-portrait-device.afro-eights-is-game,
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-portrait-device.afro-eights-is-game {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay,
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay {
    overflow: visible !important;
    height: auto !important;
    min-height: 100% !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel {
    overflow: visible !important;
    max-width: 100% !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
    touch-action: pan-x !important;
    scroll-padding-inline: 24px !important;
    padding-bottom: 16px !important;
    scrollbar-width: thin !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards .afro-eights-card,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards button.afro-eights-card[draggable="true"] {
    flex: 0 0 auto !important;
    touch-action: pan-x !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-deck-button[data-draw-source="deck"] {
    touch-action: none !important;
  }
}

/* v0.14.4 gameplay visibility pass: obvious opponent plays, compact portrait pick state, hand scroll tab, and calmer forced-pick flights. */
.afro-eights-card-play-anim.is-observed-play-flight {
  opacity: 1 !important;
  z-index: 2147483640 !important;
  transform-origin: center center !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.68), 0 0 0 6px rgba(244,194,79,.48), 0 0 42px rgba(244,194,79,.42) !important;
  filter: saturate(1.18) brightness(1.10) !important;
}
.afro-eights-card-play-anim.is-observed-play-flight.is-flight-holding {
  box-shadow: 0 18px 42px rgba(0,0,0,.54), 0 0 0 6px rgba(81,212,126,.34), 0 0 32px rgba(244,194,79,.32) !important;
}
.afro-eights-card-play-anim.is-compact-pickup-flight {
  box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 0 3px rgba(244,194,79,.22) !important;
  filter: saturate(1.02) brightness(1.02) !important;
}
.afro-eights-player-panel.is-observed-playing::after {
  content: "PLAYING";
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(23, 12, 8, .92);
  border: 1px solid rgba(244,194,79,.62);
  color: #fff7df;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
  box-shadow: 0 8px 20px rgba(0,0,0,.36);
}
.afro-eights-discard-drop.is-receiving-card {
  z-index: 4;
}
.afro-eights-discard-drop.is-receiving-card::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  pointer-events: none;
  border: 2px solid rgba(81,212,126,.55);
  box-shadow: 0 0 22px rgba(81,212,126,.26), 0 0 34px rgba(244,194,79,.20);
}
.afro-eights-hand-scroll-tab {
  display: none;
}
@media (max-width: 840px) and (orientation: portrait) {
  .afro-eights-root.afro-eights-portrait-device .afro-eights-turn-flash.is-pick-turn,
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-portrait-device .afro-eights-turn-flash.is-pick-turn,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-portrait-device .afro-eights-turn-flash.is-pick-turn {
    top: max(62px, calc(env(safe-area-inset-top) + 52px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: min(62vw, 270px) !important;
    min-height: 36px !important;
    padding: 7px 16px !important;
    font-size: clamp(15px, 5.1vw, 22px) !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    border-width: 1px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.42), 0 0 0 4px rgba(227,86,69,.18) !important;
    animation: afro-eights-pick-flash .95s ease-in-out infinite !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay.has-pending-draw .afro-eights-table {
    position: relative !important;
    z-index: 2 !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay.has-pending-draw .afro-eights-discard-drop {
    outline: 2px solid rgba(244,194,79,.46) !important;
    outline-offset: 3px !important;
    box-shadow: inset 0 0 30px rgba(244,194,79,.13), 0 0 24px rgba(244,194,79,.18) !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel {
    padding-bottom: 9px !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards {
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: max(44px, 18vw) !important;
    padding-bottom: 10px !important;
    scroll-snap-type: x proximity;
    touch-action: pan-x !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards .afro-eights-card,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards button.afro-eights-card[draggable="true"] {
    margin-left: 0 !important;
    flex: 0 0 var(--ae-card-w) !important;
    scroll-snap-align: start;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-tab {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: min(100%, 520px) !important;
    margin: 4px auto 0 !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(24, 12, 8, .62) !important;
    border: 1px solid rgba(244,194,79,.32) !important;
    box-shadow: inset 0 0 18px rgba(0,0,0,.20), 0 7px 18px rgba(0,0,0,.18) !important;
    opacity: .52;
    transition: opacity .16s ease, transform .16s ease;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-tab.is-needed {
    opacity: 1;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-button {
    appearance: none !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #fff2ad, #d99524) !important;
    color: #241208 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.55) !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-slider {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    height: 30px !important;
    accent-color: var(--ae-gold) !important;
    touch-action: pan-x !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-slider:disabled,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-tab:not(.is-needed) .afro-eights-hand-scroll-button {
    opacity: .45 !important;
  }
}

/* v0.14.5 portrait mobile correction: fit the table to phone portrait, make hand scrolling obvious, and present opponent plays. */
.afro-eights-card-play-anim.is-observed-play-presentation {
  z-index: 2147483651 !important;
  box-shadow: 0 30px 76px rgba(0,0,0,.70), 0 0 0 6px rgba(244,194,79,.58), 0 0 44px rgba(244,194,79,.42) !important;
  filter: saturate(1.2) brightness(1.12) !important;
}

.afro-eights-hand-scroll-edge {
  display: none;
}

@media (max-width: 840px) and (orientation: portrait) {
  body.afro-eights-full-page-shell,
  body.afro-eights-game-page,
  body.afro-eights-managed-page {
    overflow-x: hidden !important;
  }

  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-portrait-device.afro-eights-is-game,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-portrait-device.afro-eights-is-game,
  .afro-eights-root.afro-eights-portrait-device.afro-eights-is-game {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--ae-viewport-height, 100dvh) !important;
    max-height: var(--ae-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay,
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: minmax(30px, auto) minmax(92px, 18dvh) minmax(158px, 30dvh) minmax(184px, 1fr) !important;
    gap: 5px !important;
    padding: max(4px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    gap: 3px !important;
    min-height: 30px !important;
    position: relative !important;
    z-index: 34 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-brand,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-status,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-actions .afro-eights-fullscreen-btn {
    display: none !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-actions .afro-eights-btn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 5px 5px !important;
    border-radius: 999px !important;
    font-size: clamp(10px, 3.05vw, 12px) !important;
    line-height: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-turn-flash,
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-portrait-device .afro-eights-turn-flash,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-portrait-device .afro-eights-turn-flash {
    top: max(36px, calc(env(safe-area-inset-top) + 30px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 72px) !important;
    min-height: 30px !important;
    padding: 6px 18px !important;
    font-size: clamp(12px, 3.9vw, 16px) !important;
    line-height: 1 !important;
    z-index: 32 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-turn-flash.is-pick-turn,
  body.afro-eights-full-page-shell .afro-eights-root.afro-eights-portrait-device .afro-eights-turn-flash.is-pick-turn,
  .afro-eights-root.afro-eights-native-fullscreen.afro-eights-portrait-device .afro-eights-turn-flash.is-pick-turn {
    top: max(38px, calc(env(safe-area-inset-top) + 32px)) !important;
    max-width: min(50vw, 188px) !important;
    min-height: 30px !important;
    padding: 5px 12px !important;
    font-size: clamp(13px, 4.1vw, 17px) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.38), 0 0 0 3px rgba(227,86,69,.14) !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents {
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-player-panel {
    min-width: 0 !important;
    min-height: 86px !important;
    padding: 7px 9px !important;
    border-radius: 14px !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-player-head,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel .afro-eights-player-head {
    gap: 5px !important;
    margin-bottom: 5px !important;
    font-size: clamp(12px, 3.4vw, 14px) !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-score {
    font-size: 11px !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-mini-hand {
    display: flex !important;
    min-height: 46px !important;
    padding-left: 7px !important;
    overflow: hidden !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-card-back-mini {
    width: 31px !important;
    height: 46px !important;
    margin-left: -7px !important;
    border-radius: 6px !important;
  }

  .afro-eights-root.afro-eights-portrait-device.afro-eights-is-game .afro-eights-card,
  .afro-eights-root.afro-eights-portrait-device.afro-eights-is-game .afro-eights-card.is-image-card {
    --ae-card-w: clamp(72px, 23vw, 92px) !important;
    --ae-card-h: calc(var(--ae-card-w) * 1.414) !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(68px, 21vw, 84px) !important;
    --ae-card-h: calc(var(--ae-card-w) * 1.414) !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-table,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-table.is-clean-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-table-slot,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-table.is-clean-table .afro-eights-table-slot {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 150px !important;
    overflow: hidden !important;
    padding: 6px !important;
    border-radius: 15px !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-pile-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-deck-button,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-discard-drop {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-discard-drop {
    min-width: calc(var(--ae-card-w, 82px) + 14px) !important;
    min-height: calc(var(--ae-card-h, 116px) + 18px) !important;
    padding: 5px !important;
    border-radius: 12px !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-deck-count {
    min-width: 26px !important;
    height: 21px !important;
    font-size: 11px !important;
    margin-top: -3px !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 7px 9px 7px !important;
    border-radius: 15px !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel .afro-eights-score {
    display: none !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: calc(var(--ae-card-h, 126px) + 12px) !important;
    height: calc(var(--ae-card-h, 126px) + 18px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
    touch-action: pan-x !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    padding: 5px 54px 9px 35px !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards::-webkit-scrollbar {
    display: none !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards .afro-eights-card,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-cards button.afro-eights-card[draggable="true"] {
    margin-left: 0 !important;
    flex: 0 0 var(--ae-card-w) !important;
    scroll-snap-align: start !important;
    touch-action: pan-x !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-edge {
    appearance: none !important;
    position: absolute !important;
    z-index: 12 !important;
    top: calc(50% + 15px) !important;
    transform: translateY(-50%) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 72px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #fff2ad, #d99524) !important;
    color: #241208 !important;
    font-size: 27px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.62) !important;
    opacity: .94 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel.afro-eights-hand-overflows .afro-eights-hand-scroll-edge {
    display: inline-flex !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-edge.is-left { left: 6px !important; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-edge.is-right { right: 6px !important; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel:not(.can-scroll-left) .afro-eights-hand-scroll-edge.is-left,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel:not(.can-scroll-right) .afro-eights-hand-scroll-edge.is-right {
    opacity: .44 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-tab {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    padding: 4px 6px !important;
    border-radius: 999px !important;
    background: rgba(24, 12, 8, .72) !important;
    border: 1px solid rgba(244,194,79,.36) !important;
    box-shadow: inset 0 0 18px rgba(0,0,0,.20), 0 7px 18px rgba(0,0,0,.18) !important;
    opacity: .78 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-tab.is-needed {
    opacity: 1 !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-button {
    appearance: none !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #fff2ad, #d99524) !important;
    color: #241208 !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.55) !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-track {
    position: relative !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 32px !important;
    cursor: ew-resize !important;
    touch-action: pan-x !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-slider {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 32px !important;
    min-width: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    touch-action: pan-x !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-rail {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    height: 14px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: rgba(255,247,223,.23) !important;
    box-shadow: inset 0 2px 7px rgba(0,0,0,.28) !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-thumb {
    position: absolute !important;
    left: 0;
    top: 50% !important;
    width: 42px !important;
    height: 24px !important;
    border-radius: 999px !important;
    transform: translate(-50%, -50%) !important;
    background: linear-gradient(180deg, #fff6be, #d99524) !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.62) !important;
  }

  .afro-eights-root.afro-eights-portrait-device .afro-eights-hand-scroll-label {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: rgba(255,247,223,.90) !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.42) !important;
  }
}

/* v0.15.0: accessibility and commerce/store lock states. */
.afro-eights-sr-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.afro-eights-shell.has-reduced-motion *,
.afro-eights-shell.has-reduced-motion *::before,
.afro-eights-shell.has-reduced-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}
.afro-eights-shell.has-large-cards .afro-eights-card,
.afro-eights-shell.has-large-cards .afro-eights-mini-card,
.afro-eights-shell.has-large-cards .afro-eights-deck-card,
.afro-eights-shell.has-large-cards .afro-eights-discard-card {
  transform: scale(1.06);
  transform-origin: center bottom;
}
.afro-eights-store-item.is-locked {
  opacity: .55;
  filter: grayscale(.35);
  cursor: not-allowed;
}
.afro-eights-store-item.is-locked::after {
  content: "Locked";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .82);
  color: #fff7df;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}


/* v0.15.1 iOS parity layer: menu assets, landscape table, portrait reflow, pause/lobby skins. */
.afro-eights-root {
  --ae-ios-font: "Ecliptic", "Comic Sans MS", "Trebuchet MS", cursive;
  --ae-ios-gold: #b1975d;
  --ae-ios-gold-deep: #8f742e;
  --ae-ios-cream: #f9f4e8;
  --ae-ios-panel: rgba(238, 224, 198, .72);
  --ae-ios-blue: #6f9bdb;
  font-family: var(--ae-ios-font) !important;
  background: #e8d6ae;
}
.afro-eights-root button,
.afro-eights-root input,
.afro-eights-root select,
.afro-eights-root textarea { font-family: inherit; }
.afro-eights-loading {
  position: relative;
  background: #000 url("../img/ui/loading-page.png") center/cover no-repeat !important;
  color: transparent !important;
}
.afro-eights-loading::before {
  content: "";
  display: block;
  width: min(310px, 62vw);
  aspect-ratio: 2008 / 1178;
  background: url("../img/ui/logo-black.jpg") center/contain no-repeat;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));
}
.afro-eights-shell {
  color: #312618;
  background: #f7f6f2 var(--ae-bg-image) center/cover no-repeat;
}
.afro-eights-shell::before {
  content: "Afro 8ights";
  position: absolute;
  top: clamp(62px, 13vh, 128px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  color: rgba(60, 54, 46, .08);
  font-family: Georgia, serif;
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.afro-eights-shell > * { position: relative; z-index: 1; }
.afro-eights-menu-header { color: var(--ae-ios-gold-deep); }
.afro-eights-menu-brand span { color: rgba(120,100,62,.72); }
.afro-eights-menu-header .afro-eights-btn,
.afro-eights-btn {
  border-radius: 8px;
  border-color: rgba(151, 133, 95, .42);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(224,224,224,.76));
  color: #3a352f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.64), 0 2px 4px rgba(0,0,0,.12);
}
.afro-eights-btn:not(.afro-eights-btn-secondary):not(.afro-eights-btn-danger):not(.afro-eights-btn-success) {
  background: linear-gradient(180deg, #f7df8f, #c4a24a);
  color: #2f2613;
}
.afro-eights-btn-danger { background: #f36f66 !important; color: #2b1310 !important; border-color: #bd4d47 !important; }
.afro-eights-btn-success { background: #64d96c !important; color: #0e2b12 !important; border-color: #38a942 !important; }
.afro-eights-ios-main-menu {
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, .55fr);
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}
.afro-eights-ios-home-card,
.afro-eights-ios-setup-card,
.afro-eights-lobby-card,
.afro-eights-store-card,
.afro-eights-panel-card {
  border: 2px solid rgba(151, 133, 95, .32);
  background: rgba(238, 224, 198, .72);
  color: #30281b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.36), 0 14px 28px rgba(119,93,37,.18);
}
.afro-eights-ios-home-card h2,
.afro-eights-ios-setup-card h2,
.afro-eights-lobby-card h2,
.afro-eights-panel-card h2,
.afro-eights-eyebrow,
.afro-eights-store-card h3 {
  color: var(--ae-ios-gold-deep) !important;
  letter-spacing: .02em;
}
.afro-eights-ios-reward-strip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(151, 133, 95, .36);
  background: rgba(255,255,255,.62);
  color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-reward-strip small { color: rgba(74,61,37,.72); font-size: 12px; }
.afro-eights-ios-token,
.afro-eights-ios-side-tile > span,
.afro-eights-ios-play-button > span,
.afro-eights-ios-button-icon,
.afro-eights-pause-leaf {
  display: inline-block;
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.afro-eights-ios-token { width: 34px; height: 28px; background-image: url("../img/ui/token.png"); }
.afro-eights-ios-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.7vw, 18px) !important;
}
.afro-eights-ios-menu-button {
  min-height: 154px;
  display: grid !important;
  grid-template-rows: 66px auto auto;
  place-items: center;
  text-align: center;
  padding: 18px 14px !important;
  color: var(--ae-ios-gold-deep) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,238,238,.78)) !important;
  border: 1px solid rgba(151, 133, 95, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 7px 16px rgba(129,99,36,.18) !important;
}
.afro-eights-ios-menu-button span:not(.afro-eights-ios-button-icon) { color: var(--ae-ios-gold-deep) !important; font-size: clamp(22px, 2.8vw, 34px); }
.afro-eights-ios-menu-button small { color: rgba(64,54,34,.72) !important; font-family: system-ui, sans-serif; font-weight: 700; }
.afro-eights-ios-button-icon { width: 74px; height: 62px; }
.afro-eights-ios-menu-button.is-single .afro-eights-ios-button-icon { background-image: url("../img/ui/single-player.png"); }
.afro-eights-ios-menu-button.is-local .afro-eights-ios-button-icon,
.afro-eights-ios-menu-button.is-online .afro-eights-ios-button-icon { background-image: url("../img/ui/multi-player.png"); }
.afro-eights-ios-menu-side { display: grid; gap: 10px; }
.afro-eights-ios-side-tile {
  display: grid !important;
  grid-template-columns: 54px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  min-height: 70px;
  color: var(--ae-ios-gold-deep) !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(151, 133, 95, .34) !important;
}
.afro-eights-ios-side-tile > span { grid-row: 1 / span 2; width: 46px; height: 42px; }
.afro-eights-ios-side-tile strong { color: var(--ae-ios-gold-deep) !important; font-size: 24px; }
.afro-eights-ios-side-tile small { color: rgba(64,54,34,.72); font-family: system-ui, sans-serif; font-weight: 700; }
.afro-eights-ios-side-tile.is-store > span { background-image: url("../img/ui/store.png"); }
.afro-eights-ios-side-tile.is-settings > span { background-image: url("../img/ui/settings.png"); }
.afro-eights-ios-side-tile.is-play > span { background-image: url("../img/ui/play.png"); }
.afro-eights-ios-side-tile.is-rules > span { background-image: url("../img/ui/menu-leaf.png"); }
.afro-eights-ios-side-tile.is-rankings > span { background-image: url("../img/ui/token.png"); }
.afro-eights-ios-form { color: #342916; }
.afro-eights-ios-name-field,
.afro-eights-ios-range,
.afro-eights-ios-check {
  color: var(--ae-ios-gold-deep) !important;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 700;
}
.afro-eights-ios-name-field input,
.afro-eights-ios-form input[type="text"],
.afro-eights-ios-form input[type="number"],
.afro-eights-lobby-controls input[type="text"] {
  min-height: 44px;
  border: 2px solid rgba(151, 133, 95, .28);
  border-radius: 7px;
  background: rgba(255,255,255,.90);
  color: #3c3327;
  font-family: system-ui, sans-serif;
  font-size: 16px;
}
.afro-eights-ios-range input[type="range"] {
  display: block;
  width: 100%;
  margin: 7px 0 0;
  accent-color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-range-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  color: var(--ae-ios-gold-deep);
  font-size: clamp(18px, 2.6vw, 31px);
}
.afro-eights-ios-play-row { justify-content: flex-end; }
.afro-eights-ios-play-button {
  min-width: 116px;
  min-height: 92px;
  display: inline-grid !important;
  place-items: center;
  gap: 0;
  background: rgba(255,255,255,.86) !important;
  color: var(--ae-ios-gold-deep) !important;
}
.afro-eights-ios-play-button > span { width: 46px; height: 45px; background-image: url("../img/ui/play.png"); }
.afro-eights-ios-player-names {
  grid-column: 1 / -1;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(151, 133, 95, .30);
  background: rgba(255,255,255,.36);
  color: #3a2e1a;
}
.afro-eights-ios-player-names summary { cursor: pointer; color: var(--ae-ios-gold-deep); font-size: 24px; }
.afro-eights-lobby-card {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(320px, .72fr);
  gap: clamp(16px, 3vw, 42px);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.afro-eights-lobby-left {
  min-height: min(58vh, 520px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}
.afro-eights-lobby-tabs { display: flex; gap: 16px; }
.afro-eights-lobby-tabs button {
  min-width: 110px;
  min-height: 38px;
  border: 2px solid rgba(151, 133, 95, .28);
  border-radius: 7px;
  background: rgba(232,232,232,.86);
  color: var(--ae-ios-gold-deep);
  font-size: 24px;
}
.afro-eights-lobby-tabs button.is-active { background: rgba(255,255,255,.82); }
.afro-eights-lobby-list {
  display: grid;
  place-content: center;
  text-align: center;
  border: 2px solid rgba(151, 133, 95, .18);
  border-radius: 7px;
  background: rgba(237,237,237,.82);
  color: rgba(70,58,34,.70);
  padding: 24px;
}
.afro-eights-lobby-list h2 {
  color: #292929 !important;
  font-size: clamp(34px, 5vw, 58px);
}
.afro-eights-lobby-status { color: rgba(70,58,34,.82); font-size: 17px; }
.afro-eights-lobby-status.is-ready { color: #42692d; }
.afro-eights-lobby-controls {
  align-self: center;
  display: grid;
  gap: 15px;
  padding: 14px;
  color: var(--ae-ios-gold-deep);
}
.afro-eights-lobby-controls .afro-eights-toggle { justify-self: start; }
.afro-eights-lobby-actions { justify-content: end; }
.afro-eights-board.afro-eights-gameplay {
  background-image: var(--ae-bg-image) !important;
  color: #fff7df;
}
.afro-eights-board.afro-eights-gameplay::after {
  content: "Afro 8ights";
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  color: rgba(50,50,50,.08);
  font-family: Georgia, serif;
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 700;
  white-space: nowrap;
}
.afro-eights-board.afro-eights-gameplay > * { position: relative; z-index: 1; }
.afro-eights-opponent-avatar {
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #1d7fb3 url("../img/deck/diamonds-q.webp") center/cover no-repeat;
  box-shadow: 0 3px 8px rgba(0,0,0,.23);
}
.afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
  grid-template-rows: auto minmax(74px, .22fr) minmax(250px, 1fr) minmax(184px, .52fr) !important;
  gap: 5px !important;
  padding: max(5px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-topbar {
  grid-template-columns: minmax(110px, 170px) 1fr auto !important;
  min-height: 44px;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-brand img { opacity: .28; max-width: 160px; }
.afro-eights-root.afro-eights-landscape-device .afro-eights-actions > [data-action="draw"]:not(.afro-eights-ios-draw-tile) { display: none !important; }
.afro-eights-root.afro-eights-landscape-device .afro-eights-status .afro-eights-pill { background: rgba(255,255,255,.44); color: #51401f; border-color: rgba(151,133,95,.24); }
.afro-eights-root.afro-eights-landscape-device .afro-eights-opponents {
  display: flex !important;
  justify-content: space-around;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 28px);
  overflow: visible;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-panel {
  flex: 0 1 176px;
  display: grid;
  place-items: center;
  gap: 3px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #5e4c24;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-head {
  justify-content: center;
  text-align: center;
  gap: 4px;
  margin: 0;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-name,
.afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-score { display: none; }
.afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-card-count-badge {
  background: rgba(255,255,255,.78);
  color: #6d5520;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-mini-hand {
  min-height: 46px;
  justify-content: center;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table {
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-height: 100% !important;
  background: transparent !important;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table .afro-eights-table-slot,
.afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.afro-eights-pile-row {
  position: relative;
  isolation: isolate;
  min-width: min(54vw, 420px);
  min-height: min(40vw, 310px);
}
.afro-eights-pile-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(46vw, 355px);
  height: min(46vw, 355px);
  transform: translate(-50%, -50%);
  background: url("../img/direction.png") center/contain no-repeat;
  opacity: .54;
  filter: sepia(.25) saturate(.65);
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-pile-row { gap: min(4vw, 34px) !important; }
.afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop,
.afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button {
  filter: drop-shadow(0 12px 16px rgba(96,72,24,.22));
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel {
  background: rgba(87, 137, 210, .86) !important;
  border: 2px solid rgba(50, 94, 157, .50) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 -3px 12px rgba(0,0,0,.12) !important;
  color: #17253b;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel .afro-eights-player-head { display: none; }
.afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards {
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  padding: 8px 80px 8px 18px !important;
  overflow-x: auto;
}
.afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
  --ae-card-w: clamp(78px, 8.7vw, 118px) !important;
  --ae-card-h: clamp(110px, 12.3vw, 166px) !important;
}
.afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
.afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
  --ae-card-w: clamp(88px, 9.2vw, 128px) !important;
  --ae-card-h: clamp(124px, 13vw, 180px) !important;
}
.afro-eights-ios-draw-tile {
  position: absolute;
  z-index: 20;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(34px, env(safe-area-inset-bottom));
  width: 72px;
  height: 72px;
  border: 2px solid rgba(151, 133, 95, .36);
  border-radius: 7px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 12px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.80);
  color: var(--ae-ios-gold-deep);
  display: grid;
  place-items: end center;
  padding: 4px;
  cursor: pointer;
}
.afro-eights-ios-draw-tile::before {
  content: "";
  position: absolute;
  inset: 8px 9px 17px;
  background: url("../img/ui/end-turn.png") center/contain no-repeat;
}
.afro-eights-ios-draw-tile.is-draw::before,
.afro-eights-ios-draw-tile.is-pick::before { background-image: url("../img/ui/draw.png"); }
.afro-eights-ios-draw-tile span {
  position: relative;
  z-index: 1;
  font-size: 12px;
  line-height: 1;
  color: var(--ae-ios-gold-deep);
  text-shadow: 0 1px 0 #fff;
}
.afro-eights-ios-draw-tile[disabled] { opacity: .5; filter: grayscale(.5); cursor: not-allowed; }
.afro-eights-pause-modal { backdrop-filter: blur(1px); background: rgba(180,150,96,.32); }
.afro-eights-pause-card {
  width: min(520px, calc(100% - 28px));
  border-radius: 5px !important;
  background: rgba(209, 187, 158, .96) !important;
  border: 2px solid rgba(130, 104, 62, .45) !important;
  color: #2a2928 !important;
  text-align: center;
  box-shadow: 0 18px 36px rgba(81,58,22,.35) !important;
}
.afro-eights-pause-card h3 { color: #2a2928 !important; font-size: clamp(34px, 6vw, 58px); margin: 0 0 12px; }
.afro-eights-pause-leaf { width: 54px; height: 44px; background-image: url("../img/ui/settings.png"); position: absolute; left: 16px; top: 16px; opacity: .85; }
.afro-eights-pause-options { display: grid; gap: 10px; max-width: 360px; margin: 0 auto 18px; }
.afro-eights-pause-options label {
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  gap: 16px;
  text-align: right;
  font-size: clamp(24px, 4vw, 38px);
}
.afro-eights-pause-options input[type="checkbox"],
.afro-eights-ios-check input[type="checkbox"] {
  width: 32px;
  height: 32px;
  accent-color: #4b4b4b;
}
.afro-eights-pause-actions { display: flex; justify-content: space-between; gap: 18px; margin-top: 10px; }
.afro-eights-pause-actions .afro-eights-btn { min-width: 150px; min-height: 50px; font-size: clamp(18px, 3vw, 26px); }
@media (orientation: portrait), (max-width: 780px) {
  .afro-eights-ios-main-menu { grid-template-columns: 1fr; align-items: stretch; }
  .afro-eights-ios-mode-grid { grid-template-columns: 1fr !important; }
  .afro-eights-ios-menu-button { min-height: 108px; grid-template-columns: 70px 1fr; grid-template-rows: auto auto; text-align: left; place-items: center start; }
  .afro-eights-ios-menu-button .afro-eights-ios-button-icon { grid-row: 1 / span 2; }
  .afro-eights-ios-menu-side { grid-template-columns: 1fr; }
  .afro-eights-lobby-card { grid-template-columns: 1fr; }
  .afro-eights-lobby-left { min-height: 240px; }
  .afro-eights-ios-setup-card { padding: 18px !important; }
  .afro-eights-ios-play-row, .afro-eights-lobby-actions { justify-content: stretch; }
  .afro-eights-ios-play-button { min-height: 72px; }
}
@media (orientation: portrait) {
  .afro-eights-root.afro-eights-portrait-device .afro-eights-actions > [data-action="draw"]:not(.afro-eights-ios-draw-tile) { display: none !important; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto auto minmax(180px, auto) minmax(150px, auto) !important;
    background-position: center top;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 24vh;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-player-panel {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 6px;
    min-height: 54px;
    background: rgba(255,255,255,.46) !important;
    color: #4e3f22;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponent-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-mini-hand { display: none; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-table.is-clean-table .afro-eights-table-slot,
  .afro-eights-root.afro-eights-portrait-device .afro-eights-table-slot {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(151,133,95,.18) !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-pile-row {
    min-width: 100%;
    min-height: 190px;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-pile-row::before { width: 220px; height: 220px; opacity: .42; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-human-panel {
    background: rgba(87, 137, 210, .84) !important;
    border-color: rgba(50, 94, 157, .42) !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-ios-draw-tile {
    width: 64px;
    height: 64px;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(82px, env(safe-area-inset-bottom));
  }
  .afro-eights-root.afro-eights-portrait-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(62px, 18vw, 86px) !important;
    --ae-card-h: clamp(88px, 25.3vw, 121px) !important;
  }
}
@media (orientation: landscape) and (max-height: 470px) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(42px, .18fr) minmax(128px, .78fr) minmax(104px, .55fr) !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-brand img { max-width: 96px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-status .afro-eights-pill:nth-child(n+4) { display: none; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponent-avatar { width: 42px; height: 42px; border-radius: 12px; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-mini-hand { display: none; }
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-card {
    --ae-card-w: clamp(52px, 7.4vw, 70px) !important;
    --ae-card-h: clamp(73px, 10.45vw, 99px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-deck-button .afro-eights-card.is-back {
    --ae-card-w: clamp(58px, 8vw, 76px) !important;
    --ae-card-h: clamp(82px, 11.3vw, 107px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel { min-height: 94px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards { min-height: 88px !important; }
  .afro-eights-ios-draw-tile { width: 58px; height: 58px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .afro-eights-ios-draw-tile span { display: none; }
}


/* v0.15.1 iOS shell compatibility for asset-driven home/lobby markup. */
.afro-eights-ios-home {
  min-height: min(640px, 100%);
  display: grid;
  grid-template-columns: minmax(160px, .42fr) minmax(320px, 1fr) minmax(190px, .42fr);
  gap: clamp(14px, 3vw, 38px);
  align-items: center;
  padding: clamp(12px, 2.3vw, 28px);
}
.afro-eights-ios-home-center {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2vh, 18px);
  text-align: center;
}
.afro-eights-ios-home-logo {
  max-width: min(360px, 46vw);
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(80,61,20,.16));
}
.afro-eights-ios-status-card,
.afro-eights-ios-profile-card {
  border: 2px solid rgba(151, 133, 95, .32);
  border-radius: 8px;
  background: rgba(247, 247, 247, .78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 18px rgba(129,99,36,.12);
  color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-reward-card {
  align-self: start;
  justify-self: start;
  min-width: 190px;
  min-height: 70px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: clamp(18px, 2.4vw, 28px);
}
.afro-eights-ios-reward-card > img,
.afro-eights-ios-reward-card strong img { width: 40px; height: 32px; object-fit: contain; }
.afro-eights-ios-reward-card strong { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; justify-self: center; }
.afro-eights-ios-menu-grid {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.afro-eights-ios-menu-grid .afro-eights-ios-menu-button {
  min-height: 76px;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: start;
  text-align: left;
  column-gap: 10px;
  padding: 9px 12px !important;
  border-radius: 7px !important;
  color: var(--ae-ios-gold-deep) !important;
  text-decoration: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(232,232,232,.84)) !important;
  border: 2px solid rgba(151, 133, 95, .28) !important;
}
.afro-eights-ios-menu-grid .afro-eights-ios-menu-button img,
.afro-eights-ios-menu-grid .afro-eights-ios-icon-fallback {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.afro-eights-ios-menu-grid .afro-eights-ios-menu-button span:not(.afro-eights-ios-icon-fallback) {
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--ae-ios-gold-deep) !important;
  line-height: 1;
}
.afro-eights-ios-menu-grid .afro-eights-ios-menu-button small {
  font-family: system-ui, sans-serif;
  color: rgba(62,52,32,.70) !important;
  font-size: 11px;
  font-weight: 700;
}
.afro-eights-ios-icon-fallback {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(177,151,93,.16);
  color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-profile-card {
  justify-self: end;
  width: min(220px, 100%);
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px;
  text-align: center;
}
.afro-eights-ios-score-box {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(151,133,95,.22);
  border-radius: 5px;
  background: rgba(255,255,255,.62);
}
.afro-eights-ios-score-box span,
.afro-eights-ios-profile-card small { color: rgba(83,68,39,.75); }
.afro-eights-ios-score-box strong { font-size: 30px; }
.afro-eights-ios-avatar-frame {
  width: min(170px, 22vw);
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(151,133,95,.30);
  border-radius: 6px;
  background: rgba(255,255,255,.72);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.afro-eights-ios-avatar-frame img { width: 100%; height: 100%; object-fit: cover; }
.afro-eights-ios-profile-link,
.afro-eights-ios-wide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid rgba(151,133,95,.34);
  background: rgba(255,255,255,.82);
  color: var(--ae-ios-gold-deep) !important;
  text-decoration: none;
}
.afro-eights-ios-home-center > .afro-eights-ios-play-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.afro-eights-ios-home-center .afro-eights-ios-play-button {
  min-width: 96px;
  min-height: 96px;
  display: grid !important;
  place-items: center;
  border-radius: 7px;
  border: 2px solid rgba(151,133,95,.32);
  background: rgba(255,255,255,.86) !important;
  color: var(--ae-ios-gold-deep) !important;
}
.afro-eights-ios-home-center .afro-eights-ios-play-button img { width: 52px; height: 52px; object-fit: contain; }
.afro-eights-ios-home-center .afro-eights-ios-play-button strong { font-size: 24px; }
.afro-eights-ios-lobby-card {
  width: min(1220px, 100%);
  color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-lobby-title {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  margin-bottom: 12px;
}
.afro-eights-ios-lobby-title h2 {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  color: #2b2b2b !important;
  font-size: clamp(38px, 6vw, 66px);
}
.afro-eights-ios-main-menu-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 7px;
  border: 2px solid rgba(151,133,95,.28);
  background: rgba(255,255,255,.84);
  color: var(--ae-ios-gold-deep);
  font-size: 24px;
}
.afro-eights-ios-main-menu-chip img { width: 30px; height: 30px; object-fit: contain; }
.afro-eights-ios-lobby-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, .62fr);
  gap: clamp(18px, 4vw, 60px);
  align-items: center;
}
.afro-eights-ios-room-browser {
  min-height: min(62vh, 520px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}
.afro-eights-ios-tabs { display: flex; gap: 18px; }
.afro-eights-ios-tabs button {
  min-width: 120px;
  min-height: 40px;
  border-radius: 7px;
  border: 2px solid rgba(151,133,95,.24);
  background: rgba(230,230,230,.88);
  color: var(--ae-ios-gold-deep);
  font-size: 26px;
}
.afro-eights-ios-tabs button.is-active { background: rgba(255,255,255,.86); }
.afro-eights-ios-room-list {
  display: grid;
  place-content: center;
  text-align: center;
  border: 2px solid rgba(151,133,95,.16);
  border-radius: 7px;
  background: rgba(238,238,238,.78);
  padding: 22px;
  color: rgba(79,66,39,.72);
  font-size: 18px;
}
.afro-eights-ios-lobby-controls { display: grid; gap: 14px; }
.afro-eights-ios-field,
.afro-eights-ios-range-field {
  display: grid;
  gap: 5px;
  color: var(--ae-ios-gold-deep);
  font-size: clamp(20px, 3vw, 34px);
}
.afro-eights-ios-field input {
  min-height: 42px;
  border: 2px solid rgba(151,133,95,.28);
  border-radius: 7px;
  background: rgba(255,255,255,.90);
  color: #3d3427;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  padding: 8px 12px;
}
.afro-eights-ios-range-field output {
  justify-self: start;
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.62);
  color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-range-scale {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  color: var(--ae-ios-gold-deep);
  font-size: clamp(18px, 2.5vw, 31px);
}
.afro-eights-ios-range-field input[type="range"] { width: 100%; accent-color: var(--ae-ios-gold-deep); }
.afro-eights-ios-lobby-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.afro-eights-ios-pause-card,
.afro-eights-pause-card { font-family: var(--ae-ios-font); }
@media (max-width: 900px), (orientation: portrait) {
  .afro-eights-ios-home { grid-template-columns: 1fr; align-items: stretch; }
  .afro-eights-ios-reward-card,
  .afro-eights-ios-profile-card { justify-self: stretch; width: auto; }
  .afro-eights-ios-profile-card { grid-template-columns: auto 1fr; text-align: left; justify-items: start; }
  .afro-eights-ios-score-box { grid-column: 1 / -1; }
  .afro-eights-ios-avatar-frame { width: 72px; grid-row: 2 / span 3; }
  .afro-eights-ios-menu-grid { grid-template-columns: 1fr; width: 100%; }
  .afro-eights-ios-lobby-title { grid-template-columns: 1fr; gap: 8px; }
  .afro-eights-ios-lobby-title h2 { grid-column: 1; }
  .afro-eights-ios-main-menu-chip { justify-self: start; }
  .afro-eights-ios-lobby-layout { grid-template-columns: 1fr; }
  .afro-eights-ios-room-browser { min-height: 240px; }
}

/* v0.16.0: iOS UI/UX parity layer.
   The native Ecliptic font is intentionally not bundled. Sites that own/load it can expose it
   as "Ecliptic" or "AfroEightsDisplay"; the plugin falls back to friendly system display fonts. */
.afro-eights-root {
  --ae-display-font: Ecliptic, AfroEightsDisplay, "Marker Felt", "Comic Sans MS", "Trebuchet MS", cursive;
  --ae-ios-gold: #ad9148;
  --ae-ios-gold-deep: #816522;
  --ae-ios-sand: #dcc37e;
  --ae-ios-cream: #fffaf0;
  --ae-ios-blue: #6e9bdd;
  --ae-ios-ink: #343434;
  font-family: var(--ae-display-font);
}
.afro-eights-root button,
.afro-eights-root input,
.afro-eights-root select,
.afro-eights-root textarea,
.afro-eights-root output,
.afro-eights-root .afro-eights-btn,
.afro-eights-root .afro-eights-pill,
.afro-eights-root .afro-eights-card-label,
.afro-eights-root .afro-eights-card-index {
  font-family: var(--ae-display-font);
}
.afro-eights-root .afro-eights-menu-brand img,
.afro-eights-root .afro-eights-brand img {
  filter: grayscale(.05) opacity(.72) drop-shadow(0 5px 7px rgba(0,0,0,.18));
}
.afro-eights-root .afro-eights-loading {
  background-image: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.96)), var(--ae-ui-loading);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: #fff7df;
  letter-spacing: .04em;
}

/* iOS-style home/menu shell */
.afro-eights-shell.is-ios-home,
.afro-eights-shell.is-ios-setup-screen,
.afro-eights-shell.is-ios-lobby-screen {
  position: relative;
  min-height: 100%;
  background: #f7f7f7;
  color: var(--ae-ios-ink);
  overflow: hidden auto;
}
.afro-eights-shell.is-ios-home::before,
.afro-eights-shell.is-ios-setup-screen::before,
.afro-eights-shell.is-ios-lobby-screen::before,
.afro-eights-shell.is-ios-home::after,
.afro-eights-shell.is-ios-setup-screen::after,
.afro-eights-shell.is-ios-lobby-screen::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 0;
  right: 0;
  height: 46%;
  background: rgba(178,142,55,.52);
}
.afro-eights-shell.is-ios-home::before,
.afro-eights-shell.is-ios-setup-screen::before,
.afro-eights-shell.is-ios-lobby-screen::before {
  top: -19%;
  border-bottom-left-radius: 62% 45%;
  border-bottom-right-radius: 62% 38%;
}
.afro-eights-shell.is-ios-home::after,
.afro-eights-shell.is-ios-setup-screen::after,
.afro-eights-shell.is-ios-lobby-screen::after {
  bottom: -24%;
  border-top-left-radius: 68% 50%;
  border-top-right-radius: 68% 48%;
  background: rgba(187,151,62,.58);
}
.afro-eights-shell.is-ios-home .afro-eights-menu-bg,
.afro-eights-shell.is-ios-setup-screen .afro-eights-menu-bg,
.afro-eights-shell.is-ios-lobby-screen .afro-eights-menu-bg {
  opacity: .13;
  background: var(--ae-bg-image) center/cover no-repeat;
  mix-blend-mode: multiply;
}
.afro-eights-shell.is-ios-home .afro-eights-menu-header,
.afro-eights-shell.is-ios-setup-screen .afro-eights-menu-header,
.afro-eights-shell.is-ios-lobby-screen .afro-eights-menu-header {
  position: relative;
  z-index: 3;
  padding: 10px 18px;
  color: var(--ae-ios-gold-deep);
}
.afro-eights-shell.is-ios-home .afro-eights-menu-brand span,
.afro-eights-shell.is-ios-setup-screen .afro-eights-menu-brand span,
.afro-eights-shell.is-ios-lobby-screen .afro-eights-menu-brand span {
  display: none;
}
.afro-eights-shell.is-ios-home .afro-eights-menu-header .afro-eights-btn,
.afro-eights-shell.is-ios-setup-screen .afro-eights-menu-header .afro-eights-btn,
.afro-eights-shell.is-ios-lobby-screen .afro-eights-menu-header .afro-eights-btn {
  border-radius: 6px;
  border: 2px solid rgba(91,91,91,.22);
  background: rgba(255,255,255,.64);
  color: var(--ae-ios-gold-deep);
  box-shadow: 0 2px 3px rgba(0,0,0,.12);
  font-size: clamp(14px, 1.7vw, 20px);
}
.afro-eights-ios-home,
.afro-eights-ios-setup,
.afro-eights-ios-lobby {
  position: relative;
  z-index: 2;
}
.afro-eights-ios-home {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100% - 78px);
  padding: clamp(8px, 1.7vw, 18px) clamp(18px, 2.5vw, 34px) clamp(18px, 3vw, 32px);
  gap: clamp(12px, 2vw, 24px);
}
.afro-eights-ios-reward-strip {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(240px, 420px) minmax(120px, 1fr);
  align-items: center;
  gap: 14px;
  color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-token-box,
.afro-eights-ios-score-box,
.afro-eights-ios-daily-title {
  border: 2px solid rgba(120,120,120,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.72);
  min-height: 58px;
  box-shadow: 0 2px 3px rgba(0,0,0,.10);
}
.afro-eights-ios-token-box,
.afro-eights-ios-score-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 18px;
  justify-self: stretch;
}
.afro-eights-ios-token-box img,
.afro-eights-ios-menu-small-icon img,
.afro-eights-ios-mode-art img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.afro-eights-ios-token-box span { width: 38px; height: 38px; display: inline-grid; place-items: center; overflow: hidden; }
.afro-eights-ios-token-box strong,
.afro-eights-ios-score-box strong { font-size: clamp(28px, 4vw, 44px); line-height: 1; }
.afro-eights-ios-score-box { flex-direction: column; gap: 0; }
.afro-eights-ios-score-box span { font-size: clamp(18px, 2.4vw, 30px); }
.afro-eights-ios-daily-title {
  display: grid;
  place-items: center;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
}
.afro-eights-ios-home-board {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(300px, 460px) minmax(150px, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(16px, 3vw, 42px);
  min-height: 0;
}
.afro-eights-ios-mask-column img {
  width: clamp(88px, 12vw, 170px);
  height: auto;
  opacity: .92;
}
.afro-eights-ios-menu-panel {
  position: relative;
  display: grid;
  width: min(100%, 460px);
  gap: 8px;
  padding: 8px 0;
}
.afro-eights-ios-signed-in {
  justify-self: center;
  display: grid;
  grid-template-columns: auto;
  place-items: center;
  gap: 1px;
  margin-bottom: 6px;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 7px 24px rgba(0,0,0,.10);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.afro-eights-ios-signed-in span { color: #777; font-size: 15px; font-weight: 800; }
.afro-eights-ios-signed-in strong { color: #151515; font-size: 21px; }
.afro-eights-ios-mode-button,
.afro-eights-ios-menu-row,
.afro-eights-ios-play-button {
  appearance: none;
  width: 100%;
  min-height: 58px;
  border: 2px solid rgba(120,120,120,.22);
  border-radius: 7px;
  background: rgba(255,255,255,.76);
  color: var(--ae-ios-gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}
.afro-eights-ios-mode-button:hover,
.afro-eights-ios-menu-row:hover,
.afro-eights-ios-play-button:hover,
.afro-eights-ios-mode-button:focus-visible,
.afro-eights-ios-menu-row:focus-visible,
.afro-eights-ios-play-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.afro-eights-ios-mode-button[disabled],
.afro-eights-ios-menu-row[disabled],
.afro-eights-ios-play-button[disabled] {
  opacity: .44;
  cursor: not-allowed;
  filter: grayscale(.45);
}
.afro-eights-ios-mode-button.is-primary {
  min-height: 66px;
}
.afro-eights-ios-mode-number {
  font-size: 24px;
  color: rgba(174,145,71,.68);
  min-width: 40px;
  text-align: center;
}
.afro-eights-ios-mode-button strong,
.afro-eights-ios-menu-row strong,
.afro-eights-ios-play-button strong {
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1;
  font-weight: 900;
}
.afro-eights-ios-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.afro-eights-ios-mode-row .afro-eights-ios-mode-button strong { font-size: clamp(18px, 2.3vw, 28px); }
.afro-eights-ios-mode-art { width: 44px; height: 38px; display: inline-grid; place-items: center; overflow: hidden; }
.afro-eights-ios-menu-row {
  justify-content: flex-start;
  padding: 0 22px;
}
.afro-eights-ios-menu-small-icon {
  width: 46px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}
.afro-eights-ios-menu-row strong { flex: 1; text-align: center; }
.afro-eights-ios-play-button {
  justify-self: end;
  width: min(190px, 54%);
  min-height: 76px;
  margin-top: 4px;
}
.afro-eights-ios-play-button > span {
  width: 48px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}
.afro-eights-ios-profile-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  width: clamp(150px, 17vw, 210px);
  padding: 8px 8px 18px;
  border: 2px solid rgba(120,120,120,.22);
  border-radius: 7px;
  background: rgba(255,255,255,.72);
  color: var(--ae-ios-gold-deep);
  box-shadow: 0 2px 4px rgba(0,0,0,.14);
}
.afro-eights-ios-profile-photo {
  width: 100%;
  aspect-ratio: .86;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(60,82,112,.18);
}
.afro-eights-ios-profile-photo img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}
.afro-eights-ios-profile-card strong { font-size: clamp(18px, 2.3vw, 30px); line-height: 1; }
.afro-eights-ios-profile-card span { font-size: clamp(16px, 2vw, 24px); line-height: 1; }

/* Setup and lobby screens, using the iOS slider/menu language. */
.afro-eights-ios-setup {
  min-height: calc(100% - 80px);
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 42px);
}
.afro-eights-ios-setup-card,
.afro-eights-ios-lobby-controls {
  width: min(760px, 94%);
  color: var(--ae-ios-ink);
  background: rgba(216,190,154,.82) !important;
  border: 2px solid rgba(92,70,40,.26) !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.16) !important;
}
.afro-eights-ios-setup-card h2,
.afro-eights-ios-lobby-controls h2,
.afro-eights-ios-pause-card h3 {
  color: #252525;
  font-size: clamp(32px, 5vw, 58px);
  line-height: .9;
  text-align: center;
  margin: 0 0 12px;
}
.afro-eights-ios-setup-card .afro-eights-eyebrow,
.afro-eights-ios-lobby-controls .afro-eights-eyebrow {
  color: var(--ae-ios-gold-deep);
  text-align: center;
  letter-spacing: .08em;
}
.afro-eights-ios-name-field,
.afro-eights-ios-slider-field {
  display: grid;
  position: relative;
  gap: 8px;
  margin: 16px auto;
  max-width: 560px;
  color: #252525;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
}
.afro-eights-ios-name-field input,
.afro-eights-ios-setup-card input[type="text"],
.afro-eights-ios-lobby input[type="text"] {
  width: 100%;
  min-height: 44px;
  border-radius: 6px;
  border: 2px solid rgba(110,110,110,.25);
  background: rgba(255,255,255,.84);
  color: #333;
  padding: 8px 12px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
}
.afro-eights-ios-ruler {
  display: flex;
  justify-content: space-between;
  color: var(--ae-ios-gold-deep);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: .9;
  padding: 0 7px;
}
.afro-eights-ios-ruler span { opacity: .78; }
.afro-eights-ios-ruler .is-selected { opacity: 1; transform: translateY(-2px) scale(1.08); }
.afro-eights-ios-slider-field input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(92,70,40,.22);
  background: rgba(133,116,78,.54);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.14);
}
.afro-eights-ios-slider-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6dfa8, #bc9848);
  border: 2px solid rgba(144,112,41,.45);
  box-shadow: 0 4px 8px rgba(0,0,0,.18);
}
.afro-eights-ios-slider-field input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6dfa8, #bc9848);
  border: 2px solid rgba(144,112,41,.45);
  box-shadow: 0 4px 8px rgba(0,0,0,.18);
}
.afro-eights-ios-slider-field output {
  position: absolute;
  right: -4px;
  bottom: -32px;
  min-width: 34px;
  text-align: center;
  color: var(--ae-ios-gold-deep);
  font-size: 27px;
}
.afro-eights-ios-check { color: #273f75; justify-content: center; font-size: 22px; }
.afro-eights-ios-check input { width: 25px; height: 25px; }
.afro-eights-ios-player-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 220px;
  overflow: auto;
  margin: 20px auto 8px;
}
.afro-eights-ios-player-names label { color: #252525; font-size: 17px; }
.afro-eights-ios-setup-actions,
.afro-eights-ios-lobby-actions { justify-content: center !important; }
.afro-eights-ios-play-cta {
  min-width: 150px;
  border-radius: 7px !important;
  color: #252525 !important;
}
.afro-eights-ios-play-cta span { width: 34px; height: 36px; display: inline-grid; place-items: center; overflow: hidden; }
.afro-eights-ios-play-cta img { width: 100%; height: 100%; object-fit: contain; }
.afro-eights-ios-lobby {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 560px);
  align-items: center;
  gap: clamp(18px, 4vw, 64px);
  min-height: calc(100% - 78px);
  padding: clamp(12px, 2vw, 30px);
}
.afro-eights-ios-lobby-left {
  display: grid;
  gap: 14px;
  align-content: start;
}
.afro-eights-ios-lobby-nav .afro-eights-btn {
  border-radius: 6px;
  color: var(--ae-ios-gold-deep);
  background: rgba(255,255,255,.78);
}
.afro-eights-ios-tabs {
  display: flex;
  gap: 18px;
}
.afro-eights-ios-tabs button {
  min-width: 130px;
  border: 2px solid rgba(120,120,120,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.65);
  color: var(--ae-ios-gold-deep);
  font-size: clamp(22px, 3vw, 36px);
  padding: 5px 16px;
}
.afro-eights-ios-tabs button.is-active { background: rgba(255,255,255,.88); }
.afro-eights-ios-lobby-board {
  min-height: clamp(240px, 45vh, 520px);
  border: 2px solid rgba(128,128,128,.16);
  border-radius: 7px;
  background: rgba(255,255,255,.45);
  display: grid;
  place-content: center;
  gap: 8px;
  color: rgba(70,70,70,.7);
  text-align: center;
}
.afro-eights-ios-lobby-board strong {
  font-size: clamp(40px, 6vw, 70px);
  line-height: .9;
  color: #252525;
}
.afro-eights-ios-lobby-board span,
.afro-eights-ios-lobby-board em {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
}
.afro-eights-ios-lobby-checks {
  display: grid;
  gap: 8px;
  justify-content: center;
  color: #273f75;
  font-size: 21px;
}
.afro-eights-ios-lobby-checks input { width: 24px; height: 24px; }

/* Landscape gameplay skin: keep iOS table composition in wide layouts. */
.afro-eights-board.afro-eights-gameplay {
  color: #2e2e2e;
  background-image: linear-gradient(180deg, rgba(255,255,255,.50), rgba(230,196,120,.35)), var(--ae-bg-image);
  background-color: #dbc072;
  background-size: cover;
  background-position: center;
  grid-template-rows: auto minmax(54px, 78px) minmax(220px, 1fr) minmax(160px, 240px);
  gap: 8px;
  padding: clamp(8px, 1.1vw, 16px) clamp(12px, 1.8vw, 24px);
}
.afro-eights-board.afro-eights-gameplay::before {
  content: "Afro 8ights";
  z-index: 0;
  display: grid;
  place-items: start center;
  padding-top: 42px;
  color: rgba(80,80,80,.09);
  font-size: clamp(46px, 8vw, 102px);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.18), transparent 42%);
}
.afro-eights-board.afro-eights-gameplay > * { position: relative; z-index: 1; }
.afro-eights-board.afro-eights-gameplay .afro-eights-topbar {
  grid-template-columns: minmax(100px, 180px) 1fr auto;
  min-height: 44px;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-brand img { max-width: 160px; opacity: .55; }
.afro-eights-board.afro-eights-gameplay .afro-eights-status { gap: 5px; }
.afro-eights-board.afro-eights-gameplay .afro-eights-pill {
  min-height: 26px;
  padding: 4px 8px;
  background: rgba(255,255,255,.48);
  color: #5f512c;
  border-color: rgba(98,80,39,.16);
  font-size: 11px;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-pill strong { color: #3a3020; }
.afro-eights-board.afro-eights-gameplay .afro-eights-actions .afro-eights-btn {
  padding: 7px 10px;
  border-radius: 7px;
  color: #252525;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(120,120,120,.25);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.afro-eights-board.afro-eights-gameplay .afro-eights-top-draw-btn { display: none; }
.afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash {
  position: absolute;
  left: 5.8%;
  top: 42%;
  z-index: 6;
  font-size: clamp(26px, 4.5vw, 54px);
  color: #a8861b;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(255,255,255,.20);
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents {
  align-items: start;
  grid-template-columns: repeat(var(--ae-opponents, 1), minmax(100px, 1fr));
  gap: clamp(10px, 3vw, 42px);
  padding: 0 clamp(40px, 7vw, 120px);
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-panel {
  min-height: 78px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-avatar {
  display: grid;
  width: clamp(46px, 6vw, 72px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
}
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-head {
  position: absolute;
  left: 50%;
  top: 62px;
  transform: translateX(-50%);
  justify-content: center;
  margin: 0;
  opacity: .0;
  pointer-events: none;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-mini-hand {
  position: absolute;
  top: -68px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 64px;
  min-width: 160px;
  justify-content: center;
  opacity: .95;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-card-back-mini {
  width: 39px;
  height: 58px;
  border-radius: 5px;
  margin-left: -22px;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-card-count-badge { display: none; }
.afro-eights-board.afro-eights-gameplay .afro-eights-table,
.afro-eights-board.afro-eights-gameplay .afro-eights-table.is-clean-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  min-height: 0;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-table-slot {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  padding: 0;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-table-slot:not(.afro-eights-table-center-slot):first-child,
.afro-eights-board.afro-eights-gameplay .afro-eights-table-slot:last-child,
.afro-eights-board.afro-eights-gameplay .afro-eights-table-label,
.afro-eights-board.afro-eights-gameplay .afro-eights-message,
.afro-eights-board.afro-eights-gameplay .afro-eights-log {
  display: none;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-pile-row {
  position: relative;
  width: min(470px, 70vw);
  height: clamp(190px, 31vh, 260px);
  display: grid;
  place-items: center;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-center-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(190px, 24vw, 270px);
  height: clamp(190px, 24vw, 270px);
}
.afro-eights-board.afro-eights-gameplay .afro-eights-direction-wheel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .66;
  z-index: 0;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-orbit-suit {
  position: absolute;
  width: clamp(26px, 3.4vw, 44px);
  height: clamp(26px, 3.4vw, 44px);
  object-fit: contain;
  opacity: .74;
  z-index: 1;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-orbit-suit.is-spades { right: -8%; top: 48%; transform: translateY(-50%); }
.afro-eights-board.afro-eights-gameplay .afro-eights-orbit-suit.is-clubs { top: -9%; left: 50%; transform: translateX(-50%); }
.afro-eights-board.afro-eights-gameplay .afro-eights-orbit-suit.is-hearts { bottom: -9%; left: 50%; transform: translateX(-50%); }
.afro-eights-board.afro-eights-gameplay .afro-eights-orbit-suit.is-diamonds { left: -8%; top: 48%; transform: translateY(-50%); }
.afro-eights-board.afro-eights-gameplay .afro-eights-discard-drop {
  position: relative;
  z-index: 3;
  min-width: calc(var(--ae-card-w, 98px) + 12px);
  min-height: calc(var(--ae-card-h, 142px) + 12px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-drop-hint { display: none; }
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack {
  position: absolute;
  right: max(-150px, -19vw);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--ae-card-w, 98px) + 20px);
  height: calc(var(--ae-card-h, 142px) + 20px);
  background: rgba(255,255,255,.46);
  border: 2px solid rgba(80,80,80,.24);
  border-radius: 8px;
  padding: 9px;
  box-shadow: 0 4px 6px rgba(0,0,0,.16);
}
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack .afro-eights-card.is-back::before,
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack .afro-eights-card.is-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  border: inherit;
  transform: translate(-7px, 4px);
  z-index: -1;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack .afro-eights-card.is-back::after { transform: translate(-13px, 8px); opacity: .82; }
.afro-eights-board.afro-eights-gameplay .afro-eights-deck-count {
  position: absolute;
  right: -11px;
  bottom: -10px;
  width: 31px;
  height: 31px;
  min-width: 31px;
  font-size: 17px;
  color: #fff7df;
  background: #a98937;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-human-panel {
  align-self: end;
  min-height: 0;
  height: 100%;
  background: rgba(95,145,213,.88);
  border: 2px solid rgba(33,71,124,.32);
  border-radius: 4px;
  padding: 8px clamp(28px, 9vw, 160px);
  box-shadow: 0 3px 7px rgba(0,0,0,.18);
}
.afro-eights-board.afro-eights-gameplay .afro-eights-human-panel .afro-eights-player-head {
  position: absolute;
  left: 18px;
  top: -32px;
  color: #67572b;
  margin: 0;
  opacity: .82;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-human-panel .afro-eights-score { display: none; }
.afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards {
  justify-content: space-between;
  gap: clamp(16px, 4vw, 72px);
  min-height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards::-webkit-scrollbar { display: none; }
.afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards .afro-eights-card {
  --ae-card-w: clamp(80px, 8.4vw, 112px);
  --ae-card-h: calc(var(--ae-card-w) * 1.455);
}
.afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock {
  position: absolute;
  right: clamp(12px, 2vw, 26px);
  bottom: clamp(56px, 8vw, 92px);
  z-index: 8;
  width: clamp(58px, 6.4vw, 82px);
  min-height: clamp(58px, 6.4vw, 82px);
  border-radius: 7px;
  border: 2px solid rgba(120,120,120,.30);
  background: rgba(255,255,255,.76);
  color: #a68936;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  padding: 6px;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock img {
  max-width: 74%;
  max-height: 74%;
  object-fit: contain;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock span {
  position: absolute;
  inset: auto 2px 3px;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-card {
  border-radius: 7px;
  box-shadow: 0 3px 7px rgba(0,0,0,.22);
}

/* Pause menu parity */
.afro-eights-ios-pause-modal {
  background: rgba(229,204,148,.42);
  backdrop-filter: blur(1px);
}
.afro-eights-ios-pause-card {
  position: relative;
  width: min(520px, 92vw);
  padding: 26px 34px 18px;
  color: #252525;
  background: rgba(213,187,158,.92) !important;
  border: 2px solid rgba(87,64,39,.32) !important;
  border-radius: 6px !important;
}
.afro-eights-ios-pause-leaf {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: .84;
}
.afro-eights-ios-pause-options {
  display: grid;
  gap: 10px;
  width: min(340px, 100%);
  margin: 10px auto 22px;
}
.afro-eights-ios-pause-options label {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 18px;
  font-size: clamp(24px, 3.3vw, 38px);
  line-height: 1;
  color: #252525;
}
.afro-eights-ios-pause-options input[type="checkbox"] {
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 5px;
  border: 2px solid rgba(120,120,120,.32);
  background: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
}
.afro-eights-ios-pause-options input[type="checkbox"]:checked::after {
  content: "✓";
  display: grid;
  place-items: center;
  height: 100%;
  color: #252525;
  font-size: 39px;
  line-height: .8;
}
.afro-eights-ios-pause-actions {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.afro-eights-ios-pause-actions .afro-eights-btn {
  min-width: 156px;
  border-radius: 5px !important;
  font-size: clamp(18px, 2.6vw, 28px);
  color: #252525 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.18) !important;
}
.afro-eights-ios-end-game { background: #f06b63 !important; }
.afro-eights-ios-resume-game { background: #69d96a !important; }

/* Portrait adaptation: same assets, stacked UI instead of landscape-only iOS positioning. */
@media (max-width: 760px), (orientation: portrait) {
  .afro-eights-root {
    border-radius: 0;
    max-width: none;
  }
  .afro-eights-ios-reward-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .afro-eights-ios-daily-title { order: -1; min-height: 48px; font-size: 32px; }
  .afro-eights-ios-token-box,
  .afro-eights-ios-score-box { min-height: 44px; }
  .afro-eights-ios-home-board {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .afro-eights-ios-mask-column { display: none; }
  .afro-eights-ios-menu-panel { width: min(100%, 420px); }
  .afro-eights-ios-profile-card {
    width: min(100%, 420px);
    grid-template-columns: 72px 1fr;
    align-items: center;
    justify-items: start;
    padding: 8px 14px;
  }
  .afro-eights-ios-profile-photo { width: 72px; aspect-ratio: 1; grid-row: span 2; border-radius: 8px; }
  .afro-eights-ios-profile-card strong,
  .afro-eights-ios-profile-card span { font-size: 22px; }
  .afro-eights-ios-mode-button strong,
  .afro-eights-ios-menu-row strong,
  .afro-eights-ios-play-button strong { font-size: 24px; }
  .afro-eights-ios-mode-row { grid-template-columns: 1fr; }
  .afro-eights-ios-play-button { justify-self: stretch; width: 100%; }
  .afro-eights-ios-setup { place-items: start center; padding: 14px; }
  .afro-eights-ios-setup-card,
  .afro-eights-ios-lobby-controls { width: 100%; }
  .afro-eights-ios-player-names { grid-template-columns: 1fr; max-height: 180px; }
  .afro-eights-ios-lobby { grid-template-columns: 1fr; align-items: start; padding: 12px; }
  .afro-eights-ios-lobby-board { min-height: 180px; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay,
  .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto auto minmax(210px, 1fr) minmax(145px, 220px) !important;
    padding: 8px !important;
  }
  .afro-eights-board.afro-eights-gameplay::before { font-size: 42px; padding-top: 74px; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-topbar {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-status,
  .afro-eights-board.afro-eights-gameplay .afro-eights-brand { display: none !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-actions { justify-content: space-between !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    text-align: center !important;
    font-size: 28px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-opponents {
    padding: 0 !important;
    gap: 6px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-ios-avatar {
    width: 42px !important;
    border-radius: 12px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-mini-hand {
    display: none !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-pile-row {
    width: 100% !important;
    height: 200px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-center-ring {
    width: 180px !important;
    height: 180px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack {
    right: 4px !important;
    width: calc(var(--ae-card-w, 82px) + 10px) !important;
    height: calc(var(--ae-card-h, 116px) + 12px) !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel {
    padding: 8px 10px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel .afro-eights-player-head {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards {
    justify-content: flex-start !important;
    gap: 10px !important;
    padding-right: 78px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock {
    right: 10px !important;
    bottom: 12px !important;
    width: 62px !important;
    min-height: 62px !important;
  }
}

/* v0.15.1 final iOS-parity overrides for the current asset-driven markup. */
@font-face {
  font-family: "AfroEightsEcliptic";
  src: local("Ecliptic"), local("Ecliptic BRK"), url("../fonts/ecliptic.ttf") format("truetype");
  font-display: swap;
}
.afro-eights-root {
  --ae-ios-font: "AfroEightsEcliptic", "Comic Sans MS", "Trebuchet MS", cursive;
}

/* Home/menu: recreate the iOS daily reward / centre buttons / profile shell. */
.afro-eights-shell.is-ios-home {
  min-height: 100%;
  background-color: #f7f6f2;
  background-image: var(--ae-bg-image);
  background-position: center;
  background-size: cover;
}
.afro-eights-shell.is-ios-home .afro-eights-menu-header { display: none; }
.afro-eights-ios-home {
  width: 100%;
  min-height: calc(100% - 4px);
}
.afro-eights-ios-status-card,
.afro-eights-ios-profile-card,
.afro-eights-ios-menu-grid .afro-eights-ios-menu-button,
.afro-eights-ios-home-center .afro-eights-ios-play-button,
.afro-eights-ios-wide-button,
.afro-eights-ios-profile-link {
  font-family: var(--ae-ios-font) !important;
}
.afro-eights-ios-status-card strong,
.afro-eights-ios-profile-card strong,
.afro-eights-ios-menu-button > span,
.afro-eights-ios-play-button strong {
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.afro-eights-ios-menu-button:active,
.afro-eights-ios-play-button:active,
.afro-eights-ios-profile-link:active {
  transform: translateY(1px) scale(.99);
}
.afro-eights-ios-menu-button.is-disabled { opacity: .52; filter: grayscale(.35); }

/* Unity-style setup/lobby controls used by the new renderers. */
.afro-eights-shell.is-ios-setup-screen,
.afro-eights-shell.is-ios-lobby-screen {
  background-color: #f7f6f2;
  background-image: var(--ae-bg-image);
  background-position: center;
  background-size: cover;
}
.afro-eights-ios-setup-card,
.afro-eights-ios-lobby-controls {
  width: min(760px, 100%);
  margin-inline: auto;
  padding: clamp(18px, 3vw, 32px) !important;
}
.afro-eights-ios-slider-field {
  display: grid;
  gap: 8px;
  color: var(--ae-ios-gold-deep);
  font-family: var(--ae-ios-font);
  font-size: clamp(23px, 4vw, 42px);
  line-height: 1.05;
}
.afro-eights-ios-ruler {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
  padding-inline: 8px;
  color: var(--ae-ios-gold-deep);
  font-family: var(--ae-ios-font);
  font-size: clamp(20px, 3vw, 35px);
}
.afro-eights-ios-ruler .is-selected {
  transform: translateY(-1px) scale(1.12);
  color: #c7a853;
  text-shadow: 0 1px 0 #fff, 0 0 8px rgba(177,151,93,.35);
}
.afro-eights-ios-slider-field input[type="range"],
.afro-eights-ios-lobby-controls input[type="range"] {
  width: 100%;
  min-height: 20px;
  accent-color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-slider-field output {
  justify-self: start;
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  color: var(--ae-ios-gold-deep);
  border: 1px solid rgba(151,133,95,.26);
}
.afro-eights-ios-name-field input,
.afro-eights-local-name-field input,
.is-ios-lobby-fields input {
  font-family: system-ui, sans-serif !important;
}
.afro-eights-ios-play-cta span img { width: 34px; height: 34px; object-fit: contain; }
.afro-eights-ios-play-cta { display: inline-flex !important; gap: 8px; align-items: center; justify-content: center; }

/* Multiplayer lobby: match the iOS Connecting screen while keeping web inputs usable. */
.afro-eights-ios-lobby {
  width: min(1280px, 100%);
  min-height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(330px, 1.08fr) minmax(300px, .72fr);
  gap: clamp(18px, 4vw, 70px);
  align-items: center;
  padding: clamp(14px, 2.5vw, 34px);
  color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-lobby-left {
  min-height: min(62vh, 520px);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
}
.afro-eights-ios-lobby-nav { align-self: start; }
.afro-eights-ios-lobby-nav .afro-eights-btn {
  min-height: 48px;
  border-radius: 7px;
  color: var(--ae-ios-gold-deep) !important;
  background: rgba(255,255,255,.84) !important;
}
.afro-eights-ios-lobby-board {
  display: grid;
  place-content: center;
  gap: 14px;
  min-height: 100%;
  padding: 22px;
  text-align: center;
  border: 2px solid rgba(151,133,95,.16);
  border-radius: 7px;
  background: rgba(238,238,238,.78);
  color: rgba(79,66,39,.72);
}
.afro-eights-ios-lobby-board strong,
.afro-eights-ios-lobby-controls h2 {
  color: #2d2d2d !important;
  font-family: var(--ae-ios-font);
  font-size: clamp(38px, 6vw, 66px);
  line-height: .95;
}
.afro-eights-ios-lobby-board span,
.afro-eights-ios-lobby-board em {
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.afro-eights-ios-lobby-checks {
  display: grid;
  gap: 10px;
  justify-items: start;
  color: #4f6aa5;
  font-size: clamp(20px, 2.8vw, 31px);
}
.afro-eights-ios-lobby-checks input[type="checkbox"] { width: 28px; height: 28px; vertical-align: middle; accent-color: #6f8ed2; }
.is-ios-lobby-fields {
  grid-template-columns: 1fr;
}
.afro-eights-ios-lobby-actions { justify-content: end; }

/* iOS pause modal with red/green Unity-style actions. */
.afro-eights-ios-pause-modal {
  background: rgba(210,185,141,.42) !important;
  backdrop-filter: blur(1px);
}
.afro-eights-ios-pause-card {
  position: relative;
  width: min(520px, calc(100% - 28px));
  padding: clamp(20px, 4vw, 32px) !important;
  border-radius: 5px !important;
  background: rgba(211, 190, 161, .96) !important;
  border: 2px solid rgba(130, 104, 62, .45) !important;
  color: #2a2928 !important;
  text-align: center;
  box-shadow: 0 18px 36px rgba(81,58,22,.35) !important;
}
.afro-eights-ios-pause-card h3 {
  margin: 0 0 14px;
  color: #2a2928 !important;
  font-family: var(--ae-ios-font);
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1;
}
.afro-eights-ios-pause-leaf {
  position: absolute;
  left: 15px;
  top: 14px;
  width: 54px;
  height: 44px;
  object-fit: contain;
  opacity: .9;
}
.afro-eights-ios-pause-options {
  display: grid;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto 18px;
}
.afro-eights-ios-pause-options label {
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  gap: 16px;
  text-align: right;
  font-family: var(--ae-ios-font);
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1;
}
.afro-eights-ios-pause-options input[type="checkbox"] {
  width: 32px;
  height: 32px;
  accent-color: #4b4b4b;
}
.afro-eights-ios-pause-actions {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
}
.afro-eights-ios-pause-actions .afro-eights-btn {
  min-width: 150px;
  min-height: 50px;
  border-radius: 6px;
  font-family: var(--ae-ios-font);
  font-size: clamp(18px, 3vw, 26px);
}
.afro-eights-ios-end-game { background: #f36f66 !important; color: #2b1310 !important; border-color: #bd4d47 !important; }
.afro-eights-ios-resume-game { background: #64d96c !important; color: #0e2b12 !important; border-color: #38a942 !important; }

/* Current gameplay markup: avatar chips and asset-backed draw/end turn buttons. */
.afro-eights-ios-avatar {
  display: none;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.48);
  background: rgba(255,255,255,.42);
  box-shadow: 0 5px 10px rgba(0,0,0,.14);
}
.afro-eights-ios-avatar img { width: 100%; height: 100%; object-fit: cover; }
.afro-eights-draw-action-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.afro-eights-draw-action-btn img { width: 28px; height: 28px; object-fit: contain; }
.afro-eights-ios-draw-tile::before { display: none !important; }
.afro-eights-ios-draw-tile img {
  width: 46px;
  height: 42px;
  object-fit: contain;
  align-self: center;
  justify-self: center;
}
.afro-eights-ios-draw-tile.afro-eights-unity-action-dock {
  place-items: center;
  grid-template-rows: 1fr auto;
}

@media (orientation: landscape) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay::after {
    content: "";
    position: absolute;
    top: 5%;
    left: 50%;
    width: min(360px, 34vw);
    height: min(125px, 15vh);
    transform: translateX(-50%);
    background: url("../img/logo.png") center/contain no-repeat;
    opacity: .08;
    pointer-events: none;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-panel {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 8px;
    align-items: center;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-ios-avatar { display: inline-block; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-head { margin: 0; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-score { display: none; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-draw-action-btn span { display: none; }
}

@media (orientation: portrait), (max-width: 840px) {
  .afro-eights-ios-lobby {
    grid-template-columns: 1fr;
    align-items: start;
    overflow: auto;
  }
  .afro-eights-ios-lobby-left { min-height: 260px; }
  .afro-eights-ios-lobby-board strong,
  .afro-eights-ios-lobby-controls h2 { font-size: clamp(34px, 12vw, 52px); }
  .afro-eights-ios-setup-card,
  .afro-eights-ios-lobby-controls { width: 100%; }
  .afro-eights-ios-pause-actions { flex-direction: column; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-ios-avatar { display: inline-block; width: 38px; height: 38px; border-radius: 12px; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-player-panel {
    grid-template-columns: 44px 1fr;
  }
}

/* v0.16.0 iOS parity completion: current asset-driven markup, optional Ecliptic font hook, lobby/pause skins, and portrait-safe table reflow. */
@font-face {
  font-family: "AfroEightsEcliptic";
  src: local("Ecliptic"), local("ecliptic"), url("../fonts/ecliptic.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.afro-eights-root {
  --ae-ios-font: "AfroEightsEcliptic", "Ecliptic", "Marker Felt", "Comic Sans MS", "Trebuchet MS", cursive;
  --ae-ios-gold: #b1975d;
  --ae-ios-gold-deep: #8f742e;
  --ae-ios-gold-soft: rgba(177,151,93,.22);
  --ae-ios-paper: rgba(246, 244, 238, .82);
  --ae-ios-panel-warm: rgba(222, 198, 158, .86);
  --ae-ios-blue: #6f9bdb;
}
.afro-eights-root,
.afro-eights-root button,
.afro-eights-root .afro-eights-btn,
.afro-eights-root .afro-eights-menu-header,
.afro-eights-root .afro-eights-panel-card,
.afro-eights-root .afro-eights-modal-card {
  font-family: var(--ae-ios-font) !important;
}
.afro-eights-root input,
.afro-eights-root select,
.afro-eights-root textarea,
.afro-eights-root small,
.afro-eights-root .afro-eights-muted,
.afro-eights-root .afro-eights-inline-notice,
.afro-eights-root .afro-eights-room-player span {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.afro-eights-root .afro-eights-card,
.afro-eights-root .afro-eights-card * {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.afro-eights-shell.is-ios-home,
.afro-eights-shell.is-ios-lobby-screen,
.afro-eights-shell.is-ios-setup-screen {
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.30) 44%, rgba(198,163,83,.25)),
    var(--ae-bg-image) center/cover no-repeat !important;
  color: #332817 !important;
}
.afro-eights-shell.is-ios-home .afro-eights-menu-header,
.afro-eights-shell.is-ios-lobby-screen .afro-eights-menu-header,
.afro-eights-shell.is-ios-setup-screen .afro-eights-menu-header {
  background: rgba(255,255,255,.52) !important;
  border-color: rgba(151,133,95,.20) !important;
  box-shadow: 0 4px 18px rgba(121,92,42,.08) !important;
}
.afro-eights-shell.is-ios-home .afro-eights-menu-brand img,
.afro-eights-shell.is-ios-lobby-screen .afro-eights-menu-brand img,
.afro-eights-shell.is-ios-setup-screen .afro-eights-menu-brand img {
  max-height: 44px !important;
  opacity: .62;
}
.afro-eights-shell.is-ios-home::before,
.afro-eights-shell.is-ios-lobby-screen::before,
.afro-eights-shell.is-ios-setup-screen::before {
  content: "Afro 8ights" !important;
  color: rgba(70,70,70,.09) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(56px, 10vw, 128px) !important;
  top: clamp(64px, 14vh, 145px) !important;
}

/* iOS-style home/dashboard shell */
.afro-eights-ios-home {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  min-height: min(700px, calc(100svh - 92px)) !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  grid-template-columns: 1fr !important;
  gap: clamp(12px, 2vw, 24px) !important;
  padding: clamp(10px, 2vw, 24px) !important;
}
.afro-eights-ios-reward-strip {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(120px, .28fr) minmax(190px, 1fr) minmax(120px, .28fr) !important;
  align-items: center !important;
  gap: clamp(10px, 2vw, 24px) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ae-ios-gold-deep) !important;
  padding: 0 !important;
}
.afro-eights-ios-token-box,
.afro-eights-ios-daily-title,
.afro-eights-ios-score-box {
  min-height: 58px;
  display: inline-grid;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(151,133,95,.30);
  border-radius: 7px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 5px 14px rgba(129,99,36,.10);
  color: var(--ae-ios-gold-deep) !important;
}
.afro-eights-ios-token-box { grid-template-columns: 44px auto; gap: 8px; justify-content: start; padding: 8px 16px; }
.afro-eights-ios-token-box img { width: 40px; height: 34px; object-fit: contain; }
.afro-eights-ios-token-box strong,
.afro-eights-ios-score-box strong { font-size: clamp(26px, 4vw, 42px); line-height: 1; }
.afro-eights-ios-daily-title { font-size: clamp(30px, 5vw, 58px); }
.afro-eights-ios-score-box { grid-template-rows: auto auto; padding: 7px 14px; }
.afro-eights-ios-score-box span { color: var(--ae-ios-gold-deep) !important; font-size: clamp(18px, 2.6vw, 30px); }
.afro-eights-ios-home-board {
  display: grid !important;
  grid-template-columns: minmax(140px, .32fr) minmax(330px, .76fr) minmax(190px, .34fr) !important;
  align-items: center !important;
  gap: clamp(16px, 3vw, 42px) !important;
}
.afro-eights-ios-mask-column {
  display: grid !important;
  place-items: center !important;
  min-height: 320px;
}
.afro-eights-ios-mask-column img {
  width: min(170px, 18vw) !important;
  height: auto !important;
  opacity: .94;
  filter: drop-shadow(0 12px 18px rgba(90,66,26,.18));
}
.afro-eights-ios-menu-panel {
  display: grid !important;
  gap: clamp(9px, 1.6vw, 15px) !important;
  align-content: center !important;
  padding: clamp(14px, 2vw, 22px) !important;
  border: 2px solid rgba(151,133,95,.28) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.66) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.64), 0 14px 28px rgba(121,92,42,.12) !important;
}
.afro-eights-ios-signed-in {
  justify-self: center;
  display: inline-grid;
  grid-template-columns: 42px auto;
  gap: 9px 12px;
  align-items: center;
  min-height: 58px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #352d24;
  box-shadow: 0 5px 18px rgba(82,64,31,.10);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}
.afro-eights-ios-signed-in::before {
  content: "W";
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #cfc8be;
  color: #fff;
  font: 700 20px/1 Inter, ui-sans-serif, system-ui, sans-serif;
}
.afro-eights-ios-signed-in span { font-size: 12px; color: rgba(58,50,42,.68); }
.afro-eights-ios-signed-in strong { font-size: 22px; line-height: 1; }
.afro-eights-ios-mode-button,
.afro-eights-ios-menu-row,
.afro-eights-ios-play-button,
.afro-eights-ios-profile-link,
.afro-eights-ios-wide-button {
  border: 2px solid rgba(151,133,95,.30) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(230,230,230,.82)) !important;
  color: var(--ae-ios-gold-deep) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 5px 12px rgba(130,98,36,.12) !important;
  text-decoration: none !important;
}
.afro-eights-ios-mode-button {
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 12px !important;
  padding: 8px 14px !important;
  font-size: clamp(22px, 3vw, 34px) !important;
}
.afro-eights-ios-mode-button.is-primary {
  grid-template-columns: 70px 1fr !important;
  min-height: 74px !important;
}
.afro-eights-ios-mode-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.afro-eights-ios-mode-number {
  width: 56px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-mode-art,
.afro-eights-ios-menu-small-icon,
.afro-eights-ios-play-button > span {
  display: grid;
  place-items: center;
}
.afro-eights-ios-mode-art img,
.afro-eights-ios-menu-small-icon img,
.afro-eights-ios-play-button img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.afro-eights-ios-menu-row {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 12px !important;
  padding: 7px 14px !important;
  font-size: clamp(22px, 2.8vw, 32px) !important;
}
.afro-eights-ios-play-button {
  justify-self: end;
  min-width: 116px !important;
  min-height: 82px !important;
  display: inline-grid !important;
  grid-template-rows: 50px auto !important;
  place-items: center !important;
  padding: 8px 14px !important;
}
.afro-eights-ios-profile-card {
  width: min(240px, 100%) !important;
  justify-self: end !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 10px !important;
  text-align: center !important;
  border: 2px solid rgba(151,133,95,.28) !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.72) !important;
}
.afro-eights-ios-profile-photo {
  width: min(190px, 18vw);
  aspect-ratio: 1 / 1.18;
  border: 2px solid rgba(151,133,95,.25);
  border-radius: 4px;
  background: rgba(226,226,226,.70);
  overflow: hidden;
}
.afro-eights-ios-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.afro-eights-ios-profile-card strong { color: var(--ae-ios-gold-deep); font-size: clamp(22px, 3vw, 32px); }
.afro-eights-ios-profile-card span { color: var(--ae-ios-gold-deep); font-size: clamp(20px, 2.7vw, 30px); }

/* Unity-style setup and lobby controls */
.afro-eights-ios-setup-card,
.afro-eights-ios-lobby-controls {
  background: rgba(226,206,174,.74) !important;
  border: 2px solid rgba(151,133,95,.35) !important;
  color: var(--ae-ios-gold-deep) !important;
}
.afro-eights-ios-slider-field,
.afro-eights-ios-name-field {
  display: grid !important;
  gap: 5px !important;
  color: var(--ae-ios-gold-deep) !important;
  font-size: clamp(22px, 3vw, 36px) !important;
}
.afro-eights-ios-slider-field input[type="range"] {
  width: 100%;
  height: 24px;
  accent-color: var(--ae-ios-gold-deep);
}
.afro-eights-ios-ruler {
  display: flex !important;
  justify-content: space-between !important;
  align-items: end !important;
  padding: 0 8px !important;
  color: var(--ae-ios-gold-deep) !important;
  font-size: clamp(22px, 3vw, 38px) !important;
}
.afro-eights-ios-ruler .is-selected {
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.8));
  transform: scale(1.08);
}
.afro-eights-ios-slider-field output {
  justify-self: start;
  min-width: 32px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.68);
  color: var(--ae-ios-gold-deep) !important;
}
.afro-eights-ios-setup-actions,
.afro-eights-ios-lobby-actions { justify-content: flex-end !important; }
.afro-eights-ios-play-cta img,
.afro-eights-ios-play-cta span img { width: 38px; height: 38px; object-fit: contain; }
.afro-eights-ios-lobby {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, .62fr) !important;
  gap: clamp(18px, 4vw, 58px) !important;
  align-items: center !important;
  padding: clamp(12px, 2.4vw, 30px) !important;
}
.afro-eights-ios-lobby-left {
  min-height: min(62vh, 520px) !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 14px !important;
}
.afro-eights-ios-lobby-nav { display: flex; justify-content: flex-start; }
.afro-eights-ios-tabs {
  display: flex !important;
  gap: 18px !important;
}
.afro-eights-ios-tabs button {
  min-width: 116px !important;
  min-height: 38px !important;
  border: 2px solid rgba(151,133,95,.28) !important;
  border-radius: 7px !important;
  background: rgba(235,235,235,.84) !important;
  color: var(--ae-ios-gold-deep) !important;
  font-size: clamp(22px, 3vw, 32px) !important;
}
.afro-eights-ios-tabs button.is-active { background: rgba(255,255,255,.86) !important; }
.afro-eights-ios-lobby-board {
  display: grid !important;
  place-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  min-height: min(54vh, 440px) !important;
  border: 2px solid rgba(151,133,95,.18) !important;
  border-radius: 7px !important;
  background: rgba(238,238,238,.72) !important;
  color: rgba(70,58,34,.78) !important;
  padding: 24px !important;
}
.afro-eights-ios-lobby-board strong {
  color: #2a2a2a;
  font-size: clamp(38px, 6vw, 70px);
  line-height: 1;
}
.afro-eights-ios-lobby-board span,
.afro-eights-ios-lobby-board em {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 15px;
}
.afro-eights-ios-lobby-controls h2 {
  color: #2a2a2a !important;
  font-size: clamp(34px, 5vw, 58px) !important;
}
.afro-eights-form-grid.is-ios-lobby-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.afro-eights-ios-lobby-checks {
  display: grid;
  gap: 7px;
  justify-items: end;
  color: #315f9a;
  font-size: clamp(18px, 2.4vw, 26px);
}
.afro-eights-ios-lobby-checks input,
.afro-eights-ios-check input { width: 26px; height: 26px; accent-color: var(--ae-ios-gold-deep); }

/* Pause modal rebuilt from the iOS screenshot language. */
.afro-eights-ios-pause-modal,
.afro-eights-pause-modal {
  background: rgba(199, 166, 98, .44) !important;
  backdrop-filter: blur(2px);
}
.afro-eights-ios-pause-card,
.afro-eights-pause-card {
  position: relative;
  width: min(540px, calc(100% - 28px)) !important;
  padding: clamp(18px, 3vw, 28px) !important;
  border-radius: 5px !important;
  background: rgba(216, 194, 164, .96) !important;
  border: 2px solid rgba(130, 104, 62, .46) !important;
  color: #282726 !important;
  text-align: center !important;
  box-shadow: 0 18px 36px rgba(82,58,22,.35) !important;
}
.afro-eights-ios-pause-card h3,
.afro-eights-pause-card h3 {
  margin: 0 0 12px !important;
  color: #282726 !important;
  font-size: clamp(38px, 7vw, 66px) !important;
  line-height: 1 !important;
}
.afro-eights-ios-pause-leaf,
.afro-eights-pause-leaf {
  position: absolute !important;
  left: 16px !important;
  top: 14px !important;
  width: 54px !important;
  height: 46px !important;
  object-fit: contain !important;
  opacity: .88 !important;
}
.afro-eights-ios-pause-options,
.afro-eights-pause-options {
  width: min(380px, 100%) !important;
  display: grid !important;
  gap: 8px !important;
  margin: 8px auto 20px !important;
}
.afro-eights-ios-pause-options label,
.afro-eights-pause-options label {
  display: grid !important;
  grid-template-columns: 1fr 44px !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: right !important;
  color: #282726 !important;
  font-size: clamp(25px, 4.4vw, 42px) !important;
}
.afro-eights-ios-pause-options input,
.afro-eights-pause-options input { width: 34px !important; height: 34px !important; accent-color: #333 !important; }
.afro-eights-ios-pause-actions,
.afro-eights-pause-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(14px, 6vw, 120px) !important;
}
.afro-eights-ios-end-game,
.afro-eights-btn-danger {
  background: #ff7a70 !important;
  border-color: #bd554f !important;
  color: #24110e !important;
}
.afro-eights-ios-resume-game,
.afro-eights-btn-success {
  background: #68d96b !important;
  border-color: #3aa844 !important;
  color: #12300f !important;
}
.afro-eights-ios-end-game,
.afro-eights-ios-resume-game {
  min-height: 52px !important;
  font-size: clamp(20px, 3vw, 30px) !important;
}

/* Landscape table skin, close to iOS: top avatars, center direction ring, right deck, bottom blue hand. */
.afro-eights-board.afro-eights-gameplay {
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12) 45%, rgba(188,151,64,.18)),
    var(--ae-bg-image) center/cover no-repeat !important;
}
.afro-eights-ios-avatar {
  display: none;
}
.afro-eights-orbit-suit {
  position: absolute;
  z-index: 1;
  width: clamp(28px, 3.4vw, 46px);
  height: clamp(28px, 3.4vw, 46px);
  object-fit: contain;
  filter: sepia(.15) saturate(.85) drop-shadow(0 2px 1px rgba(255,255,255,.55));
  opacity: .90;
  pointer-events: none;
}
.afro-eights-orbit-suit.is-spades { right: 7%; top: 45%; }
.afro-eights-orbit-suit.is-clubs { top: 2%; left: 50%; transform: translateX(-50%); }
.afro-eights-orbit-suit.is-hearts { bottom: 2%; left: 50%; transform: translateX(-50%); }
.afro-eights-orbit-suit.is-diamonds { left: 7%; top: 45%; }
.afro-eights-center-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(175px, 25vw, 300px);
  height: clamp(175px, 25vw, 300px);
}
.afro-eights-direction-wheel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .55;
  filter: sepia(.40) saturate(.80) brightness(.88);
  pointer-events: none;
}
.afro-eights-center-ring .afro-eights-discard-drop {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.18) !important;
  border: 2px solid rgba(151,133,95,.26) !important;
  box-shadow: 0 8px 18px rgba(92,68,20,.16) !important;
}
.afro-eights-unity-action-dock {
  z-index: 40 !important;
}
.afro-eights-ios-draw-tile img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.afro-eights-ios-draw-tile:has(img)::before { content: none; }
@supports not selector(:has(*)) {
  .afro-eights-ios-draw-tile img + span { margin-top: -6px; }
}
@media (orientation: landscape) {
  .afro-eights-root.afro-eights-landscape-device.afro-eights-is-game .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(62px, .16fr) minmax(185px, 1fr) minmax(150px, .60fr) !important;
    gap: 5px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-top-draw-btn { display: none !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents {
    display: grid !important;
    grid-template-columns: repeat(var(--ae-opponents, 1), minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: clamp(12px, 2.4vw, 34px) !important;
    overflow: visible !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-panel {
    width: min(180px, 20vw) !important;
    min-height: 62px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #6a5528 !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-ios-avatar {
    display: grid !important;
    width: clamp(44px, 5vw, 62px) !important;
    height: clamp(44px, 5vw, 62px) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 5px 12px rgba(60,46,16,.18) !important;
    background: #0a93a7 !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-ios-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-player-head { display: none !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-opponents .afro-eights-mini-hand {
    min-height: 34px !important;
    justify-content: center !important;
    transform: translateY(-6px);
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table.is-clean-table {
    min-height: 185px !important;
    background: transparent !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-slot,
  .afro-eights-root.afro-eights-landscape-device .afro-eights-table-center-slot {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-pile-row {
    position: relative !important;
    width: 100% !important;
    min-height: clamp(180px, 31vh, 300px) !important;
    display: grid !important;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: clamp(20px, 6vw, 95px) !important;
    min-width: 0 !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-ios-deck-stack {
    grid-column: 3 !important;
    justify-self: center !important;
    margin-right: clamp(10px, 4vw, 70px) !important;
    filter: drop-shadow(0 10px 16px rgba(70,50,12,.22));
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-center-ring { grid-column: 2 !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel {
    background: rgba(87, 137, 210, .88) !important;
    border: 2px solid rgba(50, 94, 157, .50) !important;
    border-radius: 6px !important;
    color: #17253b !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-human-panel .afro-eights-player-head { display: none !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-hand-cards {
    align-items: center !important;
    justify-content: space-evenly !important;
    padding: 8px 96px 8px 18px !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-unity-action-dock {
    position: absolute !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }
}

/* Portrait keeps the iOS assets but reflows them instead of copying the landscape iOS layout. */
@media (orientation: portrait), (max-width: 860px) {
  .afro-eights-ios-home { min-height: auto !important; }
  .afro-eights-ios-reward-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .afro-eights-ios-home-board {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .afro-eights-ios-mask-column {
    min-height: auto !important;
    order: 2;
  }
  .afro-eights-ios-mask-column img { width: min(95px, 24vw) !important; }
  .afro-eights-ios-menu-panel { order: 1; }
  .afro-eights-ios-mode-row { grid-template-columns: 1fr !important; }
  .afro-eights-ios-mode-button,
  .afro-eights-ios-menu-row {
    min-height: 60px !important;
    font-size: clamp(22px, 7vw, 34px) !important;
  }
  .afro-eights-ios-profile-card {
    order: 3;
    width: 100% !important;
    grid-template-columns: 72px 1fr !important;
    text-align: left !important;
    justify-items: start !important;
  }
  .afro-eights-ios-profile-photo { width: 72px !important; grid-row: 1 / span 2; }
  .afro-eights-ios-lobby {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 10px !important;
  }
  .afro-eights-ios-lobby-left { min-height: auto !important; }
  .afro-eights-ios-lobby-board { min-height: 220px !important; }
  .afro-eights-form-grid.is-ios-lobby-fields { grid-template-columns: 1fr !important; }
  .afro-eights-ios-pause-actions,
  .afro-eights-pause-actions { grid-template-columns: 1fr !important; gap: 12px !important; }
  .afro-eights-ios-pause-leaf,
  .afro-eights-pause-leaf { width: 42px !important; height: 36px !important; }
}
@media (orientation: portrait) {
  .afro-eights-root.afro-eights-portrait-device .afro-eights-top-draw-btn { display: none !important; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-ios-avatar {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-opponents .afro-eights-ios-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-pile-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(72px, 92px) !important;
    grid-template-areas: "ring deck" !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 188px !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-center-ring {
    grid-area: ring !important;
    width: min(56vw, 205px) !important;
    height: min(56vw, 205px) !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-ios-deck-stack {
    grid-area: deck !important;
    justify-self: center !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-orbit-suit { width: 28px; height: 28px; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-unity-action-dock {
    position: absolute !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(78px, env(safe-area-inset-bottom)) !important;
    width: 62px !important;
    height: 62px !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-unity-action-dock img { width: 38px; height: 38px; }
}
@media (orientation: landscape) and (max-height: 470px) {
  .afro-eights-root.afro-eights-landscape-device .afro-eights-center-ring {
    width: clamp(138px, 22vw, 190px) !important;
    height: clamp(138px, 22vw, 190px) !important;
  }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-ios-deck-stack { margin-right: 6px !important; }
  .afro-eights-root.afro-eights-landscape-device .afro-eights-unity-action-dock img { display: none !important; }
}
.afro-eights-ios-draw-tile::before { content: none !important; }

/* v0.17 Player hub, rewards, friends and token shop parity layer */
.afro-eights-ios-daily-title,
.afro-eights-ios-score-box,
.afro-eights-ios-signed-in,
.afro-eights-ios-profile-card {
  border: 1px solid rgba(100, 78, 36, .22);
  cursor: pointer;
}
.afro-eights-ios-daily-title {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 54px;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  color: var(--afro-eights-gold, #a78b47);
  font-family: var(--afro-eights-display-font, inherit);
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(0, 0, 0, .06);
}
.afro-eights-ios-daily-title small,
.afro-eights-ios-token-box small,
.afro-eights-ios-score-box small {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  opacity: .75;
}
.afro-eights-ios-daily-title.is-ready {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(246, 224, 162, .9));
  box-shadow: 0 8px 20px rgba(167, 139, 71, .18), inset 0 -2px 0 rgba(138, 103, 28, .12);
}
.afro-eights-ios-daily-title:disabled {
  cursor: default;
  opacity: .88;
}
.afro-eights-ios-token-box,
.afro-eights-ios-score-box {
  min-width: 136px;
}
.afro-eights-ios-token-box {
  grid-template-columns: auto auto;
  align-content: center;
}
.afro-eights-ios-token-box small { grid-column: 1 / -1; }
.afro-eights-ios-score-box {
  background: rgba(255, 255, 255, .84);
}
.afro-eights-ios-signed-in {
  width: 100%;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  color: #222;
  text-align: center;
}
.afro-eights-ios-profile-card small {
  display: block;
  color: rgba(89, 67, 26, .78);
  font-size: 13px;
  font-weight: 800;
}
.afro-eights-hub-message {
  max-width: min(760px, 92vw);
  margin: 0 auto 12px;
}
.afro-eights-player-hub-screen {
  min-height: 0;
  padding: clamp(12px, 3vw, 30px);
  align-items: start;
}
.afro-eights-player-hub-card {
  width: min(980px, 96vw);
  margin: 0 auto;
  background: rgba(236, 214, 177, .84) !important;
  border-color: rgba(128, 99, 45, .28) !important;
  color: #2a2927;
}
.afro-eights-player-hub-card h2,
.afro-eights-player-hub-card h3,
.afro-eights-player-hub-card .afro-eights-eyebrow {
  font-family: var(--afro-eights-display-font, inherit);
  color: #2d2d2d;
}
.afro-eights-player-profile-hero {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}
.afro-eights-player-avatar {
  width: 104px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  border: 2px solid rgba(161, 127, 54, .36);
  display: grid;
  place-items: center;
}
.afro-eights-player-avatar img,
.afro-eights-friend-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.afro-eights-player-profile-hero h2 {
  margin: 0;
  font-size: clamp(36px, 7vw, 64px);
  line-height: .95;
}
.afro-eights-player-profile-hero p,
.afro-eights-player-hub-card p {
  color: rgba(34, 34, 34, .74);
}
.afro-eights-player-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.afro-eights-player-stat-grid > div,
.afro-eights-daily-claim-card,
.afro-eights-wallet-strip,
.afro-eights-friend-tools,
.afro-eights-friend-columns > section,
.afro-eights-achievement-card,
.afro-eights-rank-table-wrap {
  border: 1px solid rgba(128, 99, 45, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .65);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .04);
}
.afro-eights-player-stat-grid > div {
  padding: 12px;
  display: grid;
  gap: 3px;
}
.afro-eights-player-stat-grid span,
.afro-eights-daily-meta span {
  color: rgba(36, 35, 33, .66);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.afro-eights-player-stat-grid strong {
  color: #2b2b2b;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1;
}
.afro-eights-daily-claim-card {
  padding: 16px;
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.afro-eights-daily-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.afro-eights-wallet-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.afro-eights-wallet-strip strong {
  color: #a88637;
  font-family: var(--afro-eights-display-font, inherit);
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1;
}
.afro-eights-store-item em {
  display: inline-flex;
  justify-content: center;
  margin-top: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(167, 139, 71, .14);
  color: #6d5721;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.afro-eights-store-item.is-locked {
  opacity: .92;
}
.afro-eights-store-item.is-locked .afro-eights-store-preview {
  filter: saturate(.72) brightness(.92);
}
.afro-eights-friend-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  margin: 14px 0;
}
.afro-eights-friend-tools label {
  display: grid;
  gap: 6px;
  font-weight: 800;
  color: #2d2d2d;
}
.afro-eights-friend-tools input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(99, 76, 33, .32);
  border-radius: 9px;
  padding: 9px 11px;
}
.afro-eights-friend-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.afro-eights-friend-columns > section {
  padding: 14px;
}
.afro-eights-friend-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(100, 78, 36, .12);
}
.afro-eights-friend-row:last-child { border-bottom: 0; }
.afro-eights-friend-row span {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(167, 139, 71, .16);
}
.afro-eights-friend-row em {
  color: rgba(45, 45, 45, .62);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.afro-eights-achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.afro-eights-achievement-card {
  padding: 14px;
  display: grid;
  gap: 6px;
}
.afro-eights-achievement-card.is-earned {
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(247, 226, 161, .78));
  border-color: rgba(167, 139, 71, .52);
}
.afro-eights-achievement-card strong {
  font-size: 18px;
  color: #2d2d2d;
}
.afro-eights-achievement-card small {
  color: #8f742e;
  font-weight: 900;
}
.afro-eights-rank-table-wrap {
  overflow: auto;
  margin: 16px 0;
}
.afro-eights-rank-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  color: #272521;
}
.afro-eights-rank-table th,
.afro-eights-rank-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(100, 78, 36, .14);
  text-align: left;
}
.afro-eights-rank-table th {
  color: #8f742e;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
@media (max-width: 760px), (orientation: portrait) {
  .afro-eights-player-profile-hero,
  .afro-eights-friend-tools,
  .afro-eights-friend-columns,
  .afro-eights-achievement-grid {
    grid-template-columns: 1fr;
  }
  .afro-eights-player-avatar {
    width: 86px;
  }
  .afro-eights-player-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .afro-eights-wallet-strip {
    align-items: stretch;
  }
  .afro-eights-wallet-strip .afro-eights-btn,
  .afro-eights-friend-tools .afro-eights-btn {
    width: 100%;
  }
  .afro-eights-ios-reward-strip {
    grid-template-columns: 1fr !important;
  }
  .afro-eights-ios-token-box,
  .afro-eights-ios-score-box {
    width: 100%;
  }
}

/* v0.18.0 UX/UI correction pass: remove web chrome from iOS screens, fit setup/menu to viewport, and re-seat gameplay elements. */
.afro-eights-root {
  --ae-v18-gold: #a88b34;
  --ae-v18-gold-deep: #8a6e24;
  --ae-v18-blue: #6895d6;
  --ae-v18-panel: rgba(224, 202, 164, .78);
}

/* The previous parity pass left a web header above the iOS-like screens. It costs too much vertical space and
   is the main reason the setup/menu content falls below the viewport. Keep game controls in the game topbar. */
.afro-eights-shell.is-ios-home > .afro-eights-menu-header,
.afro-eights-shell.is-ios-setup-screen > .afro-eights-menu-header,
.afro-eights-shell.is-ios-lobby-screen > .afro-eights-menu-header {
  display: none !important;
}
.afro-eights-shell.is-ios-home,
.afro-eights-shell.is-ios-setup-screen,
.afro-eights-shell.is-ios-lobby-screen {
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}
.afro-eights-shell.is-ios-home::before,
.afro-eights-shell.is-ios-setup-screen::before,
.afro-eights-shell.is-ios-lobby-screen::before {
  top: clamp(18px, 8vh, 96px) !important;
  opacity: .62 !important;
}

/* Main menu: compress to the iOS dashboard proportions and keep the Play button visible. */
.afro-eights-ios-home {
  min-height: 100% !important;
  height: 100% !important;
  padding: clamp(10px, 2vw, 20px) !important;
  gap: clamp(8px, 1.5vh, 14px) !important;
  overflow: hidden !important;
}
.afro-eights-ios-reward-strip {
  grid-template-columns: minmax(130px, .26fr) minmax(240px, .88fr) minmax(150px, .26fr) !important;
  gap: clamp(8px, 2vw, 22px) !important;
}
.afro-eights-ios-token-box,
.afro-eights-ios-daily-title,
.afro-eights-ios-score-box {
  min-height: clamp(46px, 7vh, 66px) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.afro-eights-ios-daily-title { font-size: clamp(24px, 4.2vw, 46px) !important; }
.afro-eights-ios-token-box strong,
.afro-eights-ios-score-box strong { font-size: clamp(28px, 4.5vw, 44px) !important; }
.afro-eights-ios-home-board {
  min-height: 0 !important;
  height: 100% !important;
  grid-template-columns: minmax(104px, .30fr) minmax(340px, .68fr) minmax(166px, .31fr) !important;
  align-items: center !important;
  gap: clamp(12px, 2.6vw, 36px) !important;
}
.afro-eights-ios-mask-column { min-height: 0 !important; }
.afro-eights-ios-mask-column img { width: clamp(92px, 13vw, 160px) !important; }
.afro-eights-ios-menu-panel {
  width: min(500px, 100%) !important;
  max-height: calc(100svh - 100px) !important;
  overflow: hidden !important;
  gap: clamp(6px, 1.1vh, 10px) !important;
  padding: clamp(12px, 1.7vw, 18px) !important;
  align-self: center !important;
  justify-self: center !important;
}
.afro-eights-ios-signed-in {
  min-height: clamp(46px, 6vh, 58px) !important;
  padding: 6px 14px !important;
}
.afro-eights-ios-signed-in::before {
  width: clamp(34px, 4.3vw, 42px) !important;
  height: clamp(34px, 4.3vw, 42px) !important;
}
.afro-eights-ios-signed-in strong { font-size: clamp(17px, 2.4vw, 25px) !important; }
.afro-eights-ios-mode-button,
.afro-eights-ios-menu-row {
  min-height: clamp(46px, 6.8vh, 60px) !important;
  padding: 6px 12px !important;
}
.afro-eights-ios-mode-button.is-primary { min-height: clamp(52px, 7.4vh, 68px) !important; }
.afro-eights-ios-mode-button strong,
.afro-eights-ios-menu-row strong {
  font-size: clamp(20px, 2.9vw, 32px) !important;
  line-height: .98 !important;
}
.afro-eights-ios-mode-number {
  width: clamp(38px, 4.8vw, 56px) !important;
  height: clamp(38px, 4.8vw, 52px) !important;
  font-size: clamp(23px, 3.3vw, 34px) !important;
}
.afro-eights-ios-mode-art img,
.afro-eights-ios-menu-small-icon img,
.afro-eights-ios-play-button img {
  width: clamp(32px, 4vw, 46px) !important;
  height: clamp(32px, 4vw, 46px) !important;
}
.afro-eights-ios-play-button {
  min-height: clamp(58px, 8vh, 76px) !important;
  grid-template-rows: clamp(30px, 4.5vh, 44px) auto !important;
  margin-top: 0 !important;
}
.afro-eights-ios-profile-card {
  width: min(210px, 100%) !important;
  gap: 6px !important;
  padding: 8px !important;
}
.afro-eights-ios-profile-photo { width: min(170px, 15vw) !important; }
.afro-eights-ios-profile-card strong { font-size: clamp(19px, 2.4vw, 28px) !important; }
.afro-eights-ios-profile-card span { font-size: clamp(17px, 2.2vw, 24px) !important; }

/* Local/online setup: match the iOS slider screen and stay fully visible. */
.afro-eights-ios-setup {
  height: 100% !important;
  min-height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(8px, 1.8vw, 18px) !important;
  overflow: hidden !important;
}
.afro-eights-ios-setup-card {
  width: min(720px, 92vw) !important;
  max-height: calc(100svh - 24px) !important;
  overflow: auto !important;
  padding: clamp(14px, 2vw, 22px) clamp(22px, 3vw, 34px) !important;
  background: var(--ae-v18-panel) !important;
}
.afro-eights-ios-setup-card .afro-eights-eyebrow {
  margin: 0 0 2px !important;
  font-size: clamp(11px, 1.4vw, 14px) !important;
}
.afro-eights-ios-setup-card h2 {
  font-size: clamp(32px, 5vw, 52px) !important;
  margin: 0 0 8px !important;
  line-height: .92 !important;
}
.afro-eights-ios-setup-card > .afro-eights-muted {
  display: none !important;
}
.afro-eights-ios-slider-field,
.afro-eights-ios-name-field {
  margin: clamp(8px, 1.2vh, 12px) auto !important;
  gap: 3px !important;
  max-width: 600px !important;
  font-size: clamp(24px, 3.2vw, 36px) !important;
  line-height: 1 !important;
}
.afro-eights-ios-ruler {
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: .9 !important;
  padding: 0 8px !important;
}
.afro-eights-ios-slider-field input[type="range"] {
  height: 20px !important;
  margin: 0 !important;
}
.afro-eights-ios-slider-field output {
  display: none !important;
}
.afro-eights-ios-player-names {
  max-height: clamp(104px, 20vh, 170px) !important;
  overflow: auto !important;
  margin: clamp(8px, 1.2vh, 12px) auto !important;
  gap: 8px 12px !important;
  padding: 8px !important;
}
.afro-eights-local-name-field[hidden] { display: none !important; }
.afro-eights-local-name-field { font-size: clamp(14px, 1.8vw, 18px) !important; }
.afro-eights-local-name-field input { min-height: 40px !important; }
.afro-eights-ios-setup-actions { margin-top: 8px !important; }
.afro-eights-ios-play-cta { min-height: 52px !important; }
.afro-eights-ios-play-cta span,
.afro-eights-ios-play-cta span img { width: 32px !important; height: 32px !important; }

/* Gameplay: keep the table centred, stop top/opponent elements from clipping, and make the turn text readable. */
.afro-eights-board.afro-eights-gameplay {
  grid-template-rows: 40px 86px minmax(180px, 1fr) clamp(148px, 24vh, 212px) !important;
  gap: clamp(4px, 1vh, 8px) !important;
  padding: clamp(6px, 1vw, 12px) clamp(10px, 1.6vw, 22px) !important;
  overflow: hidden !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-topbar {
  grid-template-columns: minmax(88px, 160px) 1fr auto !important;
  min-height: 34px !important;
  gap: 8px !important;
  align-items: start !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-brand img {
  max-width: 122px !important;
  max-height: 34px !important;
  opacity: .50 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-status {
  justify-content: center !important;
  gap: 4px !important;
  max-height: 34px !important;
  overflow: hidden !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-pill {
  min-height: 25px !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-pill.is-mode,
.afro-eights-board.afro-eights-gameplay .afro-eights-pill.is-round,
.afro-eights-board.afro-eights-gameplay .afro-eights-pill.is-turn,
.afro-eights-board.afro-eights-gameplay .afro-eights-pill.is-direction {
  display: none !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-actions {
  gap: 6px !important;
  align-items: start !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-actions .afro-eights-btn {
  min-height: 30px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-draw-action-btn { display: none !important; }
.afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash {
  left: clamp(22px, 5.8vw, 84px) !important;
  top: 41% !important;
  max-width: min(360px, 29vw) !important;
  font-size: clamp(22px, 3.6vw, 44px) !important;
  line-height: .98 !important;
  color: var(--ae-v18-gold) !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  text-transform: uppercase !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents {
  align-items: start !important;
  padding: 0 clamp(26px, 6vw, 96px) !important;
  overflow: visible !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-panel {
  position: relative !important;
  min-height: 84px !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-rows: 46px 42px !important;
  place-items: center !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-mini-hand {
  position: static !important;
  transform: none !important;
  min-height: 44px !important;
  min-width: 116px !important;
  padding-left: 0 !important;
  justify-content: center !important;
  opacity: .92 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-card-back-mini {
  width: 32px !important;
  height: 48px !important;
  margin-left: -17px !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-card-back-mini:first-child { margin-left: 0 !important; }
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-ios-avatar {
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-head { display: none !important; }
.afro-eights-board.afro-eights-gameplay .afro-eights-table,
.afro-eights-board.afro-eights-gameplay .afro-eights-table.is-clean-table {
  min-height: 0 !important;
  align-self: stretch !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-pile-row {
  width: min(500px, 66vw) !important;
  height: 100% !important;
  min-height: 0 !important;
  justify-content: center !important;
  align-content: center !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-center-ring {
  width: clamp(178px, 23vw, 258px) !important;
  height: clamp(178px, 23vw, 258px) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-direction-wheel {
  opacity: .44 !important;
  filter: sepia(.85) saturate(.75) hue-rotate(350deg) brightness(.95) contrast(.88) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-orbit-suit { opacity: .80 !important; }
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack {
  right: max(-190px, -24vw) !important;
  padding: 8px !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-discard-drop .afro-eights-card.is-image-card,
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack .afro-eights-card.is-back {
  --ae-card-w: clamp(82px, 8.5vw, 118px) !important;
  --ae-card-h: calc(var(--ae-card-w) * 1.455) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-human-panel {
  height: 100% !important;
  min-height: 0 !important;
  padding: 8px clamp(76px, 9vw, 150px) 8px clamp(18px, 5vw, 60px) !important;
  background: rgba(98, 146, 213, .88) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards {
  min-height: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: clamp(12px, 3vw, 60px) !important;
  padding: 0 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards .afro-eights-card {
  --ae-card-w: clamp(78px, 8.1vw, 108px) !important;
  --ae-card-h: calc(var(--ae-card-w) * 1.455) !important;
  margin-left: 0 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock {
  right: clamp(12px, 2vw, 26px) !important;
  bottom: clamp(24px, 5.2vh, 48px) !important;
  width: clamp(58px, 5.8vw, 76px) !important;
  height: clamp(58px, 5.8vw, 76px) !important;
  min-height: 0 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock img {
  width: 68% !important;
  height: 62% !important;
  object-fit: contain !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock span {
  font-size: 10px !important;
  line-height: 1 !important;
}

@media (orientation: landscape) and (max-height: 700px) {
  .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: 34px 74px minmax(150px, 1fr) clamp(126px, 24vh, 174px) !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-panel {
    min-height: 72px !important;
    grid-template-rows: 38px 36px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-card-back-mini {
    width: 28px !important;
    height: 42px !important;
    margin-left: -15px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-ios-avatar {
    width: 42px !important;
    height: 42px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-center-ring {
    width: clamp(150px, 22vw, 215px) !important;
    height: clamp(150px, 22vw, 215px) !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-discard-drop .afro-eights-card.is-image-card,
  .afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack .afro-eights-card.is-back,
  .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards .afro-eights-card {
    --ae-card-w: clamp(66px, 7.6vw, 88px) !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash {
    top: 42% !important;
    font-size: clamp(20px, 3.3vw, 34px) !important;
  }
}

@media (max-width: 760px), (orientation: portrait) {
  .afro-eights-shell.is-ios-home,
  .afro-eights-shell.is-ios-setup-screen,
  .afro-eights-shell.is-ios-lobby-screen {
    overflow: auto !important;
  }
  .afro-eights-ios-home {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }
  .afro-eights-ios-reward-strip,
  .afro-eights-ios-home-board {
    grid-template-columns: 1fr !important;
  }
  .afro-eights-ios-mask-column { display: none !important; }
  .afro-eights-ios-menu-panel { max-height: none !important; overflow: visible !important; }
  .afro-eights-ios-profile-card,
  .afro-eights-ios-profile-photo { width: 100% !important; }
  .afro-eights-ios-profile-photo { aspect-ratio: 2.7 / 1 !important; }
  .afro-eights-ios-setup-card { max-height: none !important; }
  .afro-eights-ios-player-names { max-height: none !important; }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: auto minmax(68px, auto) minmax(230px, 1fr) minmax(156px, 28vh) !important;
    overflow: hidden !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-self: center !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay .afro-eights-pile-row {
    width: 100% !important;
  }
  .afro-eights-root.afro-eights-portrait-device .afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack {
    right: auto !important;
  }
}


/* v0.18.0: field-test UI/UX repair pass.
   This pass tightens the iOS-style shell after live browser testing: less web chrome,
   setup panels that fit, visible table controls, fixed deck positioning, and cleaner
   landscape/portrait separation. */
.afro-eights-root {
  --ae-ios-safe-pad-x: max(10px, env(safe-area-inset-left));
  --ae-ios-safe-pad-r: max(10px, env(safe-area-inset-right));
  --ae-ios-safe-pad-y: max(8px, env(safe-area-inset-top));
  --ae-ios-safe-pad-b: max(8px, env(safe-area-inset-bottom));
}

/* The Unity/iOS screens do not need the WordPress/web control bar fighting the layout after the UI correction pass. */
.afro-eights-shell.is-ios-home .afro-eights-menu-header,
.afro-eights-shell.is-ios-setup-screen .afro-eights-menu-header,
.afro-eights-shell.is-ios-lobby-screen .afro-eights-menu-header {
  display: none !important;
}
.afro-eights-shell.is-ios-home,
.afro-eights-shell.is-ios-setup-screen,
.afro-eights-shell.is-ios-lobby-screen {
  padding: clamp(8px, 1.4vw, 18px) !important;
  overflow: hidden !important;
}
.afro-eights-shell.is-ios-home::before,
.afro-eights-shell.is-ios-setup-screen::before,
.afro-eights-shell.is-ios-lobby-screen::before {
  top: clamp(38px, 10vh, 92px) !important;
  pointer-events: none !important;
}

/* Main menu: fit in one landscape viewport and remove the extra web Quick Play tile. */
.afro-eights-ios-home {
  min-height: 100% !important;
  max-height: 100% !important;
  gap: clamp(8px, 1.4vw, 16px) !important;
  padding: clamp(8px, 1.3vw, 16px) !important;
  position: relative !important;
  z-index: 2 !important;
}
.afro-eights-ios-reward-strip {
  position: relative !important;
  z-index: 4 !important;
  gap: clamp(8px, 1.3vw, 18px) !important;
}
.afro-eights-ios-token-box,
.afro-eights-ios-daily-title,
.afro-eights-ios-score-box {
  min-height: clamp(50px, 8vh, 72px) !important;
}
.afro-eights-ios-daily-title.is-button span {
  font-size: clamp(24px, 3.2vw, 44px) !important;
  line-height: .95 !important;
}
.afro-eights-ios-home-board {
  position: relative !important;
  z-index: 3 !important;
  min-height: 0 !important;
  align-items: center !important;
}
.afro-eights-ios-menu-panel {
  align-self: center !important;
  max-height: calc(100dvh - 112px) !important;
  overflow: visible !important;
  gap: clamp(6px, 1.05vh, 10px) !important;
  padding: clamp(10px, 1.5vw, 16px) !important;
}
.afro-eights-ios-home .afro-eights-ios-play-button {
  display: none !important;
}
.afro-eights-ios-signed-in {
  min-height: clamp(48px, 7vh, 60px) !important;
  padding-block: 6px !important;
}
.afro-eights-ios-mode-button,
.afro-eights-ios-mode-button.is-primary {
  min-height: clamp(50px, 7.8vh, 66px) !important;
  padding-block: 6px !important;
}
.afro-eights-ios-menu-row {
  min-height: clamp(44px, 6.8vh, 56px) !important;
  padding-block: 5px !important;
}
.afro-eights-ios-mode-button strong,
.afro-eights-ios-menu-row strong {
  line-height: .94 !important;
}
.afro-eights-ios-profile-card {
  align-self: center !important;
  max-height: calc(100dvh - 126px) !important;
}
.afro-eights-ios-profile-photo {
  width: min(160px, 15vw) !important;
}

/* Setup/pass-and-play: keep the form inside one page and hide unused player names. */
.afro-eights-shell.is-ios-setup-screen .afro-eights-ios-setup {
  min-height: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.afro-eights-ios-setup-card {
  width: min(680px, calc(100vw - 44px)) !important;
  max-height: calc(100dvh - 34px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding: clamp(14px, 2.2vh, 22px) clamp(22px, 3vw, 42px) !important;
  border-radius: 8px !important;
}
.afro-eights-ios-setup-card .afro-eights-eyebrow {
  margin: 0 0 2px !important;
  font-size: clamp(12px, 1.6vw, 16px) !important;
  letter-spacing: .08em !important;
}
.afro-eights-ios-setup-card h2 {
  margin: 0 0 clamp(6px, 1vh, 12px) !important;
  font-size: clamp(42px, 5.5vw, 64px) !important;
  line-height: .92 !important;
}
.afro-eights-ios-setup-card .afro-eights-muted {
  margin: 0 0 6px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}
.afro-eights-ios-slider-field,
.afro-eights-ios-name-field {
  gap: 1px !important;
  font-size: clamp(24px, 3.2vw, 36px) !important;
  line-height: 1 !important;
}
.afro-eights-ios-ruler {
  padding-inline: 12px !important;
  line-height: .78 !important;
  font-size: clamp(26px, 3.6vw, 42px) !important;
}
.afro-eights-ios-slider-field input[type="range"] {
  height: 22px !important;
  margin: -2px 0 2px !important;
}
.afro-eights-ios-slider-field output {
  display: none !important;
}
.afro-eights-ios-player-names {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 12px !important;
  max-height: min(148px, 24vh) !important;
  overflow: auto !important;
  padding: 8px !important;
  margin: 6px 0 10px !important;
}
.afro-eights-local-name-field.is-hidden {
  display: none !important;
}
.afro-eights-ios-player-names label {
  font-size: clamp(15px, 1.55vw, 18px) !important;
  line-height: 1.05 !important;
}
.afro-eights-ios-player-names input,
.afro-eights-ios-setup-card input[type="text"] {
  min-height: 38px !important;
  font-size: 16px !important;
}
.afro-eights-ios-setup-actions {
  margin-top: 4px !important;
  justify-content: flex-end !important;
}
.afro-eights-ios-setup-actions .afro-eights-btn {
  min-height: 46px !important;
  border-radius: 8px !important;
}
.afro-eights-ios-play-cta img,
.afro-eights-ios-play-cta span img {
  width: 28px !important;
  height: 28px !important;
}

/* Lobby: compact iOS connecting screen rather than a tall web form. */
.afro-eights-shell.is-ios-lobby-screen .afro-eights-ios-lobby {
  min-height: 100% !important;
  align-items: center !important;
  padding: clamp(6px, 1vw, 16px) !important;
}
.afro-eights-ios-lobby-left,
.afro-eights-ios-lobby-controls {
  max-height: calc(100dvh - 36px) !important;
  overflow: auto !important;
}
.afro-eights-ios-lobby-board {
  min-height: clamp(250px, 52vh, 510px) !important;
}
.afro-eights-ios-lobby-controls h2 {
  margin-block: 0 6px !important;
  font-size: clamp(38px, 5vw, 62px) !important;
}

/* Gameplay: make the table visible, keep UI inside safe edges, and remove duplicated direction art. */
.afro-eights-root.afro-eights-is-game,
body.afro-eights-full-page-shell .afro-eights-root.afro-eights-is-game {
  max-width: none !important;
  width: 100vw !important;
  height: var(--ae-fit-height, 100dvh) !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}
.afro-eights-board.afro-eights-gameplay {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: var(--ae-ios-safe-pad-y) var(--ae-ios-safe-pad-r) var(--ae-ios-safe-pad-b) var(--ae-ios-safe-pad-x) !important;
  grid-template-rows: 42px minmax(54px, 76px) minmax(196px, 1fr) clamp(148px, 24vh, 226px) !important;
  gap: 0 !important;
}
.afro-eights-board.afro-eights-gameplay::before {
  top: 0 !important;
  padding-top: clamp(38px, 9vh, 76px) !important;
  font-size: clamp(58px, 9vw, 122px) !important;
  opacity: 1 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-topbar {
  position: relative !important;
  z-index: 60 !important;
  display: grid !important;
  grid-template-columns: minmax(90px, .45fr) minmax(180px, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
  min-height: 38px !important;
  height: 38px !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-brand {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-brand img {
  max-width: clamp(88px, 10vw, 132px) !important;
  max-height: 28px !important;
  opacity: .34 !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.16)) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-status {
  justify-self: center !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  max-width: min(52vw, 590px) !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-status .afro-eights-pill {
  display: none !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-status .afro-eights-pill.is-active-suit,
.afro-eights-board.afro-eights-gameplay .afro-eights-status .afro-eights-pill.is-pickup,
.afro-eights-board.afro-eights-gameplay .afro-eights-status .afro-eights-pill.is-room,
.afro-eights-board.afro-eights-gameplay .afro-eights-status .afro-eights-pill.is-seat {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  min-height: 26px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  color: #2f2a22 !important;
  border: 1px solid rgba(151,133,95,.22) !important;
  box-shadow: 0 2px 4px rgba(80,58,18,.10) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-actions {
  justify-self: end !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  max-width: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  padding: 0 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-actions .afro-eights-btn {
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
  font-size: clamp(12px, 1.35vw, 15px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-draw-action-btn,
.afro-eights-board.afro-eights-gameplay .afro-eights-top-draw-btn {
  display: none !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash {
  position: absolute !important;
  z-index: 34 !important;
  left: clamp(16px, 5.5vw, 94px) !important;
  top: 47% !important;
  transform: none !important;
  min-width: 0 !important;
  max-width: min(390px, 35vw) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #a8871b !important;
  text-align: left !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.24) !important;
  font-size: clamp(28px, 4.6vw, 56px) !important;
  line-height: .95 !important;
  letter-spacing: .02em !important;
  pointer-events: none !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash span {
  white-space: normal !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash.is-drawn-turn {
  left: 50% !important;
  top: 42px !important;
  transform: translateX(-50%) !important;
  max-width: min(640px, 54vw) !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(151,133,95,.24) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  color: #6d5520 !important;
  box-shadow: 0 4px 10px rgba(80,58,18,.10) !important;
  font-size: clamp(13px, 1.4vw, 18px) !important;
  line-height: 1.05 !important;
  text-align: center !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash.is-pick-turn {
  left: 50% !important;
  top: 48% !important;
  transform: translate(-50%, -50%) !important;
  max-width: min(430px, 74vw) !important;
  padding: 12px 20px !important;
  border-radius: 18px !important;
  background: rgba(130,31,20,.90) !important;
  color: #fff7df !important;
  text-align: center !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-opponents {
  z-index: 3 !important;
  align-self: start !important;
  min-height: 0 !important;
  padding: 0 clamp(54px, 9vw, 130px) !important;
  gap: clamp(12px, 3vw, 44px) !important;
  overflow: visible !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-table,
.afro-eights-board.afro-eights-gameplay .afro-eights-table.is-clean-table {
  z-index: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-table-slot,
.afro-eights-board.afro-eights-gameplay .afro-eights-table-center-slot {
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-pile-row {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) !important;
  grid-template-areas: "left ring deck" !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(12px, 4.8vw, 82px) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-pile-row::before {
  display: none !important;
  content: none !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-center-ring {
  grid-area: ring !important;
  width: clamp(200px, 24vw, 310px) !important;
  height: clamp(200px, 24vw, 310px) !important;
  align-self: center !important;
  justify-self: center !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-direction-wheel {
  opacity: .46 !important;
  filter: sepia(.35) saturate(.78) brightness(.98) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack {
  grid-area: deck !important;
  position: relative !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  justify-self: center !important;
  align-self: center !important;
  width: calc(var(--ae-card-w, 98px) + 18px) !important;
  height: calc(var(--ae-card-h, 142px) + 18px) !important;
  padding: 8px !important;
  display: grid !important;
  place-items: center !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-human-panel {
  z-index: 4 !important;
  align-self: end !important;
  height: calc(100% - 2px) !important;
  min-height: 0 !important;
  margin: 0 clamp(8px, 2vw, 24px) 0 !important;
  padding: 8px clamp(74px, 8vw, 130px) 8px clamp(18px, 2.4vw, 34px) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards {
  height: 100% !important;
  min-height: 0 !important;
  padding: 6px 0 !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: clamp(8px, 1.5vw, 18px) !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards .afro-eights-card {
  margin-left: 0 !important;
}
.afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock {
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(26px, env(safe-area-inset-bottom)) !important;
  width: clamp(58px, 6vw, 76px) !important;
  height: clamp(58px, 6vw, 76px) !important;
}

@media (orientation: landscape) and (max-height: 760px) {
  .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: 36px minmax(44px, 60px) minmax(142px, 1fr) clamp(116px, 24vh, 172px) !important;
    padding-top: max(5px, env(safe-area-inset-top)) !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-brand img { max-width: 100px !important; max-height: 24px !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-actions .afro-eights-btn { min-height: 26px !important; padding: 4px 8px !important; font-size: 12px !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-opponents { padding-inline: clamp(32px, 8vw, 118px) !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-center-ring { width: clamp(158px, 23vw, 230px) !important; height: clamp(158px, 23vw, 230px) !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-card { --ae-card-w: clamp(68px, 8.3vw, 94px) !important; --ae-card-h: clamp(96px, 11.7vw, 132px) !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack { width: calc(var(--ae-card-w, 82px) + 16px) !important; height: calc(var(--ae-card-h, 116px) + 16px) !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel { padding-right: clamp(70px, 8vw, 110px) !important; }
}

/* Portrait: stacked but still game-like; no cropped deck, no over-large turn text. */
@media (orientation: portrait), (max-width: 860px) {
  .afro-eights-shell.is-ios-home,
  .afro-eights-shell.is-ios-setup-screen,
  .afro-eights-shell.is-ios-lobby-screen {
    overflow: auto !important;
  }
  .afro-eights-ios-reward-strip {
    grid-template-columns: 1fr 1fr !important;
  }
  .afro-eights-ios-daily-title {
    grid-column: 1 / -1 !important;
    order: -1 !important;
  }
  .afro-eights-ios-menu-panel {
    max-height: none !important;
  }
  .afro-eights-ios-setup-card {
    width: min(100%, calc(100vw - 18px)) !important;
    max-height: none !important;
  }
  .afro-eights-ios-player-names {
    grid-template-columns: 1fr !important;
    max-height: 210px !important;
  }
  .afro-eights-board.afro-eights-gameplay {
    grid-template-rows: 38px minmax(58px, auto) minmax(220px, 1fr) clamp(152px, 25vh, 230px) !important;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-topbar {
    grid-template-columns: 1fr auto !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-brand { display: none !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-status { justify-self: start !important; max-width: calc(100vw - 158px) !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-actions .afro-eights-btn { min-height: 28px !important; padding: 5px 8px !important; font-size: 12px !important; }
  .afro-eights-board.afro-eights-gameplay .afro-eights-opponents {
    padding-inline: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-pile-row {
    grid-template-columns: minmax(0, 1fr) minmax(78px, 104px) !important;
    grid-template-areas: "ring deck" !important;
    gap: 8px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-center-ring {
    width: min(58vw, 230px) !important;
    height: min(58vw, 230px) !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack {
    width: calc(var(--ae-card-w, 72px) + 12px) !important;
    height: calc(var(--ae-card-h, 102px) + 12px) !important;
    padding: 6px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash {
    left: 10px !important;
    top: 42% !important;
    max-width: 38vw !important;
    font-size: clamp(22px, 8vw, 40px) !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash.is-drawn-turn {
    left: 50% !important;
    top: 38px !important;
    max-width: calc(100vw - 150px) !important;
    font-size: 12px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel {
    margin: 0 !important;
    padding: 8px 72px 8px 10px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 10px !important;
  }
  .afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock {
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(22px, env(safe-area-inset-bottom)) !important;
    width: 60px !important;
    height: 60px !important;
  }
}

/*
 * Original-style corrections and retained interaction fixes.
 * The supplied artwork, palette, fonts and component skins above remain intact.
 * This section owns viewport fitting, readable scale and gameplay geometry.
 * The explicit original-look scope wins the earlier device-specific rules.
 */

/* Dedicated /game pages fill the viewport even after native fullscreen exits.
 * Embedded shortcodes keep their containing page's normal positioning. */
html:has(> body.afro-eights-full-page-shell),
body.afro-eights-full-page-shell {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
body.afro-eights-full-page-shell .afro-eights-installed-page > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.afro-eights-full-page-shell .afro-eights-root.ae-original-look:is(.afro-eights-is-game, .afro-eights-is-menu) {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--ae-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.afro-eights-root.ae-original-look {
  --ae-hand-card-width: clamp(108px, 8vw, 120px);
  --ae-hand-card-height: calc(var(--ae-hand-card-width) * 1.41015625);
  --ae-table-card-width: clamp(100px, 8vw, 116px);
  --ae-table-card-height: calc(var(--ae-table-card-width) * 1.41015625);
  --ae-hand-panel-height: calc(var(--ae-hand-card-height) + 34px);
  --ae-draw-space: 94px;
  --ae-board-bottom: max(8px, env(safe-area-inset-bottom));
  min-width: 0;
}

/* Menus retain the original artwork and three-column desktop composition. */
.afro-eights-root.ae-original-look .afro-eights-shell {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
.afro-eights-root.ae-original-look.afro-eights-is-menu .afro-eights-shell:is(.is-ios-home, .is-ios-setup-screen, .is-ios-lobby-screen) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-home {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  padding: 10px !important;
  gap: 14px !important;
  overflow: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-home-board {
  height: auto !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 500px) minmax(0, 1fr) !important;
  gap: clamp(14px, 2vw, 28px) !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-menu-panel {
  width: min(500px, 100%) !important;
  min-width: 0 !important;
  max-height: none !important;
  padding: 12px !important;
  gap: 8px !important;
  overflow: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-mode-button,
.afro-eights-root.ae-original-look .afro-eights-ios-mode-button.is-primary,
.afro-eights-root.ae-original-look .afro-eights-ios-menu-row {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 52px !important;
  gap: 10px !important;
  padding: 8px 12px !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-mode-button strong,
.afro-eights-root.ae-original-look .afro-eights-ios-menu-row strong {
  min-width: 0 !important;
  font-size: clamp(20px, 1.8vw, 24px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center;
}
.afro-eights-root.ae-original-look .afro-eights-ios-mode-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-mode-row .afro-eights-ios-mode-button {
  grid-template-columns: clamp(28px, 3vw, 34px) minmax(0, 1fr) !important;
  gap: 8px !important;
  padding-inline: 8px !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-mode-row .afro-eights-ios-mode-button strong {
  font-size: clamp(18px, 1.5vw, 20px) !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-mode-art,
.afro-eights-root.ae-original-look .afro-eights-ios-menu-small-icon,
.afro-eights-root.ae-original-look .afro-eights-ios-mode-art img,
.afro-eights-root.ae-original-look .afro-eights-ios-menu-small-icon img {
  width: 100% !important;
  max-width: 34px !important;
  height: 34px !important;
  object-fit: contain;
}
.afro-eights-root.ae-original-look .afro-eights-ios-mode-number {
  width: 34px !important;
  height: 34px !important;
  font-size: 28px !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-reward-strip {
  grid-template-columns: minmax(120px, .3fr) minmax(180px, 1fr) minmax(120px, .3fr) !important;
  gap: 12px !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-daily-title,
.afro-eights-root.ae-original-look .afro-eights-ios-daily-title span {
  min-height: 0 !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  line-height: 1.15 !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-token-box,
.afro-eights-root.ae-original-look .afro-eights-ios-daily-title,
.afro-eights-root.ae-original-look .afro-eights-ios-score-box {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 7px 12px !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-token-box strong,
.afro-eights-root.ae-original-look .afro-eights-ios-score-box strong {
  font-size: clamp(24px, 2.4vw, 28px) !important;
  line-height: 1.1 !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-score-box span { font-size: 16px !important; }
.afro-eights-root.ae-original-look .afro-eights-ios-signed-in {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 48px !important;
  margin-bottom: 2px;
  padding: 6px 12px !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-signed-in strong { font-size: 18px !important; overflow-wrap: anywhere; }
.afro-eights-root.ae-original-look .afro-eights-ios-profile-card strong { font-size: 22px !important; }
.afro-eights-root.ae-original-look .afro-eights-ios-profile-card span { font-size: 18px !important; }

/* Setup content can grow from the top; controls remain comfortably tappable. */
.afro-eights-root.ae-original-look .afro-eights-shell.is-ios-setup-screen .afro-eights-ios-setup {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 100% !important;
  padding: 4px 0 !important;
  overflow: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-setup-card {
  flex: 0 0 auto;
  width: min(680px, 100%) !important;
  max-height: none !important;
  margin-block: auto !important;
  overflow: visible !important;
  padding: 18px clamp(14px, 3vw, 30px) !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-setup-card h2,
.afro-eights-root.ae-original-look .afro-eights-ios-lobby-controls h2 {
  font-size: clamp(28px, 3.2vw, 36px) !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-slider-field,
.afro-eights-root.ae-original-look .afro-eights-ios-name-field {
  font-size: clamp(16px, 1.8vw, 20px) !important;
  line-height: 1.25 !important;
  gap: 4px !important;
}
.afro-eights-root.ae-original-look .afro-eights-ios-ruler { font-size: 20px !important; line-height: 1.1 !important; }
.afro-eights-root.ae-original-look .afro-eights-ios-slider-field input[type="range"] { height: 44px !important; margin: 0 !important; }
.afro-eights-root.ae-original-look .afro-eights-ios-player-names { max-height: none !important; overflow: visible !important; }
.afro-eights-root.ae-original-look .afro-eights-ios-setup-card input[type="text"],
.afro-eights-root.ae-original-look .afro-eights-shell .afro-eights-btn,
.afro-eights-root.ae-original-look .afro-eights-modal-card .afro-eights-btn { min-height: 44px !important; }

/* One table layout owns the four regions at every orientation. The role selector
 * deliberately outranks legacy full-page + portrait !important declarations. */
.afro-eights-root.ae-original-look.afro-eights-is-game > .afro-eights-board.afro-eights-gameplay[role="application"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: max-content max-content minmax(calc(var(--ae-table-card-height) + 40px), 1fr) var(--ae-hand-panel-height) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 6px !important;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) var(--ae-board-bottom) max(10px, env(safe-area-inset-left)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.afro-eights-root.ae-original-look.afro-eights-is-game > .afro-eights-board.afro-eights-gameplay::before,
.afro-eights-root.ae-original-look.afro-eights-is-game > .afro-eights-board.afro-eights-gameplay::after {
  display: none !important;
  content: none !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-brand { display: none !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-topbar {
  grid-area: 1 / 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 44px !important;
  gap: 8px !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.is-multiplayer .afro-eights-topbar {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) auto !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-turn-order {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #6a5528;
  font-size: 13px;
  line-height: 1.2;
}
.afro-eights-root.ae-original-look .afro-eights-turn-order > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afro-eights-root.ae-original-look .afro-eights-direction-cue { font-weight: 700; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-status {
  grid-column: auto !important;
  justify-self: start !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-status .afro-eights-pill { font-size: 12px !important; line-height: 1.2 !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  grid-template-columns: none !important;
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  gap: 6px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-actions .afro-eights-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px !important;
  min-height: 44px !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-actions .afro-eights-draw-action-btn { display: none !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash:is(.is-active-turn, .is-passive-turn) {
  grid-area: 3 / 1 !important;
  position: relative !important;
  inset: auto !important;
  align-self: start !important;
  justify-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 6px !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8a6e24 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash.is-pick-turn { color: #8b3020 !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-table,
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-table.is-clean-table {
  grid-area: 3 / 1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 34px 0 0 !important;
  overflow: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-table-slot {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-pile-row {
  width: min(760px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  grid-template-areas: "left ring deck" !important;
  gap: clamp(12px, 3vw, 36px) !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-center-ring {
  grid-area: ring !important;
  width: clamp(190px, 21vw, 250px) !important;
  height: clamp(190px, 21vw, 250px) !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-pile-row.is-two-player {
  grid-template-columns: max-content max-content !important;
  grid-template-areas: "ring deck" !important;
  justify-content: center !important;
  gap: clamp(32px, 6vw, 80px) !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-center-ring.is-two-player {
  width: calc(var(--ae-table-card-width) + 20px) !important;
  height: calc(var(--ae-table-card-height) + 12px) !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.is-two-player .afro-eights-direction-wheel,
.afro-eights-root.ae-original-look .afro-eights-board.is-two-player .afro-eights-orbit-suit { display: none !important; }
.afro-eights-root.ae-original-look .afro-eights-direction-wheel.is-clockwise { transform: scaleX(-1); }
.afro-eights-root.ae-original-look .afro-eights-direction-wheel.is-anticlockwise { transform: none; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-discard-drop {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack {
  grid-area: deck !important;
  width: calc(var(--ae-table-card-width) + 16px) !important;
  height: calc(var(--ae-table-card-height) + 16px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-discard-drop .afro-eights-card,
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-ios-deck-stack .afro-eights-card {
  --ae-card-w: var(--ae-table-card-width) !important;
  --ae-card-h: var(--ae-table-card-height) !important;
  width: var(--ae-card-w) !important;
  height: var(--ae-card-h) !important;
  aspect-ratio: 512 / 722;
}

/* Visible seat information accompanies the original avatars and card backs. */
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents {
  grid-area: 2 / 1 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--ae-opponents, 1), minmax(0, 1fr)) !important;
  align-items: start !important;
  justify-items: center !important;
  width: min(1100px, 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: 8px !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-panel {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: min(220px, 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px 6px !important;
  gap: 4px 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-ios-avatar {
  grid-area: 1 / 1 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-head {
  grid-area: 1 / 2 !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 3px 6px !important;
  transform: none !important;
  opacity: 1 !important;
  text-align: left !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-name {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #483a24 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-card-count-badge {
  display: inline-flex !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 22px !important;
  padding: 2px 5px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  color: #59451d !important;
  background: rgba(255, 250, 235, .84) !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-card-count-badge::after { content: none !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-seat-status {
  display: block !important;
  grid-column: 1 / -1 !important;
  padding: 0 !important;
  color: #735e34 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .is-current .afro-eights-player-name { color: #78550d !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .is-current .afro-eights-ios-avatar { box-shadow: 0 0 0 3px #b1975d, 0 3px 8px rgba(60, 46, 16, .2) !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .is-away .afro-eights-seat-status { color: #8b3020 !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .has-one-card .afro-eights-card-count-badge { color: #8b3020 !important; border-color: #a16d45 !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-mini-hand {
  grid-area: 2 / 1 / auto / -1 !important;
  display: flex !important;
  position: static !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-card-back-mini {
  width: 20px !important;
  height: 28px !important;
  margin-left: -8px !important;
  border-radius: 3px !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-card-back-mini:first-child { margin-left: 0 !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents.is-compact .afro-eights-player-panel {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 3px 6px !important;
  padding: 3px 4px !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents.is-compact .afro-eights-ios-avatar { width: 30px !important; height: 30px !important; border-radius: 9px !important; }

/* The blue tray follows the card height; auto margins center a short hand and
 * become zero when it overflows, leaving both ends of a long hand reachable. */
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel {
  grid-area: 4 / 1 !important;
  position: relative !important;
  display: block !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--ae-hand-panel-height) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px var(--ae-draw-space) 4px 12px !important;
  overflow: visible !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel > .afro-eights-player-head { display: none !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(960px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 10px 4px 8px !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x proximity !important;
  scroll-padding-inline: 8px;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(42, 69, 107, .56) transparent;
  touch-action: pan-x !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards::-webkit-scrollbar { display: block !important; height: 6px; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(42, 69, 107, .56); }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards .afro-eights-card {
  --ae-card-w: var(--ae-hand-card-width) !important;
  --ae-card-h: var(--ae-hand-card-height) !important;
  flex: 0 0 var(--ae-card-w) !important;
  width: var(--ae-card-w) !important;
  height: var(--ae-card-h) !important;
  aspect-ratio: 512 / 722;
  margin: 0 !important;
  scroll-snap-align: start;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards .afro-eights-card:first-child { margin-left: auto !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards .afro-eights-card:last-child { margin-right: auto !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards[data-hand-size="medium"] .afro-eights-card + .afro-eights-card { margin-left: calc(var(--ae-hand-card-width) * -.18) !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards[data-hand-size="large"] .afro-eights-card + .afro-eights-card { margin-left: calc(var(--ae-hand-card-width) * -.36) !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards .afro-eights-card:is(:hover, :focus-visible) { z-index: 5 !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-scroll-tab { display: none !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-scroll-edge {
  display: none !important;
  position: absolute !important;
  top: 50% !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  transform: translateY(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 12 !important;
  border: 1px solid #9e8655 !important;
  border-radius: 6px !important;
  background: rgba(246, 234, 208, .94) !important;
  color: #4e3a1b !important;
  font-size: 24px !important;
  box-shadow: 0 2px 6px rgba(42, 55, 73, .2) !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel.afro-eights-hand-overflows .afro-eights-hand-scroll-edge { display: inline-flex !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-scroll-edge.is-left { left: 4px !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-scroll-edge.is-right { right: calc(var(--ae-draw-space) - 4px) !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock {
  width: 80px !important;
  height: 76px !important;
  min-height: 44px !important;
  right: 8px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  padding: 5px !important;
  grid-template-rows: 36px auto !important;
  gap: 2px !important;
}
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock img { display: block !important; width: 36px !important; height: 36px !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock span { display: block !important; font-size: 14px !important; line-height: 1.1 !important; white-space: normal !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock.is-end-turn { grid-template-rows: 24px auto !important; }
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock.is-end-turn img { width: 24px !important; height: 24px !important; }

/* Narrow menus stack their existing side artwork; portrait and short landscape
 * gameplay have separate rules so a phone turned sideways cannot enter both. */
@media (max-width: 760px), (orientation: portrait) {
  .afro-eights-root.ae-original-look .afro-eights-ios-home { padding: 4px !important; gap: 12px !important; }
  .afro-eights-root.ae-original-look .afro-eights-ios-home-board { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .afro-eights-root.ae-original-look .afro-eights-ios-reward-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .afro-eights-root.ae-original-look .afro-eights-ios-daily-title { grid-column: 1 / -1 !important; order: -1 !important; }
  .afro-eights-root.ae-original-look .afro-eights-ios-menu-panel { padding: 10px !important; }
  .afro-eights-root.ae-original-look .afro-eights-ios-profile-card { max-height: none !important; }
}
@media (max-width: 1000px) {
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-opponents { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (orientation: portrait) {
  .afro-eights-root.ae-original-look {
    --ae-hand-card-width: clamp(80px, 22vw, 96px);
    --ae-table-card-width: clamp(80px, 22vw, 100px);
    --ae-hand-panel-height: calc(var(--ae-hand-card-height) + 30px);
    --ae-draw-space: 88px;
  }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-topbar,
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.is-multiplayer .afro-eights-topbar { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "status status" "order actions" !important; gap: 4px 6px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-status { grid-area: status !important; width: 100% !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-actions { grid-area: actions !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-turn-order { grid-area: order !important; display: grid; gap: 2px; font-size: 12px; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-actions .afro-eights-btn { padding: 8px !important; font-size: 13px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents[data-count="1"] { grid-template-columns: minmax(0, 1fr) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-opponents { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents.is-compact .afro-eights-mini-hand { display: none !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-pile-row { grid-template-columns: minmax(0, 1fr) max-content !important; grid-template-areas: "ring deck" !important; gap: 12px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-center-ring:not(.is-two-player) { width: min(48vw, 210px) !important; height: min(48vw, 210px) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-center-ring { width: calc(var(--ae-table-card-width) + 12px) !important; height: calc(var(--ae-table-card-height) + 12px) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-direction-wheel,
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-orbit-suit { display: none !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-pile-row.is-two-player { grid-template-columns: max-content max-content !important; gap: clamp(24px, 8vw, 40px) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel { padding-left: 6px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards { gap: 8px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards[data-card-count="4"] .afro-eights-card + .afro-eights-card { margin-left: calc(var(--ae-hand-card-width) * -.45) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards[data-card-count="5"] .afro-eights-card + .afro-eights-card { margin-left: calc(var(--ae-hand-card-width) * -.6) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-unity-action-dock { width: 76px !important; }
}
@media (max-width: 380px) {
  .afro-eights-root.ae-original-look .afro-eights-ios-mode-row { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 380px) and (orientation: portrait) {
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards[data-hand-size="small"] { gap: 6px !important; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .afro-eights-root.ae-original-look {
    --ae-hand-card-width: clamp(72px, 9vw, 82px);
    --ae-table-card-width: clamp(68px, 8.5vw, 78px);
    --ae-hand-panel-height: calc(var(--ae-hand-card-height) + 24px);
    --ae-board-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .afro-eights-root.ae-original-look.afro-eights-is-game > .afro-eights-board.afro-eights-gameplay[role="application"] { gap: 4px !important; padding-top: max(6px, env(safe-area-inset-top)) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents { gap: 4px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-panel { grid-template-columns: 28px minmax(0, 1fr) !important; grid-template-rows: auto !important; padding: 2px 4px !important; gap: 5px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-ios-avatar { width: 28px !important; height: 28px !important; border-radius: 8px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-mini-hand { display: none !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-opponents .afro-eights-player-name { font-size: 13px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-opponents { grid-template-columns: repeat(var(--ae-opponents, 1), minmax(0, 1fr)) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-opponents .afro-eights-player-panel { grid-template-columns: minmax(0, 1fr) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-opponents .afro-eights-ios-avatar { display: none !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay.has-many-players .afro-eights-opponents .afro-eights-player-head { grid-area: 1 / 1 !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-turn-flash { font-size: 20px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-table { padding-top: 26px !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-center-ring:not(.is-two-player) { width: calc(var(--ae-table-card-width) + 12px) !important; height: calc(var(--ae-table-card-height) + 12px) !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-direction-wheel,
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-orbit-suit { display: none !important; }
  .afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-hand-cards { padding-block: 6px !important; }
}

/* Dialogs remain outside the board's grid and its inert subtree. */
.afro-eights-root.ae-original-look > .ae-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 2147483652;
  pointer-events: none;
}
.ae-original-look .ae-overlay-layer:empty { display: none; }
.ae-original-look .ae-overlay-layer > .afro-eights-modal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}
.ae-original-look .ae-overlay-layer .afro-eights-modal-card { flex: 0 0 auto; margin-block: auto; }
.ae-original-look .afro-eights-modal-card > h2 { margin: 0 0 8px; color: var(--ae-gold); font-size: clamp(22px, 4vw, 32px); }
.ae-original-look .afro-eights-ios-pause-card > p { color: #30281b; }
.ae-original-look .afro-eights-ios-pause-options label:has(select) { grid-template-columns: 1fr minmax(120px, 44%) !important; gap: 12px !important; }
.ae-original-look .afro-eights-ios-pause-options select { width: 100%; min-height: 44px; max-width: 100%; padding: 6px 8px; border: 1px solid rgba(99, 76, 33, .4); border-radius: 6px; background: rgba(255, 255, 255, .85); color: #30281b; font-size: 16px; }
.ae-original-look .ae-dialog-scroll { max-height: 55vh; max-height: 55dvh; padding: 6px; overflow: auto; text-align: left; }
.ae-original-look .afro-eights-shell .ae-dialog-scroll { max-height: none; overflow: visible; }
.ae-original-look .ae-dialog-scroll .afro-eights-log { max-height: none; }
.ae-original-look .ae-dialog-scroll .afro-eights-rank-table { min-width: 0; color: inherit; }
.ae-original-look .ae-dialog-scroll .afro-eights-rank-table th { color: var(--ae-gold); }
.ae-original-look .ae-modal-actions,
.ae-original-look .ae-store-preview-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.ae-original-look .afro-eights-choice-button :is(strong, span, small) { display: block; margin-block: 6px; }
.ae-original-look .ae-rule-summary { margin-block: 18px; }
.ae-original-look .ae-save-status { margin-top: 14px; }
.ae-original-look .ae-icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }

/* Long pages start at their scroll origin instead of being vertically clipped. */
.ae-original-look .afro-eights-shell:is(.is-store, .is-player-hub, .is-online-lobby),
.ae-original-look .afro-eights-shell:has(.ae-dialog-scroll) { display: block !important; overflow: auto !important; }
.ae-original-look .afro-eights-store-screen,
.ae-original-look .afro-eights-player-hub-screen,
.ae-original-look .ae-online-lobby,
.ae-original-look .afro-eights-setup:has(.ae-dialog-scroll) { display: block !important; height: auto !important; min-height: 0 !important; padding-block: 18px !important; }
.ae-original-look .afro-eights-store-card,
.ae-original-look .afro-eights-player-hub-card { margin-inline: auto; max-height: none !important; }

/* Preview and Create/Join use the original warm panel and gold button styles. */
.ae-original-look .ae-store-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; margin: 18px 0; padding: 16px; border: 1px solid rgba(151, 133, 95, .42); border-radius: 8px; background: rgba(238, 224, 198, .72); }
.ae-original-look .ae-store-preview-scene { display: grid; place-items: center; min-width: 0; overflow: hidden; }
.ae-original-look .ae-store-preview-scene img { display: block; max-width: 100%; max-height: 240px; object-fit: contain; }
.ae-original-look .ae-store-preview-scene.is-card-back img { width: 140px; height: 200px; }
.ae-original-look .ae-store-preview-actions .afro-eights-menu-actions { margin-top: 0; }
.ae-original-look .ae-online-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.ae-original-look .ae-online-choices > section { min-width: 0; padding: 16px; border: 1px solid rgba(151, 133, 95, .42); border-radius: 8px; }
.ae-original-look .ae-online-lobby label { display: grid; gap: 7px; margin: 14px 0; }
.ae-original-look .ae-online-lobby :is(input, select) { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(99, 76, 33, .32); border-radius: 8px; }
.ae-original-look .ae-connection { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-size: 12px; line-height: 1.3; }
.ae-original-look .afro-eights-board > .ae-connection { position: absolute !important; z-index: 36 !important; top: 44px; right: 12px; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 6px; background: rgba(238, 224, 198, .96); color: #30281b; pointer-events: auto; }

/* Optional decisions do not add rows to the original four-row table. */
.afro-eights-root.ae-original-look .afro-eights-board.afro-eights-gameplay .afro-eights-human-panel:has(> .ae-draw-decision, > .ae-final-warning) { overflow: visible !important; }
.ae-original-look .afro-eights-human-panel .ae-draw-decision,
.ae-original-look .afro-eights-human-panel .ae-final-warning {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: min(440px, calc(100% - 24px));
  max-height: 34vh;
  max-height: 34dvh;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(130, 104, 62, .6);
  border-radius: 8px;
  background: rgba(238, 224, 198, .98);
  color: #30281b;
  box-shadow: 0 5px 14px rgba(82, 58, 22, .18);
  font-size: 14px;
  line-height: 1.35;
}
.ae-original-look .ae-draw-decision p { margin: 0 0 8px; }
.ae-original-look .ae-draw-decision > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ae-original-look .ae-draw-decision .afro-eights-btn { min-height: 44px; padding: 8px 12px; font-size: 14px; }
.ae-original-look .afro-eights-board > .ae-essential-feedback {
  position: absolute !important;
  z-index: 45 !important;
  top: 45%;
  left: 50%;
  width: min(480px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ae-original-look .ae-essential-feedback .afro-eights-message {
  display: block !important;
  min-height: 0;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #9c4a31;
  background: rgba(246, 232, 205, .98);
  color: #672f20;
  font-size: 15px;
  line-height: 1.4;
}
.ae-original-look .afro-eights-board > .ae-practice-coach {
  position: absolute !important;
  z-index: 35 !important;
  top: 50px;
  left: 12px;
  width: min(340px, calc(100% - 24px));
  max-height: 36vh;
  max-height: 36dvh;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(130, 104, 62, .6);
  border-radius: 8px;
  background: rgba(238, 224, 198, .98);
  color: #30281b;
  text-align: left;
}
.ae-original-look .ae-practice-coach .afro-eights-eyebrow { margin: 0 0 4px; font-size: 11px; }
.ae-original-look .ae-practice-coach h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.1; }
.ae-original-look .ae-practice-coach p { margin: 0; font-size: 14px; line-height: 1.35; }
.ae-original-look .ae-practice-coach .ae-modal-actions { justify-content: flex-start; margin-top: 10px; gap: 6px; }
.ae-original-look .ae-practice-coach .afro-eights-btn { min-height: 44px; padding: 8px 10px; font-size: 13px; }

/* Interaction-only affordances leave the resting appearance unchanged. */
.afro-eights-root.ae-original-look :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.afro-eights-root.ae-original-look.afro-eights-no-hints button.afro-eights-card:focus-visible { outline: 3px solid #6f5019 !important; outline-offset: 3px !important; }
.afro-eights-root.ae-original-look.has-large-cards { --ae-hand-card-width: clamp(118px, 10vw, 136px); }
.afro-eights-root.ae-original-look.has-reduced-motion *,
.afro-eights-root.ae-original-look.has-reduced-motion *::before,
.afro-eights-root.ae-original-look.has-reduced-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  .afro-eights-root.ae-original-look *, .afro-eights-root.ae-original-look *::before, .afro-eights-root.ae-original-look *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 600px) {
  .ae-original-look .ae-store-preview,
  .ae-original-look .ae-online-choices { grid-template-columns: minmax(0, 1fr); }
  .ae-original-look .afro-eights-board > .ae-practice-coach { max-height: 28vh; max-height: 28dvh; }
  .ae-original-look .ae-dialog-scroll .afro-eights-rank-table :is(th, td) { padding: 8px 6px; font-size: 12px; }
}
@media (orientation: portrait) {
  .afro-eights-root.ae-original-look.has-large-cards { --ae-hand-card-width: clamp(94px, 26vw, 112px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .afro-eights-root.ae-original-look.has-large-cards { --ae-hand-card-width: 88px; }
}

/* Opponent motion only: the resting table and original artwork are unchanged. */
.afro-eights-card-play-anim.ae-observed-card {
  position: fixed !important;
  z-index: 2147483651 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: 0 5px 13px rgba(61, 42, 18, .28) !important;
  transform-origin: 0 0 !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  contain: layout paint style !important;
  pointer-events: none !important;
  will-change: transform;
}
.ae-observed-card > .ae-flight-face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
}
.ae-observed-card > .ae-flight-back {
  background-color: #fff;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.ae-observed-card > .ae-flight-front { background: #fff !important; }
.afro-eights-card-back-mini.ae-flight-source-hidden,
.afro-eights-card.ae-flight-source-hidden { visibility: hidden !important; }
.afro-eights-player-panel.ae-observed-playing,
.afro-eights-player-panel.ae-observed-drawing {
  outline: 2px solid rgba(167, 132, 57, .7);
  outline-offset: 2px;
}
.afro-eights-observed-move-toast.ae-observed-caption {
  max-width: min(260px, calc(100vw - 24px));
  white-space: normal !important;
  text-align: center;
  background: rgba(238, 224, 198, .97) !important;
  color: #4b391b !important;
  border-color: rgba(130, 104, 62, .6) !important;
  box-shadow: 0 3px 9px rgba(82, 58, 22, .16) !important;
  animation: none !important;
}