*{font-family:Rubik,sans-serif}:root{--red:#ff6467;--green:#00d492;--blue:#06bcff;--magenta:#7c86ff}html{font-size:clamp(14px,4.2667vw,22px)}html,body{background:#f0ece4;height:100svh;margin:0;padding:0;overflow:hidden}#root{border-inline:none;width:100%;max-width:100%;height:100svh;min-height:0;overflow:hidden}.lobby{box-sizing:border-box;background:#f0ece4;flex-direction:column;justify-content:safe center;align-items:center;gap:1rem;height:100svh;padding:2rem;display:flex;overflow:hidden}.lobby-brand{flex-direction:column;flex-shrink:1;align-items:center;gap:.25rem;min-height:0;display:flex}.lobby-brand .logo{flex-shrink:1;min-height:0}.lobby-title{color:#1a1a1a;letter-spacing:-.0625rem;margin:0;font-size:2rem;font-weight:900}.logo{object-fit:contain;width:auto;height:7.5rem}.tabs{border:3px solid #1a1a1a;border-radius:.625rem;gap:0;display:flex;overflow:hidden}.tabs button{cursor:pointer;color:#1a1a1a;text-transform:uppercase;letter-spacing:.0625rem;background:#f0ece4;border:none;padding:.625rem 2.25rem;font-size:.9375rem;font-weight:700}.tabs button+button{border-left:3px solid #1a1a1a}.tabs button.active{color:#f0ece4;background:#1a1a1a}.deck-size-section{flex-direction:column;gap:.375rem;display:flex}.field-label{text-transform:uppercase;letter-spacing:.0625rem;color:#999083;font-size:.75rem;font-weight:700}.deck-size-picker{border:3px solid #1a1a1a;border-radius:.625rem;display:flex;overflow:hidden}.deck-size-picker button{cursor:pointer;color:#1a1a1a;text-transform:uppercase;letter-spacing:.03125rem;background:#f0ece4;border:none;flex:1;padding:.625rem 0;font-size:.875rem;font-weight:700}.deck-size-picker button+button{border-left:3px solid #1a1a1a}.deck-size-picker button.active{color:#f0ece4;background:#1a1a1a}.dirty-toggle-row{justify-content:space-between;align-items:center;gap:1rem;margin-top:.75rem;display:flex}.dirty-switch{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#f0ece4;border:3px solid #1a1a1a;border-radius:2rem;flex-shrink:0;width:4.5rem;height:2.5rem;padding:0;transition:background .2s;position:relative}.dirty-switch.on{background:var(--magenta)}.dirty-switch-knob{pointer-events:none;background:#fff;border:none;border-radius:50%;outline:none;place-items:center;width:1.875rem;height:1.875rem;line-height:1;transition:left .2s;display:grid;position:absolute;top:50%;left:.1875rem;transform:translateY(-50%)}.dirty-switch-emoji{font-size:1.25rem;line-height:1;animation:.32s cubic-bezier(.34,1.56,.64,1) dirty-emoji-pop;display:block}@keyframes dirty-emoji-pop{0%{transform:scale(0)rotate(-180deg)}to{transform:scale(1)rotate(0)}}.dirty-switch.on .dirty-switch-knob{left:calc(100% - 2.0625rem)}.dirty-switch:focus,.dirty-switch:focus-visible{outline:none}.card{box-sizing:border-box;background:#e6e1d6;border:3px solid #1a1a1a;border-radius:.875rem;flex-direction:column;gap:1rem;width:100%;max-width:30rem;margin-top:.5rem;padding:1.5rem;display:flex}.card input{color:#1a1a1a;box-sizing:border-box;background:#f0ece4;border:3px solid #1a1a1a;border-radius:.5rem;outline:none;width:100%;padding:.75rem 1rem;font-size:1rem;font-weight:600}.card input::placeholder{color:#999083;font-weight:500}.card input:focus{background:#fff}.card input.code{letter-spacing:.625rem;text-align:center;text-transform:uppercase;font-family:ui-monospace,Consolas,monospace;font-size:1.75rem;font-weight:800}.card input.code::placeholder{letter-spacing:.625rem;font-family:ui-monospace,Consolas,monospace;font-size:1.75rem;font-weight:800}.card input.code:focus::placeholder{color:#0000;text-transform:uppercase}.btn-primary{background:var(--magenta);color:#fff;text-transform:uppercase;letter-spacing:.0625rem;cursor:pointer;border:3px solid #1a1a1a;border-radius:.625rem;padding:.875rem;font-size:1rem;font-weight:800;transition:top 80ms,box-shadow 80ms;position:relative;top:0;box-shadow:0 4px #1a1a1a}.btn-primary:hover{top:2px;box-shadow:0 2px #1a1a1a}.btn-primary:active{top:4px;box-shadow:0 0 #1a1a1a}.room{box-sizing:border-box;background:#f0ece4;flex-direction:column;align-items:center;gap:1rem;height:100svh;padding:1.5rem;display:flex;overflow:hidden}.room .logo{flex-shrink:1;height:7.5rem;min-height:0}.room-code{letter-spacing:.875rem;color:#1a1a1a;background:#e6e1d6;border:3px solid #1a1a1a;border-radius:.875rem;padding:1rem 2rem;font-family:ui-monospace,Consolas,monospace;font-size:3.25rem;font-weight:900}.room-code-header{letter-spacing:.25rem;color:#f0ece4;background:#1a1a1a;border-radius:.625rem;padding:.75rem 1.25rem;font-family:ui-monospace,Consolas,monospace;font-size:1.75rem;font-weight:900;line-height:1.3}.section-title{text-transform:uppercase;letter-spacing:.09375rem;color:#999083;align-self:flex-start;margin:0 0 .5rem;font-size:.8125rem;font-weight:800}.room-content{box-sizing:border-box;flex-direction:column;flex:1;align-items:center;width:100%;max-width:30rem;min-height:0;margin:0 auto;padding:1rem 1.5rem;display:flex}.players{flex-direction:column;flex-shrink:1;gap:.5rem;width:100%;max-width:18.75rem;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.players li{color:#1a1a1a;background:#e6e1d6;border-bottom:2px solid #c8c3b8;border-radius:.625rem;align-items:center;padding:.75rem 1rem;font-size:1rem;font-weight:700;transition:background .3s,color .3s,border-bottom-color .3s;display:flex}.game-players{box-sizing:border-box;flex:1;max-width:30rem;min-height:0;margin:0 auto;padding:0 1.5rem}.mode-select{color:#1a1a1a;box-sizing:border-box;cursor:pointer;appearance:none;background:#f0ece4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 1rem center no-repeat;border:3px solid #1a1a1a;border-radius:.5rem;outline:none;width:100%;padding:.75rem 1rem;font-size:1rem;font-weight:600}.mode-select:focus{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-position:right 1rem center;background-repeat:no-repeat}.game-screen{box-sizing:border-box;background:#f0ece4;flex-direction:column;height:100svh;display:flex;overflow:hidden}.game-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}.game-logo{object-fit:contain;width:auto;height:3.75rem}.game-card-area{flex-shrink:0;justify-content:center;align-items:center;padding:1rem 1.5rem 1.5rem;display:flex}.game-actions{padding:.75rem 1.5rem;padding-bottom:max(env(safe-area-inset-bottom,0px) + 1rem, 3rem);box-sizing:border-box;flex-direction:column;flex-shrink:0;gap:.75rem;width:100%;max-width:30rem;margin:0 auto;display:flex}.game-info{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:.375rem;display:flex}.game-info-row{align-items:center;gap:.375rem;display:flex}.game-info .room-code-header{letter-spacing:.125rem;border-radius:.5rem;padding:.375rem .875rem;font-size:.875rem;font-weight:700}.round-badge,.deck-badge{color:#f0ece4;text-transform:uppercase;letter-spacing:.03125rem;background:#1a1a1a;border-radius:.5rem;padding:.375rem .875rem;font-size:.875rem;font-weight:700}.round-badge{color:#1a1a1a;background:0 0;border:2px solid #1a1a1a}.deck-badge{color:#1a1a1a;background:#e6e1d6;border:2px solid #1a1a1a}.drawn-card{text-align:center;box-sizing:border-box;background:#fff;border:3px solid #1a1a1a;border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:30rem;height:10rem;padding:1.5rem;display:flex;box-shadow:0 6px #1a1a1a;container:card/size}.drawn-card.empty{background:#e6e1d6;border-color:#c8c3b8;box-shadow:0 4px #c8c3b8}.drawn-card-by{text-transform:uppercase;letter-spacing:.0625rem;color:#999083;margin-bottom:.75rem;font-size:.8125rem;font-weight:700}.drawn-card-text{color:#1a1a1a;font-size:clamp(.875rem,18cqh,1.375rem);font-weight:800;line-height:1.3}.drawn-card.empty .drawn-card-text{color:#999083;font-weight:600}.btn-draw{width:100%;padding:1.125rem;font-size:1.25rem}.waiting-turn{text-align:center;color:#1a1a1a;padding:.875rem;font-size:1.125rem;font-weight:600}.players-compact{max-width:30rem}.players li.player-active{color:#fff;background:#1a1a1a;border-bottom-color:#000}.you-badge{color:#fff;text-transform:uppercase;letter-spacing:.03125rem;background:#999083;border-radius:.375rem;margin-left:auto;padding:.125rem .375rem;font-size:.625rem;font-weight:800}.player-active .you-badge{color:#1a1a1a;background:#fff}.btn-end{color:#1a1a1a;text-transform:uppercase;letter-spacing:.03125rem;cursor:pointer;box-sizing:border-box;background:0 0;border:3px solid #1a1a1a;border-radius:.625rem;width:100%;padding:.75rem 1.5rem;font-size:.875rem;font-weight:700}.btn-end:hover{color:#f0ece4;background:#1a1a1a}.confirm-overlay{z-index:1000;background:#1a1a1a99;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.confirm-modal{background:#fff;border:3px solid #1a1a1a;border-radius:1rem;flex-direction:column;gap:1.25rem;width:100%;max-width:22rem;padding:1.5rem;display:flex;box-shadow:0 6px #1a1a1a}.confirm-message{color:#1a1a1a;text-align:center;font-size:1.125rem;font-weight:700;line-height:1.4}.confirm-actions{gap:.75rem;display:flex}.btn-confirm-cancel,.btn-confirm-ok{text-transform:uppercase;letter-spacing:.0625rem;cursor:pointer;box-sizing:border-box;border:3px solid #1a1a1a;border-radius:.625rem;flex:1;padding:.875rem;font-size:.9375rem;font-weight:800;transition:top 50ms,box-shadow 50ms;position:relative;top:0;box-shadow:0 4px #1a1a1a}.btn-confirm-cancel{color:#1a1a1a;background:#fff}.btn-confirm-ok{background:var(--magenta);color:#fff}.btn-confirm-cancel:hover,.btn-confirm-ok:hover{top:2px;box-shadow:0 2px #1a1a1a}.btn-confirm-cancel:active,.btn-confirm-ok:active{top:4px;box-shadow:0 0 #1a1a1a}.response-buttons{gap:.75rem;width:100%;display:flex}.btn-success,.btn-failure{text-transform:uppercase;letter-spacing:.0625rem;cursor:pointer;border:3px solid #1a1a1a;border-radius:.625rem;flex:1;padding:1rem;font-size:1.125rem;font-weight:800;transition:top 80ms,box-shadow 80ms;position:relative;top:0}.btn-success{background:var(--green);color:#fff;box-shadow:0 4px #00a874}.btn-success:hover{top:2px;box-shadow:0 2px #00a874}.btn-success:active{top:4px;box-shadow:0 0 #00a874}.btn-failure{background:var(--red);color:#fff;box-shadow:0 4px #d94a4d}.btn-failure:hover{top:2px;box-shadow:0 2px #d94a4d}.btn-failure:active{top:4px;box-shadow:0 0 #d94a4d}.btn-next{background:var(--blue);width:100%;box-shadow:0 4px #059ad6}.btn-next:hover{box-shadow:0 2px #059ad6}.btn-next:active{box-shadow:0 0 #059ad6}.drawn-card-faded{opacity:.3}.result-splash{--splash-duration:3s;z-index:100;pointer-events:none;animation:splash-in .4s cubic-bezier(.22, 1, .36, 1) forwards, splash-out .5s ease-in calc(var(--splash-duration) - .5s) forwards;background:#000c;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.result-splash:before{content:"";height:0;animation:splash-band .4s cubic-bezier(.22, 1, .36, 1) forwards, splash-band-out .5s ease-in calc(var(--splash-duration) - .5s) forwards;position:absolute;top:50%;left:-5%;right:-5%;transform:translateY(-50%)skewY(-2deg)}.result-success:before{background:var(--green)}.result-failure:before{background:var(--red)}.result-splash-text{z-index:1;color:#fff;text-transform:uppercase;letter-spacing:.125rem;text-align:center;text-shadow:0 3px #0000004d;flex-direction:column;align-items:center;gap:.75rem;padding:0 1.5rem;font-size:2rem;font-weight:900;line-height:1.3;animation:.5s cubic-bezier(.22,1,.36,1) forwards splash-text;display:flex;position:relative}.result-penalty{letter-spacing:.0625rem;text-shadow:none;background:#0006;border-radius:.625rem;padding:.5rem 1.25rem;font-size:1.125rem;font-weight:800}.result-timer{z-index:1;width:2.5rem;height:2.5rem;position:absolute;top:1.25rem;right:1.25rem;transform:rotate(-90deg)}.result-timer-bg{fill:none;stroke:#fff3;stroke-width:3px}.result-timer-ring{fill:none;stroke:#ffffffd9;stroke-width:3px;stroke-linecap:round;stroke-dasharray:106.81;stroke-dashoffset:0;animation:timer-deplete calc(var(--splash-duration) - .5s) linear forwards}@keyframes timer-deplete{0%{stroke-dashoffset:0}to{stroke-dashoffset:106.81px}}@keyframes splash-in{0%{opacity:0}to{opacity:1}}@keyframes splash-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.1)}}@keyframes splash-band{0%{height:0}to{height:12.5rem}}@keyframes splash-band-out{0%{opacity:1;height:12.5rem}to{opacity:0;height:14rem}}.reconnect-overlay{z-index:200;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.reconnect-content{flex-direction:column;align-items:center;gap:1.25rem;display:flex}.reconnect-spinner{border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:2.5rem;height:2.5rem;animation:.8s linear infinite spin}.reconnect-text{color:#fff;text-transform:uppercase;letter-spacing:.0625rem;font-size:1.25rem;font-weight:800}@keyframes spin{to{transform:rotate(360deg)}}@keyframes splash-text{0%{opacity:0;transform:scale(3)}60%{opacity:1;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.couples-score{flex-wrap:wrap;justify-content:center;align-items:center;gap:.25rem;padding:0 1.5rem;display:flex}.heart-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.heart-icon path{fill:var(--red)}.heart-lost path{fill:#d4d0c8}.heart-result{width:4rem;height:4rem}.couples-result-icon{justify-content:center;display:flex}.couples-answer-buttons{gap:.75rem;width:100%;display:flex}.btn-couples-answer{background:var(--magenta);color:#fff;text-transform:uppercase;letter-spacing:.0625rem;cursor:pointer;border:3px solid #1a1a1a;border-radius:.625rem;flex:1;padding:1rem;font-size:1.125rem;font-weight:800;transition:top 80ms,box-shadow 80ms;position:relative;top:0;box-shadow:0 4px #1a1a1a}.btn-couples-answer:hover{top:2px;box-shadow:0 2px #1a1a1a}.btn-couples-answer:active{top:4px;box-shadow:0 0 #1a1a1a}.couples-waiting{text-align:center;color:#999083;padding:1rem;font-size:1.125rem;font-weight:600}.couples-result-partner{text-transform:none;letter-spacing:0;background:#0006;border-radius:.625rem;padding:.625rem 1.25rem;font-size:1rem;font-weight:700}.couples-result-partner strong{font-weight:900}.couples-hint{color:#999083;margin:0;font-size:.75rem;font-weight:600}.btn-couples-answer:first-child{background:var(--red);box-shadow:0 4px #d94a4d}.btn-couples-answer:first-child:hover{box-shadow:0 2px #d94a4d}.btn-couples-answer:first-child:active{box-shadow:0 0 #d94a4d}.btn-couples-answer:last-child{background:var(--magenta);box-shadow:0 4px #5a62d6}.btn-couples-answer:last-child:hover{box-shadow:0 2px #5a62d6}.btn-couples-answer:last-child:active{box-shadow:0 0 #5a62d6}.couples-heart-container{width:16rem;margin:1rem auto;position:relative}.couples-big-heart{width:100%;height:auto;display:block;overflow:visible}.couples-big-heart-path{fill:var(--red);stroke:#1a1a1a;stroke-width:14px;paint-order:stroke fill;filter:drop-shadow(0 6px #1a1a1a)}.couples-heart-names{flex-direction:column;align-items:center;gap:.125rem;width:75%;display:flex;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.couples-heart-name{color:#fff;text-transform:uppercase;letter-spacing:.03125rem;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:1.125rem;font-weight:800;overflow:hidden}.couples-heart-name.couples-name-empty{border-bottom:2px dashed #ffffff80;min-width:4rem;height:1.375rem}.couples-heart-plus{color:#fff;font-size:.75rem;font-weight:900;line-height:1}.btn-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}