/* 숙소 (dorm) — public/js/ui/dorm.js. Sizes are stage px on the 1280×720 stage (the room is 1280×632). */
.screen-dorm { background: #6b4526; }

/* top bar: counts between the title and the wallet */
.dorm-sum { display: flex; gap: 10px; }
.dorm-sum-chip { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px; background: #fff; border: 3px solid var(--ink); border-radius: 999px; font-size: 20px; font-weight: 900; white-space: nowrap; }
.dorm-sum-chip b { font-size: 24px; }
.dorm-sum-chip.exhausted b { color: #e03a3a; }
.dorm-sum-chip.tired b { color: #f08a1c; }
.dorm-sum-chip.full b { color: #2fb34a; }

/* the room: background art shows its floor from y ≈ 295; two rows of 7 stand on it */
.dorm-room { position: relative; flex: 1; overflow: hidden; background: #a8743f center bottom / cover no-repeat; }
.dorm-room::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(40, 20, 5, .22), transparent 35%); pointer-events: none; }
/* (632 - 60 - 48) / 2 = 262 per row; a slot needs 234 (plate 98 with the 쓰담 progress + sprite 136), 248 with a two-line name, plus room for the bubble */
.dorm-floor { position: absolute; top: 0; bottom: 0; left: 84px; right: 84px; padding: 60px 0 48px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }

.dorm-unit { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.dorm-unit:active { cursor: grabbing; }
.dorm-unit:focus-visible { outline: 4px dashed #fff; outline-offset: -2px; border-radius: 18px; }

/* name, 기력 bar, 쓰담 progress and state above the head; 154 of the slot's 159 px wide */
.dorm-plate { position: relative; z-index: 2; width: 154px; padding: 3px 4px 5px; background: rgba(255, 246, 223, .95); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 rgba(43, 26, 15, .35); text-align: center; line-height: 1.15; }
.dorm-name { display: block; font-size: 19px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* too wide for one line (dorm.js fitName): two lines in a smaller font, broken between words; `tight` (still a
   third line, e.g. 방주 기동 PROTOCOL:DOOMSDAY) may break inside words. The plate grows by the second line. */
.dorm-name.long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 16px; line-height: 1.12; white-space: normal; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere; }
.dorm-name.tight { word-break: normal; line-break: anywhere; }
.dorm-bar { position: relative; height: 22px; margin: 2px 0 3px; background: #6b4a2e; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; }
.dorm-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#9ef58a, #35bb3a); transition: width .4s; }
.dorm-count { position: relative; display: block; font-size: 17px; line-height: 16px; font-weight: 900; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.dorm-state { display: flex; align-items: center; justify-content: center; gap: 5px; height: 24px; font-size: 18px; font-weight: 900; white-space: nowrap; }
.dorm-label { padding: 0 9px; border-radius: 999px; color: #fff; background: #2fb34a; }
[data-state='exhausted'] .dorm-label { background: #e03a3a; }
[data-state='exhausted'] .dorm-bar > i { background: linear-gradient(#ff9a8a, #e03a3a); }
[data-state='tired'] .dorm-label { background: #f08a1c; }
[data-state='tired'] .dorm-bar > i { background: linear-gradient(#ffd27a, #f08a1c); }
/* strokes toward the next +1 (paw, thin bar, n/petsPerPoint); none at max */
.dorm-pets { display: flex; align-items: center; gap: 4px; height: 16px; margin: 0 2px 2px; font-size: 15px; font-weight: 900; line-height: 1; color: #c2407f; font-variant-numeric: tabular-nums; }
.dorm-pets .ico { flex: none; width: 16px; height: 16px; }
.dorm-pets-bar { position: relative; flex: 1; height: 10px; background: #ecd9c4; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.dorm-pets-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffb3d6, #f0609f); transition: width .15s; }
.dorm-pets b { flex: none; min-width: 36px; text-align: right; }
[data-state='full'] .dorm-pets { display: none; }

/* the character */
.dorm-pet { position: relative; flex: none; width: 136px; height: 136px; margin-top: 2px; }
.dorm-pet::before { content: ''; position: absolute; left: 16%; right: 16%; bottom: -6px; height: 18px; background: rgba(60, 30, 10, .35); border-radius: 50%; }
.dorm-sprite { position: absolute; inset: 0; transform-origin: 50% 100%; animation: dormIdle 2.6s ease-in-out infinite; }
.dorm-sprite .portrait-box { width: 100%; height: 100%; }
/* the front-facing sheet dorm/<id>.webp: 4×2 cells of 192×256 shown 120×160; --row/--col pick the cell and --foot
   (the empty part of the row's cells below the feet, a fraction of the cell) puts the feet on the box bottom */
.dorm-look { position: absolute; left: 50%; bottom: calc(var(--foot, 0) * -160px); width: 120px; height: 160px; margin-left: -60px; background: no-repeat 0 0 / 400% 200%; background-position: calc(var(--col, 0) * 100% / 3) calc(var(--row, 0) * 100%);
  /* hides the few pixels some sheets let a neighbouring frame reach across a cell line (not the bottom: feet sit there) */
  clip-path: inset(2px 3px 0 3px); }
@keyframes dormIdle { 50% { transform: translateY(-6px); } }
[data-state='exhausted'] .dorm-sprite { animation-duration: 4s; }
.dorm-unit:not(.petted)[data-state='exhausted'] .dorm-sprite { filter: saturate(.7) brightness(.92); }
.dozing .dorm-sprite { animation: dormBreathe 3.2s ease-in-out infinite; }
@keyframes dormBreathe { 50% { transform: scale(1.03, .95); } }
.dorm-unit .dorm-sprite.happy { animation: dormHappy .7s cubic-bezier(.3, 1.4, .5, 1); filter: none; }
@keyframes dormHappy {
  0% { transform: scale(1.14, .84); }
  30% { transform: translateY(-36px) scale(.92, 1.1); }
  55% { transform: translateY(0) scale(1.1, .9); }
  75% { transform: translateY(-10px); }
  100% { transform: none; }
}

/* dozing (지침): floating Zzz; none during the 쓰담쓰담 reaction */
.dorm-zzz { position: absolute; right: 10px; top: 8px; display: none; font-weight: 900; color: #fff; -webkit-text-stroke: 6px #2a3f7a; paint-order: stroke fill; pointer-events: none; }
.dorm-zzz i { position: absolute; font-style: normal; font-size: 34px; opacity: 0; animation: dormZ 2.4s ease-out infinite; }
.dorm-zzz i:nth-child(2) { font-size: 27px; animation-delay: .8s; }
.dorm-zzz i:nth-child(3) { font-size: 22px; animation-delay: 1.6s; }
@keyframes dormZ { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(28px, -50px); opacity: 0; } }
.dozing .dorm-zzz { display: block; }
.petted .dorm-zzz { display: none; }

/* below max: a bobbing paw asks for 쓰담쓰담 */
.dorm-ask { position: absolute; left: 0; top: 4px; z-index: 3; display: none; width: 40px; height: 40px; pointer-events: none; animation: badgeBob 1s ease-in-out infinite; }
.dorm-ask .ico { width: 100%; height: 100%; }
.need-pet .dorm-ask { display: block; }

/* the stroke: a paw rubbing over the head */
.dorm-paw { position: absolute; left: 50%; top: 0; z-index: 3; width: 60px; height: 60px; margin-left: -30px; opacity: 0; pointer-events: none; }
.dorm-paw .ico { width: 100%; height: 100%; }
.dorm-paw.go { animation: dormStroke .9s ease-in-out; }
@keyframes dormStroke {
  0% { opacity: 0; transform: translate(-30px, -10px) rotate(-20deg); }
  15% { opacity: 1; }
  35% { transform: translate(24px, 4px) rotate(15deg); }
  60% { transform: translate(-24px, 4px) rotate(-15deg); }
  85% { opacity: 1; transform: translate(14px, 0) rotate(8deg); }
  100% { opacity: 0; transform: translate(0, -12px); }
}

/* floating hearts */
.dorm-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.dorm-heart { position: absolute; top: 30%; width: 36px; height: 36px; margin-left: -18px; opacity: 0; animation: dormHeart 1.1s ease-out forwards; }
.dorm-heart .ico { width: 100%; height: 100%; }
@keyframes dormHeart {
  0% { transform: translate(0, 0) scale(.3); opacity: 0; }
  20% { transform: translate(calc(var(--dx, 0px) * .3), -20px) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), -120px) scale(.8); opacity: 0; }
}

/* +1 기력 (dorm.js gain): rises from the head over the plate */
.dorm-gain { position: absolute; left: 50%; top: 8%; display: flex; align-items: center; gap: 2px; font-size: 44px; font-weight: 900; line-height: 1; color: #9ef58a; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; white-space: nowrap; opacity: 0; transform: translateX(-50%); animation: dormGain 1.3s ease-out forwards; }
.dorm-gain .ico { width: 40px; height: 40px; }
@keyframes dormGain {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.4); }
  20% { opacity: 1; transform: translate(-50%, -14px) scale(1.25); }
  35% { transform: translate(-50%, -18px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -80px) scale(1); }
}

/* the speech bubble above the plate. At most 2 lines (54 px) for every line of data/lines.json: above a two-line
   name with the 쓰담 progress the top row's plate starts 69 px below the room's top edge, which clips. */
.dorm-bubble { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; width: max-content; max-width: 320px; padding: 4px 14px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 rgba(43, 26, 15, .3); font-size: 18px; font-weight: 800; line-height: 1.15; text-align: center; word-break: keep-all; transform: translateX(-50%); pointer-events: none; }
/* the tail; z-index -1: under the text (the 4 px bottom padding leaves its corner inside the second line), over the border */
.dorm-bubble::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 100%; width: 16px; height: 16px; background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translate(-50%, -8px) rotate(45deg); }
.dorm-bubble[hidden] { display: none; }
.dorm-bubble.pop { animation: dormPop .3s cubic-bezier(.3, 1.6, .6, 1); }
@keyframes dormPop { from { transform: translateX(-50%) scale(.4); opacity: 0; } }

/* paging */
.dorm-nav { position: absolute; top: 50%; z-index: 6; width: 68px; min-height: 68px; height: 68px; margin-top: -34px; padding: 0; }
.dorm-nav .ico { width: 40px; height: 40px; }
.dorm-prev { left: 8px; }
.dorm-next { right: 8px; }
.dorm-next .ico { transform: scaleX(-1); }
.dorm-foot { position: absolute; left: 50%; bottom: 8px; z-index: 6; display: flex; align-items: center; gap: 16px; padding: 3px 20px; background: rgba(43, 26, 15, .75); border-radius: 999px; color: var(--cream); font-size: 19px; font-weight: 800; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.dorm-page { color: var(--yellow); font-size: 21px; }

/* home: the 숙소 button on the ground, right of the parade and under the menu */
/* z-index: its 지침 badge sticks out above it and must stay over the 보물 button (the menu comes later in the DOM) */
.btn-dorm { --bg: #ffc58a; --bg2: #e0843c; position: absolute; right: 40px; bottom: 40px; z-index: 1; width: 260px; flex-direction: row; gap: 10px; }