:root{--color-felt: #0b6e4f;--color-felt-dark: #085139;--color-gold: #f5c400;--color-ink: #1b1b1b;--color-paper: #faf7f0;--color-red-suit: #b3223d;--color-black-suit: #1b1b1b;--color-danger: #d94f4f;--radius: 10px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--color-ink);background:var(--color-paper)}button{font:inherit}.screen{min-height:100vh;padding:max(16px,var(--safe-top)) 16px max(16px,var(--safe-bottom));display:flex;flex-direction:column;gap:12px}.screen__subtitle{color:#555;margin-top:-4px}.screen__loading{text-align:center;padding:40px 16px}.field{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:#444}.field input{padding:10px 12px;border-radius:var(--radius);border:1px solid #ccc;font-size:1rem}.field-error{color:var(--color-danger);font-size:.9rem;margin:0}.hint{color:#666;font-size:.85rem;margin:0}.button{padding:12px 18px;border-radius:var(--radius);border:1px solid #ccc;background:#fff;cursor:pointer}.button:disabled{opacity:.5;cursor:not-allowed}.button--primary{background:var(--color-felt);border-color:var(--color-felt-dark);color:#fff;font-weight:600}.button--small{padding:6px 10px;font-size:.85rem}.button--ghost{background:transparent}.home__join{margin-top:16px;padding-top:16px;border-top:1px solid #ddd;display:flex;flex-direction:column;gap:10px}.lobby__seats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lobby__actions{display:flex;gap:10px;flex-wrap:wrap}.seat-card{border-radius:var(--radius);border:2px solid #ddd;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:140px}.seat-card--team-a{border-color:#c94f4f}.seat-card--team-b{border-color:#3b6bc9}.seat-card--you{box-shadow:0 0 0 2px var(--color-gold) inset}.seat-card__team{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#777}.seat-card__body{display:flex;flex-direction:column;gap:6px}.seat-card__label{color:#777;margin:0}.seat-card__bots{display:flex;flex-direction:column;gap:4px}.seat-card__name{font-weight:600;margin:0}.seat-card__meta{font-size:.8rem;color:#666;margin:0}.seat-card__meta--warning{color:var(--color-danger)}.playing-card{width:52px;height:76px;border-radius:6px;border:none;background:transparent;display:block;position:relative;padding:0;flex-shrink:0;animation:card-appear .18s ease-out}.playing-card__image{width:100%;height:100%;display:block;border-radius:6px;box-shadow:0 1px 3px #0006;-webkit-user-drag:none}.playing-card--interactive{cursor:pointer}.playing-card:disabled{cursor:default}.playing-card--selected .playing-card__image{box-shadow:0 0 0 3px var(--color-gold),0 2px 6px #00000080}.playing-card--selected{transform:translateY(-6px)}.playing-card--dimmed{opacity:.7}.playing-card--scopa .playing-card__image{box-shadow:0 0 0 3px var(--color-gold),0 2px 6px #00000080}@keyframes card-appear{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.screen--game{background:var(--color-felt);color:#fff;padding-bottom:max(96px,calc(var(--safe-bottom) + 80px))}.scoreboard{display:flex;justify-content:space-between;font-weight:600;font-size:.9rem}.table-area{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:200px;margin:8px 0}.table-cards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:100%}.table-cards__empty{color:#ffffffb3;font-style:italic}.captured-piles{display:flex;justify-content:space-between;gap:8px}.captured-pile{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.captured-pile__label{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:#ffffffbf}.captured-pile__cards{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}.captured-pile__cards .playing-card{width:40px;height:58px;animation:none;flex-shrink:0}.captured-pile__empty{font-size:.75rem;color:#ffffff80}.opponent-badge{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius);background:#0003;font-size:.8rem}.opponent-badge__pulse{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:var(--radius);border:2px solid var(--color-gold);animation:badge-pulse .6s ease-out;pointer-events:none}@keyframes badge-pulse{0%{opacity:1;transform:scale(.92)}to{opacity:0;transform:scale(1.15)}}.opponent-badge--active{box-shadow:0 0 0 2px var(--color-gold)}.dealer-chip{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--color-gold);display:flex;align-items:center;justify-content:center;font-size:.7rem;line-height:1;box-shadow:0 1px 3px #00000080;border:1px solid rgba(0,0,0,.25);z-index:2}.dealer-chip--hand{top:4px;right:4px;bottom:auto;left:auto}.opponent-badge--top{align-self:center;margin-bottom:4px}.opponent-badge--left,.opponent-badge--right{position:absolute;top:50%;transform:translateY(-50%);flex-direction:column;text-align:center}.opponent-badge--left{left:4px}.opponent-badge--right{right:4px}.opponent-badge__hand{display:flex}.opponent-badge__hand .playing-card{width:22px;height:32px;margin-left:-14px}.opponent-badge__hand .playing-card:first-child{margin-left:0}.opponent-badge__info{display:flex;flex-direction:column;line-height:1.3}.opponent-badge__name{font-weight:600}.opponent-badge__bot-tag{margin-left:4px;font-size:.8em}.opponent-badge__status{color:var(--color-gold)}.move-toast{position:absolute;display:flex;align-items:center;gap:6px;background:#0000008c;border-radius:var(--radius);padding:6px 10px;font-size:.78rem;animation-duration:.32s;animation-timing-function:ease-out;animation-fill-mode:forwards;pointer-events:none;z-index:5}.move-toast--scopa{background:#f5c40040;box-shadow:0 0 0 2px var(--color-gold);font-weight:600}.move-toast--top{top:8px;left:50%;white-space:nowrap;animation-name:move-toast-top}.move-toast--bottom{bottom:8px;left:50%;white-space:nowrap;animation-name:move-toast-bottom}.move-toast--left,.move-toast--right{top:8px;flex-direction:column;align-items:flex-start;max-width:100px;white-space:normal}.move-toast--left{left:8px;animation-name:move-toast-left}.move-toast--right{right:8px;align-items:flex-end;animation-name:move-toast-right}.move-toast__cards{display:flex;align-items:center;gap:2px}.move-toast__arrow{opacity:.8}.move-toast .playing-card{width:28px;height:41px;animation:toast-card-pop .2s ease-out both}.move-toast__captured{display:flex;gap:2px}.move-toast__captured .playing-card:nth-child(1){animation-delay:.12s}.move-toast__captured .playing-card:nth-child(2){animation-delay:.2s}.move-toast__captured .playing-card:nth-child(3){animation-delay:.28s}.move-toast__captured .playing-card:nth-child(n+4){animation-delay:.36s}@keyframes toast-card-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes move-toast-top{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}@keyframes move-toast-bottom{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@keyframes move-toast-left{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes move-toast-right{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}.scopa-flash{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:800;color:var(--color-gold);text-shadow:0 2px 6px rgba(0,0,0,.6);animation:scopa-pop 1.4s ease-out forwards;pointer-events:none}@keyframes scopa-pop{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}.turn-banner{text-align:center;font-weight:600;display:flex;justify-content:center;gap:10px}.turn-banner__timer{font-weight:700;color:var(--color-gold)}.capture-choice-bar{background:#00000040;border-radius:var(--radius);padding:8px}.capture-choice-bar__options{display:flex;gap:8px;overflow-x:auto}.capture-choice{display:flex;gap:2px;background:#ffffff1a;border:2px solid var(--color-gold);border-radius:8px;padding:4px;cursor:pointer}.hand-area{position:fixed;left:0;right:0;bottom:var(--safe-bottom);display:flex;gap:6px;padding:10px 12px;overflow-x:auto;background:var(--color-felt-dark)}.hand-area__pulse{position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid var(--color-gold);animation:badge-pulse .6s ease-out;pointer-events:none}.confirm-bar{position:fixed;left:0;right:0;bottom:calc(96px + var(--safe-bottom));display:flex;justify-content:center;gap:10px;padding:8px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.overlay__panel{background:var(--color-paper);color:var(--color-ink);border-radius:var(--radius);padding:20px;max-width:360px;width:100%;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 32px);overflow-y:auto}.overlay__panel--wide{max-width:420px}.hand-score-section{border-bottom:1px dashed #ddd;padding-bottom:10px}.hand-score-section__label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-bottom:6px}.hand-score-section__winner{font-size:.8rem;font-weight:700;color:var(--color-felt)}.hand-score-section__teams{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hand-score-team{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:8px}.hand-score-team--winner{background:#f5c4002e;box-shadow:0 0 0 1px var(--color-gold) inset}.hand-score-team__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#777}.hand-score-team__extra{font-size:.85rem;font-weight:600}.hand-score-cards{display:flex;flex-wrap:wrap;gap:3px}.hand-score-cards .playing-card{width:30px;height:44px;animation:none}.hand-score-table__totals{font-weight:700;text-align:center}.screen--game-over{text-align:center;justify-content:center;align-items:center}.game-over__winner{font-size:1.4rem;font-weight:700}.game-over__actions{display:flex;gap:10px}.connection-banner{position:fixed;top:var(--safe-top);left:0;right:0;background:var(--color-danger);color:#fff;text-align:center;padding:6px 10px;font-size:.85rem;z-index:20}@media (min-width: 768px){.screen{max-width:720px;margin:0 auto}.screen--game{max-width:900px}.lobby__seats{grid-template-columns:repeat(4,1fr)}.playing-card{width:68px;height:98px}.playing-card__suit{font-size:2rem}.hand-area{position:relative;justify-content:center;background:transparent;flex-wrap:wrap}.confirm-bar{position:static}.screen--game{padding-bottom:24px}}