/* Goa Trip theme. Everything is scoped to html[data-skin="goa"], so classic games look exactly as before. */

html[data-skin="goa"] {
  --goa-sky-top: #1e1b4b;
  --goa-sky-mid: #5b21b6;
  --goa-sunset: #f97316;
  --goa-coral: #fb7185;
  --goa-sand: #fde68a;
  --goa-teal: #2dd4bf;
  --goa-sea: #0e4f63;
  --goa-sea-deep: #062c3b;
  --goa-card: rgba(9, 22, 38, 0.78);
  --card: var(--goa-card);
  --card-soft: var(--goa-card);
  --accent: #fbbf24;
  --accent-strong: #fb7185;
  --border-subtle: rgba(94, 234, 212, 0.26);
  background: #0b1026;
}

html[data-skin="goa"] body {
  background:
    linear-gradient(180deg,
      #0d1030 0%,
      #1c1747 22%,
      #3d2a5c 42%,
      #6b3f63 52%,
      #9c5a54 58%,
      #c07a4f 64%,
      #0e4f63 66%,
      #062c3b 100%);
  background-attachment: fixed;
}

html[data-skin="goa"] .app {
  position: relative;
  z-index: 1;
}

/* ---------- Scenery (fixed behind the page) ---------- */

.goa-scene,
.gs-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.gs-scene {
  position: absolute;
}

.goa-stars {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 28% 8%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.4px 1.4px at 46% 22%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 63% 12%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.2px 1.2px at 78% 26%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 90% 6%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 6% 34%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 55% 36%, rgba(255, 255, 255, 0.4), transparent);
  animation: goa-twinkle 5s ease-in-out infinite alternate;
}
@keyframes goa-twinkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* the setting sun sits on the horizon (66% of the screen height) */
.goa-sun {
  position: absolute;
  left: 50%;
  top: 66%;
  width: min(46vw, 320px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Low evening sun: warm amber disc fading into haze, no white-hot core. */
  background: radial-gradient(circle at 50% 50%,
    #ffcf96 0%, #fbb673 34%, #f0a065 44%,
    rgba(226, 134, 94, 0.55) 50%, rgba(198, 110, 94, 0.3) 58%,
    rgba(160, 86, 94, 0.12) 70%, transparent 82%);
  filter: blur(1.2px);
  opacity: 0.72;
  animation: goa-sun-glow 10s ease-in-out infinite alternate;
}
@keyframes goa-sun-glow {
  from { opacity: 0.54; transform: translate(-50%, -50%) scale(0.99); }
  to { opacity: 0.66; transform: translate(-50%, -50%) scale(1.02); }
}

.goa-birds {
  position: absolute;
  top: 16%;
  right: 12%;
  width: 90px;
  color: rgba(15, 10, 40, 0.7);
  animation: goa-birds 26s linear infinite;
}
@keyframes goa-birds {
  0% { transform: translate(40px, 10px); }
  50% { transform: translate(-60px, -6px); }
  100% { transform: translate(40px, 10px); }
}

.goa-sea {
  position: absolute;
  left: 0;
  right: 0;
  top: 66%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(14, 79, 99, 0.94), #062c3b 60%, #041f2b);
  overflow: hidden;
}
/* sunlight glittering on the water under the sun */
.goa-shimmer {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(48vw, 300px);
  height: 100%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(253, 224, 71, 0.55) 0 2px, transparent 2px 9px);
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000 0%, transparent 100%);
  animation: goa-shimmer 3.2s ease-in-out infinite alternate;
}
@keyframes goa-shimmer {
  from { opacity: 0.45; transform: translateX(-50%) scaleX(0.9); }
  to { opacity: 0.85; transform: translateX(-50%) scaleX(1.08); }
}

/* waves: wide tiles moved with transform only (cheap for phones) */
.goa-wave {
  position: absolute;
  left: 0;
  width: calc(100% + 600px);
  background-repeat: repeat-x;
  background-size: 600px 100%;
  will-change: transform;
}
.goa-wave.w1 {
  bottom: 18%;
  height: 34px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q75 8 150 22 T300 22 T450 22 T600 22 V40 H0Z' fill='%23115e75'/%3E%3C/svg%3E");
  animation: goa-wave 16s linear infinite;
}
.goa-wave.w2 {
  bottom: 7%;
  height: 44px;
  opacity: 0.75;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q75 4 150 20 T300 20 T450 20 T600 20 V40 H0Z' fill='%230b4a5e'/%3E%3Cpath d='M0 20 Q75 4 150 20 T300 20 T450 20 T600 20' fill='none' stroke='%2399f6e4' stroke-opacity='0.35' stroke-width='2'/%3E%3C/svg%3E");
  animation: goa-wave 11s linear infinite reverse;
}
.goa-wave.w3 {
  bottom: -4px;
  height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q75 2 150 18 T300 18 T450 18 T600 18 V40 H0Z' fill='%23063547'/%3E%3Cpath d='M0 18 Q75 2 150 18 T300 18 T450 18 T600 18' fill='none' stroke='%23ffffff' stroke-opacity='0.45' stroke-width='2.5'/%3E%3C/svg%3E");
  animation: goa-wave 8s linear infinite;
}
@keyframes goa-wave {
  from { transform: translateX(0); }
  to { transform: translateX(-600px); }
}

.goa-palm {
  position: absolute;
  bottom: -6px;
  height: min(48vh, 420px);
  width: auto;
  color: #07061a;
  opacity: 0.92;
  transform-origin: 50% 100%;
}
.goa-palm.left {
  left: -80px;
  animation: goa-sway 7s ease-in-out infinite alternate;
}
.goa-palm.right {
  right: -90px;
  height: min(40vh, 360px);
}
/* the mirrored palm uses an inline scaleX(-1); sway it with rotate on its group instead */
.goa-palm.right g {
  transform-origin: 50% 100%;
  animation: goa-sway-g 8s ease-in-out infinite alternate;
}
@keyframes goa-sway {
  from { transform: rotate(-1.2deg); }
  to { transform: rotate(1.4deg); }
}
@keyframes goa-sway-g {
  from { transform: rotate(-1.5deg); }
  to { transform: rotate(1deg); }
}

/* ---------- Page chrome ---------- */

html[data-skin="goa"] .topbar {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.9), rgba(8, 47, 73, 0.88));
  border-color: rgba(251, 146, 60, 0.45);
}
html[data-skin="goa"] .title::after,
html[data-skin="goa"] .topbar-title::after {
  content: " \1F334";
  letter-spacing: 0;
}
html[data-skin="goa"] .card {
  backdrop-filter: blur(6px);
}
html[data-skin="goa"] .btn:not(.btn-secondary):not(.btn-danger) {
  background: linear-gradient(135deg, #fcd34d, #fb923c 55%, #fb7185);
}
html[data-skin="goa"] .btn-glow:not([disabled]) {
  box-shadow: 0 8px 22px rgba(251, 113, 133, 0.35);
}
html[data-skin="goa"] .app-footer .icon {
  color: #fb7185;
}

/* current number = the setting sun, with horizon stripes across its lower part */
html[data-skin="goa"] .current-number-pill {
  background:
    linear-gradient(180deg, transparent 73%, rgba(46, 16, 60, 0.6) 73% 77%, transparent 77% 84%, rgba(46, 16, 60, 0.6) 84% 87%, transparent 87% 93%, rgba(46, 16, 60, 0.6) 93% 95%, transparent 95%),
    linear-gradient(180deg, #fff7ad 0%, #fde047 28%, #fb923c 62%, #f43f5e 100%);
  color: #4a1d05;
  box-shadow: 0 0 0 5px rgba(251, 146, 60, 0.16), 0 12px 40px rgba(249, 115, 22, 0.7);
}

/* ---------- Player ticket ---------- */

html[data-skin="goa"] .ticket-shell {
  background: radial-gradient(circle at top, rgba(14, 79, 99, 0.55) 0, rgba(4, 20, 32, 0.95) 80%);
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.12), 0 0 26px rgba(45, 212, 191, 0.22), 0 12px 30px rgba(2, 6, 23, 0.8);
}
html[data-skin="goa"] .ticket-shell::before,
html[data-skin="goa"] .ticket-shell::after {
  border-color: rgba(94, 234, 212, 0.45);
}
html[data-skin="goa"] .ticket-cell {
  background: rgba(6, 30, 44, 0.92);
  border-color: rgba(94, 234, 212, 0.35);
}
html[data-skin="goa"] .ticket-cell.currentCalled {
  border-color: #2dd4bf;
  background: rgba(20, 184, 166, 0.3);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.7), 0 0 12px rgba(45, 212, 191, 0.35);
}
html[data-skin="goa"] .ticket-cell.markedManual {
  border-color: #fb923c;
  background: radial-gradient(circle at 30% 20%, #fff7ed, #fdba74 55%, #fb923c);
  color: #4a1d05;
  box-shadow: 0 3px 10px rgba(251, 146, 60, 0.35);
}
html[data-skin="goa"] .achievement-badge.earned {
  background: radial-gradient(circle at 30% 20%, #fff7ed, #fdba74);
  border-color: rgba(251, 146, 60, 0.9);
  color: #4a1d05;
}
html[data-skin="goa"] .winner-list,
html[data-skin="goa"] .info-row {
  background: rgba(4, 20, 32, 0.6);
  border-color: rgba(94, 234, 212, 0.22);
}
html[data-skin="goa"] .winner-header svg {
  color: #fb923c;
}
html[data-skin="goa"] .ticket-title::after {
  content: " \1F3DD\FE0F";
}
html[data-skin="goa"] .icon-btn {
  background: rgba(8, 30, 48, 0.9);
  border-color: rgba(94, 234, 212, 0.45);
}
.ocean-btn[data-on="true"] {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.8);
}

/* ---------- Prize card / reveal toast accents ---------- */

html[data-skin="goa"] .prize-card {
  background:
    radial-gradient(circle at 50% 118%, rgba(253, 224, 71, 0.4), rgba(249, 115, 22, 0.25) 28%, transparent 52%),
    linear-gradient(180deg, rgba(30, 27, 75, 0.97) 0%, rgba(91, 33, 120, 0.95) 55%, rgba(8, 47, 73, 0.97) 100%);
  border-color: rgba(251, 146, 60, 0.7);
  box-shadow: 0 -12px 60px rgba(251, 113, 133, 0.22), 0 26px 70px rgba(0, 0, 0, 0.9);
}
/* little palm + wave in the corners */
html[data-skin="goa"] .prize-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cg fill='%2307061a' fill-opacity='0.8'%3E%3Cpath d='M26 80c1-20 3-38 8-52h3c-4 14-6 32-6 52z'/%3E%3Cpath d='M35 28c-8-8-20-8-30-2 10-2 20 0 30 4z'/%3E%3Cpath d='M35 28c-4-10-14-16-24-16 9 4 16 9 22 17z'/%3E%3Cpath d='M36 28c4-10 12-16 22-17-8 4-14 10-19 18z'/%3E%3Cpath d='M36 29c8-5 18-4 24 2-8-2-16-2-23 0z'/%3E%3Cpath d='M35 29c-2 8-8 13-14 16 6-6 9-11 11-17z'/%3E%3C/g%3E%3C/svg%3E") left 10px bottom 0 / 46px 62px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cg fill='%2307061a' fill-opacity='0.8'%3E%3Cpath d='M26 80c1-20 3-38 8-52h3c-4 14-6 32-6 52z'/%3E%3Cpath d='M35 28c-8-8-20-8-30-2 10-2 20 0 30 4z'/%3E%3Cpath d='M35 28c-4-10-14-16-24-16 9 4 16 9 22 17z'/%3E%3Cpath d='M36 28c4-10 12-16 22-17-8 4-14 10-19 18z'/%3E%3Cpath d='M36 29c8-5 18-4 24 2-8-2-16-2-23 0z'/%3E%3Cpath d='M35 29c-2 8-8 13-14 16 6-6 9-11 11-17z'/%3E%3C/g%3E%3C/svg%3E") right 4px bottom 0 / 36px 48px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q37 0 75 10 T150 10 T225 10 T300 10 V20 H0Z' fill='%232dd4bf' fill-opacity='0.22'/%3E%3C/svg%3E") left bottom / 300px 16px repeat-x;
  pointer-events: none;
  z-index: -1; /* behind the card's text (the card is its own stacking context) */
}
html[data-skin="goa"] .prize-medal {
  background: radial-gradient(circle at 30% 22%, #fff7ad, #fde047 40%, #fb923c 75%, #f43f5e);
  box-shadow: 0 0 0 6px rgba(251, 146, 60, 0.16), 0 14px 38px rgba(249, 115, 22, 0.65);
}
html[data-skin="goa"] .prize-title {
  background: linear-gradient(180deg, #fff7ed 10%, #fdba74 55%, #fb7185);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 6px 22px rgba(251, 146, 60, 0.35));
}
html[data-skin="goa"] .prize-eyebrow {
  color: #99f6e4;
}
html[data-skin="goa"] .prize-number {
  background: radial-gradient(circle at 30% 20%, #fff7ed, #fdba74 60%, #fb923c);
  box-shadow: 0 6px 16px rgba(251, 146, 60, 0.45);
}
html[data-skin="goa"] .prize-progress span {
  background: linear-gradient(90deg, #2dd4bf, #fbbf24, #fb7185);
}

html[data-skin="goa"] .reveal-toast {
  background:
    radial-gradient(circle at 0% 100%, rgba(249, 115, 22, 0.25), transparent 40%),
    linear-gradient(135deg, rgba(30, 27, 75, 0.98), rgba(8, 47, 73, 0.98));
  border-color: rgba(251, 146, 60, 0.5);
}
html[data-skin="goa"] .reveal-toast-icon {
  color: #4a1d05;
  background: linear-gradient(180deg, #fde047, #fb923c 70%, #f43f5e);
  border-color: rgba(253, 186, 116, 0.7);
}
html[data-skin="goa"] .reveal-toast-sub {
  color: #99f6e4;
}

/* ---------- Full Housie: Goa Champion ---------- */

html[data-skin="goa"] .fh-overlay {
  background:
    radial-gradient(circle at 50% 108%, rgba(253, 224, 71, 0.55), rgba(249, 115, 22, 0.35) 22%, transparent 48%),
    linear-gradient(180deg, rgba(20, 15, 51, 0.96) 0%, rgba(91, 33, 120, 0.94) 55%, rgba(8, 47, 73, 0.96) 100%);
}
html[data-skin="goa"] .fh-rays {
  background: repeating-conic-gradient(rgba(251, 146, 60, 0.12) 0deg 9deg, transparent 9deg 22deg);
}
html[data-skin="goa"] .fh-trophy {
  color: #fbbf24;
  filter: drop-shadow(0 12px 40px rgba(251, 146, 60, 0.75));
}
html[data-skin="goa"] .fh-letter {
  background: linear-gradient(180deg, #fff7ed 5%, #fde047 40%, #fb923c 75%, #fb7185 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-skin="goa"] .fh-eyebrow {
  color: #99f6e4;
}
html[data-skin="goa"] .fh-number {
  background: radial-gradient(circle at 30% 20%, #fff7ed, #fdba74 60%, #fb923c);
}
html[data-skin="goa"] .fh-btn {
  background: linear-gradient(135deg, #fde047, #fb923c 55%, #fb7185);
}

/* ---------- Welcome splash ---------- */

.goa-splash {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: linear-gradient(180deg, #140f33 0%, #2a1a5e 22%, #6b2a7a 42%, #c2410c 58%, #f59e0b 64%, #0e4f63 66%, #062c3b 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.goa-splash.show {
  opacity: 1;
}
.goa-splash.hide {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.goa-splash .goa-sun {
  width: min(70vw, 420px);
  animation: gs-sunset 9s ease-out both, goa-sun-glow 10s 9s ease-in-out infinite alternate;
}
@keyframes gs-sunset {
  from { transform: translate(-50%, -80%) scale(0.9); opacity: 0.35; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 0.66; }
}
.gs-content {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 18px 20px;
  border-radius: 28px;
  background: rgba(12, 10, 40, 0.42);
  border: 1px solid rgba(253, 186, 116, 0.28);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(7, 6, 26, 0.55);
  color: #fff;
}
.gs-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #99f6e4;
  opacity: 0;
  animation: gs-rise 0.6s 0.3s ease-out forwards;
}
.gs-title {
  margin: 0;
  font-size: clamp(34px, 11vw, 54px);
  font-weight: 900;
  line-height: 1.02;
  background: linear-gradient(180deg, #fff7ed 10%, #fde047 45%, #fb923c 80%, #fb7185);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(251, 146, 60, 0.45));
  opacity: 0;
  animation: gs-drop 0.8s 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.gs-name {
  font-size: clamp(20px, 6.5vw, 28px);
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  animation: gs-rise 0.6s 0.9s ease-out forwards;
}
.gs-sub {
  font-size: 14px;
  color: #fde7cf;
  opacity: 0;
  animation: gs-rise 0.6s 1.1s ease-out forwards;
}
.gs-prizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 2px;
}
.gs-prize {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #ccfbf1;
  background: rgba(8, 47, 73, 0.65);
  border: 1px solid rgba(45, 212, 191, 0.4);
  white-space: nowrap;
  opacity: 0;
  animation: gs-rise 0.5s forwards;
  animation-delay: calc(1.3s + var(--i) * 0.12s);
}
.gs-prize b {
  color: #fde68a;
  font-weight: 700;
}
.gs-btn {
  margin-top: 8px;
  padding: 14px 38px;
  border: none;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1f1235;
  cursor: pointer;
  background: linear-gradient(135deg, #fde047, #fb923c 55%, #fb7185);
  box-shadow: 0 14px 36px rgba(251, 113, 133, 0.5);
  opacity: 0;
  animation: gs-rise 0.6s 1.9s ease-out forwards, gs-pulse 2.4s 2.6s ease-in-out infinite;
}
.gs-btn:active {
  transform: translateY(1px) scale(0.98);
}
.gs-btn:focus-visible {
  outline: 2px solid #fef08a;
  outline-offset: 3px;
}
@keyframes gs-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gs-drop {
  from { opacity: 0; transform: translateY(-30px) scale(1.15); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gs-pulse {
  0%, 100% { box-shadow: 0 14px 36px rgba(251, 113, 133, 0.45); }
  50% { box-shadow: 0 14px 46px rgba(253, 224, 71, 0.7); }
}

/* ---------- Host panel ---------- */

.goa-banner {
  display: none;
}
html[data-skin="goa"] .goa-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 0% 50%, rgba(253, 224, 71, 0.35), transparent 30%),
    linear-gradient(90deg, rgba(194, 65, 12, 0.85), rgba(107, 42, 122, 0.85) 45%, rgba(14, 79, 99, 0.9));
  border: 1px solid rgba(253, 186, 116, 0.45);
  box-shadow: 0 12px 30px rgba(7, 6, 26, 0.45);
}
.goa-banner-title {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.goa-banner-sub {
  font-size: 12px;
  color: #fde7cf;
}
.goa-banner-prizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.goa-banner-prizes span {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(7, 6, 26, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  color: #ccfbf1;
}
.goa-banner-prizes b {
  color: #fde68a;
}
html[data-skin="goa"] .current-number-card {
  background:
    radial-gradient(circle at 0% 100%, rgba(253, 224, 71, 0.35), transparent 45%),
    linear-gradient(135deg, rgba(194, 65, 12, 0.6), rgba(107, 42, 122, 0.55) 50%, rgba(8, 47, 73, 0.9));
  border-color: rgba(251, 146, 60, 0.6);
  box-shadow: 0 14px 30px rgba(7, 6, 26, 0.6);
}
html[data-skin="goa"] .current-number-label {
  color: #fde68a;
}
html[data-skin="goa"] .num-cell {
  background: rgba(6, 30, 44, 0.9);
  border-color: rgba(94, 234, 212, 0.28);
}
html[data-skin="goa"] .num-cell.called {
  background: radial-gradient(circle at 30% 15%, #fff7ed, #fdba74 60%, #fb923c);
  border-color: rgba(251, 146, 60, 0.9);
  color: #4a1d05;
  box-shadow: 0 2px 8px rgba(251, 146, 60, 0.3);
}
html[data-skin="goa"] .draw-dock {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.96), rgba(8, 47, 73, 0.96));
  border-color: rgba(251, 146, 60, 0.45);
  /* float above the ocean strip instead of sitting in the water */
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
html[data-skin="goa"] .draw-dock-number {
  background: linear-gradient(180deg, #fff7ad 0%, #fde047 28%, #fb923c 62%, #f43f5e 100%);
  color: #4a1d05;
}
html[data-skin="goa"] .reveal-card,
html[data-skin="goa"] .dialog-card {
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.98), rgba(8, 30, 48, 0.98));
  border-color: rgba(251, 146, 60, 0.45);
}
.reveal-row-goa {
  display: block;
  font-size: 11px;
  color: #fde68a;
  font-weight: 600;
}

/* ---------- Calm mode ---------- */
@media (prefers-reduced-motion: reduce) {
  .goa-stars,
  .goa-sun,
  .goa-birds,
  .goa-shimmer,
  .goa-wave,
  .goa-shore .goa-wave,
  .goa-palm,
  .goa-palm.right g,
  .goa-splash .goa-sun,
  .gs-btn { animation: none !important; }
  .gs-eyebrow,
  .gs-title,
  .gs-name,
  .gs-sub,
  .gs-prize { animation: none !important; opacity: 1 !important; }
  .gs-btn { opacity: 1; }
}

/* Player & host pages: the ocean strip at the bottom of the screen. It stays above the page, so
   when the lists grow the page scrolls behind the waves and the sea is always there. */
.goa-shore {
  display: none;
}
html[data-skin="goa"] body[data-page="host"] {
  /* the page scrolls behind the waves; this keeps the last card clear of them */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
html[data-skin="goa"] body[data-page="player"] .goa-shore,
html[data-skin="goa"] body[data-page="host"] .goa-shore {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: calc(88px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  pointer-events: none;
  /* solid sea under the wave crests */
  background: linear-gradient(180deg, transparent 0, transparent 34px, #0c566c 34px, #0b4a60 100%);
}
.goa-shore .goa-wave.w1 {
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  height: 36px;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q75 8 150 22 T300 22 T450 22 T600 22 V40 H0Z' fill='%231c7f95'/%3E%3Cpath d='M0 22 Q75 8 150 22 T300 22 T450 22 T600 22' fill='none' stroke='%2399f6e4' stroke-opacity='0.5' stroke-width='2'/%3E%3C/svg%3E");
  animation: goa-wave 12s linear infinite;
}
.goa-shore .goa-wave.w2 {
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  height: 44px;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q75 4 150 20 T300 20 T450 20 T600 20 V40 H0Z' fill='%23136a80'/%3E%3Cpath d='M0 20 Q75 4 150 20 T300 20 T450 20 T600 20' fill='none' stroke='%23ccfbf1' stroke-opacity='0.6' stroke-width='2'/%3E%3C/svg%3E");
  animation: goa-wave 8s linear infinite reverse;
}
.goa-shore .goa-wave.w3 {
  bottom: -6px;
  height: calc(52px + env(safe-area-inset-bottom, 0px));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q75 2 150 18 T300 18 T450 18 T600 18 V40 H0Z' fill='%230c566c'/%3E%3Cpath d='M0 18 Q75 2 150 18 T300 18 T450 18 T600 18' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='3'/%3E%3C/svg%3E");
  animation: goa-wave 6s linear infinite;
}
/* the sun's glitter reaches the shore too */
.goa-shore .goa-shimmer {
  top: 40px;
  height: 60px;
  opacity: 0.5;
}

/* narrow phones: smaller palms so they never crowd the ticket */
@media (max-width: 480px) {
  .goa-palm { height: 34vh; }
  .goa-palm.right { height: 28vh; }
  .goa-palm.left { left: -70px; }
  .goa-palm.right { right: -80px; }
  .goa-birds { width: 70px; top: 10%; }
}