body[data-game=ripple]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#180729;--panel:#26103e;--paper:#fff8f5;--muted:#c3afd9;--pink:#ff4ba4;--cyan:#35f2ed;--yellow:#ffe45c;--violet:#9f64ff;--line:#70438d;--color-paper:var(--ink);--color-paper-2:var(--panel);--color-paper-3:var(--panel);--color-surface-raised:var(--panel);--color-ink:var(--paper);--color-neutral:var(--muted);--color-rule:var(--line);--color-control-rule:var(--line);--color-accent:var(--pink);--color-focus:var(--cyan)}:root[data-mode=dark] body[data-game=ripple]{--ink:#10031b;--panel:#1d0a31}.ripple{isolation:isolate;--display:"Bricolage Grotesque Variable", sans-serif;--body:"Geist Variable", "Noto Sans JP", sans-serif;--text-small:.78rem;--text-body:.94rem;--gap-small:.5rem;--gap:1rem;--gap-large:1.5rem;--corner:14px;--glow:0 0 24px;--snap:.18s;--pulse-duration:2.4s;line-height:normal;font-family:var(--body);color:var(--paper);background:var(--ink);position:relative}.ripple *{box-sizing:border-box}.ripple button,.ripple input{font:inherit}.ripple button,.ripple a,.ripple label{-webkit-tap-highlight-color:transparent}.ripple button,.ripple a,.ripple input{touch-action:manipulation}.ripple button{cursor:pointer}.ripple button:disabled{opacity:1;cursor:default}.ripple a{color:inherit;text-decoration:none}.ripple button:focus-visible,.ripple a:focus-visible,.ripple input:focus-visible,.ripple summary:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}.ripple .ambient{z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 20% 35%, color-mix(in srgb, var(--violet) 28%, transparent), transparent 52%), radial-gradient(ellipse at 88% 66%, color-mix(in srgb, var(--pink) 15%, transparent), transparent 48%);position:fixed;inset:0;overflow:hidden}.ripple .ambient:after{content:"";opacity:.17;background-image:radial-gradient(var(--violet) 1px, transparent 1px);background-size:22px 22px;position:absolute;inset:0}.ripple .arena{width:100%;min-width:0}.ripple .versus{justify-content:space-between;align-items:center;gap:var(--gap);margin-bottom:var(--gap-large);display:flex}.ripple .competitor{gap:var(--gap);flex:1;align-items:center;min-width:0;display:flex}.ripple .competitor[data-mark=O]{text-align:right;justify-content:flex-end}.ripple .competitor>div{min-width:0}.ripple .competitor strong{text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-size:var(--text-body);display:block;overflow:hidden}.ripple .seat-tag{color:var(--muted);margin-bottom:4px;font-size:.65rem;display:block}.ripple .mini-mark{font-family:var(--display);color:var(--cyan);text-shadow:var(--glow) var(--cyan);font-size:2.6rem;font-weight:800;line-height:1}.ripple [data-mark=O] .mini-mark{color:var(--yellow);text-shadow:var(--glow) var(--yellow)}.ripple .vs{font-family:var(--display);color:var(--pink);font-style:italic;font-weight:800}.ripple .board-shell{border:var(--rule-medium) solid var(--line);border-radius:var(--radius-lg);background:var(--panel);padding:12px;position:relative}.ripple .board-coordinates{color:var(--muted);justify-content:space-around;padding-block:0 10px;font-size:.65rem;font-weight:700;display:flex}.ripple .board{isolation:isolate;border-radius:var(--corner);border:0;grid-template-columns:repeat(3,1fr);gap:8px;min-width:0;margin:0;padding:0;display:grid;position:relative;overflow:clip}.ripple .cell:focus-visible{outline-offset:-5px}.ripple .cell{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--corner);min-width:0;color:var(--muted);background:color-mix(in srgb, var(--ink) 74%, transparent);transition:background var(--snap), border-color var(--snap), transform var(--snap);place-items:center;padding:0;display:grid;position:relative}.ripple .cell:before{content:"";background:var(--line);border-radius:50%;width:4px;height:4px;position:absolute}.ripple .cell[data-offered=true]{border-color:var(--violet);background:color-mix(in srgb, var(--violet) 18%, var(--ink));box-shadow:inset 0 0 24px color-mix(in srgb, var(--violet) 12%, transparent)}.ripple .cell[data-offered=true]:before{border:1px solid var(--violet);background:0 0;border-radius:4px;width:20px;height:20px;transform:rotate(45deg)}.ripple .cell:not(:disabled):hover{border-color:var(--pink);background:color-mix(in srgb, var(--pink) 22%, var(--ink));transform:translateY(-3px)}.ripple .cell:not(:disabled):active{transform:scale(.95)}.ripple .mark{width:50%;height:50%;color:var(--cyan);filter:drop-shadow(0 0 12px);position:absolute}.ripple .mark[data-mark=X]:before,.ripple .mark[data-mark=X]:after{content:"";width:110%;height:14%;box-shadow:0 3px 0 color-mix(in srgb, var(--cyan) 40%, var(--ink));background:currentColor;border-radius:8px;position:absolute;top:43%;left:-5%;transform:rotate(45deg)}.ripple .mark[data-mark=X]:after{transform:rotate(-45deg)}.ripple .mark[data-mark=O]{color:var(--yellow);box-shadow:0 3px 0 color-mix(in srgb, var(--yellow) 40%, var(--ink));border:clamp(7px,1.1vw,12px) solid;border-radius:50%}.ripple .cell[data-owner=X]{border-color:color-mix(in srgb, var(--cyan) 55%, var(--line))}.ripple .cell[data-owner=O]{border-color:color-mix(in srgb, var(--yellow) 55%, var(--line))}.ripple .remaining{color:var(--muted);font-size:.6rem;font-weight:700;position:absolute;bottom:7px}.ripple .cell[data-fading=true]{border-style:dashed}.ripple .cell[data-fading=true] .mark{opacity:.4;filter:none}.ripple .cell[data-fading=true] .remaining{color:var(--pink)}.ripple .cell[data-latest=true] .mark{animation:.46s cubic-bezier(.2,1.6,.4,1) ripple-stamp}.ripple .pulse{border:2px solid var(--pink);pointer-events:none;z-index:3;box-shadow:var(--glow) color-mix(in srgb, var(--pink) 65%, transparent);animation:ripple-ripple var(--pulse-duration) ease-out infinite;border-radius:50%;position:absolute;inset:32%}.ripple .cell[data-win=true]{background:color-mix(in srgb, var(--pink) 25%, var(--ink));border-color:var(--paper)}.ripple .board-shell.is-won{animation:.7s ease-out ripple-victory}.ripple .board-bottom{color:var(--muted);justify-content:space-between;padding:12px 4px 0;font-size:.65rem;font-weight:700;display:flex}.ripple #lifetime-badge{margin-inline-start:auto}.ripple .controls{min-width:0;padding-block:12px}.ripple form>label,.ripple legend{font-size:var(--text-small);margin-bottom:10px;font-weight:650;display:block}.ripple input:not([type=checkbox],[type=radio]){width:100%;min-width:0;color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:var(--corner);padding:16px}.ripple input::placeholder{color:var(--muted)}.ripple .lifetime-settings{border:0;min-width:0;margin:22px 0 24px;padding:0}.ripple .segmented{gap:var(--gap-small);display:flex}.ripple .segmented label{cursor:pointer;flex:1;position:relative}.ripple .segmented input{opacity:0;position:absolute}.ripple .segmented span{text-align:center;border:1px solid var(--line);border-radius:var(--corner);font-size:var(--text-body);padding:12px;display:block}.ripple .segmented input:checked+span{background:var(--yellow);border-color:var(--yellow);color:var(--ink);box-shadow:0 4px 0 color-mix(in srgb, var(--yellow) 40%, var(--ink));font-weight:800}.ripple .segmented input:focus-visible+span{outline:3px solid var(--paper);outline-offset:3px}.ripple .primary{justify-content:center;align-items:center;gap:var(--gap);background:var(--pink);width:100%;min-height:58px;color:var(--ink);border-radius:var(--corner);box-shadow:0 5px 0 color-mix(in srgb, var(--pink) 50%, var(--ink)), 0 8px 32px color-mix(in srgb, var(--pink) 22%, transparent);transition:transform var(--snap);border:0;padding:16px;font-weight:850;display:flex}.ripple .primary span{font-size:1.4rem;line-height:1}.ripple .primary:hover:not(:disabled){transform:translateY(-3px)}.ripple .primary:active:not(:disabled){transform:translateY(3px)}.ripple .primary:disabled{opacity:.65}.ripple .error{color:var(--yellow);font-size:var(--text-small);line-height:1.7}.ripple .error:empty{display:none}.ripple #turn-title{font-family:var(--display);letter-spacing:-.04em;overflow-wrap:anywhere;margin:0 0 24px;line-height:1.45}.ripple .secondary{background:var(--panel);border:1px solid var(--violet);border-radius:var(--corner);color:var(--paper);padding:12px 20px}.ripple .sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media not (min-width:62rem){.ripple .competitor strong{max-width:110px}.ripple .versus{margin-bottom:18px}.ripple .board-shell{padding:9px}.ripple .board{gap:6px}.ripple .remaining{bottom:4px}.ripple .controls{padding-top:4px}}@media (prefers-reduced-motion:reduce){.ripple .cell[data-latest=true] .mark,.ripple .board-shell.is-won,.ripple .pulse{animation:none}.ripple .cell,.ripple .primary{transition:none}.ripple .pulse{opacity:.8;box-shadow:none;border-style:dashed;inset:12%}}.ripple .celebration{border-radius:inherit;pointer-events:none;z-index:5;position:absolute;inset:0;overflow:hidden}.ripple .celebration span{--angle:0deg;--ripple-burst-distance:240px;background:var(--yellow);width:14px;height:5px;box-shadow:var(--glow) currentColor;color:var(--yellow);opacity:0;border-radius:4px;position:absolute;top:50%;left:50%}.ripple .celebration span:nth-child(3n){background:var(--pink);color:var(--pink)}.ripple .celebration span:nth-child(3n+1){background:var(--cyan);color:var(--cyan)}.ripple .celebration span:nth-child(2){--angle:30deg}.ripple .celebration span:nth-child(3){--angle:60deg}.ripple .celebration span:nth-child(4){--angle:90deg}.ripple .celebration span:nth-child(5){--angle:120deg}.ripple .celebration span:nth-child(6){--angle:150deg}.ripple .celebration span:nth-child(7){--angle:180deg}.ripple .celebration span:nth-child(8){--angle:210deg}.ripple .celebration span:nth-child(9){--angle:240deg}.ripple .celebration span:nth-child(10){--angle:270deg}.ripple .celebration span:nth-child(11){--angle:300deg}.ripple .celebration span:nth-child(12){--angle:330deg}@media (prefers-reduced-motion:no-preference){.ripple .is-won .celebration span{animation:1.1s cubic-bezier(0,.6,.3,1) both ripple-burst}}.ripple [hidden]{display:none}@keyframes ripple-stamp{0%{opacity:0;transform:scale(1.6)rotate(-12deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes ripple-ripple{0%{opacity:1;transform:scale(.3)}80%,to{opacity:0;transform:scale(6)}}@keyframes ripple-victory{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)scale(1.02)}65%{transform:rotate(2deg)}}@keyframes ripple-burst{0%{opacity:1;transform:rotate(var(--angle)) translateX(12px) scaleX(1)}to{opacity:0;transform:rotate(var(--angle)) translateX(var(--ripple-burst-distance)) scaleX(2)}}