/* Color Sort: original, CSS-rendered game art; no external assets. */
.color-sort-cover{background:radial-gradient(circle at 50% 45%,#7458ca55,transparent 51%),linear-gradient(145deg,#171b37,#101a2c)}
.color-sort-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(#a99aff0b 1px,transparent 1px),linear-gradient(90deg,#a99aff0b 1px,transparent 1px);background-size:24px 24px;transform:perspective(320px) rotateX(50deg) scale(1.5);transform-origin:bottom}
.cs-card-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;transform:rotate(-8deg);filter:drop-shadow(10px 18px 13px #0008)}
.cs-card-vial{width:41px;height:111px;border:2px solid #dce9ff83;border-top:4px solid #dce9ffa0;border-radius:7px 7px 16px 16px;display:flex;flex-direction:column-reverse;padding:4px;gap:2px;background:linear-gradient(100deg,#ffffff28,#ffffff08 45%,#ffffff20);box-shadow:inset 3px 0 #ffffff20,0 8px 18px #0006}
.cs-card-vial:nth-child(2){transform:translateY(-17px)}.cs-card-vial i{display:block;flex:1;border-radius:3px;background:linear-gradient(145deg,#d1b9ff,#8664da);box-shadow:inset 2px 2px #fff5,inset -2px -3px #0003}.cs-card-vial i.mint{background:linear-gradient(145deg,#a3f2db,#48bcae)}.cs-card-vial i.coral{background:linear-gradient(145deg,#ffcfad,#ef8290)}.cs-card-vial i.sky{background:linear-gradient(145deg,#b7e7ff,#71a8f1)}
.cs-game{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#1b2942 0,#0b1424 45%,#060b15 100%);color:#eff3ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;isolation:isolate}
.cs-ambient{position:absolute;border-radius:50%;filter:blur(80px);opacity:.24;pointer-events:none;z-index:-1}.cs-ambient-a{width:340px;height:340px;background:#8759dc;top:12%;left:13%}.cs-ambient-b{width:300px;height:300px;background:#2baea6;right:14%;bottom:10%}.cs-specks{position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(#c9c8ff 0.8px,transparent 1px),radial-gradient(#a3ded9 0.7px,transparent 1px);background-position:25px 34px,80px 72px;background-size:173px 143px,231px 189px;opacity:.17}
.cs-shell{position:absolute;inset:0;display:flex;overflow:auto;padding:82px 24px 88px}.cs-content{width:min(850px,100%);margin:auto;text-align:center}.cs-heading .cs-eyebrow{margin:0 0 9px;color:#b6a6f8;font-size:10px;font-weight:700;letter-spacing:.22em}.cs-heading h2{margin:0;color:#f1efff;font-size:clamp(25px,3vw,39px);letter-spacing:-.035em;line-height:1.2}.cs-heading>p:last-child{margin:10px 0 0;color:#a7b2c7;font-size:13px;line-height:1.6}
.cs-dashboard{display:inline-flex;align-items:stretch;justify-content:center;margin:23px auto 20px;border:1px solid #a8b8d42b;border-radius:13px;background:#101d30c9;box-shadow:inset 0 1px #ffffff0d,0 12px 35px #0003}.cs-stat{min-width:95px;padding:9px 18px;display:flex;flex-direction:column;align-items:center;gap:4px}.cs-stat+.cs-stat{border-left:1px solid #a8b8d421}.cs-stat span{color:#98a8bf;font-size:10px;letter-spacing:.04em}.cs-stat strong,.cs-stat select{font:600 16px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;color:#f0f4ff}.cs-stat select{width:84px;text-align:center;text-align-last:center;border:0;background:transparent;cursor:pointer;outline-offset:4px}.cs-stat option{background:#142139;color:#f0f4ff}
.cs-stage{position:relative;padding:0 0 19px}.cs-board{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(8px,1.7vw,20px);min-height:220px}.cs-vessel{position:relative;width:clamp(60px,10.5vh,135px);height:clamp(220px,40vh,520px);padding:0 2px 24px;border:0;background:transparent;cursor:pointer;transition:transform .24s ease;touch-action:manipulation}.cs-vessel:hover{transform:translateY(-5px)}.cs-vessel.is-selected{transform:translateY(-13px)}.cs-vessel:focus-visible{outline:2px solid #d2c6ff;outline-offset:4px;border-radius:12px}.cs-vessel-glass{position:relative;display:flex;flex-direction:column-reverse;width:100%;height:100%;overflow:hidden;padding:7px 5px 9px;border:2px solid #bad6ed81;border-top:4px solid #d9ebfcb0;border-radius:8px 8px 23px 23px;background:linear-gradient(90deg,#a7d7f32b,#dae9ff0a 35%,#96c6e020 80%,#e4f6ff26);box-shadow:inset 3px 0 #dff8ff28,inset -4px 0 #5d96b425,0 15px 26px #0007,0 0 20px #83c5df0c}.cs-vessel-glass::before{content:"";position:absolute;z-index:2;left:7px;top:10px;bottom:16px;width:3px;border-radius:4px;background:linear-gradient(#ffffff75,#ffffff08);pointer-events:none}.cs-vessel-glass::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:14px;border-radius:0 0 20px 20px;background:linear-gradient(transparent,#d7efff25);pointer-events:none}.cs-vessel.is-selected .cs-vessel-glass{border-color:#d6c8ff;box-shadow:inset 3px 0 #ffffff40,0 0 24px #b594ff70,0 20px 30px #0007}
.cs-liquid{position:relative;display:grid;place-items:center;flex:0 0 25%;min-height:0;width:100%;border-radius:3px 3px 5px 5px;box-shadow:inset 2px 3px 5px #ffffff5c,inset -3px -5px 7px #0003,0 1px 2px #0004}.cs-liquid i{font-style:normal;font-size:clamp(10px,1.1vw,14px);color:#ffffffb8;text-shadow:0 1px 4px #29233e66}.cs-violet{background:linear-gradient(145deg,#dac4ff,#9d78ed 47%,#7054bf)}.cs-mint{background:linear-gradient(145deg,#c0f9e2,#6ad6bd 48%,#3b9e99)}.cs-coral{background:linear-gradient(145deg,#ffd9c7,#ff9ca2 48%,#d86d87)}.cs-sky{background:linear-gradient(145deg,#daf2ff,#95c9ff 48%,#6295dc)}.cs-gold{background:linear-gradient(145deg,#fff1bf,#ffcd72 48%,#d99945)}.cs-vessel-number{position:absolute;bottom:1px;left:0;right:0;color:#9aaac0;font-size:10px;letter-spacing:.1em}.cs-plinth{position:absolute;bottom:14px;left:9%;right:9%;height:15px;border-radius:50%;background:radial-gradient(ellipse,#93b4dc5a 0,#6586a82a 30%,transparent 75%);filter:blur(5px)}
.cs-hint{min-height:20px;margin:13px 0 17px;color:#b2bfd1;font-size:12px;line-height:1.5}.cs-actions{display:flex;justify-content:center;gap:10px}.cs-action{min-height:42px;padding:10px 15px;border:1px solid #8aa5ca40;border-radius:9px;background:#101d2dd9;color:#d6e0ef;font-size:12px;line-height:1.3;cursor:pointer}.cs-action:hover:not(:disabled){border-color:#beacff88;background:#1b2b42}.cs-action:disabled{opacity:.4;cursor:not-allowed}.cs-action span{font-size:17px;line-height:0;margin-right:3px}.cs-action-primary{background:#7c64db;color:white;border-color:#ae9afc}
.cs-paused{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:#050b15c9;backdrop-filter:blur(5px);text-align:center}.cs-paused[hidden]{display:none}.cs-paused span{display:block;font-size:31px;color:#c7baff}.cs-paused strong{display:block;font-size:22px;margin:12px 0 5px}.cs-paused p{font-size:12px;color:#adbad0}
.cs-dialog{width:min(420px,calc(100vw - 32px));padding:25px;border:1px solid #a9b6d33d;border-radius:16px;background:#101b2b;color:#edf2fa;box-shadow:0 24px 90px #000a}.cs-dialog::backdrop{background:#030916bb;backdrop-filter:blur(3px)}.cs-dialog-kicker{color:#a99bfa;font-size:10px;letter-spacing:.2em;font-weight:700}.cs-dialog h2{font-size:21px;margin:8px 0}.cs-dialog p:not(.cs-dialog-kicker){color:#aab8cc;font-size:13px;line-height:1.7}.cs-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}
.game-host-message{min-width:min(360px,calc(100vw - 40px));padding:34px 28px;border:1px solid #c2b5ff42;border-radius:20px;background:linear-gradient(145deg,#19253af2,#0e1828f5);box-shadow:0 25px 80px #0008,0 0 45px #8d6fff14}.game-host-message h2{color:#f4f1ff}.game-result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:22px}.game-result-actions[hidden],.game-result-actions [hidden]{display:none}
@media(max-width:650px){.cs-shell{padding:76px 14px 82px}.cs-heading .cs-eyebrow{font-size:9px}.cs-heading h2{font-size:26px}.cs-heading>p:last-child{font-size:12px;margin-top:7px}.cs-dashboard{margin:17px auto 17px}.cs-stat{min-width:77px;padding:8px 11px}.cs-stat strong,.cs-stat select{font-size:14px}.cs-stat select{width:72px}.cs-board{gap:8px 7px;min-height:165px}.cs-vessel{width:44px;height:clamp(155px,24vh,190px)}.cs-vessel-glass{border-radius:7px 7px 17px 17px;padding:6px 4px 8px}.cs-liquid i{font-size:10px}.cs-hint{margin:8px 0 12px;font-size:11px}.cs-action{min-height:44px;padding:9px 12px;font-size:11px}.cs-dialog-actions{flex-wrap:wrap}}
@media(max-height:560px) and (orientation:landscape){.cs-shell{padding:60px 120px 65px}.cs-heading h2{font-size:22px}.cs-heading>p:last-child{margin-top:3px}.cs-dashboard{margin:8px auto}.cs-stat{padding:5px 12px}.cs-board{min-height:120px}.cs-vessel{height:clamp(115px,34vh,160px);width:48px}.cs-hint{margin:4px 0 7px}.cs-action{min-height:36px;padding:7px 11px}}
@media(prefers-reduced-motion:reduce){.cs-vessel{transition:none}}

@media(max-height:760px) and (min-width:651px){.cs-shell{padding:65px 24px 70px}.cs-heading h2{font-size:30px}.cs-dashboard{margin:12px auto}.cs-vessel{height:clamp(200px,36vh,270px)}.cs-hint{margin:8px 0 12px}}
@media(max-width:350px) and (max-height:650px){.cs-shell{padding:66px 14px 70px}.cs-heading .cs-eyebrow{display:none}.cs-heading h2{font-size:20px}.cs-heading>p:last-child{font-size:11px;margin-top:3px}.cs-dashboard{margin:7px auto}.cs-stat{padding:5px 8px;min-width:70px;gap:2px}.cs-stat span{font-size:9px}.cs-stat strong,.cs-stat select{font-size:12px}.cs-stage{padding-bottom:8px}.cs-board{gap:4px 5px;min-height:0}.cs-vessel{height:110px}.cs-hint{font-size:10px;line-height:1.3;margin:4px 0 8px;min-height:13px}}
@media(max-height:560px) and (orientation:landscape){.cs-shell{padding:52px 120px 48px}.cs-heading .cs-eyebrow{display:none}.cs-heading h2{font-size:18px;line-height:1.1}.cs-heading>p:last-child{font-size:10px;margin-top:2px}.cs-dashboard{margin:4px auto}.cs-stat{min-width:65px;padding:4px 10px;gap:1px}.cs-stat span{font-size:9px}.cs-stat strong,.cs-stat select{font-size:12px}.cs-stage{padding-bottom:6px}.cs-board{min-height:0;gap:8px}.cs-vessel{height:clamp(105px,31vh,130px);width:44px;padding-bottom:18px}.cs-vessel-number{font-size:8px}.cs-hint{font-size:10px;min-height:12px;line-height:1.2;margin:3px 0 5px}.cs-actions{gap:6px}.cs-action{min-height:36px;padding:7px 11px}}

@media(max-width:650px){
  .cs-stat select{font-size:16px;width:92px;min-height:28px}
}
@media(max-width:380px) and (orientation:portrait){
  /* Seven vessels cannot fit in one row with usable touch targets. */
  .cs-board[data-count="7"]{max-width:210px;margin-inline:auto}
  .cs-board[data-count="7"] .cs-vessel{height:clamp(110px,18vh,135px)}
}
@media(max-height:560px) and (orientation:landscape){
  .cs-shell{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  .cs-heading>p:last-child{display:none}
  .cs-stat select{font-size:16px;width:92px;min-height:28px}
  .cs-vessel{height:clamp(85px,27vh,110px)}
  .cs-action{min-height:44px}
}
@media(hover:none){.cs-vessel:hover:not(.is-selected){transform:none}}