:root{
  --glass:rgba(255,252,247,.68);--glass-b:rgba(255,255,255,.8);
  --ink:#2f2a25;--sub:#7b7064;--accent:#e46f4f;--teal:#1f9e9a;
  --shadow:0 10px 32px rgba(60,40,20,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#f5d6bb;font-family:'Noto Sans KR',system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
html,body{overscroll-behavior:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--glass-b);box-shadow:var(--shadow)}
.hidden{display:none!important}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- lobby ---------- */
#lobby{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:26px;padding:calc(28px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));overflow:auto;
  background:linear-gradient(180deg,rgba(30,20,40,.05) 0%,rgba(30,20,20,.0) 40%,rgba(30,18,10,.45) 100%);transition:opacity .6s}
#lobby.fade{opacity:0;pointer-events:none}
.brand{text-align:center;color:#fff;text-shadow:0 2px 20px rgba(60,30,10,.5)}
.brand .mark{font-size:12px;letter-spacing:.45em;font-weight:700;opacity:.92}
.brand h1{font-family:'Gowun Batang',serif;font-size:clamp(42px,7vw,76px);line-height:1.1;margin-top:6px}
.brand p{font-size:15px;opacity:.96;margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:16px;width:100%;justify-content:center}
.card{border-radius:26px;padding:20px 20px 18px;text-align:left;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.card:hover,.card:focus-visible{transform:translateY(-5px);box-shadow:0 18px 44px rgba(60,30,10,.3);outline:none}
.card .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;margin-bottom:12px}
.card .time{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--sub)}
.card h3{font-size:23px;margin:4px 0 0;font-weight:800;letter-spacing:-.01em}
.card .en{font-size:12.5px;color:var(--sub);margin-top:2px}
.card p{font-size:13.5px;line-height:1.6;margin:12px 0 14px;color:#4f463d;min-height:64px}
.card .meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--sub)}
.live{display:inline-flex;align-items:center;gap:6px}
.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#3ccf7a;box-shadow:0 0 0 3px rgba(60,207,122,.22)}
.card .enter{margin-top:14px;display:block;text-align:center;padding:11px;border-radius:14px;background:var(--ink);color:#fff;font-weight:700;font-size:14px}
.lobbyOpts{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;justify-content:center;padding:8px 10px 8px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--sub)}
.seg{display:inline-flex;background:rgba(60,40,20,.08);border-radius:999px;padding:3px}
.seg button{padding:6px 13px;border-radius:999px;font-size:13px;font-weight:700;color:var(--sub);white-space:nowrap}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.nick{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.nick button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--sub)}
.nick button:hover{background:rgba(0,0,0,.06)}
@media (max-width:860px){.cards{grid-template-columns:1fr;max-width:420px;gap:10px}.card p,.card .meta,.card .ico{display:none}.card{padding:14px 16px;border-radius:22px}
  .card h3{font-size:20px}.card .enter{margin-top:10px;padding:9px}.lobbyOpts{border-radius:22px}#lobby{gap:18px}.brand h1{font-size:44px}.brand p{font-size:13.5px}}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#f7e3cf;transition:opacity .7s;z-index:30}
#loading.fade{opacity:0;pointer-events:none}
#loading .in{text-align:center;color:var(--sub)}
#loading .flower{font-size:40px;animation:spin 2.4s linear infinite;display:inline-block}
#loading h2{font-family:'Gowun Batang',serif;color:var(--ink);font-size:30px;margin:14px 0 6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none}
#hud .pe{pointer-events:auto}
#topL{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px}
.ib{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .2s,opacity .2s}
.ib:hover{background:rgba(60,40,20,.08)}
.ib.off{opacity:.4}
#roomBtn{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-weight:800;font-size:14.5px}
#roomBtn:hover{background:rgba(60,40,20,.07)}
#roomBtn small{font-weight:600;color:var(--sub);font-size:13px}
#count{font-size:13px;color:var(--sub);padding:0 12px 0 10px;border-left:1px solid rgba(60,40,20,.14);font-variant-numeric:tabular-nums}
#roomMenu{position:absolute;left:16px;top:70px;border-radius:20px;padding:6px;min-width:250px}
#roomMenu button{display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;text-align:left}
#roomMenu button:hover{background:rgba(60,40,20,.07)}
#roomMenu button b{display:block;font-size:14px}
#roomMenu button span{font-size:12px;color:var(--sub)}
#roomMenu .e{font-size:20px}
#topR{position:absolute;right:16px;top:16px;display:flex;gap:2px;padding:5px;border-radius:999px}
#hint{position:absolute;top:76px;left:50%;transform:translateX(-50%);font-size:12.5px;color:#fff;background:rgba(30,25,20,.38);padding:6px 14px;border-radius:999px;white-space:nowrap;transition:opacity 1.2s}

#startPanel{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);width:min(460px,calc(100% - 32px));border-radius:26px;padding:20px}
#startPanel .who{display:flex;align-items:center;gap:12px}
#startPanel .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:none}
#startPanel h2{font-size:19px;font-weight:800}
#startPanel .s{font-size:13px;color:var(--sub)}
#startPanel p{font-size:13.5px;line-height:1.6;color:#4f463d;margin:12px 0}
#startPanel .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0;font-size:13px;font-weight:700;color:var(--sub)}
#spClose{margin-left:auto;align-self:flex-start;color:var(--sub);flex:none}
/* closing the class card lets you just hang out on the island; a small pill brings it back */
body.spClosed #startPanel{display:none!important}
#startPill{display:none;position:absolute;left:16px;bottom:18px;align-items:center;gap:7px;padding:11px 16px 11px 13px;border-radius:999px;font-weight:800;font-size:14px}
#startPill span{font-size:18px}
#startPill:hover{filter:brightness(1.05)}
body.spClosed.st-ready #startPill{display:flex}
body.swim #startPill{display:none!important}
#btnStart{width:100%;margin-top:10px;padding:13px;border-radius:16px;background:var(--ink);color:#fff;font-weight:800;font-size:15px}
#btnStart:hover{filter:brightness(1.15)}

#movePanel{position:absolute;right:16px;top:76px;width:300px;border-radius:26px;padding:18px}
.mp-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.03em}
#mpName{font-size:23px;font-weight:800;margin-top:8px;line-height:1.25;letter-spacing:-.01em}
#mpSub{font-size:13px;color:var(--sub);margin-top:2px}
.mp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
#mpImg{width:76px;height:76px;flex:none;border-radius:16px;background:rgba(255,255,255,.7);margin-top:6px;object-fit:contain}
#mpImg.q{filter:brightness(0) opacity(.18)}
#mpCue{font-size:13.5px;line-height:1.65;color:#4a4139;margin-top:10px}
.mp-mid{display:flex;align-items:center;gap:16px;margin-top:14px}
.ring{position:relative;width:84px;height:84px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7}
.ring .bg{stroke:rgba(60,40,20,.1)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke .4s}
#mpTime{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
#breath{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
#breath .orb{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9fded8 60%,#4fb9b2);box-shadow:0 0 22px rgba(79,185,178,.55)}
#breath span{font-size:12.5px;font-weight:700;color:var(--teal)}
#beats{display:grid;grid-template-columns:repeat(4,14px);gap:7px;flex:1;justify-content:center}
#beats i{width:14px;height:14px;border-radius:50%;background:rgba(60,40,20,.12);transition:transform .08s,background .08s}
#beats i.on{background:var(--accent);transform:scale(1.25)}
#mpNext{font-size:12.5px;color:var(--sub);margin-top:14px;padding-top:12px;border-top:1px solid rgba(60,40,20,.1)}
#mpNext b{color:var(--ink)}
.ctrls{display:flex;justify-content:center;gap:10px;margin-top:12px}
.ctrls button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(60,40,20,.07)}
.ctrls button:hover{background:rgba(60,40,20,.13)}
.ctrls #bPlay{background:var(--ink);color:#fff;width:52px;height:52px;margin-top:-4px}
#mpProg{height:5px;border-radius:5px;background:rgba(60,40,20,.1);margin-top:14px;overflow:hidden}
#mpProg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--accent));border-radius:5px}
#score{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--sub);text-align:center}
#score b{color:var(--accent)}

#bar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:6px;border-radius:24px;max-width:calc(100% - 24px)}
.emo{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 11px;border-radius:16px;font-size:11px;color:var(--sub);font-weight:700;min-width:56px}
.emo:hover{background:rgba(60,40,20,.07)}
.emo i{font-style:normal;font-size:21px;line-height:1.2}
.sep{width:1px;height:34px;background:rgba(60,40,20,.14);margin:0 6px}
.follow{display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 6px 2px 2px}
.follow small{font-size:10.5px;font-weight:700;color:var(--sub)}

#picks{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
#picks .lbl{font-size:13px;font-weight:700;color:#fff;background:rgba(30,25,20,.42);padding:5px 14px;border-radius:999px}
#picks .row{display:flex;gap:10px}
.pick{width:98px;border-radius:18px;padding:6px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .2s,box-shadow .2s,background .2s}
.pick:hover{transform:translateY(-4px)}
.pick img{width:84px;height:84px;object-fit:contain}
.pick span{font-size:11px;font-weight:700;color:var(--sub);height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:88px}
.pick.ok{background:rgba(203,245,222,.9);box-shadow:0 0 0 3px #3ccf7a}
.pick.no{animation:shake .4s;background:rgba(255,220,214,.9)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

#center{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#center span{font-size:min(26vw,150px);font-weight:800;color:#fff;text-shadow:0 6px 40px rgba(80,40,10,.45);animation:pop .5s ease-out}
@keyframes pop{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}
#toast{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);font-size:30px;font-weight:800;color:#fff;text-shadow:0 4px 24px rgba(80,40,10,.5);pointer-events:none;opacity:0;transition:opacity .3s}
#toast.show{opacity:1;animation:rise 1.4s ease-out}
@keyframes rise{from{transform:translate(-50%,-30%)}to{transform:translate(-50%,-70%)}}
#pauseVeil{position:absolute;inset:0;display:grid;place-items:center;background:rgba(30,20,15,.25);pointer-events:none}
#pauseVeil span{font-size:15px;font-weight:800;color:#fff;background:rgba(30,25,20,.5);padding:10px 20px;border-radius:999px}

#done{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));border-radius:28px;padding:26px;text-align:center}
#done .big{font-size:44px}
#done h2{font-family:'Gowun Batang',serif;font-size:28px;margin:6px 0 4px}
#done p{font-size:13.5px;color:var(--sub)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.stats div{background:rgba(60,40,20,.06);border-radius:16px;padding:12px 6px}
.stats b{display:block;font-size:20px;font-weight:800}
.stats span{font-size:11.5px;color:var(--sub);font-weight:600}
#done .btns{display:flex;gap:8px}
#done .btns button{flex:1;padding:12px;border-radius:14px;font-weight:800;background:rgba(60,40,20,.08)}
#done .btns button.pri{background:var(--ink);color:#fff}

#tags{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;font-size:12px;font-weight:700;padding:3px 10px 3px 4px;border-radius:999px;background:rgba(255,255,255,.84);white-space:nowrap;display:flex;gap:6px;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,.08);will-change:transform}
.tag b{background:var(--ink);color:#fff;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;font-size:10.5px}
.tag.t b{background:var(--accent)}
.tag.npc{padding:3px 10px;font-weight:600;color:#5a5047;background:rgba(255,255,255,.66)}
.bubble{position:absolute;left:0;top:0;max-width:240px;background:#fff;border-radius:16px;padding:8px 13px;font-size:13px;font-weight:700;line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,.14);transition:opacity .4s;will-change:transform}
.bubble:after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fff}

/* ---------- fishing ---------- */
#fishUI{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);width:min(370px,calc(100% - 24px));border-radius:24px;padding:14px 16px 12px;text-align:center}
.fh{display:flex;align-items:center;gap:8px;font-size:14.5px}
.fh span{flex:1;text-align:left;font-size:12px;color:var(--sub);font-weight:600}
#fishQuit{font-size:12px;font-weight:700;color:var(--sub);padding:5px 9px;border-radius:999px}
#fishQuit:hover{background:rgba(60,40,20,.07)}
#fishMsg{font-size:13.5px;color:#463d35;margin:9px 0 6px;min-height:21px;font-weight:700;line-height:1.5}
.meter{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:11.5px;font-weight:700;color:var(--sub)}
.meter span{width:30px;text-align:left;flex:none}
.track{flex:1;height:13px;border-radius:8px;background:rgba(60,40,20,.1);position:relative;overflow:hidden}
.track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px}
.track.pow i{background:linear-gradient(90deg,#7fd6c9,#f2c14e,#e46f4f)}
.track.ten{background:linear-gradient(90deg,rgba(60,200,120,.28) 0 62%,rgba(242,193,78,.34) 62% 84%,rgba(228,80,60,.4) 84%)}
.track.ten i{background:rgba(60,40,20,.6);transition:background .2s}
.track.ten.surge i{background:#e4503c}
.track.prog i{background:linear-gradient(90deg,var(--teal),#3ccf7a)}
.track em{position:absolute;top:50%;transform:translate(-50%,-50%) scaleX(-1);font-style:normal;font-size:14px;line-height:1}
#fishBtn{margin-top:10px;width:100%;padding:14px;border-radius:16px;background:var(--ink);color:#fff;font-weight:800;font-size:16px;touch-action:none;transition:background .2s}
#fishBtn.hot{background:var(--accent);animation:pulse .45s infinite alternate}
#fishBtn.dim{opacity:.55}
@keyframes pulse{to{transform:scale(1.04)}}
.fk{font-size:11px;color:var(--sub);margin-top:7px}
.biteMark{position:absolute;left:0;top:0;font-size:46px;font-weight:900;color:#ff4d3d;text-shadow:0 3px 14px rgba(0,0,0,.3);pointer-events:none}
#catchCard{position:absolute;right:max(24px,calc(50% - 560px));top:50%;transform:translateY(-50%);width:min(330px,calc(100% - 32px));border-radius:28px;padding:22px;text-align:center;animation:fadeIn .4s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:860px){#catchCard{right:auto;left:50%;top:64px;transform:translateX(-50%);padding:16px}#catchCard img{height:96px}#catchCard p{display:none}}
#catchCard img{width:190px;height:130px;object-fit:contain}
.stars{color:#f2b630;font-size:18px;letter-spacing:2px;min-height:22px}
.stars.junk{color:var(--sub);font-size:12.5px;font-weight:700;letter-spacing:0}
#catchCard h3{font-size:25px;font-weight:800;margin-top:2px}
#ccLocal{font-size:12.5px;color:var(--sub)}
.size{display:inline-block;margin:10px 0 4px;padding:5px 14px;border-radius:999px;background:rgba(31,158,154,.13);color:var(--teal);font-weight:800;font-size:14px}
.size:empty{display:none}
#catchCard p{font-size:13px;line-height:1.6;color:#4a4139;margin-top:6px}
#ccOk{margin-top:14px;width:100%;padding:12px;border-radius:14px;background:var(--ink);color:#fff;font-weight:800}
.new{position:absolute;top:16px;right:16px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px}
#dex{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(600px,calc(100% - 24px));max-height:calc(100% - 150px);overflow:auto;border-radius:26px;padding:18px 18px 20px}
.dh{display:flex;align-items:center;gap:10px}.dh h3{font-size:19px;font-weight:800}.dh span{font-size:12.5px;color:var(--sub);flex:1;font-weight:600}
#dexGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-top:14px}
.dx{background:rgba(255,255,255,.62);border-radius:18px;padding:8px 6px 10px;text-align:center}
.dx img{width:96px;height:68px;object-fit:contain}
.dx.no img{filter:brightness(0) opacity(.18)}
.dx b{display:block;font-size:13px;margin-top:2px}
.dx .st{color:#f2b630;font-size:11px;min-height:15px}
.dx span{display:block;font-size:11px;color:var(--sub);margin-top:2px}
#bFish.on{background:var(--ink);color:#fff}

/* ---------- view switcher ---------- */
#viewSub{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:5px 5px 5px 16px;border-radius:999px;font-size:13px;font-weight:700;color:var(--sub);transition:opacity .5s}
#bTv.on{background:var(--ink);color:#fff}
body.close .tag.npc,body.close .tag.me{display:none!important}
body.close #hint{display:none}

/* ---------- TV mode ---------- */
#topL,#topR,#bar,.ctrls,#viewSub{transition:opacity .6s}
body.tv.idle #topL,body.tv.idle #topR,body.tv.idle #bar,body.tv.idle .ctrls,body.tv.idle #viewSub,body.tv.idle #roomMenu{opacity:0;pointer-events:none}
body.tv.idle #c{cursor:none}
body.tv #hint,body.tv .tag.npc,body.tv .tag.me{display:none!important}
body.tv #movePanel{left:24px;right:24px;bottom:22px;top:auto;width:auto;padding:22px 30px 20px;border-radius:30px;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"img top mid" "img head mid" "img cue mid" "img next ctrl" "prog prog prog";column-gap:30px;align-items:center}
body.tv #movePanel.hidden{display:none!important}
body.tv .mp-head{display:contents}
body.tv .mp-head>div{grid-area:head}
body.tv #mpImg{grid-area:img;width:clamp(110px,11vw,190px);height:clamp(110px,11vw,190px);margin:0;border-radius:24px}
body.tv .mp-top{grid-area:top;font-size:clamp(14px,1.2vw,19px)}
body.tv .mp-top span:last-child{display:inline}
body.tv #mpName{font-size:clamp(28px,3.6vw,60px);margin-top:2px}
body.tv #mpSub{display:block;font-size:clamp(15px,1.5vw,24px)}
body.tv #mpCue{display:block;grid-area:cue;font-size:clamp(17px,1.7vw,28px);line-height:1.5;margin-top:8px;max-width:62ch;color:#3d352e}
body.tv .mp-mid{grid-area:mid;margin:0;gap:clamp(16px,2vw,34px)}
body.tv .ring{width:clamp(100px,10vw,170px);height:clamp(100px,10vw,170px)}
body.tv #mpTime{font-size:clamp(26px,2.8vw,48px)}
body.tv #breath .orb{width:clamp(56px,6vw,104px);height:clamp(56px,6vw,104px)}
body.tv #breath span{font-size:clamp(16px,1.6vw,26px)}
body.tv #beats{grid-template-columns:repeat(4,clamp(16px,1.7vw,28px));gap:clamp(8px,1vw,14px)}
body.tv #beats i{width:clamp(16px,1.7vw,28px);height:clamp(16px,1.7vw,28px)}
body.tv #mpNext{display:block;grid-area:next;font-size:clamp(14px,1.35vw,22px);border:0;padding:0;margin-top:10px}
body.tv .ctrls{grid-area:ctrl;position:static;margin:8px 0 0}
body.tv #mpProg{grid-area:prog;height:8px;margin-top:16px}
body.tv #score{position:absolute;right:24px;top:-50px;margin:0;padding:8px 16px;border-radius:999px;background:var(--glass);font-size:clamp(14px,1.3vw,20px)}
body.tv .bubble{font-size:clamp(16px,1.6vw,27px);max-width:min(460px,40vw);padding:12px 18px;border-radius:20px}
body.tv .tag.t{font-size:clamp(13px,1.1vw,18px)}
body.tv .pick{width:clamp(96px,10vw,150px)}body.tv .pick img{width:clamp(80px,8.6vw,128px);height:clamp(80px,8.6vw,128px)}
body.tv .pick span{font-size:14px;height:19px;max-width:none}
body.tv #picks .lbl{font-size:clamp(14px,1.4vw,22px)}
body.tv #toast{font-size:clamp(32px,4vw,64px)}
body.tv #pauseVeil span{font-size:clamp(16px,1.8vw,28px);padding:14px 28px}
body.tv #bar{bottom:calc(var(--panelH,260px) + 34px)}
body.tv #picks{bottom:calc(var(--panelH,260px) + 112px)}
@media (max-width:860px){
  body.tv #movePanel{left:10px;right:10px;bottom:10px;padding:14px 16px;grid-template-columns:auto 1fr;grid-template-areas:"img head" "mid mid" "cue cue" "ctrl ctrl" "prog prog";column-gap:14px}
  body.tv .mp-top,body.tv #mpNext{display:none}
  body.tv #mpImg{width:84px;height:84px}
  body.tv #mpName{font-size:24px}
  body.tv .mp-mid{margin-top:10px}
  body.tv #viewSub{display:none!important}
  body.tv #bar{display:none}
  body.tv #picks{bottom:calc(var(--panelH,260px) + 90px)}
  body.tv .mp-mid{display:flex}
  body.tv #breath{flex-direction:column}
}

/* =====================================================================
   PHONES & SMALL TABLETS — kept last so it overrides every block above
===================================================================== */
@media (max-width:860px){
  #topL,#topR{top:calc(10px + env(safe-area-inset-top))}#topL{left:10px}#topR{right:10px}
  #topL #count,#bFull{display:none}
  .ib{width:36px;height:36px}
  #roomBtn{padding:6px 8px;font-size:13.5px}
  #roomName{display:inline-block;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  #roomMenu{left:10px;top:calc(60px + env(safe-area-inset-top))}
  #hint{display:none}

  /* compact lesson panel:  [timer ring] [step · name · breath] [pose]  /  controls  /  progress */
  #movePanel{left:10px;right:10px;width:auto;max-width:560px;margin:0 auto;top:calc(60px + env(safe-area-inset-top));padding:10px 12px;border-radius:20px;
    display:grid;grid-template-columns:58px minmax(0,1fr) 48px;grid-template-areas:"ring top img" "ring head img" "ring brt img" "ctrl ctrl ctrl" "prog prog prog";column-gap:12px;row-gap:1px;align-items:center}
  .mp-top{grid-area:top;font-size:11px}
  .mp-top span:last-child,#mpSub,#mpCue,#mpNext{display:none}
  .mp-head{display:contents}
  .mp-head>div{grid-area:head;min-width:0}
  #mpName{font-size:16.5px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mpImg{grid-area:img;width:48px;height:48px;margin:0;border-radius:12px}
  .mp-mid{display:contents}
  .ring{grid-area:ring;width:58px;height:58px}
  #mpTime{font-size:15px}
  #breath,#beats{grid-area:brt;justify-self:start}
  #breath{flex-direction:row;gap:6px}
  #breath .orb{width:15px;height:15px;box-shadow:0 0 10px rgba(79,185,178,.5)}
  #breath span{font-size:12px}
  #beats{grid-template-columns:repeat(8,10px);gap:5px}
  #beats i{width:10px;height:10px}
  .ctrls{grid-area:ctrl;margin:8px 0 0;gap:10px}
  .ctrls button{width:38px;height:38px}
  .ctrls #bPlay{width:42px;height:42px;margin:0}
  #mpProg{grid-area:prog;margin-top:8px}
  #score{grid-column:1/-1;margin-top:6px}

  /* bottom action bar scrolls sideways instead of overflowing */
  #bar{bottom:calc(10px + env(safe-area-inset-bottom));padding:5px;border-radius:20px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;max-width:calc(100% - 16px)}
  #bar::-webkit-scrollbar{display:none}
  .emo{min-width:44px;padding:4px 6px;flex:none;font-size:10.5px}
  .emo i{font-size:19px}
  .follow{flex:none}.follow small{display:none}
  #bar .seg button{padding:5px 9px}
  #bar .sep{margin:0 3px;flex:none}

  #picks{bottom:calc(82px + env(safe-area-inset-bottom))}
  body.close #picks{bottom:calc(128px + env(safe-area-inset-bottom))}
  .pick{width:76px}.pick img{width:64px;height:64px}
  #picks .lbl{font-size:12px}
  #viewSub{top:auto;bottom:calc(78px + env(safe-area-inset-bottom));padding:4px}
  #viewSub span{display:none}
  #startPanel{bottom:calc(82px + env(safe-area-inset-bottom));padding:16px;max-height:calc(100% - 170px);overflow:auto}
  #startPanel h2{font-size:17px}
  #startPill{left:10px;bottom:calc(80px + env(safe-area-inset-bottom));padding:9px 14px 9px 11px;font-size:13px}
  #startPanel p{font-size:13px;margin:8px 0}
  #startPanel .row{flex-wrap:wrap;gap:6px}
  #startPanel .seg button{padding:6px 10px;font-size:12.5px}
  #fishUI{bottom:calc(82px + env(safe-area-inset-bottom));padding:12px 14px 10px}
  .fk{display:none}
  #toast{font-size:24px}
  #done{padding:20px}
  #dex{max-height:calc(100% - 120px);padding:14px}
  #dexGrid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
}
/* phones held sideways: little height → lesson panel moves to the right edge */
@media (max-width:960px) and (max-height:520px) and (orientation:landscape){
  #movePanel{left:auto;right:10px;width:320px;top:calc(56px + env(safe-area-inset-top))}
  #startPanel{left:auto;right:10px;transform:none;width:360px;bottom:72px;max-height:calc(100% - 140px)}
  #startPanel p{display:none}
  #picks,body.close #picks{bottom:70px;left:10px;transform:none}.pick img{width:50px;height:50px}.pick{width:66px}
  #picks .lbl{display:none}
  #fishUI{bottom:70px;left:auto;right:10px;transform:none;width:330px}
  #viewSub{bottom:70px}
  #catchCard{top:50%;transform:translate(-50%,-50%)}
  #catchCard img{height:70px}
}
/* very narrow phones: make room for the wallet pill */
@media (max-width:400px){
  .ib{width:32px;height:32px}
  #topL,#topR{padding:3px}
  #roomName{max-width:54px}
  #coinBtn{padding:5px 8px 5px 6px}
}