:root{--bg:#151421;--panel:#211f30;--panel2:#29263a;--text:#f8f5ff;--muted:#aaa4b9;--line:#39354b;--cream:#fff4de;--purple:#7b68db;--coral:#e97466;--yellow:#f0bc55;--mint:#72b99d;--shadow:#0c0b12}
:root[data-theme="light"]{--bg:#fffaf0;--panel:#fff;--panel2:#f4effa;--text:#29263b;--muted:#736e82;--line:#e6ded5;--cream:#fff4de;--purple:#6856c6;--coral:#df6d60;--yellow:#e2a83b;--mint:#62a98e;--shadow:#d9cfbf}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;transition:.25s}a{color:inherit}.topbar{height:78px;max-width:1220px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:26px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:19px;font-weight:800}.brand strong{color:var(--coral)}.brand-mark{width:39px;height:39px;border-radius:12px;background:var(--purple);position:relative;display:inline-block;transform:rotate(-3deg);box-shadow:4px 4px 0 color-mix(in srgb,var(--purple),transparent 72%)}.brand-mark i{position:absolute;width:5px;height:5px;border-radius:50%;background:white;top:12px}.brand-mark i:first-child{left:10px}.brand-mark i:nth-child(2){left:21px}.brand-mark:after{content:"";position:absolute;left:10px;top:20px;width:15px;height:7px;border-bottom:3px solid white;border-radius:0 0 12px 12px}.brand-mark b{position:absolute;right:-5px;top:-7px;color:var(--yellow);font-size:22px}.topbar nav{display:flex;gap:29px}.topbar nav a{text-decoration:none;color:var(--muted);font-size:13px;font-weight:700}.topbar nav a:hover{color:var(--purple)}.top-actions{display:flex;align-items:center;gap:7px}.small-button,.member-button{height:40px;border:1px solid var(--line);background:var(--panel);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer}.small-button{width:40px;color:var(--text);font-weight:800}.member-button{gap:8px;padding:0 13px 0 7px;text-decoration:none;font-size:12px;font-weight:800}.mini-avatar{width:28px;height:28px;border-radius:8px;background:var(--purple);display:block;position:relative;overflow:hidden}.mini-avatar i{position:absolute;left:9px;top:5px;width:11px;height:11px;border-radius:50%;background:#e6b88f}.mini-avatar b{position:absolute;left:6px;top:16px;width:17px;height:13px;border-radius:7px 7px 0 0;background:#e97466}
main{overflow:hidden}.hero{max-width:1160px;min-height:630px;margin:auto;padding:85px 28px 110px;display:grid;grid-template-columns:1fr 480px;align-items:center;gap:70px}.eyebrow,.section-title span{font-size:11px;font-weight:900;letter-spacing:.13em;color:var(--coral)}.hero h1{font-size:clamp(49px,5.5vw,75px);letter-spacing:-.055em;line-height:1.08;margin:18px 0 22px}.hero h1 em{color:var(--purple);font-style:normal}.hero-copy p{max-width:590px;color:var(--muted);font-size:16px;line-height:1.8}.hero-actions{display:flex;gap:11px;margin-top:29px}.primary,.secondary,.play-link{display:inline-flex;align-items:center;justify-content:center;min-height:47px;border-radius:12px;text-decoration:none;font-size:13px;font-weight:850;padding:0 19px}.primary,.play-link{background:var(--purple);color:white;box-shadow:4px 5px 0 color-mix(in srgb,var(--purple),black 35%)}.secondary{border:1px solid var(--line);background:var(--panel)}.table-scene{height:430px;position:relative;transform:rotate(-2deg)}.board{position:absolute;width:365px;height:330px;left:45px;top:44px;border:9px solid #4b3b55;border-radius:45px;background:repeating-linear-gradient(45deg,#efce88 0 35px,#e5bd73 35px 70px);box-shadow:14px 18px 0 rgba(0,0,0,.23),inset 0 0 0 8px #f8dda3}.tile{position:absolute;width:54px;height:54px;background:var(--cream);border:5px solid #47394f;border-radius:14px;display:grid;place-items:center;font-weight:900;color:#4b3b55}.t1{left:32px;top:28px}.t2{right:32px;top:28px}.t3{left:32px;bottom:28px}.t4{right:32px;bottom:28px;color:var(--coral)}.pawn{position:absolute;width:34px;height:46px;border:5px solid #42364b;border-radius:50% 50% 13px 13px;box-shadow:3px 5px 0 rgba(0,0,0,.18)}.pawn:before{content:"";position:absolute;width:19px;height:19px;border-radius:50%;left:3px;top:-15px;background:inherit;border:4px solid #42364b}.p1{background:var(--purple);left:145px;top:98px}.p2{background:var(--coral);left:210px;top:190px}.p3{background:var(--mint);left:110px;top:225px}.scene-card{position:absolute;width:100px;height:137px;border:6px solid #493a53;background:var(--cream);color:#4b3b55;border-radius:13px;padding-top:35px;text-align:center;font-weight:900;line-height:1.7;box-shadow:7px 9px 0 rgba(0,0,0,.22)}.scene-card b{color:var(--coral)}.card-a{left:0;bottom:2px;transform:rotate(-13deg)}.card-b{right:0;top:0;transform:rotate(12deg)}.dice{position:absolute;right:5px;bottom:25px;width:67px;height:67px;border:6px solid #41344a;background:#f8f4ef;color:#44364c;border-radius:14px;display:grid;place-items:center;text-align:center;font-size:21px;line-height:.55;transform:rotate(10deg);box-shadow:6px 7px 0 rgba(0,0,0,.2)}
.games-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);padding:90px 28px 105px}.section-title{max-width:1100px;margin:0 auto 35px;display:flex;align-items:end;justify-content:space-between;gap:25px}.section-title h2{font-size:38px;letter-spacing:-.04em;margin:7px 0 0}.section-title p{color:var(--muted);font-size:12px}.game-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}.game-card{border:1px solid var(--line);border-radius:21px;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 13px 35px rgba(0,0,0,.08)}.game-cover{height:210px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent),#fff 72%),var(--accent));position:relative;display:grid;place-items:center;overflow:hidden}.game-cover img{width:100%;height:100%;object-fit:cover}.live-badge{position:absolute;top:13px;left:13px;padding:6px 9px;border-radius:8px;background:var(--panel);color:var(--mint);font-size:9px;font-weight:900;letter-spacing:.12em}.game-body{padding:20px;display:flex;flex-direction:column;flex:1}.game-body h3{font-size:22px;margin:0 0 8px}.game-body p{color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 17px;flex:1}.game-meta{display:flex;gap:15px;color:var(--muted);font-size:11px;margin-bottom:18px}.play-link{min-height:43px}.loading{color:var(--muted);padding:50px;text-align:center}.platform-strip{max-width:1100px;margin:85px auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.platform-strip div{display:flex;align-items:center;gap:16px;padding:22px;border:1px solid var(--line);border-radius:17px;background:var(--panel)}.platform-strip b{font-size:21px;color:var(--coral)}.platform-strip span{font-size:13px;font-weight:750}footer{max-width:1100px;margin:auto;padding:26px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:11px}footer a{text-decoration:none}
@media(max-width:850px){.topbar nav{display:none}.hero{grid-template-columns:1fr;padding-top:55px;text-align:center}.hero-copy p{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.table-scene{width:min(480px,100%);margin:auto}.platform-strip{grid-template-columns:1fr}.section-title{text-align:center;display:block}.section-title p{margin-top:10px}}@media(max-width:520px){.topbar{padding:0 16px}.brand>span:last-child{display:none}.member-button #member-name{display:none}.member-button{padding-right:7px}.hero{padding:45px 16px 75px}.hero h1{font-size:43px}.table-scene{transform:scale(.76) rotate(-2deg);margin:-45px auto;width:460px;left:50%;translate:-50%}.games-section{padding:70px 16px}.platform-strip{padding:0 16px}footer{margin:0 18px;flex-direction:column;align-items:center;gap:8px}}

/* ---------------------------------------------------- account menu (every non-game page) */
.account { position: relative; }
.acc-btn { display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 999px; border: 1px solid var(--line, #2c2748); background: var(--chip, #1c1636); color: var(--ink, #f4eefc); cursor: pointer; }
.acc-av { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(180deg, #5b7bff, #3b5bdb); }
.acc-name { font-size: 13px; font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { font-size: 11px; opacity: .7; }
.dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 210px; padding: 8px; border: 1px solid var(--line, #2c2748); border-radius: 12px; background: var(--pop, #1c1636); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); z-index: 30; }
.dd-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink, #f4eefc); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.dd-item:hover { background: var(--hover, #241d40); }
.dd-item.danger { color: #e08a7a; }
.account.hidden, .member-button.hidden, .dropdown.hidden, .profile-menu.hidden, .profile-dropdown.hidden, .friend-request-dot.hidden { display: none; }

/* Card metadata comes from the game record managed in /admin. */
.game-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.live-badge.inline { position:static; flex:0 0 auto; margin-top:3px; }
.game-tags { display:flex; flex-wrap:wrap; gap:6px; margin:-3px 0 14px; }
.game-tags span { padding:4px 8px; border:1px solid color-mix(in srgb,var(--accent),var(--line) 60%); border-radius:999px; background:color-mix(in srgb,var(--accent),transparent 90%); color:var(--text); font-size:10px; font-weight:750; }
.game-meta { flex-wrap:wrap; gap:8px 15px; }