:root{--bg:#0f1720;--bg-table:#10422f;--bg-table-edge:#0b2f21;--surface:#17222d;--surface-2:#1f2c39;--text:#f1f5f9;--text-dim:#94a3b8;--border:#2c3a48;--accent:#eab308;--accent-2:#38bdf8;--danger:#ef4444;--success:#22c55e;--card-bg:#fdfdfb;--card-text:#17222d;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font:16px/1.4 var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;padding:0}body{background:var(--bg);touch-action:manipulation;overflow-x:hidden}#root{flex-direction:column;min-height:100dvh;display:flex}button{font:inherit;cursor:pointer}input{font:inherit}.app-shell{flex-direction:column;width:100%;max-width:720px;min-height:100dvh;margin:0 auto;display:flex;position:relative}.app-shell.turn-urgent:before{content:"";-webkit-mask-composite:xor;pointer-events:none;z-index:15;background:linear-gradient(90deg,#ff0040,#ff8c00,#fe0,#22c55e,#38bdf8,#a855f7,#ff0040);padding:4px;animation:2.4s linear infinite rainbow-spin;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.app-header{padding:env(safe-area-inset-top,10px) 58px 8px 14px;justify-content:space-between;align-items:center;gap:12px;display:flex}.app-header h1{font-family:"Luckiest Guy", var(--heading,var(--sans));letter-spacing:.5px;white-space:nowrap;color:var(--accent);text-shadow:1px 1px #00000059;text-align:center;transform-origin:50%;margin:0;font-size:22px;font-weight:400;line-height:1.1;transform:rotate(-4deg)}.name-entry{z-index:1;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:32px 20px;display:flex;position:relative}.name-entry h1{font-family:"Luckiest Guy", var(--heading,var(--sans));letter-spacing:.5px;color:var(--accent);text-shadow:2px 2px #00000059;width:100%;max-width:280px;margin:0;font-size:42px;font-weight:400;line-height:1.15;transform:rotate(-4deg)}.name-entry .tagline{color:var(--text-dim);max-width:360px}.name-entry form,.home-actions{flex-direction:column;gap:12px;width:100%;max-width:280px;margin-top:12px;display:flex}.name-entry input{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:12px 14px}.game-table{background:radial-gradient(ellipse at center, var(--bg-table) 0%, var(--bg-table-edge) 100%);border-radius:20px;flex:1;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;min-height:260px;margin:8px 10px;padding:10px;display:grid;position:relative}.seat{flex-direction:column;align-items:center;gap:4px;min-width:0;max-width:100%;display:flex}.seat-top{grid-area:1/2}.seat-left{grid-area:2/1;align-self:center}.seat-right{grid-area:2/3;align-self:center}.seat-label{color:var(--text-dim);background:#00000040;border-radius:999px;align-items:center;gap:6px;padding:3px 8px;font-size:12px;display:flex}.seat-label.turn{color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.card-count{background:#ffffff26;border-radius:999px;padding:0 6px;font-size:11px}.opponent-cards{max-width:100%;display:flex;overflow:hidden}.opponent-cards .playing-card{margin-left:-22px}.opponent-cards .playing-card:first-child{margin-left:0}.play-area{flex-direction:column;grid-area:2/1/auto/span 3;justify-content:center;align-items:center;gap:6px;min-height:100px;display:flex}.play-area-label{color:#ffffffb3;font-size:12px}.play-area-cards{gap:4px;display:flex}.my-area{padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);flex-direction:column;gap:8px;display:flex}.my-label{color:var(--text-dim);font-size:13px}.my-label.turn{color:var(--accent);font-weight:600}.hand-sort-controls{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.sort-mode-toggle,.combo-type-toggle{background:var(--surface-2);border-radius:999px;gap:4px;padding:3px;display:flex}.sort-mode-toggle button,.combo-type-toggle button{color:var(--text-dim);background:0 0;border:none;border-radius:999px;padding:5px 10px;font-size:12px}.sort-mode-toggle button.active,.combo-type-toggle button.active{background:var(--accent);color:#1a1300}.hand-cards{justify-content:center;width:100%;min-height:90px;padding:6px 2px 10px;display:flex}.hand-card-slot{flex-shrink:0}.playing-card{background:var(--card-bg);border:1px solid #0003;border-radius:8px;padding:0;font-weight:700;transition:transform .12s;display:block;position:relative;box-shadow:0 2px 4px #0000004d}.corner-index{flex-direction:column;align-items:center;line-height:1;display:flex;position:absolute;top:4px;left:5px}.playing-card .rank{font-size:15px;line-height:1}.playing-card .suit{font-size:13px;line-height:1.1}.playing-card.selected{box-shadow:0 0 0 2px var(--accent), 0 6px 10px #0006;transform:translateY(-14px)}.playing-card.highlighted:not(.selected){box-shadow:0 0 0 2px var(--accent-2)}.playing-card.disabled{opacity:.85}.playing-card.face-down{background:repeating-linear-gradient(45deg, var(--card-back-1,#2c3a70), var(--card-back-1,#2c3a70) 4px, var(--card-back-2,#3a4b8c) 4px, var(--card-back-2,#3a4b8c) 8px);border:1px solid #ffffff26}.action-bar{flex-direction:column;gap:8px;display:flex}.action-error{color:var(--danger);font-size:13px}.action-hint{color:var(--text-dim);text-align:center;font-size:12px}.action-buttons{gap:8px;display:flex}.btn{border:none;border-radius:10px;flex:1;min-height:44px;padding:12px;font-weight:600}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#1a1300}.btn-secondary{background:var(--surface-2);color:var(--text)}.btn-danger{color:var(--danger);border:1px solid var(--danger);background:0 0}.scoreboard{text-align:right;font-size:12px}.scoreboard-round{color:var(--text-dim);margin-bottom:2px}.scoreboard table{border-collapse:collapse}.scoreboard td{padding:0 0 0 10px}.scoreboard tr.leader td{color:var(--accent);font-weight:700}.scoreboard .score{text-align:right}.low-card-alert-overlay{z-index:50;background:#0006;justify-content:center;align-items:center;animation:.15s fade-in;display:flex;position:fixed;inset:0}.low-card-alert{background:var(--surface);color:var(--text);text-align:center;border:4px solid;border-image:linear-gradient(90deg,#ff0040,#ff8c00,#fe0,#22c55e,#38bdf8,#a855f7,#ff0040) 1;border-radius:16px;padding:20px 28px;font-size:20px;font-weight:700;animation:2.4s linear infinite rainbow-spin,1s ease-in-out infinite pulse-scale}@keyframes rainbow-spin{0%{filter:hue-rotate()}to{filter:hue-rotate(360deg)}}@keyframes pulse-scale{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal-overlay{z-index:40;background:#0000008c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{z-index:1;background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;width:100%;max-width:360px;padding:24px;position:relative}.modal h2{color:var(--accent);margin-top:0;font-size:20px}.modal-subtitle{color:var(--text-dim);margin-top:-8px;font-size:13px}.round-breakdown,.match-standings{flex-direction:column;gap:6px;margin:16px 0;padding:0;list-style:none;display:flex}.round-breakdown li,.match-standings li{background:var(--surface-2);border-radius:8px;justify-content:space-between;padding:6px 10px;font-size:14px;display:flex}.match-standings li.winner{color:var(--accent);background:#eab30826;font-weight:700}.round-breakdown .points em,.match-standings .points{color:var(--text-dim);font-size:11px;font-style:normal}.seat-list{flex-direction:column;gap:8px;width:100%;max-width:320px;margin:16px 0;padding:0;list-style:none;display:flex}.seat-list-row{background:var(--surface-2);border-radius:10px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:14px;display:flex}.text-dim{color:var(--text-dim)}.leave-link{color:var(--text-dim);background:0 0;border:none;margin-top:4px;margin-left:auto;padding:0;font-size:12px;text-decoration:underline;display:block}.reconnect-banner{color:var(--danger);background:#ef444426;border-radius:10px;justify-content:center;align-items:center;gap:8px;margin:0 10px;padding:8px 12px;display:flex}.title-fan{z-index:1;justify-content:center;width:100%;max-width:280px;height:70px;margin-bottom:20px;display:flex;position:relative}.title-fan-card{transform-origin:50%;transition-property:transform;transition-timing-function:ease-in-out;position:absolute}.title-fan-card .playing-card{box-shadow:0 4px 10px #00000080}.floating-cards{pointer-events:none;z-index:-1;position:fixed;inset:0;overflow:hidden}.floating-card{will-change:transform, opacity;animation-name:float-card;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;bottom:-120px}@keyframes float-card{0%{transform:translate(0, 0) rotate(var(--start-rot));opacity:0}8%{opacity:.6}50%{transform:translate(calc(var(--dx) * .5), -58vh) rotate(calc(var(--rot) * .5))}85%{opacity:.55}to{transform:translate(var(--dx), -115vh) rotate(var(--rot));opacity:0}}@media (prefers-reduced-motion:reduce){.floating-card{animation:none;display:none}}.sound-toggle{top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));z-index:20;border:1px solid var(--border);background:var(--surface);border-radius:999px;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;line-height:1;display:flex;position:fixed;box-shadow:0 2px 6px #0006}.match-win-title{font-family:"Luckiest Guy", var(--heading,var(--sans));letter-spacing:.5px;color:var(--accent);text-shadow:2px 2px #00000059;margin:4px 0 20px;font-size:40px;font-weight:400;line-height:1.2;transform:rotate(-3deg)}.match-end-modal .btn-primary{margin-bottom:18px}.fireworks{z-index:2;pointer-events:none;position:fixed;inset:0;overflow:hidden}.firework-particle{opacity:0;border-radius:999px;width:6px;height:6px;margin:-3px 0 0 -3px;animation-name:firework-particle;animation-timing-function:ease-out;animation-iteration-count:infinite;position:absolute;box-shadow:0 0 6px}@keyframes firework-particle{0%{opacity:1;transform:translate(0)scale(1)}35%{transform:translate(var(--dx), var(--dy)) scale(.4);opacity:0}to{transform:translate(var(--dx), var(--dy)) scale(.4);opacity:0}}@media (prefers-reduced-motion:reduce){.firework-particle{animation:none;display:none}}