:root{color-scheme:dark;--cream:#f7edda;--gold:#f2c86d;--coral:#ef977a;--muted:#b4c7c6}*{box-sizing:border-box}body{margin:0;background:#10272e;color:var(--cream);font:15px/1.5 system-ui,sans-serif;background-image:radial-gradient(ellipse at 30% 0,#2c4e53,transparent 75%)}main{max-width:1000px;margin:auto;padding:22px 28px 18px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--gold)}h1{font:48px/1 Georgia,serif;margin:10px 0}h1 i{color:var(--coral);font-weight:400}header p{margin:12px 0 0;color:var(--muted)}.badge{width:85px;height:85px;border:1px solid #f0c66b;border-radius:50%;display:flex;flex-direction:column;justify-content:center;text-align:center;color:var(--gold);font-size:9px;line-height:1.3;letter-spacing:.12em}.badge b{font:23px Georgia}nav{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}nav label{margin-right:auto;color:var(--muted);font-size:12px}select{margin-left:9px}button,select{color:var(--cream);background:#26454c;border:1px solid #688389;border-radius:8px;padding:9px 14px;font:inherit;cursor:pointer}button:hover:not(:disabled){background:#3b5e61;border-color:var(--gold)}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.primary{background:var(--coral);border-color:#ffc8a8;color:#172e34;font-weight:700}.primary:hover:not(:disabled){background:#ffc0a0}.stats{display:flex;justify-content:space-between;margin:0 8px 16px;gap:10px}.stats span{display:block;font-size:9px;letter-spacing:.15em;color:var(--muted)}.stats b{font:27px Georgia}.stage{position:relative;border-radius:18px;overflow:hidden;border:1px solid #688387;background:#26474a;box-shadow:0 14px 40px #00141b77}canvas{display:block;width:100%;height:auto}#cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#122e37b8;backdrop-filter:blur(3px);padding:15px}h2{font:36px/1.15 Georgia;margin:14px 0}#cover p{color:#e2dacc;margin:10px 0 20px}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.lane{padding:13px 16px;background:#1f3d44;border:1px solid #526c71;border-radius:12px}.lane h3{font-size:12px;letter-spacing:.08em;margin:0 0 7px;color:var(--gold);display:flex;justify-content:space-between}.lane h3 span{font-weight:400;color:var(--muted)}.meter{position:relative;height:14px;background:#0e252d;border-radius:5px;overflow:hidden;margin-bottom:6px}.meter .water{height:100%;width:0;background:#7ccee2}.meter .target{position:absolute;top:0;bottom:0;border:2px solid var(--gold);width:10%;display:none}.amount{font-size:11px;display:flex;justify-content:space-between;margin-bottom:9px;color:var(--muted)}.lane-buttons{display:flex;gap:8px}.lane-buttons button{min-height:44px;width:50%;font-size:13px;padding:10px 5px;touch-action:none;user-select:none;-webkit-user-select:none}.fill{background:#376578}.fill.held{background:#61a0ad}.send{color:var(--gold)}.send.ready{background:#4b6b4b;border-color:var(--gold)}.feedback{min-height:18px;font-size:11px;color:#d4dfd8;margin:8px 0 0}#announcement{font-size:12px;text-align:center;color:var(--muted);min-height:20px}#rules{border:1px solid #607d7d;background:#203c43;border-radius:12px;padding:10px 23px;margin-bottom:20px}#rules h2{font-size:26px}#rules p{font-size:13px}#result{border:1px solid var(--gold);border-radius:14px;text-align:center;padding:20px;margin:20px 0;background:#24474b}#result h2{font-size:31px;margin-top:3px}#result p{color:#d1dfd7}footer{display:flex;flex-wrap:wrap;gap:8px 20px;border-top:1px solid #405c63;padding-top:14px;color:var(--muted);font-size:10px}a{color:#e1c18c}[hidden]{display:none!important}@media(max-width:650px){main{padding:20px 12px}h1{font-size:39px}header p{font-size:12px;max-width:270px}.badge{width:66px;height:66px;flex-shrink:0}.badge b{font-size:18px}nav{gap:7px}nav label{width:100%;margin-bottom:3px}nav button{flex:1;font-size:12px;padding:9px 7px}.stats b{font-size:22px}.stats span{font-size:8px}.controls{gap:7px;margin-top:13px}.lane{padding:10px 7px}.lane h3{font-size:10px;flex-wrap:wrap}.lane h3 span{font-size:9px}.lane-buttons{gap:5px}.lane-buttons button{font-size:12px}.amount{font-size:9px}.feedback{font-size:9px;min-height:28px}#cover h2{font-size:25px}#cover .eyebrow{font-size:7px}#cover p{font-size:11px;margin:6px 0 10px}#cover button{font-size:12px;padding:8px 13px}.stage{border-radius:12px}}
@media(max-width:650px){.lane h3{min-height:28px;align-content:start;margin-bottom:4px}.amount{min-height:30px;align-items:start;gap:3px}.lane-buttons button{min-height:58px}.feedback{font-size:10px}.lane h3 span{white-space:nowrap}}