:root{color-scheme:dark;--bg:#171918;--ink:#f5f5ee;--muted:#8c938c;--chip:#d6eb91;--chip-edge:#99b65d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:500 16px system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input{font:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:3px solid var(--chip);outline-offset:5px}[hidden]{display:none!important}.toolbar{height:64px;padding:8px max(24px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between}.brand{font-size:23px;font-weight:750;letter-spacing:-1.5px;color:#a5aea0}.tools{display:flex;gap:8px}.tools button{width:44px;height:44px;border:0;background:transparent;color:#b5bcb1;font-size:26px;border-radius:50%;line-height:1}.tools button:hover:not(:disabled){background:#282e26;color:var(--ink)}.tools button:disabled{opacity:.22}.players{--cols:3;--rows:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(142px,1fr));min-height:calc(100svh - 140px);min-height:calc(100dvh - 140px);padding:12px max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left));gap:12px 20px}.player{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;border:2px solid transparent;background:transparent;color:var(--ink);border-radius:20px;padding:20px 12px;min-width:0;transition:background .15s,border-color .15s}.player:hover:not(:disabled){background:#20261e}.player.selected{background:#272f21;border-color:#a8bf76}.name{font-size:clamp(20px,2.9vw,35px);font-weight:600;max-width:100%;overflow-wrap:anywhere;text-align:center;line-height:1.15;letter-spacing:-.5px}.chips{display:flex;gap:clamp(8px,1.4vw,18px);justify-content:center}.chip{width:clamp(42px,6.5vw,76px);height:clamp(42px,6.5vw,76px);border-radius:50%;background:var(--chip);border:6px dashed var(--chip-edge);position:relative;box-shadow:0 3px 0 #6c8047;flex-shrink:0}.chip:after{content:'';position:absolute;inset:6px;border:1px solid #91a85c;border-radius:50%}.chip.lost{background:transparent;border:2px solid #30372e;box-shadow:none}.chip.lost:after{display:none}.player.out .name{color:#666e63}.player.out{opacity:.7}.bottom{min-height:76px;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 20px max(18px,env(safe-area-inset-bottom));position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 24%)}.primary,.secondary{border:0;border-radius:12px;min-height:46px;padding:13px 24px;font-size:14px;font-weight:650}.primary{background:var(--chip);color:#233018}.primary:hover{background:#e4f6b0}.secondary{background:#2b3128;color:var(--ink)}#finish{min-width:230px}#result{color:var(--chip);text-align:center;font-size:18px;font-weight:600}.empty{grid-column:1/-1;grid-row:1/-1;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:22px;background:transparent;border:0;color:var(--muted);padding:30px;border-radius:18px;font-size:17px}.empty:hover{background:#20261e}.empty-chips{display:flex;gap:12px}.empty-chips .chip{width:55px;height:55px;opacity:.65}dialog{background:#20251f;color:var(--ink);border:1px solid #414b36;border-radius:20px;width:min(420px,calc(100% - 32px));padding:28px}dialog::backdrop{background:#080b08cc;backdrop-filter:blur(5px)}h1{font-size:24px;letter-spacing:-.7px;margin:0 0 10px}dialog p{font-size:14px;color:#abb3a4;line-height:1.5;margin-bottom:24px}label{display:block;font-size:12px;margin-bottom:9px;color:#abb3a4}input{width:100%;min-height:50px;padding:12px 14px;border:1px solid #56604b;border-radius:10px;color:var(--ink);background:#171c15;font-size:16px}.note{font-size:11px;min-height:17px;margin:9px 0 20px}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;max-width:90%;padding:12px 18px;border-radius:12px;background:#e3eccf;color:#233018;font-size:13px;text-align:center;transition:.15s;z-index:5}#toast.show{opacity:1;transform:translate(-50%,0)}@media(orientation:landscape) and (max-height:550px){.toolbar{height:48px;padding-top:2px;padding-bottom:2px}.players{min-height:calc(100svh - 108px);min-height:calc(100dvh - 108px);grid-template-rows:repeat(var(--rows),minmax(100px,1fr));padding-top:0;padding-bottom:0;gap:6px 12px}.player{gap:14px;padding:10px 8px;border-radius:14px}.name{font-size:clamp(17px,2.8vw,26px)}.chip{width:clamp(34px,5vw,48px);height:clamp(34px,5vw,48px);border-width:4px}.chip.lost{border-width:2px}.chip:after{inset:4px}.bottom{min-height:60px;padding:6px 20px max(8px,env(safe-area-inset-bottom))}.primary{min-height:42px;padding:10px 22px}.chips{gap:10px}}@media(max-width:480px) and (orientation:portrait){.toolbar{padding-inline:18px}.players{padding-inline:12px;gap:8px}.player{gap:18px;padding:18px 6px}.name{font-size:23px}.chip{width:42px;height:42px;border-width:4px}.chip.lost{border-width:2px}.chips{gap:7px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* A compact, layered vector scene; motion is authored in SVG. */
.swim-visual{display:flex;align-items:center;justify-content:center;flex-direction:column;width:clamp(152px,23vw,264px);height:clamp(58px,8.2vw,94px);position:relative}.swim-svg{width:100%;height:100%;overflow:visible}.swim-label{position:absolute;top:100%;margin-top:2px;font-size:10px;font-weight:500;letter-spacing:.7px;color:#98b9af}.swim-still{display:none}.player.swimming.selected{border-color:#a4ccc1;background:#23312b}.player.swimming{padding-bottom:30px;gap:14px}.water-surface{animation:water-drift 2.6s ease-in-out infinite;transform-origin:center}@keyframes water-drift{0%,100%{transform:translateX(-2px);opacity:.8}50%{transform:translateX(2px);opacity:1}}@media(orientation:landscape) and (max-height:550px){.swim-visual{height:clamp(46px,7vw,64px);width:clamp(152px,22vw,210px)}.swim-label{font-size:9px;margin-top:0}.player.swimming{padding-bottom:22px;gap:6px}}@media(max-width:480px) and (orientation:portrait){.swim-visual{height:58px;width:152px}.player.swimming{gap:12px}}@media(prefers-reduced-motion:reduce){.swim-motion{display:none}.swim-still{display:block}.water-surface{animation:none}}
/* Keep controls clear of iPhone/iPad status bars and the home indicator. */
:root{--bar-height:64px;--dock-height:76px}html{background:var(--bg);overscroll-behavior:none}body{overscroll-behavior-y:none}.toolbar{height:calc(var(--bar-height) + env(safe-area-inset-top));padding-top:calc(8px + env(safe-area-inset-top))}.players{min-height:calc(100svh - var(--bar-height) - var(--dock-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:calc(100dvh - var(--bar-height) - var(--dock-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.bottom{min-height:calc(var(--dock-height) + env(safe-area-inset-bottom));padding-bottom:calc(18px + env(safe-area-inset-bottom))}.player,.toolbar,.bottom{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto}@media(orientation:landscape) and (max-height:550px){:root{--bar-height:48px;--dock-height:60px}.toolbar{padding-top:calc(2px + env(safe-area-inset-top))}.bottom{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}
/* Personal party-game reactions: photo, name and chips stay separate and legible. */
.player.has-reaction{gap:8px;padding:12px 8px;position:relative}.player.has-reaction .name{font-size:clamp(18px,2.4vw,29px);flex-shrink:0}.reaction-scene{height:clamp(68px,calc((100dvh - 156px) / var(--rows) - 106px),174px);width:min(100%,210px);display:flex;justify-content:center;align-items:flex-end;position:relative;isolation:isolate}.reaction-photo{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 5px #0002);pointer-events:none;-webkit-user-drag:none;animation:reaction-in .28s ease-out both}.has-reaction .chips{gap:8px;flex-shrink:0}.has-reaction .chip{width:clamp(27px,3.8vw,43px);height:clamp(27px,3.8vw,43px);border-width:4px}.has-reaction .chip.lost{border-width:2px}.has-reaction .chip:after{inset:4px}.player.out.has-reaction{opacity:1}.player.out.has-reaction .reaction-photo{filter:saturate(.75) drop-shadow(0 5px 5px #0002)}.state-caption{font-size:10px;letter-spacing:.5px;color:#a7b99a;line-height:1;margin-top:0}.player.out .state-caption{color:#948f86}.reaction-swimming .reaction-photo{animation:photo-float 2.4s ease-in-out infinite}.photo-waves{position:absolute;bottom:3px;left:12%;right:12%;height:15px;z-index:1;pointer-events:none}.photo-waves i{position:absolute;left:0;right:0;height:8px;background:radial-gradient(ellipse at 50% -2px,transparent 8px,#a4d8c8 8.5px,#a4d8c8 10px,transparent 10.5px) 0 0/28px 10px;opacity:.75;animation:photo-water 2.4s linear infinite}.photo-waves i:last-child{top:8px;left:14%;right:14%;opacity:.3;animation-direction:reverse}.has-reaction .swim-label{display:none}@keyframes reaction-in{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes photo-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}@keyframes photo-water{to{background-position:-28px 0}}@media(orientation:landscape) and (max-height:550px){.player.has-reaction{gap:4px;padding:5px 6px}.player.has-reaction .name{font-size:18px}.reaction-scene{height:clamp(44px,calc((100dvh - 140px) / var(--rows) - 86px),100px);width:min(100%,140px)}.has-reaction .chip{width:22px;height:22px;border-width:3px}.has-reaction .chip.lost{border-width:1.5px}.has-reaction .chips{gap:6px}.has-reaction .chip:after{inset:3px}.state-caption{font-size:8px}.photo-waves{transform:scale(.8);bottom:0}}@media(max-width:480px) and (orientation:portrait){.player.has-reaction .name{font-size:21px}.reaction-scene{width:150px;max-width:100%}.has-reaction .chip{width:28px;height:28px}}@media(prefers-reduced-motion:reduce){.reaction-photo,.reaction-swimming .reaction-photo,.photo-waves i{animation:none}}

@media(orientation:landscape) and (max-height:550px){.player.swimming:not(.has-reaction){gap:4px;padding:5px 6px}.player.swimming:not(.has-reaction) .swim-visual{height:46px;width:145px}.player.swimming:not(.has-reaction) .chip{width:22px;height:22px;border-width:1.5px}.player.swimming:not(.has-reaction) .swim-label{display:none}}
@media(orientation:landscape) and (max-height:550px){.players{grid-template-rows:repeat(var(--rows),minmax(124px,1fr))}}