/* Warm fantasy theme. The replaceable background comes from website-config.php. */
:root { color-scheme: dark; --gold: #e9c785; --ink: #f3e6d2; --muted: #c5b199; --line: #ba8b5945; }
body { background: #241c19; color: var(--ink); }
.site-background { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; pointer-events: none; }
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(#211b2038,#1c14175c); z-index: -1; pointer-events: none; }
a { color: var(--gold); }
.platform-header { min-height: 64px; padding: 12px 28px; background: #2e2527ed; border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); gap: 28px; }
.platform-brand { color: #f3dfbc; font-size: 16px; letter-spacing: 1px; }
.platform-header nav { gap: 24px; }
.platform-header nav a { color: #dfcbb2; padding: 9px 0; }
.platform-header nav a:hover { color: #fff3da; }
.platform-layout { max-width: 1160px; margin: 24px auto; gap: 18px; }
.platform-content { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #493226eb; box-shadow: 0 18px 60px #160d134d; }
/* Keep the shared three-column layout on every page, including the toplist. */
.platform-layout.has-left,.platform-layout.has-right { max-width: 1560px; }
.platform-layout.has-left.has-right { grid-template-columns: 220px minmax(0,1fr) 260px; }
.platform-layout.is-toplist:not(.has-left):not(.has-right) { max-width: 940px; }
.lobby-hero { padding: 24px; border-color: var(--line); border-radius: 8px; background: linear-gradient(120deg,#88604055,#38272588); }
.lobby-hero h1 { font-size: clamp(27px,3vw,40px); letter-spacing: -1px; margin: 14px 0; }
.lobby-hero em,.lobby-heading h2 { color: #f3dfbc; }
.lobby-hero>small,.lobby-hero p,.lobby-hero>span { color: var(--muted); }
.lobby-heading { gap: 12px; }
.lobby-heading h2 { font-size: 20px; }
.lobby-heading>span { color: var(--muted); }

/* Fixed maximum tile width: a single game never stretches across the lobby. */
.game-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,180px)); gap: 14px; justify-content: start; }
.game-card { position: relative; display: flex; flex-direction: column; aspect-ratio: 1; min-width: 0; border-radius: 10px; border-color: #c7985555; background: linear-gradient(145deg,#6e4937,#302326); box-shadow: 0 5px 14px #190f1733; }
.game-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.game-art { height: auto; min-height: 0; flex: 1; font-size: 54px; background: radial-gradient(ellipse,#bd904544,transparent 70%); text-shadow: 0 4px 15px #0005; }
.game-art img { display: block; width: 100%; height: 100%; max-height: 118px; padding: 10px 18px 2px; object-fit: contain; filter: drop-shadow(0 8px 10px #120b0a99); transition: transform .2s ease,filter .2s ease; }
.game-card:hover .game-art img { transform: translateY(-2px) scale(1.045); filter: drop-shadow(0 11px 13px #120b0ab3); }
.game-card-copy { padding: 8px 12px 12px; }
.game-card-copy small,.game-card-copy p { display: none; }
.game-card h3 { font-size: 15px; margin: 0 0 7px; color: #ffe0a1; overflow-wrap: anywhere; }
.game-card strong { font-size: 10px; margin: 0; color: #d6c0a2; }

.platform-content .vp { max-width: none; }
.platform-content .vp-hero:after { display: none; }
.platform-content .vp-flow { margin-top: 16px; gap: 8px; }
.platform-content .vp-flow span { padding: 10px 12px; background: #271d1c66; border-color: var(--line); color: var(--muted); }
.platform-content .vp-wallet { padding: 14px 18px; margin-top: 14px; gap: 24px; background: #302321aa; border-color: var(--line); border-radius: 8px; }
.platform-content .vp-wallet strong { font-size: 24px; }
.platform-content .vp-community-bar { margin-top: 18px; padding: 16px; background: #6b48364d; border-color: var(--line); border-radius: 8px; }
.platform-content .vp-community-bar h2 { font-size: 20px; margin: 8px 0; }
.platform-content .vp-community-bar p { margin: 8px 0; }
.platform-content .vp-tools { gap: 10px; margin-top: 20px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.platform-content .vp-tools label:first-child { grid-column: 1/-1; }
.platform-content .vp-list { gap: 12px; }
.platform-content .vp-card { padding: 16px; border: 1px solid #c6945755; border-radius: 8px; background: linear-gradient(110deg,#6a4834aa,#453029dd); gap: 12px; }
.platform-content .vp-card h3 { color: #f5e3c4; font-size: 20px; }
.platform-content .vp-card p { color: #d0bda7; margin: 8px 0; }
.platform-content .vp-meta { color: #d3b991; letter-spacing: .6px; }
.platform-content .vp-rank { color: #d9b37b; }
.platform-content .vp-score { border: 1px solid #99b27866; background: #78945425; color: #d3e8af; padding: 12px; border-radius: 6px; min-width: 130px; }
.platform-content .vp-score strong { font-size: 25px; }
.platform-content .vp-score small { color: #c5d4b0; }
.platform-content .vp-card-media { max-width: 600px; }
.platform-content .vp-card-actions { border-top-color: var(--line); padding-top: 12px; }
.platform-content .vp-card-actions button { padding: 10px 12px; }
.platform-content .vp button { background: #d4af72; border-color: #e7c78f; color: #302319; }
.platform-content .vp .vp-secondary,.platform-content .vp-card-actions button+button { background: #35251f55; color: #ead1a7; border-color: #bd925f88; }
.platform-content .vp input,.platform-content .vp select,.platform-content .vp textarea { background: #2f2320; border-color: #a481555e; color: #f1e2cb; }
.platform-content .vp label,.platform-content .vp-panel>p,.platform-content .vp-community-bar p,.platform-content .vp [data-ui=cooldown] { color: var(--muted); }
.platform-content .vp-panel,.platform-content .vp-review,.platform-content .vp-facts>div,.platform-content .vp-rules { background: #352620; border-color: var(--line); }
.platform-content .vp .vp-image-frame,.platform-content .vp .vp-video-frame iframe { background: #241b19; }
.vp-list-status { display: grid; gap: 5px; text-align: right; color: var(--muted); font-size: 11px; }
.vp-list-status [data-ui=reset] { color: #eac581; }
.platform-footer { color: #e3ccb0; text-shadow: 0 1px 4px #000; }
.platform-content .vp-hero { padding: 16px 18px; }
.platform-content .vp-hero h1 { font-size: 28px; margin: 10px 0; }
.platform-content .vp-hero p { max-width: none; margin: 8px 0 0; }
.platform-content .vp-account-panel { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #30232188; }
.vp-account-panel summary { color: var(--gold); font-size: 12px; cursor: pointer; }
.platform-content .vp .vp-coin-shop { border-color: var(--line); background: linear-gradient(135deg,#493326,#302321); }
.platform-content .vp .vp-coin-shop-heading small { color: #d3b991; }
.platform-content .vp .vp-coin-shop-heading h2 { color: #f3dfbc; }
.platform-content .vp .vp-coin-shop-heading p { color: var(--muted); }
.platform-content .vp .vp-coin-package { border-color: var(--line); background: #291f1b; }
.platform-content .vp .vp-coin-package-featured { border-color: #d4af72; background: linear-gradient(145deg,#6a4834,#453029); box-shadow: 0 0 0 1px #d4af7226,0 10px 28px #160d1355; }
.platform-content .vp .vp-coin-package small { color: #d6c0a2; }
.platform-content .vp .vp-coin-package strong { color: #ffe0a1; }
.platform-content .vp .vp-coin-package strong span { color: var(--muted); }
.platform-content .vp .vp-coin-package b { color: var(--ink); }
.platform-content .vp .vp-admin-contact { border-left-color: #d4af72; background: #6b48364d; color: var(--muted); }
.platform-content .vp .vp-admin-contact span,.platform-content .vp .vp-admin-contact strong { color: #ffe0a1; }
.platform-content .vp [data-ui=notice]:empty { display: none; }
.platform-content .fp-auth,.platform-layout .fp-chat,.platform-layout .fp-ranking { background: #302321ed; border-color: var(--line); color: var(--ink); }
.platform-content .fp-auth input,.platform-layout .fp-chat textarea { background: #211a18; border-color: #ab825752; }
.platform-content .fp-auth button { background: #d4af72; color: #302319; }
.platform-content .fp-auth-tabs button { background: transparent; color: var(--muted); }
.platform-content .fp-auth-tabs button[aria-pressed=true] { background: #d4af72; color: #302319; }
.platform-content .fp-auth small { color: var(--muted); }
.platform-layout .fp-ranking th { background: #3c2a22; color: var(--muted); }
@media(max-width:1050px) {
  .platform-layout.has-left.has-right { grid-template-columns: 1fr 1fr; }
}
@media(max-width:750px) {
  .platform-header { padding: 14px 16px; gap: 16px; }
  .platform-content { padding: 14px; }
  .platform-content .vp-tools { grid-template-columns: 1fr 1fr; }
  .platform-content .vp-card { padding: 12px; }
  .platform-content .vp-score { justify-self: start; }
  .platform-content .vp-flow { display: flex; }
  .lobby-heading { align-items: flex-start; }
  .vp-list-status { max-width: 50%; font-size: 10px; }
}
@media(max-width:420px) {
  .game-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .game-art { font-size: 40px; }
  .game-art img { max-height: 104px; padding: 8px 12px 0; }
  .game-card h3 { font-size: 13px; }
  .game-card-copy { padding: 6px 9px 10px; }
  .platform-content .vp-community-buttons { grid-template-columns: 1fr; }
}

/* Private messages use the same warm palette, including every message state. */
.platform-content .pm { container-type: inline-size; }
.platform-content .pm-layout { grid-template-columns: minmax(0,1fr); }
.platform-content .pm .pm-inbox,.platform-content .pm .pm-thread { background: #352620; border-color: var(--line); }
.platform-content .pm h2,.platform-content .pm-transfer h3,.platform-content .pm-bubble strong { color: #f3dfbc; }
.platform-content .pm label,.platform-content .pm-empty,.platform-content .pm-inbox p,.platform-content .pm small,.platform-content .pm-transfer>p { color: var(--muted); }
.platform-content .pm input,.platform-content .pm textarea { background: #241b19; border-color: #a481555e; color: var(--ink); }
.platform-content .pm button { background: #d4af72; border-color: #e7c78f; color: #302319; }
.platform-content .pm-inbox form { border-color: var(--line); }
.platform-content .pm .pm-conversation { background: #291f1b; color: var(--ink); border-color: var(--line); }
.platform-content .pm .pm-conversation.is-active { background: #644832; border-color: #d4af72; }
.platform-content .pm .pm-thread header button,.platform-content .pm [data-ui=transfer-cancel] { background: transparent; color: var(--gold); border-color: #bd925f88; }
.platform-content .pm .pm-bubble { background: #291e1a; border-color: #ba8b5945; }
.platform-content .pm .pm-bubble.mine { background: #624532; border-color: #c7985566; }
.platform-content .pm .pm-transfer { background: #413025; border-color: #b38b565c; }
.platform-content .pm .pm-transfer-receipt { background: linear-gradient(125deg,#735333,#3c2b23); border-color: #c29c5e; }
.platform-content .pm .pm-transfer-receipt>strong { color: #ffe0a1; }
@container (min-width: 680px) {
  .platform-content .pm-layout { grid-template-columns: 220px minmax(0,1fr); }
}
.platform-header .fp-wallet,.platform-header .fp-auth-account { background: #352620; border-color: #ba8b5945; color: #f3e6d2; }
.platform-header .fp-wallet strong { color: #e9c785; }
.platform-header .fp-auth-account button { background: #493326; border-color: #bd925f88; color: #ead1a7; }