:root{--felt-1: #0b352c;--felt-2: #124a3b;--felt-3: #0a2a22;--cream: #f8efdd;--cream-dark: #e6d5ab;--ink: #16211d;--gold: #d4af37;--gold-light: #f6e2a0;--gold-dark: #a9781f;--accent: #2f9e6e;--danger: #e0574a;--panel: rgba(9, 28, 22, .55);--panel-solid: #0f2a22;--panel-border: rgba(212, 175, 55, .28);--radius: 16px;--font-display: "Cinzel", "Georgia", serif;--font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);color:var(--cream);min-height:100vh;background:radial-gradient(ellipse 900px 600px at 50% -10%,rgba(212,175,55,.14),transparent 60%),radial-gradient(ellipse 1200px 900px at 50% 110%,rgba(0,0,0,.5),transparent 60%),url(/motif.svg),radial-gradient(ellipse at top,var(--felt-2),var(--felt-1) 55%,var(--felt-3) 100%);background-repeat:no-repeat,no-repeat,repeat,no-repeat;background-size:auto,auto,140px 140px,cover;background-attachment:fixed,fixed,fixed,fixed;position:relative}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url(/grain.svg);background-size:180px 180px;opacity:.3;mix-blend-mode:overlay;pointer-events:none;z-index:0}button{font-family:inherit}#root{position:relative;z-index:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes tileIn{0%{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes glowPulse{0%,to{box-shadow:0 0 #d4af3780}50%{box-shadow:0 0 0 6px #d4af3700}}@keyframes ringPulse{0%,to{box-shadow:0 0 #d4af378c,0 0 14px 2px #d4af3740}50%{box-shadow:0 0 0 4px #d4af3700,0 0 18px 4px #d4af3766}}@keyframes confettiFall{0%{transform:translateY(-20px) translate(0) rotate(0);opacity:0}8%{opacity:1}to{transform:translateY(420px) translate(var(--drift)) rotate(540deg);opacity:0}}.home-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}.ambient-glow{position:absolute;top:50%;left:50%;width:480px;height:480px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(212,175,55,.16),transparent 70%);filter:blur(10px);pointer-events:none}.home-card{background:linear-gradient(180deg,#12382dbf,#0a221bd9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--panel-border);border-radius:22px;padding:40px 34px;width:100%;max-width:400px;box-shadow:0 24px 70px #00000080,inset 0 1px #ffffff0f;display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;animation:fadeInUp .4s ease}.logo-block{display:flex;flex-direction:column;align-items:center;gap:6px}.logo-mark{filter:drop-shadow(0 4px 10px rgba(212,175,55,.35))}.wordmark{font-family:var(--font-display);font-size:2.1rem;font-weight:700;letter-spacing:.22em;background:linear-gradient(180deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));-webkit-background-clip:text;background-clip:text;color:transparent;padding-left:.22em}.brand-sub{margin:0;text-align:center;color:var(--cream-dark);font-size:.92rem}.ornament-divider{display:flex;align-items:center;gap:10px;width:100%;color:var(--gold);opacity:.75}.ornament-divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.tabs{display:flex;gap:6px;background:#00000047;padding:5px;border-radius:12px;width:100%;border:1px solid rgba(255,255,255,.06)}.tab{flex:1;padding:10px;background:transparent;border:none;border-radius:8px;color:var(--cream-dark);cursor:pointer;font-weight:700;font-size:.88rem;transition:all .18s ease}.tab:hover{color:var(--cream)}.tab-active{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#1c1c1f;box-shadow:0 4px 12px #d4af3759}.home-form{display:flex;flex-direction:column;gap:14px;width:100%}.field{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--cream-dark);font-weight:600}.field input{padding:13px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:#00000038;color:var(--cream);font-size:1rem;font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease}.field input::placeholder{color:#e6d5ab66}.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #d4af372e}.btn{padding:14px 18px;border-radius:12px;border:none;font-weight:700;font-size:.98rem;cursor:pointer;transition:transform .1s ease,filter .15s ease,box-shadow .15s ease;font-family:inherit;letter-spacing:.01em}.btn:disabled{opacity:.4;cursor:not-allowed;filter:none!important}.btn:not(:disabled):active{transform:scale(.97)}.btn-primary{background:linear-gradient(180deg,var(--gold-light),var(--gold) 60%,var(--gold-dark));color:#201a08;box-shadow:0 6px 18px #d4af374d,inset 0 1px #ffffff80}.btn-primary:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 8px 22px #d4af376b,inset 0 1px #ffffff80;transform:translateY(-1px)}.btn-ghost{background:#ffffff0f;color:var(--cream);border:1px solid rgba(255,255,255,.15)}.btn-ghost:not(:disabled):hover{background:#ffffff1f;border-color:#ffffff40}.btn-okey{background:linear-gradient(180deg,#3fbf8a,var(--accent) 60%,#1f7a52);color:#fff;box-shadow:0 6px 18px #2f9e6e59,inset 0 1px #ffffff40}.btn-okey:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}.btn-small{padding:9px 15px;font-size:.82rem}.error-text{color:#ffb3a8;font-size:.85rem;text-align:center}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%}.player-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.06);border-radius:12px}.player-row-name{flex:1;font-weight:600}.player-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--gold-light),var(--gold-dark));color:#211a08;font-weight:800;font-size:.85rem;flex-shrink:0;box-shadow:0 2px 6px #0000004d}.player-tags{display:flex;gap:6px}.badge-dealer,.badge-you,.badge-offline{font-size:.68rem;padding:3px 9px;border-radius:999px;font-weight:800;letter-spacing:.03em}.badge-dealer{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#211a08}.badge-you{background:var(--accent);color:#fff}.badge-offline{background:#ffffff26;color:var(--cream-dark)}.waiting-text{text-align:center;color:var(--cream-dark);font-size:.88rem}.auth-bar{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;font-size:.8rem}.auth-user{display:flex;align-items:center;gap:8px;color:var(--cream-dark)}.auth-avatar{width:24px;height:24px;border-radius:50%;border:1px solid rgba(212,175,55,.4)}.btn-link{background:none;border:none;color:var(--cream-dark);text-decoration:underline;cursor:pointer;font-size:.78rem;padding:0}.btn-link:hover{color:var(--gold-light)}.btn-discord{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#5865f2;color:#fff;font-weight:700;font-size:.78rem;text-decoration:none;transition:filter .15s ease}.btn-discord:hover{filter:brightness(1.1)}.room-list{display:flex;flex-direction:column;gap:8px;width:100%;max-height:220px;overflow-y:auto}.room-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:10px;flex-wrap:wrap}.room-row-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem}.room-row-host{color:var(--cream-dark)}.room-row-count{color:var(--cream-dark);font-variant-numeric:tabular-nums}.room-row-unlock{display:flex;gap:6px}.room-row-unlock input{width:110px;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#00000040;color:var(--cream)}.leaderboard-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto;text-align:left}.leaderboard-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#ffffff0d;border-radius:10px}.leaderboard-rank{width:22px;text-align:center;font-weight:800;color:var(--gold-light);font-family:var(--font-display)}.leaderboard-avatar{width:28px;height:28px;border-radius:50%}.leaderboard-name{flex:1;font-weight:600}.leaderboard-wins{color:var(--gold-light);font-weight:700}.game-screen-outer{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:22px 14px 32px}.game-screen{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1000px;padding:20px 20px 26px;background:linear-gradient(180deg,#071813d1,#05120ee6);border:1px solid rgba(212,175,55,.16);border-radius:26px;box-shadow:0 30px 90px #0000008c,inset 0 1px #ffffff0d;animation:fadeInUp .35s ease}.game-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.turn-banner{flex:1;text-align:center;padding:9px 14px;border-radius:999px;background:#ffffff0d;border:1px solid rgba(255,255,255,.06);font-size:.88rem;color:var(--cream-dark);transition:all .2s ease}.turn-banner-active{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#201a08;font-weight:800;border-color:transparent;animation:glowPulse 2.2s ease-in-out infinite}.error-toast{background:linear-gradient(180deg,#e0574a,#b3392d);color:#fff;padding:9px 14px;border-radius:12px;text-align:center;font-size:.85rem;box-shadow:0 4px 14px #b0392d59}.opponent-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.opponent-card{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:12px 16px;min-width:120px;text-align:center;border:1px solid rgba(255,255,255,.06);transition:border-color .2s ease}.opponent-active{border-color:var(--gold)}.opponent-avatar-ring{display:flex;justify-content:center;margin-bottom:6px}.opponent-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--gold-light),var(--gold-dark));color:#211a08;font-weight:800;font-size:.9rem;border:2px solid rgba(255,255,255,.15)}.opponent-active .opponent-avatar-ring .opponent-avatar{animation:ringPulse 2s ease-in-out infinite}.opponent-name{font-weight:700;font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.opponent-tiles{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;max-width:140px;margin:8px auto 4px}.mini-tile-back{width:8px;height:20px;background:linear-gradient(180deg,#3a3a3f,#1c1c1f);border-radius:2px;border:1px solid rgba(255,255,255,.15)}.opponent-count{font-size:.7rem;color:var(--cream-dark)}.table-area{display:flex;justify-content:center;align-items:flex-start;gap:32px;background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px;flex-wrap:wrap;box-shadow:inset 0 2px 12px #00000040}.pile-group{display:flex;flex-direction:column;align-items:center;gap:7px}.pile-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cream-dark);font-weight:700}.pile-button{background:none;border:none;padding:0;cursor:default;border-radius:10px;position:relative}.pile-button:before,.pile-button:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;background:linear-gradient(180deg,#3a3a3f,#1c1c1f);border:1px solid rgba(255,255,255,.1);z-index:-1}.pile-button:before{transform:translate(2px,3px);opacity:.7}.pile-button:after{transform:translate(4px,6px);opacity:.4}.pile-clickable{cursor:pointer}.pile-clickable:hover .tile,.pile-clickable:hover .tile-back{transform:translateY(-5px);box-shadow:0 10px 20px #0006}.pile-count{font-size:.74rem;color:var(--cream-dark)}.okey-hint{font-size:.8rem;color:var(--cream-dark)}.okey-color{font-weight:800}.okey-red{color:#ff6b6b}.okey-black{color:#e6e6e6}.okey-blue{color:#5b9bf0}.okey-yellow{color:#e0b34a}.tile,.tile-back,.tile-empty{width:46px;height:62px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;font-weight:800;transition:transform .12s ease,box-shadow .12s ease;flex-shrink:0;position:relative;overflow:hidden}.tile-sm{width:34px;height:46px;font-size:1.05rem}.tile{background:linear-gradient(160deg,var(--cream) 0%,var(--cream-dark) 100%);border:1px solid rgba(0,0,0,.18);box-shadow:0 4px 8px #00000052,inset 0 1px #ffffffb3,inset 0 -2px 3px #00000014;cursor:pointer;animation:tileIn .25s ease both}.tile:disabled{cursor:default}.tile-sheen{position:absolute;top:-60%;left:-30%;width:60%;height:220%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(20deg);pointer-events:none}.tile-selected{transform:translateY(-12px);box-shadow:0 14px 22px #0000006b,0 0 0 3px var(--gold)}.tile-wild{box-shadow:0 4px 8px #00000052,inset 0 0 0 2px var(--gold)}.tile-wild.tile-selected{box-shadow:0 14px 22px #0000006b,0 0 0 3px var(--gold),inset 0 0 0 2px var(--gold)}.tile-back{background:linear-gradient(150deg,#3d3d43,#1c1c1f 70%);border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 8px #00000052,inset 0 1px #ffffff1f}.tile-back:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border:1px solid rgba(212,175,55,.35);border-radius:5px}.tile-empty{background:#ffffff0d;border:1px dashed rgba(255,255,255,.2);box-shadow:none}.tile-joker-icon{width:22px;height:22px;color:var(--gold-dark);filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}.tile-joker-face{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tile-flip-label{position:absolute;bottom:3px;right:5px;font-size:.62rem;font-weight:800;opacity:.8}.tile-flip-btn{position:absolute;top:2px;right:2px;width:17px;height:17px;border-radius:50%;border:none;background:#00000080;color:var(--gold-light);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;transition:background .15s ease,transform .15s ease}.tile-flip-btn:hover{background:#000000bf;transform:scale(1.1)}.tile-flipping{animation:tileFlipSpin .34s ease}@keyframes tileFlipSpin{0%{transform:scaleX(1)}50%{transform:scaleX(.05)}to{transform:scaleX(1)}}.tile-number{font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.5)}.rack-wrap{background:linear-gradient(180deg,#00000038,#0000001f);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 2px 10px #0000004d}.rack-controls{display:flex;gap:8px;justify-content:center}.rack-board{display:flex;flex-direction:column;gap:14px;overflow-x:auto;padding:4px 4px 8px}.rack-shelf{position:relative;background:linear-gradient(180deg,#cd9c62,#ac7642 45%,#7f5327);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0px,transparent 2px,transparent 7px),linear-gradient(180deg,#cd9c62,#ac7642 45%,#7f5327);border-radius:10px;padding:9px 10px 16px;box-shadow:0 8px 18px #0006,inset 0 2px #ffffff4d,inset 0 -10px 14px #00000059;width:fit-content;min-width:100%}.rack-shelf:after{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:6px;border-radius:4px;background:linear-gradient(180deg,#ffecc859,#00000040)}.rack-row{display:grid;grid-template-columns:repeat(16,46px);gap:6px;position:relative;z-index:1}.rack-slot{width:46px;height:62px;border-radius:8px;transition:background .12s ease,box-shadow .12s ease}.rack-slot-target{background:#d4af3738;box-shadow:inset 0 0 0 2px #d4af37b3}.tile-slot{display:inline-flex;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.tile-slot:active{cursor:grabbing}.tile-slot-ghost{opacity:.28}.tile-slot-ghost .tile{animation:none;box-shadow:inset 0 0 0 2px #d4af3780}.tile-floating{position:fixed;z-index:999;pointer-events:none;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}.tile-floating .tile{transform:scale(1.08) rotate(-2deg);cursor:grabbing}.action-bar{display:flex;gap:12px;justify-content:center}.action-bar .btn{min-width:150px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:20;padding:20px;overflow:hidden}.modal-card{background:linear-gradient(180deg,#12382df2,#0a221bfa);border:1px solid var(--panel-border);border-radius:20px;padding:34px;text-align:center;max-width:360px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 70px #0000008c;position:relative;z-index:1;animation:fadeInUp .3s ease}.modal-card-wide{max-width:600px}.modal-icon{font-size:2.8rem}.modal-card h2{margin:0;font-family:var(--font-display);font-size:1.3rem}.winning-hand{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:6px 2px 2px}.meld-group{display:flex;gap:4px;padding:7px;background:#00000038;border:1px solid rgba(255,255,255,.08);border-radius:10px}.confetti-wrap{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0}.confetti-piece{position:absolute;top:0;width:8px;height:12px;border-radius:2px;animation-name:confettiFall;animation-timing-function:ease-in;animation-iteration-count:infinite}@media (max-width: 480px){.tile,.tile-back,.tile-empty{width:38px;height:52px;font-size:1.15rem}.rack-row{grid-template-columns:repeat(16,38px);gap:5px}.rack-slot{width:38px;height:52px}.wordmark{font-size:1.7rem}}