:root{color-scheme:dark;--bg-deep: #0b1713;--bg-felt: #123528;--panel: rgba(16, 33, 26, .92);--panel-soft: rgba(20, 44, 34, .88);--line: rgba(221, 196, 132, .2);--line-strong: rgba(221, 196, 132, .38);--text: #f5ebcf;--muted: #cbbf97;--gold: #ddb96b;--gold-strong: #f1cf84;--green-accent: #2b7a59;--danger: #8b352f;--shadow: 0 24px 80px rgba(0, 0, 0, .34);font-family:Avenir Next,Trebuchet MS,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;min-height:100vh;overflow:hidden;background:radial-gradient(circle at top center,rgba(221,185,107,.1),transparent 22rem),radial-gradient(circle at left center,rgba(44,101,76,.34),transparent 24rem),linear-gradient(180deg,#07110d,#0d1f18 20%,#143528);color:var(--text)}button,input{font:inherit}img{display:block;max-width:100%}.sr-only-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,Times New Roman,serif;font-weight:700}.shell{position:relative;width:100%;height:100dvh;padding:1rem}.screen{width:100%;height:100%;overflow:hidden}.screen-centered{display:grid;place-items:center}.panel{background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.home-card,.join-card,.loading-card{width:min(620px,100%);padding:2rem}.loading-card{text-align:center;font-size:1.1rem}.home-card{display:grid;gap:1.25rem;text-align:center;background:linear-gradient(180deg,#183228f2,#0b1b15fa),var(--panel)}.join-card{display:grid;gap:1rem;height:min(100%,760px);grid-template-rows:auto auto minmax(0,1fr) auto auto;background:linear-gradient(180deg,#162b22f2,#0c1914fa);overflow:hidden}.eyebrow{margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-size:.72rem}.muted{color:var(--muted)}.screen-actions{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}.screen-actions.vertical{flex-direction:column}.hero-button,.wide-button{width:100%}.compact-button{padding:.55rem .8rem}.public-rooms-panel{min-height:0;display:grid;gap:.75rem}.public-rooms-header,.public-room-row{display:flex;gap:.75rem;align-items:center;justify-content:space-between}.public-rooms-list{min-height:0;display:grid;gap:.65rem;overflow:auto;padding-right:.2rem}.public-room-item{width:100%;text-align:left;padding:.95rem;border-radius:18px;border:1px solid rgba(221,185,107,.16);background:#ffffff0a;color:var(--text);display:grid;gap:.45rem}.public-room-item:disabled{opacity:.55}.public-room-meta{color:var(--muted);font-size:.92rem}.public-room-full{color:#f0a8a1;font-size:.85rem}input{width:100%;min-width:0;background:#ffffff0a;border:1px solid var(--line);color:var(--text);border-radius:16px;padding:.95rem 1rem}button{border:0;border-radius:16px;padding:.9rem 1.2rem;cursor:pointer;transition:transform .14s ease,opacity .14s ease,background .14s ease}button:hover{transform:translateY(-1px)}button:disabled{opacity:.42;cursor:not-allowed;transform:none}.primary{background:linear-gradient(135deg,var(--gold),var(--gold-strong));color:#2e1b06;font-weight:800}.secondary{background:#ffffff0f;color:var(--text);border:1px solid rgba(255,255,255,.08)}.ghost{background:transparent;color:var(--muted)}.danger-text{color:#f0a8a1}.banner{border-radius:16px;padding:.95rem 1rem;background:#ddb96b1f;border:1px solid rgba(221,185,107,.2)}.banner.error{background:#8b352f47;border-color:#d76c625c}.global-banner{position:absolute;top:1rem;left:50%;transform:translate(-50%);width:min(760px,calc(100% - 2rem));z-index:20}.card-flight{position:fixed;z-index:40;pointer-events:none;transform:translateZ(0) scale(1);transform-origin:center center}.card-flight.animate{transition:transform .44s cubic-bezier(.22,.9,.24,1);transform:translate3d(var(--flight-x, 0px),var(--flight-y, 0px),0) scale(var(--flight-scale-x, 1),var(--flight-scale-y, 1))}.card-flight-shell{position:relative;width:100%;height:100%;transform-style:preserve-3d}.card-flight.animate .card-flight-shell{animation:card-flip .44s ease forwards}.card-flight-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden}.card-flight-front{transform:rotateY(180deg)}@keyframes card-flip{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.lobby-screen{display:grid;place-items:center}.lobby-main-card{width:min(980px,100%);height:min(100%,760px);padding:1.4rem;display:grid;gap:.85rem;grid-template-rows:auto auto minmax(0,1fr) auto;background:radial-gradient(circle at top left,rgba(221,185,107,.08),transparent 20rem),linear-gradient(180deg,#152c22f2,#0a1813fa);overflow:hidden}.screen-header,.section-title,.participant-name-row,.hand-panel-head,.opponent-meta,.top-zone-head{display:flex;gap:.75rem;align-items:center;justify-content:space-between}.status-chip,.pill{border:1px solid var(--line-strong);background:#ffffff0d;border-radius:999px;padding:.42rem .8rem;color:var(--muted);white-space:nowrap}.lobby-layout{display:grid;gap:1rem;grid-template-columns:1fr 1.2fr}.inset-panel{padding:1rem;background:var(--panel-soft);border-radius:22px;border:1px solid rgba(255,255,255,.04);display:grid;gap:.9rem}.setting-label{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.toggle-row{display:flex;gap:.75rem}.participant-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));overflow:hidden}.participant-card{border-radius:18px;border:1px solid rgba(221,185,107,.12);background:#ffffff08;padding:.95rem;display:grid;gap:.4rem}.game-screen{display:grid;height:100%;min-height:0;grid-template-rows:128px minmax(0,1fr) 228px;gap:.75rem;overflow:hidden}.top-zone{min-height:0;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.opponents-scroll{display:flex;width:100%;height:100%;justify-content:center;overflow-x:auto;overflow-y:hidden}.opponents-track{display:flex;gap:.8rem;width:max-content;min-width:100%;height:100%;align-items:stretch;justify-content:center;margin-inline:auto;padding-bottom:.05rem}.opponent-seat{width:128px;min-width:128px;height:100%;padding:.65rem;border-radius:20px;border:1px solid rgba(255,255,255,.06);background:#0e2019c7;display:grid;gap:.4rem;justify-items:center;align-content:center;flex:0 0 auto;overflow:hidden}.opponent-seat.active{border-color:#ddb96b59;box-shadow:inset 0 0 0 1px #ddb96b38}.opponent-meta{flex-direction:column;gap:.08rem;text-align:center;align-items:center;justify-content:center;font-size:.78rem;min-width:0}.opponent-meta strong,.opponent-meta span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-layout{min-height:0;height:100%;display:grid;gap:.75rem;grid-template-columns:98px minmax(0,1fr);align-items:stretch;overflow:hidden}.table-side,.table-center{min-height:0}.deck-zone{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}.deck-actions{display:grid;gap:.45rem;width:100%}.deck-button{width:100%;text-align:center}.card-stack{position:relative;width:96px;height:138px}.card-stack.empty{border-radius:18px;border:1px dashed rgba(221,185,107,.3);background:#ffffff08}.card-stack.compact{width:58px;height:84px}.card-stack-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}.card-stack-count{position:absolute;right:-8px;bottom:-10px;min-width:38px;padding:.3rem .6rem;border-radius:999px;background:#08130ee0;border:1px solid var(--line-strong);font-weight:700;text-align:center}.table-surface{height:100%;min-height:0;padding:.75rem .9rem;border-radius:28px;border:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at center,rgba(43,122,89,.26),transparent 18rem),linear-gradient(180deg,#0f3a2ceb,#0a261df5);box-shadow:inset 0 0 0 1px #ffffff0a;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.table-chain{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:.9rem;min-width:0}.table-history-stack{flex:0 0 auto}.discard-zone{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;padding-inline:.35rem}.table-card-chain{flex:0 0 auto}.table-card-chain+.table-card-chain{margin-left:calc(-1 * var(--table-overlap, 0px))}.table-card-frame{padding:0;border:0;background:transparent;outline:none}.table-card-frame:focus-visible{border-radius:16px;box-shadow:0 0 0 3px #f1cf84b8}.table-card-asset{width:102px;max-width:none;min-width:102px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.3))}.table-banner{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;display:flex;gap:.6rem;justify-content:space-between;align-items:center;flex-wrap:wrap}.hand-panel{height:100%;min-height:0;padding:.7rem .7rem .5rem;border-radius:24px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,#12261ef5,#0a1511fa);display:grid;grid-template-rows:auto minmax(0,1fr);gap:.5rem;overflow:hidden}.hand-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.45rem;align-items:center;min-height:0}.hand-status,.hand-actions{display:flex;gap:.45rem;min-width:0;overflow-x:auto;overflow-y:hidden}.hand-status{justify-content:flex-start}.hand-actions{justify-content:flex-end}.hand-status .status-chip,.hand-actions button{flex:0 0 auto}.hand-fan-scroll{display:flex;justify-content:center;min-height:0;overflow-x:auto;overflow-y:hidden;padding-bottom:.1rem}.hand-fan{display:flex;gap:.45rem;min-width:max-content;height:100%;align-items:flex-end;padding:0 .25rem .15rem;margin-inline:auto}.hand-card-slot{position:relative;transition:transform .14s ease;flex:0 0 auto}.hand-card-slot:hover{transform:translateY(-6px);z-index:6}.hand-card{width:86px;padding:0;border-radius:18px;background:transparent;border:0}.card-asset{width:100%;height:auto;border-radius:18px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.22))}.card-playable .card-asset{filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 20px rgba(241,207,132,.34)) drop-shadow(0 10px 18px rgba(0,0,0,.22))}.card-muted{opacity:.82}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040807b8;display:grid;place-items:center;padding:1rem;z-index:30}.modal{width:min(360px,100%);background:#10261d;border:1px solid var(--line);border-radius:24px;padding:1.25rem;display:grid;gap:1rem}.suit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}@media (max-width: 960px){.lobby-layout{grid-template-columns:1fr}}@media (max-width: 720px){.shell{height:100dvh;padding:.5rem}.screen{height:calc(100dvh - 1rem)}.game-screen{grid-template-rows:98px minmax(0,1fr) 214px;gap:.45rem}.screen-header,.section-title{flex-direction:column;align-items:flex-start}.global-banner{width:calc(100% - 1rem)}.home-card,.join-card,.loading-card,.lobby-main-card{padding:1rem}.lobby-main-card,.join-card{height:100%}.status-chip,.pill{padding:.32rem .56rem;font-size:.76rem}.opponents-track{gap:.45rem}.opponent-seat{width:100px;min-width:100px;padding:.45rem;gap:.25rem;border-radius:18px}.opponent-meta{font-size:.72rem}.card-stack.compact{width:42px;height:60px}.card-stack{width:68px;height:98px}.card-stack-count{min-width:30px;padding:.18rem .4rem;font-size:.72rem}.table-layout{gap:.45rem;grid-template-columns:72px minmax(0,1fr)}.deck-zone{gap:.35rem}.deck-actions{gap:.3rem}.deck-button{padding:.42rem .3rem;font-size:.76rem}.table-surface{padding:.55rem;border-radius:22px}.table-chain{gap:.45rem}.table-card-asset{width:74px;min-width:74px}.screen-actions,.toggle-row{gap:.4rem}.public-room-item{padding:.75rem;gap:.35rem}.public-room-meta{font-size:.84rem}button{padding:.56rem .72rem;font-size:.9rem}.participant-grid{gap:.55rem;grid-template-columns:repeat(2,minmax(0,1fr))}.participant-card{padding:.7rem;gap:.25rem;font-size:.92rem}.hand-panel{padding:.5rem .55rem .35rem;gap:.4rem;border-radius:20px}.hand-strip{grid-template-columns:1fr;gap:.25rem}.hand-fan-scroll{padding-bottom:0}.hand-card{width:74px}}@media (max-width: 420px){.game-screen{grid-template-rows:88px minmax(0,1fr) 198px}.opponent-seat{width:88px;min-width:88px}.card-stack.compact{width:38px;height:54px}.card-stack{width:60px;height:86px}.table-layout{grid-template-columns:66px minmax(0,1fr)}.table-card-asset{width:66px;min-width:66px}.hand-card{width:68px}}