/* =======================================
   ROOM CORE (shared layout)
   ======================================= */

:root{
  --panel-w: min(980px, 92%);
  --panel-bg: rgba(255, 249, 246, 0.82);
  --panel-border: rgba(0,0,0,0.14);
  --panel-radius: 14px;
  --panel-shadow: 0 18px 40px rgba(0,0,0,0.12);

  --panel-pad: 2.5rem;
  --panel-pad-mobile: 1.5rem;
}



/* wallpaper */
body{
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  min-height: 100vh;

  /* keep this so backgrounds don’t jump */
  background-attachment: fixed;
}

/* centered content panel */
.room-container{
  width: var(--panel-w);
  margin: 3rem auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--panel-pad);
}

/* optional: make headings consistent */
.room-container h1{
  margin-top: 0;
  text-align: center;
}

/* responsive */
@media (max-width: 700px){
  .room-container{
    width: min(980px, 94%);
    padding: var(--panel-pad-mobile);
    margin: 2rem auto;
  }
}

/* =======================================
   ROOM THEMES
   ======================================= */



/* Relaxation */
body.relaxation-room{
  background: #111 url('/design/backgrounds/5020.png') repeat;
  background-size: repeat;
  color: #7D438A;

  --panel-bg: #fff7d9;
  --panel-border: rgba(255,247,230,0.20);
}


/* Dolphin */
body.dolphin-room{
  background: #111 url('/design/backgrounds/5020.png') repeat;
  background-size: auto;
   color: #4758B5;

  --panel-bg: rgba(210, 240, 245, 0.72);
  --panel-border: rgba(230,230,230,0.18);
}

/* Fairy */
body.fairy-room{
  background: #111 url('/design/backgrounds/5020.png') repeat;
  background-size: repeat;
  color: #7D438A;

  --panel-bg: #FCE8F5;
  --panel-border: rgba(255,217,255,0.22);
}


/* Horse */
body.horse-room{
  background: #111 url('/design/backgrounds/5020.png') repeat; 
  background-size: repeat;
  color: #5C4475;

  --panel-bg: #FFEEE3;
  --panel-border: rgba(255,230,240,0.20);
}

/* health */
body.health-room{
  background: #111 url('/design/backgrounds/5020.png') repeat;
  background-size: repeat;
  color: #7D438A;

  --panel-bg: #f3f0ff;
  --panel-border: rgba(255,217,255,0.22);
}



.room-footer{
  max-width: 820px;
  margin: 1.5rem auto 3rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exit-btn{
  padding: 0.35rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.25);
  text-decoration: none;
  font-size: 0.85rem;

  background: rgba(255,255,255,0.35);
}


/* ---------- Catalog Table ---------- */
.catalog{
  width:75%;
  border-collapse: separate;      /* so we can keep rounded corners clean */
  border-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;                /* clips the rounded corners */
  box-shadow:0 4px 10px rgba(0,0,0,.04);
  table-layout: fixed;            /* keeps columns tidy */
}

.catalog colgroup col:nth-child(1){ width: 180px; } /* optional: set title column width */

/* header */
.catalog thead th{
  padding:.75rem 1rem;
  text-align:left;
  font-weight:700;
  background:#fff9f0;             /* whisper-peach */
  border-bottom:1px solid var(--line);
}

/* cells */
.catalog td{
  padding:.7rem 1rem;
  vertical-align:top;
  border-bottom:1px dotted var(--line);  /* PG-style dotted rule */
  word-wrap:break-word; overflow-wrap:anywhere;
}

.catalog tr:last-child td{ border-bottom:0; }

/* subtle zebra for readability */
.catalog tbody tr:nth-child(even) td{ background:#fffaf5; }

/* hover */
.catalog tbody tr:hover td{
  background:#fff3d1;             /* gentle pastel hover */
  transition: background .15s ease;
}

/* small-screen nicety */
@media (max-width: 640px){
  .catalog{ font-size:.95rem; }
  .catalog thead{ display:none; }        /* hide header labels */
  .catalog tr{ display:block; border-bottom:1px solid var(--line); }
  .catalog tr:last-child{ border-bottom:0; }
  .catalog td{ display:block; border-bottom:0; padding:.5rem 1rem; }
  .catalog td:first-child{ font-weight:700; margin-top:.25rem; }
}