#lobby{
  --table:#14161c;--paper:#f4efe6;--ink:#14161c;--line:#2a3040;--dim:#8b93a3;--shadow:#07080b;
  --slow:1;--disp:'Lilita One','Arial Black',Impact,sans-serif;
  --kr:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --body:'Gowun Dodum','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  position:fixed;inset:0;z-index:200;width:100vw;height:100vh;height:100dvh;overflow:hidden;
  background:var(--bg);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased;
  /* 커버 플런저는 '길게 누르기'가 조작이다 — 모바일에서 길게 눌러도 텍스트 선택/복사 팝업이 뜨지 않게. */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent
}
/* 입력과 패널(설정·도움말·프로필) 안의 글자는 선택·복사할 수 있게 되돌린다. */
#lobby input,#lobby .tpanel{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#lobby .tpanel button{-webkit-user-select:none;user-select:none}
#lobby.screen.on{display:block}
#lobby *{box-sizing:border-box}
#lobby button{font:inherit;cursor:pointer}
#lobby input{font:inherit}
#lobby .tdefs{position:absolute}
#lobby #tstage{position:absolute;inset:0;overflow:hidden}
#lobby #tstage.shake{animation:tShake calc(.22s * var(--slow)) linear both}
@keyframes tShake{0%{transform:translate(0,0)}15%{transform:translate(-11px,6px) rotate(-.6deg)}30%{transform:translate(9px,-7px) rotate(.5deg)}45%{transform:translate(-7px,4px)}60%{transform:translate(5px,-3px) rotate(-.3deg)}80%{transform:translate(-2px,1px)}100%{transform:none}}
#lobby #tbg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#lobby .tgrain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#lobby .tscene{position:absolute;inset:0;z-index:10;display:none}
#lobby .tscene.on{display:flex}
#lobby[data-title-busy] .tscene{pointer-events:none}

/* 워드마크 */
#lobby .logo{position:relative;display:inline-block;text-align:left;line-height:.9;user-select:none;white-space:nowrap;--fs:clamp(72px,13.5vw,128px);font-family:var(--disp);color:var(--paper);paint-order:stroke fill;-webkit-text-stroke:4px var(--ink);text-shadow:5px 6px 0 var(--shadow);transform:rotate(-4deg)}
#lobby .logo::before{content:'';position:absolute;left:-14%;right:-12%;top:-16%;bottom:-22%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(11,12,16,.78) 0%,rgba(11,12,16,.6) 42%,rgba(11,12,16,0) 72%)}
#lobby .logo .o{color:var(--p1)}
#lobby .logo .b{color:var(--p2)}
#lobby .logo .r1{font-size:calc(var(--fs)*.40);letter-spacing:.12em;margin-left:.1em;-webkit-text-stroke:3px var(--ink);text-shadow:3px 4px 0 var(--shadow);display:flex}
#lobby .logo .r1 .ch{display:inline-block;position:relative;transform:rotate(var(--rot,0deg))}
#lobby .logo .rim,#lobby .logo .fillc{position:absolute;left:0;top:0;pointer-events:none;-webkit-text-stroke:0;text-shadow:none}
#lobby .logo .rim{color:#fff;opacity:.95}
#lobby .logo .rim .r1{transform:translate(-1.1px,-1.3px)}
#lobby .logo .rim .r2{transform:translate(-1.5px,-1.9px)}
#lobby .logo .rim .r3{transform:translate(-2px,-2.6px)}
#lobby .logo .rim .o,#lobby .logo .rim .b{color:#fff}
#lobby .logo .gloss .o,#lobby .logo .gloss .b,#lobby .logo .shade .o,#lobby .logo .shade .b{color:inherit}
#lobby .logo .fillc .r1{color:var(--paper)}
#lobby .logo .r2{font-size:calc(var(--fs)*.62);margin:-.04em 0 0 1em}
#lobby .logo .r3{font-size:var(--fs);margin:-.05em 0 0 .3em;-webkit-text-stroke:5px var(--ink);text-shadow:6px 7px 0 var(--shadow)}
#lobby .logo .w{position:relative;display:inline-block}
#lobby .logo .lt{display:inline-block;transform:rotate(var(--r,0deg)) translateY(var(--dy,0em))}
#lobby .logo .dp{position:absolute;top:.655em;width:.2em;height:.6em;overflow:visible;z-index:1;transform-origin:50% 0;color:inherit}
#lobby .logo .dp.s{width:.16em;height:.36em}
#lobby .logo .dp.m{width:.18em;height:.48em}
#lobby .logo .dp path.o{fill:none;stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
#lobby .logo .dp path.f{fill:currentColor}
#lobby .logo .dp path.sh{fill:var(--shadow)}
#lobby .logo .dot{position:absolute;background:currentColor;box-shadow:0 0 0 3px var(--ink);z-index:0;border-radius:58% 42% 55% 45%/48% 62% 38% 52%}
#lobby .logo .shade{position:absolute;left:0;top:0;pointer-events:none;-webkit-text-stroke:0;text-shadow:none}
#lobby .logo .shade.hi{color:#fff;opacity:.17}
#lobby .logo .shade.hi>div{-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 32%,transparent 58%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 32%,transparent 58%)}
#lobby .logo .shade.lo{color:var(--ink);opacity:.13}
#lobby .logo .shade.lo>div{-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 22%,transparent 42%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 22%,transparent 42%)}
#lobby .logo .bang{position:relative;display:inline-block}
#lobby .logo .ball{position:absolute;left:50%;top:.585em;width:max(.3em,24px);height:max(.3em,24px);margin-left:calc(max(.3em,24px)/-2);border-radius:50%;background:var(--c,var(--p1));box-shadow:0 0 0 3px #fff,0 0 0 7px var(--ink),5px 6px 0 7px var(--shadow);z-index:2}
#lobby .logo .ball::after{content:'';position:absolute;left:50%;top:50%;width:.1em;height:3px;margin-top:-1.5px;background:var(--ink);transform-origin:0 50%;transform:rotate(-35deg);animation:tSpoke var(--spin,1.6s) var(--ease,linear) infinite var(--dir,normal)}
@keyframes tSpoke{from{transform:rotate(-35deg)}to{transform:rotate(325deg)}}
#lobby .logo .tagline{margin:.28em 0 0 1.1em;transform:rotate(2deg)}
#lobby .logo .tag{display:inline-block;font-family:var(--kr);font-size:clamp(12px,1.8vw,16px);background:var(--paper);color:var(--ink);padding:4px 12px 4px 22px;border:2.5px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--shadow);position:relative;-webkit-text-stroke:0;text-shadow:none;letter-spacing:.5px;white-space:nowrap}
#lobby .logo .tag::before{content:'';position:absolute;left:7px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--table);border:2px solid var(--ink);transform:translateY(-50%)}
#lobby .logo.pre .ch,#lobby .logo.pre .w,#lobby .logo.pre>.tagline,#lobby .logo.pre .ball,#lobby .logo.pre .dp,#lobby .logo.pre::before{opacity:0}
#lobby .logo.stamp .ch,#lobby .logo.stamp .w,#lobby .logo.stamp>.tagline{opacity:0;animation:tStamp calc(.46s * var(--slow)) cubic-bezier(.2,1.55,.4,1) both;animation-delay:calc(var(--i)*.06s*var(--slow))}
@keyframes tStamp{0%{opacity:0;transform:scale(2.3) rotate(-10deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(var(--rot,0deg))}}
#lobby .logo.stamp>.tagline{--rot:2deg}
#lobby .logo.stamp>.r2 .ball,#lobby .logo.stamp>.r3 .ball{opacity:0;animation:tBallDrop calc(.5s * var(--slow)) cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i)*.06s*var(--slow))}
@keyframes tBallDrop{0%{opacity:0;transform:translateY(-.7em) scale(.5)}50%{opacity:1}100%{opacity:1;transform:none}}
#lobby .logo.stamp>.r2 .dp,#lobby .logo.stamp>.r3 .dp{transform:scaleY(0);animation:tDripGrow calc(.55s * var(--slow)) cubic-bezier(.3,.9,.3,1) both;animation-delay:calc(var(--i)*.06s*var(--slow))}
@keyframes tDripGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#lobby .logo .gloss{position:absolute;left:0;top:0;pointer-events:none;color:#fff;-webkit-text-stroke:0;text-shadow:none;opacity:0;-webkit-mask-image:linear-gradient(110deg,transparent 44%,#000 48.5%,#000 51.5%,transparent 56%);mask-image:linear-gradient(110deg,transparent 44%,#000 48.5%,#000 51.5%,transparent 56%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}

/* 커버 */
#lobby #tcover{flex-direction:column;align-items:center;cursor:pointer;touch-action:none}
#lobby #tcover canvas{position:absolute;inset:0;width:100%;height:100%}
#lobby #tcover .logo-slot{position:absolute;left:0;right:0;top:31%;transform:translateY(-50%);text-align:center;z-index:2;pointer-events:none}
#lobby #tcover .logo.hit{animation:tLogoHit calc(.3s * var(--slow)) cubic-bezier(.2,1.6,.4,1) both}
@keyframes tLogoHit{0%{transform:rotate(-4deg)}30%{transform:rotate(-7deg) scale(1.08) translate(-6px,5px)}100%{transform:rotate(-4deg)}}
#lobby .tcover-hint{position:absolute;left:50%;bottom:calc(min(330px,42vh) + 26px);transform:translateX(-50%);z-index:2;font-family:var(--kr);font-size:clamp(15px,2.2vw,20px);color:var(--paper);text-align:center;pointer-events:none;background:rgba(11,12,16,.74);border:1.5px solid rgba(244,239,230,.18);border-radius:14px;padding:10px 26px;animation:tPulse 1.6s ease-in-out infinite;white-space:nowrap}
@keyframes tPulse{0%,100%{opacity:.7}50%{opacity:1}}
#lobby .tcover-hint .hard{display:none;font-family:var(--disp);font-size:clamp(22px,3vw,30px);letter-spacing:.12em;color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--shadow)}
#lobby #tcover.hardblink .tcover-hint{animation:none;opacity:1;background:transparent;border-color:transparent;padding:0}
#lobby #tcover.hardblink .tcover-hint .soft{display:none}
#lobby #tcover.hardblink .tcover-hint .hard{display:block;animation:tHardBlink 1s steps(1,end) infinite}
@keyframes tHardBlink{0%,100%{opacity:1}50%{opacity:0}}
#lobby #tcover.flying .tcover-hint{animation:none;opacity:0;transition:opacity .15s}
/* .tscene 은 display 토글이라 transition 이 안 걸린다 — 잠들었다 커버로 돌아올 때의 페이드인은 애니메이션으로. */
#lobby #tcover.waking{animation:tWake calc(.4s * var(--slow)) ease-out both}
@keyframes tWake{from{opacity:0}to{opacity:1}}

/* 타이틀 */
#lobby #ttitle{flex-direction:column;align-items:center;justify-content:center;gap:clamp(40px,7vh,72px);padding:4vh 16px 8vh}
#lobby #ttitle .logo-slot{transition:transform calc(.4s * var(--slow)) cubic-bezier(.2,1.2,.4,1)}
#lobby #ttitle.asking .logo-slot{transform:scale(.55) translateY(-42%)}
/* 잠들기 — 무입력이 길어지면 타이틀이 가라앉고 커버가 다시 떠오른다(title.js sleepToCover). */
#lobby #ttitle.sleeping .logo-slot,#lobby #ttitle.sleeping .tmenu,#lobby #ttitle.sleeping .tfoot,#lobby #ttitle.sleeping .ttoast-slot{opacity:0;transition:opacity calc(.28s * var(--slow)),transform calc(.28s * var(--slow))}
#lobby #ttitle.sleeping .tmenu{pointer-events:none;transform:translateY(12px)}
#lobby #ttitle.panel-open::after{content:'';position:absolute;inset:0;z-index:31;background:rgba(7,8,11,.72)}
#lobby #ttitle.panel-open .tmenu,#lobby #ttitle.panel-open .tfoot{pointer-events:none}
#lobby #tstage.shake-s{animation:tShakeSmall calc(.18s * var(--slow)) linear both}
@keyframes tShakeSmall{0%,100%{transform:none}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,1px)}}
#lobby .tmenu{display:flex;flex-direction:column;gap:14px;align-items:center;transition:opacity calc(.25s * var(--slow)),transform calc(.3s * var(--slow))}
#lobby #ttitle.asking .tmenu{opacity:0;pointer-events:none;transform:translateY(26px)}
#lobby .tmenu-btn{position:relative;width:min(390px,88vw);padding:0;border:0;background:transparent;color:var(--ink);font-family:var(--kr);font-size:clamp(20px,2.6vw,25px);letter-spacing:.5px;transform:rotate(var(--rot));opacity:0}
#lobby .tmenu-btn .face{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 24px 11px 22px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:5px 6px 0 var(--shadow);transition:transform .16s cubic-bezier(.2,1.4,.4,1),box-shadow .16s}
#lobby .tmenu.in .tmenu-btn{animation:tRise calc(.5s * var(--slow)) cubic-bezier(.2,1.35,.4,1) both;animation-delay:calc(var(--i)*.07s*var(--slow))}
@keyframes tRise{0%{opacity:0;transform:translateY(40px) rotate(var(--rot)) scale(.9)}100%{opacity:1;transform:translateY(0) rotate(var(--rot))}}
#lobby .tmenu-btn .en{font-family:var(--disp);font-size:12px;letter-spacing:1.5px;opacity:.6}
#lobby .tmenu-btn.quick{--rot:-1.2deg;color:#1a1206}
#lobby .tmenu-btn.quick .face{background:var(--p1)}
#lobby .tmenu-btn.create{--rot:.9deg}
#lobby .tmenu-btn.join{--rot:-.7deg;color:#06131f}
#lobby .tmenu-btn.join .face{background:var(--p2)}
#lobby .tmenu-btn.practice{--rot:1.1deg;color:var(--paper)}
#lobby .tmenu-btn.practice .face{background:rgba(20,22,28,.82);border-color:var(--paper)}
#lobby .tmenu-btn:hover .face{transform:translate(-2px,-3px) scale(1.03);box-shadow:8px 10px 0 var(--shadow)}
#lobby .tmenu-btn:active .face{transform:translate(3px,4px) scale(.98);box-shadow:1px 1px 0 var(--shadow)}
#lobby .tmenu-btn:focus-visible{outline:none}
#lobby .tmenu-btn:focus-visible .face{outline:3px solid var(--paper);outline-offset:3px}
#lobby .tfoot{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;font-size:12px;color:var(--dim)}
#lobby .tfoot-l{display:flex;align-items:center;gap:10px;min-width:0}
#lobby .tfoot-r{display:flex;align-items:center;gap:10px;justify-self:end}
#lobby .tfoot .ver{justify-self:center;text-align:center;white-space:nowrap;font-family:var(--disp);letter-spacing:1px;opacity:.7}
#lobby .tfoot .build b{font-weight:inherit}
#lobby .tfoot .sha{opacity:.55}
#lobby .ticon{flex:none;width:40px;height:40px;padding:0;border-radius:50%;border:2px solid var(--line);background:rgba(20,22,28,.8);color:var(--paper);font-size:17px;display:grid;place-items:center;transition:transform .15s,border-color .15s}
#lobby .ticon[hidden]{display:none}
#lobby .ticon:hover{transform:scale(1.1) rotate(-8deg);border-color:var(--dim);background:rgba(20,22,28,.8)}
/* 음소거 버튼 — 컨투어 스피커 픽토그램. 켬/음소거 SVG 를 data-muted 로 바꿔 끼우고, 음소거면 테두리도 붉게. */
#lobby #titleMute svg{width:20px;height:20px;display:block;animation:tIconPop calc(.22s * var(--slow)) cubic-bezier(.2,1.5,.4,1) both}
@keyframes tIconPop{0%{transform:scale(.6) rotate(-12deg)}100%{transform:none}}
#lobby #titleMute .off,#lobby #titleMute[data-muted="1"] .on{display:none}
#lobby #titleMute[data-muted="1"] .off{display:block}
#lobby #titleMute[data-muted="1"]{border-color:#ff4e55;color:var(--dim)}
#lobby .tprofile{height:40px;min-width:0;max-width:min(380px,42vw);display:flex;align-items:center;gap:8px;padding:4px 11px 4px 5px;border:2px solid var(--line);border-radius:999px;background:rgba(20,22,28,.88);box-shadow:2px 3px 0 var(--shadow);transform:rotate(-.5deg);cursor:pointer;transition:transform .15s,border-color .15s}
#lobby .tprofile:hover,#lobby .tprofile:focus-visible{border-color:var(--dim);transform:rotate(-.5deg) scale(1.02);outline:none}
#lobby .tprofile[aria-disabled="true"]{opacity:.65;cursor:default}
#lobby .tprofile .avatar{flex:none;width:28px;height:28px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);font-family:var(--kr);font-size:13px;font-weight:700}
#lobby .tprofile .info{display:flex;min-width:0;flex-direction:column;line-height:1.15}
#lobby .tprofile .name,#lobby .tprofile .stats{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lobby .tprofile .name{color:var(--paper);font-family:var(--kr);font-size:13px;font-weight:700}
#lobby .tprofile .stats{color:var(--dim);font-size:11px}
#lobby .tprofile .badge,#lobby .tprofile .streak{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:999px;background:var(--p1);color:#1a1206;font-size:10px;font-weight:700}

/* 이름 카드 */
#lobby .pchip{display:inline-block;font-family:var(--disp);font-size:11px;letter-spacing:1px;padding:2px 7px 1px;border-radius:999px;background:var(--p1);color:#1a1206;border:2px solid var(--ink);vertical-align:middle;line-height:1.2}
#lobby .pchip[hidden]{display:none}
#lobby .pchip.p2{background:var(--p2);color:#06131f}
#lobby .tcard{position:absolute;left:50%;top:57%;width:min(420px,92vw);transform:translate(-50%,-50%) rotate(-1.5deg);background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:20px;padding:0 24px 18px;box-shadow:9px 11px 0 var(--shadow);display:none;--accent:var(--p1);z-index:20}
#lobby #ttitle.asking .tcard{display:block;animation:tCardIn calc(.42s * var(--slow)) cubic-bezier(.2,1.5,.4,1) both}
@keyframes tCardIn{0%{opacity:0;transform:translate(-50%,-40%) rotate(-6deg) scale(.7)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-1.5deg)}}
#lobby .tcard.err{animation:tCardShake .28s linear both!important}
@keyframes tCardShake{0%,100%{transform:translate(-50%,-50%) rotate(-1.5deg)}20%{transform:translate(calc(-50% - 10px),-50%) rotate(-2.5deg)}40%{transform:translate(calc(-50% + 9px),-50%) rotate(-.5deg)}60%{transform:translate(calc(-50% - 6px),-50%) rotate(-2deg)}80%{transform:translate(calc(-50% + 4px),-50%) rotate(-1deg)}}
#lobby .tcard-bar{height:14px;margin:0 -24px 18px;border-radius:16px 16px 0 0;background:var(--accent);border-bottom:3px solid var(--ink)}
#lobby .tcard-head{font-family:var(--kr);font-size:24px;line-height:1.25;margin-bottom:18px}
#lobby .tcard-head .kind{display:inline-block;font-family:var(--disp);font-size:12px;letter-spacing:1.5px;background:var(--ink);color:var(--paper);padding:3px 9px;border-radius:999px;vertical-align:middle;margin-right:8px;transform:translateY(-2px)}
#lobby .tcard label{display:block;font-size:12px;color:#5b6270;letter-spacing:1px;margin-bottom:2px}
#lobby .trow{display:flex;gap:10px;align-items:flex-end}
#lobby .tcard input,#lobby #nick,#lobby #code{width:100%;border:0;border-bottom:3px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--kr);font-size:26px;padding:6px 2px;outline:none;border-radius:0;box-shadow:none}
#lobby .tcard input:focus,#lobby #nick:focus,#lobby #code:focus{border-color:var(--accent)}
#lobby .tcard input::placeholder{color:#b6b0a4}
#lobby #code.tcode{font-family:var(--disp);font-size:36px;letter-spacing:10px;text-transform:uppercase;text-align:center}
#lobby .tdice{flex:none;width:46px;height:46px;padding:0;border-radius:12px;border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);font-size:20px;box-shadow:3px 3px 0 var(--shadow);transition:transform .15s}
#lobby .tdice svg{width:26px;height:26px;display:block;margin:auto;transform:rotate(-10deg)}
#lobby .tdice:hover{transform:rotate(-15deg) scale(1.08);background:var(--paper)}
#lobby .tdice:active{transform:rotate(20deg) scale(.95)}
#lobby .tfld{margin-bottom:16px}
#lobby .tfld[hidden]{display:none}
#lobby .tpublic{margin:0 0 15px;padding:10px;border:3px solid var(--ink);border-radius:12px;background:var(--table);color:var(--paper);transform:rotate(.3deg)}
#lobby .tpublic[hidden]{display:none}
#lobby .tpublic-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;font-family:var(--kr);font-size:14px;font-weight:700}
#lobby .tpublic-refresh{padding:4px 9px;border:1.5px solid var(--paper);border-radius:999px;background:transparent;color:var(--paper);font-size:11px;line-height:1.1}
#lobby .tpublic-refresh:hover{background:var(--paper);color:var(--ink)}
#lobby .tpublic-list{max-height:168px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
#lobby .pubroom{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 4px;border-top:1px solid var(--line);background:transparent;color:var(--paper)}
#lobby .pubroom:first-child{border-top:0}
#lobby .pubroom .meta{min-width:0}
#lobby .pubroom .title,#lobby .pubroom .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lobby .pubroom .title{font-family:var(--kr);font-size:13px;font-weight:700}
#lobby .pubroom .sub{margin-top:2px;color:var(--dim);font-size:10px}
#lobby .pubroom .state{color:#69d39c;font-size:10px;font-weight:700;white-space:nowrap}
#lobby .pubroom .state.playing{color:var(--p2)}
#lobby .pubroom button{padding:5px 10px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font-family:var(--kr);font-size:12px;font-weight:700}
#lobby .pubroom button:disabled{cursor:default;opacity:.38}
#lobby .publicEmpty{padding:7px 3px;color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lobby .tcard label.tswitch{display:flex;align-items:center;gap:9px;margin:-2px 0 16px;color:var(--ink);cursor:pointer;letter-spacing:0;font-size:13px}
#lobby .tcard label.tswitch[hidden]{display:none}

/* 이름·대표 형태·특징은 대기실과 추첨에서도 동일하게 사용한다. */
#lobby .tmapchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#lobby .tmapchips button{display:grid;grid-template-columns:34px 1fr;align-content:center;align-items:center;gap:3px 6px;min-width:0;min-height:64px;
 padding:7px;border:2px solid var(--ink);border-radius:9px;background:var(--paper);color:var(--ink);box-shadow:2px 3px 0 var(--shadow);text-align:left}
#lobby .tmapchips canvas{grid-row:1/3;width:34px;height:34px}
#lobby .tmapchips strong{font:14px var(--kr)}
#lobby .tmapchips small{font:10px var(--body);line-height:1.35;color:#525967}
#lobby .tmapchips button:first-child strong,#lobby .tmapchips button:first-child small{grid-column:1/-1;text-align:center}
#lobby .tmapchips button[aria-checked="true"]{background:#ffce9f}
#lobby .tmapchips button:focus-visible{outline:3px solid var(--p2);outline-offset:2px}
#lobby .tmapfld label{display:block}
#lobby .tswitch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#lobby .tswitch .knob{position:relative;display:inline-block;flex:none;width:46px;height:27px;border:3px solid var(--ink);border-radius:999px;background:#5b6270;transition:background .15s}
#lobby .tswitch .knob::after{content:'';position:absolute;left:2px;top:2px;width:17px;height:17px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);transition:transform .15s cubic-bezier(.2,1.4,.4,1)}
#lobby .tswitch input:checked+.knob{background:var(--accent)}
#lobby .tswitch input:checked+.knob::after{transform:translateX(19px)}
#lobby .tswitch input:focus-visible+.knob{outline:3px solid var(--accent);outline-offset:2px}
#lobby .tswitch .txt{font-family:var(--kr);font-size:13px;font-weight:700}
#lobby .tswitch small{color:#5b6270;font-family:var(--body);font-size:10px;font-weight:400}
#lobby .tcard-actions{display:flex;gap:10px;align-items:center;margin-top:6px}
#lobby .tback{background:transparent;border:0;color:#5b6270;font-family:var(--kr);font-size:15px;padding:10px 6px}
#lobby .tback:hover{color:var(--ink);background:transparent}
#lobby .tgo{flex:1;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:13px 20px;font-family:var(--kr);font-size:19px;box-shadow:4px 5px 0 var(--accent);transition:transform .12s,box-shadow .12s}
#lobby .tgo:hover{transform:translate(-1px,-2px);box-shadow:6px 7px 0 var(--accent);background:var(--ink)}
#lobby .tgo:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--accent)}
#lobby .tmsg{min-height:18px;font-size:13px;color:#d43b3b;margin-top:10px;text-align:center}
#lobby .ttoast-slot{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:30;pointer-events:none}
#lobby .ttoast-slot .tmsg:not(:empty){min-width:min(440px,90vw);padding:9px 16px;margin:0;background:var(--paper);border:2px solid var(--ink);border-radius:8px;box-shadow:4px 5px 0 var(--shadow);font-family:var(--kr);font-size:15px;transform:rotate(-1deg)}

/* 설정 / 도움말 */
#lobby .tpanel{position:absolute;left:50%;top:50%;z-index:35;width:min(520px,94vw);max-height:min(78vh,680px);overflow:auto;transform:translate(-50%,-50%) rotate(.7deg);background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:20px;padding:18px 22px 20px;box-shadow:9px 11px 0 var(--shadow)}
#lobby .tpanel[hidden]{display:none}
#lobby .tpanel:focus{outline:none}
#lobby .tpanel-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-family:var(--kr);font-size:22px}
#lobby .tpanel-top b{flex:1}
#lobby .tpanel-top button{width:36px;height:36px;padding:0;border:2px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink)}
/* 프로필 카드 — '플레이어 카드'(profile-gallery.html A안): 승률 = 칠해진 필드, 공 아바타, 승·패·무 도장 칩, 연승 스탬프 */
#lobby .tpanel-profile{width:min(380px,92vw);padding:0 22px 18px;overflow:visible;transform:translate(-50%,-50%) rotate(-1.5deg)}
#lobby .tpanel-profile:not([hidden]){animation:tProfIn calc(.42s * var(--slow)) cubic-bezier(.2,1.5,.4,1) both}
@keyframes tProfIn{0%{opacity:0;transform:translate(-50%,-40%) rotate(-6deg) scale(.7)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-1.5deg)}}
#lobby .tprof-bar{height:14px;margin:0 -22px 14px;border-radius:16px 16px 0 0;background:var(--p1);border-bottom:3px solid var(--ink)}
#lobby .tpanel-profile .tpanel-top{margin-bottom:16px;font-size:20px}
#lobby .tprof-kind{display:inline-block;font-family:var(--disp);font-size:11px;letter-spacing:1.5px;background:var(--ink);color:var(--paper);padding:3px 9px;border-radius:999px;line-height:1.3}
#lobby .tprof-streak{position:absolute;top:-12px;right:-16px;z-index:3;font-family:var(--kr);font-size:15px;line-height:1.2;color:#1a1206;background:var(--p1);border:2.5px solid var(--ink);border-radius:8px;padding:5px 12px;box-shadow:3px 3px 0 var(--shadow);transform:rotate(-8deg);white-space:nowrap}
#lobby .tprof-streak small{display:block;font-family:var(--disp);font-size:9px;letter-spacing:.18em;opacity:.75}
#lobby .tprof-streak[hidden]{display:none}
#lobby .tpanel-profile:not([hidden]) .tprof-streak{animation:tStampPop calc(.4s * var(--slow)) cubic-bezier(.2,1.55,.4,1) both;animation-delay:calc(.28s * var(--slow))}
@keyframes tStampPop{0%{opacity:0;transform:scale(2.2) rotate(-18deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
#lobby .tprof-head{display:flex;align-items:center;gap:18px;margin:0 0 20px 4px}
#lobby .tprof-avatar{position:relative;flex:none;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:var(--p1);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink),5px 6px 0 6px var(--shadow);font-family:var(--kr);font-size:28px;font-weight:700;line-height:1;color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--shadow)}
#lobby .tprof-avatar .dp{position:absolute;left:56%;top:88%;width:13px;height:auto;overflow:visible;transform-origin:50% 0}
#lobby .tprof-id{min-width:0;flex:1}
#lobby .tprof-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--kr);font-size:30px;line-height:1.05}
#lobby .tprof-name.long{font-size:23px}
#lobby .tprof-tag{display:inline-block;margin-top:6px;font-family:var(--disp);font-size:11px;letter-spacing:1.5px;background:var(--ink);color:var(--paper);padding:2px 8px;border-radius:999px}
#lobby .tprof-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
#lobby .tprof-hero .lbl{display:block;margin-bottom:2px;font-family:var(--kr);font-size:13px;color:#5b6270;letter-spacing:1px}
#lobby .tprof-hero .big{font-family:var(--disp);font-size:52px;line-height:.9;color:var(--p1);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--shadow)}
#lobby .tprof-hero .big small{font-size:.55em}
#lobby .tprof-hero .big.empty{font-family:var(--kr);font-size:22px;line-height:1.1;padding-bottom:4px;color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
#lobby .tprof-hero .sub{font-family:var(--kr);font-size:13px;color:#5b6270;text-align:right;padding-bottom:4px;white-space:nowrap}
#lobby .tprof-field{position:relative;height:26px;margin:0 0 30px;border:3px solid var(--ink);border-radius:9px;background:var(--table);box-shadow:3px 3px 0 var(--shadow)}
#lobby .tprof-field .clip{position:absolute;inset:0;overflow:hidden;border-radius:5px}
#lobby .tprof-field .fill{position:absolute;left:0;top:0;bottom:0;width:var(--rate,0%);background:var(--p1)}
#lobby .tpanel-profile:not([hidden]) .tprof-field .fill{animation:tFieldFill calc(.7s * var(--slow)) cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(.15s * var(--slow))}
@keyframes tFieldFill{from{width:0}to{width:var(--rate,0%)}}
/* 잉크 앞머리: 위·아래로 어긋난 방울 둘 + 앞서 튄 점 둘 → 클리핑 안에서도 가장자리가 울퉁불퉁 */
#lobby .tprof-field .fill::before{content:'';position:absolute;right:-11px;top:-9px;width:24px;height:24px;border-radius:50%;background:inherit}
#lobby .tprof-field .fill::after{content:'';position:absolute;right:-8px;bottom:-8px;width:20px;height:20px;border-radius:50%;background:inherit;box-shadow:17px -7px 0 -6px var(--p1),26px 1px 0 -7px var(--p1)}
#lobby .tprof-field.zero .fill::before,#lobby .tprof-field.zero .fill::after,#lobby .tprof-field.zero .dp{display:none}
#lobby .tprof-field .dp{position:absolute;top:calc(100% - 5px);width:13px;height:auto;z-index:1;overflow:visible;transform-origin:50% 0}
#lobby .tprof-field .dp.d1{left:calc(var(--rate,0%) * .3)}
#lobby .tprof-field .dp.d2{left:calc(var(--rate,0%) * .78);width:11px}
#lobby .tpanel-profile:not([hidden]) .dp{animation:tDripGrow calc(.55s * var(--slow)) cubic-bezier(.3,.9,.3,1) both;animation-delay:calc(.3s * var(--slow))}
#lobby .tprof-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
#lobby .tprof-total{margin-right:auto;font-family:var(--kr);font-size:14px;color:#5b6270}
#lobby .tprof-total b{font-family:var(--disp);font-size:24px;font-weight:400;color:var(--ink);margin-right:2px}
#lobby .tprof-chip{display:inline-flex;align-items:baseline;gap:5px;padding:6px 12px 5px;border:2.5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--shadow);transform:rotate(var(--r,0deg));font-family:var(--kr);font-size:13px}
#lobby .tprof-chip b{font-family:var(--disp);font-size:22px;font-weight:400;line-height:1}
#lobby .tprof-chip.win{background:var(--p1);color:#1a1206;--r:-1.2deg}
#lobby .tprof-chip.lose{background:var(--p2);color:#06131f;--r:.9deg}
#lobby .tprof-chip.draw{--r:-.6deg}
#lobby .tprof-note{margin:0;color:#5b6270;font-size:10px;line-height:1.45}
#lobby .tprof-current{margin-top:17px;padding-top:15px;border-top:2px dashed #b9b3aa;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
#lobby .tprof-current .lbl{display:block;font-size:11px;color:#626a78}
#lobby .tprof-current strong{display:block;font:17px var(--kr);margin-top:4px}
#lobby .tprof-current canvas{width:112px;height:42px}
#lobby .tprof-current button{grid-column:1/-1;padding:9px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--shadow);font:15px var(--kr)}
#lobby .tpanel-equipment{width:min(540px,94vw);padding:20px 24px 23px;max-height:calc(100dvh - 24px);overflow-y:auto;transform:translate(-50%,-50%) rotate(-.6deg)}
#lobby .tpanel-equipment .tpanel-top{display:flex;justify-content:space-between;align-items:center;font:21px var(--kr);margin-bottom:12px}
#lobby .tpanel-equipment .tpanel-top small{display:block;font:11px var(--disp);letter-spacing:2px;margin-bottom:5px}
#lobby .equipment-intro{font-size:12px;color:#525967;margin:0 0 15px;line-height:1.5}
#lobby .equipment-preview{border:3px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:3px 4px 0 var(--shadow)}
#lobby .equipment-preview canvas{width:100%;height:auto;display:block}
#lobby .equipment-name{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px}
#lobby .equipment-name h3{font:20px var(--kr);margin:12px 0}
#lobby #equipmentStamp{font:15px var(--kr);border:2px solid var(--ink);padding:4px 8px;transform:rotate(-6deg);border-radius:3px}
#lobby .tprof-flipper-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:3px 4px 6px}
#lobby .tprof-flipper-card{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;
 border:2.5px solid var(--ink);border-radius:11px;background:#fffaf1;color:var(--ink);box-shadow:3px 3px 0 var(--shadow)}
#lobby .tprof-flipper-card:hover{transform:translateY(-2px)}
#lobby .tprof-flipper-card[aria-pressed="true"]{background:#ffce9f;box-shadow:4px 4px 0 var(--shadow)}
#lobby .tprof-flipper-card:focus-visible,#lobby .equipment-actions button:focus-visible{outline:3px solid var(--p2);outline-offset:3px}
#lobby .tprof-flipper-card canvas{display:block;width:112px;height:42px;pointer-events:none}
#lobby .tprof-flipper-card .name{font:14px var(--kr);text-align:center;line-height:1.2}
#lobby .tprof-flipper-card .equip{height:17px;font:12px var(--kr);color:#525967}
#lobby .tprof-flipper-status{min-height:20px;margin:10px 0;font:14px var(--kr);text-align:center}
#lobby .tprof-flipper-status.err{color:#b52835}
#lobby .equipment-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:12px}
#lobby .equipment-actions button{color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:11px 6px;background:var(--paper);font:16px var(--kr);box-shadow:3px 4px 0 var(--shadow)}
#lobby .equipment-actions #equipFlipper{background:var(--p1)}
#lobby .equipment-actions button:disabled{opacity:.55;box-shadow:none;cursor:default}
@media(max-width:420px){#lobby .tpanel-equipment{padding:17px 15px}#lobby .equipment-name h3{font-size:18px}#lobby .equipment-actions button{font-size:14px}}
/* 낮은 화면(가로 폰)에서는 스크롤이 필요하므로 카드 밖으로 나가는 스탬프를 안으로 들인다 */
@media (max-height:520px){
  #lobby .tpanel-profile{overflow:auto}
  #lobby .tprof-streak{top:6px;right:8px}
}
#lobby .tparam-actions{display:flex;gap:8px;margin-top:12px}
#lobby .tparam-actions button{flex:1;background:transparent;color:var(--ink);border:2px solid var(--ink);padding:8px;border-radius:999px}
#lobby #lobbyParamWrap{max-height:430px;overflow:auto;padding-right:4px}
#lobby #lobbyParamWrap .prm{margin-bottom:9px}
#lobby #lobbyParamWrap .prm .lb{display:flex;justify-content:space-between;font-size:12px;margin-bottom:2px}
#lobby #lobbyParamWrap .prm .lb b{color:#3b3129;font-weight:600}
#lobby #lobbyParamWrap .prm .lb span{color:#1675b3;font-variant-numeric:tabular-nums}
#lobby #lobbyParamWrap .prm input[type=range]{width:100%;accent-color:var(--p1);margin:0}
#lobby #lobbyParamWrap .prm .desc{display:none;margin-top:5px;padding:7px 8px;border-radius:7px;background:#e6dfd2;color:#4c5360;font-size:11px;line-height:1.45;border:1px solid #cfc8bb}
#lobby #lobbyParamWrap .prm:hover .desc,#lobby #lobbyParamWrap .prm:focus-within .desc{display:block}
/* 도움말 — 빠른 요약 카드(전체 룰북은 /guide.html). 플레이어 카드와 같은 문법, 액센트는 P2. */
#lobby .tpanel-help{width:min(440px,92vw);padding:0 22px 18px;transform:translate(-50%,-50%) rotate(.8deg)}
#lobby .tpanel-help:not([hidden]){animation:tHelpIn calc(.42s * var(--slow)) cubic-bezier(.2,1.5,.4,1) both}
@keyframes tHelpIn{0%{opacity:0;transform:translate(-50%,-40%) rotate(5deg) scale(.7)}100%{opacity:1;transform:translate(-50%,-50%) rotate(.8deg)}}
#lobby .thelp-bar{height:14px;margin:0 -22px 14px;border-radius:16px 16px 0 0;background:var(--p2);border-bottom:3px solid var(--ink)}
#lobby .tpanel-help .tpanel-top{margin-bottom:12px;font-size:20px}
#lobby .thelp-kind{display:inline-block;font-family:var(--disp);font-size:11px;letter-spacing:1.5px;background:var(--ink);color:var(--paper);padding:3px 9px;border-radius:999px;line-height:1.3}
#lobby .thelp-win{display:flex;align-items:center;gap:14px;margin:0 0 14px 2px}
#lobby .thelp-win .big{flex:none;font-family:var(--disp);font-size:40px;line-height:.9;color:var(--p1);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--shadow)}
#lobby .thelp-win .txt{font-family:var(--kr);font-size:18px;line-height:1.15}
#lobby .thelp-win small{display:block;margin-top:3px;font-family:var(--body);font-size:11px;color:#5b6270}
#lobby .thelp-keys{display:grid;gap:7px;margin-bottom:14px;padding:10px 12px;border:2.5px solid var(--ink);border-radius:12px;background:var(--table);color:var(--paper);box-shadow:3px 3px 0 var(--shadow)}
#lobby .thelp-keys .row{display:grid;grid-template-columns:152px minmax(0,1fr);align-items:center;gap:10px;font-size:12px}
#lobby .thelp-keys .caps{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
#lobby .thelp-keys .caps i{font-style:normal;color:var(--dim);font-size:11px}
#lobby .thelp-keys kbd{display:inline-block;min-width:24px;padding:2px 6px 1px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--shadow);font-family:var(--disp);font-size:11px;letter-spacing:.5px;text-align:center;line-height:1.3}
#lobby .thelp-list{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:7px}
#lobby .thelp-list li{position:relative;padding-left:22px;font-size:13px;line-height:1.5;color:#373c46}
#lobby .thelp-list li::before{content:'';position:absolute;left:2px;top:.42em;width:10px;height:10px;border-radius:50%;background:var(--p1);border:2px solid var(--ink)}
#lobby .thelp-list li:nth-child(even)::before{background:var(--p2)}
#lobby .thelp-list b{font-family:var(--kr);font-weight:400;color:var(--ink)}
#lobby .thelp-go{display:flex;flex-direction:column;align-items:center;padding:10px 20px 9px;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--kr);font-size:18px;line-height:1.2;text-decoration:none;box-shadow:4px 5px 0 var(--p2);transition:transform .12s,box-shadow .12s}
#lobby .thelp-go small{font-family:var(--body);font-size:11px;color:var(--dim)}
#lobby .thelp-go:hover{transform:translate(-1px,-2px);box-shadow:6px 7px 0 var(--p2)}
#lobby .thelp-go:focus-visible{outline:3px solid var(--p2);outline-offset:3px}

/* SPLAT 스타버스트 */
#lobby #tbang{position:absolute;z-index:55;pointer-events:none;display:none;width:0;height:0}
#lobby #tbang.on{display:block}
#lobby #tbang .text{position:absolute;left:0;top:0;font-family:var(--disp);font-size:clamp(54px,9vw,96px);color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 6px 0 var(--shadow);white-space:nowrap;transform:translate(-50%,-50%) rotate(-9deg) scale(.2);opacity:0}
#lobby #tbang.on .text{animation:tBangIn calc(.13s * var(--slow)) cubic-bezier(.2,1.7,.4,1) both,tBangWob calc(.3s * var(--slow)) ease-in-out calc(.13s * var(--slow)) 1,tBangOut calc(.18s * var(--slow)) cubic-bezier(.5,0,.9,.4) calc(.36s * var(--slow)) both}
@keyframes tBangIn{0%{transform:translate(-50%,-50%) rotate(-14deg) scale(.2);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) rotate(-9deg) scale(1);opacity:1}}
@keyframes tBangWob{0%{transform:translate(-50%,-50%) rotate(-9deg) scale(1)}35%{transform:translate(-50%,-50%) rotate(-6deg) scale(1.06,.94)}70%{transform:translate(-50%,-50%) rotate(-11deg) scale(.97,1.03)}100%{transform:translate(-50%,-50%) rotate(-9deg) scale(1)}}
@keyframes tBangOut{0%{transform:translate(-50%,-50%) rotate(-9deg) scale(1);opacity:1}40%{transform:translate(-50%,-70%) rotate(-4deg) scale(1.12);opacity:1}100%{transform:translate(-50%,-160%) rotate(6deg) scale(.4);opacity:0}}
#lobby #tbang .burst{position:absolute;left:0;top:0;width:clamp(340px,50vw,600px);height:clamp(340px,50vw,600px);transform:translate(-50%,-50%) scale(0);overflow:visible;z-index:-1}
#lobby #tbang.on .burst{animation:tBurstIn calc(.46s * var(--slow)) cubic-bezier(.2,1.2,.4,1) both}
@keyframes tBurstIn{0%{transform:translate(-50%,-50%) rotate(-20deg) scale(.15);opacity:0}22%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1.18)}100%{transform:translate(-50%,-50%) rotate(3deg) scale(1.38);opacity:0}}
#lobby #tbang .drop{position:absolute;left:0;top:0;width:var(--s);height:var(--s);border-radius:50%;background:var(--p1);transform:translate(-50%,-50%);opacity:0}
#lobby #tbang.on .drop{animation:tDropFly calc(.5s * var(--slow)) cubic-bezier(.1,.8,.3,1) both;animation-delay:calc(var(--d)*var(--slow))}
@keyframes tDropFly{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}70%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.1);opacity:0}}

/* 개발 바 */
#lobby #tdev{position:fixed;right:10px;top:10px;z-index:80;display:flex;gap:6px;font-size:11px;font-family:var(--body)}
#lobby #tdev[hidden]{display:none}
#lobby #tdev button{background:rgba(11,12,16,.85);color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:6px 9px;white-space:nowrap}
#lobby #tdev button:hover{color:var(--paper);border-color:var(--dim);background:rgba(11,12,16,.85)}

@media (max-width:620px){
  #lobby #ttitle{gap:clamp(14px,2.5vh,24px);padding:2vh 10px 64px}
  #lobby #ttitle .logo{--fs:clamp(58px,22vw,82px)}
  #lobby .tmenu{gap:9px}
  #lobby .tmenu-btn .face{padding:11px 20px 10px}
  #lobby .tcard{top:auto;bottom:0;left:0;width:100%;max-height:100dvh;overflow-y:auto;transform:none;border-radius:22px 22px 0 0;border-bottom:0;box-shadow:none}
  #lobby #ttitle.asking .tcard{animation-name:tSheetIn}
  #lobby .tcard.err{animation-name:tSheetShake!important}
  #lobby #ttitle.asking .logo-slot{transform:scale(.5) translateY(-70%)}
  #lobby .logo .tag{right:50%;translate:50% 0;bottom:-1.5em}
  #lobby #tcover .logo-slot{top:28%}
  #lobby .tfoot{padding:10px 12px}
  #lobby .tfoot{gap:8px}
  #lobby .tfoot .ver{font-size:9px;white-space:normal;max-width:44vw}
  #lobby .tfoot .ver .sha{display:none}
  #lobby .tprofile{max-width:34vw;padding-right:8px}
  #lobby .tprofile .stats{display:none}
  /* 폭이 좁으면 버전 표기를 윗줄로 내린다 — 한 줄에 밀어넣으면 좌측 아이콘·프로필이 눌린다 */
  @media (min-height:540px){
    #lobby .tfoot{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ver ver" "l r";row-gap:6px}
    #lobby .tfoot-l{grid-area:l}
    #lobby .tfoot-r{grid-area:r}
    #lobby .tfoot .ver{grid-area:ver;justify-self:center;max-width:100%;white-space:nowrap}
    #lobby .tprofile{max-width:min(380px,60vw)}
  }
  /* 낮고 좁은 창(구형 폰 세로)에서는 줄을 늘릴 여유가 없다 — 버전 표기를 빼서 자리를 만든다 */
  @media (max-width:430px) and (max-height:539px){
    #lobby .tfoot .ver{display:none}
  }
  #lobby #tdev{left:8px;right:8px;top:8px;flex-wrap:wrap;justify-content:center;opacity:.75}
  #lobby .tpanel{max-height:86vh;padding:16px 15px}
  #lobby .tpanel-profile,#lobby .tpanel-help{padding:0 15px 16px}
  #lobby .tprof-bar,#lobby .thelp-bar{margin:0 -15px 14px}
  #lobby .thelp-keys .row{grid-template-columns:1fr;gap:3px}
  #lobby .tprof-name{font-size:26px}
  #lobby .tprof-hero .big{font-size:44px}
  #lobby .ttoast-slot{bottom:64px}
}
@keyframes tSheetIn{0%{transform:translateY(60px);opacity:0}100%{transform:none;opacity:1}}
@keyframes tSheetShake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){
  #lobby .logo.stamp .ch,#lobby .logo.stamp .w,#lobby .logo.stamp .tagline,#lobby .logo.stamp .ball,#lobby .logo.stamp .dp,#lobby .tmenu.in .tmenu-btn,#lobby #ttitle.asking .tcard,#lobby #tbang.on .text,#lobby #tbang.on .burst,#lobby #tbang.on .drop,#lobby #tcover .logo.hit,#lobby #tcover.waking,#lobby #titleMute svg,#lobby .tpanel-help:not([hidden]),#lobby .tpanel-profile:not([hidden]),#lobby .tpanel-profile:not([hidden]) .tprof-streak,#lobby .tpanel-profile:not([hidden]) .tprof-field .fill,#lobby .tpanel-profile:not([hidden]) .dp{animation-duration:.01s!important;animation-delay:0s!important}
  #lobby #tcover.hardblink .tcover-hint .hard,#lobby .logo .ball::after{animation:none!important}
}