:root{color:#f9f4ef;background:radial-gradient(circle at 10% 10%,#4a2f20 0%,#2c1e16 45%,#1c120d 100%);font-family:Pretendard,Noto Sans KR,Inter,system-ui,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}.page{place-items:center;min-height:100vh;padding:20px;display:grid}.card{background:#3c2a1f;border:1px solid #6e4f38;border-radius:16px;width:min(520px,100%);padding:20px;box-shadow:0 16px 38px #00000047}.subtitle{opacity:.85;margin-top:-6px}.group{gap:10px;margin-top:14px;display:grid}label{gap:8px;font-size:14px;display:grid}input{color:#2c1e16;background:#fdf6ed;border:1px solid #8f6f56;border-radius:10px;padding:10px 12px}button{color:#2d1d12;cursor:pointer;background:#f59f4a;border:none;border-radius:10px;padding:10px 14px;font-weight:700}button:hover{filter:brightness(1.05)}.error{color:#ffd2d2;background:#7f2d2d;border:1px solid #b94444;border-radius:8px;padding:8px 10px}.room-page{max-width:1100px;margin:0 auto;padding:16px}.room-page.mobile-wide{width:100vw;max-width:none;padding:8px 8px calc(8px + env(safe-area-inset-bottom));margin:0}.room-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.actions{gap:8px;display:flex}.actions button:disabled{opacity:.5;cursor:not-allowed}.hint{color:#f7d27a;margin:8px 0 0;font-size:14px}.hint.success{color:#b8f1c8}.phase{color:#ffd9a6;margin:4px 0 0;font-size:13px}.turn-controls{align-items:center;gap:10px;margin-top:10px;display:flex}.my-hand{margin-top:10px}.my-hand.board{justify-items:center;gap:6px;width:min(760px,84vw);margin-top:0;display:grid}.my-hand.board h3{color:#f6dfbe;margin:0;font-size:13px}.hand-list{flex-wrap:wrap;gap:8px;display:flex}.my-hand.board .hand-list{flex-wrap:nowrap;justify-content:center;max-width:min(760px,84vw);padding:2px 4px 8px;overflow-x:auto}.card-btn{background:0 0;border:none}.uno-card{--card-bg:#2f2f2f;background:var(--card-bg);color:#fff;border:4px solid #d8d8d8;border-radius:12px;width:76px;height:114px;padding:0;transition:transform .12s,box-shadow .12s,filter .12s;position:relative;overflow:hidden;box-shadow:0 8px 16px #00000052}.uno-card:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 22px #0006}.uno-card:disabled{cursor:not-allowed;filter:grayscale(.2)brightness(.8)}.uno-card:before{content:"";background:#fffffff2;border-radius:999px;position:absolute;inset:10px;transform:rotate(-26deg)scale(1.1,.86)}.uno-center,.uno-corner{z-index:1;color:#fff;text-shadow:-1px 0 #222,0 1px #222,1px 0 #222,0 -1px #222;font-weight:900;position:absolute}.uno-center{font-size:34px;line-height:1;top:50%;left:50%;transform:translate(-50%,-50%)}.uno-corner{font-size:13px;line-height:1}.uno-corner.tl{top:8px;left:8px}.uno-corner.br{bottom:8px;right:8px;transform:rotate(180deg)}.uno-card.color-red{--card-bg:#d8342d}.uno-card.color-green{--card-bg:#2ca046}.uno-card.color-blue{--card-bg:#2575e6}.uno-card.color-yellow{--card-bg:#f2c027}.uno-card.color-yellow .uno-center,.uno-card.color-yellow .uno-corner{color:#fffdf4;text-shadow:-1px 0 #3b2d04,0 1px #3b2d04,1px 0 #3b2d04,0 -1px #3b2d04}.uno-card.color-wild{--card-bg:#141414}.uno-card.color-wild:before{opacity:.95;background:linear-gradient(135deg,#f2453d 0 25%,#2b7bff 25% 50%,#2ea54f 50% 75%,#f4cb2f 75% 100%)}.uno-card.is-action .uno-center{font-size:24px}.uno-card.mini{border-width:3px;width:56px;height:84px}.uno-card.mini:before{inset:8px}.uno-card.mini .uno-center{font-size:22px}.uno-card.mini .uno-corner{font-size:10px}.muted{opacity:.8;font-size:13px}.table-wrap{--table-width:920px;--table-height:500px;--table-scale:1;width:var(--table-width);height:var(--table-height);margin-top:14px;display:block;position:relative}.table-wrap.mobile-wide{transform:scale(var(--table-scale));transform-origin:top;margin:8px auto 0}.table-seat{z-index:3;justify-items:center;gap:6px;display:grid;position:absolute}.table-seat.top{top:10px;left:50%;transform:translate(-50%)}.table-seat.left{top:50%;left:10px;transform:translateY(-50%)}.table-seat.right{top:50%;right:10px;transform:translateY(-50%)}.table-seat.bottom{bottom:10px;left:50%;transform:translate(-50%)}.seat-name{color:#ffd7a3;text-shadow:0 1px #00000080;margin:0;font-size:12px;font-weight:700}.seat-name.active{color:#9af2b7}.hidden-hand{position:relative}.hidden-hand.horizontal{width:172px;height:76px}.hidden-hand.vertical{width:76px;height:168px}.card-back{background:linear-gradient(160deg,#0f264f 0%,#113868 45%,#1f4f8b 100%);border:2px solid #f5f5f5;border-radius:10px;width:56px;height:84px;position:absolute;box-shadow:0 6px 12px #00000047}.hidden-hand.horizontal .card-back{left:calc(var(--i) * 14px);top:0}.hidden-hand.vertical .card-back{top:calc(var(--i) * 12px);left:0}.card-back:before{content:"";border:2px solid #ffffffe0;border-radius:999px;position:absolute;inset:10px}.table-center-ui{z-index:3;align-items:center;gap:26px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.center-pile{justify-items:center;gap:6px;display:grid}.pile-label{color:#f4dfbf;margin:0;font-size:12px;font-weight:700}.card-back.draw{position:relative}.table-fallback{color:#f6e8dc;background:radial-gradient(circle at 20% 20%,#6e4c34,#4b3122 60%,#372318 100%);border:2px solid #6e4f38;border-radius:20px;place-items:center;width:920px;height:500px;font-weight:700;display:grid}.overlay-panel{background:#221610bd;border:1px solid #7f624c;border-radius:10px;padding:8px 10px;font-size:14px;position:absolute;top:12px;left:12px}.last-action-banner{z-index:5;color:#ffe8c4;white-space:nowrap;text-overflow:ellipsis;background:#1a100cd9;border:1px solid #8b6a50;border-radius:999px;max-width:min(640px,70vw);padding:8px 14px;font-size:13px;position:absolute;top:calc(50% + 70px);left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 4px 14px #00000052}.action-feed{z-index:4;background:#1b100ccc;border:1px solid #7f624c;border-radius:10px;width:min(330px,34vw);max-height:180px;padding:8px 10px;position:absolute;top:12px;right:12px;overflow:auto}.action-feed h4{color:#ffdcb3;margin:0 0 6px;font-size:12px}.action-feed ul{gap:5px;margin:0;padding:0;list-style:none;display:grid}.action-feed li{color:#f5eee4;font-size:12px;line-height:1.35}.top-card-target.pulse{animation:.36s ease-out topPulse}@keyframes topPulse{0%{transform:scale(.95);box-shadow:0 0 #ffddad00}45%{transform:scale(1.08);box-shadow:0 0 20px #ffddad99}to{transform:scale(1);box-shadow:0 8px 16px #00000052}}.flying-card{left:var(--from-x);top:var(--from-y);z-index:999;pointer-events:none;animation:.43s cubic-bezier(.22,.68,.16,1) flyToTop;position:fixed;transform:translate(-50%,-50%)}.flying-draw-card{left:var(--from-x);top:var(--from-y);z-index:998;pointer-events:none;animation:.38s cubic-bezier(.2,.7,.2,1) flyDrawToSeat;position:fixed;transform:translate(-50%,-50%)}@keyframes flyToTop{0%{left:var(--from-x);top:var(--from-y);opacity:1;transform:translate(-50%,-50%)scale(1)}to{left:var(--to-x);top:var(--to-y);opacity:.9;transform:translate(-50%,-50%)scale(.92)}}@keyframes flyDrawToSeat{0%{left:var(--from-x);top:var(--from-y);opacity:1;transform:translate(-50%,-50%)scale(.96)}to{left:var(--to-x);top:var(--to-y);opacity:.88;transform:translate(-50%,-50%)scale(.84)}}.wild-picker-backdrop{z-index:1200;background:#0504089e;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.wild-picker-modal{background:#1f1713;border:1px solid #8a664c;border-radius:14px;gap:10px;width:min(360px,92vw);padding:14px;display:grid;box-shadow:0 16px 36px #00000073}.wild-picker-modal h3{color:#ffe5bd;margin:0;font-size:16px}.wild-picker-modal p{color:#f4d8b0;opacity:.95;margin:0;font-size:13px}.wild-picker-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.wild-color-btn{color:#fff;border-radius:10px;padding:12px 8px;font-size:14px}.wild-color-btn.red{background:#d8342d}.wild-color-btn.yellow{color:#281a05;background:#e8b820}.wild-color-btn.green{background:#2ca046}.wild-color-btn.blue{background:#2575e6}.wild-picker-cancel{color:#f9e5ca;background:#3f2c20}.players ul{gap:8px;margin:10px 0 0;padding:0;list-style:none;display:grid}.players li{background:#ffffff14;border-radius:8px;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:8px 10px;display:grid}