/* Water Sort: glass board, visible progress and pointer-friendly tubes. */
.water-sort-page .ws-game-card { background: radial-gradient(ellipse at 50% 10%,#25486190,transparent 65%),linear-gradient(145deg,#112c42,#081725); border-color:#86d5ff30; }
.water-sort-page .ws-board { grid-template-columns:repeat(var(--ws-columns,5),minmax(0,1fr)); grid-template-rows:repeat(var(--ws-rows,1),minmax(0,1fr)); }
.ws-overview { display:flex; justify-content:center; gap:clamp(18px,5vw,60px); margin:18px 8px 0; position:relative; z-index:1; flex:none; }
.ws-overview > div { text-align:center; }
.ws-overview small { display:block; color:#93a9bb; font:500 8px 'DM Mono',monospace; letter-spacing:.08em; }
.ws-overview b { display:block; margin-top:5px; color:#e2edf5; font-size:11px; }
.ws-save-state b { color:#91d7b0; }
.ws-save-state.is-warning b { color:#ffd078; }
.water-sort-page .ws-tube { touch-action:none; user-select:none; -webkit-user-select:none; }
.water-sort-page .ws-tube-glass { border-color:#c5e6f0a8; box-shadow:inset 5px 0 6px #ffffff2b,inset -7px 0 12px #0005,0 14px 22px #0005; }
.water-sort-page .ws-liquid { left:0; right:0; border-radius:0; height:25%; }
.water-sort-page .ws-liquid-shine { opacity:.65; }
.water-sort-page .ws-tube.is-complete .ws-tube-glass { border-color:#89e4ba; box-shadow:0 0 22px #64d49a40,inset 5px 0 6px #fff2; }
.water-sort-page .ws-tube.is-complete::after { content:'✓'; color:#a7f3cc; font:800 15px Manrope,sans-serif; position:absolute; top:-23px; left:0; right:0; }
.water-sort-page .ws-tube.is-pouring { animation-duration:.56s; }
.water-sort-page .ws-tube.is-receiving .ws-tube-glass { animation-duration:.56s; }
.ws-tube.ws-drag-source { transform:translateY(-12px); filter:drop-shadow(0 0 15px #6dd6ff88); }
.ws-tube.ws-drag-target .ws-tube-glass { border-color:#f6c33b; box-shadow:0 0 20px #f6c33b55; }
.ws-live-stream,.ws-drag-stream { position:absolute; inset:0; width:100%; height:100%; z-index:5; overflow:visible; pointer-events:none; }
.ws-live-stream path,.ws-drag-stream path { fill:none; stroke-width:5; stroke-linecap:round; filter:drop-shadow(0 0 4px #fff5); }
.ws-live-stream path { stroke-dasharray:12 2; animation:ws-stream-flow .56s linear both; }
.ws-drag-stream path { stroke-width:3; stroke-dasharray:5 6; opacity:.75; }
.ws-stars { color:#f6c33b; font-size:30px; letter-spacing:8px; margin:14px 0 6px; }
.water-sort-page .ws-tube:focus-visible { outline:2px solid #f6c33b; outline-offset:5px; border-radius:12px; }
@keyframes ws-stream-flow { from { stroke-dashoffset:42; opacity:0; } 18%,80% { opacity:1; } to { stroke-dashoffset:0; opacity:0; } }
@media(max-width:760px) {
  .ws-overview { margin:8px 6px 3px; gap:18px; }
  .ws-overview small { font-size:6px; }
  .ws-overview b { font-size:9px; margin-top:3px; }
  .water-sort-page .ws-board { align-items:center; }
  .water-sort-page .ws-instruction { font-size:9px; line-height:1.5; min-height:29px; }
  .water-sort-page .ws-tube.is-complete::after { top:-15px; font-size:11px; }
}
/* Readable translucent guide cards; useful topic links rather than hidden keywords. */
.mini-game-guide { width:min(1280px,calc(100% - 48px)); margin:30px auto 65px; padding-top:30px; border-top:1px solid #ffffff14; }
.mini-guide-lead { max-width:760px; font-size:14px; line-height:1.8; color:#ffffffb8; margin:0 0 24px; }
.mini-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.mini-guide-card { padding:23px; border:1px solid #ffffff1f; background:#ffffff04; border-radius:14px; }
.mini-guide-card h3 { margin:0 0 12px; font-size:15px; color:#fffdf8dc; }
.mini-guide-card p { margin:0; font-size:12px; line-height:1.85; color:#ffffffab; }
.mini-guide-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.mini-guide-links a { padding:7px 9px; border:1px solid #ffffff24; border-radius:6px; color:#e2d7b8; background:transparent; font-size:10px; line-height:1.5; }
.mini-guide-links a:hover,.mini-guide-links a:focus-visible { color:#f6c33b; border-color:#f6c33b80; }
.mini-guide-faq { max-width:850px; margin-top:35px; }
.mini-guide-faq h3 { font-size:18px; }
.mini-guide-faq details { border-bottom:1px solid #ffffff1a; padding:16px 0; }
.mini-guide-faq summary { color:#fffdf8d9; cursor:pointer; font-size:13px; }
.mini-guide-faq p { color:#ffffffb8; font-size:12px; line-height:1.8; }
@media(max-width:900px) { .mini-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .mini-game-guide { width:calc(100% - 32px); } .mini-guide-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .ws-live-stream path { animation:none; } }

/* Compact translucent term boxes matching the web design page. */
.water-sort-guide { box-sizing:border-box; padding:24px 0; text-align:center; }
.water-sort-guide h2 { margin:0 0 14px; color:rgba(200,208,218,.6); font:400 11px/1.5 "DM Mono",monospace; }
.water-sort-terms { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; margin:0; padding:0; list-style:none; }
.water-sort-terms li { max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; padding:5px 8px; color:rgba(200,208,218,.56); font:400 9px/1.2 "DM Mono",monospace; letter-spacing:.02em; border:1px solid rgba(255,255,255,.08); border-radius:2px; background:rgba(255,255,255,.025); transition:color .2s,border-color .2s,background .2s; }
.water-sort-terms li:hover { color:rgba(244,180,26,.8); border-color:rgba(244,180,26,.35); background:rgba(255,255,255,.04); }
body.has-water-guide:has(.water-sort-page) { overflow-y:auto; background:#071927; }
@media(max-width:700px) { .water-sort-terms { gap:5px; } .water-sort-terms li { font-size:8px; padding:4px 6px; } .water-sort-guide { margin-top:24px; margin-bottom:32px; } }

/* Match the game search control to the adjacent language selector. */
.mini-platform-header .mini-tools .mini-search,
.mini-platform-header .mini-tools select {
  box-sizing:border-box; height:36px; min-height:36px; margin:0;
  border:1px solid #ffffff24; border-radius:2px; background:#111e30;
  padding:0 9px; font:700 10px "DM Mono",monospace;
}
.mini-platform-header .mini-tools .mini-search { display:flex; align-items:center; gap:7px; width:165px; }
.mini-platform-header .mini-search input {
  display:block; box-sizing:border-box; height:100%; min-height:0; max-height:34px;
  margin:0; padding:0; border:0; border-radius:0; background:transparent;
  box-shadow:none; font:400 11px "DM Mono",monospace; line-height:normal;
}
.mini-platform-header .mini-search svg { flex:0 0 16px; width:16px; height:16px; color:#f6c33b; }
.mini-platform-header .mini-search:focus-within { border-color:#f6c33b; }
@media(max-width:760px) { .mini-platform-header .mini-tools .mini-search { width:clamp(90px,27vw,140px); padding:0 7px; } }

.mini-platform.is-searching .mini-platform-hero,
.mini-platform.is-searching .mini-featured,
.mini-platform.is-searching .mini-recent { display:none; }
.mini-search-status { color:#d5dee8; font-size:13px; line-height:1.6; margin:16px 0; }
