*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:16px;color:#f0f0f0;background:#1a1a2e}body{min-height:100vh;min-width:320px}button{font-family:inherit;cursor:pointer}#root{min-height:100vh;display:flex;flex-direction:column}.app{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#f0f0f0;position:relative}.notification{position:fixed;top:1rem;left:50%;transform:translate(-50%);background:#2d2d44;border:1px solid #555;border-radius:8px;padding:.75rem 1.5rem;z-index:1000;font-size:.95rem;box-shadow:0 4px 20px #0006;animation:slideIn .3s ease;max-width:min(calc(100vw - 2rem),400px);text-align:center;word-break:break-word}@keyframes slideIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.btn{border:none;border-radius:8px;padding:.6rem 1.4rem;font-size:1rem;font-weight:600;cursor:pointer;min-height:44px;transition:opacity .2s,transform .1s}.btn:hover{opacity:.88}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:#e94560;color:#fff}.btn--secondary{background:#0f3460;color:#fff;border:1px solid #4a90d9}.btn--ghost{background:transparent;color:#aaa;border:1px solid #555;padding:.3rem .8rem;font-size:.85rem;min-height:36px}.btn--draw{background:#2196f3;color:#fff}.btn--pass{background:#555;color:#fff}.btn--last-card{background:#ff9800;color:#fff;margin-left:1rem;font-size:.85rem;padding:.3rem .8rem;min-height:36px}.lobby{padding:2rem;max-width:640px;margin:0 auto}.lobby--centered{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem}.lobby__logo-card{display:inline-block;background:linear-gradient(145deg,#1e1e3a,#0f3460);border:2.5px solid rgba(255,255,255,.22);border-radius:20px;padding:.5rem 1.8rem .75rem;transform:rotate(-4deg);box-shadow:0 12px 40px #0000008c,inset 0 1px #ffffff1f,inset 0 -2px #0000004d}.lobby__title{font-size:5rem;font-weight:900;letter-spacing:.2em;line-height:1;margin:0}.zar-letter--z{color:#f5c518;text-shadow:0 2px 6px rgba(0,0,0,.5)}.zar-letter--a{color:#4db8ff;text-shadow:0 2px 6px rgba(0,0,0,.5)}.zar-letter--r{color:#ff4d5e;text-shadow:0 2px 6px rgba(0,0,0,.5)}.lobby__tagline{color:#aaa;font-size:1.1rem}.lobby__player-name{color:#aaa}.lobby__error{color:#ff6b6b;background:#ff6b6b1a;padding:.5rem 1rem;border-radius:6px}.lobby__input{background:#16213e;border:1px solid #444;border-radius:8px;color:#f0f0f0;font-size:1rem;padding:.6rem 1rem;width:100%;max-width:320px;min-height:44px}.lobby__input--code{font-size:1.5rem;letter-spacing:.2em;text-align:center;text-transform:uppercase}.lobby__input:focus{outline:2px solid #e94560}.lobby__actions{display:flex;gap:2rem;align-items:flex-start;justify-content:center;flex-wrap:wrap;width:100%}.lobby__action-block{display:flex;flex-direction:column;gap:.75rem;align-items:center;background:#ffffff0d;padding:1.5rem;border-radius:12px;min-width:220px}.lobby__divider{font-size:1rem;color:#666;align-self:center;padding:1rem 0}.lobby__room-code{font-size:1.5rem;display:flex;align-items:center;gap:.75rem;margin:1.5rem 0 .5rem}.lobby__room-code strong{letter-spacing:.25em;color:#e94560;font-size:2rem}.lobby__hint{color:#aaa;font-size:.9rem}.lobby__players{margin:1.5rem 0;text-align:left}.lobby__player{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;font-size:1rem}.lobby__kick-btn{font-size:.65rem;padding:2px 7px;background:#e94560;border:none;border-radius:10px;color:#fff;cursor:pointer;margin-left:auto}.lobby__legal{margin-top:1.5rem;font-size:.75rem;color:#666}.lobby__legal a{color:#4db8ff;text-decoration:none}.lobby__legal a:hover{text-decoration:underline}.lobby__start{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1.5rem}.lobby__waiting{color:#aaa;font-style:italic;margin-top:1.5rem}.lobby__invite{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin:.75rem 0}.lobby__invite-btn{font-size:1rem;padding:.6rem 1.4rem}.lobby__ask-host-actions{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:.5rem}.lobby__score-setting{display:flex;flex-direction:column;align-items:center;gap:.25rem}.lobby__score-setting input[type=range]{width:200px}.lobby__room-list{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:.5rem}.lobby__room-option{width:100%;max-width:280px;justify-content:space-between}.lobby__room-count{opacity:.7;font-size:.85em}.zar-card{width:90px;height:130px;border-radius:10px;border:3px solid rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;-webkit-user-select:none;user-select:none;transition:transform .15s,box-shadow .15s;flex-shrink:0}.zar-card--small{width:52px;height:75px;border-radius:6px;border-width:2px}.zar-card--clickable{cursor:pointer}.zar-card--clickable:hover{transform:translateY(-6px);box-shadow:0 8px 20px #0006}.zar-card--selected{transform:translateY(-14px)!important;box-shadow:0 0 0 3px #fff,0 12px 24px #00000080!important}.zar-card--playable:after{content:"";position:absolute;inset:-4px;border-radius:13px;border:3px solid rgba(255,255,255,.7);pointer-events:none;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.zar-card--back{background:linear-gradient(135deg,#1a1a2e,#0f3460);border-color:#4a90d9;cursor:pointer}.zar-card__back-logo{font-size:1.4rem;font-weight:900;color:#e94560;letter-spacing:.15em}.zar-card__points{position:absolute;top:4px;right:6px;font-size:.65rem;font-weight:700;opacity:.8}.zar-card__emoji-wrap{width:48px;height:48px;border-radius:50%;background:#ffffff47;border:1.5px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000040}.zar-card__emoji{font-size:2rem;line-height:1}.zar-card__label{font-size:.55rem;font-weight:800;letter-spacing:.1em;margin-top:4px;opacity:.9}.zar-card__sublabel{font-size:.5rem;opacity:.7}.color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;border:2px solid rgba(255,255,255,.5);margin:0 2px}.board__zar-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.board__zar-item{background:#ff980026;border:1px solid #ff9800;border-radius:20px;padding:.25rem .9rem;font-size:.9rem;font-weight:700;color:#ff9800;animation:pulse 1s infinite}.board{display:flex;flex-direction:column;min-height:100vh;max-width:580px;margin:0 auto;padding:.6rem .75rem 0;gap:.55rem;box-sizing:border-box}.board__status{font-size:1rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center;text-align:center;padding:.4rem 0}.board__your-turn{color:#4caf50;font-weight:700;font-size:1.15rem}.board__wasp-warning{color:#f5c518;font-weight:700;background:#f5c5181a;border-radius:20px;padding:.15rem .6rem}.board__wasp-info{color:#a89030;font-size:.85em;border-radius:20px;padding:.15rem .6rem}.board__declared{color:#4a90d9;font-weight:600;display:inline-flex;align-items:center;gap:4px}.board__player-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#00000040;border-radius:10px;padding:.4rem .5rem}.board__player-bar::-webkit-scrollbar{display:none}.board__match-banner{background:#ffc1072e;border:2px solid #ffc107;border-radius:10px;padding:.6rem 1rem;font-size:1rem;font-weight:700;color:#ffc107;text-align:center;animation:pulse .7s infinite}.board__play-area{display:flex;flex-direction:column;align-items:center;gap:.4rem}.board__direction{font-size:.75rem;color:#888;text-align:center}.board__piles{display:flex;gap:2.5rem;align-items:flex-end}.board__pile-wrapper{display:flex;flex-direction:column;align-items:center;gap:.3rem}.board__pile-label{font-size:.65rem;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.06em}.board__draw-pile{position:relative}.board__pile-count{position:absolute;bottom:-1.3rem;left:50%;transform:translate(-50%);font-size:.75rem;color:#aaa}.board__empty-pile{width:90px;height:130px;border:2px dashed #444;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#555;font-size:.75rem}.board__actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.board__secondary-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.2rem 0}.board__hand-area{position:sticky;bottom:0;background:#0d0d1bf7;border-top:1px solid rgba(255,255,255,.1);padding:.6rem .75rem .75rem;margin:0 -.75rem;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.board__hand-label{font-size:.8rem;color:#888;margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}.voice-chat{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}.voice-chat__btn{font-size:.78rem;padding:.25rem .65rem;min-height:32px}.voice-chat__error{font-size:.7rem;color:#ff6b6b}.help-modal{max-width:640px;width:95%;max-height:85vh;display:flex;flex-direction:column;padding:0;text-align:left;position:relative}.help-modal__close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;color:#aaa;font-size:1.1rem;cursor:pointer;line-height:1;padding:4px 8px;z-index:1}.help-modal__close:hover{color:#fff}.help-modal__tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1);padding:1rem 1rem 0;gap:.25rem;flex-shrink:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.help-modal__tabs::-webkit-scrollbar{display:none}.help-tab{background:none;border:none;color:#888;font-size:.85rem;font-weight:600;padding:.5rem 1rem;cursor:pointer;border-radius:8px 8px 0 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.help-tab:hover{color:#ccc}.help-tab--active{color:#fff;border-bottom-color:#7c6af7}.help-modal__content{overflow-y:auto;padding:1.25rem 1.5rem 1.5rem;flex:1}.help-section h2{font-size:1.3rem;margin:0 0 1rem}.help-section h3{font-size:.9rem;font-weight:700;color:#b8aaff;margin:1.25rem 0 .3rem;text-transform:uppercase;letter-spacing:.04em}.help-section p{font-size:.875rem;color:#bbb;margin:0 0 .5rem;line-height:1.55}.help-section ul{margin:0 0 .5rem 1.25rem;padding:0}.help-section li{font-size:.875rem;color:#bbb;margin-bottom:.4rem;line-height:1.5}.help-section strong{color:#e0e0e0}.help-table{width:100%;border-collapse:collapse;font-size:.8rem;margin:.5rem 0}.help-table th{text-align:left;color:#888;font-weight:600;padding:.3rem .5rem;border-bottom:1px solid rgba(255,255,255,.1)}.help-table td{color:#bbb;padding:.3rem .5rem;border-bottom:1px solid rgba(255,255,255,.05)}.help-note{font-size:.75rem!important;color:#666!important}@media(max-width:440px){.help-modal__tabs{padding:.75rem .5rem 0;gap:.1rem}.help-tab{font-size:.72rem;padding:.4rem .55rem}}.board__rules-btn{font-size:.75rem;padding:.25rem .65rem;min-height:32px;opacity:.7}.board__rules-btn:hover{opacity:1}.lobby__demo-btn{font-size:.95rem;padding:.5rem 1.4rem}.lobby__help-buttons{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}.lobby__help-btn{font-size:.8rem;padding:.4rem .9rem;min-height:36px;opacity:.75}.lobby__help-btn:hover{opacity:1}.player-list{display:flex;flex-direction:row;gap:.4rem;align-items:center;flex-wrap:nowrap;min-width:max-content}.player-row{display:flex;align-items:center;gap:.3rem;background:#ffffff0d;border-radius:20px;padding:.3rem .65rem;font-size:.78rem;border:1px solid rgba(255,255,255,.1);flex-shrink:0;white-space:nowrap}.player-row--current{border-color:#4caf50;background:#4caf501f}.player-row--me{border-color:#4a90d9}.player-row--disconnected{opacity:.45}.player-row__indicator{font-size:.6rem;color:#4caf50}.player-row__info{display:flex;align-items:center;gap:.25rem}.player-row__name{font-weight:600}.player-row__tag{font-size:.6rem;padding:1px 4px;border-radius:4px;font-weight:700}.player-row__tag--dc{background:#555;color:#aaa}.player-row__tag--bot{background:#3a3a5c;color:#9090cc}.player-row__tag--last{background:#ff9800;color:#fff;animation:pulse 1s infinite}.player-list__spectators{margin-left:.75rem;padding-left:.75rem;border-left:1px solid rgba(255,255,255,.1);display:flex;gap:.4rem;align-items:center}.player-list__spectators-label{font-size:.6rem;font-weight:700;color:#666;text-transform:uppercase}.spectator-row{font-size:.72rem;color:#666;font-style:italic}.board__spectator-label{font-style:italic;color:#888}.player-row__stats{display:flex;gap:.35rem;font-size:.72rem;color:#aaa}.player-row__challenge{font-size:.65rem;padding:2px 6px;background:#e94560;border:none;border-radius:10px;color:#fff;cursor:pointer;min-height:24px}.player-row__kick{font-size:.65rem;padding:2px 6px;background:#555;border:none;border-radius:10px;color:#fff;cursor:pointer;min-height:24px;margin-left:.25rem}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:500}.modal{background:#1e1e3a;border:1px solid #444;border-radius:16px;padding:2rem;max-width:420px;width:90%;text-align:center}.modal h2,.modal__title{font-size:1.5rem;margin-bottom:.5rem}.modal p,.modal__body{color:#aaa;margin-bottom:1.5rem}.modal__actions,.modal-options{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.modal-option{background:#ffffff14;border:2px solid rgba(255,255,255,.15);border-radius:10px;color:#f0f0f0;padding:.75rem 1rem;font-size:.9rem;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;min-height:44px;transition:background .2s,border-color .2s;min-width:90px}.modal-option:hover{background:#ffffff26;border-color:#ffffff80}.modal-option-emoji{font-size:1.5rem}.modal-option--color{min-width:100px;font-size:1rem;border:none}.score-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1.5rem;padding:2rem}.score-screen h2{font-size:2.5rem}.score-screen__winner{font-size:1.2rem;color:#4caf50;font-weight:600}.score-screen__table{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:460px}.score-row{display:flex;flex-direction:column;background:#ffffff0d;border-radius:8px;padding:.75rem 1rem;border:1px solid transparent}.score-row--me{border-color:#4a90d9}.score-row__main{display:flex;align-items:center;gap:1rem}.score-row__rank{font-size:1.2rem}.score-row__name{flex:1;font-weight:600}.score-row__score{color:#e94560;font-weight:700;font-size:1.05rem}.score-row__cards{display:flex;flex-wrap:wrap;gap:4px;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.08)}.score-screen__final{color:#aaa;font-style:italic}.hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:.5rem}@media(max-width:639px){.zar-card{width:70px;height:100px;border-radius:8px}.zar-card__emoji-wrap{width:38px;height:38px}.zar-card__emoji{font-size:1.6rem}.zar-card__label{font-size:.48rem}.zar-card__sublabel{font-size:.42rem}.zar-card__points{font-size:.58rem}.hand{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:.5rem .25rem 1rem;gap:4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#444 transparent}.board__actions .btn{min-height:48px;font-size:1rem}.score-screen{padding:1rem;gap:1rem}.score-screen h2{font-size:1.8rem}.score-screen__table{max-width:100%}}@media(min-width:640px){.board{padding:1rem 1.5rem 0;gap:.75rem}.board__piles{gap:3rem}.board__actions .btn{font-size:1.05rem}}.demo-overlay{position:fixed;inset:0;background:#000000d1;display:flex;align-items:center;justify-content:center;z-index:600;padding:.5rem;box-sizing:border-box}.demo-modal{background:#12122a;border:1px solid #3a3a5a;border-radius:16px;padding:1rem 1.25rem 1.25rem;width:100%;max-width:720px;max-height:96vh;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;box-sizing:border-box}.demo-header{display:flex;align-items:center;justify-content:space-between}.demo-title{font-size:1.3rem;margin:0;color:#f0f0f0}.demo-log-bar{display:flex;align-items:center;justify-content:space-between;background:#ffffff0f;border-radius:8px;padding:.4rem .8rem;font-size:.88rem;gap:.5rem;flex-wrap:wrap}.demo-log{color:#ccc;flex:1}.demo-counter{color:#666;font-size:.78rem;white-space:nowrap}.demo-player{display:flex;flex-direction:column;align-items:center;gap:.3rem}.demo-player--top{order:0}.demo-player--bottom{order:2}.demo-player__name{font-size:.8rem;color:#888;display:flex;align-items:center;gap:.3rem}.demo-player__name--active{color:#4caf50;font-weight:700}.demo-arrow{font-size:.7rem}.demo-hand{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.demo-hand--wrap{flex-wrap:wrap;justify-content:center;max-width:140px}.demo-middle{display:flex;align-items:center;justify-content:center;gap:.5rem}.demo-player--side{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:110px;max-width:150px}.demo-side-count{font-size:.72rem;color:#666}.demo-center{display:flex;gap:1.5rem;align-items:flex-start;justify-content:center;flex:1}.demo-pile{display:flex;flex-direction:column;align-items:center;gap:.25rem}.demo-pile__label{font-size:.72rem;color:#888;text-transform:uppercase;letter-spacing:.05em}.demo-pile__count{font-size:.68rem;color:#666}.demo-pile__empty{width:90px;height:130px;border-radius:10px;border:2px dashed #444;display:flex;align-items:center;justify-content:center;color:#555;font-size:.75rem}.demo-declared{font-size:.7rem;color:#7c6af7;background:#7c6af726;border-radius:6px;padding:2px 6px}.demo-controls{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;padding-top:.25rem}.demo-playing{color:#888;font-size:.9rem;align-self:center}.demo-done{color:#4caf50;font-size:.9rem;align-self:center}@media(max-width:540px){.demo-middle{gap:.25rem}.demo-player--side{min-width:80px;max-width:100px}.demo-hand--wrap{max-width:100px}.demo-center{gap:.75rem}}