/* เกมฝนอักษร */
.rain-setup{display:grid;gap:16px}
.rain-levels{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.rlv{border:2px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.rlv:hover{border-color:var(--accent-line)}
.rlv[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rlv b{font-family:var(--head);font-weight:600}
.rlv .smp{font-size:20px;letter-spacing:4px;color:var(--accent)}
.rlv .best{font-size:13px;color:var(--muted)}
.rain-mode{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rain-start{font-size:20px;min-height:56px;padding:0 34px}
.rain-wrap{display:grid;gap:10px}
.rain-hud{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-family:var(--head);font-weight:500}
.rain-hud .big{font-size:22px;color:var(--accent)}
.rain-hud .hearts{color:#E0475B;letter-spacing:2px;font-size:20px}
.rain-hud .hearts .off{color:#E6E1EE}
.rain-hud .sp{flex:1}
.rain-stage{position:relative;height:440px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#BFE3FF 0%,#E4F3FF 55%,#F6FBFF 100%);border:2px solid #CFE6FA;cursor:text;user-select:none}
.rain-stage.focused{border-color:var(--accent)}
.rain-stage.bad{animation:shake .3s}
.rain-cloud{position:absolute;top:10px;width:120px;height:40px;background:#fff;border-radius:40px;opacity:.85}
.rain-cloud::before,.rain-cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.rain-cloud::before{width:56px;height:56px;left:16px;top:-26px}.rain-cloud::after{width:40px;height:40px;left:62px;top:-16px}
.rain-ground{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(180deg,#8FD0AE,#5FB487);border-top:3px solid #4EA176}
.rain-ground img{position:absolute;bottom:6px;height:74px}
.drop{position:absolute;top:0;left:0;min-width:58px;height:58px;padding:0 14px;border-radius:30px;display:flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:700;font-size:30px;color:#221F29;box-shadow:0 4px 10px rgba(30,40,80,.18),inset 0 -4px 0 rgba(0,0,0,.08);border:2px solid rgba(255,255,255,.9);will-change:transform;white-space:nowrap}
.drop.word{font-size:26px;height:52px}
.drop .done{color:#1E7A4C;text-decoration:underline;text-decoration-thickness:3px}
.drop.lock{outline:3px solid #E8A300;outline-offset:2px}
.drop.pop{animation:pop .35s forwards}
.drop.splash{animation:splash .45s forwards}
@keyframes pop{to{transform:var(--t) scale(1.6);opacity:0}}
@keyframes splash{to{transform:var(--t) scaleY(.2);opacity:0}}
.drop.f-L5{background:#FFD6E5}.drop.f-L4{background:#FFE7B8}.drop.f-L3{background:#CFEFC3}.drop.f-L2{background:#C9E1FA}
.drop.f-R2{background:#DCD3F7}.drop.f-R3{background:#CFEFC3}.drop.f-R4{background:#FFE7B8}.drop.f-R5{background:#FFD6E5}.drop.f-T{background:#fff}
.rain-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.82);text-align:center;padding:20px}
.rain-msg b{font-family:var(--head);font-size:24px;color:var(--accent)}
.rain-float{position:absolute;font-family:var(--head);font-weight:700;color:#1E7A4C;font-size:18px;pointer-events:none;animation:floatup .8s forwards}
@keyframes floatup{to{transform:translateY(-40px);opacity:0}}
.rain-tip{font-size:14.5px;color:var(--muted)}
@media (max-width:600px){.rain-stage{height:360px}.drop{font-size:26px;height:50px;min-width:50px}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}