/* garden like. — UI system
   Quiet and neutral: white surfaces with soft grey inner fills, ink text, and a brushed silver
   for whatever you can press right now or whatever is active. One small corner radius (--r)
   is used for every shape, from cards to buttons to icon tiles. */
:root {
  --bg: #f2f2ef; --surface: #ffffff; --fill: rgba(0,0,0,.045); --fill-2: rgba(0,0,0,.08); --ink: #1d1d1b; --mute: #8a8a85; --line: rgba(0,0,0,.08);
  --silver: rgba(120,126,134,.2); --steel: #7d8288; --silver-soft: rgba(120,126,134,.1);
  --glass: rgba(255,255,255,.72); --blur: blur(12px) saturate(1.2);
  --shadow: 0 6px 20px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --display: "Inter Tight", "Pretendard Variable", Pretendard, sans-serif;
  --body: Inter, "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --mono: "Space Mono", "Pretendard Variable", Pretendard, monospace;
  --r: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--body);
  display: grid; grid-template-columns: 1fr 360px; overflow: hidden; -webkit-tap-highlight-color: transparent; }
body:not(.mode-entry) { grid-template-columns: 1fr; }
body:not(.mode-entry) #maker { display: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
button .ico { margin-right: 6px; }

#stage { position: relative; min-height: 0; overflow: hidden; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* ---------- top bar ---------- */
#topbar { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; z-index: 3; }
.lefttop { pointer-events: auto; display: flex; align-items: center; gap: 10px; height: 38px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r); padding: 0 6px 0 14px; box-shadow: var(--shadow); white-space: nowrap; }
.lefttop .title { pointer-events: auto; font: 500 12.5px var(--body); color: var(--ink); border: 0; background: none; padding: 0; cursor: pointer; white-space: nowrap; }   /* also opens the info card */
.lefttop .title b { font-family: var(--display); font-weight: 700; margin-left: 5px; }
#infoBtn { pointer-events: auto; height: 26px; border: 0; background: var(--fill); border-radius: var(--r); padding: 0 10px; font-size: 11.5px; font-weight: 600; }
#infoBtn:hover, #infoBtn[aria-expanded="true"] { background: var(--silver); }
#place { font-size: 12.5px; color: var(--mute); padding: 0 8px 0 10px; border-left: 1px solid var(--line); }
#hint { position: absolute; top: 62px; left: 20px; font-size: 11.5px; color: var(--mute); pointer-events: none; z-index: 3; }
#stats { display: none; }
html.debug #stats { display: block; position: absolute; left: 16px; bottom: 22px; font: 10px var(--mono); color: var(--mute); z-index: 2; pointer-events: none; }

#room { display: flex; align-items: center; gap: 10px; height: 38px; pointer-events: auto; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r); padding: 0 5px 0 14px; font-size: 12px; box-shadow: var(--shadow); }
body.mode-entry #room { display: none; }
#bgmBtn { border: 0; background: none; font-size: 12px; font-weight: 500; padding: 0; display: inline-flex; align-items: center; white-space: nowrap; }
#bgmBtn .ico { width: 16px; height: 16px; }
#vol { width: 74px; accent-color: var(--steel); }
#count { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mute); white-space: nowrap; }
#count .ico { width: 14px; height: 14px; margin: 0; }
#invite { border: 0; background: var(--silver); color: var(--ink); border-radius: var(--r); width: 28px; height: 28px; padding: 0; display: grid; place-items: center; flex: none; }
#invite .ico { width: 15px; height: 15px; margin: 0; }
#shotBtn { border: 0; background: none; color: var(--ink); width: 28px; height: 28px; padding: 0; display: grid; place-items: center; flex: none; border-radius: var(--r); }
#shotBtn:hover { background: var(--fill); }
#shotBtn .ico { width: 16px; height: 16px; margin: 0; }
#invite:hover { filter: brightness(1.08); }

/* ---------- floor picker ---------- */
#elevator { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 2px; width: 172px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r); padding: 6px; box-shadow: var(--shadow); z-index: 3; }
body.mode-building #elevator, body.mode-floor #elevator { display: flex; }
#elevator button { position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; column-gap: 8px; border: 0; background: none; padding: 0 8px 0 4px; height: 40px; border-radius: var(--r); text-align: left; }
#elevator .hd { font-size: 11px; font-weight: 600; color: var(--mute); text-align: center; padding: 3px 0 5px; }
#elevator .n { font: 700 15px/1 var(--display); text-align: center; }   /* floor numbers centred in their own column */
#elevator .t { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#elevator button:hover { background: var(--fill); }
#elevator .on, #elevator .on:hover { background: var(--silver); color: var(--ink); }
#elevator .on .t { color: var(--ink); }
#elevator .locked { opacity: .4; cursor: not-allowed; }
#elevator .locked:hover { background: none; }
#elevator .out { margin-top: 4px; }
#elevator .out::before { content: ''; position: absolute; left: 6px; right: 6px; top: -3px; border-top: 1px solid var(--line); }
#elevator .out .ico { width: 17px; height: 17px; margin: 0; justify-self: center; }
#elevator.pulse { animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(125,130,136,0) } 50% { box-shadow: var(--shadow), 0 0 0 6px rgba(125,130,136,.35) } }

/* ---------- labels in the scene ---------- */
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tag { position: absolute; z-index: 1; transform: translate(-50%, calc(-100% - 10px));   /* a little above the head so it never covers the character */ white-space: nowrap; text-align: center; pointer-events: auto; cursor: pointer; }
.tag b { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.28); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r); padding: 2px 8px; }   /* name on a see-through box */
.tag small { display: none; }
/* hovering someone you can talk to: a speech bubble with "..." pops up above their name */
.tag::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 3px); width: 38px; height: 32px; margin-left: -19px; opacity: 0; transform: translateY(4px) scale(.8); transition: opacity .12s, transform .12s;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 32'%3E%3Cpath d='M6 1h26a5 5 0 015 5v13a5 5 0 01-5 5H18l-7.5 6.5V24H6a5 5 0 01-5-5V6a5 5 0 015-5z' fill='%23fff'/%3E%3Ccircle cx='12' cy='12.5' r='2.3' fill='%2355554f'/%3E%3Ccircle cx='19' cy='12.5' r='2.3' fill='%2355554f'/%3E%3Ccircle cx='26' cy='12.5' r='2.3' fill='%2355554f'/%3E%3C/svg%3E"); }
.tag.hover::before, .tag.target::before { opacity: 1; transform: none; }
.tag.target::before { animation: bob 1s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

/* speech bubbles: white card with a soft shadow and a tail; the speaker's name in small type on top */
.bubble { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 22px)); background: var(--surface); border-radius: var(--r);
  padding: 8px 14px 10px; font-size: 14.5px; font-weight: 500; line-height: 1.45; text-align: center; z-index: 3;
  white-space: normal; max-width: min(280px, 72vw); width: max-content; word-break: keep-all;
  box-shadow: 0 6px 18px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.04);
  animation: pop .2s cubic-bezier(.2,1.3,.5,1); transform-origin: 50% 100%; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--surface); transform: rotate(45deg); border-radius: 0 0 3px 0; }
.bubble .who { display: block; font-size: 10.5px; font-weight: 700; color: var(--mute); margin-bottom: 1px; }
.bubble.crew .who { color: var(--steel); }
@keyframes pop { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
.note { position: absolute; animation: rise 1.4s ease-out forwards; }
.note .ico { width: 22px; height: 22px; margin: 0; }
@keyframes rise { from { opacity: 1; transform: translate(-50%, 0) } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), -70px) } }

/* reactions floating up from a grooving character */
.react { position: absolute; pointer-events: none; will-change: transform; }   /* moved and scaled every frame by stepReacts() */
.react .emo { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
#reacts { position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); display: none; gap: 4px; padding: 5px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r); box-shadow: var(--shadow); z-index: 4; }
#reacts button { width: 42px; height: 42px; border: 0; border-radius: var(--r); background: var(--fill); display: grid; place-items: center; transition: transform .12s, background .12s; }
#reacts button:hover { background: var(--silver-soft); transform: translateY(-2px); }
#reacts button:active { transform: scale(.9); }
#reacts .emo { width: 28px; height: 28px; }

/* markers over things you can use: white pill, grey icon disc, a tail pointing at the object */
.marker { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 7px)); pointer-events: auto; border: 0; display: flex; align-items: center; gap: 7px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--ink); border-radius: var(--r); padding: 4px 13px 4px 4px; white-space: nowrap; box-shadow: var(--shadow); animation: bob 1.8s ease-in-out infinite; }
.marker .ic { width: 28px; height: 28px; display: grid; place-items: center; background: var(--fill); border-radius: var(--r); }
.marker .ic .ico { width: 16px; height: 16px; margin: 0; }
.marker .tx { font-size: 12.5px; font-weight: 600; }
.marker:hover .ic { background: var(--silver-soft); color: var(--steel); }
.marker.near { background: rgba(222,224,228,.9); color: var(--ink); }
.marker.near .ic { background: rgba(255,255,255,.6); color: var(--ink); }
.marker.floor { padding: 5px 13px 5px 5px; gap: 9px; animation: none; transform: translate(-100%, -50%); }
.marker.floor b { font: 700 13px/1 var(--display); background: var(--fill); border-radius: var(--r); padding: 6px 8px; }
.marker.floor .tx { font-weight: 500; }
.marker.floor:hover { background: var(--silver); color: var(--ink); }
.marker.floor:hover b { background: rgba(255,255,255,.6); }
.marker.floor.locked { opacity: .55; }

#tip { position: absolute; z-index: 4; pointer-events: none; background: var(--ink); color: #fff; padding: 7px 12px; border-radius: var(--r); font-size: 12px; display: none; }
#tip b { font-weight: 700; margin-right: 6px; }

/* ---------- the action you can take right now ---------- */
#prompt { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 3; display: none; }
#prompt button { display: inline-flex; align-items: center; border: 0; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r); padding: 5px 7px 5px 5px; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow); }
#prompt button .ico { width: 34px; height: 34px; padding: 8px; margin-right: 10px; border-radius: var(--r); background: var(--silver); color: var(--ink); }
#prompt button:hover { background: var(--fill); }

/* ---------- choices: inline pills, or a card of rows with a title ---------- */
#choices { position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); display: none; gap: 8px; z-index: 4; }
#choices .opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#choices:not(.picker) .opts button { display: inline-flex; align-items: center; border: 0; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--r); padding: 11px 18px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow); }
#choices:not(.picker) .opts button:first-child { background: rgba(222,224,228,.9); color: var(--ink); }
#choices.picker { flex-direction: column; align-items: stretch; gap: 4px; background: var(--surface); border-radius: var(--r); padding: 16px 8px 6px; width: min(340px, 92%); bottom: 90px; box-shadow: var(--shadow); }
#choices.picker > b { font: 700 17px/1.2 var(--display); padding: 0 10px 8px; }
#choices.picker .opts { flex-direction: column; gap: 2px; }
#choices.picker .opts button { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  border: 0; border-radius: var(--r); padding: 10px; background: none; }
#choices.picker .opts button:hover { background: var(--fill); }
#choices.picker .opts button .ico { grid-row: 1 / 3; width: 36px; height: 36px; padding: 9px; margin: 0; border-radius: var(--r); background: var(--fill); }
#choices.picker .opts button:hover .ico { background: var(--silver); color: var(--ink); }
#choices.picker .opts .l { font-size: 15px; font-weight: 600; }
#choices.picker .opts small { font-size: 12px; color: var(--mute); }
#choices.picker .cancel { border: 0; border-top: 1px solid var(--line); background: none; color: var(--mute); font-size: 12.5px; padding: 11px; margin-top: 4px; }

/* ---------- bottom action bar ---------- */
#actions { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: 5px; border-radius: var(--r); box-shadow: var(--shadow); z-index: 3; }
body.mode-building #actions { display: none; }
#actions button { display: inline-flex; align-items: center; border: 0; background: transparent; font-size: 13px; font-weight: 500; padding: 9px 13px; border-radius: var(--r); white-space: nowrap; }
#actions button:hover { background: var(--fill); }
#sipBtn .n { font: 600 10px var(--body); min-width: 16px; padding: 1px 4px; margin-left: 6px; border-radius: var(--r); background: var(--fill); }
#actions button:active { background: var(--silver); color: var(--ink); }
#say { border: 0; background: var(--fill); color: var(--ink); border-radius: var(--r); padding: 9px 15px; font: inherit; font-size: 13px; width: 190px; }
#say::placeholder { color: var(--mute); }
body.mode-entry #say, body.mode-entry #sayBtn { display: none; }
#sayBtn { flex: none; width: 36px; height: 36px; margin-left: 2px; border: 0; border-radius: var(--r); background: var(--silver); color: var(--ink); display: grid; place-items: center; padding: 0; }
#sayBtn .ico { width: 17px; height: 17px; margin: 0; }

/* ---------- cards ---------- */
.sheet { position: absolute; z-index: 4; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); display: none; }
.sheet .close { position: absolute; top: 12px; right: 12px; border: 0; background: var(--fill); border-radius: var(--r); padding: 5px 11px; font-size: 11.5px; color: var(--mute); z-index: 1; }
.sheet .close:hover { background: var(--fill-2); color: var(--ink); }
.sheet button.ghost { background: var(--fill); color: var(--ink); }

/* now playing: one slim row (play, title, equalizer + progress, track controls) */
#player { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); left: 16px; bottom: 84px; width: 300px; padding: 3px; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
#player #play { width: 20px; height: 20px; border-radius: var(--r); border: 0; background: var(--silver); color: var(--ink); flex: none; display: grid; place-items: center; }
#player #play .ico { width: 11px; height: 11px; margin: 0; }
#player .eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
#player .eq i { width: 2px; height: 100%; border-radius: 1px; background: var(--steel); opacity: .55; transform-origin: 50% 100%; transform: scaleY(.18); transition: transform .08s linear; }
/* the title is the toggle for the details */
#player .title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 2px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
#player .title b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#player .title::after { content: ''; flex: none; width: 5px; height: 5px; margin: -3px 2px 0 auto; border: solid var(--steel); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
#player.open .title::after { transform: rotate(-135deg); margin-top: 3px; }
#player .badge { display: none; flex: none; font-size: 10.5px; font-weight: 600; color: var(--steel); }
#player[data-track="dreams"] .badge, #player.open .badge { display: inline; }   /* "15초 미리듣기" always shows */
#player .detail { display: none; flex-basis: 100%; padding: 2px 4px 4px; }
#player.open .detail { display: block; }
#player .detail small { display: block; font-size: 11px; color: var(--mute); margin-bottom: 4px; }
#player .d2 { display: flex; align-items: center; gap: 8px; }
#player #seek { flex: 1; min-width: 0; height: 14px; margin: 0; accent-color: var(--steel); }
#player #time { font: 10.5px var(--mono); color: var(--mute); white-space: nowrap; }
#player .djrow { display: none; gap: 2px; flex: none; }
#player .djrow button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r); color: var(--ink); }
#player .djrow button:hover { background: var(--fill); }
#player .djrow .ico { width: 12px; height: 12px; margin: 0; }
body.cine:not(.keepplayer) #player { display: none !important; }

/* garden like. info: same width as the pills above it */
#info { max-height: calc(100% - 72px); overflow-y: auto; left: 16px; top: 60px; width: 340px; padding: 18px 16px 12px; z-index: 6; }
#info .badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--steel); background: var(--silver-soft); border-radius: var(--r); padding: 4px 10px; }
#info .logo { display: block; height: 26px; margin: 14px 2px 0; }
#info p { margin: 12px 2px 12px; font-size: 13px; line-height: 1.65; color: #4a4a46; }
#info .go { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); border-radius: var(--r); padding: 9px 10px; font-size: 14px; font-weight: 600; background: var(--fill); margin-top: 6px; }
#info .go .ico { width: 32px; height: 32px; padding: 7px; margin: 0; border-radius: var(--r); background: var(--silver); color: var(--ink); }
#info .go::after { content: '→'; margin-left: auto; color: var(--mute); }
#info .go:hover { background: var(--silver-soft); }

/* first-visit guide */
#guide { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, 90%); padding: 20px 16px 14px; }
#guide > b { display: block; font: 700 18px/1.25 var(--display); margin: 0 4px 10px; }
#guide ul { margin: 0 0 14px; padding: 0; }
#guide li { list-style: none; display: flex; align-items: center; gap: 12px; font-size: 13.5px; line-height: 1.4; padding: 8px 4px; }
#guide li .ico { width: 30px; height: 30px; padding: 7px; margin: 0; border-radius: var(--r); background: var(--fill); color: var(--steel); }
.touch-only { display: none !important; }
@media (hover: none) and (pointer: coarse) { #guide li.touch-only { display: flex !important; } }
/* never stack the guide under another card */
body:has(#gbook[style*="grid"], #modal[style*="grid"], #shot[style*="block"], #info[style*="block"], #song[style*="block"], #choices[style*="flex"]) #guide { display: none !important; }
#drinkTip { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, 90%); padding: 20px 18px 14px; }
#drinkTip > b { display: block; font: 700 17px/1.3 var(--display); margin-bottom: 10px; }
#drinkTip p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; }
#drinkTip p.sub { font-size: 12.5px; color: var(--mute); }
#drinkTip .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--r); background: var(--fill); font-weight: 600; font-size: 12.5px; vertical-align: 1px; }
#drinkTip .chip .ico { margin: 0; width: 15px; height: 15px; }
#drinkTip .chip .n { font: 600 10px var(--body); padding: 1px 4px; border-radius: var(--r); background: var(--surface); }
#drinkTip .never { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); margin: 12px 2px 12px; cursor: pointer; }
#drinkTip .never input { width: 16px; height: 16px; margin: 0; accent-color: var(--steel); }
#drinkTipOk { width: 100%; border: 0; border-radius: var(--r); padding: 12px; background: var(--silver); color: var(--ink); font-weight: 600; }
#guideOk { width: 100%; border: 0; border-radius: var(--r); padding: 12px; background: var(--silver); color: var(--ink); font-weight: 600; }


/* dance moves */
#dancebar { left: 50%; bottom: 80px; transform: translateX(-50%); padding: 16px 12px 12px; }
#dancebar b { display: block; font: 700 15px/1.25 var(--display); margin: 0 60px 12px 4px; }
#dancebar .row { display: flex; gap: 6px; }
#dancebar .row button { border: 0; border-radius: var(--r); padding: 12px 14px; font-size: 13.5px; font-weight: 600; background: var(--fill); white-space: nowrap; }
#dancebar .row button:hover { background: var(--silver-soft); color: var(--steel); }
#dancebar .wide { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 6px; border: 0; border-radius: var(--r); padding: 12px; background: var(--silver); color: var(--ink); font-size: 13px; font-weight: 600; }

/* new-song feedback */
#song { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 92%); padding: 20px 16px 16px; }
#song > b { display: block; font: 700 20px/1.25 var(--display); margin: 0 70px 0 4px; }
#song > p { font-size: 13px; color: var(--mute); line-height: 1.6; margin: 6px 4px 14px; }
#song .likes { display: flex; gap: 6px; margin-bottom: 8px; }
#song .likes button, #songSend, #gbSend { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r); padding: 11px 16px; background: var(--silver); color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap; }
#song .likes button { flex: 1; }
#song .likes #likeBtn { background: var(--fill); color: var(--ink); }
#song .likes #likeBtn.on { background: var(--silver); color: var(--ink); }
#likeBtn .ico { color: var(--steel); }
#likeBtn.on .ico { color: var(--ink); }
#likeCount { margin-left: 6px; }
#songErr, #gbErr { display: block; min-height: 16px; margin-top: 6px; color: #b3412b; font-size: 12px; }
#songList { list-style: none; margin: 4px 0 0; padding: 0; max-height: 220px; overflow-y: auto; font-size: 13px; }
#songList li { padding: 9px 4px; border-top: 1px solid var(--line); }
#songList li b { margin-right: 6px; }
#songList li.empty { color: var(--mute); }

/* snapshot: a quick white flash, then the card with the picture */
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 9; }
#flash.on { animation: flash .45s ease-out; }
@keyframes flash { from { opacity: .85 } to { opacity: 0 } }
#shot { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, 92%); max-height: calc(100% - 24px); overflow-y: auto; padding: 18px 14px 14px; z-index: 7; }
#shot > b { display: block; font: 700 18px/1.25 var(--display); margin: 0 70px 12px 4px; }
#shotImg { display: block; height: min(58vh, 560px); aspect-ratio: 9 / 16; max-width: 100%; object-fit: contain; margin: 0 auto; border-radius: var(--r); background: var(--fill); }   /* the 1080x1920 picture, scaled to fit */
#shot .row { display: flex; gap: 6px; margin-top: 10px; }
#shot .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--r); padding: 11px 14px; background: var(--silver); color: var(--ink); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; cursor: pointer; }
#shot .btn.ghost { background: var(--fill); }
#shot .btn .ico { width: 15px; height: 15px; margin: 0; }

/* guestbook + image modal */
#modal, #gbook { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 6; display: none; place-items: center; }
#modal .card, #gbook .card { position: relative; background: var(--surface); border-radius: var(--r); padding: 12px; }
#modal .card { max-width: min(640px, 90%); }
#gbook .card { width: min(680px, 94%); }
#modal img { display: block; width: 100%; border-radius: var(--r); }
#modal .close, #gbook .close { position: absolute; top: -38px; right: 0; border: 0; background: var(--surface); border-radius: var(--r); padding: 7px 13px; font-size: 12px; }
#gbCanvas { display: block; width: 100%; height: auto; border-radius: var(--r); }
.gbpager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--mute); }
.gbpager button { border: 0; background: var(--fill); border-radius: var(--r); padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.gbpager button:disabled { opacity: .35; cursor: default; }
#songMore { display: block; width: 100%; margin-top: 6px; border: 0; border-radius: var(--r); padding: 9px; font-size: 12.5px; font-weight: 600; }
.gbform { margin-top: 12px; }
.gbform label { font-size: 12px; color: var(--mute); }
#gbStickers { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
#gbStickers button { width: 38px; height: 38px; border-radius: var(--r); border: 0; background: var(--fill); display: grid; place-items: center; }
#gbStickers button.on { background: var(--silver-soft); box-shadow: inset 0 0 0 2px var(--steel); }
#gbStickers .stk { width: 22px; height: 22px; }
.gbrow { display: flex; gap: 6px; }
.gbrow input { flex: 1; min-width: 0; }
#gbZoom { position: absolute; inset: 12px 12px auto 12px; aspect-ratio: 2 / 1; display: none; place-items: center; background: rgba(0,0,0,.3); border-radius: var(--r); cursor: pointer; }
/* admin only: hide / show buttons */
.adminbtn { display: none; }
html.admin .adminbtn { display: inline-flex; align-items: center; border: 0; border-radius: var(--r); background: #fff; color: #b3412b; font-size: 12px; font-weight: 600; padding: 6px 10px; cursor: pointer; }
html.admin #gbHide { position: relative; z-index: 1; margin-top: 10px; box-shadow: var(--shadow); }
html.admin #songList li { display: flex; align-items: center; gap: 6px; }
html.admin #songList li .adminbtn { margin-left: auto; background: var(--fill); padding: 4px 8px; font-size: 11px; }
#songList li.hid { opacity: .4; }
#gbZoom .paper { width: min(320px, 70%); padding: 22px 22px 18px; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,.25); transform: rotate(-1.5deg); }
#gbZoom .st .stk { width: 54px; height: 54px; }
#gbZoom .st::after { content: attr(data-text); font-size: 40px; }
#gbZoom p { margin: 10px 0 8px; font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--ink); word-break: keep-all; }
#gbZoom small { color: #6f675d; font-size: 14px; }
#gbZoom .hint { position: absolute; bottom: 8px; font-size: 11px; color: #fff; pointer-events: none; }

#toast { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 13px;
  padding: 9px 16px; border-radius: var(--r); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5; white-space: nowrap; }
#fade { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .28s; z-index: 7; }

/* ---------- entry: dress up before going in ---------- */
#maker { background: var(--surface); overflow-y: auto; padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); }
#maker h2 { margin: 0 0 8px; font: 700 24px/1.2 var(--display); letter-spacing: -.03em; white-space: nowrap; }
#maker > p { margin: 0 0 20px; font-size: 13px; color: var(--mute); line-height: 1.55; }
/* outfit: a row of tabs, then the open tab's choices (one or two rows) */
#tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 14px 0 10px; }
#tabs::-webkit-scrollbar { display: none; }
#tabs button { flex: none; border: 0; background: none; border-radius: var(--r); padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--mute); }
#tabs button:hover { color: var(--ink); }
#tabs button.on { background: var(--silver); color: var(--ink); }
#options { min-height: 96px; }   /* the same height for every tab, so the panel doesn't jump */
#options .row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px 2px; margin-bottom: 6px; }
#options .row::-webkit-scrollbar { display: none; }
#options .rl { flex: none; font-size: 12px; color: var(--mute); margin-right: 4px; }
.chips button { flex: none; border: 0; background: var(--fill); border-radius: var(--r); padding: 10px 16px; font-size: 13.5px; font-weight: 500; }
.chips button:hover { background: var(--fill-2); }
.chips button.on { background: var(--silver); color: var(--ink); }
.swatches button { flex: none; width: 34px; height: 34px; border-radius: var(--r); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.swatches button.on { box-shadow: 0 0 0 2px var(--steel); }
.nickrow { display: flex; gap: 6px; }
.nickrow input { flex: 1; min-width: 0; }
#nickDice { flex: none; display: inline-flex; align-items: center; border: 0; background: var(--fill); border-radius: var(--r); padding: 0 13px; font-size: 13px; font-weight: 600; }
#nickDice:hover { background: var(--silver-soft); color: var(--steel); }
#nickDice .ico { width: 16px; height: 16px; }
input[type=text] { width: 100%; border: 0; border-radius: var(--r); padding: 11px 13px; font: inherit; font-size: 14px; background: var(--fill); color: var(--ink); }
input[type=text]:focus { outline: 2px solid var(--steel); outline-offset: 0; background: var(--surface); }
/* nickname: just text on a transparent field, with a hairline underneath */
/* the name field: a label and a faint fill, so it reads as a box you can type in */
.nlabel { display: block; font-size: 12px; font-weight: 600; color: var(--mute); margin: 0 0 6px 2px; }
#nick { background: var(--fill); border-radius: var(--r); padding: 10px 12px; font-size: 16px; font-weight: 600; border: 1px solid transparent; }
#nick:focus { outline: 0; background: var(--surface); border-color: var(--steel); }
#enter { position: relative; width: 100%; margin-top: 8px; border: 0; border-radius: var(--r); padding: 16px 56px 16px 18px; text-align: left; font: 700 16px/1.2 var(--display); background: #52ec64; color: var(--ink); }   /* the one green: the way in */
#enter::after { content: '→'; position: absolute; right: 8px; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; border-radius: var(--r); background: rgba(255,255,255,.6); font-size: 16px; }
#enter:hover { filter: brightness(1.04); }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  /* dressing up on a phone/tablet: the meadow fills the screen and the panel is a glass sheet over its bottom */
  body.mode-entry { grid-template-columns: 1fr; grid-template-rows: 100%; }
  body.mode-entry #maker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 62%; overflow-y: auto;
    background: rgba(255,255,255,.8); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.08);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  body.mode-entry #maker h2 { font-size: 17px; margin: 0 0 6px; }
  body.mode-entry #maker > p { display: none; }
  body.mode-entry #tabs { margin: 8px -4px 6px; }
  body.mode-entry #options { min-height: 92px; }
  /* the try-out buttons sit on the sheet, right of its title, so they never cover your character */
  body.mode-entry #actions { position: fixed; z-index: 6; top: calc(100% - var(--sheet, 300px) + 8px); bottom: auto !important; left: auto !important; right: 10px !important; transform: none !important;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0; gap: 0; }
  body.mode-entry #actions button { padding: 8px 9px; }
  body.mode-entry #maker h2 { padding-right: 160px; }
  #elevator { right: 10px; width: 54px; padding: 4px; }
  #elevator button { grid-template-columns: 1fr; padding: 0; height: 38px; }
  #elevator .t { display: none; }
  #elevator .n { min-width: 0; font-size: 14px; }
  #elevator .out .ico { margin: 0; }
  #player { left: 10px; right: 10px; width: auto; bottom: 76px; }
  #prompt { bottom: 76px; }
  #toast { white-space: normal; width: 86%; text-align: center; border-radius: var(--r); }
  #actions button { padding: 9px 10px; font-size: 12px; }
  .marker .tx { display: none; }
  .marker { padding: 4px; }
  .marker.floor { padding: 5px 12px 5px 5px; }
  .marker.floor .tx { display: inline; font-size: 11px; }
  /* the player spans the width here, so whatever sits above the action bar moves up over it */
  body:is(:not(.cine), .keepplayer):has(#player[style*="flex"]) #prompt { bottom: 98px; }
  body:is(:not(.cine), .keepplayer):has(#player[style*="flex"]) #choices:not(.picker) { bottom: 154px; }
  body:is(:not(.cine), .keepplayer):has(#player[style*="flex"]) #choices.picker { bottom: 98px; }
  body:is(:not(.cine), .keepplayer):has(#player.open[style*="flex"]) #prompt { bottom: 142px; }   /* details open: move up again */
}
@media (max-width: 600px) {
  #place, #hint, .lefttop .long { display: none; }
  .lefttop, #room { height: 34px; }
  .lefttop { padding: 0 4px 0 12px; gap: 8px; }
  .lefttop .title b { margin-left: 0; }
  #infoBtn { display: none; }   /* phones: tap "garden like." for the info card */
  .lefttop { padding: 0 12px; }
  #info { top: 56px; left: 12px; right: 12px; width: auto; }
  #room { gap: 7px; padding: 0 4px 0 10px; }
  #vol { display: none; }
  #bgmBtn span { display: none; }
  #count { font-size: 10.5px; }
  #count .rn { display: none; }
  #elevator { top: 40%; right: 8px; width: 46px; }
  #elevator button { height: 34px; }
  #elevator .n { font-size: 13px; }
  body.cine #elevator { display: none; }   /* close-ups get the whole screen; each has its own back button */
  .marker.floor { display: none; }         /* the floor list on the right already has every floor */
  body.mode-entry #actions { left: 50%; right: auto; transform: translateX(-50%); }
  body.mode-entry .tag b { font-size: 10px; padding: 1px 5px; }   /* five names side by side on a narrow screen */
  #actions { left: 8px; right: 8px; transform: none; bottom: calc(10px + env(safe-area-inset-bottom)); }
  #actions button { padding: 9px 10px; font-size: 0; }   /* icons only on phones, so 한마디 gets the room */
  #actions button .ico { width: 19px; height: 19px; margin: 0; }
  #drinkTip .chip span { display: none; }   /* phones show the 마시기 button as icon + count, so the tip does too */
  #say { flex: 1; width: auto; min-width: 0; }
  #prompt { bottom: 70px; }
  #prompt, #player, #reacts { margin-bottom: env(safe-area-inset-bottom); }
  #player { bottom: 63px; }   /* sits just above the action bar */
  /* reactions sit above the prompt ("그루브 그만하기"), which sits above the player when it shows */
  #reacts { bottom: 122px; }
  body:is(:not(.cine), .keepplayer):has(#player[style*="flex"]) #reacts { bottom: 150px; }
  body:is(:not(.cine), .keepplayer):has(#player.open[style*="flex"]) #reacts { bottom: 194px; }
  .marker.near { display: none !important; }   /* the prompt at the bottom already offers it; the bubble would cover you */
  #reacts button { width: 38px; height: 38px; }
}
/* touch screens: 16px text in fields so iOS doesn't zoom the page in when you type, and no double-tap zoom */
@media (hover: none) and (pointer: coarse) {
  input[type=text], #say { font-size: 16px; }
}
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
/* touch joystick, bottom-left above the action bar: phones only, and only while you can walk.
   It is round because it is a stick, the one shape here that isn't a 6px box. */
#joy { display: none; position: absolute; left: 14px; bottom: 124px; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(0,0,0,.05); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 4px 14px rgba(0,0,0,.05); z-index: 3; touch-action: none; -webkit-user-select: none; user-select: none; }
#joy i { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 8px rgba(0,0,0,.1); pointer-events: none; }
#joy.on i { background: rgba(255,255,255,.85); }   /* a little more solid while you hold it */
@media (hover: none) and (pointer: coarse) {
  body.mode-floor:not(.cine) #joy { display: block; }
  body:is(:not(.cine), .keepplayer):has(#player[style*="flex"]) #joy { bottom: 152px; }        /* stays above the prompt over the player */
  body:is(:not(.cine), .keepplayer):has(#player.open[style*="flex"]) #joy { bottom: 196px; }
  body:has(#choices[style*="flex"], #dancebar[style*="block"], #song[style*="block"], #gbook[style*="grid"], #shot[style*="block"], #modal[style*="grid"], #info[style*="block"]) #joy { display: none; }   /* any open card hides the stick */
}
@media (hover: none) and (pointer: coarse) and (min-width: 601px) { #joy { left: 20px; bottom: 140px; } }

/* a choice card replaces the prompt under it (same action), so the two never stack */
body:has(#choices[style*="flex"]) #prompt { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .marker, .tag.target::before, .bubble, #elevator.pulse { animation: none; }
}