:root{--wii:#2fa4e7;--ink:#26303d;--soft:rgba(255,255,255,.88);--sh:0 4px 14px rgba(20,40,70,.18);--r:16px;--k:1;--u:clamp(11px,1.45vh + .35vw,15px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1b2340;font-family:'Pretendard','Malgun Gothic',system-ui,sans-serif;color:var(--ink);font-size:var(--u);overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
#gl,#gl canvas{position:fixed;inset:0;display:block;width:100%;height:100%}
#ov{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.hide{display:none!important}
button{font-family:inherit;cursor:pointer;border:0}

/* 이름표 */
.ntag{position:absolute;left:0;top:0;padding:.15em .55em .15em .4em;border-radius:99px;background:rgba(255,255,255,.9);font-size:.78em;font-weight:800;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18);display:flex;align-items:center;gap:.3em;will-change:transform;border:2px solid transparent}
.ntag i{width:.62em;height:.62em;border-radius:50%;background:var(--c)}
.ntag.on i{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #31d06b}
.ntag.me{border-color:var(--c);background:#fff}
.ntag.me b::after{content:' (나)';color:var(--c)}
.ntag.npc{background:rgba(70,78,92,.55);color:#eef1f5;font-size:.64em;font-weight:600;padding:.1em .5em;box-shadow:none}
/* 말풍선 */
.bub{position:absolute;left:0;top:0;max-width:min(46vw,calc(260px*var(--k)));padding:.45em .75em;border-radius:14px;background:#fff;font-weight:700;font-size:.9em;line-height:1.3;box-shadow:0 3px 10px rgba(0,0,0,.2);will-change:transform;word-break:keep-all;overflow-wrap:anywhere}
.bub::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-top-color:#fff;border-bottom:0}
.bub.ex{background:#f3f5f8;color:#3a4656;font-size:.8em;opacity:.95}
.bub.chat{background:#fffbe6;border:2.5px solid var(--c);font-size:1em;padding-top:1.05em}
.bub.chat::before{content:'💬 ' attr(data-n);position:absolute;top:.18em;left:.75em;font-size:.68em;color:var(--c);font-weight:900}
.bub.chat::after{border-top-color:var(--c)}
.bub.pop{animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}

/* 상단 */
#hud{position:fixed;left:max(10px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:4px;pointer-events:none}
#where{background:var(--soft);backdrop-filter:blur(6px);padding:.35em .8em;border-radius:99px;box-shadow:var(--sh);font-weight:900;display:flex;gap:.6em;align-items:center}
#clock{font-weight:700;color:#5b6b7f;font-variant-numeric:tabular-nums}
#wx{font-weight:700;font-size:.85em;color:#5b6b7f;white-space:nowrap}
#next:empty{display:none}
#next{background:rgba(27,35,64,.72);color:#fff;padding:.25em .75em;border-radius:99px;font-size:.8em;font-weight:700;align-self:flex-start}
#banner{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-150%);background:linear-gradient(90deg,#ff8a3d,#ff4f8a);color:#fff;font-weight:900;padding:.5em 1.2em;border-radius:99px;box-shadow:var(--sh);transition:transform .35s cubic-bezier(.3,1.4,.6,1);white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:5}
#banner.show{transform:translateX(-50%) translateY(0)}
#online{position:fixed;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));background:var(--soft);padding:.35em .8em;border-radius:99px;box-shadow:var(--sh);font-weight:800;font-size:.85em}
#online b{color:#1fae55}

/* 왼쪽 6인 */
#roster{position:fixed;left:max(10px,env(safe-area-inset-left));top:calc(max(8px,env(safe-area-inset-top)) + 4.4em);display:flex;flex-direction:column;gap:5px;width:min(30vw,calc(250px*var(--k)))}
.who{display:flex;align-items:center;gap:.5em;background:var(--soft);backdrop-filter:blur(6px);border-radius:12px;padding:.3em .5em;box-shadow:0 2px 8px rgba(20,40,70,.14);text-align:left;color:var(--ink);border:2px solid transparent;width:100%}
.who.sel{border-color:var(--c)}
#roster.mini{width:auto}#roster.mini .tx{display:none}#roster.mini .who{width:auto;padding:.2em}
.who .av{flex:none;width:1.9em;height:1.9em;border-radius:50%;background:var(--c);display:grid;place-items:center;font-size:.95em;position:relative}
.who .av.on::after{content:'';position:absolute;right:-2px;bottom:-2px;width:.62em;height:.62em;border-radius:50%;background:#31d06b;border:2px solid #fff}
.who .tx{min-width:0;flex:1}
.who .nm{font-weight:900;font-size:.88em;display:flex;gap:.35em;align-items:center}
.who .nm em{font-style:normal;font-size:.75em;background:var(--c);color:#fff;border-radius:6px;padding:0 .35em}
.who .st{font-size:.74em;color:#56677c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 오른쪽 도구 */
#tools{position:fixed;right:max(10px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 2.7em);display:flex;flex-direction:column;gap:6px}
#tools button{width:2.6em;height:2.6em;border-radius:50%;background:var(--soft);box-shadow:var(--sh);font-size:1.05em}
#tools button.on{background:var(--wii);}

/* 채팅 */
#chatbar{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;align-items:center;width:min(calc(560px*var(--k)),70vw)}
#bChat{background:var(--wii);color:#fff;font-weight:900;padding:.6em 1em;border-radius:99px;box-shadow:var(--sh);white-space:nowrap}
#chatForm{flex:1;display:flex;background:#fff;border-radius:99px;box-shadow:var(--sh);overflow:hidden;opacity:.92}
#chatForm input{flex:1;border:0;outline:0;padding:.65em 1em;font:inherit;font-weight:700;min-width:0;background:transparent;user-select:text;-webkit-user-select:text}
#chatForm button{background:var(--wii);color:#fff;font-weight:900;padding:0 1em}
#chatlog{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:calc(max(10px,env(safe-area-inset-bottom)) + 3.4em);width:min(28vw,calc(240px*var(--k)));display:flex;flex-direction:column;gap:3px;pointer-events:none}
#chatlog div{background:rgba(20,28,48,.6);color:#fff;font-size:.74em;padding:.25em .6em;border-radius:8px;animation:fade 14s forwards}
#chatlog div b{color:var(--c)}
@keyframes fade{0%,80%{opacity:1}100%{opacity:0}}

/* 행동 메뉴 */
#menu{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:22px;box-shadow:0 10px 40px rgba(0,0,0,.35);padding:1em;width:min(calc(520px*var(--k)),86vw);z-index:20}
#menu h3{margin:0 0 .2em;font-size:1.05em}
#menu p{margin:0 0 .7em;color:#6a7a8c;font-size:.8em}
#menu .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.4em,1fr));gap:6px;max-height:52vh;overflow:auto}
#menu .grid button{background:#eef6fc;border-radius:12px;padding:.55em .3em;font-weight:800;font-size:.9em;color:var(--ink)}
#menu .grid button:active{background:#cfe9fa}
#menu .x{position:absolute;right:.6em;top:.5em;background:none;font-size:1.3em}
#card{position:fixed;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 3.6em);transform:translateX(-50%);background:#fff;border-radius:16px;box-shadow:var(--sh);padding:.7em 1em;width:min(calc(420px*var(--k)),80vw);z-index:15;border-top:5px solid var(--c)}
#card h4{margin:0;font-size:1em}#card .s{color:#6a7a8c;font-size:.8em;margin:.15em 0 .3em}#card .now{font-weight:800}#card .x{position:absolute;right:.5em;top:.35em;background:none;font-size:1.2em}
#toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:25}
#toast div{background:rgba(27,35,64,.88);color:#fff;font-weight:800;padding:.5em 1em;border-radius:99px;animation:toast 3.2s forwards;white-space:nowrap}
@keyframes toast{0%{opacity:0;transform:translateY(8px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}

/* 접속 */
#login{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(20,30,60,.35),rgba(10,14,30,.75));z-index:40;padding:12px}
.lbox{background:rgba(255,255,255,.96);border-radius:28px;box-shadow:0 20px 60px rgba(0,0,0,.4);padding:1.1em 1.4em 1em;width:min(calc(620px*var(--k)),94vw);text-align:center}
.logo{font-size:2.1em;font-weight:900;letter-spacing:-.02em;color:#1b2340}.logo b{color:var(--wii);font-size:.55em;vertical-align:middle;margin-right:.2em}.logo small{display:block;font-size:.32em;letter-spacing:.35em;color:#8a99ab;font-weight:700}
.sub{margin:.3em 0 .7em;color:#4b5b6e;font-size:.9em;line-height:1.45}
#pick{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:.7em}
#pick button{background:#f2f6fa;border-radius:14px;padding:.45em .2em;font-weight:900;color:var(--ink);border:3px solid transparent;display:flex;flex-direction:column;align-items:center;gap:.15em;font-size:.88em}
#pick button i{font-style:normal;width:2em;height:2em;border-radius:50%;background:var(--c);display:grid;place-items:center;font-size:1.05em}
#pick button small{font-size:.65em;color:#7a8a9c;font-weight:700}
#pick button.sel{border-color:var(--c);background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
#go{background:var(--wii);color:#fff;font-weight:900;font-size:1.1em;padding:.6em 2.2em;border-radius:99px;box-shadow:0 6px 16px rgba(47,164,231,.4)}
#go:disabled{background:#b8c6d4;box-shadow:none}
.fine{font-size:.72em;color:#8a99ab;margin:.7em 0 0}
#loading{position:fixed;left:50%;bottom:16%;transform:translateX(-50%);background:rgba(255,255,255,.95);padding:.6em 1.2em;border-radius:99px;box-shadow:var(--sh);font-weight:800;display:flex;gap:.8em;align-items:center;z-index:45}
.lbar{width:120px;height:8px;background:#e3eaf1;border-radius:9px;overflow:hidden}.lbar i{display:block;height:100%;width:0;background:var(--wii);transition:width .1s}
#rotate{position:fixed;inset:0;background:#1b2340;color:#fff;display:none;place-items:center;text-align:center;z-index:60;font-size:1.3em;line-height:1.6}
#rotate div{font-size:1.4em}#rotate small{font-size:.6em;opacity:.7}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:grid}}
#title{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:30}
#title div{background:rgba(10,14,30,.82);color:#fff;padding:1em 2em;border-radius:22px;text-align:center;animation:title 4.2s forwards;box-shadow:0 12px 50px rgba(0,0,0,.4)}
#title b{display:block;font-size:2em;font-weight:900}#title small{opacity:.75;font-weight:700}
@keyframes title{0%{opacity:0;transform:scale(.9)}12%,78%{opacity:1;transform:none}100%{opacity:0}}

/* 작은 가로 화면(폰) */
@media (max-height:460px){
  :root{--u:11px}
  #roster{width:min(24vw,calc(165px*var(--k)));gap:2px;top:calc(max(6px,env(safe-area-inset-top)) + 4em)}
  .who{padding:.12em .35em;border-radius:9px;gap:.35em}
  .who .av{width:1.45em;height:1.45em;font-size:.85em}
  .who .nm{font-size:.82em}.who .st{font-size:.7em}
  #tools button{width:2.3em;height:2.3em}
  #hud #next{font-size:.72em}
  #chatbar{width:min(calc(480px*var(--k)),58vw)}
  #chatlog{display:none!important}
}

/* 조이스틱 (터치 기기만) */
#joy{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:118px;height:118px;border-radius:50%;background:rgba(20,28,48,.28);border:2px solid rgba(255,255,255,.55);box-shadow:var(--sh);touch-action:none;z-index:12;display:none}
body.joy #joy:not(.hide){display:block}
#joy i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none}
#joy.on{background:rgba(20,28,48,.42)}
#joy.lock{opacity:.45}#joy.lock i::after{content:'🔒';position:absolute;inset:0;display:grid;place-items:center;font-size:20px}
body.joy #chatbar{left:max(10px,env(safe-area-inset-left));transform:none;width:min(calc(480px*var(--k)),calc(100vw - 170px))}
body.joy #chatlog{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 130px)}
@media (max-height:460px){#joy{width:100px;height:100px}#joy i{width:44px;height:44px;margin:-22px 0 0 -22px}}

/* ── 파티(대결·미니게임) ── */
#pPill{position:fixed;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;gap:6px;align-items:center;z-index:6}
#pPill button,#pBadge{background:var(--soft);box-shadow:var(--sh);border-radius:99px;padding:.42em .95em;font-weight:900;font-size:.9em;color:var(--ink)}
#pPill #bBattle{background:linear-gradient(135deg,#ff6a3d,#ff3d6e);color:#fff}
#pPill #bMini{background:linear-gradient(135deg,#3db5ff,#7a5cff);color:#fff}
#pBadge{cursor:pointer;background:#fffbe6;border:2px solid #ffc531;animation:pbadge 1.6s ease-in-out infinite}
@keyframes pbadge{50%{transform:scale(1.06)}}
#banner{top:calc(max(8px,env(safe-area-inset-top)) + 2.6em)}
#roster.dim,#tools.dim{opacity:.35}
#pSpec{position:fixed;left:50%;top:calc(max(8px,env(safe-area-inset-top)) + 2.8em);transform:translateX(-50%);background:#26303d;color:#fff;padding:.4em 1em;border-radius:99px;font-weight:800;font-size:.85em;cursor:pointer;z-index:6;box-shadow:var(--sh)}
#pLobby,#pResult{position:fixed;inset:0;background:rgba(18,26,48,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:40;padding:10px}
.pbox{position:relative;background:#fff;border-radius:22px;box-shadow:0 12px 40px rgba(0,0,0,.35);width:min(calc(760px*var(--k)),96vw);max-height:94vh;overflow:auto;padding:1em 1.1em 1.1em;overscroll-behavior:contain;touch-action:pan-y}
.px{position:absolute;right:.6em;top:.6em;width:2.2em;height:2.2em;border-radius:50%;background:#eef1f5;font-weight:900}
.ptabs{display:flex;gap:6px;margin:0 2.6em .7em 0}
.ptabs button{flex:1;padding:.6em;border-radius:14px;background:#eef1f5;font-weight:900;font-size:1em;color:#6b7684}
.ptabs button.on{background:var(--ink);color:#fff}
.pgames{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;margin-bottom:.6em}
.pgames button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:.55em .7em;border-radius:14px;background:#f4f6f9;border:2.5px solid transparent;color:var(--ink)}
.pgames button i{font-style:normal;font-size:1.5em}.pgames button b{font-size:.92em}.pgames button small{font-size:.68em;color:#6b7684;line-height:1.25}
.pgames button.on{border-color:var(--wii);background:#e9f6ff}
.pgames button:disabled{opacity:.55}
.pgdesc{display:flex;gap:.7em;align-items:center;background:linear-gradient(135deg,#fff1ea,#ffe8ef);border-radius:16px;padding:.7em .9em;margin-bottom:.6em}
.pgdesc i{font-style:normal;font-size:2.2em}.pgdesc b{font-size:1.1em}.pgdesc small{display:block;color:#6b5560;font-size:.8em;margin-top:2px}
.popts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.6em}
.popts .seg{display:flex;background:#eef1f5;border-radius:99px;padding:3px}
.popts .seg button{padding:.35em .9em;border-radius:99px;background:none;font-weight:800;color:#6b7684}
.popts .seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.popts .tg{padding:.35em .9em;border-radius:99px;background:#eef1f5;font-weight:800;color:#6b7684}.popts .tg.on{background:#e5f9ec;color:#18914a}
.phint{color:#6b7684;font-weight:700;margin:.2em 0 .6em}
.plast{background:#fffbe6;border-radius:12px;padding:.4em .8em;margin-bottom:.6em;font-weight:700;font-size:.85em}
.pslots,.prest{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.prest{margin-top:6px;opacity:.85}
.pslot{display:flex;align-items:center;gap:.4em;padding:.45em .6em;border-radius:14px;background:#f4f6f9;border:2.5px solid transparent;min-width:0}
.pslot i{font-style:normal;font-size:1.25em}.pslot b{font-size:.9em;white-space:nowrap}.pslot b u{text-decoration:none;font-size:.7em;color:var(--c)}
.pslot em{margin-left:auto;font-style:normal;font-size:.7em;font-weight:800;color:#8a94a3;white-space:nowrap}
.pslot.in{background:#fff;border-color:var(--c)}.pslot.ready{background:color-mix(in srgb,var(--c) 14%,#fff)}
.pslot em.rd{color:#18914a}.pslot em.dim{color:#aab2bd;font-weight:700}
.pteams{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pteam{border-radius:16px;padding:.5em;background:color-mix(in srgb,var(--t) 9%,#fff);border:2.5px solid color-mix(in srgb,var(--t) 50%,#fff);display:flex;flex-direction:column;gap:5px}
.pteam h4{margin:0 0 2px;display:flex;align-items:center;gap:.4em;color:var(--t)}
.pteam h4 button{margin-left:auto;font-size:.72em;padding:.3em .7em;border-radius:99px;background:var(--t);color:#fff;font-weight:800}
.pteam .dim{color:#aab2bd;font-size:.8em;padding:.3em}
.psyn{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.psyn span{font-size:.7em;font-weight:800;padding:.2em .55em;border-radius:99px}
.psyn .up{background:#e5f9ec;color:#18914a}.psyn .down{background:#ffeaea;color:#d23a3a}
.pstat{margin-top:.6em;background:#f4f6f9;border-radius:14px;padding:.6em .8em;font-size:.85em}
.pfoot{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:.8em;flex-wrap:wrap}
.pfoot button{padding:.65em 1.2em;border-radius:14px;font-weight:900;font-size:1em}
.pfoot .ghost{background:#eef1f5;color:#6b7684}
.pfoot .big{background:var(--wii);color:#fff;min-width:9em;font-size:1.1em;box-shadow:0 4px 0 #1d7fbb}
.pfoot .big.on{background:#31c26b;box-shadow:0 4px 0 #1f8a4a}
.pfoot .big:disabled{opacity:.45}
.pneed{flex:1;color:#d2671f;font-weight:800;font-size:.85em}
#pCount{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:30}
#pCount div{text-align:center;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.45)}
#pCount small{display:block;font-weight:900;font-size:1.4em}
#pCount b{display:block;font-size:7em;line-height:1;font-weight:900;animation:pnum .9s ease-out infinite}
#pCount span{display:block;margin-top:.4em;font-weight:800;background:rgba(20,28,48,.55);padding:.4em 1em;border-radius:99px;font-size:.95em}
@keyframes pnum{from{transform:scale(1.5);opacity:0}30%{transform:scale(1);opacity:1}}
#pHud{position:fixed;left:50%;top:calc(max(8px,env(safe-area-inset-top)) + 2.7em);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:7}
#pHud .pt{background:var(--ink);color:#fff;font-weight:900;padding:.3em 1em;border-radius:99px;font-size:.9em}
#pHud .pt b{color:#ffc531;margin-left:.3em}#pHud .pt em{font-style:normal;color:#9fd8ff}
#pHud .ph{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:92vw}
#pHud .ph:empty{display:none}
.chip{background:var(--soft);box-shadow:var(--sh);border-radius:99px;padding:.2em .65em;font-weight:800;font-size:.8em;display:inline-flex;gap:.3em;align-items:center;border:2px solid var(--c,transparent)}
.chip.out{opacity:.4;text-decoration:line-through}.chip.me{background:#fff}
#pOv{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:8}
.ptag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform}
.ptag .bar{width:64px;height:7px;border-radius:9px;background:rgba(20,28,48,.55);overflow:hidden;border:1.5px solid #fff}
.ptag .bar i{display:block;height:100%;transition:width .15s}
.ptag span{font-weight:900;font-size:.78em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap}
.pfloat{position:absolute;left:0;top:0;font-weight:900;font-size:1.25em;text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.4);white-space:nowrap;will-change:transform,opacity}
.pban{position:fixed;left:50%;top:32%;transform:translate(-50%,-50%);font-size:2.6em;font-weight:900;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.5),0 0 2px #000;pointer-events:none;z-index:31;animation:pban .5s cubic-bezier(.3,1.6,.6,1);white-space:nowrap}
@keyframes pban{from{transform:translate(-50%,-50%) scale(.3);opacity:0}}
#pBtns{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:calc(max(10px,env(safe-area-inset-bottom)) + 3.6em);display:flex;gap:10px;align-items:flex-end;z-index:12}
#pBtns button{position:relative;width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 0 rgba(20,40,70,.25),var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;border:3px solid #fff;overflow:hidden}
#pBtns button:first-child{width:92px;height:92px;background:linear-gradient(135deg,#ff6a3d,#ff3d6e)}#pBtns button:first-child small{color:#fff}
#pBtns button i{position:relative;font-style:normal;font-size:1.9em;line-height:1}#pBtns button small{position:relative;font-size:.62em;font-weight:900;color:var(--ink)}
#pBtns button.on{transform:translateY(3px) scale(.95);box-shadow:0 1px 0 rgba(20,40,70,.25)}
#pBtns button .cd{position:absolute;left:0;right:0;bottom:0;background:rgba(20,28,48,.45);pointer-events:none}
#pBtns button.full{animation:pfull .6s ease-in-out infinite alternate;border-color:#ffd23a}
@keyframes pfull{to{box-shadow:0 0 0 4px #ffd23a,0 0 22px #ffb31a}}
#pBtns kbd{font-family:inherit;background:#26303d;color:#fff;border-radius:4px;padding:0 .3em;font-size:.9em}
.prank{display:flex;flex-direction:column;gap:5px;margin:.6em 0}
.prank div{display:grid;grid-template-columns:3em 1.8em 6em 1fr;align-items:center;gap:.4em;padding:.45em .7em;border-radius:14px;background:#f4f6f9;border-left:6px solid var(--c)}
.prank div.w{background:#fffbe6}
.prank b{font-size:1.2em}.prank i{font-style:normal;font-size:1.3em}.prank span{font-weight:900}.prank span u{text-decoration:none;font-size:.75em;color:var(--c)}
.prank em{font-style:normal;font-size:.8em;color:#5a6676;font-weight:700}
.prank q{grid-column:2/-1;font-size:.82em;color:#7a6a40}.prank q:empty{display:none}
#pResult h2{margin:.2em 0 0;text-align:center;font-size:1.6em}
#pResult .sub{text-align:center;color:#6b7684;margin:.2em 0}
.pmvp{text-align:center;font-weight:900;background:linear-gradient(90deg,#fff3c4,#ffe0ef);border-radius:12px;padding:.5em}
@media (max-height:460px){
  .pbox{padding:.7em .8em}.pgames{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.pgames button small{display:none}
  #pBtns button{width:64px;height:64px}#pBtns button:first-child{width:76px;height:76px}
  #pCount b{font-size:5em}.pban{font-size:2em}
}

/* 영화 맵 공격 버튼 */
#atk{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:calc(max(10px,env(safe-area-inset-bottom)) + 3.6em);width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#ff6a3d,#ff3d6e);color:#fff;box-shadow:0 4px 0 rgba(120,20,40,.35),var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;border:3px solid #fff;z-index:12}
#atk i{font-style:normal;font-size:1.8em;line-height:1}#atk small{font-size:.6em;font-weight:900}
#atk kbd{font-family:inherit;background:rgba(0,0,0,.35);border-radius:4px;padding:0 .3em}
#atk.on{transform:translateY(3px) scale(.94)}
@media (max-height:460px){#atk{width:70px;height:70px}}

/* ── 생활: 가방·가게(무료)·장소 행동 ── */
#bInv{position:relative}#bInv::after{content:attr(data-n);position:absolute;right:-4px;top:-4px;background:var(--ink);color:#fff;font-size:.6em;border-radius:99px;padding:0 .35em;font-weight:900}
#eAct{position:fixed;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 3.7em);transform:translateX(-50%);z-index:13}
#eAct button{background:#26303d;color:#fff;font-weight:900;padding:.6em 1.2em;border-radius:99px;box-shadow:0 4px 0 rgba(0,0,0,.3),var(--sh);font-size:1em;animation:pbadge 1.4s ease-in-out infinite}
#eAct kbd{font-family:inherit;background:#ffc531;color:#26303d;border-radius:6px;padding:0 .4em;margin-right:.2em}
.epanel{position:fixed;inset:0;background:rgba(18,26,48,.45);display:grid;place-items:center;z-index:41;padding:10px}
.epanel .pbox{width:min(calc(560px*var(--k)),96vw)}.epanel .pbox.small{width:min(calc(380px*var(--k)),92vw)}
.epanel h3{margin:.1em 2.4em .5em 0}.epanel h3 small{font-size:.65em;color:#6b7684;margin-left:.4em}
.egrid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.eslot{aspect-ratio:1;border-radius:12px;background:#f4f6f9;border:2.5px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;min-width:0}
.eslot i{font-style:normal;font-size:1.6em;line-height:1.1}.eslot small{font-size:.55em;font-weight:800;color:#5a6676;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.eslot.sel{border-color:var(--wii);background:#e9f6ff}.eslot.empty{background:#fafbfc;border:2px dashed #e3e7ec}
.einfo{margin-top:.6em}.eitem{display:flex;gap:.6em;align-items:center}.eitem i{font-style:normal;font-size:2.2em}.eitem small{display:block;color:#6b7684}
.ehint{color:#7a8592;font-size:.82em;font-weight:700;margin:.4em 0}
.etabs{display:flex;gap:6px;margin-bottom:.5em}.etabs button{flex:1;padding:.45em;border-radius:12px;background:#eef1f5;font-weight:900;color:#6b7684}.etabs button.on{background:var(--ink);color:#fff}
.elist{display:flex;flex-direction:column;gap:5px;max-height:55vh;overflow:auto}
.erow{display:flex;align-items:center;gap:.6em;background:#f4f6f9;border-radius:12px;padding:.4em .6em}.erow i{font-style:normal;font-size:1.5em}.erow b{flex:1}
.erow button{background:var(--wii);color:#fff;font-weight:900;border-radius:10px;padding:.4em .8em}.erow button.ghost{background:#eef1f5;color:#26303d}.erow button:disabled{opacity:.4}
#menu .grid button.trade{background:#fffbe6;border:2px solid #ffc531;font-weight:900}
@media (max-height:460px){.egrid{grid-template-columns:repeat(10,1fr)}.eside .eoffer{grid-template-columns:repeat(6,1fr)}.elist{max-height:45vh}}
.phow{margin-top:.6em;background:#f6f3ff;border:2px solid #e2dafc;border-radius:14px;padding:.55em .8em}
.phow h5{margin:0 0 .3em;font-size:.95em}.phow p{margin:.2em 0;font-size:.8em;color:#5a5076;font-weight:700}.phow p.dim{color:#8a8199}
.phow table{border-collapse:collapse;font-size:.85em}.phow td,.phow th{padding:.18em .4em;text-align:left}.phow th{white-space:nowrap;color:#26303d}
.phow kbd{font-family:inherit;background:#26303d;color:#fff;border-radius:5px;padding:.05em .4em;margin:0 .1em;font-size:.9em;font-weight:900}

/* 모바일 배치: 조이스틱=왼쪽 아래, 행동 버튼=오른쪽 아래, 대화창=가운데 */
#joy{right:auto;left:max(18px,env(safe-area-inset-left))}
#pBtns{left:auto;right:max(14px,env(safe-area-inset-right));flex-direction:row-reverse}
@media (pointer:fine){#pBtns{flex-direction:row}}   /* PC: 키보드 순서(J K L)대로 왼→오 */
#atk{left:auto;right:max(14px,env(safe-area-inset-right))}
body.joy #chatbar{left:50%;transform:translateX(-50%);width:min(calc(440px*var(--k)),calc(100vw - 330px))}
body.joy #chatlog{right:auto;left:max(10px,env(safe-area-inset-left));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 130px)}
body.joy #eAct{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 3.7em)}
.ecat{font-weight:900;font-size:.8em;color:#6b7684;margin:.5em .2em .1em}.ecat.luxury{color:#b8860b}

/* 관전 막대 */
#pWatch{position:fixed;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 3.7em);transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:rgba(20,28,48,.82);padding:.35em .45em;border-radius:99px;z-index:14;box-shadow:var(--sh)}
#pWatch span{color:#fff;font-weight:800;font-size:.9em;padding:0 .4em;white-space:nowrap}
#pWatch button{background:#fff;color:#26303d;font-weight:900;border-radius:99px;padding:.35em .8em}
#pWatch button.out{background:#ff5a6e;color:#fff}
#pSpec{animation:pbadge 1.6s ease-in-out infinite}

/* 로그인: 비번 · 접속 표시 */
#pick button .nm{display:flex;align-items:center;gap:.3em}
#pick button .dot{width:.6em;height:.6em;border-radius:50%;background:#ff4f5e;box-shadow:0 0 0 2px #fff;flex:none}
#pick button .dot.on{background:#31d06b;box-shadow:0 0 0 2px #fff,0 0 6px #31d06b}
#pinBox{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 .7em}
#pinBox p{margin:0;font-weight:800;font-size:.9em;color:#4a5566}
#pinBox input[type=password]{font:inherit;font-size:1.4em;letter-spacing:.5em;text-align:center;width:6.5em;padding:.25em .3em .25em .8em;border-radius:12px;border:2.5px solid #dde3ea;font-weight:900}
#pinBox input[type=password]:focus{outline:none;border-color:var(--wii)}
#pinBox label{font-size:.82em;font-weight:800;color:#5a6676;display:flex;gap:.35em;align-items:center;cursor:pointer}

/* 기록표 */
.prankb{position:absolute;right:3.2em;top:.6em;background:#fffbe6;border:2px solid #ffc531;border-radius:99px;padding:.3em .8em;font-weight:900;font-size:.85em}
.pgames .prec{font-style:normal;font-size:.62em;font-weight:900;color:#b8860b;margin-top:2px}.pgames .prec.dim{color:#b6bec8;font-weight:700}
.pgames.two{grid-template-columns:1fr 1fr}
#pRank select{font:inherit;font-weight:800;padding:.35em .6em;border-radius:10px;border:2px solid #dde3ea;margin-bottom:.5em}
#pRank table{width:100%;border-collapse:collapse;font-size:.88em}#pRank th{color:#6b7684;font-size:.8em;text-align:left;padding:.3em}#pRank td{padding:.35em .3em;border-top:1px solid #eef1f5}
#pRank tr.last td{background:#fff3f3}

/* 내가 맞았을 때 화면 가장자리 빨간 번쩍 */
#pHurt{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;transition:opacity .18s ease-out;background:radial-gradient(ellipse at center,rgba(255,0,0,0) 45%,rgba(255,30,30,.55) 100%)}

/* 접속자 목록 */
#online{cursor:pointer;z-index:7}#online small{font-size:.7em;color:#8a94a3}
#onlist{position:fixed;right:max(10px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 2.3em);background:#fff;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.25);padding:.4em;z-index:42;display:flex;flex-direction:column;gap:2px;min-width:min(calc(300px*var(--k)),80vw)}
#onlist div{display:grid;grid-template-columns:1.4em 4.6em 1fr;align-items:center;gap:.3em;padding:.35em .5em;border-radius:10px;font-size:.85em}
#onlist div.on{background:#f2fbf5}#onlist div.off{opacity:.7}
#onlist i{font-style:normal}#onlist b u{text-decoration:none;font-size:.75em}#onlist span{color:#5a6676;font-weight:700;font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 떠다니는 조이스틱: 평소엔 흐릿한 자리 표시, 엄지 댄 곳에 나타남 */
#joy{pointer-events:none;opacity:.35;transition:opacity .15s}
#joy.on{opacity:1}
#joy.float{bottom:auto;right:auto;transition:none}

/* 럭키드로우 */
/* 설정 */
.sgrp{background:#f6f8fa;border-radius:14px;padding:.5em .7em;margin-bottom:.5em}.sgrp h5{margin:0 0 .3em;color:#6b7684}
.srow{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.3em 0;font-weight:800;font-size:.9em}
.srow input[type=checkbox]{width:1.3em;height:1.3em}.srow input[type=range]{width:9em}
.srow .seg{display:flex;background:#e9edf2;border-radius:99px;padding:2px}.srow .seg button{padding:.25em .7em;border-radius:99px;background:none;font-weight:800;color:#6b7684;font-size:.85em}.srow .seg button.on{background:#fff;color:#26303d}
.sbtn{display:block;width:100%;text-align:left;padding:.55em .8em;border-radius:10px;background:#fff;font-weight:800;margin-top:4px}.sbtn.warn{color:#d23a3a}
/* 친구 정보 */
.pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pfcard{display:flex;gap:.7em;background:#f6f8fa;border-radius:16px;padding:.6em;border-left:6px solid var(--c)}.pfcard.focus{background:#fffbe6}
.pfphoto{position:relative;width:76px;height:76px;flex:none;border-radius:14px;background:color-mix(in srgb,var(--c) 25%,#fff);display:grid;place-items:center;overflow:hidden}
.pfphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.pfphoto i{font-style:normal;font-size:2.4em}
.pfphoto em{position:absolute;right:4px;bottom:4px;width:12px;height:12px;border-radius:50%;background:#ff4f5e;border:2px solid #fff;z-index:2}.pfphoto em.on{background:#31d06b}
.pfinfo b{font-size:1.05em}.pfinfo small{display:block;color:#7a8592;font-size:.72em}
.pfinfo dl{display:grid;grid-template-columns:3.4em 1fr;gap:1px .3em;margin:.3em 0 0;font-size:.78em}.pfinfo dt{color:#8a94a3;font-weight:800}.pfinfo dd{margin:0;font-weight:700}.pfinfo u{text-decoration:none;color:#ff5a6e;font-weight:900}
@media (max-width:640px),(max-height:460px){.pfgrid{grid-template-columns:1fr}}
/* 👥 친구 정보 — 작게·한 줄씩(줄바꿈 없이 넘치면 …), 넓은 화면은 3칸 (1010) */
#profiles .pbox{width:min(calc(620px*var(--k)),96vw);max-height:94vh;overflow:auto}
#profiles .pfgrid{grid-template-columns:repeat(auto-fit,minmax(calc(255px*var(--k)),1fr));gap:8px}
#profiles .pfcard{gap:.55em;padding:.45em .5em;border-radius:12px;border-left-width:5px;font-size:.92em}
#profiles .pfphoto{width:58px;height:58px;border-radius:10px}#profiles .pfphoto i{font-size:1.8em}#profiles .pfphoto em{width:10px;height:10px;right:3px;bottom:3px}
#profiles .pfinfo{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
#profiles .pfinfo .pfh{display:flex;align-items:baseline;gap:.4em;white-space:nowrap}#profiles .pfh b{font-size:1em}#profiles .pfh span{font-size:.72em;font-weight:800;color:#6b7684}
#profiles .pfinfo small,#profiles .pfinfo p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#profiles .pfinfo small{font-size:.7em}#profiles .pfinfo p{font-size:.76em;font-weight:700;line-height:1.35}
#profiles .pfinfo p.pfseen{color:#56677c}
#profiles .pfact{display:flex;flex-wrap:wrap;gap:3px;align-items:center;margin-top:3px}
#profiles .pfact .pfsoc{display:flex;gap:3px}
#profiles .pfact button{padding:.15em .5em;font-size:.72em;border-radius:7px;margin:0;font-weight:900;white-space:nowrap}
#profiles .pfact .rcFr{margin:0;padding:.15em .5em}
#profiles .pfstat details{margin:0;font-size:.72em}#profiles .pfstat summary{white-space:nowrap}
#profiles .pfstat:has(details[open]){flex-basis:100%}
/* 생일 */
#bdayOv{position:fixed;inset:0;pointer-events:none;z-index:29}
.bdbub{position:absolute;background:#fff;border:3px solid #ff8ad8;border-radius:16px;padding:.4em .8em;font-weight:900;font-size:1.05em;color:#d23a8a;box-shadow:0 4px 14px rgba(0,0,0,.2);animation:bdpop 2.6s ease-out forwards}
@keyframes bdpop{0%{transform:scale(.3);opacity:0}12%{transform:scale(1.1);opacity:1}80%{opacity:1}100%{transform:translateY(-30px);opacity:0}}
.pban.bd{background:linear-gradient(90deg,#ff8ad8,#ffd23a,#7a5cff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));font-size:3em}

/* 칭호(이름표) */
.ntag small{display:block;position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:.72em;font-weight:900;color:#8a5a00;background:#fff3c4;border-radius:99px;padding:0 .45em;white-space:nowrap;margin-top:1px}
.ntag{position:absolute}
.pfstat details{margin-top:.35em;font-size:.82em}.pfstat summary{cursor:pointer;font-weight:900;color:#d2671f}.pfstat details>div{margin-top:.3em}

.pkick{margin-left:4px;font-size:.62em;font-weight:900;padding:.15em .5em;border-radius:99px;background:#ffecec;color:#d23a3a;border:1.5px solid #ffb0b0;flex:none}
.pgames button{position:relative}.pvote{position:absolute;right:6px;top:6px;background:#ffc531;color:#26303d;font-weight:900;font-size:.7em;border-radius:99px;padding:.1em .5em}
.pslot.own{border-color:#ffc531;background:#fff8e1}.pslot.own b::after{content:'방장';margin-left:.35em;font-size:.68em;background:#ffc531;color:#26303d;border-radius:99px;padding:.05em .45em;vertical-align:1px}
.powner{margin:.3em 0 .4em;padding:.4em .7em;border-radius:12px;background:#fff3c4;color:#5a4300;font-weight:800;font-size:.85em}.powner b{color:#26303d}
/* 🎒 가방 묶음 탭(묶음마다 30칸) */
.ebag{flex-wrap:wrap;gap:4px}.ebag button{flex:1 1 0;min-width:4.6em;padding:.3em .2em;font-size:.78em;line-height:1.15;display:flex;flex-direction:column;align-items:center}.ebag button small{font-size:.85em;opacity:.75}.ebag button.full small{color:#e5484d;opacity:1}
/* ⏱ 대기실 잠수 자동 퇴장 */
.pafk{text-decoration:none;font-weight:900;color:#6b7684;margin-left:.2em}.pafk.red{color:#e5484d}.pafkme{margin:.3em 0;padding:.35em .7em;border-radius:12px;background:#fff0f0;color:#c0392b;font-weight:800;font-size:.82em;text-align:center}
/* 폰: 오른쪽 메뉴가 행동 버튼(오른쪽 아래)을 가리지 않게 — 버튼 영역 위까지만 쓰고 넘치면 왼쪽으로 한 줄 더(고정, 드래그 없음) */
@media (pointer:coarse){
  #tools{flex-wrap:wrap-reverse;align-content:flex-start;max-height:calc(100dvh - 4.6em - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));column-gap:6px}
  #tools button{width:2.15em;height:2.15em}
}

/* 큰 화면(FHD·QHD·4K 모니터, 태블릿)은 UI 전체를 키움. 모바일(--k:1)은 그대로. --u=글자 기준, px 폭 상한도 --k 배. */
@media (pointer:fine) and (min-height:760px){:root{--k:1.2;--u:calc(15px*var(--k))}button{font-size:inherit}}   /* 버튼은 기본 13.3px 고정이라 큰 화면에선 같이 키움 */
@media (pointer:fine) and (min-height:1100px){:root{--k:1.5}}
@media (pointer:fine) and (min-height:1500px){:root{--k:1.9}}
@media (pointer:coarse) and (min-height:600px) and (min-width:900px){:root{--k:1.25;--u:calc(15px*var(--k))}button{font-size:inherit}}
#mlHint{position:fixed;left:50%;top:14%;transform:translateX(-50%);background:rgba(27,35,64,.78);color:#fff;font-weight:800;padding:.45em 1em;border-radius:99px;pointer-events:none;opacity:0;transition:opacity .4s;z-index:30;font-size:.9em}
#mlHint.on{opacity:1}
/* 🤖 대기실 빈자리 봇 넣기/빼기(방장이 빈자리 눌러 하나씩) */
.pslot.botable{cursor:pointer;border:2.5px dashed #c5cfdb;transition:background .15s,border-color .15s}
.pslot.botable:hover{background:#eef4fb;border-color:#2fa4e7}
.pslot.bot{background:#eaf5ff;border:2.5px solid #2fa4e7}
.pslot em.pbotin{color:#1f7fc0}
.pbotbtn{margin-left:4px;flex:none;font-size:.66em;font-weight:900;padding:.18em .55em;border-radius:99px;background:#2fa4e7;color:#fff}
.pslot.bot .pbotbtn{background:#fff;color:#d23a3a;border:1.5px solid #ffb0b0}
.pbothint{font-size:.78em;font-weight:800;color:#5b6b7f;background:#eef4fb;border-radius:99px;padding:.35em .8em}
/* 모바일 확대 방지: 모든 요소에서 핀치줌·더블탭줌 금지(스크롤은 허용). 캔버스·조이스틱은 원래 none */
*{touch-action:pan-x pan-y}
html,body,#gl,#gl canvas,#joy{touch-action:none}
/* 🚪 게임 나가기(파티 HUD 옆, 한 번 더 확인) · 결과화면 '대기실로 가기' */
#pHud .prow{display:flex;gap:6px;align-items:center}
#pQuit{pointer-events:auto;background:rgba(27,35,64,.55);color:#fff;font-weight:800;font-size:.72em;padding:.3em .7em;border-radius:99px;opacity:.75}
#pQuit:hover{opacity:1}
#pQuitAsk{pointer-events:auto;background:#fff;color:var(--ink);border-radius:14px;box-shadow:var(--sh);padding:.55em .8em;display:flex;flex-direction:column;align-items:center;gap:.45em;font-size:.88em}
#pQuitAsk.hide{display:none}
#pQuitAsk span{display:flex;gap:6px}
#pQuitAsk button{padding:.4em .9em;border-radius:10px;font-weight:900}
#pQuitAsk [data-q=yes]{background:#ff5a5a;color:#fff}
#pQuitAsk [data-q=no]{background:#eef1f5;color:#56677c}
.pfoot .mid{background:#e6f3fc;color:#1d7fbb}

/* 미니게임 버튼: 지금 못 누르는 버튼은 숨김(btnState.hide — 예: 의자 근처에서만 🪑 앉기) */
#pBtns button{transition:opacity .15s,transform .15s}
#pBtns button.off{opacity:0;transform:scale(.6);pointer-events:none}
/* PC: 공격(#atk)·미니게임 행동 버튼(#pBtns)이 보일 땐 채팅 기록을 버튼 위로 올림(겹침 방지, 1008) */
body:not(.joy):has(#atk:not(.hide)) #chatlog,body:not(.joy):has(#pBtns:not(.hide)) #chatlog{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 3.6em + 112px)}
/* 접속·퇴장 큰 알림 */
#annBan{position:fixed;left:50%;top:calc(max(8px,env(safe-area-inset-top)) + 3.4em);transform:translate(-50%,-30px) scale(.9);opacity:0;z-index:40;pointer-events:none;font-size:1.35em;font-weight:900;color:#fff;padding:.5em 1.4em;border-radius:99px;box-shadow:0 8px 24px rgba(20,40,70,.3);white-space:nowrap;transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .3s}
#annBan.in{background:linear-gradient(90deg,#1fae55,#2fa4e7)}#annBan.out{background:linear-gradient(90deg,#6b7684,#454e5c)}
#annBan.show{opacity:1;transform:translate(-50%,0) scale(1)}
@media (max-height:460px){#annBan{font-size:1.1em;top:calc(max(6px,env(safe-area-inset-top)) + 2.6em)}}
/* 🛠 제작자 메뉴 */
#adminP{position:fixed;inset:0;display:grid;place-items:center;background:rgba(15,20,35,.45);z-index:45}
#adminP .adm{background:#fff;border-radius:18px;padding:1em 1.1em;width:min(calc(460px*var(--k)),92vw);box-shadow:var(--sh)}
#adminP h4{margin:0 0 .3em;display:flex;justify-content:space-between;align-items:center;font-size:1.1em}#adminP h4 .x{background:none;font-size:1em}
#adminP small{color:#56677c;display:block;margin-bottom:.7em}
#adminP .admg{display:grid;grid-template-columns:repeat(2,1fr);gap:.5em}
#adminP .admg button{display:flex;gap:.5em;align-items:center;padding:.6em .7em;border-radius:12px;background:#f1f4f8;font-size:1em;text-align:left}
#adminP .admg button b{font-size:.85em}#adminP .admg button.on{outline:3px solid var(--wii);background:#e6f4fd}
#adminP .adr{margin-top:.7em;width:100%;padding:.6em;border-radius:12px;background:#26303d;color:#fff;font-weight:800}#adminP .adr:disabled{opacity:.35}
/* 숨겨진 배너가 상단 버튼(집·여행·미니게임) 뒤로 삐져나와 보이던 문제(1008): 안 보일 땐 완전히 투명 */
#banner:not(.show){opacity:0;visibility:hidden;transition:transform .35s,opacity .25s,visibility 0s .35s}
#banner.show{opacity:1;visibility:visible}
/* 🍙 배 게이지(접속 수 아래) + 목록 막대 */
#hunger{position:fixed;right:max(10px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 2.6em);display:flex;align-items:center;gap:.35em;font-weight:900;font-size:.78em;z-index:6;pointer-events:none}
#hunger i{font-style:normal}#hunger small{min-width:1.6em;text-align:right;color:#56677c;font-size:.9em}
#hunger .hb{width:6.5em;height:.7em;border-radius:99px;background:rgba(255,255,255,.85);box-shadow:var(--sh);overflow:hidden;border:2px solid #fff}
#hunger .hb b{display:block;height:100%;background:linear-gradient(90deg,#ffb84d,#5ccf6a);border-radius:99px;transition:background .3s}
#hunger.low .hb b{background:linear-gradient(90deg,#ff3b3b,#ff7a4d)}#hunger.low small{color:#e23b3b}
#hunger .hw{font-style:normal;background:#ff3b3b;color:#fff;border-radius:99px;padding:.2em .7em;font-size:.95em;white-space:nowrap}#hunger .hw:empty{display:none}
body:has(#hunger:not(.hide)) #tools{top:calc(max(8px,env(safe-area-inset-top)) + 4.5em)}
.who .hgb{display:block;height:3px;border-radius:2px;background:rgba(0,0,0,.08);margin-top:2px;overflow:hidden}.who .hgb b{display:block;height:100%;background:#5ccf6a}.who .hgb.low b{background:#ff3b3b}
#roster.mini .who .hgb{display:none}
/* 🗺 맵 바꾸기(누구나) — 🛠 메뉴와 같은 모양 */
#pPill #bMap{background:linear-gradient(135deg,#2fbf8f,#2f8fd9);color:#fff}
#mapP{position:fixed;inset:0;display:grid;place-items:center;background:rgba(15,20,35,.45);z-index:45}
#mapP .adm{background:#fff;border-radius:18px;padding:1em 1.1em;width:min(calc(460px*var(--k)),92vw);box-shadow:var(--sh)}
#mapP h4{margin:0 0 .3em;display:flex;justify-content:space-between;align-items:center;font-size:1.1em}#mapP h4 .x{background:none;font-size:1em}
#mapP small{color:#56677c;display:block;margin-bottom:.7em;line-height:1.5}
#mapP .admg{display:grid;grid-template-columns:repeat(2,1fr);gap:.5em}
#mapP .admg button{display:flex;gap:.5em;align-items:center;padding:.6em .7em;border-radius:12px;background:#f1f4f8;font-size:1em;text-align:left}
#mapP .admg button b{font-size:.85em}#mapP .admg button.on{outline:3px solid var(--wii);background:#e6f4fd}#mapP .admg button:disabled{opacity:.4}
/* 대기실 제목 줄(탭 숨긴 자리) — 오른쪽 위 🏆 기록표·✕ 버튼이 게임 카드 뒤로 가려지지 않게(1008) */
#pLobby .ptitle{margin:.15em 0 .7em;padding-right:9em;font-size:1.15em;font-weight:900;color:var(--ink);line-height:1.6}
/* 📱 모바일 정리(1008): 친구 목록은 아이콘·이름·배고픔만(상태 문구 숨김)으로 폭 반으로 · 오른쪽 메뉴 버튼 25→38px */
@media (max-height:460px){
  #roster{width:auto;max-width:28vw;gap:3px}
  #roster .who{padding:.15em .45em .15em .2em;gap:.3em}
  #roster .who .st{display:none}
  #roster .who .nm{font-size:.86em}
  #tools button{width:38px;height:38px;font-size:16px}
  #tools{column-gap:7px;row-gap:7px}
}
#mapP .adr{margin-top:.7em;width:100%;padding:.6em;border-radius:12px;background:#26303d;color:#fff;font-weight:800}

/* 💗 사귄 지 N일(HUD 시계 아래) — #next 가 보이면(집 안 등) 목록을 한 줄 더 내림 */
body:has(#next:not(:empty)) #roster{top:calc(max(8px,env(safe-area-inset-top)) + 6.1em)}
#dday{pointer-events:auto;align-self:flex-start;background:linear-gradient(90deg,#ffe3ee,#fff2f7);border:2px solid #ffb3cf;color:#d2477f;border-radius:99px;padding:.18em .75em;font-weight:900;font-size:.82em;box-shadow:var(--sh);white-space:nowrap}
#dday b{font-size:1.08em}#dday small{color:#b46a8a;font-weight:800;font-size:.85em}
/* 🏠 우리 집 버튼(위 가운데) */
#pPill #bHome{font-size:.95em}
@media (max-height:460px){#dday{font-size:.7em;padding:.1em .6em}#roster{top:calc(max(8px,env(safe-area-inset-top)) + 4.9em)}body:has(#next:not(:empty)) #roster{top:calc(max(8px,env(safe-area-inset-top)) + 6.4em)}}