:root{--paper: #f7efdc;--paper-deep: #ece0c4;--tile: #fffaef;--ink: #29221a;--ink-soft: #75664f;--coral: #e2532f;--coral-deep: #b93c1e;--green: #1d7a63;--green-soft: #d7eadf;--gold: #e8b13c;--gold-soft: #f7e3b2;--danger: #c03524;--radius: 16px;--font-display: "Fraunces", "Georgia", serif;--font-body: "Karla", "Trebuchet MS", sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);color:var(--ink);background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");min-height:100dvh}#root{min-height:100dvh}.app{position:relative;min-height:100dvh;overflow-x:hidden}.bg-letters{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.bg-letters span{position:absolute;font-family:var(--font-display);font-weight:900;color:var(--ink);opacity:.045;line-height:1}.bg-letters span:nth-child(1){font-size:min(48vw,30rem);top:-6rem;left:-4rem;rotate:-12deg}.bg-letters span:nth-child(2){font-size:min(34vw,20rem);bottom:-4rem;right:-2rem;rotate:9deg}.bg-letters span:nth-child(3){font-size:min(20vw,11rem);top:38%;right:6%;rotate:-6deg}.bg-letters span:nth-child(4){font-size:min(16vw,9rem);bottom:28%;left:4%;rotate:14deg}.screen{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:1.5rem 1.25rem 4rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.card{width:100%;background:var(--tile);border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:8px 8px #29221a29;padding:1.5rem;animation:fadeUp .45s ease both}.card:nth-of-type(2){animation-delay:.08s}.card:nth-of-type(3){animation-delay:.16s}.card:nth-of-type(4){animation-delay:.24s}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.section-title{font-family:var(--font-display);font-weight:800;font-size:1.25rem;margin:0 0 .5rem}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.fine-print{font-size:.8rem;color:var(--ink-soft);margin:.5rem 0 0}.splash{display:grid;place-items:center;min-height:60dvh;font-family:var(--font-display);font-size:1.4rem}.tile{display:inline-flex;align-items:center;justify-content:center;background:var(--tile);border:2.5px solid var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink);font-family:var(--font-display);font-weight:800;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tile--lg{width:3.4rem;height:3.4rem;font-size:1.9rem}.tile--md{width:2.6rem;height:2.6rem;font-size:1.4rem}.tile--sm{width:1.9rem;height:1.9rem;font-size:1rem;border-width:2px}.tile--empty{background:transparent;border-style:dashed;border-color:var(--ink-soft);box-shadow:none}.tile--active{border-color:var(--coral);box-shadow:0 0 0 3px #e2532f40}.tile--hit{background:var(--green-soft);border-color:var(--green);box-shadow:0 3px 0 var(--green);color:var(--green)}.tile--gold{background:var(--gold-soft)}.tile-row{display:flex;flex-wrap:wrap;gap:.35rem}.tile-row .tile:nth-child(odd){rotate:-2deg}.tile-row .tile:nth-child(2n){rotate:1.5deg}.tile-row--center{justify-content:center}.tile-row--flip .tile{animation:flipIn .5s ease both}.tile-row--flip .tile:nth-child(2){animation-delay:.1s}.tile-row--flip .tile:nth-child(3){animation-delay:.2s}.tile-row--flip .tile:nth-child(4){animation-delay:.3s}.tile-row--flip .tile:nth-child(5){animation-delay:.4s}.tile-row--flip .tile:nth-child(n+6){animation-delay:.5s}@keyframes flipIn{0%{transform:rotateX(90deg);opacity:0}to{transform:none;opacity:1}}.logo{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem}.logo-tile{display:inline-flex;align-items:center;justify-content:center;background:var(--tile);border:2.5px solid var(--ink);border-radius:9px;box-shadow:0 3px 0 var(--ink);font-family:var(--font-display);font-weight:900}.logo--lg .logo-tile{width:2.4rem;height:2.4rem;font-size:1.35rem}.logo--sm .logo-tile{width:1.5rem;height:1.5rem;font-size:.85rem;border-width:2px}.logo .logo-tile:nth-child(odd){rotate:-3deg}.logo .logo-tile:nth-child(2n){rotate:2deg}.logo .logo-tile:nth-child(5){translate:0 -3px}.logo .logo-tile:nth-child(9){translate:0 3px}.logo-tile--coral{background:var(--coral);color:var(--tile)}.logo-tile--green{background:var(--green);color:var(--tile)}.logo-tile--gold{background:var(--gold)}.btn{font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;padding:.7rem 1.2rem;border-radius:12px;border:2.5px solid var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:translate .08s ease,box-shadow .08s ease}.btn:active:not(:disabled){translate:0 3px;box-shadow:0 1px 0 var(--ink)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--coral);color:var(--tile)}.btn--primary:hover:not(:disabled){background:var(--coral-deep)}.btn--secondary{background:var(--gold);color:var(--ink)}.btn--ghost{background:transparent;border-color:var(--ink-soft);color:var(--ink-soft);box-shadow:none}.btn--ghost:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}.btn--big{width:100%;font-size:1.05rem;padding:.9rem 1.2rem}.btn--wide{width:100%;margin-top:.75rem}.btn--small{font-size:.75rem;padding:.45rem .8rem}input{font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:12px;padding:.7rem .9rem;width:100%}input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px #e2532f33}input::placeholder{color:var(--ink-soft);opacity:.7}.field{display:flex;flex-direction:column;gap:.35rem;width:100%}.field-label{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}.home-hero{text-align:center;margin-top:1rem;animation:fadeUp .45s ease both}.tagline{font-size:1rem;color:var(--ink-soft);max-width:26rem;margin:1rem auto 0}.home-card{display:flex;flex-direction:column;gap:1rem}.divider{display:flex;align-items:center;gap:.75rem;color:var(--ink-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.divider:before,.divider:after{content:"";flex:1;border-top:2px dashed var(--paper-deep)}.join-row{display:flex;gap:.6rem}.code-input{font-family:var(--font-display);font-weight:800;font-size:1.3rem;text-align:center;letter-spacing:.35em;text-transform:uppercase}.rules{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}.lobby-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.lobby-hint{margin:0;color:var(--ink-soft)}.lobby-code{cursor:pointer;justify-content:center}.lobby-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.waiting-dots{font-family:var(--font-display);font-size:1.05rem;margin:0}.waiting-dots span{animation:blink 1.4s infinite}.waiting-dots span:nth-child(2){animation-delay:.2s}.waiting-dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,60%,to{opacity:.15}30%{opacity:1}}.setup-card{display:flex;flex-direction:column;gap:1rem;text-align:center}.setup-hint{margin:0;color:var(--ink-soft);font-size:.9rem}.setup-preview{min-height:3rem;align-items:center}.setup-placeholder{color:var(--ink-soft);opacity:.5;font-family:var(--font-display);font-size:1.3rem;letter-spacing:.2em}.word-input{text-align:center;font-size:1.15rem;letter-spacing:.15em}.game{max-width:640px}.game-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}.room-chip{font-family:var(--font-display);font-weight:800;font-size:.85rem;background:var(--gold-soft);border:2px solid var(--ink);border-radius:999px;padding:.25rem .7rem}.vs-strip{display:flex;align-items:center;gap:.45rem;font-size:.95rem}.vs{font-family:var(--font-display);font-style:italic;color:var(--coral);font-weight:700}.presence{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-left:.3rem;vertical-align:.05rem}.presence--on{background:var(--green)}.presence--off{background:var(--danger);animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.3}}.notice{width:100%;background:var(--gold-soft);border:2.5px dashed var(--ink);border-radius:var(--radius);padding:.7rem 1rem;font-size:.9rem}.turn-banner{width:100%;text-align:center;border:2.5px solid var(--ink);border-radius:999px;padding:.6rem 1rem;background:var(--paper-deep);font-size:.95rem}.turn-banner--mine{background:var(--gold);animation:bounceIn .4s ease}@keyframes bounceIn{0%{transform:scale(.92)}60%{transform:scale(1.03)}to{transform:scale(1)}}.game-section{display:flex;flex-direction:column;gap:.75rem}.game-section--muted{background:#fffaefb3}.badge{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--green-soft);color:var(--green);border-radius:999px;padding:.2rem .6rem}.badge--soft{background:var(--paper-deep);color:var(--ink-soft)}.slots{position:relative;display:flex;flex-wrap:wrap;gap:.35rem;cursor:text;padding:.25rem 0}.slots--shake{animation:shake .5s ease}@keyframes shake{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}.ghost-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;border:none;padding:0;cursor:text}.tray{display:flex;flex-wrap:wrap;gap:.4rem;min-height:2.2rem;align-items:center}.tray-chip{font-family:var(--font-display);font-weight:800;font-size:1rem;background:var(--green-soft);color:var(--green);border:2px solid var(--green);border-radius:9px;box-shadow:0 2px 0 var(--green);padding:.3rem .6rem;cursor:pointer}.tray-chip small{font-family:var(--font-body);font-weight:700;opacity:.8}.tray-chip:active:not(:disabled){translate:0 2px;box-shadow:none}.tray-chip:disabled{opacity:.35;cursor:not-allowed}.guess-actions{display:flex;gap:.5rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}.keyboard{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}.key{position:relative;font-family:var(--font-display);font-weight:800;font-size:1rem;background:var(--tile);border:2px solid var(--ink);border-radius:9px;box-shadow:0 2.5px 0 var(--ink);padding:.5rem 0;cursor:pointer;text-transform:uppercase}.key:active:not(:disabled){translate:0 2px;box-shadow:none}.key--selected{background:var(--gold);scale:1.08}.key--no{background:var(--paper-deep);color:var(--ink-soft);text-decoration:line-through;opacity:.55;box-shadow:none;cursor:default}.key--yes{background:var(--green);border-color:var(--green);color:var(--tile);box-shadow:none;cursor:default;opacity:1}.key--yes:after{content:attr(data-count);position:absolute;top:-.45rem;right:-.35rem;background:var(--gold);color:var(--ink);border:2px solid var(--ink);border-radius:999px;font-family:var(--font-body);font-size:.65rem;font-weight:800;width:1.15rem;height:1.15rem;display:grid;place-items:center}.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:14rem;overflow-y:auto}.history-entry{display:flex;align-items:center;gap:.55rem;font-size:.9rem;padding:.35rem .5rem;border-radius:8px;background:#ece0c466}.history-entry:first-child{animation:fadeUp .3s ease}.history-icon{font-weight:800;width:1.2rem;text-align:center}.history-entry--hit .history-icon{color:var(--green)}.history-entry--miss .history-icon{color:var(--danger)}.history-entry--win{background:var(--gold-soft)}.history-empty{margin:0;color:var(--ink-soft);font-size:.9rem}.result-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.result-card--win{border-color:var(--green);box-shadow:8px 8px #1d7a6340}.result-title{font-family:var(--font-display);font-size:2.2rem;font-weight:900;margin:0}.result-subtitle{margin:0;color:var(--ink-soft)}.reveal{display:flex;flex-direction:column;gap:.5rem;align-items:center}.reveal-label{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:800}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;overflow:hidden}.confetti-piece{position:absolute;top:-1rem;width:.7rem;height:.7rem;border:2px solid var(--ink);border-radius:3px;animation:fall linear infinite}.confetti-piece--0{background:var(--coral)}.confetti-piece--1{background:var(--gold);border-radius:50%}.confetti-piece--2{background:var(--green)}@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}.mode-buttons{display:flex;flex-direction:column;gap:.75rem}.mode-buttons .btn{display:flex;flex-direction:column;gap:.1rem;align-items:center}.btn-caption{font-size:.7rem;font-weight:700;letter-spacing:.05em;opacity:.8;text-transform:none}.player-list{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}.player-chip{font-weight:800;font-size:.9rem;background:var(--green-soft);color:var(--green);border:2px solid var(--green);border-radius:999px;padding:.3rem .8rem}.player-chip--off{opacity:.5}.player-chip--empty{background:transparent;border:2px dashed var(--ink-soft);color:var(--ink-soft);font-weight:600}.rival-tabs{width:100%;display:flex;flex-wrap:wrap;gap:.45rem}.rival-tab{flex:1;min-width:7rem;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;font-family:var(--font-body);font-weight:800;font-size:.9rem;background:var(--tile);border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink);padding:.55rem .6rem;cursor:pointer}.rival-tab--active{background:var(--gold);translate:0 2px;box-shadow:0 1px 0 var(--ink)}.rival-tab--dead{background:var(--paper-deep);color:var(--ink-soft);text-decoration:line-through;box-shadow:none;cursor:default;opacity:.6}.dead-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.dead-name{font-weight:800;min-width:6rem}.podium{width:100%;display:flex;flex-direction:column;gap:.6rem}.podium-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.5rem .7rem;border-radius:12px;background:#ece0c466}.podium-row--winner{background:var(--gold-soft);border:2px solid var(--gold)}.podium-medal{font-size:1.3rem;width:2rem;text-align:center;font-weight:800}.podium-name{font-weight:800;min-width:6rem}.turn-alert{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:18vh 1rem 0;pointer-events:none}.turn-alert-card{pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center;background:var(--gold);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:0 6px 0 var(--ink),0 18px 40px #29221a59;padding:1rem 1.6rem;animation:alertPop .4s cubic-bezier(.34,1.56,.64,1),alertOut .35s ease 2.2s forwards}.turn-alert-card strong{font-family:var(--font-display);font-size:1.5rem;line-height:1.2}.turn-alert-emoji{font-size:1.6rem}.turn-alert-hint{font-size:.85rem;font-weight:700;color:#29221abf}@keyframes alertPop{0%{transform:scale(.6) translateY(-24px);opacity:0}to{transform:none;opacity:1}}@keyframes alertOut{to{transform:translateY(-14px);opacity:0}}.offline{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--danger);color:var(--tile);text-align:center;font-size:.85rem;font-weight:700;padding:.4rem}.toast{position:fixed;bottom:1.25rem;left:50%;translate:-50% 0;z-index:30;max-width:min(92vw,26rem);background:var(--ink);color:var(--tile);border-radius:12px;padding:.7rem 1.1rem;font-size:.9rem;font-weight:700;box-shadow:0 6px #29221a40;animation:fadeUp .25s ease}.toast--error{background:var(--danger)}.toast--info{background:var(--green)}@media(max-width:420px){.tile--md{width:2.2rem;height:2.2rem;font-size:1.15rem}.tile--lg{width:2.9rem;height:2.9rem;font-size:1.6rem}.keyboard{grid-template-columns:repeat(7,1fr);gap:.28rem}.card{padding:1.1rem}}