/* Water Sort Puzzle */
.ws-wrap { width: 100%; }
.ws-wrap .ak-stage { container-type: inline-size; }
.ws-hud { position: absolute; inset: 0; pointer-events: none; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.ws-hud button { pointer-events: auto; font-family: inherit; }
.ws-top { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; align-items: center; }
.ws-pill { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 15px; }
.ws-tools .ak-mute { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.ws-bot { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ws-btn { padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff; font: 800 14px system-ui, sans-serif; cursor: pointer; }
.ws-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.ws-btn:disabled { opacity: .4; cursor: default; }
.ws-btn:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
.ws-btn b { display: inline-block; min-width: 18px; padding: 0 4px; margin-left: 4px; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.ws-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.95); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  background: rgba(15, 23, 42, .9); border: 1px solid rgba(255, 255, 255, .25); border-radius: 16px; padding: 12px 18px; text-align: center; font-size: 17px; max-width: 90%; }
.ws-msg.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.ws-msg .btn { margin-top: 8px; }
.ws-levels h3 { margin: 0 0 10px; }
.ws-lvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 520px; overflow: auto; padding: 4px; }
.ws-lvb { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; border-radius: 10px; border: 1px solid var(--color-border, #333); background: var(--color-bg-alt, #1c1f27); color: var(--color-text, #fff); font: 800 15px system-ui; cursor: pointer; }
.ws-lvb small { font-size: 10px; color: #facc15; letter-spacing: 1px; }
.ws-lvb.is-cur { border-color: #38bdf8; }
.ws-lvb:disabled { opacity: .35; cursor: default; }
.ws-note { font-size: 13px; opacity: .75; }
@container (max-width: 480px) { .ws-btn { padding: 7px 9px; font-size: 12px; } .ws-pill { font-size: 12px; } }