/* STORY-R1: a bounded card; the surrounding world always receives pointer input.
   묶음 AA(DESIGN 14.431) — 카드가 아니라 **위쪽 가운데의 얇은 띠**다. 전에는 첫 입장에 화면 왼쪽 절반(폰)·왼쪽 3분의 1(PC)을 6.5초 덮었고,
   닫히면 도착 안내가 화면 한가운데 아래에서 캐릭터와 몬스터를 가렸다. 이제 둘 다 왼쪽 위 HUD 와 오른쪽 위 미니맵 **사이**의 한 줄 띠이고,
   이야기는 한 줄씩 차례로 떠올랐다 사라진다(story.js `setLines`). 띠 안의 [건너뛰기] 만 누름을 받는다 — 나머지는 게임으로 흘러간다. */
#world-story{position:absolute;z-index:19;top:8px;left:50%;transform:translateX(-50%);
  width:min(560px,calc(100% - 500px));display:none;pointer-events:none;color:#eee4cf}
#world-story.on{display:block}
#world-story .story-card{pointer-events:auto;background:#141b24e6;border:1px solid #4d4536;
  border-left:3px solid #b79b61;box-shadow:2px 3px 0 #070c1299;padding:6px 12px 7px;overflow:hidden}
.story-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
#story-world{font-size:var(--ui-label,12px);color:#c9b48a;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#world-story #story-skip{background:transparent;border:0;border-bottom:1px solid #696253;color:#d4c8ae;
  padding:2px 2px;font-size:var(--ui-label,12px);white-space:nowrap;flex-shrink:0}
#world-story h2,#world-story .story-actions{display:none}
#story-lines{position:relative;min-height:3em;font-size:var(--ui-note,12px);line-height:1.5;margin:0;word-break:keep-all;overflow-wrap:anywhere;white-space:normal}
#story-lines .sl{position:absolute;left:0;right:0;top:0;opacity:0;animation:story-line var(--d,1.5s) ease-in-out var(--s,0s) both}
#story-lines .sl:last-child{animation-name:story-last}
@keyframes story-line{0%{opacity:0;transform:translateY(5px)}10%{opacity:1;transform:none}90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@keyframes story-last{0%{opacity:0;transform:translateY(5px)}10%,100%{opacity:1;transform:none}}
#world-story button:focus-visible{outline:2px solid #f0d59b;outline-offset:3px}
#story-arrival{position:absolute;z-index:12;top:8px;left:50%;transform:translateX(-50%);
  width:min(560px,calc(100% - 500px));display:none;pointer-events:none;
  padding:6px 12px;border-left:3px solid #b79b61;background:#141b24e6;color:#e4dccd;
  font-size:var(--ui-note,12px);line-height:1.5;text-align:left;word-break:keep-all;overflow-wrap:anywhere;
  display:none;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
#story-arrival.on{display:-webkit-box;-webkit-box-orient:vertical}
/* 좁은 가로 폰 — HUD 사이 폭이 줄어도 띠가 380px 아래로 줄지 않게 가운데를 조금 더 쓴다(HUD 글자보다 위에 겹치지 않는 높이다) */
@media (max-width:1000px) and (max-height:520px){
  #world-story,#story-arrival{width:min(420px,calc(100% - 440px));min-width:300px}
}
/* 세로 폰 — 위쪽은 HUD 가 가로로 다 차지한다. 아래 독 위의 얇은 띠로 둔다 */
@media (max-width:760px){
  #world-story,#story-arrival{top:auto;left:8px;right:8px;width:auto;min-width:0;transform:none;bottom:calc(var(--barh,52px) + var(--skillh,0px) + 10px)}
}
@media(prefers-reduced-motion:reduce){
  #story-lines .sl{position:static;display:block;opacity:1;animation:none}
}
.story-help p{line-height:1.9;white-space:pre-line;word-break:keep-all}
.story-help .story-native{color:#c7b795}
@media(prefers-reduced-motion:no-preference){#world-story.on .story-card{animation:story-arrive .3s ease-out}
  #story-arrival.on{animation:story-arrive .25s ease-out}}
@keyframes story-arrive{from{opacity:0}to{opacity:1}}
/* UNI-Q193: new-world hall-of-fame card. Same bounded-card rule as the story card: only the card takes input. */
#hall-card{position:absolute;z-index:18;top:clamp(76px,14vh,128px);right:clamp(12px,3vw,40px);
  width:min(380px,calc(100% - 24px));pointer-events:none;display:none;color:#eee4cf}
#hall-card.on{display:block}
#hall-card .hall-card{pointer-events:auto;background:#171e28f5;border:1px solid #665b49;border-top:3px solid #d4a83c;
  box-shadow:3px 4px 0 #070c12a6,inset 0 0 0 3px #252b34;padding:12px 14px;max-height:calc(100dvh - 160px);overflow:auto}
.hall-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#f0d59b;margin-bottom:6px}
#hall-card .hall-card-head button{background:transparent;border:0;color:#d4c8ae;font-size:18px;line-height:1;padding:4px 8px;min-width:32px;min-height:32px}
#hall-card .tombrow{margin:4px 0;background:#141a22}
.hall-card-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
#hall-card .hall-card-actions button{font:inherit;padding:8px 12px;background:#3a3529;border:1px solid #9f895c;color:#f0dfb8}
#hall-card button:focus-visible{outline:2px solid #f0d59b;outline-offset:3px}
.hallbosses summary{cursor:pointer;padding:5px 2px;color:var(--gold,#d4a83c)}
.hallbosses .kv{padding:3px 2px}
/* A long boss name pushes the holder onto its own line: keep it on the right, like the unwrapped rows. */
.hallrow .kv>span:last-child,.hallbosses .kv>span:last-child{margin-left:auto;text-align:right}
@media(max-width:480px){#hall-card .hall-card{padding:10px 12px}}
@media(prefers-reduced-motion:no-preference){#hall-card.on .hall-card{animation:story-arrive .3s ease-out}}