:root{
  --bg:#dcf0fa; --ink:#142640; --muted:#6482a0;
  --primary:#006994; --primary-dark:#00466e;
  --accent:#a8d8ec; --soft:#d6ecf7; --card:#fff;
  --gold:#ffbf00; --danger:#dc5656; --sprout:#6bb477;
  --sea-top:#78c8e6; --sea-deep:#143264; --sky:#ffe6c8;
  --sand:#f5dcb4; --coral:#ff8296; --pearl:#fcf8e6;
  --mermaid-tail:#ff99c8;
  --shadow:0 6px 24px rgba(0,80,140,.10);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;line-height:1.55;overflow-x:hidden}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit;font-size:16px}
a{color:var(--primary);text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:18px}
.center{display:flex;align-items:center;justify-content:center;min-height:80vh}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:22px;border:1px solid var(--soft)}
.panel{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:18px;border:1px solid var(--soft)}
.panel h2{margin:0 0 12px;font-size:17px;color:var(--primary-dark)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--soft)}
.topbar .brand{font-size:18px;font-weight:800;color:var(--primary-dark)}
.topbar .user{font-size:14px;color:var(--muted)}
.btn{display:inline-block;border:0;border-radius:22px;padding:10px 22px;font-weight:700;font-size:15px;background:var(--primary);color:#fff;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.secondary{background:var(--soft);color:var(--primary-dark)}
.btn.ghost{background:transparent;color:var(--primary-dark)}
.form{max-width:380px;margin:0 auto;padding:28px}
.form h1{margin:0 0 18px;color:var(--primary-dark)}
.form label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
.form input{width:100%;padding:12px 14px;border:1px solid var(--soft);border-radius:10px;background:var(--bg)}
.form .actions{margin-top:18px;display:flex;gap:10px}
.form .err{color:var(--danger);font-size:13px;margin-top:8px;min-height:18px}
.form .switch{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}
.pill{background:#fff;padding:6px 12px;border-radius:18px;font-size:13px;border:1px solid var(--accent)}
.pill.gold{background:var(--gold);color:var(--primary-dark);font-weight:700;border:0}
.scorebar{background:var(--primary-dark);color:#fff;padding:10px 14px;border-radius:12px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;font-size:14px}
.scorebar b{color:var(--gold)}
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
@media (max-width:880px){.grid{grid-template-columns:1fr}}

.stage{position:relative;height:460px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--sky) 30%,var(--sea-top) 30%,var(--sea-deep) 100%);transition:background 1.5s ease}
.stage.D{background:linear-gradient(180deg,#ffd8a0 0%,var(--sand) 100%)}
.water-line{position:absolute;left:0;right:0;height:6px;background:rgba(255,255,255,.5);border-top:2px solid rgba(255,255,255,.8);transition:top 1.5s}
.sand-floor{position:absolute;bottom:0;left:0;right:0;height:40px;background:var(--sand)}
.mermaid{position:absolute;font-size:50px;transition:all .6s cubic-bezier(.4,2,.6,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));z-index:5}
.clam{position:absolute;font-size:24px;transition:all .4s;bottom:5%}
.clam.closed{filter:saturate(.4) brightness(.7)}
.pearl-glow{position:absolute;font-size:30px;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.3);opacity:1}}
.wave-warning{position:absolute;top:25%;left:0;right:0;text-align:center;font-size:80px;animation:waveRoll 2s linear infinite;opacity:0}
.wave-warning.show{opacity:1}
@keyframes waveRoll{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.stat{background:var(--soft);border-radius:12px;padding:10px 14px}
.stat .label{font-size:12px;color:var(--primary-dark);font-weight:600}
.stat .value{font-size:22px;font-weight:800;color:var(--primary-dark);margin-top:2px}
.stat.warn{background:#fff3cd}.stat.danger{background:#f8d7da}.stat.sprout{background:#d4edda}
.coach{background:#fff8e1;border-left:4px solid var(--gold);padding:10px 14px;border-radius:8px;margin-top:10px;font-size:14px}
.coach b{color:var(--primary-dark)}

.depth-btn{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.depth-btn button{padding:10px;border-radius:12px;border:2px solid var(--accent);background:#fff;color:var(--primary-dark);font-weight:700;font-family:inherit;cursor:pointer}
.depth-btn button.selected{background:var(--primary);color:#fff;border-color:var(--primary)}
.depth-btn button[disabled]{opacity:.4;cursor:not-allowed}

.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.act{padding:14px;border:0;border-radius:14px;font-weight:800;font-size:14px;color:#fff;font-family:inherit;cursor:pointer;transition:.15s}
.act:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.act.swim-up{background:var(--gold);color:var(--primary-dark)}
.act.pick{background:var(--primary)}
.act.sell{background:var(--sprout)}
.act.walk{background:var(--coral)}
.act.observe{background:var(--muted)}
.act.pass{background:#aaa}

.pearl-row{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}
.pearl-row div{flex:1;text-align:center;background:var(--soft);padding:8px;border-radius:10px}
.pearl-row .em{font-size:22px;display:block}
.pearl-row .n{font-weight:800;color:var(--gold);font-size:18px}

.log{font-size:13px;height:160px;overflow-y:auto;line-height:1.6}
.log .entry{padding:3px 0;border-bottom:1px dotted #cfe0ec}
.log .good{color:var(--sprout)} .log .bad{color:var(--danger)}

.title-chip{display:inline-block;padding:4px 10px;margin:3px;border-radius:14px;font-size:12px;font-weight:700;background:var(--gold);color:var(--primary-dark)}

.flash{position:fixed;top:30%;left:0;right:0;text-align:center;pointer-events:none;font-weight:900;font-size:48px;animation:flashIn 1.6s forwards;z-index:100}
.flash.good{color:var(--sprout);text-shadow:0 0 20px rgba(107,180,119,.6)}
.flash.bad{color:var(--danger);text-shadow:0 0 20px rgba(220,86,86,.6)}
.flash.epic{color:var(--gold);text-shadow:0 0 30px rgba(255,191,0,.7);font-size:64px}
@keyframes flashIn{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}

.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.kpi{background:var(--card);border-radius:18px;padding:18px;border:1px solid var(--soft)}
.kpi .lbl{font-size:13px;color:var(--muted)}.kpi .val{font-size:30px;font-weight:800;color:var(--primary-dark);margin-top:4px}

.tip{background:#fff8e1;padding:10px 14px;border-radius:10px;font-size:13px;color:#8a6d00;margin-top:14px}
.small{font-size:13px;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center}
.spacer{flex:1}