:root{--red:#8b080d;--red2:#3a0508;--gold:#ffd52c;--gold2:#d99b00;--ink:#101114;--panel:#202226;--panel2:#292c32;--muted:#a8abb3;--green:#52e7a5}*{box-sizing:border-box}html{min-height:100%;background:#080809}body{margin:0;color:#f8f7f2;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:radial-gradient(ellipse at 50% -15%,#a5161b 0,#69070b 36%,#1a0305 85%);min-height:100vh}a{color:var(--gold);text-decoration:none}button,input{font:inherit}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px clamp(16px,4vw,60px);background:#09090bea;border-bottom:1px solid #7c5c17;position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand-mini{text-align:center;line-height:1;display:flex;flex-direction:column;color:var(--gold);min-width:145px}.brand-mini span{font-size:12px;font-weight:900;letter-spacing:3px}.brand-mini b{font-size:24px;letter-spacing:-1px}.brand-mini small{letter-spacing:6px;font-size:13px;margin-top:4px}.top-actions{display:flex;align-items:center;gap:10px}.balance{background:#050506;border:1px solid #36302a;border-radius:30px;padding:11px 16px;font-weight:800;white-space:nowrap}.balance small{font-size:9px;color:#5ce4a1;border:1px solid #327c57;border-radius:4px;padding:2px 4px}.nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:12px 15px;background:#140507;border-bottom:1px solid #391014}.nav a{color:#d4d4d6;padding:10px 17px;border-radius:30px;font-size:14px;font-weight:750}.nav a.active,.nav a:hover{background:var(--gold);color:#17120a}.container{width:min(1400px,100%);margin:0 auto;padding:28px clamp(15px,4vw,58px) 50px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:12px 19px;font-weight:850;cursor:pointer;transition:transform .18s,filter .18s;text-align:center}.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn.gold{background:linear-gradient(135deg,#ffe66c,#e8a900);color:#1c1300;box-shadow:0 5px 20px #e2a90024}.btn.outline{border:1px solid #766019;color:var(--gold);background:#170b0d}.btn.dark{background:#25262a;color:white}.btn.full{width:100%;margin-top:12px}.btn.disabled{background:#3c3d41;color:#8c8d90;cursor:not-allowed}.inline{display:inline}.hero{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:265px;padding:35px clamp(20px,4vw,55px);border:1px solid #8e5d1b;border-radius:24px;overflow:hidden;background:linear-gradient(110deg,#260508ee,#56080bdc 55%,#160608ee),repeating-linear-gradient(45deg,#ffffff05 0 2px,transparent 2px 6px);box-shadow:0 20px 60px #0005}.eyebrow{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--gold);margin:0 0 10px}.hero h1{font-size:clamp(32px,4vw,55px);line-height:1.05;margin:0 0 15px;letter-spacing:-1.8px}.hero h1 span{color:var(--gold)}.muted{color:var(--muted);line-height:1.6}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.hero-emblem{width:220px;height:180px;flex-shrink:0;border:2px solid #d6a91e;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold);background:radial-gradient(circle,#5b1114,#170609 70%);box-shadow:0 0 0 9px #d9a81a12,0 0 55px #e8b32122}.hero-emblem span{letter-spacing:12px;font-size:24px}.hero-emblem strong{text-align:center;font-size:25px;line-height:1.05}.section-head{display:flex;justify-content:space-between;align-items:end;margin:32px 0 16px}.section-head h2,.page-title h1{font-size:clamp(26px,3vw,36px);margin:0}.rooms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.room-card{--accent:#ffd52c;background:linear-gradient(150deg,#222327,#111114);border:1px solid #37383b;border-top:3px solid var(--accent);border-radius:17px;padding:18px;box-shadow:0 12px 26px #0004;min-width:0;overflow:hidden}.room-top{display:flex;justify-content:space-between;align-items:center}.room-icon{font-size:25px}.room-tag{font-size:9px;letter-spacing:1px;color:var(--accent);border:1px solid currentColor;border-radius:20px;padding:5px 7px}.room-card h3{font-size:22px;margin:15px 0 3px;color:var(--accent)}.chips{display:flex;gap:5px;margin:8px 0 19px}.chips span{display:grid;place-items:center;background:#303136;border-radius:5px;width:30px;height:36px;color:#f9f9f9;font-size:20px}.room-stats{display:grid;gap:12px;margin-bottom:17px}.room-stats div{display:flex;flex-direction:column;gap:5px}.room-stats small,.profile-fields small,.wallet-card small,.stat-card small{font-size:10px;letter-spacing:1px;color:#9da0a6;font-weight:800}.room-stats b{font-size:14px}.room-btn{background:var(--accent);color:#101114;width:100%;justify-content:space-between}.footnote{font-size:11px;color:#999;margin-top:15px}.page-title{margin:12px 0 25px}.page-title h1{font-size:38px}.panel{background:linear-gradient(145deg,#242529,#17181b);border:1px solid #393a3e;border-radius:18px;padding:24px;margin-bottom:22px}.panel h2{margin-top:0}.profile-panel{max-width:760px;margin:0 auto;text-align:center;border-top:2px solid var(--gold)}.profile-avatar{font-size:55px;margin:10px auto;width:100px;height:100px;display:grid;place-items:center;border:2px solid var(--gold);border-radius:50%;background:#141518}.profile-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.profile-fields div{background:#101114;padding:15px;border-radius:9px;display:flex;flex-direction:column;gap:8px;min-width:0}.profile-fields strong{overflow-wrap:anywhere}.avatar-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.avatar-choice{font-size:32px;background:#111216;border:1px solid #4b4c50;border-radius:12px;padding:10px;cursor:pointer}.avatar-choice.selected{border:2px solid #40d99b;box-shadow:0 0 0 3px #40d99b20}.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}.wallet-card{padding:28px;border-radius:18px;border:1px solid #a17a16;background:linear-gradient(135deg,#451014,#160709);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.wallet-amount{font-size:clamp(27px,4vw,42px);font-weight:900;color:var(--gold);margin:12px 0}.demo-pill{font-size:10px;letter-spacing:.8px;color:#6ff0b5;background:#103c2b;border:1px solid #246f51;padding:6px 9px;border-radius:30px;font-weight:800}.credit-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.credit-buttons .btn{padding:10px 13px}table{border-collapse:collapse;width:100%;min-width:560px}th,td{text-align:left;padding:14px 12px;border-bottom:1px solid #393a3e;font-size:13px}th{font-size:10px;letter-spacing:1px;color:#b8bbc1}.table-wrap{overflow-x:auto}.positive{color:#62e9a5}.negative{color:#ff7777}.theme-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;flex-wrap:wrap}.theme-tabs{display:flex;gap:8px}.tab{background:#27292e;color:#eee;border:0;border-radius:30px;padding:11px 18px;font-weight:850;cursor:pointer}.tab.active{background:#fff;color:#18191c}.toggle-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}.toggle-label input{accent-color:#13c6d5;width:18px;height:18px}.themes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.theme-card{overflow:hidden;background:#26292e;border-radius:15px;border:1px solid #3b3d41}.theme-preview{height:210px;position:relative;overflow:hidden;padding:15px;background-size:cover}.mini-cards{display:flex;gap:7px}.mini-cards span{display:grid;place-items:center;width:36px;height:53px;border:1px solid #7da8ff;border-radius:5px;background:linear-gradient(135deg,#17223d,#245ba4);color:#fff;box-shadow:0 3px 8px #0007}.theme-watermark{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(18px,2vw,32px);font-weight:950;letter-spacing:2px;color:#ffffff30;text-align:center}.mini-hand{position:absolute;bottom:12px;left:12px;display:flex;gap:4px}.mini-hand span{background:#fff;color:#181818;padding:6px 8px;border-radius:4px;font-weight:900}.theme-info{padding:15px;display:flex;align-items:center;justify-content:space-between;gap:10px}.theme-info h3{font-size:18px;margin:0 0 5px}.free{color:#7be4e9;font-weight:800}.apply-theme{background:#52e7a5;color:#07130d;padding:10px 18px}.leaderboard-head{display:flex;align-items:center;justify-content:space-between}.leaderboard-head h2{margin:0 0 15px}.game-table{max-width:900px;margin:auto;background:radial-gradient(ellipse,#17452c,#082315 68%,#111);border:8px solid #b39a2a;border-radius:35px;padding:clamp(15px,3vw,35px);box-shadow:inset 0 0 0 2px #40320d,0 20px 60px #0008}.opponent{display:flex;align-items:center;gap:12px;padding:10px 0 25px;border-bottom:1px solid #ffffff25}.opponent-avatar{font-size:35px}.opponent small{display:block;color:#bdc7bf;margin-top:4px}.card-back{margin-left:auto;color:#dbe8ff;background:repeating-linear-gradient(45deg,#143f70 0 4px,#0c2342 4px 8px);border:2px solid #6ba3d9;border-radius:8px;padding:12px;font-size:23px}.play-pile{display:flex;align-items:center;justify-content:space-around;gap:15px;padding:35px 0}.play-pile>div{text-align:center}.play-pile small{font-size:10px;letter-spacing:1px;color:#c3d0c5;display:block;margin-bottom:8px}.playing-card{background:#fff;color:#d41b2b;border-radius:9px;border:2px solid #ddd;width:68px;height:96px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:8px;font-size:23px;font-weight:900;box-shadow:0 5px 10px #0005}.playing-card span{align-self:flex-end;font-size:28px}.playing-card:has(span){color:#151515}.playing-card:has(span:first-child){cursor:pointer}.card-back.large{display:grid;place-items:center;width:68px;height:96px;margin:auto}.pile-label{font-size:24px;color:#f8d632;font-weight:900;text-align:center;letter-spacing:2px}.pile-label small{margin-top:8px}.hand-label{display:flex;justify-content:space-between;color:#e4dbac;font-weight:800;font-size:12px;letter-spacing:1px}.player-hand{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:18px 0}.hand-card{cursor:pointer;transition:transform .15s}.hand-card:hover{transform:translateY(-10px)}.game-message{padding:12px;background:#0005;border-radius:9px;text-align:center;font-size:13px;color:#d8e4d9}.game-actions{display:flex;justify-content:center;gap:12px;margin-top:15px}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px}.stat-card{background:#222328;border:1px solid #414247;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}.stat-card b{font-size:27px;color:var(--gold)}.footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:22px clamp(15px,4vw,60px);border-top:1px solid #4a171b;color:#aaa;font-size:11px}.footer span:first-child{color:var(--gold);font-weight:900;letter-spacing:1px}.notice{background:#153c2b;border:1px solid #2b8a60;color:#a9f6d2;border-radius:10px;padding:12px 15px;margin:0 0 18px}.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:40px;padding:25px;background:radial-gradient(ellipse at 50% 0,#a6171c,#310407 60%,#080809)}.brand{text-align:center;color:var(--gold);text-shadow:0 4px 20px #0009}.brand-small{font-size:clamp(22px,3vw,38px);font-weight:950;letter-spacing:5px}.brand-big{font-size:clamp(38px,5vw,70px);font-weight:1000;letter-spacing:-3px;line-height:.95}.brand-suits{font-size:27px;letter-spacing:7px;margin-top:10px}.ribbon{background:var(--gold);color:#251400;font-weight:900;font-style:italic;padding:6px 16px;margin:10px auto;width:max-content;max-width:100%;transform:skew(-8deg)}.auth-card{width:min(440px,100%);padding:28px;background:#17181bea;border:1px solid #8c6c1b;border-radius:20px;box-shadow:0 25px 80px #0008}.auth-card h1{margin:0;font-size:28px}.auth-card label{display:block;margin:15px 0 7px;font-size:12px;color:#e6c75c;font-weight:800}.auth-card input:not([type=hidden]){width:100%;background:#090a0c;color:white;border:1px solid #414247;border-radius:9px;padding:13px;outline:none}.auth-card input:focus{border-color:var(--gold)}.center{text-align:center}.demo-tip{padding:10px;background:#29251a;border-radius:8px;text-align:center;color:#d8c994;font-size:12px}.auth-card a{font-weight:800}.hide-mobile{display:inline-flex}@media(max-width:1100px){.rooms{grid-template-columns:repeat(3,minmax(0,1fr))}.room-card:last-child{grid-column:auto}.themes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-emblem{width:180px;height:150px}}@media(max-width:700px){.topbar{padding:12px 14px;gap:8px}.brand-mini{min-width:100px}.brand-mini b{font-size:18px}.brand-mini span{font-size:9px}.top-actions{gap:6px}.balance{font-size:11px;padding:10px}.top-actions .btn{font-size:11px;padding:10px}.hide-mobile{display:none}.nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.nav a{white-space:nowrap;padding:10px 13px;font-size:12px}.container{padding:18px 14px 35px}.hero{min-height:auto;padding:25px 20px}.hero-emblem{display:none}.hero h1{font-size:37px}.section-head{align-items:start;gap:10px}.section-head .muted{font-size:11px;text-align:right}.rooms{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.room-card{padding:13px}.room-card h3{font-size:19px}.room-stats b{font-size:12px}.room-tag{font-size:8px}.chips span{width:25px;height:30px}.themes-grid{grid-template-columns:1fr}.theme-preview{height:190px}.wallet-grid{grid-template-columns:1fr}.profile-fields{grid-template-columns:1fr}.profile-fields div{align-items:center}.admin-stats{grid-template-columns:repeat(2,1fr)}.stat-card{padding:14px}.stat-card b{font-size:22px}.page-title h1{font-size:31px}.panel{padding:17px}.auth-shell{flex-direction:column;gap:15px;justify-content:flex-start;padding:35px 16px}.brand-big{font-size:44px}.brand-small{font-size:23px}.brand-suits{font-size:20px}.auth-card{padding:22px}.footer{flex-wrap:wrap;justify-content:center;text-align:center}.play-pile{padding:24px 0;gap:8px}.playing-card{width:54px;height:78px;font-size:19px}.playing-card span{font-size:22px}.card-back.large{width:54px;height:78px}.pile-label{font-size:16px}.player-hand{gap:6px}.hand-card{width:48px;height:72px;padding:5px}.game-table{border-width:4px;border-radius:20px;padding:14px}.game-actions .btn{padding:11px 13px;font-size:12px}}@media(max-width:380px){.rooms{grid-template-columns:1fr}.room-card{padding:17px}.credit-buttons .btn{font-size:12px}.balance small{display:none}}
/* Transaction request UI */
.payment-form{display:grid;grid-template-columns:1fr;gap:9px;max-width:620px}.payment-form label{font-size:12px;font-weight:800;color:#e6c75c;margin-top:5px}.payment-form input,.payment-form select{width:100%;padding:13px 14px;border-radius:9px;border:1px solid #45464b;background:#0c0d10;color:#fff;min-height:46px}.payment-form input:focus,.payment-form select:focus{outline:2px solid #d7ad26;outline-offset:1px}.payment-form .btn{margin-top:8px;justify-self:start}.status{display:inline-block;border-radius:30px;padding:5px 8px;font-size:10px;font-weight:900;letter-spacing:.5px}.status-pending{background:#4a3610;color:#ffdc69;border:1px solid #82641b}.status-approved{background:#103c2b;color:#70efb5;border:1px solid #287e57}.status-rejected{background:#481719;color:#ff9b9b;border:1px solid #87383c}.review-actions{display:flex;gap:6px;flex-wrap:wrap}.review-actions .btn{font-size:11px;padding:8px 10px}.panel>p.muted{margin-top:-4px}.table-wrap td small{color:#aaa;font-size:10px}@media(max-width:700px){.payment-form .btn{width:100%;justify-self:stretch}.review-actions .btn{flex:1}.status{font-size:9px}}

/* Matatu practice game: keep card ranks and UTF-8 suits visible on mobile */
.playing-card{color:#171717;background:#fff;line-height:1;flex-shrink:0}
.playing-card span{display:block;align-self:flex-end;margin-top:auto;line-height:1}
.playing-card.red-card,.playing-card.red-card span{color:#c7192d}
.playing-card.black-card,.playing-card.black-card span{color:#111}
.card-form{margin:0;padding:0;display:flex}
.hand-card{appearance:none;-webkit-appearance:none}
.hand-card.legal-card{border-color:#e0c84e;box-shadow:0 0 0 2px #e0c84e35,0 5px 10px #0005}
.hand-card.illegal-card{opacity:.68}
.hand-card:disabled{cursor:not-allowed;transform:none}
.game-actions form{margin:0}
.game-actions button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.player-hand{align-items:flex-end;gap:6px}.hand-card{width:48px;height:72px;font-size:18px;padding:6px}.hand-card span{font-size:21px}.card-form{min-width:0}}

/* Multiplayer lobby and live table */
.mp-forms{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.mp-join{display:flex;gap:10px;align-items:end;flex-wrap:wrap;flex:1;min-width:240px}.mp-join label{display:block;width:100%;margin-bottom:-6px}.mp-join input{flex:1;min-width:120px;text-transform:uppercase}.mp-game{margin-top:22px}.mp-game .player-hand{flex-wrap:wrap}.mp-game .hand-card{cursor:pointer;transition:transform .15s ease}.mp-game .hand-card:not(:disabled):hover{transform:translateY(-7px)}.mp-game .hand-card:disabled{opacity:.48}.mp-game .legal-card{box-shadow:0 0 0 2px rgba(255,213,50,.25)}.mp-game #mpTop{font-size:1.8rem}.notice.error{border-color:#ff7777;color:#ffe0e0}.mp-game .game-message{overflow-wrap:anywhere}
@media(max-width:620px){.mp-forms,.mp-join{align-items:stretch;flex-direction:column}.mp-join{width:100%}.mp-join input,.mp-join button{width:100%}.mp-game .play-pile{gap:8px}.mp-game .playing-card{min-width:48px}.mp-game .hand-card{min-width:48px}}

/* Screenshot-inspired theme gallery refinement */
body:has(.themes-grid){background:#050506;color:#f7f8fa}
body:has(.themes-grid) .topbar{background:#050506;border-bottom:1px solid #17191d}
body:has(.themes-grid) .nav{background:#050506;border-bottom:1px solid #16181c}
body:has(.themes-grid) .container{width:min(1600px,100%);padding-top:28px}
body:has(.themes-grid) .page-title{display:none}
body:has(.themes-grid) .theme-toolbar{margin:0 0 34px;display:flex;align-items:center;justify-content:space-between;gap:20px}
body:has(.themes-grid) .theme-tabs{gap:12px}
body:has(.themes-grid) .tab{min-width:126px;padding:15px 23px;background:#25282e;color:#f4f5f7;font-size:15px;border-radius:28px}
body:has(.themes-grid) .tab.active{background:#fff;color:#25282e}
body:has(.themes-grid) .toggle-label{font-size:15px;color:#fff;gap:13px}
body:has(.themes-grid) .toggle-label input{appearance:none;width:76px;height:34px;border-radius:24px;background:#f3f5f7;border:2px solid #d5dbe0;position:relative;cursor:pointer;margin:0}
body:has(.themes-grid) .toggle-label input:before{content:'';position:absolute;left:4px;top:3px;width:24px;height:24px;background:#0bb5c9;border-radius:50%;transition:transform .18s}
body:has(.themes-grid) .toggle-label input:checked:before{transform:translateX(40px);background:#53e6a5}
body:has(.themes-grid) .themes-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px}
body:has(.themes-grid) .theme-card{background:#262a31;border:1px solid #30343b;border-radius:16px;box-shadow:0 8px 22px #0007;transition:transform .18s,border-color .18s}
body:has(.themes-grid) .theme-card:hover{transform:translateY(-3px);border-color:#6c737e}
body:has(.themes-grid) .theme-preview{height:auto;aspect-ratio:1.72;padding:12px 14px;background-size:cover;isolation:isolate}
body:has(.themes-grid) .theme-preview:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 50%,#ffffff12,transparent 58%),linear-gradient(180deg,#0001,#0006)}
body:has(.themes-grid) .mini-cards{gap:6px;position:relative;z-index:2}
body:has(.themes-grid) .mini-cards span{width:clamp(25px,4vw,46px);height:clamp(35px,5.2vw,59px);font-size:0;border:1px solid #6ea9e6;background:repeating-linear-gradient(45deg,#123f70 0 4px,#0c2342 4px 8px);box-shadow:0 2px 6px #0008;position:relative}
body:has(.themes-grid) .mini-cards span:after{content:'♧';font-size:clamp(12px,1.5vw,19px);color:#b4d5ff;text-shadow:0 0 5px #4d9aff;position:absolute;inset:0;display:grid;place-items:center}
body:has(.themes-grid) .theme-watermark{font-size:clamp(20px,3vw,42px);letter-spacing:1px;text-shadow:0 3px 5px #0007;color:#ffffff25;padding:20px}
body:has(.themes-grid) .mini-hand{left:10px;bottom:9px;gap:3px;z-index:2}
body:has(.themes-grid) .mini-hand span{padding:5px 7px;font-size:clamp(11px,1.2vw,15px);height:clamp(27px,3.8vw,43px);min-width:clamp(25px,3.3vw,39px);display:flex;align-items:center;justify-content:center;border-radius:4px;box-shadow:0 2px 5px #0008}
body:has(.themes-grid) .theme-info{padding:13px 14px 15px;min-height:91px}
body:has(.themes-grid) .theme-info h3{font-size:clamp(15px,1.8vw,23px);font-weight:650;letter-spacing:-.4px}
body:has(.themes-grid) .free{font-size:17px;color:#82dfe9;font-weight:700}
body:has(.themes-grid) .apply-theme{min-width:120px;background:#5be8ad;color:#06120c;font-size:17px;padding:10px 20px}
body:has(.themes-grid) .apply-theme:disabled{background:#85898d;color:#151719;opacity:1}
body:has(.themes-grid) .footer{border-color:#16181c}
@media(max-width:700px){body:has(.themes-grid) .theme-toolbar{align-items:flex-start;flex-direction:column;margin-bottom:22px}body:has(.themes-grid) .theme-tabs{width:100%;gap:7px}body:has(.themes-grid) .tab{min-width:0;flex:1;padding:12px 9px;font-size:12px}body:has(.themes-grid) .toggle-label{font-size:13px}body:has(.themes-grid) .themes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}body:has(.themes-grid) .theme-preview{aspect-ratio:1.25;padding:8px}body:has(.themes-grid) .mini-cards{gap:3px}body:has(.themes-grid) .mini-cards span{width:22px;height:31px}body:has(.themes-grid) .mini-cards span:after{font-size:12px}body:has(.themes-grid) .theme-info{align-items:flex-start;flex-direction:column;gap:8px;padding:11px;min-height:0}body:has(.themes-grid) .theme-info h3{font-size:15px}body:has(.themes-grid) .free{font-size:14px}body:has(.themes-grid) .apply-theme{width:100%;min-width:0;font-size:14px;padding:9px}body:has(.themes-grid) .mini-hand span{font-size:10px;min-width:20px;height:25px;padding:3px}}

[hidden]{display:none!important}
/* =====================================================================
   Matatu Champion: game table (v3)
   ===================================================================== */
:root{--felt1:#1c8a52;--felt2:#0d5a33;--felt3:#062817;--rim1:#5a2c12;--rim2:#2a1206;--cw:clamp(54px,14.5vw,90px);--cred:#c8102e;--cblack:#16181d}
body[data-theme="Midnight Blue"]{--felt1:#1f5fb8;--felt2:#0d3170;--felt3:#05132f}
body[data-theme="Champion Classic"]{--felt1:#2f6b58;--felt2:#173f33;--felt3:#0a1d18}
body[data-theme="Red Devils"]{--felt1:#b3141c;--felt2:#6c070c;--felt3:#2b0204}
body[data-theme="Cosmic Orbit"]{--felt1:#6a35c9;--felt2:#331173;--felt3:#12052c}
body[data-theme="Jungle Run"]{--felt1:#4f9e2a;--felt2:#24611a;--felt3:#0b2908}
body[data-theme="Royal Blue"]{--felt1:#2b67d6;--felt2:#11388f;--felt3:#061540}
.mt-shell{max-width:1120px;margin:0 auto}
.mt{position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.mt-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.mt-title{display:flex;flex-direction:column;line-height:1.15;min-width:0}.mt-title b{font-size:clamp(18px,3vw,24px);color:var(--gold)}.mt-title small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-tools{display:flex;gap:6px}.mt-icon{width:40px;height:40px;border-radius:50%;border:1px solid #6b5418;background:#140b0c;color:#f6e7b0;font-weight:900;cursor:pointer;font-size:15px}.mt-icon:hover{background:#2a1a10}.mt-icon.danger{color:#ff8b8b;border-color:#6d2121}
/* felt */
.mt-felt{position:relative;min-height:clamp(330px,50vh,520px);border-radius:clamp(26px,6vw,140px);padding:12px;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--felt1),var(--felt2) 62%,var(--felt3)),var(--felt2);
  border:clamp(8px,1.6vw,14px) solid var(--rim1);
  box-shadow:inset 0 0 0 2px #e2b54a55,inset 0 0 70px #000a,0 0 0 2px var(--rim2),0 18px 50px #000b;overflow:hidden}
.mt-felt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.mt-felt::after{content:"MATATU";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:900;letter-spacing:.5em;font-size:clamp(28px,7vw,74px);color:#ffffff0c;pointer-events:none;white-space:nowrap}
.mt-felt.shake{animation:mtShake .45s}
@keyframes mtShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
/* cards */
.card{--w:var(--cw);position:relative;width:var(--w);height:calc(var(--w)*1.4);border-radius:calc(var(--w)*.09);flex:none;
  background:linear-gradient(160deg,#fffefb,#f3eee2);box-shadow:0 1px 0 #fff inset,0 2px 6px #0006,0 0 0 1px #0002;color:var(--cblack);font-family:Georgia,"Times New Roman",serif;overflow:hidden}
.card.red{color:var(--cred)}.card.joker-card{color:#6b21a8}
.card .ci{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.86;font-weight:700;font-size:calc(var(--w)*.2);z-index:1}
.card .ci b{font-family:Inter,system-ui,sans-serif;font-weight:900;letter-spacing:-.06em}.card .ci i{font-style:normal;font-size:.82em}
.card .ci.tl{top:5%;left:7%}.card .ci.br{bottom:5%;right:7%;transform:rotate(180deg)}
.joker-card .ci{font-size:calc(var(--w)*.13)}
.card .pips{position:absolute;inset:14% 20% 14% 20%}.card .pips i{position:absolute;transform:translate(-50%,-50%);font-style:normal;font-size:calc(var(--w)*.21);line-height:1}.card .pips i.flip{transform:translate(-50%,-50%) rotate(180deg)}
.card .cc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.card .cc.ace{font-size:calc(var(--w)*.62)}
.card .cc.face{flex-direction:column;inset:17% 19%;border:1.5px solid currentColor;border-radius:calc(var(--w)*.05);background:repeating-linear-gradient(135deg,#0000 0 4px,#0000000a 4px 5px)}
.card .cc.face b{font-size:calc(var(--w)*.46);line-height:.9}.card .cc.face i{font-style:normal;font-size:calc(var(--w)*.26)}
.card .cc.joker{flex-direction:column}.card .cc.joker i{font-style:normal;font-size:calc(var(--w)*.5);color:#eab308;text-shadow:0 1px 0 #7c2d12}.card .cc.joker em{font-style:normal;font-family:Inter,sans-serif;font-weight:900;font-size:calc(var(--w)*.13);letter-spacing:.08em}
.card.back{background:radial-gradient(circle at 50% 50%,#ffd52c 0 9%,#8b080d 10% 15%,transparent 16%),repeating-linear-gradient(45deg,#9d0b11 0 5px,#6a0509 5px 10px);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #e3b33b,0 2px 6px #0007}
.card.mini{--w:calc(var(--cw)*.42)}
.card.flying{position:fixed;z-index:999;margin:0!important;pointer-events:none;--w:100%;width:auto;box-shadow:0 14px 28px #000a}
.card.flying .ci{font-size:calc(var(--cw)*.2)}
/* seats */
.mt-seats{position:absolute;inset:0;pointer-events:none;z-index:3}
.mt-seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto}
.mt-seat.pos-top{top:10px;left:50%;transform:translateX(-50%)}
.mt-seat.pos-left{left:10px;top:38%;transform:translateY(-50%)}
.mt-seat.pos-right{right:10px;top:38%;transform:translateY(-50%)}
.mt-seat-id,.mt-me-id{position:relative;display:flex;align-items:center;gap:8px;background:#000000a6;border:1px solid #ffffff22;border-radius:999px;padding:4px 12px 4px 4px;backdrop-filter:blur(4px);transition:box-shadow .25s,border-color .25s}
.mt-seat-id b,.mt-me-id b{display:block;font-size:13px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mt-seat-id small,.mt-me-id small{display:block;font-size:11px;color:#d7d7d7b0}
.mt-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,#3a2a12,#120c06);border:2px solid #c99a2e;flex:none}
.mt-ring{position:absolute;left:1px;top:1px;width:42px;height:42px;border-radius:50%;pointer-events:none;--t:0;background:conic-gradient(var(--gold) calc(var(--t)*360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 18px,#000 19px);mask:radial-gradient(circle,transparent 18px,#000 19px)}
.mt-ring.low{background:conic-gradient(#ff4d4d calc(var(--t)*360deg),transparent 0)}
.mt-seat.active .mt-seat-id{border-color:var(--gold);box-shadow:0 0 0 2px #ffd52c66,0 0 22px #ffd52c66}
.mt-fan{display:flex;justify-content:center;height:calc(var(--cw)*.6)}
.mt-fan .card{margin-left:calc(var(--cw)*-.3);transform:rotate(calc(var(--k)*5deg)) translateY(calc(var(--k)*var(--k)*.6px))}.mt-fan .card:first-child{margin-left:0}
.mt-badge{background:#ff3b3b;color:#fff;font:900 10px Inter,sans-serif;letter-spacing:.08em;padding:3px 8px;border-radius:99px;animation:mtPulse 1s infinite alternate;box-shadow:0 0 14px #ff3b3b}
/* center */
.mt-center{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:clamp(14px,4vw,40px);z-index:2}
.mt-deck{position:relative;width:var(--cw);height:calc(var(--cw)*1.4);cursor:default;outline:none}
.mt-deck .mt-stack{position:absolute;inset:0;z-index:2}.mt-deck .mt-stack .card{position:absolute;left:0;top:0;transform:translate(calc(var(--k)*-1.2px),calc(var(--k)*-1.4px))}
.mt-deck.can{cursor:pointer}.mt-deck.can .mt-stack{animation:mtGlow 1.1s infinite alternate;border-radius:calc(var(--cw)*.09)}
.mt-deck.can::after{content:"TAP TO DRAW";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font:900 10px Inter,sans-serif;letter-spacing:.12em;color:var(--gold);white-space:nowrap}
.mt-deck.empty .mt-stack{border:2px dashed #ffffff40;border-radius:10px}
.mt-cutter{position:absolute;inset:0;z-index:1}.mt-cutter .card{position:absolute;left:-42%;top:14%;transform:rotate(-90deg);filter:brightness(.92)}
.mt-count{position:absolute;z-index:3;right:-8px;bottom:-8px;min-width:28px;height:28px;padding:0 6px;border-radius:99px;background:#0b0b0d;border:2px solid var(--gold);color:var(--gold);font:900 12px Inter,sans-serif;display:grid;place-items:center}
.mt-pile{position:relative;width:var(--cw);height:calc(var(--cw)*1.4)}
.mt-pile .card{position:absolute;left:0;top:0}.mt-pile .card.under{transform:rotate(var(--r));filter:brightness(.85)}
.mt-pile-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border:2px dashed #ffffff55;border-radius:10px;color:#ffffffaa;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mt-pile .card.top{box-shadow:0 6px 18px #000a}.mt-pile .card.top.landed{animation:mtLand .28s ease-out}
@keyframes mtLand{0%{transform:scale(1.12)}100%{transform:scale(1)}}
.mt-state{display:flex;flex-direction:column;align-items:center;gap:8px}
.mt-suit{width:clamp(46px,9vw,62px);height:clamp(46px,9vw,62px);border-radius:50%;background:#fffdf5;color:var(--cblack);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 14px #0008,inset 0 0 0 3px #d6b25a;line-height:1}
.mt-suit span{font-size:clamp(24px,5vw,34px)}.mt-suit small{font:900 8px Inter,sans-serif;letter-spacing:.12em;color:#7a6a40}.mt-suit.red span{color:var(--cred)}
.mt-suit.asked{box-shadow:0 0 0 3px var(--gold),0 0 24px #ffd52caa;animation:mtPulse .9s infinite alternate}
.mt-cutchip{background:#000a;border:1px solid #ffffff2a;border-radius:10px;padding:3px 8px;text-align:center;line-height:1.05}.mt-cutchip small{display:block;font:900 8px Inter,sans-serif;letter-spacing:.14em;color:#d0d0d0}.mt-cutchip b{font-size:15px;color:#fff}.mt-cutchip b.red{color:#ff6b6b}
.mt-pick{background:linear-gradient(135deg,#ff4040,#a10a10);border-radius:12px;padding:4px 10px;text-align:center;line-height:1;box-shadow:0 0 18px #ff3030a0;animation:mtPulse .7s infinite alternate}.mt-pick b{font-size:20px;color:#fff}.mt-pick small{display:block;font:900 8px Inter,sans-serif;letter-spacing:.14em}
@keyframes mtPulse{to{transform:scale(1.07)}}
@keyframes mtGlow{from{box-shadow:0 0 0 0 #ffd52c00}to{box-shadow:0 0 0 4px #ffd52caa,0 0 26px #ffd52c}}
/* toast */
.mt-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;pointer-events:none;opacity:0;max-width:92%;text-align:center}
.mt-toast span{display:inline-block;background:#0b0b0de6;border:1px solid #ffffff2e;padding:9px 16px;border-radius:999px;font-weight:800;font-size:14px;box-shadow:0 8px 24px #0009}
.mt-toast span.hot{border-color:#ff5252;background:#3a0507ee}.mt-toast span.warn{border-color:#ffb020;color:#ffe2a0}
.mt-toast b.red,.mt-toast .red{color:#ff6b6b}
.mt-toast.show{animation:mtToast 2s ease forwards}
@keyframes mtToast{0%{opacity:0;transform:translate(-50%,10px)}10%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
/* me + hand */
.mt-me{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 2px;flex-wrap:wrap}
.mt-me.active .mt-me-id{border-color:var(--gold);box-shadow:0 0 0 2px #ffd52c66,0 0 22px #ffd52c66}
.mt-me.pulse .mt-me-id{animation:mtPulse .3s 2 alternate}
.mt-msg{flex:1;min-width:220px;text-align:right;font-weight:700;color:#f3e7c4}.mt-msg.urgent{color:#ff8a8a}
.mt-msg[data-timer]::after{content:attr(data-timer);margin-left:8px;background:#ff3b3b;color:#fff;border-radius:99px;padding:2px 8px;font-size:12px}
.mt-hand{display:flex;justify-content:center;align-items:flex-end;padding:26px 6px 8px;min-height:calc(var(--cw)*1.4 + 40px);--ov:6px}
.mt-hand .card{margin-left:var(--ov);transition:transform .16s ease,filter .16s,box-shadow .16s;cursor:pointer}.mt-hand .card:first-child{margin-left:0}
.mt-hand.my-turn .card:hover,.mt-hand.my-turn .card:focus-visible{transform:translateY(-16px);z-index:5;outline:none}
.mt-hand .card.drawn::before{content:"NEW";position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1200;font:900 9px Inter,sans-serif;padding:1px 6px;border-radius:0 0 6px 6px;z-index:2}
.mt-hand .card.nope{animation:mtNope .35s}
.mt-hand.busy .card{pointer-events:none}
@keyframes mtNope{25%{translate:-6px 0}50%{translate:6px 0}75%{translate:-3px 0}}
.mt-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.mt-actions .btn{min-width:150px}.mt-actions .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* overlays */
.mt-overlay{position:fixed;inset:0;z-index:900;background:#000000b3;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:16px}
.mt-overlay[hidden]{display:none}
.mt-modal{background:linear-gradient(180deg,#24161a,#120a0c);border:1px solid #8e6a1f;border-radius:22px;padding:22px;width:min(420px,100%);text-align:center;box-shadow:0 30px 80px #000;max-height:92vh;overflow:auto;animation:mtPop .25s ease-out}
.mt-modal.wide{width:min(580px,100%)}.mt-modal h3{margin:0 0 14px;font-size:22px}.mt-modal h2{margin:4px 0}
@keyframes mtPop{from{transform:scale(.92);opacity:0}}
.mt-suits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.mt-suits button{background:#fffdf5;border:0;border-radius:14px;padding:12px 4px;cursor:pointer;color:var(--cblack);font-weight:800;transition:transform .12s}.mt-suits button.red{color:var(--cred)}.mt-suits button:hover{transform:translateY(-3px)}
.mt-suits span{display:block;font-size:40px;line-height:1}.mt-suits small{font-size:11px}
.mt-end-head .mt-trophy{font-size:58px;animation:mtBounce 1s infinite alternate}.mt-end-head.won h2{color:var(--gold);font-size:30px}.mt-end-head p{color:var(--muted);margin:6px 0}
@keyframes mtBounce{to{transform:translateY(-8px)}}
.mt-pay{display:inline-block;margin:6px 0 4px;padding:6px 14px;border-radius:99px;background:#2a1212;color:#ffb4b4;font-weight:800}.mt-pay.win{background:#0f3a24;color:#6ff0ac}
.mt-results{display:flex;flex-direction:column;gap:8px;margin:14px 0;text-align:left}
.mt-res{position:relative;display:flex;align-items:center;gap:10px;background:#ffffff0b;border:1px solid #ffffff14;border-radius:14px;padding:8px 10px}.mt-res.win{border-color:var(--gold);background:#ffd52c14}
.mt-res-name{min-width:84px}.mt-res-name b{display:block}.mt-res-name small{color:var(--muted)}
.mt-res-cards{display:flex;flex-wrap:wrap;gap:3px;flex:1}.mt-res-cards em{color:var(--muted);font-size:12px}
.mini-face{background:#fffdf5;color:var(--cblack);border-radius:5px;padding:1px 5px;font:800 12px Inter,sans-serif}.mini-face.red{color:var(--cred)}.mini-face.jk{color:#6b21a8}
.mt-res .crown{position:absolute;right:10px;top:-10px;font-size:20px}
.mt-end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.mt-rules{text-align:left;line-height:1.7;padding-left:18px;color:#e9e3d2}
.mt-code{font:900 clamp(34px,9vw,52px) ui-monospace,Menlo,monospace;letter-spacing:.18em;color:var(--gold);margin:4px 0 6px}
.mt-wseats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:14px 0}
.mt-wseat{background:#ffffff0c;border:1px solid #ffffff1c;border-radius:14px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}.mt-wseat .mt-av{width:46px;height:46px;font-size:26px}.mt-wseat small{color:var(--muted)}
.mt-wseat.empty{border-style:dashed;opacity:.65}.mt-wseat.empty .mt-av{border-style:dashed;color:var(--muted)}
.mt-lvl{display:block;margin-top:12px;color:var(--muted);font-size:13px}.mt-lvl select{margin-left:6px;background:#1b1214;color:#fff;border:1px solid #6b5418;border-radius:8px;padding:5px}
.mt-confetti{position:fixed;inset:0;pointer-events:none;z-index:950;overflow:hidden}
.mt-confetti i{position:absolute;top:-30px;font-style:normal;font-size:24px;color:#fff;animation:mtFall 2.8s ease-in forwards}.mt-confetti i.red{color:#ff5d5d}
@keyframes mtFall{to{transform:translate(var(--dx),110vh) rotate(540deg);opacity:.2}}
/* setup + misc pages */
.mt-setup{max-width:640px;margin:0 auto}.mt-setup h1{margin:4px 0 8px}
.setup-grid{display:flex;flex-direction:column;gap:16px;margin-top:18px}.setup-grid fieldset{border:0;padding:0;margin:0}.setup-grid legend{font-weight:800;margin-bottom:8px;color:var(--gold);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.seg{display:flex;flex-wrap:wrap;gap:8px}.seg label{position:relative}.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;padding:10px 18px;border-radius:999px;border:1px solid #6b5418;background:#170b0d;font-weight:800;cursor:pointer;min-width:56px;text-align:center}
.seg input:checked+span{background:var(--gold);color:#17120a;border-color:var(--gold)}.seg input:focus-visible+span{outline:2px solid #fff}
.btn.big{padding:15px 24px;font-size:17px}
.mp-create{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.check{display:flex;align-items:center;gap:6px;font-weight:700}
.room-sub{margin:-4px 0 8px;color:var(--muted);font-size:13px}
.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:16px}
.rule{margin:0}.rule h3{margin:10px 0 6px}.rule p{color:#d9d4c6;line-height:1.55;margin:0}
.rule-card{width:54px;height:74px;border-radius:8px;background:#fffdf5;color:var(--cred);display:grid;place-items:center;font:900 22px Georgia,serif;box-shadow:0 4px 12px #0007}
tr.me-row td{background:#ffd52c12}
/* responsive */
@media (max-width:640px){
  :root{--cw:clamp(50px,16.5vw,72px)}
  .mt-felt{min-height:clamp(320px,58vh,440px);padding:8px;border-radius:26px}
  .mt-seat.pos-left,.mt-seat.pos-right{top:30%}
  .mt-seat.pos-left{left:4px}.mt-seat.pos-right{right:4px}
  .mt-seat-id{padding:3px 8px 3px 3px}.mt-seat-id b{max-width:62px;font-size:12px}.mt-seat-id small{font-size:10px}
  .mt-seat .mt-av{width:30px;height:30px;font-size:18px}.mt-seat .mt-ring{width:36px;height:36px;-webkit-mask:radial-gradient(circle,transparent 15px,#000 16px);mask:radial-gradient(circle,transparent 15px,#000 16px)}
  .mt-seats[data-n="3"] .mt-fan,.mt-seats[data-n="4"] .mt-fan{height:calc(var(--cw)*.5)}
  .mt-seats[data-n="4"] .pos-left .mt-fan .card,.mt-seats[data-n="4"] .pos-right .mt-fan .card{margin-left:calc(var(--cw)*-.34)}
  .mt-center{top:60%;gap:14px}
  .mt-msg{text-align:left;min-width:100%;font-size:14px}
  .mt-me{margin-top:10px}
  .mt-actions .btn{min-width:130px}
  .container:has(.mt-shell){padding-left:10px;padding-right:10px;padding-top:12px}
}
@media (max-height:520px) and (orientation:landscape){
  :root{--cw:clamp(46px,9vh,64px)}
  .mt-felt{min-height:62vh}.mt-hand{padding-top:18px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (max-width:640px){body:has(.mt-shell) .nav{display:none}body:has(.mt-shell) .topbar{padding:10px 12px}body:has(.mt-shell) .footer{display:none}.mt-felt{min-height:clamp(300px,50vh,420px)}}