:root{--bg: #081018;--bg2: #0f1c29;--panel: rgba(11, 20, 32, .86);--panel-soft: rgba(20, 30, 46, .76);--ink: #f0e9d4;--muted: #94a7b7;--gold: #d8b763;--cyan: #55c4df;--green: #57d28d;--red: #ef6f6f;--line: rgba(255, 255, 255, .08);--shadow: 0 18px 40px rgba(0, 0, 0, .38);--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--ink);background:linear-gradient(#071018b8,#050b11e6),url(/image/background.jpg),radial-gradient(circle at top left,rgba(85,196,223,.17),transparent 26%),radial-gradient(circle at 80% 10%,rgba(216,183,99,.15),transparent 24%),linear-gradient(180deg,#071018,#09131f 45%,#050b11);background-size:cover,cover,auto,auto,auto;background-position:center,center,0 0,0 0,0 0;background-attachment:fixed;font-family:Bricolage Grotesque,sans-serif}img{max-width:100%;display:block}button,input,textarea{font:inherit}button{cursor:pointer}.app-shell{position:relative;min-height:100vh;width:min(100%,1560px);margin:0 auto;padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(16px + var(--safe-left));overflow:hidden}.ambient{position:fixed;width:42vw;height:42vw;border-radius:999px;filter:blur(32px);opacity:.16;pointer-events:none}.ambient-a{top:-8vw;left:-10vw;background:#295f7c;animation:drift 14s ease-in-out infinite}.ambient-b{right:-12vw;bottom:-10vw;background:#6d5f28;animation:drift 18s ease-in-out infinite reverse}@keyframes drift{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(2vw,3vw,0) scale(1.08)}}.hero,.main-grid,.auth-grid{position:relative;z-index:1}.hero{display:flex;flex-direction:column;justify-content:space-between;gap:16px;align-items:stretch;margin-bottom:20px}.eyebrow,.panel-title{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:.72rem}.hero h1,.panel h2{margin:8px 0 10px;font-family:Cormorant SC,serif;font-size:clamp(1.9rem,7vw,3.4rem);line-height:.98}.hero p,.panel p,.status-banner,.spectator-box,.toast{color:var(--muted)}.connection-pill{min-width:0;width:100%;max-width:100%;border:1px solid var(--line);background:#080d16b8;border-radius:22px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}.connection-pill strong{overflow-wrap:anywhere}.connection-pill .dot{width:10px;height:10px;border-radius:999px;background:var(--gold);box-shadow:0 0 12px var(--gold)}.connection-pill.connected .dot{background:var(--green);box-shadow:0 0 12px var(--green)}.connection-pill.disconnected .dot{background:var(--red);box-shadow:0 0 12px var(--red)}.toast{margin-bottom:18px;padding:14px 18px;border:1px solid rgba(239,111,111,.35);background:#2f1212b8;border-radius:16px}.auth-grid,.main-grid,.home-grid,.room-layout{display:grid;gap:22px}.auth-grid,.main-grid,.home-grid,.room-layout{grid-template-columns:minmax(0,1fr)}.main-grid{align-items:start}.main-grid.match-only{grid-template-columns:minmax(0,1fr)}.main-grid.lobby-room{max-width:1180px;margin:0 auto}.sidebar,.content{display:grid;gap:16px;min-width:0}.content{order:-1}.sidebar{order:1}.panel{border:1px solid var(--line);background:linear-gradient(180deg,#131f2ec7,#080e16d1),#0003;border-radius:clamp(20px,4vw,28px);padding:clamp(16px,3.5vw,24px);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);min-width:0}.field{display:grid;gap:8px;margin-top:14px}.field.inline{grid-template-columns:auto 1fr;align-items:center}.field input,.field textarea{width:100%;border:1px solid var(--line);background:#ffffff0a;color:var(--ink);border-radius:14px;padding:12px 14px;font-size:16px}.field textarea{resize:vertical}.guide-panel details{display:grid;gap:14px}.guide-panel summary{cursor:pointer;list-style:none;font-weight:700;color:var(--ink)}.guide-panel summary::-webkit-details-marker{display:none}.guide-copy{display:grid;gap:10px;color:var(--muted)}.auth-copy{margin:0 0 14px}.auth-copy+p{display:none}.primary-btn,.secondary-btn,.ghost-btn,.emote-btn,.mode-card{border:1px solid transparent;border-radius:16px;transition:transform .16s ease,border-color .16s ease,background .16s ease,opacity .16s ease}.primary-btn,.secondary-btn,.ghost-btn{padding:12px 16px;min-height:46px}.primary-btn{background:linear-gradient(135deg,#d8b76338,#d8b7630f);border-color:#d8b7636b;color:var(--gold)}.secondary-btn{background:linear-gradient(135deg,#55c4df2e,#55c4df0a);border-color:#55c4df61;color:var(--cyan)}.ghost-btn{background:#ffffff08;border-color:var(--line);color:var(--ink)}.primary-btn.large,.secondary-btn.large{width:100%;margin-top:18px}.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover,.emote-btn:hover,.mode-card:hover{transform:translateY(-1px)}.mode-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.mode-grid.small .mode-card{min-height:110px}.mode-card{min-height:140px;background:#ffffff08;border-color:#ffffff12;color:var(--ink);padding:16px;text-align:left}.mode-card.active{border-color:color-mix(in srgb,var(--accent),white 18%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent),transparent 52%),0 0 0 1px #ffffff08}.mode-card.disabled{opacity:.52}.mode-title-row{display:flex;justify-content:space-between;margin-bottom:8px}.mode-card .tag,.badge{padding:4px 8px;border-radius:999px;background:#ffffff0f;font-size:.74rem}.badge.ghost{color:var(--muted)}.stat-grid,.toggle-row,.profile-actions,.room-actions,.resource-row{display:grid;gap:12px}.stat-grid,.resource-row{grid-template-columns:1fr}.level-rate-box{display:grid;gap:12px;margin-top:18px}.level-rate-list{display:grid;gap:10px}.level-rate-row{display:grid;gap:4px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#ffffff08}.level-rate-row strong,.level-rate-row span{display:block}.level-rate-row span{color:var(--gold);font-size:1.05rem}.level-rate-row small{color:var(--muted)}.toggle-row,.profile-actions,.room-actions{grid-template-columns:1fr}.seat-grid{display:grid;gap:12px;grid-template-columns:1fr;margin:18px 0}.seat-card,.opponent-card,.resource-card,.overlay-card,.emote-chip-live{position:relative;border:1px solid var(--line);background:#ffffff08;border-radius:18px}.seat-card{padding:14px;min-height:122px}.seat-card.offline{opacity:.6}.seat-card.is-you{box-shadow:inset 0 0 0 1px #d8b76359}.seat-card.empty{opacity:.44}.seat-card.empty strong{display:none}.empty-seat-label{margin-top:10px;color:transparent;font-size:0}.empty-seat-label:after{content:"Empty seat";color:var(--muted);font-size:1rem}.seat-head,.overlay-head,.room-header,.board-top,.hand-header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}.seat-meta,.room-badges,.mini-fan,.spectator-box{display:flex;flex-wrap:wrap;gap:10px}.control-bar,.emote-toolbar{display:grid;gap:10px}.control-bar{grid-template-columns:1fr}.emote-toolbar{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}.seat-emote,.seat-you,.pile-size,.countdown-caption,.spectator-note{font-size:.86rem;color:var(--muted)}.room-header{margin-bottom:12px}.status-banner{border-radius:16px;border:1px solid var(--line);padding:12px 14px;background:#ffffff08}.opponent-strip{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:18px}.opponent-card{padding:14px;overflow:hidden;background:linear-gradient(180deg,#151f2fd6,#080e16e0),#ffffff08}.opponent-card.offline{border-color:#ef6f6f47}.opponent-card>div:first-child{display:flex;justify-content:space-between}.opponent-count{font-size:1.35rem;margin-top:10px}.mini-fan{margin-top:14px;min-height:56px;align-items:end}.mini-fan img{width:28px;height:44px;border-radius:9px;border:1px solid rgba(255,255,255,.09);margin-left:calc(var(--i) * -10px);object-fit:cover;box-shadow:0 10px 16px #0000004d}.table-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}.pile-column,.feed-column{display:grid;justify-items:center;gap:12px}.pile-label{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}.pile-card-live{width:min(72vw,240px);aspect-ratio:.66;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at top,#d8b76329,#101823f5);display:grid;place-items:center;box-shadow:inset 0 0 40px #ffffff05,0 16px 38px #00000073}.pile-card-live img{width:100%;height:100%;object-fit:contain}.pile-empty{display:grid;justify-items:center;gap:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.pile-empty img{width:100%;height:100%;object-fit:contain;opacity:.78}.countdown-box{display:grid;justify-items:center;gap:12px}.countdown-orb{width:clamp(90px,28vw,130px);height:clamp(90px,28vw,130px);border-radius:999px;display:grid;place-items:center;font-family:Cormorant SC,serif;font-size:clamp(1.55rem,5.4vw,2.1rem);background:radial-gradient(circle,rgba(216,183,99,.22),rgba(85,196,223,.08) 52%,transparent 80%),#ffffff08;box-shadow:0 0 26px #55c4df29;animation:heartbeat 1.6s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1);box-shadow:0 0 26px #55c4df29}50%{transform:scale(1.05);box-shadow:0 0 38px #d8b76338}}.emote-strip{width:100%;display:grid;gap:10px}.emote-chip-live{padding:12px 14px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;animation:fly-in .3s ease-out}.emote-chip-live small{grid-column:2}@keyframes fly-in{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.emote-btn{min-width:0;width:100%;min-height:72px;padding:10px 12px;background:#ffffff08;border-color:var(--line);color:var(--ink);display:grid;gap:4px;justify-items:center}.emote-btn span{font-size:1.2rem}.hand-zone{margin-top:18px}.hand-row{min-height:clamp(168px,42vw,250px);display:flex;justify-content:flex-start;align-items:end;gap:8px;padding:14px 10px 12px;border-radius:24px;background:#ffffff08;border:1px solid var(--line);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.play-card{flex:0 0 auto;width:clamp(84px,30vw,136px);aspect-ratio:.66;border:0;background:transparent;padding:0;transform:translateY(6px) rotate(calc(var(--fan) * 4deg));animation:settle .28s ease-out;scroll-snap-align:center}.play-card img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}.play-card:hover:not(:disabled){transform:translateY(-10px) scale(1.02)}.play-card:disabled{cursor:default;opacity:.82}@keyframes settle{0%{transform:translateY(20px) scale(.95);opacity:0}to{transform:translateY(8px) rotate(calc(var(--fan) * 4deg)) scale(1);opacity:1}}.overlay-card{margin-top:18px;padding:16px}.board-panel{position:relative;overflow:hidden}.room-layout.board-only{grid-template-columns:minmax(0,1fr);max-width:1120px;margin:0 auto}.room-layout.lobby-only{max-width:860px;margin:0 auto}.board-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(216,183,99,.14),transparent 24%),radial-gradient(circle at bottom left,rgba(85,196,223,.12),transparent 28%);pointer-events:none}.board-panel>*{position:relative;z-index:1}.resource-card.themed{grid-template-columns:auto 1fr auto;align-items:center;padding:12px 14px;display:grid;gap:12px}.resource-card.themed img{width:clamp(30px,8vw,38px);height:clamp(30px,8vw,38px);object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.32))}.overlay-card.type-mistake,.overlay-card.type-mistake-restart,.overlay-card.type-defeat{border-color:#ef6f6f59;background:#4017179e}.overlay-card.type-level-clear,.overlay-card.type-victory{border-color:#d8b76359;background:#382d149e}.discard-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.discard-list span{padding:6px 10px;border-radius:999px;background:#ffffff0d}@media(max-width:599px){body{background-attachment:scroll}.board-panel{order:-1}.room-panel{order:1}}@media(min-width:600px){.stat-grid,.resource-row,.toggle-row,.profile-actions,.room-actions,.seat-grid,.opponent-strip,.control-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell{padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left))}.emote-chip-live{grid-template-columns:auto 1fr auto;gap:12px}.emote-chip-live small{grid-column:auto}}@media(min-width:760px){.hero{flex-direction:row;align-items:flex-start;gap:20px;margin-bottom:28px}.connection-pill{width:min(360px,42vw)}.auth-grid,.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.room-layout{grid-template-columns:minmax(280px,.88fr) minmax(0,1fr)}.room-layout.lobby-only{grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr)}.table-stage{grid-template-columns:minmax(220px,.9fr) minmax(0,1fr);gap:22px;align-items:center}.control-bar,.room-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.play-card{width:clamp(96px,18vw,136px)}}@media(min-width:1080px){.main-grid{grid-template-columns:minmax(280px,330px) minmax(0,1fr)}.main-grid.lobby-room{grid-template-columns:minmax(250px,300px) minmax(0,900px)}.room-layout{grid-template-columns:minmax(340px,420px) minmax(0,1fr)}.room-layout.lobby-only{grid-template-columns:minmax(360px,1.1fr) minmax(280px,.9fr)}.content,.sidebar,.board-panel,.room-panel{order:0}.opponent-strip{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}