*,*:before,*:after{box-sizing:border-box}:root{--bg-deep: #070f16;--bg-mid: #122838;--bg-light: #1c3a52;--panel: rgba(10, 22, 32, .74);--panel-strong: rgba(8, 18, 27, .92);--gold: #e8b65a;--gold-bright: #f4d27a;--gold-pale: #fff5d6;--gold-deep: #a87a30;--jade: #3dd68c;--jade-bright: #6ff0b0;--coral: #ff6b6b;--coral-bright: #ff9a8b;--cream: #f5e6d3;--muted: #8ba3b8;--border: rgba(232, 182, 90, .24);--shadow: 0 20px 60px rgba(0, 0, 0, .34)}body{margin:0;font-family:Outfit,Microsoft YaHei,PingFang SC,sans-serif;background:var(--bg-deep);color:var(--cream);min-height:100vh;overflow-x:hidden}button,input,select{font:inherit}button:disabled{cursor:not-allowed;opacity:.62}.cosmos-bg,.aurora,.starfield{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.cosmos-bg{z-index:-3;background:radial-gradient(ellipse at 18% 15%,rgba(61,214,140,.1),transparent 45%),radial-gradient(ellipse at 86% 78%,rgba(232,182,90,.13),transparent 48%),linear-gradient(180deg,#102434,#060d14)}.aurora{top:-30%;right:-30%;bottom:-30%;left:-30%;z-index:-2;background:radial-gradient(circle at 25% 30%,rgba(61,214,140,.18),transparent 34%),radial-gradient(circle at 75% 70%,rgba(232,182,90,.16),transparent 34%),radial-gradient(circle at 50% 50%,rgba(255,107,107,.06),transparent 44%);filter:blur(70px);animation:auroraDrift 35s ease-in-out infinite}@keyframes auroraDrift{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(4%,-3%) rotate(120deg)}66%{transform:translate(-3%,4%) rotate(240deg)}}.starfield{z-index:-1;background-image:radial-gradient(circle at 10% 20%,rgba(244,210,122,.95) 0 1px,transparent 2px),radial-gradient(circle at 40% 70%,rgba(111,240,176,.72) 0 1px,transparent 2px),radial-gradient(circle at 80% 30%,rgba(255,245,214,.72) 0 1px,transparent 2px);background-size:160px 160px,220px 220px,280px 280px;animation:starDrift 28s linear infinite}@keyframes starDrift{to{background-position:160px 160px,-220px 220px,280px -280px}}.app-shell{width:min(1440px,calc(100vw - 28px));margin:0 auto;padding:clamp(12px,2.2vw,28px) 0 34px}.app-stage{min-height:calc(100vh - 56px);border:1px solid rgba(232,182,90,.18);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 120px),#040b1173;box-shadow:var(--shadow),inset 0 0 0 1px #fff5d606;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px clamp(14px,2vw,24px);border-bottom:1px solid var(--border);background:#070f16d1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.topbar{position:sticky;top:0;z-index:10}.topbar-right{display:flex;align-items:center;gap:12px;min-width:0}.page-viewport{padding:clamp(14px,2vw,24px)}.brand{display:flex;align-items:center;gap:14px;min-width:max-content}.brand-seal{width:52px;height:52px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold-bright);box-shadow:0 0 24px #e8b65a3d;animation:sealRotate 60s linear infinite}@keyframes sealRotate{to{transform:rotate(360deg)}}.brand h1{margin:0;font-family:Cinzel,serif;font-size:clamp(20px,2.6vw,32px);letter-spacing:.12em;color:var(--gold-bright)}.brand p{margin:4px 0 0;color:var(--muted);letter-spacing:.22em;font-size:11px}.player-chip{display:inline-flex;align-items:center;gap:8px;min-width:max-content;border:1px solid rgba(111,240,176,.28);border-radius:999px;padding:8px 12px;color:var(--jade-bright);background:#3dd68c14}.player-dot{width:8px;height:8px;border-radius:999px;background:var(--jade-bright);box-shadow:0 0 12px #6ff0b0cc}.nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.nav-scroll{max-width:min(720px,52vw);overflow-x:auto;scrollbar-width:none}.nav-scroll::-webkit-scrollbar{display:none}.btn,.nav button,.nav a{border:1px solid var(--border);background:#122838b8;color:var(--cream);border-radius:8px;padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;white-space:nowrap}.btn:hover:not(:disabled),.nav button:hover,.nav a:hover{transform:translateY(-1px);border-color:#f4d27ab3;background:#1c3a52e0;box-shadow:0 10px 24px #0000003d}.btn-primary,.nav .active{background:linear-gradient(135deg,#f4d27af2,#a87a30f5);color:#081018;font-weight:800}.grid-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:clamp(14px,2vw,22px);align-items:start}.auth-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.78fr);gap:clamp(16px,3vw,28px);align-items:stretch}.lobby-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:clamp(14px,2vw,22px);align-items:start}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(14px,2vw,22px);align-items:start}.friends-panel,.admin-layout .data-page:first-child{grid-column:1 / -1}.panel,.card-panel{border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:8px;padding:clamp(16px,2vw,22px);box-shadow:0 14px 38px #00000038,inset 0 1px #fff5d609}.hero-panel,.room-hero,.game-board-panel{background:radial-gradient(circle at 82% 16%,rgba(232,182,90,.11),transparent 28%),radial-gradient(circle at 14% 88%,rgba(61,214,140,.1),transparent 30%),var(--panel)}.panel h2,.panel h3{margin:0 0 14px;color:var(--gold-bright)}.page-kicker{display:inline-flex;margin-bottom:8px;color:var(--jade-bright);font-size:11px;letter-spacing:.22em;text-transform:uppercase}.section-heading{margin-bottom:14px}.muted{color:var(--muted);line-height:1.7;overflow-wrap:anywhere}.form{display:grid;gap:12px;max-width:460px}.auth-card .form,.join-panel .form,.mode-panel .form{max-width:none}.inline-form-row,.friend-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.input,.select{width:100%;border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--cream);background:#050d15c2;outline:none;min-height:44px}.input:focus,.select:focus{border-color:var(--gold-bright);box-shadow:0 0 0 3px #e8b65a1f}.room-code-input{letter-spacing:.18em;text-transform:uppercase}.switch-line{display:inline-flex;align-items:center;gap:8px;color:var(--cream)}.hero-metrics,.stats-row{display:flex;flex-wrap:wrap;gap:10px}.hero-metrics{margin-top:20px}.stat{min-width:96px;flex:1 1 96px;text-align:center;border:1px solid var(--border);background:#122838b8;border-radius:8px;padding:10px 12px}.compact-stats .stat{min-width:120px}.stat-label{color:var(--muted);font-size:12px}.stat-value{color:var(--gold-bright);font-family:Cinzel,serif;font-size:clamp(20px,3vw,26px);font-weight:700;overflow-wrap:anywhere}.game-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.game-stats .stat{min-width:0}.board-spacer{height:18px}.board{width:min(100%,680px);margin:0 auto;display:grid;gap:clamp(7px,1.25vw,14px);perspective:1400px}.card-tile{aspect-ratio:3 / 4;min-width:0;padding:0;border:0;background:transparent;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .3s}.card-tile:not(.flipped):not(.matched):not(:disabled):hover{transform:translateY(-6px)}.card-tile:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;border-radius:12px}.card-tile:disabled{cursor:default}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.4,0,.2,1)}.card-tile.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.card-back{background:radial-gradient(circle at center,rgba(232,182,90,.18) 0%,transparent 55%),linear-gradient(135deg,#1a3447,#0a1c28);border:1.5px solid rgba(232,182,90,.35);box-shadow:0 6px 22px #00000080,inset 0 1px #ffffff0a;transition:border-color .3s,box-shadow .3s}.card-tile:not(.flipped):not(.matched):not(:disabled):hover .card-back{border-color:var(--gold);box-shadow:0 12px 32px #00000080,0 0 30px #e8b65a40,inset 0 1px #ffffff14}.card-back:before,.card-front:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:8px;pointer-events:none}.card-back:before{border:1px solid rgba(232,182,90,.22)}.card-back-seal{width:70%;height:70%;opacity:.85}.card-front{transform:rotateY(180deg);background:radial-gradient(circle at center,#e8b65a47,#1c3a5280 70%),linear-gradient(135deg,#243f54,#122434);border:1.5px solid var(--gold);box-shadow:0 6px 22px #e8b65a40,inset 0 0 28px #e8b65a1f;transition:border-color .3s,box-shadow .3s}.card-front:before{border:1px solid rgba(232,182,90,.4)}.card-symbol{color:var(--gold-pale);font-size:clamp(28px,5.5vw,64px);line-height:1;position:relative;z-index:1;text-shadow:0 0 18px rgba(244,210,122,.9),0 0 36px rgba(232,182,90,.5)}@keyframes floatFade{0%{transform:translateY(0) scale(1) rotateY(180deg);opacity:1;filter:brightness(1)}30%{transform:translateY(-12px) scale(1.12) rotateY(180deg);opacity:1;filter:brightness(1.5)}to{transform:translateY(-90px) scale(.4) rotateY(180deg);opacity:0;filter:brightness(2)}}.card-tile.matched{pointer-events:none}.card-tile.matched .card-inner{animation:floatFade .95s cubic-bezier(.4,0,.2,1) forwards}@keyframes shake{0%,to{transform:rotateY(180deg) translate(0)}15%{transform:rotateY(180deg) translate(-10px)}30%{transform:rotateY(180deg) translate(10px)}45%{transform:rotateY(180deg) translate(-9px)}60%{transform:rotateY(180deg) translate(9px)}75%{transform:rotateY(180deg) translate(-5px)}90%{transform:rotateY(180deg) translate(5px)}}.card-tile.miss .card-inner{animation:shake .55s ease-in-out}.card-tile.miss .card-front{border-color:var(--coral);box-shadow:0 6px 22px #ff6b6b66,inset 0 0 30px #ff6b6b33}.card-tile.miss .card-symbol{color:var(--coral-bright);text-shadow:0 0 18px rgba(255,154,139,.9),0 0 36px rgba(255,107,107,.5)}@keyframes cardDeal{0%{opacity:0;transform:translateY(30px) rotateY(-180deg) scale(.8)}to{opacity:1;transform:translateY(0) rotateY(0) scale(1)}}.card-tile.dealing{animation:cardDeal .6s cubic-bezier(.34,1.56,.64,1) backwards}.friend-section,.player-list{display:grid;gap:10px;margin-top:16px}.friend-row,.player-card{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid rgba(232,182,90,.14);background:#12283880;border-radius:8px;padding:12px}.friend-row p,.player-card p{margin:4px 0 0}.friend-actions,.action-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.action-row{margin-top:14px;justify-content:flex-start}.status-pill{min-width:48px;border:1px solid var(--border);border-radius:999px;padding:5px 9px;text-align:center;font-size:12px}.status-pill.online{color:var(--jade-bright);border-color:#6ff0b08c;background:#3dd68c1a}.status-pill.offline{color:var(--muted);background:#8ba3b814}.data-page{min-width:0}.table-wrap{width:100%;overflow-x:auto;border:1px solid rgba(232,182,90,.12);border-radius:8px}.table{width:100%;min-width:620px;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid rgba(232,182,90,.14);text-align:left;white-space:nowrap}.table th{color:var(--gold-bright);background:#12283880}.toast-stack{position:fixed;right:18px;top:18px;z-index:30;display:grid;gap:10px;width:min(360px,calc(100vw - 32px))}.toast{border:1px solid var(--border);border-radius:8px;background:#0a1620f0;padding:12px 14px;color:var(--cream);box-shadow:0 12px 30px #0000003d}.toast.success{border-color:#3dd68cb3}.toast.error{border-color:#ff6b6bb3}.loader{width:18px;height:18px;border:2px solid rgba(245,230,211,.24);border-top-color:var(--gold-bright);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000009e;display:grid;place-items:center;z-index:20;padding:16px}.modal{width:min(440px,100%);border:1px solid var(--border);border-radius:8px;background:var(--panel-strong);padding:24px;text-align:center;box-shadow:var(--shadow)}.stars{font-size:34px;color:var(--gold-bright);margin:18px 0}@media(max-width:1040px){.app-header{align-items:flex-start;flex-direction:column}.topbar-right{width:100%;align-items:stretch;flex-direction:column}.nav-scroll{max-width:100%;justify-content:flex-start;flex-wrap:nowrap;padding-bottom:2px}.grid-layout,.auth-layout,.lobby-layout,.game-layout{grid-template-columns:1fr}.friends-panel,.admin-layout .data-page:first-child{grid-column:auto}}@media(max-width:680px){.app-shell{width:100%;padding:0}.app-stage{min-height:100vh;border-left:0;border-right:0}.page-viewport{padding:12px}.brand-seal{width:44px;height:44px}.brand h1{font-size:20px;letter-spacing:.08em}.brand p{letter-spacing:.14em}.panel{padding:14px}.inline-form-row,.friend-add-row{grid-template-columns:1fr}.friend-row,.player-card{align-items:flex-start;flex-direction:column}.friend-actions{width:100%;justify-content:flex-start}.friend-actions .btn{flex:1 1 120px}.game-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-width:0}.board{gap:7px}.card-symbol{font-size:clamp(24px,10vw,42px)}.toast-stack{right:12px;top:12px}}