/* =============================================================================
   ui/room.css - study room, a direct translation of the Compose neobrutalist
   scene in ui/study/room/StudyRoomScreen.kt and RoomSheets.kt.

   Palette, borders, radii, hard shadows and type sizes are the exact values
   used on Android (dp -> px, sp -> px).
     Ink #2B1E16  Desk #CE965F  Cream #F7F3E8
     Mint #34D399 Coral #FF8A65 Sky #7DD3FC  Sand #E8D5A3
   ========================================================================== */

/* The room is a scene, not a document: it fills the frame edge to edge. */
body.room-full #content { padding:0 !important; max-width:none !important; }
body.room-full #main { overflow:hidden; }

.rm {
  position:relative;
  width:100%;
  height:calc(100dvh - var(--topbar-h) - var(--nav-h));
  min-height:420px;
  overflow:hidden;
  background:#2B1E16;
  color:#2B1E16;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
@media (min-width:900px) {
  .rm { height:calc(100dvh - var(--topbar-h)); }
}

/* On a phone the scene is the whole screen, exactly like Android. On a wide
   screen it stays a portrait stage in the middle instead of stretching the
   library into a mural. */
.rm-stage {
  position:relative;
  width:100%;
  max-width:520px;
  height:100%;
  margin:0 auto;
  overflow:hidden;
  background:#2B1E16;
}

/* ------------------------------ scene layers ------------------------------ */

.rm-bg {
  position:absolute;
  background-repeat:no-repeat;
  background-size:100% 100%;
  image-rendering:auto;
  pointer-events:none;
}

.rm-cv { position:absolute; inset:0; pointer-events:none; }

.rm-frames, .rm-seats, .rm-tags, .rm-fx, .rm-bubbles { position:absolute; inset:0; pointer-events:none; }
.rm-frames > *, .rm-seats > *, .rm-tags > * { pointer-events:auto; }
.rm-fx, .rm-bubbles { pointer-events:none; }

/* --------------------------------- desks ---------------------------------- */

.rm-desk {
  position:absolute;
  background:#CE965F;
  border:3px solid #2B1E16;
  border-radius:9px;
}
.rm-desk-front { border-width:4px; border-radius:14px; }

/* ------------------------------ wall frames ------------------------------- */

.rm-frame {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  border:3px solid #2B1E16;
  border-radius:10px;
  box-shadow:4px 5px 0 rgba(43,30,22,.5);
  color:#2B1E16;
  overflow:hidden;
  padding:3px 5px;
  cursor:pointer;
  transition:transform 90ms ease;
}
.rm-frame:active { transform:translate(2px, 2px); box-shadow:2px 3px 0 rgba(43,30,22,.5); }

.rm-ft { font-size:9px; font-weight:800; line-height:1.1; white-space:nowrap; }
.rm-fv { font-size:17px; font-weight:900; line-height:1.15; white-space:nowrap; letter-spacing:.2px; }
.rm-fi { display:flex; align-items:center; justify-content:center; line-height:0; }
.rm-fi svg { width:13px; height:13px; }
.rm-ftop { font-size:8px; font-weight:800; line-height:1.25; white-space:nowrap; }
.rm-fsub { font-size:8px; line-height:1.2; white-space:nowrap; }
.rm-fsum { font-size:8px; font-weight:800; white-space:nowrap; }
.rm-fstreak { font-size:16px; font-weight:900; line-height:1.1; white-space:nowrap; }
.rm-fbadge { font-size:9px; font-weight:800; white-space:nowrap; }

.rm-fbars {
  display:flex; align-items:flex-end; justify-content:center;
  gap:2px; width:100%; height:26px; padding-top:3px;
}
.rm-fbars i { display:block; width:9%; min-width:3px; border-radius:1px; }

/* --------------------------------- seats ---------------------------------- */

.rm-seat { position:absolute; }
.rm-seat.dim { opacity:.6; }
.rm-simg {
  width:100%; height:100%;
  object-fit:contain; object-position:bottom center;
  transform-origin:50% 100%;
  -webkit-user-drag:none;
}
.rm-anim { animation:rmBreath 2300ms ease-in-out infinite alternate, rmBob 3100ms linear infinite alternate; }
@keyframes rmBreath { from { scale:1; } to { scale:1.035; } }
@keyframes rmBob { from { translate:0 0; } to { translate:0 -6px; } }
@media (prefers-reduced-motion:reduce) { .rm-anim { animation:none; } }

.rm-tag {
  position:absolute;
  width:68px;
  padding:2px 4px;
  background:#F7F3E8;
  border:2px solid #2B1E16;
  border-radius:8px;
  font-size:10px; font-weight:800; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.rm-bubble {
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:2px solid #2B1E16;
  border-radius:11px;
  font-size:11px; font-weight:800;
  white-space:nowrap; overflow:hidden;
  animation:rmPop 220ms cubic-bezier(.2,.9,.3,1.3);
}
.rm-bubble.sm { font-size:9px; }
@keyframes rmPop { from { transform:scale(.7); opacity:0; } to { transform:scale(1); opacity:1; } }

/* -------------------------------- top panel -------------------------------- */

.rm-top {
  position:absolute; top:8px; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none; z-index:6;
}
.rm-tcard {
  display:flex; align-items:center; gap:5px;
  padding:6px 8px;
  background:#F7F3E8;
  border:4px solid #2B1E16;
  border-radius:18px;
  pointer-events:auto;
  max-width:calc(100% - 16px);
}

.rm-cbtn {
  width:34px; height:34px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:3px solid #2B1E16;
  border-radius:999px;
  color:#2B1E16;
  cursor:pointer;
  padding:0;
  transition:transform 90ms ease;
}
.rm-cbtn:active { transform:scale(.92); }
.rm-cbtn svg { width:18px; height:18px; }
.rm-cbtn.wide { width:auto; padding:0 10px; border-radius:999px; }
.rm-chip { font-size:12px; font-weight:800; white-space:nowrap; }

.rm-ring {
  position:relative; width:42px; height:42px; flex:none;
  border:0; background:transparent; padding:0; cursor:pointer;
}
.rm-ring canvas { width:42px; height:42px; display:block; }
.rm-ring b {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; color:#2B1E16;
}

.rm-chips { display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; margin-top:6px; }
.rm-chipbox {
  background:#F7F3E8;
  border:3px solid #2B1E16;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px; font-weight:800; color:#2B1E16;
  max-width:86vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  animation:rmPop 200ms ease;
}

/* ---------------------------------- fx ------------------------------------ */

.rm-floater {
  position:absolute;
  font-size:30px;
  animation:rmFloat 1650ms linear forwards;
  will-change:transform, opacity;
}
@keyframes rmFloat {
  from { transform:translateY(0); opacity:1; }
  to { transform:translateY(-110px); opacity:0; }
}

.rm-confetti { position:absolute; inset:0; overflow:hidden; }
.rm-confetti i {
  position:absolute; top:-40px;
  width:2.8%; height:4.2%;
  animation:rmFall 2200ms linear forwards;
}
@keyframes rmFall {
  from { transform:translateY(0) rotate(0deg); }
  to { transform:translateY(105vh) rotate(220deg); }
}

/* -------------------------------- overlays -------------------------------- */

.rm-ovwrap { position:absolute; inset:0; z-index:20; pointer-events:none; }
.rm-ovwrap:empty { display:none; }

.rm-dim {
  position:absolute; inset:0;
  background:rgba(43,30,22,.62);
  pointer-events:auto;
  animation:rmFade 160ms ease;
}
.rm-dim.sheet { background:rgba(0,0,0,.45); }
@keyframes rmFade { from { opacity:0; } to { opacity:1; } }

.rm-ovbody {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:12px;
  pointer-events:none;
}
.rm-ovbody > * { pointer-events:auto; }

.rm-card {
  width:min(92%, 430px);
  background:#F7F3E8;
  border:4px solid #2B1E16;
  border-radius:18px;
  padding:14px;
  color:#2B1E16;
  animation:rmRise 220ms cubic-bezier(.2,.9,.3,1.1);
}
@keyframes rmRise { from { transform:translateY(14px) scale(.96); opacity:0; } to { transform:none; opacity:1; } }

.rm-otitle { display:block; font-size:18px; font-weight:900; }

.rm-sheet {
  width:min(92%, 480px);
  max-height:min(560px, 82dvh);
  display:flex; flex-direction:column;
  background:#F7F3E8;
  border:3px solid #2B1E16;
  border-radius:20px;
  padding:14px;
  color:#2B1E16;
  animation:rmRise 220ms cubic-bezier(.2,.9,.3,1.1);
}
.rm-shead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.rm-shead b { flex:1; font-size:16px; font-weight:800; }
.rm-close {
  width:32px; height:32px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#E8D5A3; border:0; border-radius:999px;
  color:#2B1E16; cursor:pointer;
}
.rm-close svg { width:18px; height:18px; }
.rm-sbody { overflow:auto; display:flex; flex-direction:column; gap:6px; -webkit-overflow-scrolling:touch; }

/* character picker */
.rm-chars { display:flex; gap:10px; overflow-x:auto; padding:12px 2px 4px; }
.rm-charc {
  flex:none; width:84px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px;
  background:#fff;
  border:2px solid #2B1E16;
  border-radius:14px;
  color:#2B1E16; cursor:pointer;
}
.rm-charc.on { background:#34D399; border-width:4px; padding:4px; }
.rm-charc img { width:66px; height:66px; object-fit:contain; -webkit-user-drag:none; }
.rm-charc span { font-size:13px; font-weight:800; }

/* ambient sounds */
.rm-sgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:10px 0; }
.rm-snd {
  padding:9px 4px;
  background:#fff;
  border:2px solid #2B1E16;
  border-radius:12px;
  font-size:12px; font-weight:800; color:#2B1E16;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.rm-snd.on { background:#34D399; border-width:3px; padding:8px 3px; }
.rm-tbtn {
  width:100%;
  padding:9px 14px;
  border:3px solid #2B1E16;
  border-radius:14px;
  font-size:13px; font-weight:900; color:#2B1E16;
  cursor:pointer;
}

/* cheer */
.rm-emojis { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.rm-emoji {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:3px solid #2B1E16; border-radius:999px;
  font-size:22px; cursor:pointer;
  transition:transform 90ms ease;
}
.rm-emoji:active { transform:scale(.9); }

/* person / item rows */
.rm-prow {
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:9px;
  background:#fff;
  border:2px solid #2B1E16;
  border-radius:12px;
  color:#2B1E16; cursor:pointer; text-align:start;
}
.rm-prow.on { background:rgba(52,211,153,.35); }
.rm-pav {
  width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#E8D5A3; border-radius:9px; overflow:hidden;
}
.rm-pav img { width:34px; height:34px; object-fit:contain; }
.rm-cicon { font-size:20px; flex:none; }
.rm-pbody { flex:1; min-width:0; display:flex; flex-direction:column; }
.rm-pbody b { font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-pbody small { font-size:11px; opacity:.7; }
.rm-pmin { font-size:12px; font-weight:800; flex:none; }
.rm-pcheck { display:flex; align-items:center; }
.rm-pcheck svg { width:20px; height:20px; }

.rm-shop-h { font-size:13px; font-weight:800; padding-top:6px; }

/* leaderboard scopes */
.rm-scopes { display:flex; gap:6px; flex-wrap:wrap; }
.rm-scope {
  padding:6px 10px;
  background:#F7F3E8;
  border:2px solid #2B1E16;
  border-radius:9px;
  font-size:12px; font-weight:800; color:#2B1E16; cursor:pointer;
}
.rm-scope.on { background:#34D399; }
.rm-myrank { font-size:12px; font-weight:800; padding:4px 0; }

/* goal sheet */
.rm-gdone { font-size:13px; font-weight:800; }
.rm-ghint { font-size:11px; margin-top:4px; }
.rm-stepper {
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding:12px 10px;
  background:#34D399; border:2px solid #2B1E16; border-radius:14px;
}
.rm-gstep {
  width:38px; height:38px; flex:none;
  background:#fff; border:2px solid #2B1E16; border-radius:9px;
  font-size:18px; font-weight:800; color:#2B1E16; cursor:pointer;
}
.rm-gval { flex:1; display:flex; flex-direction:column; align-items:center; }
.rm-gval b { font-size:20px; font-weight:800; }
.rm-gval small { font-size:11px; }
.rm-presets { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:6px; }
.rm-preset {
  padding:9px 2px;
  background:#fff; border:2px solid #2B1E16; border-radius:10px;
  font-size:11px; font-weight:800; color:#2B1E16; cursor:pointer;
}
.rm-preset.on { background:#34D399; }
.rm-gsave {
  width:100%; margin-top:10px; padding:12px;
  background:#2B1E16; border:0; border-radius:12px;
  font-size:14px; font-weight:800; color:#fff; cursor:pointer;
}

/* misc */
.rm-empty { font-size:13px; padding:14px 2px; text-align:center; }
.rm-load {
  width:28px; height:28px; margin:34px auto;
  border:3px solid rgba(43,30,22,.25);
  border-top-color:#34D399;
  border-radius:999px;
  animation:rmSpin 800ms linear infinite;
}
@keyframes rmSpin { to { transform:rotate(360deg); } }


/* ------------------------------- book loader ------------------------------
   Shown until every sprite and the library plate are really decoded, so the
   scene never appears half painted. Mirrors the Android loading screen. */

.rm-loader {
  position:absolute; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:#2B1E16; color:#F7F3E8;
  transition:opacity 400ms ease;
}
.rm-loader.off { opacity:0; pointer-events:none; }
.rm-loader span { font-size:13px; font-weight:800; letter-spacing:.2px; }

.rm-book { position:relative; width:78px; height:56px; perspective:360px; }
.rm-book::before {
  content:''; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:#CE965F; border:3px solid #F7F3E8; border-radius:4px;
}
.rm-book::after {
  content:''; position:absolute; left:50%; top:2px; width:3px; height:44px;
  transform:translateX(-50%); background:#F7F3E8; border-radius:2px;
}
.rm-book i {
  position:absolute; left:50%; top:2px; width:34px; height:44px;
  background:#F7F3E8; border:3px solid #2B1E16; border-radius:3px 7px 7px 3px;
  transform-origin:left center; box-shadow:2px 2px 0 rgba(0,0,0,.3);
  animation:rmPage 1500ms cubic-bezier(.45,.05,.55,.95) infinite;
}
.rm-book i:nth-child(2) { animation-delay:250ms; }
.rm-book i:nth-child(3) { animation-delay:500ms; }
@keyframes rmPage {
  0%   { transform:rotateY(0deg); }
  55%  { transform:rotateY(-168deg); }
  100% { transform:rotateY(-168deg); }
}
@media (prefers-reduced-motion:reduce) { .rm-book i { animation-duration:3200ms; } }

/* --------------------------- tablet and desktop ---------------------------
   The library plate is a portrait 768x1376 painting. Instead of stretching it
   across a monitor we keep the phone-shaped stage in the middle, framed. */

@media (min-width:700px) {
  .rm { background:#1B1310; }
  .rm-stage {
    width:auto;
    height:100%;
    aspect-ratio:768 / 1376;
    max-width:min(520px, 100%);
    box-shadow:0 0 0 3px #2B1E16, 0 20px 44px rgba(0,0,0,.45);
  }
}

/* overflow guards */
.rm-row > *, .rm-main { min-width: 0; }