/* 물 정렬 퍼즐 — 실험실 유리 시험관 UI (자체 테마, 사이트 라이트/다크 모두 동일하게 보임) */
#ws-game { position:relative; width:100%; max-width:560px; margin:0 auto; border:1px solid #2b3a55; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,#111d2f,#0c1524); color:#eaf1ff; box-shadow:0 18px 45px rgba(10,20,40,.3); user-select:none; -webkit-user-select:none; }
#ws-game, #ws-game * { box-sizing:border-box; }
#ws-game [hidden] { display:none !important; }
#ws-game button { font-family:inherit; }
#ws-game button:focus-visible { outline:3px solid #7fd5ff; outline-offset:-3px; }

.ws-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#16263c,#101b2c); border-bottom:1px solid #ffffff12; }
.ws-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#7fd5ff; }
.ws-brand > i { font-size:22px; color:#4fc3f7; }
.ws-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#a9bcd4; letter-spacing:.02em; }
.ws-tools { display:flex; gap:6px; flex-shrink:0; }
.ws-tools button { min-height:36px; padding:0 11px; border-radius:8px; border:1px solid #8fb8dd44; background:#ffffff0a; color:#dbe8f8; font-weight:700; font-size:.74rem; cursor:pointer; }
.ws-tools button[aria-pressed="true"] { color:#8ce7c4; border-color:#5fd6a870; background:#3ad39a12; }

.ws-hud { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:12px 12px 8px; align-items:center; }
.ws-hud > div { text-align:center; border-left:1px solid #ffffff12; }
.ws-hud > div:first-child { border-left:0; }
.ws-hud small { display:block; font-size:.62rem; font-weight:600; color:#9fb3cc; letter-spacing:.03em; }
.ws-hud strong { display:block; line-height:1.4; font-size:1.1rem; font-weight:800; font-variant-numeric:tabular-nums; }
.ws-hud .ws-scorebox strong { color:#ffd479; font-size:1.45rem; }
.ws-hud .ws-lives strong { font-size:.95rem; letter-spacing:-2px; }
#ws-time.warn { color:#ff6b6b; animation:wsWarn .55s ease-in-out infinite alternate; }
@keyframes wsWarn { from { opacity:1; transform:scale(1); } to { opacity:.55; transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce) { #ws-time.warn { animation:none; } }
.ws-track { margin:0 16px 14px; height:5px; border-radius:3px; background:#07101d; overflow:hidden; }
#ws-progress { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#2f8fd6,#63d8f5,#8ce7c4); transition:width .3s ease; }

#ws-stage { position:relative; margin:0 10px; padding:16px 8px 12px; border:1px solid #ffffff14; border-radius:14px; background:radial-gradient(120% 90% at 50% 0%,#1b3050 0%,#0b1322 100%); min-height:230px; }
#ws-board { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:14px 16px; }
#ws-board.ws-many { gap:10px 10px; }

.ws-tube { position:relative; padding:0; border:0; background:none; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .14s ease; }
.ws-tube.sel { transform:translateY(-12px); }
.ws-glass { display:flex; flex-direction:column; justify-content:flex-end; width:46px; height:148px; padding:4px; border:2px solid #cfe6ff59; border-top:0; border-radius:6px 6px 22px 22px; background:linear-gradient(100deg,#ffffff14,#ffffff05 40%,#ffffff12); box-shadow:inset 0 -12px 22px #00000038, 0 6px 14px #00000040; overflow:hidden; }
#ws-board.ws-many .ws-glass { width:38px; height:126px; }
.ws-tube.sel .ws-glass { border-color:#8ce7c4; box-shadow:inset 0 -12px 22px #00000038, 0 0 0 3px #8ce7c433, 0 8px 18px #00000055; }
.ws-tube.done .ws-glass { border-color:#ffd47966; }
.ws-seg { display:block; flex:1 1 0; margin-top:2px; border-radius:3px; background:transparent; position:relative; }
.ws-seg.fill { box-shadow:inset 0 2px 0 #ffffff33, inset 0 -3px 6px #00000030; animation:ws-drop .18s ease; }
.ws-seg.fill.lift { filter:brightness(1.15); }
@keyframes ws-drop { from { transform:translateY(-6px); opacity:.6; } to { transform:none; opacity:1; } }
#ws-board.ws-cb .ws-seg.fill::after { content:attr(data-sym); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#ffffffdd; text-shadow:0 1px 2px #0006; }
.ws-tube::after { content:''; display:block; height:10px; }
.ws-tube.done::after { content:'✓'; font-size:.72rem; line-height:10px; color:#ffd479; font-weight:900; }

#ws-hint { margin:12px 6px 0; text-align:center; font-size:.74rem; font-weight:600; color:#a9c2de; min-height:18px; }
.ws-controls { display:flex; gap:8px; padding:12px; }
.ws-controls button { flex:1; min-width:0; min-height:52px; border-radius:10px; border:1px solid #8fb8dd3d; background:linear-gradient(160deg,#1e3350,#152540); color:#e8f2ff; font-size:.88rem; font-weight:800; cursor:pointer; touch-action:manipulation; box-shadow:0 3px 0 #0a1322; transition:transform .08s,filter .08s; }
.ws-controls button:active { transform:translateY(2px); box-shadow:0 1px 0 #0a1322; filter:brightness(1.15); }
.ws-controls button:disabled { opacity:.38; cursor:default; box-shadow:none; }
.ws-controls button small { display:block; margin-top:3px; font-size:.62rem; font-weight:600; opacity:.7; }
#ws-giveup { flex:0 0 88px; background:linear-gradient(160deg,#3a2233,#26172a); border-color:#d59ec03d; }

#ws-toast { position:absolute; left:50%; bottom:86px; transform:translate(-50%,10px); z-index:11; max-width:86%; padding:9px 15px; border-radius:999px; background:#0a1322e8; border:1px solid #8fb8dd3d; color:#e8f2ff; font-size:.76rem; font-weight:700; text-align:center; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; }
#ws-toast.on { opacity:1; transform:translate(-50%,0); }

.ws-overlay { position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:22px; background:linear-gradient(180deg,#0a1322aa,#0a1322e8 45%); }
.ws-overlay.on { display:flex; }
.ws-panel { width:100%; max-width:400px; text-align:center; padding:26px 20px; border:1px solid #8fb8dd3d; border-radius:16px; background:linear-gradient(155deg,#182a44f2,#0e1a2df7); box-shadow:0 16px 45px #04091266; }
.ws-eyebrow { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.12em; color:#7fd5ff; margin-bottom:10px; }
.ws-panel h2 { margin:0 0 12px; font-size:1.35rem; font-weight:900; color:#fff; }
.ws-panel p { margin:0 0 16px; font-size:.86rem; line-height:1.65; color:#c6d7ea; }
.ws-panel p b { color:#ffd479; }
.ws-panel small { color:#93a9c2; }
.ws-primary { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg,#2f8fd6,#5ad1c0); color:#06202c; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #124055; }
.ws-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #124055; }
.ws-demo { display:flex; justify-content:center; gap:12px; margin:4px 0 16px; }
.ws-demo i { display:block; width:26px; height:74px; border:2px solid #cfe6ff44; border-top:0; border-radius:4px 4px 14px 14px; background:linear-gradient(180deg,transparent 25%,#e63946 25% 50%,#1d7fd8 50% 75%,#2f9e44 75%); }
.ws-demo i:nth-child(2) { background:linear-gradient(180deg,transparent 50%,#f59f00 50% 75%,#e63946 75%); }
.ws-demo i:nth-child(3) { background:none; }
.ws-best { margin:10px 0 4px; font-size:.78rem; color:#9fd6ff; font-weight:700; min-height:16px; }
#ws-final { display:block; font-size:3rem; font-weight:900; line-height:1.1; color:#ffd479; font-variant-numeric:tabular-nums; }
.ws-final-unit { font-size:.8rem; color:#9fb3cc; }
#ws-grade { margin:8px 0 6px; font-size:1.1rem; font-weight:900; color:#8ce7c4; }
#ws-detail { margin-top:10px; font-size:.75rem; color:#9fb3cc; }
#ws-newrecord { display:inline-block; margin-bottom:10px; padding:5px 14px; border-radius:999px; background:#ffd47920; border:1px solid #ffd47966; color:#ffd479; font-size:.72rem; font-weight:900; letter-spacing:.06em; }

/* 규칙 안내 박스 — .answer_shadow 기본이 가운데 정렬·상단 여백 0 이라 게임 박스에 붙고 글이 가운데로 몰린다(09-11 사용자 지적).
   다른 게임(제기차기·틈새 돌파·나무꾼)과 같은 좌측 정렬 + 위 여백을 준다. */
.ws-guide { text-align:left; line-height:1.7; margin-top:18px; }
.ws-guide h3 { font-size:1rem; font-weight:800; margin:0 0 10px; }
.ws-guide p { font-size:.88rem; line-height:1.7; margin:0 0 8px; }
.ws-guide small { color:#888; font-size:.78rem; }

@media (max-width:480px) {
    .ws-glass { width:42px; height:132px; }
    #ws-board.ws-many .ws-glass { width:33px; height:112px; }
    #ws-board { gap:12px 12px; }
    .ws-hud strong { font-size:.95rem; }
    .ws-hud .ws-scorebox strong { font-size:1.25rem; }
    .ws-hud .ws-lives strong { font-size:.8rem; letter-spacing:-3px; }
    .ws-hud small { font-size:.58rem; }
}
@media (prefers-reduced-motion:reduce) {
    .ws-tube, .ws-seg.fill, #ws-progress { transition:none; animation:none; }
}