/* cbasino.com — lacquer night, gold marquee. Shares the Macau identity of the games. */

@font-face { font-family: 'Oswald'; font-weight: 500; font-display: swap; src: url('/fonts/oswald-500.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 600; font-display: swap; src: url('/fonts/oswald-600.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 700; font-display: swap; src: url('/fonts/oswald-700.woff2') format('woff2'); }
@font-face { font-family: 'Yellowtail'; font-display: swap; src: url('/fonts/yellowtail.woff2') format('woff2'); }
@font-face {
  font-family: 'MaShan'; font-display: swap;
  src: url('/fonts/mashan-subset.woff2') format('woff2');
  unicode-range: U+597D, U+767C, U+798F, U+8CA1, U+904B;
}

:root {
  --night: #0d0405;
  --lacquer: #1c0b0d;
  --lacquer-2: #140708;
  --silk: #8a1e24;
  --silk-deep: #47090d;
  --gold: #eec656;
  --gold-pale: #f5d67c;
  --gold-deep: #b78c2c;
  --ivory: #f6f0e4;
  --jade: #4fd9a2;
  --seal-red: #b8232e;
  --hairline: rgba(238, 198, 86, .26);
  --oswald: 'Oswald', 'Arial Narrow', sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  background:
    radial-gradient(90rem 40rem at 50% -12rem, rgba(138, 30, 36, .32), transparent 62%),
    radial-gradient(50rem 26rem at 50% 0, rgba(238, 198, 86, .05), transparent 60%),
    var(--night);
  color: var(--ivory);
  font-family: var(--body);
  line-height: 1.55;
  min-height: 100vh;
}

main, .hero, footer { width: min(1080px, 92vw); margin-inline: auto; }

a { color: var(--gold-pale); }

/* ---------- hero ---------- */

.hero { text-align: center; padding: clamp(3rem, 8vh, 5.5rem) 0 1rem; }

.eyebrow {
  font-family: var(--oswald); font-weight: 500; font-size: .82rem;
  letter-spacing: .42em; text-transform: uppercase; color: var(--gold-pale);
  opacity: .85;
}

.marquee {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.8rem, 3vw, 1.6rem);
  margin: 1.1rem 0 .2rem;
  padding: .4rem 0 .6rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.marquee::before, .marquee::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--hairline);
}
.marquee::before { top: 4px; }
.marquee::after { bottom: 4px; }

.marquee h1 {
  font-family: var(--oswald); font-weight: 700;
  font-size: clamp(3.2rem, 13vw, 7rem);
  letter-spacing: .14em; line-height: 1.05;
  padding-left: .14em; /* optically recenter tracked caps */
  background: linear-gradient(178deg, #fff3cd 8%, var(--gold) 38%, #9a7222 62%, var(--gold-pale) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(238, 198, 86, .28));
}

.coin { width: clamp(30px, 5.5vw, 52px); height: auto; animation: sway 6s ease-in-out infinite alternate; }
.coin.flip { animation-delay: -3s; }
@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

.script {
  font-family: 'Yellowtail', cursive;
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  color: var(--gold-pale);
  transform: rotate(-2deg);
  text-shadow: 0 0 18px rgba(238, 198, 86, .35);
  margin-top: .3rem;
}

.thesis {
  max-width: 56ch; margin: 1.4rem auto 0;
  color: rgba(246, 240, 228, .82); font-size: 1.02rem;
}

.cta {
  display: inline-block; margin-top: 1.8rem;
  font-family: var(--oswald); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  color: #221803;
  background: linear-gradient(180deg, #ffe9a8, var(--gold) 55%, var(--gold-deep));
  padding: .85rem 2.4rem; border-radius: 999px;
  box-shadow: 0 4px 22px rgba(238, 198, 86, .3), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(238, 198, 86, .45), inset 0 1px 0 rgba(255, 255, 255, .55); }

/* ---------- section titles ---------- */

.rule-title {
  display: flex; align-items: center; gap: 1.2rem;
  font-family: var(--oswald); font-weight: 600;
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-pale);
  margin: clamp(3rem, 8vh, 5rem) 0 1.6rem; text-align: center;
}
.rule-title::before, .rule-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline));
}
.rule-title::after { background: linear-gradient(90deg, var(--hairline), transparent); }
.rule-title span { display: inline-flex; align-items: center; gap: .8rem; }

.seal {
  font-family: 'MaShan', serif; font-style: normal; font-size: 1.25rem;
  color: #ffe9a8; background: linear-gradient(160deg, #c93340, var(--seal-red) 60%, #8f1721);
  border: 1px solid rgba(255, 214, 140, .5); border-radius: 6px;
  width: 2rem; height: 2rem; display: inline-grid; place-items: center;
  letter-spacing: 0;
}

/* ---------- the floor: machine cabinets ---------- */

.cabinets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
}

.cabinet {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, #241013, var(--lacquer-2) 70%);
  border: 1px solid var(--hairline);
  border-radius: 26px 26px 12px 12px;
  padding: 12px 12px 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cabinet.open { box-shadow: 0 0 34px rgba(138, 30, 36, .45), 0 0 0 1px rgba(238, 198, 86, .12); }
.cabinet.open:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 44px rgba(138, 30, 36, .6), 0 0 0 1px rgba(238, 198, 86, .3);
}
.cabinet.soon { opacity: .74; }

.screen {
  border-radius: 18px 18px 8px 8px;
  aspect-ratio: 5 / 3.4;
  display: flex; align-items: center; justify-content: center; gap: 10%;
  position: relative; overflow: hidden;
  border: 1px solid rgba(238, 198, 86, .18);
}
.screen.felt {
  background: radial-gradient(120% 130% at 50% 20%, var(--silk) 0%, var(--silk-deep) 78%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(238, 198, 86, .14);
}
.screen.dark {
  background: radial-gradient(120% 130% at 50% 25%, #201014, #0a0304 80%);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .7);
}

/* dice showing 6-5: yo eleven, a come-out winner */
.die {
  width: 26%; aspect-ratio: 1; background: linear-gradient(160deg, #fff, #e7e0d2);
  border-radius: 18%; box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  display: grid; grid-template: repeat(3, 1fr) / repeat(2, 1fr);
  padding: 13px; gap: 4px;
  transform: rotate(-9deg);
}
.die i { background: #22171a; border-radius: 50%; place-self: center; width: min(100%, 14px); aspect-ratio: 1; }
.die.five { grid-template: repeat(3, 1fr) / repeat(3, 1fr); transform: rotate(7deg); }
.die.five i:nth-child(1) { grid-area: 1 / 1; }
.die.five i:nth-child(2) { grid-area: 1 / 3; }
.die.five i:nth-child(3) { grid-area: 2 / 2; }
.die.five i:nth-child(4) { grid-area: 3 / 1; }
.die.five i:nth-child(5) { grid-area: 3 / 3; }

.yo {
  position: absolute; right: 7%; bottom: 6%;
  font-family: 'Yellowtail', cursive; font-size: clamp(1rem, 2.4vw, 1.4rem);
  color: var(--gold-pale); text-shadow: 0 0 12px rgba(238, 198, 86, .5);
  transform: rotate(-6deg);
}

/* playing cards */
.card {
  width: 24%; aspect-ratio: 5 / 7; background: linear-gradient(165deg, #fdfaf2, #e9e2d2);
  border-radius: 10%/7%; box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
  font-family: var(--oswald); font-weight: 600; font-size: clamp(1rem, 2.6vw, 1.5rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.card em { font-style: normal; font-size: .8em; }
.card.black { color: #22171a; transform: rotate(-8deg) translateX(12%); }
.card.red { color: #b8232e; transform: rotate(7deg) translateX(-12%); }
.card.mini { width: 15%; font-size: clamp(.7rem, 1.7vw, 1rem); border-radius: 14%/10%; }
.card.mini:nth-child(odd) { transform: rotate(-4deg); }
.card.mini:nth-child(even) { transform: rotate(3deg); }
.card.back {
  background: linear-gradient(160deg, #a02531, #6d1019);
  box-shadow: inset 0 0 0 2px rgba(238, 198, 86, .45), 0 5px 12px rgba(0, 0, 0, .5);
}

/* roulette wheel */
.wheel {
  width: 46%; aspect-ratio: 1; border-radius: 50%; position: relative;
  background: conic-gradient(#8a1e24 0 20deg, #16090b 20deg 40deg, #8a1e24 40deg 60deg, #16090b 60deg 80deg,
    #8a1e24 80deg 100deg, #16090b 100deg 120deg, #8a1e24 120deg 140deg, #16090b 140deg 160deg,
    #8a1e24 160deg 180deg, #16090b 180deg 200deg, #8a1e24 200deg 220deg, #16090b 220deg 240deg,
    #8a1e24 240deg 260deg, #16090b 260deg 280deg, #8a1e24 280deg 300deg, #16090b 300deg 320deg,
    #8a1e24 320deg 340deg, #16090b 340deg 360deg);
  box-shadow: inset 0 0 0 3px var(--gold-deep), inset 0 0 0 12% rgba(0, 0, 0, .0), 0 6px 18px rgba(0, 0, 0, .5);
}
.wheel::after {
  content: ''; position: absolute; inset: 26%;
  border-radius: 50%; background: radial-gradient(circle at 38% 30%, #2c1a1d, #120809);
  box-shadow: 0 0 0 2px var(--gold-deep);
}
.wheel b {
  position: absolute; top: 12%; left: 58%; width: 9%; aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #fff, #cfc9bb);
  border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* cabinet plates */
.plate { padding: .9rem .5rem 0; text-align: left; }
.plate h3 {
  font-family: var(--oswald); font-weight: 600; font-size: 1.25rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-pale);
  margin: .45rem 0 .25rem;
}
.plate p { font-size: .84rem; color: rgba(246, 240, 228, .68); }
.plate .edge {
  margin-top: .6rem; font-family: var(--oswald); font-weight: 500; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 240, 228, .5);
}
.plate .edge b { color: var(--gold); font-weight: 600; }

.status {
  font-family: var(--oswald); font-weight: 600; font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase;
  padding: .22rem .7rem; border-radius: 999px;
  border: 1px solid rgba(246, 240, 228, .25); color: rgba(246, 240, 228, .55);
}
.status.live {
  background: linear-gradient(180deg, #ffe9a8, var(--gold));
  border-color: transparent; color: #221803;
  box-shadow: 0 0 14px rgba(238, 198, 86, .45);
}

/* ---------- hall of fortune ---------- */

.totals { text-align: center; font-size: .9rem; color: rgba(246, 240, 228, .55); margin-bottom: 1.4rem; min-height: 1.4em; }
.totals b { color: var(--jade); font-weight: 600; }

.boards {
  background: linear-gradient(180deg, #241013, var(--lacquer-2) 80%);
  border: 1px solid var(--hairline); border-radius: 18px;
  max-width: 620px; margin: 0 auto; overflow: hidden;
}

.tabs { display: flex; border-bottom: 1px solid var(--hairline); }
.tab {
  flex: 1; background: none; border: none; cursor: pointer;
  font-family: var(--oswald); font-weight: 600; font-size: .85rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(246, 240, 228, .5); padding: .9rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--ivory); }
.tab.active { color: var(--gold-pale); border-bottom-color: var(--gold); }

.board { list-style: none; padding: .4rem 0; min-height: 200px; }
.board li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .48rem 1.4rem; font-size: .98rem;
}
.board li:nth-child(even) { background: rgba(238, 198, 86, .035); }
.board .rank {
  font-family: var(--oswald); font-weight: 600; width: 2.2ch;
  text-align: right; color: rgba(246, 240, 228, .4); flex-shrink: 0;
}
.board li:nth-child(1) .rank { color: #ffe9a8; text-shadow: 0 0 10px rgba(238, 198, 86, .6); }
.board li:nth-child(2) .rank { color: var(--gold); }
.board li:nth-child(3) .rank { color: #c98d4b; }
.board .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .val { font-family: var(--oswald); font-weight: 600; color: var(--gold-pale); letter-spacing: .04em; }
.board .empty, .board .error {
  display: block; text-align: center; padding: 4rem 1rem; color: rgba(246, 240, 228, .45);
  font-size: .95rem;
}

/* claim card */
.claim {
  max-width: 620px; margin: 1.4rem auto 0;
  background:
    linear-gradient(180deg, rgba(238, 198, 86, .1), rgba(238, 198, 86, .03)),
    linear-gradient(180deg, #241013, var(--lacquer-2));
  border: 1px solid rgba(238, 198, 86, .4); border-radius: 18px;
  padding: 1.5rem 1.6rem;
}
.claim h3 {
  font-family: var(--oswald); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-pale); font-size: 1rem;
}
.claim p { font-size: .86rem; color: rgba(246, 240, 228, .66); margin-top: .35rem; }
#claim-form { display: flex; gap: .7rem; margin-top: 1rem; }
#handle {
  flex: 1; min-width: 0; background: rgba(13, 4, 5, .7);
  border: 1px solid var(--hairline); border-radius: 10px;
  color: var(--ivory); font-family: var(--oswald); font-weight: 500;
  font-size: 1.05rem; letter-spacing: .06em; padding: .6rem .9rem;
}
#handle:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
#claim-form button {
  font-family: var(--oswald); font-weight: 600; font-size: .9rem;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  color: #ffe9a8; border: none; border-radius: 10px; padding: .6rem 1.4rem;
  background: linear-gradient(160deg, #c93340, var(--seal-red) 60%, #8f1721);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .5), 0 3px 12px rgba(184, 35, 46, .4);
  transition: transform .15s ease;
}
#claim-form button:hover { transform: translateY(-1px); }
.claim-done p { font-size: 1rem; color: var(--ivory); margin: 0; }
.claim-done b { color: var(--gold-pale); font-family: var(--oswald); letter-spacing: .05em; }
.linkish {
  background: none; border: none; color: rgba(246, 240, 228, .5);
  text-decoration: underline; cursor: pointer; font-size: .85rem; padding: 0; margin-left: .5rem;
}
.linkish:hover { color: var(--ivory); }

/* ---------- footer ---------- */

footer {
  margin-top: clamp(3.5rem, 9vh, 6rem); padding: 2rem 0 2.6rem;
  border-top: 1px solid var(--hairline);
  text-align: center; font-size: .86rem; color: rgba(246, 240, 228, .5);
}
footer b { color: var(--gold-pale); }
footer p + p { margin-top: .4rem; }

/* ---------- small screens & motion ---------- */

@media (max-width: 560px) {
  .cabinets { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .plate p:not(.edge) { display: none; }
  #claim-form { flex-direction: column; }
  .board li { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .coin { animation: none; }
  .cta, .cabinet, #claim-form button { transition: none; }
}