:root{--ink:#173c36;--muted:#687f79;--line:#d9e6e1;--green:#176f58;--soft:#eff8f4;--blue:#486a91;--gold:#ffce65;--shadow:0 7px 23px rgba(30,74,60,.06)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f1f7f4;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;font-size:14px;letter-spacing:-.025em}body{background:radial-gradient(ellipse at top,#e6f4eb,transparent 60%),#f5f8f5}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);padding:9px 12px;font-weight:750;cursor:pointer;white-space:nowrap}button:disabled{opacity:.36;cursor:default}button:hover:not(:disabled){filter:brightness(.97)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #71a9e7;outline-offset:2px}input,select{padding:10px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);min-width:0;width:100%;font-size:16px}input:focus{outline:2px solid #95c9b4}a{color:var(--green);text-decoration:none}[hidden]{display:none!important}.app{max-width:820px;margin:0 auto;padding:4px 10px max(10px,env(safe-area-inset-bottom))}.top{display:flex;align-items:center;gap:7px;min-height:43px;padding-top:env(safe-area-inset-top);margin-bottom:3px}.top h1{font-size:19px;line-height:1.15;flex:1;margin:0;white-space:nowrap}.brand{display:block;font-size:10px;letter-spacing:.02em;color:var(--muted);margin-top:3px;font-weight:550}.iconbtn{display:grid;place-items:center;width:29px;height:34px;font-size:30px;color:var(--ink)}.small{font-size:12px;padding:7px 9px;border-radius:9px;min-height:32px}.accent{background:#e4f2e9;color:var(--green);border-color:#bfd9cd}.primary{background:var(--green);color:#fff;border-color:var(--green)}.secondary{background:#eef5f1;color:var(--green)}.linkbtn{display:inline-block;border-radius:12px;padding:12px 24px}.wide{width:100%;margin-top:11px}.card{padding:16px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:17px;margin:10px 0;box-shadow:var(--shadow)}h2{font-size:20px;margin:6px 0 18px}h3{font-size:16px;margin:0 0 12px}.center{text-align:center}.welcome{text-align:center;padding:18px 0 5px}.welcome>span,.welcome-icon{font-size:48px;display:block}.welcome h2{margin-top:10px}.field{display:block;min-width:0;flex:1;font-size:12px;font-weight:700;color:var(--muted);line-height:1.7}.formrow{display:flex;align-items:end;gap:9px;margin-top:10px}.formrow>button{flex:1}.notice{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:99;max-width:min(92vw,620px);padding:11px 16px;border-radius:13px;background:#163e34;color:#fff;box-shadow:0 8px 28px #0003;font-weight:600;font-size:13px}.notice.error{background:#893c32}.scroller{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;touch-action:pan-x;gap:6px}.scroller>*{flex-shrink:0}.players{padding:2px 0 5px;scrollbar-width:none;min-height:44px}.player{min-width:83px;max-width:122px;height:39px;display:flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--line);border-radius:11px;background:#fff}.player.current{border-color:var(--green);background:#e2f3e7;box-shadow:inset 0 0 0 1px var(--green)}.player .face{font-size:22px;line-height:1}.player .name{display:block;font-size:11px;line-height:1.2;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .score{font-size:10px;color:var(--muted)}.player.offline{opacity:.65}.turnbar{display:flex;gap:4px;align-items:center;min-height:36px;padding:2px 0}.turntext{flex:1;min-width:0;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stageword{color:var(--green)}.clock{font-variant-numeric:tabular-nums;min-width:27px;text-align:center;font-size:18px;color:var(--green)}.clock.urgent{color:#bb4937}.round{width:34px;height:31px;min-width:34px;padding:0;font-size:23px;border-radius:8px}.turnbar .small{padding:5px 7px;min-height:31px;font-size:11px}.progress{height:3px;border-radius:2px;overflow:hidden;background:#e3eae6;margin:1px 0 4px}.progress i{display:block;height:100%;width:0;background:#50a486;transition:width .1s linear}.prepbar{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;color:var(--muted);min-height:28px;padding:1px 0 3px}.boardarea{position:relative;min-height:130px;background:#cddcd5;border:1px solid #b9ccc0;border-radius:14px;padding:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}.boardwrap{background:#fafcf9;box-shadow:0 2px 7px #244a2e20;line-height:0;max-width:100%;position:relative}.boardwrap canvas{display:block;touch-action:none;user-select:none;-webkit-user-select:none;max-width:100%}.boardempty{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#edf5ef}.boardempty>span{font-size:42px}.boardempty b{font-size:13px;color:var(--muted)}.snapfx{pointer-events:none;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:#fff8df;color:#7b520e;border:2px solid #f6cd65;border-radius:19px;padding:11px 22px;font-size:27px;font-weight:950;white-space:nowrap;box-shadow:0 5px 25px #0002;animation:pop .24s ease-out}.handhead{display:flex;gap:7px;align-items:center;padding:7px 2px 3px;height:27px;font-size:11px}.handhead b{font-size:12px}.connection{margin-left:auto;color:#668078;font-size:10px}.connection.bad{color:#a44337}.hand{height:81px;align-items:center;padding:2px 1px 6px;min-width:0;scrollbar-width:thin}.tile{width:73px;height:70px;background:white;border:1px solid #cfded5;border-radius:11px;position:relative;display:grid;place-items:center;padding:4px;flex-shrink:0}.tile canvas{display:block;width:59px;height:53px;pointer-events:none}.tile.selected{border:2px solid var(--green);background:#e7f7ed}.tile .tilelabel{font-size:9px;position:absolute;bottom:2px;right:5px;color:var(--muted);background:#fffd;border-radius:4px;padding:0 3px}.emptytray{padding:15px 8px;color:var(--muted);font-size:12px}.tabs{padding:3px 0 5px;gap:5px;scrollbar-width:none}.tabs button{padding:7px 10px;font-size:12px;border-radius:10px;position:relative}.tabs .on{background:var(--green);color:#fff;border-color:var(--green)}.tabs i{display:inline-block;width:6px;height:6px;background:#e6a22c;border-radius:50%;margin-left:1px;vertical-align:top}.tabs span{font-size:10px;opacity:.8}.panel{border:1px solid var(--line);background:#fff;border-radius:13px;padding:10px;margin:4px 0}.panel .formrow{margin-top:0}.panel .field{max-width:108px}.panel .formrow button{padding:9px 8px;font-size:12px}.shortstatus{color:var(--muted);font-size:12px;margin-top:7px;min-height:0}.panel progress{width:100%;height:8px;margin-top:8px}.avatarchoices button{font-size:27px;padding:6px 9px}.fold{margin:8px 0;border:1px solid var(--line);border-radius:12px;background:#ffffffa8;padding:0 11px;font-size:12px}.fold summary{cursor:pointer;min-height:38px;display:list-item;align-content:center;padding:10px 0;color:var(--muted);font-weight:700}.fold[open]{padding-bottom:11px}.helptext{font-size:12px;color:#466459;line-height:1.65}.helptext h3{font-size:13px;margin:15px 0 3px}.helptext p{margin:4px 0 12px}.chatlog{height:155px;overflow:auto;border-radius:9px;background:#f7faf8;padding:7px}.chatline{margin:5px 0;overflow-wrap:anywhere}.chatline b{font-size:11px;color:var(--green);margin-right:6px}.chatline span{font-size:13px;white-space:pre-wrap}.chatform{display:flex;gap:6px;margin-top:7px}.chatform input{flex:1}.chatform button{padding:8px 10px;font-size:12px}.listrow{display:flex;align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid #edf2ef}.listrow span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list{margin-bottom:8px}.result{text-align:center}.result h2{margin:2px 0 12px}.rankrow{display:flex;justify-content:space-between;gap:10px;text-align:left;padding:7px 9px;margin:3px 0;border-radius:8px;background:#f2f7f3}.rankrow:first-child{background:#fff1c8}.lastsolver{font-size:12px;color:var(--muted);margin:12px 0}.menurow{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.danger{color:#a74137}.events{font-size:11px;color:var(--muted);line-height:1.65}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}footer{text-align:center;font-size:10px;color:#8a9d94;padding:8px 0 3px}#lobby{max-width:500px;margin:auto}#roomInfo{line-height:1.7;color:var(--muted)}#kickList button{margin:3px;font-size:11px;padding:5px 8px}@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media(max-width:370px){.app{padding-left:6px;padding-right:6px}.top h1{font-size:17px}.turnbar{gap:3px}.round{width:30px;min-width:30px}.turnbar .small{font-size:10px;padding:5px}.tile{width:64px}.tabs button{padding:7px 9px}}@media(min-width:760px){.app{padding:12px 18px}.top{margin-bottom:8px}.top h1{font-size:23px}.players{min-height:50px}.player{height:45px;min-width:103px}.player .name{font-size:12px}.player .face{font-size:27px}.turntext{font-size:15px}.boardarea{padding:10px}.hand{height:92px}.tile{width:82px;height:80px}.tabs button{font-size:13px}.card{padding:22px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* V1.1.0 — direct selection, separate clocks, compact reference and restart consent. */
.hintfield{margin-top:10px}.budgetbar{display:flex;align-items:center;gap:5px;min-height:29px;margin:0 0 4px;flex-wrap:nowrap}.budget{font-size:10px;color:var(--muted);padding:4px 6px;border-radius:7px;background:#e7eee9;white-space:nowrap;font-variant-numeric:tabular-nums}.budget.active{background:#176f58;color:white}.budget.finished{opacity:.5}.budgetbar .small{font-size:10px;padding:4px 6px;min-height:27px;margin-left:auto}.reference{position:relative;flex:0 0 auto;width:66px;height:49px;border:1px solid #b8d1c3;background:white;border-radius:7px;overflow:hidden;line-height:0}.reference img{width:100%;height:100%;object-fit:contain;display:block}.reference span{position:absolute;bottom:1px;right:2px;background:#fffe;color:#345;font-size:10px;line-height:1.1;border-radius:3px}.votebox{border:1px solid #e0b55b;border-radius:12px;background:#fff6df;padding:9px 11px;margin:4px 0 7px;font-size:12px}.votetitle{display:flex;justify-content:space-between;gap:7px}.votebox p{margin:5px 0;color:#695536;line-height:1.45}.votebox .menurow{align-items:center;margin:6px 0 0}.votebox #voteCancel{margin-left:auto}.votebox #voteMine{font-size:11px;color:#695536}.tile.spent{opacity:.45}.tile.activecard{border-color:#d39a2c;background:#fff8df}.handhead #activePieceBtn{min-height:22px;padding:2px 6px;font-size:10px}.modal{position:fixed;inset:0;z-index:101;background:#163e3480;display:flex;align-items:center;justify-content:center;padding:15px;overflow:auto}.dialogcard{background:#fff;border-radius:18px;max-width:430px;width:100%;padding:20px;max-height:90vh;overflow:auto;box-shadow:0 16px 80px #0003}.dialogcard h2{margin:0 0 10px}.dialogwarning{font-size:12px;color:#7d4f30;line-height:1.6;margin:0 0 12px}.dialogcard .formrow{align-items:stretch}.setupsettings{margin:9px 0}.setupsettings .formrow{align-items:end}#lastResults{margin:8px 0;font-size:11px;color:var(--muted)}#lastResults details{padding:6px 0;border-top:1px solid #e6eee8}#lastResults summary{cursor:pointer}.historyscores{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}.historyscores span{padding:4px 6px;background:#f0f6f1;border-radius:6px}body.modal-open{overflow:hidden}@media(max-width:350px){.budgetbar{gap:3px}.budget{font-size:9px;padding:4px}.reference{width:53px;height:42px}.budgetbar .small{font-size:9px;padding:4px}.handhead #activePieceBtn{font-size:9px}}

/* V1.1.1: invitation directory stays below the board; long lists never wrap. */
.member-invite{margin:12px 0 9px;padding:13px}
.member-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}.member-head h3{flex:1;margin:0;font-size:15px}
.member-status{color:var(--muted);font-size:12px;min-height:18px;margin:7px 0;line-height:1.5}.member-status.error{color:#aa3e38}
.member-list{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:2px 1px 8px;min-width:0}
.member-card{flex:0 0 152px;min-width:0;border:1px solid var(--line);border-radius:13px;background:var(--soft);padding:9px;display:flex;flex-direction:column;gap:7px}
.member-name{display:flex;align-items:center;gap:6px;min-width:0}.member-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px}.member-face{flex:0 0 27px;text-align:center;font-size:23px}
.member-card button{width:100%;min-height:36px}.member-card button.sent{color:var(--green);background:#e1efe6;opacity:1}
.member-invite #memberMore{margin-top:5px}.piece-total{margin:8px 1px 1px;font-size:12px;color:var(--green);font-weight:700}
.listrow .room-title{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.5}.room-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}.listrow.room-entry{gap:8px;align-items:center}
@media(max-width:420px){.member-invite{padding:10px}.member-card{flex-basis:143px}.room-actions .small{font-size:11px;padding:6px;min-height:34px}.room-entry .room-title{font-size:12px}}

/* V1.1.2: clear shared clock totals and a recipient's invitation inbox. */
.budgetbar{overflow-x:auto;scrollbar-width:none}.budget{flex:0 0 auto}.budgetbar .small{flex:0 0 auto}.total-budget{background:transparent;border:1px solid var(--line);font-weight:750;padding:3px 5px}
.incoming-invites{border-color:#9bcbb5;background:#f6fffa}.incoming-invites #invitedCount{font-size:12px;color:var(--green)}.incoming-room{display:flex;align-items:center;gap:9px;padding:11px 0;border-top:1px solid var(--line)}.incoming-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.incoming-copy b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.incoming-copy span,.incoming-copy small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}.incoming-invites .list{margin:0}.incoming-invites .member-head{margin-bottom:2px}.incoming-room .primary{min-width:48px;min-height:38px}#manualInvite input{margin-top:4px}@media(max-width:350px){.incoming-room{gap:5px}.incoming-room .small{padding:5px;font-size:10px}.total-budget{font-size:9px}}