:root {
  --bg: #06100d;
  --panel: #0b1915;
  --panel-2: #10231d;
  --line: rgba(183, 255, 216, .12);
  --green: #32e981;
  --green-dark: #147a45;
  --cream: #f3f0df;
  --muted: #91a89e;
  --red: #f06464;
  --radius: 18px;
  color-scheme: dark;
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
body, button, input, dialog, small, strong, span, b { font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; font-variant-numeric: lining-nums tabular-nums; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--cream); overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .14; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.18) .5px, transparent .7px); background-size: 7px 7px; mask-image: linear-gradient(to bottom, black, transparent 90%); }

.topbar { height: 82px; max-width: 1320px; margin: auto; padding: 0 32px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; margin-left: auto; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(50,233,129,.35); border-radius: 12px; transform: rotate(45deg); background: rgba(50,233,129,.08); }
.brand-mark img { width: 25px; height: 25px; transform: rotate(-45deg); object-fit: contain; }
.brand b { display: block; font-size: 21px; letter-spacing: -.5px; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.wallet { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.wallet img { width: 18px; height: 18px; }.wallet span { color: var(--muted); font-size: 12px; }

.hero { min-height: 590px; max-width: 1320px; padding: 80px 7%; margin: auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; position: relative; }
.hero::before { content: "18"; position: absolute; inset: 10px auto auto 42%; color: transparent; -webkit-text-stroke: 1px rgba(50,233,129,.05); font-size: 390px; font-weight: 900; line-height: 1; z-index: -1; }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.hero h1 { margin: 18px 0 22px; font-size: clamp(48px, 6.6vw, 92px); line-height: .98; letter-spacing: -4px; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-copy > p { color: var(--muted); max-width: 500px; font-size: 18px; line-height: 1.9; }
.stat-row { display: flex; align-items: center; gap: 18px; margin-top: 34px; color: var(--muted); font-size: 13px; }
.stat-row b { color: var(--cream); font-size: 24px; margin-left: 4px; }.stat-row i { width: 1px; height: 26px; background: var(--line); }
.hero-cards { height: 430px; position: relative; display: grid; place-items: center; perspective: 1000px; }
.show-card { width: 230px; height: 330px; position: absolute; border-radius: 22px; }
.art-card { z-index: 2; padding: 18px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(50,233,129,.55); background: linear-gradient(150deg, #142a22, #08120f); box-shadow: 0 35px 90px rgba(0,0,0,.48), inset 0 0 50px rgba(50,233,129,.06); transform: rotate(5deg); }
.art-card::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--line); border-radius: 15px; }
.art-card span { align-self: flex-start; color: var(--green); font: 700 13px monospace; }.art-card img { width: 170px; height: 205px; margin: 3px 0; object-fit: contain; filter: drop-shadow(0 0 18px rgba(50,233,129,.18)); }.art-card b { font-size: 18px; }.art-card small { color: var(--muted); margin-top: 7px; }
.back-card { z-index: 1; transform: translate(-88px, 28px) rotate(-12deg); border: 1px solid var(--line); background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(50,233,129,.06) 8px, rgba(50,233,129,.06) 9px), #0c1c17; }
.orbit { position: absolute; border: 1px solid rgba(50,233,129,.12); border-radius: 50%; }.orbit-one { width: 410px; height: 410px; }.orbit-two { width: 330px; height: 330px; border-style: dashed; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.lobby-shell { max-width: 1320px; margin: auto; padding: 60px 32px 90px; border-top: 1px solid var(--line); }
.section-heading, .room-head, .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.room-head-actions { display: flex; align-items: center; gap: 8px; }
.section-heading h2, .room-head h1 { margin: 7px 0 0; font-size: clamp(28px, 4vw, 46px); }
.primary, .secondary, .danger, .ghost { border: 0; border-radius: 11px; padding: 12px 18px; font-weight: 700; transition: .2s ease; }
.primary { color: #03120b; background: var(--green); box-shadow: 0 8px 28px rgba(50,233,129,.14); }.primary:hover { background: #63f3a0; transform: translateY(-1px); }
.secondary, .ghost { color: var(--cream); background: var(--panel-2); border: 1px solid var(--line); }.secondary:hover, .ghost:hover { border-color: rgba(50,233,129,.5); }
.danger { color: #ffdede; background: rgba(240,100,100,.13); border: 1px solid rgba(240,100,100,.22); }
.rooms-grid { min-height: 180px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.room-card { min-height: 190px; padding: 22px; position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: .2s; }
.room-card:hover { border-color: rgba(50,233,129,.35); transform: translateY(-3px); }.room-card::after { content: ""; position: absolute; width: 100px; height: 100px; left: -35px; top: -35px; border-radius: 50%; background: rgba(50,233,129,.05); }
.room-card-top { display: flex; justify-content: space-between; align-items: center; }.status { padding: 5px 9px; color: var(--green); background: rgba(50,233,129,.08); border-radius: 30px; font-size: 11px; }.room-card h3 { font-size: 21px; margin: 22px 0 8px; }.room-card p { color: var(--muted); font-size: 13px; }.room-card-footer { display: flex; align-items: center; gap: 13px; margin-top: 20px; }.room-card-footer button { margin-right: auto; padding: 8px 14px; }.mini-stat { font-size: 12px; color: var(--muted); }.empty-state { grid-column: 1/-1; display: grid; place-items: center; min-height: 180px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.rules-strip { max-width: 1320px; margin: 0 auto 80px; padding: 0 32px; display: grid; grid-template-columns: repeat(3,1fr); }.rules-strip > div { padding: 28px; border: 1px solid var(--line); border-left: 0; }.rules-strip > div:first-child { border-radius: 0 var(--radius) var(--radius) 0; }.rules-strip > div:last-child { border-left: 1px solid var(--line); border-radius: var(--radius) 0 0 var(--radius); }.rules-strip span { color: var(--green); font: 12px monospace; }.rules-strip b { display: block; margin: 16px 0 8px; font-size: 17px; }.rules-strip p { color: var(--muted); margin: 0; font-size: 13px; }

.room-view { max-width: 1450px; margin: auto; padding: 36px 28px 60px; }.room-head { margin-bottom: 24px; }.room-head p { color: var(--muted); margin: 8px 0 0; }.live-dot { color: var(--green); font-size: 11px; }.live-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.game-layout { display: grid; grid-template-columns: 260px minmax(480px, 1fr) 230px; gap: 16px; align-items: start; }.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }.panel-title { padding-bottom: 14px; border-bottom: 1px solid var(--line); }.panel-title h2 { margin: 0; font-size: 16px; }.panel-title span { color: var(--muted); font-size: 11px; }
.panel-action { padding: 5px 8px; color: var(--green); border: 1px solid rgba(50,233,129,.25); border-radius: 7px; background: rgba(50,233,129,.06); font-size: 10px; font-weight: 700; }
.rank-direction { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(50,233,129,.2); border-radius: 8px; background: rgba(50,233,129,.06); }
.rank-direction svg { width: 15px; height: 15px; fill: var(--green); }
.members-list { display: grid; gap: 8px; margin-top: 14px; }.member { padding: 11px; border-radius: 11px; background: rgba(255,255,255,.025); border: 1px solid transparent; }.member.active { border-color: rgba(50,233,129,.35); background: rgba(50,233,129,.06); }.member-main { display: flex; align-items: center; gap: 9px; }.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 10px; color: var(--green); background: #142a22; font-weight: 800; }.member-name { min-width: 0; }.member-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.member-name small { color: var(--muted); font-size: 10px; }.member-coins { margin-right: auto; font: 11px monospace; color: #d8e7df; }.member-controls { display: flex; gap: 6px; }.role-button, .kick-button { flex: 1; margin-top: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--green); font-size: 10px; }.kick-button { color: #ffaaaa; border-color: rgba(240,100,100,.2); }
.table-wrap { min-width: 0; }.turn-stage { min-height: 58px; display: grid; place-items: center; margin: 4px 8px 18px; }.turn-message { padding: 9px 16px; color: #d6e9df; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); font-size: 12px; }.result-banner { width: min(100%, 560px); padding: 13px; text-align: center; color: #052112; background: var(--green); border-radius: 11px; font-weight: 800; }.turn-stage:has(.result-banner:not(.hidden)) .turn-message { display: none; }.pot-stage { min-height: 138px; display: grid; place-items: start center; padding-top: 26px; margin: 0 8px; border-top: 1px solid var(--line); }.pot { text-align: center; }.pot small { display: block; color: #aac3b7; margin-bottom: 8px; }.pot b { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 31px; }.pot img { width: 27px; height: 27px; }
.hand-area { min-height: 190px; padding: 20px 8px 0; display: flex; justify-content: center; align-items: flex-start; direction: ltr; }.playing-card { width: clamp(75px, 10vw, 120px); aspect-ratio: .72; margin-left: -14px; padding: 8px; position: relative; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(50,233,129,.35); border-radius: 12px; background: linear-gradient(145deg,#142b23,#091511); box-shadow: 0 12px 22px rgba(0,0,0,.3); transform-origin: bottom; transition: .2s; }.playing-card:hover { transform: translateY(-9px); z-index: 2; }.playing-card img { width: 73%; height: 70%; object-fit: contain; }.playing-card b { margin-top: auto; text-align: center; font-size: clamp(9px, 1.2vw, 12px); }.playing-card small { position: absolute; top: 6px; left: 7px; color: var(--green); font: 9px monospace; }.card-back { background: repeating-linear-gradient(45deg, #0c1c17, #0c1c17 7px, #143426 7px, #143426 8px); }.hand-note { align-self: center; color: var(--muted); text-align: center; }
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 8px 28px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }.action-tile { min-height: 58px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; color: var(--cream); border: 1px solid var(--line); border-radius: 11px; background: #10231d; font-weight: 700; transition: .2s ease; }.action-tile:hover { border-color: rgba(50,233,129,.5); transform: translateY(-1px); }.action-tile:disabled { opacity: .4; cursor: not-allowed; transform: none; }.fold-action { color: #ffb8b8; border-color: rgba(240,100,100,.24); background: rgba(240,100,100,.08); }.call-action { gap: 9px; }.call-action b { min-width: 34px; padding: 4px 7px; color: var(--green); border-radius: 7px; background: rgba(50,233,129,.09); font-size: 12px; }.amount-action button { align-self: stretch; flex: 1; padding: 0 10px; color: inherit; border: 0; background: transparent; font-weight: 700; cursor: pointer; }.amount-action input { width: 58px; align-self: stretch; padding: 0 6px; color: var(--green); text-align: center; border: 0; border-right: 1px solid var(--line); background: #081510; outline: none; }.amount-action:focus-within { border-color: var(--green); }.rank-list { margin-top: 12px; display: grid; gap: 4px; }.rank-item { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 8px; }.rank-item:hover { background: rgba(50,233,129,.05); }.rank-item img { width: 25px; height: 29px; object-fit: contain; }.rank-item b { font-size: 11px; }
.bargain-box { margin: 0 8px 12px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(50,233,129,.3); border-radius: 13px; background: rgba(50,233,129,.06); }.bargain-box b, .bargain-box small { display: block; }.bargain-box small, .waiting-vote { margin-top: 4px; color: var(--muted); font-size: 11px; }.vote-actions { display: flex; gap: 7px; }

dialog { width: min(92vw, 430px); padding: 0; color: var(--cream); border: 1px solid rgba(50,233,129,.25); border-radius: 22px; background: #0b1915; box-shadow: 0 25px 80px #000; }dialog::backdrop { background: rgba(2,8,6,.82); backdrop-filter: blur(8px); }.modal-card { position: relative; padding: 34px; }.modal-card h2 { font-size: 28px; margin: 10px 0; }.modal-card p { color: var(--muted); line-height: 1.7; font-size: 13px; }.modal-card label { display: grid; gap: 8px; margin: 22px 0; font-size: 12px; color: #c8d7d0; }.modal-card input { width: 100%; padding: 13px; color: var(--cream); background: #07120e; border: 1px solid var(--line); border-radius: 10px; outline: none; }.modal-card input:focus { border-color: var(--green); }.wide { width: 100%; }.modal-icon { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(50,233,129,.05); }.modal-icon img { width: 40px; height: 40px; }.close-modal { position: absolute; left: 20px; top: 20px; border: 0; color: var(--muted); background: transparent; font-size: 26px; }.toast { position: fixed; z-index: 20; bottom: 25px; left: 50%; padding: 11px 18px; border: 1px solid var(--line); border-radius: 10px; background: #16261f; box-shadow: 0 12px 35px #000; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast.error { border-color: rgba(240,100,100,.5); color: #ffd1d1; }
.rules-modal h3 { margin: 24px 0 8px; }.rules-modal ol { padding-right: 22px; columns: 2; color: #cfddd6; font-size: 12px; line-height: 2; }

@media (max-width: 1050px) { .game-layout { grid-template-columns: 220px 1fr; }.info-panel { grid-column: 1/-1; }.rank-list { grid-template-columns: repeat(3,1fr); }.hero { padding-inline: 4%; }.rooms-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 740px) { .topbar { height: 70px; padding: 0 16px; }.brand small { display: none; }.ghost { padding: 9px; font-size: 11px; }.wallet span { display: none; }.hero { min-height: 700px; padding: 45px 20px; grid-template-columns: 1fr; text-align: center; }.hero h1 { letter-spacing: -2px; }.hero-copy > p { margin-inline: auto; }.stat-row { justify-content: center; }.hero-cards { height: 340px; }.show-card { width: 175px; height: 250px; }.art-card img { width: 130px; height: 147px; }.orbit-one { width: 300px; height: 300px; }.orbit-two { width: 245px; height: 245px; }.lobby-shell { padding: 45px 16px; }.rooms-grid { grid-template-columns: 1fr; }.rules-strip { padding: 0 16px; grid-template-columns: 1fr; }.rules-strip > div, .rules-strip > div:last-child { border: 1px solid var(--line); border-bottom: 0; border-radius: 0; }.rules-strip > div:first-child { border-radius: var(--radius) var(--radius) 0 0; }.rules-strip > div:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }.room-view { padding: 25px 12px; }.room-head { align-items: end; }.game-layout { display: flex; flex-direction: column; }.table-wrap { width: 100%; order: -1; }.game-table { height: 290px; border-radius: 42% / 19%; }.players-panel, .info-panel { width: 100%; }.members-list { grid-template-columns: repeat(2,1fr); }.rank-list { grid-template-columns: repeat(2,1fr); }.actions { flex-wrap: wrap; }.actions > button { flex: 1; }.raise-control { flex: 1 1 100%; }.raise-control input { flex: 1; }.raise-control button { flex: 2; }.hand-area { min-height: 140px; }.playing-card { margin-left: -20px; }.section-heading { align-items: end; }.section-heading .primary { padding: 10px; font-size: 12px; } }
@media (max-width: 740px) { .game-table { height: 230px; border-radius: 0; }.raise-control, .bargain-control { flex: 1 1 100%; }.raise-control input, .bargain-control input { flex: 1; }.raise-control button, .bargain-control button { flex: 2; }.bargain-box { align-items: stretch; flex-direction: column; }.vote-actions button { flex: 1; }.room-head-actions { flex-direction: column; align-items: stretch; } }
@media (max-width: 740px) { .turn-stage { margin-bottom: 12px; }.hand-area { padding-top: 16px; }.actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }.action-tile { min-height: 54px; }.pot-stage { min-height: 120px; padding-top: 22px; } }

dialog { max-height: 88vh; overflow-y: auto; scrollbar-width: none; }
dialog::-webkit-scrollbar { display: none; }
.strength-dialog { width: min(92vw, 620px); }
.strength-list { display: grid; gap: 8px; margin-top: 22px; }
.strength-list article { padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.strength-list strong { font-size: 14px; }
.strength-list span { color: var(--green); font-size: 11px; font-weight: 700; }
.example-hand { display: flex; justify-content: center; direction: ltr; }
.example-hand i { width: 40px; height: 54px; display: grid; place-items: center; margin-left: -5px; border: 1px solid rgba(50,233,129,.25); border-radius: 7px; background: linear-gradient(145deg,#142b23,#091511); box-shadow: 0 5px 10px rgba(0,0,0,.22); }
.example-hand img { width: 75%; height: 75%; object-fit: contain; }
.example-caption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 9px; }
.example-hand { display: flex; align-items: center; justify-content: center; gap: 3px; direction: ltr; }
.example-hand i { width: 27px; height: 38px; display: grid; place-items: center; flex: none; border: 1px solid rgba(50,233,129,.22); border-radius: 5px; background: #0a1713; }
.example-hand img { width: 20px; height: 29px; object-fit: contain; }
.counter-offer { display: flex; direction: ltr; }
.counter-offer input { width: 78px; padding: 0 6px; color: var(--green); border: 1px solid var(--line); border-radius: 9px 0 0 9px; background: #081510; outline: none; }
.counter-offer button { border-radius: 0 9px 9px 0; }
.counter-list { width: 100%; display: grid; gap: 8px; }
.counter-row { padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.counter-decisions { display: flex; gap: 7px; margin-top: 8px; }

@media (max-width: 740px) {
  #rulesButton, #strengthButton { padding: 7px; font-size: 9px; }
  .wallet { padding: 7px; }
  .vote-actions { flex-wrap: wrap; }
  .counter-offer { flex: 1 1 100%; }
  .counter-offer input { flex: 1; }
}

.actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 6px; }
.action-tile { min-height: 46px; font-size: 11px; }
.all-in-action { color: #d7ffe8; border-color: rgba(50,233,129,.28); }
.call-action, .amount-action { flex-direction: column; gap: 2px; }
.call-action b { min-width: 30px; padding: 1px 5px; font-size: 10px; }
.amount-action button { width: 100%; min-height: 25px; padding: 2px 4px; font-size: 10px; }
.amount-action input { width: 100%; height: 19px; padding: 0 3px; border-top: 1px solid var(--line); border-right: 0; font-size: 10px; }

@media (max-width: 740px) {
  .actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-inline: 0; padding: 4px; }
  .action-tile { min-height: 42px; border-radius: 8px; font-size: 8px; }
  .call-action b, .amount-action button, .amount-action input { font-size: 8px; }
  .amount-action button { padding-inline: 1px; }
}

.room-admin-actions { display: flex; gap: 6px; margin: 10px 0 4px; }
.room-admin-actions .panel-action { min-height: 32px; flex: 1; margin: 0; border-radius: 8px; }
.lock-mark { padding: 4px 7px; color: #d5b96c; border: 1px solid rgba(213,185,108,.2); border-radius: 20px; background: rgba(213,185,108,.06); font-size: 9px; }
.voice-button.voice-active { color: #07130f; border-color: var(--green); background: var(--green); }
.member-main { min-height: 34px; }
.member-name b { font-size: 13px; transition: color .2s, text-shadow .2s; }
.host-member { border-color: rgba(50,233,129,.48); box-shadow: inset 0 0 22px rgba(50,233,129,.08), 0 0 14px rgba(50,233,129,.08); }
.host-member .member-name b { color: var(--green); text-shadow: 0 0 12px rgba(50,233,129,.55); }
.bot-member { opacity: .58; background: rgba(145,168,158,.035); }
.bot-member .member-name b { color: #82978e; }
.spectator-member { background: rgba(102,156,255,.055); border-color: rgba(102,156,255,.12); }
.spectator-member .member-name b { color: #8eb7de; }
.offline-member { opacity: .38; }
.member { position: relative; touch-action: pan-y; user-select: none; transition: transform .16s ease, border-color .2s, background .2s; }
.member.swiping { border-color: rgba(240,100,100,.5); background: rgba(240,100,100,.14); box-shadow: -45px 0 35px rgba(240,100,100,.1); }

@media (max-width: 740px) {
  .topbar { min-height: 70px; height: auto; flex-wrap: wrap; gap: 6px; padding-block: 9px; }
  .topbar .brand { order: 1; flex: 1 1 calc(100% - 105px); }
  .topbar .wallet { order: 1; flex: 0 0 auto; }
  #rulesButton, #strengthButton, #leaveButton { order: 2; flex: 1 1 28%; min-width: 0; margin: 0; white-space: nowrap; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-mark img { width: 20px; height: 20px; }
}

@media (max-width: 740px) {
  #rulesButton, #strengthButton, #voiceButton, #leaveButton { order: 2; flex: 1 1 21%; min-width: 0; margin: 0; padding-inline: 4px; white-space: nowrap; font-size: 8px; }
}

.ad-grid { max-width: 1320px; margin: 0 auto 24px; padding: 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ad-board { min-height: 96px; display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; overflow: hidden; border: 1px dashed rgba(50,233,129,.34); border-radius: 14px; background: linear-gradient(135deg, rgba(50,233,129,.045), rgba(11,25,21,.7)); }
.ad-board { color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.ad-board:hover { transform: translateY(-2px); border-color: rgba(50,233,129,.7); background: linear-gradient(135deg, rgba(50,233,129,.08), rgba(11,25,21,.82)); }
.ad-image { width:100%;height:100%;position:absolute;inset:0;z-index:2;object-fit:fill;border-radius:inherit; }
.has-ad > span,.has-ad > div { opacity:0; }
.homepage-ads { padding-top: 24px; margin-bottom: 0; }
.room-ads { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; padding: 0; }
.homepage-ads .ad-board { min-height: 0; aspect-ratio: 728 / 90; }
.room-ads .ad-board { min-height: 0; aspect-ratio: 320 / 100; }
.homepage-ads { --ad-width: "728"; --ad-height: "90"; }
.room-ads { --ad-width: "320"; --ad-height: "100"; }
.ad-board small { display: grid; justify-items: start; gap: 5px; }
.ad-dimensions { display: block; position: absolute; inset: 6px; margin: 0; border: 1px solid rgba(50,233,129,.11); border-radius: 9px; pointer-events: none; opacity: .72; }
.homepage-ads .ad-dimensions::before, .room-ads .ad-dimensions::before { content: var(--ad-width); width: 100%; height: 14px; display: grid; place-items: center; position: absolute; top: -7px; left: 0; padding: 0; color: #86a596; background: linear-gradient(rgba(134,165,150,.42),rgba(134,165,150,.42)) center / 100% 1px no-repeat, linear-gradient(45deg,transparent 43%,#86a596 44% 56%,transparent 57%) left top / 8px 7px no-repeat, linear-gradient(-45deg,transparent 43%,#86a596 44% 56%,transparent 57%) left bottom / 8px 7px no-repeat, linear-gradient(-45deg,transparent 43%,#86a596 44% 56%,transparent 57%) right top / 8px 7px no-repeat, linear-gradient(45deg,transparent 43%,#86a596 44% 56%,transparent 57%) right bottom / 8px 7px no-repeat; white-space: nowrap; line-height: 10px; font-size: 8px; font-weight: 400; text-shadow: 0 0 4px var(--panel),0 0 4px var(--panel); }
.homepage-ads .ad-dimensions::after, .room-ads .ad-dimensions::after { content: var(--ad-height); width: 14px; height: 100%; display: grid; place-items: center; position: absolute; top: 0; right: -7px; padding: 0; color: #86a596; background: linear-gradient(to bottom,rgba(134,165,150,.42),rgba(134,165,150,.42)) center / 1px 100% no-repeat, linear-gradient(135deg,transparent 43%,#86a596 44% 56%,transparent 57%) left top / 7px 8px no-repeat, linear-gradient(45deg,transparent 43%,#86a596 44% 56%,transparent 57%) right top / 7px 8px no-repeat, linear-gradient(45deg,transparent 43%,#86a596 44% 56%,transparent 57%) left bottom / 7px 8px no-repeat, linear-gradient(135deg,transparent 43%,#86a596 44% 56%,transparent 57%) right bottom / 7px 8px no-repeat; white-space: nowrap; writing-mode: vertical-rl; line-height: 10px; font-size: 8px; font-weight: 400; text-shadow: 0 0 4px var(--panel),0 0 4px var(--panel); }

@media (min-width: 741px) and (max-width: 1050px) {
  .homepage-ads .ad-board, .room-ads .ad-board { aspect-ratio: 468 / 60; }
  .homepage-ads, .room-ads { --ad-width: "468"; --ad-height: "60"; }
  .room-ads { grid-template-columns: 1fr; }
}
.ad-board::after { display: none; }
.ad-board > span { padding: 4px 7px; color: var(--green); border: 1px solid rgba(50,233,129,.2); border-radius: 6px; font-size: 9px; }
.ad-board div { display: grid; gap: 3px; }.ad-board strong { font-size: 13px; }.ad-board small { color: var(--muted); font: 10px monospace; }
.art-card span, .rules-strip span, .member-coins, .playing-card small, .ad-board small { font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; }
.ad-board small { font-size: 11px; font-weight: 400; }

@media (max-width: 740px) {
  .ad-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .ad-board, .homepage-ads .ad-board, .room-ads .ad-board { min-height: 0; aspect-ratio: 320 / 100; }
  .homepage-ads, .room-ads { --ad-width: "320"; --ad-height: "100"; }
  .room-ads { grid-template-columns: 1fr; padding: 0; }
}

.ad-board { border: 0; }
.homepage-ads .ad-dimensions::before, .room-ads .ad-dimensions::before { width: calc(100% - 12px); background-size: 100% 1px,5px 4px,5px 4px,5px 4px,5px 4px; }
.homepage-ads .ad-dimensions::before, .room-ads .ad-dimensions::before { background-image: linear-gradient(rgba(134,165,150,.42),rgba(134,165,150,.42)),linear-gradient(-45deg,transparent 43%,#86a596 44% 56%,transparent 57%),linear-gradient(45deg,transparent 43%,#86a596 44% 56%,transparent 57%),linear-gradient(45deg,transparent 43%,#86a596 44% 56%,transparent 57%),linear-gradient(-45deg,transparent 43%,#86a596 44% 56%,transparent 57%); }
.homepage-ads .ad-dimensions::after, .room-ads .ad-dimensions::after { height: calc(100% - 12px); top: 12px; background-size: 1px 100%,4px 5px,4px 5px,4px 5px,4px 5px; }
.homepage-ads .ad-dimensions::before, .room-ads .ad-dimensions::before { width: calc(100% - 32px); left: 16px; background-image: linear-gradient(rgba(134,165,150,.5),rgba(134,165,150,.5)); background-size: 100% 1px; }
.homepage-ads .ad-dimensions::after, .room-ads .ad-dimensions::after { height: calc(100% - 32px); top: 16px; background-image: linear-gradient(to bottom,rgba(134,165,150,.5),rgba(134,165,150,.5)); background-size: 1px 100%; }

.ad-board { border: 2px dotted rgba(50,233,129,.36); }
.ad-dimensions { border: 0; opacity: 1; }
.homepage-ads .ad-dimensions::before, .room-ads .ad-dimensions::before,
.homepage-ads .ad-dimensions::after, .room-ads .ad-dimensions::after { display: none; content: none; }
.ad-width-label, .ad-height-label { display: flex; align-items: center; gap: 3px; position: absolute; direction: ltr; color: rgba(134,165,150,.48); font-size: 7px; font-style: normal; font-weight: 400; line-height: 1; }
.ad-width-label { top: 2px; left: 50%; transform: translateX(-50%); }
.ad-height-label { top: 50%; right: 2px; transform: translateY(-50%) rotate(90deg); }
.ad-width-label b, .ad-height-label b, .ad-width-label em, .ad-height-label em { color: inherit; font: inherit; font-style: normal; opacity: 1; }
.ad-width-label b::before { content: var(--ad-width); }
.ad-height-label b::before { content: var(--ad-height); }
.ad-dimensions { opacity: .58; }
.homepage-ads .ad-dimensions::before, .room-ads .ad-dimensions::before { content: ""; height: 1px; top: 0; background: rgba(134,165,150,.55); }
.homepage-ads .ad-dimensions::after, .room-ads .ad-dimensions::after { content: ""; width: 1px; right: 0; background: rgba(134,165,150,.55); }
.ad-width-label, .ad-height-label { display: flex; align-items: baseline; gap: 5px; position: absolute; color: #a8bdb3; direction: ltr; font-size: 9px; font-style: normal; font-weight: 600; white-space: nowrap; }
.ad-width-label { top: 4px; left: 50%; transform: translateX(-50%); }
.ad-height-label { top: 50%; right: 4px; transform: translateY(-50%) rotate(90deg); }
.ad-width-label b::before { content: var(--ad-width); }
.ad-height-label b::before { content: var(--ad-height); }
.ad-width-label em, .ad-height-label em { margin-left: 3px; opacity: .42; font-size: 7px; font-style: normal; font-weight: 400; }
.ad-image { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 2; object-fit: cover; }
.has-ad > span, .has-ad > div { opacity: 0; }
.modal-card select, .modal-card textarea { width: 100%; padding: 12px; color: var(--cream); border: 1px solid var(--line); border-radius: 10px; outline: none; background: #07120e; font: inherit; }
.modal-card select:focus, .modal-card textarea:focus { border-color: var(--green); }
.phone-fields { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.phone-fields label { min-width: 0; }

@media (max-width: 520px) { .phone-fields { grid-template-columns: 1fr; gap: 0; } }
.phone-fields { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.modal-card select,.modal-card textarea { width:100%;padding:12px;color:var(--cream);border:1px solid var(--line);border-radius:10px;background:#07120e;outline:none; }.modal-card textarea { resize:vertical; }
.form-feedback { min-height:20px;margin:4px 0 10px!important;color:var(--muted)!important;font-size:11px!important; }.form-feedback.error { color:#ffaaaa!important; }.form-feedback.success { color:var(--green)!important; }
@media (max-width:520px) { .phone-fields { grid-template-columns:1fr;gap:0; } }
.upload-progress { display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px;margin:9px 0; }.upload-progress > span { height:6px;overflow:hidden;border-radius:20px;background:rgba(145,168,158,.14); }.upload-progress i { width:0;height:100%;display:block;border-radius:inherit;background:var(--green);transition:width .12s linear; }.upload-progress b { min-width:34px;color:var(--green);font-size:10px;text-align:left;direction:ltr; }.form-feedback { min-height:18px;margin:7px 0!important; }.form-feedback.error { color:#ffaaaa!important; }.form-feedback.success { color:var(--green)!important; }
.account-separator { margin:22px 0;text-align:center;border-top:1px solid var(--line); }.account-separator span { position:relative;top:-11px;padding:0 10px;color:var(--muted);background:var(--panel);font-size:10px; }.account-profile { display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px;border:1px solid rgba(50,233,129,.2);border-radius:10px;background:rgba(50,233,129,.05); }.account-profile img { width:44px;height:44px;object-fit:cover;border-radius:50%; }.account-profile b,.account-profile small { display:block; }.account-profile small { margin-top:3px;color:var(--green);font-size:10px; }.login-code-result { margin-top:18px;padding:15px;text-align:center;border:1px solid rgba(50,233,129,.3);border-radius:12px;background:rgba(50,233,129,.06); }.login-code-result small,.login-code-result strong { display:block; }.login-code-result strong { margin:12px 0;color:var(--green);font-size:25px;letter-spacing:4px;direction:ltr; }
@media (max-width:740px) { #rulesButton,#strengthButton,#accountButton,#voiceButton,#leaveButton { order:2;flex:1 1 18%;min-width:0;margin:0;padding-inline:3px;white-space:nowrap;font-size:8px; } }
.dashboard-dialog { width:calc(100vw - 24px);height:calc(100vh - 24px);max-width:none;max-height:none;padding:0;overflow:hidden;border-color:rgba(50,233,129,.3);background:var(--bg); }.dashboard-dialog iframe{width:100%;height:100%;border:0;background:var(--bg)}.close-dashboard{width:34px;height:34px;position:absolute;z-index:3;top:10px;left:10px;color:var(--cream);border:1px solid var(--line);border-radius:9px;background:#10231d;font-size:22px;cursor:pointer}
@media(max-width:740px){#rulesButton,#strengthButton,#accountButton,#dashboardButton,#voiceButton,#leaveButton{order:2;flex:1 1 16%;min-width:0;margin:0;padding-inline:2px;white-space:nowrap;font-size:7px}.dashboard-dialog{width:100vw;height:100vh;border:0;border-radius:0}}
.wealth-section { max-width:1320px;margin:0 auto;padding:34px 32px 54px;border-top:1px solid var(--line); }.wealth-section .section-heading h2 { margin:6px 0 0;font-size:30px; }.wealth-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px; }.wealth-member { display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel); }.wealth-member > span { width:25px;color:var(--green);font-size:10px; }.wealth-member b { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; }.wealth-member strong { margin-right:auto;color:var(--green);font-size:12px; }.wealth-list > p { grid-column:1/-1;color:var(--muted);font-size:12px; }
.wealth-member strong { display:flex;align-items:center;gap:5px; }.wealth-member strong img { width:16px;height:16px;object-fit:contain; }
@media(max-width:740px){.wealth-section{padding:28px 16px 40px}.wealth-list{grid-template-columns:1fr}.wealth-section .section-heading h2{font-size:25px}}
.hero-wealth { grid-template-columns:1fr;max-height:250px;overflow-y:auto;scrollbar-width:none; }.hero-wealth::-webkit-scrollbar{display:none}.diamond-prize{margin-top:8px;padding:5px 9px;color:var(--green);border:1px solid rgba(50,233,129,.2);border-radius:8px;background:rgba(50,233,129,.05);font-size:10px}
.wealth-heading { position:relative;padding:18px 20px 18px 24px;border-right:2px solid var(--green);background:linear-gradient(90deg,transparent,rgba(50,233,129,.055)); }.wealth-heading>span { display:flex;align-items:center;gap:7px;color:var(--green);font-size:10px;font-weight:700;letter-spacing:1px; }.wealth-heading>span img { width:18px;height:18px;object-fit:contain; }.hero .wealth-title { margin:9px 0 4px;font-size:clamp(35px,4.5vw,62px);line-height:1.1;letter-spacing:-2px; }.wealth-title b { color:var(--cream);font-weight:900; }.wealth-title b::after { content:"";display:inline-block;width:32px;height:2px;margin:0 10px 8px;background:var(--green); }.wealth-heading p { margin:0;color:var(--muted);font-size:12px; }.hero-wealth .wealth-member { padding:9px 12px;border-width:0 0 1px;border-radius:0;background:transparent; }.hero-wealth .wealth-member:first-child { border:1px solid rgba(50,233,129,.3);border-radius:10px;background:rgba(50,233,129,.06);box-shadow:inset 0 0 25px rgba(50,233,129,.04); }
@media(max-width:740px){.wealth-heading{text-align:right}.hero .wealth-title{font-size:38px;letter-spacing:-1px}.wealth-heading p{font-size:10px}}
.rules-strip{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.rules-strip>div,.rules-strip>div:first-child,.rules-strip>div:last-child{border:1px solid var(--line);border-radius:12px}
.player-login-qr{display:grid;place-items:center;gap:5px;margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:10px}.player-login-qr img{width:130px;height:130px;object-fit:contain}.player-login-qr small,.account-edits>small{color:var(--muted);font-size:9px}.account-edits{margin-top:18px;padding-top:10px;border-top:1px solid var(--line)}