@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap";:root{color:var(--ink);background:var(--blush);font-synthesis:none;--blush:#fde7e7;--teal:#136a6a;--orange:#d87d4a;--ink:#1c1917;--muted:#6b6560;--line:#111;--card:#fff;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:var(--blush);min-width:320px;min-height:100dvh;color:var(--ink);margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.shell{width:min(100%,760px);min-height:100dvh;padding:max(22px, env(safe-area-inset-top)) 22px max(30px, env(safe-area-inset-bottom));margin:0 auto}.setup-form{flex-direction:column;align-items:center;gap:16px;width:100%;display:flex}.setup{background:var(--card);border:1px solid var(--ink);flex-direction:column;gap:12px;width:100%;padding:16px;display:flex}.field-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}label{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:700}input{border:1px solid var(--ink);background:var(--blush);width:100%;color:var(--ink);outline:none;margin-top:7px;padding:12px}input:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent)}.phone-block{position:relative}.phone-field{border:1px solid var(--ink);background:var(--blush);align-items:stretch;margin-top:7px;display:flex}.phone-field:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent)}.phone-dial{border:0;border-right:1px solid var(--ink);color:var(--ink);cursor:pointer;white-space:nowrap;background:0 0;align-items:center;gap:6px;padding:0 10px;font-weight:700;display:flex}.phone-dial:hover{background:color-mix(in srgb, var(--blush) 80%, var(--ink))}.phone-field input{box-shadow:none;background:0 0;border:0;flex:1;min-width:0;margin:0}.phone-field input:focus{box-shadow:none}.flag{font-size:18px;line-height:1}.country-menu{z-index:8;background:var(--card);border:1px solid var(--ink);flex-direction:column;max-height:260px;display:flex;position:absolute;top:calc(100% + 6px);left:0;right:0}.country-search{text-transform:none;letter-spacing:0;width:calc(100% - 16px);margin:8px;font-size:14px;font-weight:500}.country-list{overflow:auto}.country-list button{width:100%;color:var(--ink);text-align:left;text-transform:none;letter-spacing:0;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:10px 12px;font-size:14px;font-weight:500;display:flex}.country-list button:hover,.country-list button.selected{background:var(--blush)}.country-name{flex:1;min-width:0}.country-code{color:var(--muted);font-weight:700}.country-empty{color:var(--muted);text-transform:none;letter-spacing:0;margin:0;padding:12px;font-size:13px;font-weight:500}.primary{border:1px solid var(--ink);width:100%;color:var(--ink);background:var(--card);cursor:pointer;justify-content:space-between;align-items:center;padding:16px 18px;font-weight:700;display:flex}.primary:hover{background:var(--blush)}.primary:focus-visible,.board button:focus-visible,.nav-btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}.primary:disabled{opacity:.6;cursor:wait}.contact{border:1px dashed var(--ink);width:100%;color:var(--teal);cursor:pointer;background:0 0;padding:11px}.error,.waiting{border:1px solid var(--orange);color:#8a3d18;background:color-mix(in srgb, var(--orange) 12%, var(--card));padding:12px 14px;font-size:13px}.game-shell{grid-template-rows:auto 1fr;max-width:440px;padding-inline:20px;display:grid}.game-nav{justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.nav-end{align-items:center;gap:16px;display:flex}.nav-link{color:var(--muted);letter-spacing:.14em;font-size:12px;font-weight:600;text-decoration:none}.nav-btn,.nav-label{color:var(--muted);letter-spacing:.14em;background:0 0;border:0;padding:8px 0;font-size:12px;font-weight:600}.nav-btn{cursor:pointer}.nav-btn:hover{color:var(--ink)}.game-nav-end{justify-content:flex-end}.nav-icon{letter-spacing:0;padding:8px;line-height:0;display:inline-flex}.nav-icon svg{display:block}.game-body{flex-direction:column;justify-content:center;align-items:center;gap:28px;width:100%;padding-bottom:8vh;display:flex}.score{background:var(--card);border:1px solid var(--ink);grid-template-columns:1fr auto 1fr;align-items:stretch;width:100%;display:grid}.score-side{align-items:center;gap:10px;min-width:0;display:flex}.score-x{padding:10px 8px 10px 10px}.score-o{text-align:right;justify-content:flex-end;padding:10px 10px 10px 8px}.score-mark{flex:0 0 36px;place-items:center;width:36px;height:42px;display:grid}.score-x .score-mark{color:var(--teal);border-right:1px solid #d4d0ce;padding-right:10px}.score-o .score-mark{color:var(--orange);border-left:1px solid #d4d0ce;padding-left:10px}.score-mark svg{width:26px;height:26px}.score-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.score-meta strong{text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700;line-height:1.1;overflow:hidden}.score-x .score-meta span{color:var(--teal)}.score-o .score-meta span{color:var(--orange)}.score-meta span{letter-spacing:.08em;font-size:9px;font-weight:700}.score em{color:#b0aaa6;place-items:center;padding:0 4px;font-size:12px;font-style:normal;font-weight:500;display:grid}.board{aspect-ratio:1;border:5px solid var(--ink);background:var(--ink);flex:none;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5px;width:min(340px,100%,100dvh - 14rem);height:auto;display:grid;overflow:hidden}.board button{aspect-ratio:1;background:var(--blush);cursor:pointer;width:100%;min-width:0;height:100%;min-height:0;color:var(--teal);border:0;border-radius:0;place-items:center;padding:0;display:grid}.board button svg{fill:none;stroke:currentColor;stroke-width:3.2px;stroke-linecap:square;width:56%;height:56%}.board button.x{color:var(--teal)}.board button.o{color:var(--orange)}.board button.last{box-shadow:inset 0 0 0 2px var(--orange)}.board button:not(:disabled):hover{background:color-mix(in srgb, var(--blush) 86%, var(--ink))}.board button:disabled{cursor:default}.score-mark svg{fill:none;stroke:currentColor;stroke-width:2.8px;stroke-linecap:square}.board button.o svg,.score-o .score-mark svg{stroke-linecap:round;stroke-width:2.6px}.score-mark.disc svg{fill:currentColor;stroke:none}.board.connect4{aspect-ratio:7/6;border-radius:10px;grid-template-rows:repeat(6,minmax(0,1fr));grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;width:min(360px,100%,116.667dvh - 16.3333rem);padding:6px}.board.connect4 button{aspect-ratio:1;border-radius:50%}.board.connect4 button.x{background:var(--teal)}.board.connect4 button.o{background:var(--orange)}.board.connect4 button.last{box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px var(--orange)}.status{color:var(--muted);text-align:center;margin:0;font-size:16px;font-weight:500}.send{width:100%;max-width:340px;margin-top:4px}h1.status{font-size:16px;font-weight:500}@media (width<=560px){.shell{padding-inline:16px}.field-grid{grid-template-columns:1fr}.board{width:min(320px,100%,100dvh - 14rem)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}