*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%;background:#062e1e;font-family:-apple-system,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif;color:#fff;-webkit-user-select:none;user-select:none}.app{max-width:480px;height:100dvh;margin:0 auto;background:#0b5d3b;position:relative;overflow:hidden}.screen{height:100%;display:flex;flex-direction:column;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.btn{border:0;border-radius:14px;padding:16px;font-size:17px;font-weight:700;cursor:pointer}.btn.main{background:#ffd43b;color:#3a2a00}.btn.sub{background:#1f8a5c;color:#fff}.btn:disabled{opacity:.5}.actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}.card{--cw: 46px;width:var(--cw);aspect-ratio:2 / 3;border-radius:calc(var(--cw) * .12);background:#fffdf5;color:#222;border:1px solid #222;position:relative;flex:0 0 auto;font-size:calc(var(--cw) * .3);font-weight:800;overflow:hidden;transition:transform .12s}.card .m{position:absolute;top:6%;left:10%;font-size:1.05em;line-height:1}.card .lbl{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-size:.85em;line-height:1;z-index:1}.card .sub{position:absolute;top:6%;right:10%;font-size:.8em;color:#c0392b}.card .stripe{position:absolute;top:28%;left:14%;right:14%;height:22%;border-radius:2px;background:#aaa}.t-hong .stripe{background:#e03131}.t-cheong .stripe{background:#1c7ed6}.t-cho .stripe{background:#2f9e44}.t-plain .stripe{background:#868e96}.k-gwang{background:#ffe066}.k-yeol{background:#ffc9a0}.k-tti{background:#fff5f5}.k-pi{background:#e9f5e1}.k-pi.ssang{background:#b2f2bb;border-color:#c92a2a;border-width:2px}.k-pi.ssang .lbl{color:#c92a2a}.k-gwang .lbl{color:#9c36b5}.card.back{background:repeating-linear-gradient(45deg,#c92a2a,#c92a2a 4px,#a61e1e 4px,#a61e1e 8px);border-color:#fff}.card.mini{border-radius:3px;font-size:calc(var(--cw) * .38)}.card.mini .lbl{bottom:6%;font-size:.8em}.card.mini .m{font-size:.9em}.card.mini .stripe{top:30%;height:18%}.card.clickable{cursor:pointer}.card.hl{box-shadow:0 0 0 3px #ffd43b;transform:translateY(-4px)}.card.dim{opacity:.75}.home .title{text-align:center;margin-top:8vh}.home .logo{font-size:64px}.home h1{margin:6px 0;font-size:34px}.home .title p{margin:0;opacity:.8}.inv{display:flex;gap:8px;margin-top:32px}.inv-item{flex:1;background:#00000040;border-radius:12px;padding:12px 6px;text-align:center}.inv-count{font-size:28px;font-weight:800;color:#ffd43b}.inv-name{font-size:13px;font-weight:700;margin-top:2px}.inv-desc{font-size:11px;opacity:.7;margin-top:4px;word-break:keep-all}.msg{text-align:center;margin-top:18px;color:#ffd43b;font-weight:700}.game{gap:4px;position:relative}.side-head{display:flex;justify-content:space-between;font-size:14px;font-weight:700}.side-head .score{color:#ffd43b}.go{color:#ff8787;margin-left:4px}.ai-hand{display:flex;justify-content:center;gap:2px}.captured{display:flex;flex-wrap:wrap;gap:2px;min-height:calc(var(--cw) * 1.5 * 2 + 2px);align-content:flex-start;background:#0003;border-radius:8px;padding:3px}.table{flex:1;min-height:0;display:flex;gap:8px;align-items:flex-start;background:#00000026;border-radius:10px;padding:8px;overflow:hidden}.floor{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}.hold{display:flex;gap:2px;padding:2px;border:1px dashed #ffd43b;border-radius:6px}.deck{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px}.peek-label{color:#ffd43b;font-weight:700}.last-turn{display:flex;align-items:center;gap:4px;font-size:12px;--cw: 22px;opacity:.9}.prompt{text-align:center;font-size:14px;font-weight:700;color:#ffd43b;min-height:20px}.items{display:flex;gap:6px;align-items:center}.item-btn{flex:1;border:0;border-radius:10px;padding:10px 4px;font-size:13px;font-weight:700;background:#1f8a5c;color:#fff}.item-btn b{color:#ffd43b}.item-btn.on{outline:3px solid #ffd43b}.item-btn:disabled{opacity:.4}.item-limit{font-size:12px;opacity:.8}.my-hand{display:flex;justify-content:center;gap:2px;padding-top:6px}.toast{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);background:#000000d9;padding:14px 22px;border-radius:14px;font-size:20px;font-weight:800;color:#ffd43b;pointer-events:none;white-space:nowrap}.modal{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10}.modal-box{background:#fff;color:#222;border-radius:18px;padding:22px;width:80%;text-align:center}.modal-box h2{margin:0 0 8px;font-size:28px}.modal-box p{font-size:13px;color:#555;word-break:keep-all}.modal-actions{display:flex;gap:10px;margin-top:14px}.modal-actions .btn{flex:1}.fx-shake{animation:shake .6s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(5px,-3px) rotate(.4deg)}30%,50%,70%{transform:translate(-9px,4px) rotate(-.6deg)}40%,60%{transform:translate(9px,-4px) rotate(.6deg)}}.flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none;animation:flash .8s ease-out forwards}.flash-swap{background:radial-gradient(circle,#be78fff2,#be78ff00 70%)}.flash-peek{background:radial-gradient(circle,#78e6fff2,#78e6ff00 70%)}.flash-steal{background:radial-gradient(circle,#ff5a5af2,#ff5a5a00 70%)}@keyframes flash{0%{opacity:0}15%{opacity:1}to{opacity:0}}.stamp{position:absolute;left:50%;top:34%;z-index:21;pointer-events:none;font-size:44px;font-weight:900;color:#fff;text-shadow:0 0 12px #000,3px 3px 0 #c92a2a;white-space:nowrap;animation:stamp .9s ease-out forwards}@keyframes stamp{0%{transform:translate(-50%,-50%) scale(3) rotate(-14deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1) rotate(-8deg);opacity:1}80%{transform:translate(-50%,-50%) scale(1.05) rotate(-8deg);opacity:1}to{transform:translate(-50%,-50%) scale(1) rotate(-8deg);opacity:0}}.result{align-items:stretch}.result-title{text-align:center;font-size:40px;margin:8vh 0 4px}.result-title.win{color:#ffd43b}.result-title.lose{color:#ff8787}.reason{text-align:center;opacity:.8;margin:0 0 16px}.score-card{background:#00000040;border-radius:14px;padding:14px 16px}.score-head{font-weight:800;margin-bottom:8px}.row{display:flex;justify-content:space-between;padding:5px 0;font-size:15px}.row.sum{border-top:1px solid rgba(255,255,255,.25);margin-top:4px;padding-top:8px;font-weight:700}.row.total{border-top:1px solid rgba(255,255,255,.25);margin-top:4px;padding-top:8px;font-size:20px;font-weight:800;color:#ffd43b}.raw{text-align:center;margin-top:14px;opacity:.8}.me-bar{display:flex;justify-content:space-between;align-items:center;background:#00000040;border-radius:12px;padding:10px 14px;font-weight:800}.me-points{color:#ffd43b}.home .title{margin-top:4vh}.inv{margin-top:20px}.notice{margin-top:14px;background:#0000004d;border-radius:12px;padding:12px;font-size:14px;text-align:center}.notice-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}.link-btn{margin-left:8px;background:none;border:0;color:#ffd43b;font-weight:800;text-decoration:underline;cursor:pointer}.btn.small{padding:11px;font-size:15px}.btn.mode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#1f8a5c;color:#fff}.btn.mode.main{background:#ffd43b;color:#3a2a00}.btn.mode span{font-size:12px;font-weight:500;opacity:.85}.btn.mode b{font-size:18px}.center-screen{justify-content:center;align-items:stretch}.sub-screen h1{margin:8px 0 4px}.panel{background:#00000040;border-radius:16px;padding:18px;margin-top:12px;display:flex;flex-direction:column;gap:10px;text-align:center}.panel h2{margin:0;font-size:22px}.panel p{margin:0;opacity:.9;word-break:keep-all}.panel .logo{font-size:48px}.hint{font-size:13px;opacity:.75;word-break:keep-all}.text-input{border:2px solid rgba(255,255,255,.3);border-radius:12px;background:#0000004d;color:#fff;padding:14px;font-size:18px;text-align:center;outline:none;-webkit-user-select:text;user-select:text}.text-input:focus{border-color:#ffd43b}.code-input{letter-spacing:6px;font-size:24px;font-weight:800}.room-code{font-size:44px;font-weight:900;letter-spacing:8px;color:#ffd43b;-webkit-user-select:text;user-select:text}.spinner{width:40px;height:40px;margin:0 auto;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#ffd43b;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.banner{position:absolute;top:0;left:0;right:0;z-index:15;background:#c92a2a;color:#fff;font-size:13px;font-weight:700;text-align:center;padding:6px 8px}.leave-btn{border:0;border-radius:8px;padding:8px 10px;font-size:12px;background:#00000059;color:#fff}.points-card{margin-top:14px}.plus{color:#ffd43b;font-weight:800}.minus{color:#ff8787;font-weight:800}.sub-row{font-size:13px;opacity:.8}