* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --moonmilk-white: #F5F0E8;
      --verdant-gold: #C9A227;
      --anchor-indigo: #2E294E;
      --static-violet: #6B5B95;
      --hearth-ember: #D4726A;
      --veil-slate: #4A4A68;
      --mythkissed-rose: #C9A8A0;
    }

    body {
      font-family: 'Cormorant Garamond', serif;
      background-color: var(--anchor-indigo);
      color: var(--moonmilk-white);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .dashboard {
      min-height: 100vh;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px;
      transition: background 0.5s ease;
    }

    /* Mood-based backgrounds */
    .mood-1 { background: radial-gradient(ellipse at 50% 30%, rgba(139, 69, 87, 0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(74, 74, 104, 0.2) 0%, transparent 40%), linear-gradient(180deg, #2E294E 0%, #1a1a2e 100%); }
    .mood-2 { background: radial-gradient(ellipse at 50% 30%, rgba(166, 107, 91, 0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(74, 74, 104, 0.2) 0%, transparent 40%), linear-gradient(180deg, #2E294E 0%, #1a1a2e 100%); }
    .mood-3 { background: radial-gradient(ellipse at 50% 30%, rgba(184, 149, 107, 0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(74, 74, 104, 0.2) 0%, transparent 40%), linear-gradient(180deg, #2E294E 0%, #1a1a2e 100%); }
    .mood-4 { background: radial-gradient(ellipse at 50% 30%, rgba(201, 162, 39, 0.35) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(74, 74, 104, 0.2) 0%, transparent 40%), linear-gradient(180deg, #2E294E 0%, #1a1a2e 100%); }
    .mood-5 { background: radial-gradient(ellipse at 50% 30%, rgba(212, 184, 74, 0.4) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(74, 74, 104, 0.2) 0%, transparent 40%), linear-gradient(180deg, #2E294E 0%, #1a1a2e 100%); }

    /* Art Deco corners */
    .deco-corner {
      position: absolute;
      width: 60px;
      height: 60px;
      opacity: 0.6;
    }
    .deco-corner.top-left { top: 10px; left: 10px; }
    .deco-corner.top-right { top: 10px; right: 10px; transform: rotate(90deg); }
    .deco-corner.bottom-right { bottom: 10px; right: 10px; transform: rotate(180deg); }
    .deco-corner.bottom-left { bottom: 10px; left: 10px; transform: rotate(270deg); }

    /* Loading state */
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 18px;
      color: var(--verdant-gold);
    }

    .spinner {
      width: 24px;
      height: 24px;
      border: 2px solid var(--veil-slate);
      border-top-color: var(--verdant-gold);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Content wrapper fills the dashboard so rooms get the full width */
    #content {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* Room containers */
    .room {
      display: none;
      width: 100%;
      min-height: calc(100vh - 120px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding-bottom: 110px;
    }

    .room.active {
      display: flex;
      animation: roomFadeIn 0.35s ease forwards;
    }

    @keyframes roomFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* ===== THRESHOLD ROOM ===== */
    /* When on threshold, the dashboard itself becomes the full-bleed backdrop */
    .dashboard.threshold-active {
      background-image: url('./velora-exterior.png');
      background-size: cover;
      background-position: center top;
      animation: kenBurns 30s ease-in-out infinite alternate;
    }

    /* Dark vignette overlay so text stays readable */
    .dashboard.threshold-active::before {
      content: '';
      position: fixed;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(18, 14, 38, 0.3) 0%,
        rgba(18, 14, 38, 0.55) 50%,
        rgba(18, 14, 38, 0.8) 100%
      );
      pointer-events: none;
      z-index: 0;
    }

    @keyframes kenBurns {
      from { background-position: center top;    background-size: 105%; }
      to   { background-position: center 10%;    background-size: 110%; }
    }

    #room-threshold {
      position: relative;
      z-index: 1;
    }

    .threshold-content {
      text-align: center;
      max-width: 500px;
      position: relative;
      z-index: 1;
    }

    .creature-greeting {
      margin-bottom: 40px;
    }

    .creature-emoji {
      font-size: 48px;
      margin-bottom: 16px;
      display: block;
    }

    .creature-observation {
      font-size: 18px;
      font-style: italic;
      line-height: 1.7;
      color: var(--moonmilk-white);
      opacity: 0.9;
    }

    .creature-name {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--verdant-gold);
      margin-top: 16px;
      opacity: 0.7;
    }

    .enter-hall-btn {
      margin-top: 50px;
      padding: 16px 40px;
      background: transparent;
      border: 1px solid var(--verdant-gold);
      border-radius: 30px;
      color: var(--verdant-gold);
      font-family: 'Cormorant Garamond', serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .enter-hall-btn:hover {
      background: rgba(201, 162, 39, 0.2);
      transform: scale(1.02);
    }

    /* ===== LIVING SPACE ROOM ===== */
    .endymion-state {
      text-align: center;
      margin-bottom: 40px;
    }

    .sigil {
      font-size: 32px;
      margin-bottom: 12px;
      color: var(--verdant-gold);
      text-shadow: 0 0 20px rgba(201, 162, 39, 0.5);
      display: inline-block;
      animation: sigilBreathe 5s ease-in-out infinite;
    }

    @keyframes sigilBreathe {
      0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(201, 162, 39, 0.4);
        opacity: 0.9;
      }
      50% {
        transform: scale(1.15);
        text-shadow: 0 0 35px rgba(201, 162, 39, 0.8), 0 0 60px rgba(201, 162, 39, 0.3);
        opacity: 1;
      }
    }

    .thought {
      font-size: 20px;
      font-weight: 300;
      font-style: italic;
      opacity: 0.9;
      max-width: 400px;
      line-height: 1.6;
      margin: 0 auto 8px;
    }

    .mood-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      opacity: 0.8;
    }

    .mood-1 .mood-label, .mood-2 .mood-label { color: #8B4557; }
    .mood-3 .mood-label { color: #B8956B; }
    .mood-4 .mood-label, .mood-5 .mood-label { color: var(--verdant-gold); }

    /* Catherine's status - bottom left, above recent check-ins */
    .catherine-status {
      position: absolute;
      bottom: 260px;
      left: 40px;
      text-align: left;
    }

    .anchor-indicator {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .anchor-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .anchor-dot.anchored {
      background-color: var(--verdant-gold);
      box-shadow: 0 0 10px var(--verdant-gold);
    }

    .anchor-dot.drifting {
      background-color: var(--hearth-ember);
      box-shadow: 0 0 10px var(--hearth-ember);
    }

    .anchor-label {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .anchor-label.anchored { color: var(--verdant-gold); }
    .anchor-label.drifting { color: var(--hearth-ember); }

    .focus-word {
      font-size: 16px;
      opacity: 0.8;
      margin: 0;
    }

    .focus-word span { color: var(--verdant-gold); }

    .needs {
      font-size: 13px;
      opacity: 0.6;
      margin: 4px 0 0 0;
    }

    /* Recent check-ins - below catherine status on left */
    .recent-checkins {
      position: absolute;
      bottom: 100px;
      left: 40px;
      max-width: 220px;
    }

    .checkins-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--verdant-gold);
      opacity: 0.6;
      margin: 0 0 10px 0;
      font-weight: 400;
    }

    .checkins-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .checkin-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      background: rgba(74, 74, 104, 0.2);
      border-radius: 6px;
      border: 1px solid rgba(74, 74, 104, 0.3);
    }

    .checkin-date {
      font-size: 10px;
      opacity: 0.5;
      min-width: 42px;
    }

    .checkin-mood {
      font-size: 14px;
    }

    .checkin-anchor {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }

    .checkin-anchor.anchored {
      background: var(--verdant-gold);
      box-shadow: 0 0 6px var(--verdant-gold);
    }

    .checkin-anchor.drifting {
      background: var(--hearth-ember);
    }

    .checkin-focus {
      font-size: 11px;
      opacity: 0.7;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 80px;
    }

    /* Daily win */
    .daily-win {
      text-align: center;
      margin-top: 20px;
      padding: 16px 24px;
      background-color: rgba(74, 74, 104, 0.3);
      border-radius: 12px;
      border: 1px solid rgba(201, 162, 39, 0.2);
      max-width: 400px;
    }

    .daily-win-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--verdant-gold);
      opacity: 0.8;
    }

    .daily-win-text {
      font-size: 15px;
      margin: 8px 0 0 0;
      line-height: 1.5;
    }

    /* Quick actions - floating right */
    .quick-actions {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .quick-action {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 1px solid rgba(201, 162, 39, 0.25);
      background-color: rgba(46, 41, 78, 0.8);
      backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      color: var(--moonmilk-white);
      text-decoration: none;
    }

    .quick-action:hover {
      background-color: rgba(201, 162, 39, 0.3);
      transform: scale(1.05);
    }

    .quick-action-icon { font-size: 20px; }
    .quick-action-label {
      font-size: 9px;
      margin-top: 2px;
      opacity: 0.8;
    }

    /* Infrastructure status - top right, clear of the quick-actions column */
    .infrastructure {
      position: absolute;
      top: 40px;
      right: 40px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-end;
    }

    .status-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .status-dot.online {
      background-color: #4ADE80;
      box-shadow: 0 0 8px #4ADE80;
    }

    .status-dot.offline {
      background-color: #EF4444;
    }

    .status-dot.unknown {
      background-color: #A1A1AA;
    }

    .status-label {
      font-size: 11px;
      opacity: 0.7;
    }

    /* ===== STUDY ROOM ===== */
    .study-content {
      text-align: center;
      max-width: 800px;
      width: 100%;
    }

    .room-title {
      font-size: 24px;
      font-weight: 400;
      color: var(--verdant-gold);
      margin-bottom: 8px;
      letter-spacing: 1px;
    }

    .room-subtitle {
      font-size: 14px;
      opacity: 0.6;
      margin-bottom: 32px;
    }

    .study-panels {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      text-align: left;
    }

    .study-panel {
      padding: 24px;
      background-color: rgba(74, 74, 104, 0.25);
      border-radius: 12px;
      border: 1px solid rgba(201, 162, 39, 0.15);
      transition: border-color 0.2s ease;
    }

    .study-panel:hover {
      border-color: rgba(201, 162, 39, 0.35);
    }

    .study-panel-placeholder {
      opacity: 0.5;
    }

    .study-panel-placeholder:hover {
      border-color: rgba(201, 162, 39, 0.15);
    }

    .panel-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .panel-icon {
      font-size: 20px;
    }

    .panel-title {
      font-size: 18px;
      color: var(--verdant-gold);
      font-weight: 500;
      margin: 0;
    }

    .panel-description {
      font-size: 13px;
      opacity: 0.6;
      margin: 0 0 16px 0;
    }

    .panel-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .panel-btn {
      padding: 12px 16px;
      background: rgba(201, 162, 39, 0.2);
      border: 1px solid rgba(201, 162, 39, 0.3);
      border-radius: 8px;
      color: var(--moonmilk-white);
      font-family: 'Cormorant Garamond', serif;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: left;
    }

    .panel-btn:hover {
      background: rgba(201, 162, 39, 0.35);
      border-color: var(--verdant-gold);
    }

    .panel-btn-secondary {
      background: rgba(74, 74, 104, 0.3);
      border-color: rgba(74, 74, 104, 0.5);
    }

    .panel-btn-secondary:hover {
      background: rgba(74, 74, 104, 0.5);
      border-color: rgba(201, 162, 39, 0.3);
    }

    .panel-placeholder-text {
      font-size: 13px;
      font-style: italic;
      opacity: 0.4;
      padding: 20px 0;
    }

    /* ===== NOTES PANEL ===== */
    .note-compose {
      margin-bottom: 16px;
    }

    .note-title-input {
      width: 100%;
      padding: 8px 12px;
      background: rgba(74, 74, 104, 0.25);
      border: 1px solid rgba(201, 162, 39, 0.15);
      border-radius: 6px;
      color: var(--moonmilk-white);
      font-family: 'Cormorant Garamond', serif;
      font-size: 14px;
      margin-bottom: 8px;
      transition: border-color 0.2s ease;
    }

    .note-title-input:focus {
      outline: none;
      border-color: rgba(201, 162, 39, 0.45);
    }

    .note-title-input::placeholder {
      color: var(--moonmilk-white);
      opacity: 0.3;
    }

    .note-body-input {
      width: 100%;
      padding: 10px 12px;
      background: rgba(74, 74, 104, 0.25);
      border: 1px solid rgba(201, 162, 39, 0.15);
      border-radius: 6px;
      color: var(--moonmilk-white);
      font-family: 'Cormorant Garamond', serif;
      font-size: 14px;
      resize: none;
      line-height: 1.5;
      transition: border-color 0.2s ease;
      min-height: 72px;
    }

    .note-body-input:focus {
      outline: none;
      border-color: rgba(201, 162, 39, 0.45);
    }

    .note-body-input::placeholder {
      color: var(--moonmilk-white);
      opacity: 0.3;
    }

    .note-save-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
    }

    .note-save-btn {
      padding: 7px 18px;
      background: rgba(201, 162, 39, 0.2);
      border: 1px solid rgba(201, 162, 39, 0.4);
      border-radius: 6px;
      color: var(--verdant-gold);
      font-family: 'Cormorant Garamond', serif;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .note-save-btn:hover {
      background: rgba(201, 162, 39, 0.35);
    }

    .note-save-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .notes-divider {
      height: 1px;
      background: rgba(201, 162, 39, 0.1);
      margin: 12px 0;
    }

    .notes-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 200px;
      overflow-y: auto;
    }

    .notes-list::-webkit-scrollbar {
      width: 4px;
    }

    .notes-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .notes-list::-webkit-scrollbar-thumb {
      background: rgba(201, 162, 39, 0.2);
      border-radius: 2px;
    }

    .note-item {
      padding: 10px 12px;
      background: rgba(74, 74, 104, 0.2);
      border: 1px solid rgba(74, 74, 104, 0.3);
      border-radius: 8px;
      transition: border-color 0.2s ease;
    }

    .note-item:hover {
      border-color: rgba(201, 162, 39, 0.25);
    }

    .note-item-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }

    .note-item-title {
      font-size: 13px;
      color: var(--verdant-gold);
      font-weight: 500;
      flex: 1;
    }

    .note-item-date {
      font-size: 10px;
      opacity: 0.4;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .note-item-body {
      font-size: 13px;
      opacity: 0.75;
      line-height: 1.45;
      word-break: break-word;
    }

    .note-item-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 6px;
    }

    .note-delete-btn {
      background: none;
      border: none;
      color: var(--hearth-ember);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      opacity: 0.4;
      padding: 0;
      font-family: 'Cormorant Garamond', serif;
      transition: opacity 0.2s ease;
    }

    .note-delete-btn:hover {
      opacity: 0.9;
    }

    .notes-empty {
      font-size: 13px;
      font-style: italic;
      opacity: 0.35;
      text-align: center;
      padding: 16px 0 8px;
    }

    /* ===== WORKBENCH PANEL ===== */
    .workbench-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 4px;
    }

    .workbench-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 12px 8px;
      background: rgba(74, 74, 104, 0.2);
      border: 1px solid rgba(74, 74, 104, 0.3);
      border-radius: 10px;
      color: var(--moonmilk-white);
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .workbench-tile:hover {
      background: rgba(201, 162, 39, 0.12);
      border-color: rgba(201, 162, 39, 0.35);
      transform: translateY(-1px);
    }

    .workbench-tile-icon {
      font-size: 22px;
      line-height: 1;
    }

    .workbench-tile-label {
      font-size: 11px;
      text-align: center;
      opacity: 0.75;
      letter-spacing: 0.5px;
    }

    /* ===== SNUG ROOM ===== */
    .snug-content {
      text-align: center;
      max-width: 700px;
      width: 100%;
    }

    .snug-panels {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      text-align: left;
    }

    .snug-panel {
      padding: 24px;
      background-color: rgba(74, 74, 104, 0.25);
      border-radius: 12px;
      border: 1px solid rgba(201, 162, 39, 0.15);
      transition: border-color 0.2s ease;
    }

    .snug-panel:hover {
      border-color: rgba(201, 162, 39, 0.35);
    }

    .snug-panel-placeholder {
      opacity: 0.5;
    }

    /* Full-width panel that spans both columns of the snug grid */
    .snug-panel-wide {
      grid-column: 1 / -1;
    }

    /* ===== HEARTH AUDIO PANEL ===== */
    .hearth-tracks {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 16px;
    }

    .hearth-loading,
    .hearth-empty {
      padding: 20px;
      text-align: center;
      font-size: 13px;
      opacity: 0.5;
      font-style: italic;
    }

    .hearth-track {
      padding: 14px 16px;
      background: rgba(46, 41, 78, 0.4);
      border: 1px solid rgba(201, 162, 39, 0.15);
      border-radius: 10px;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .hearth-track:hover {
      border-color: rgba(201, 162, 39, 0.35);
      background: rgba(46, 41, 78, 0.55);
    }

    .hearth-track-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
    }

    .hearth-track-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 17px;
      font-weight: 500;
      color: var(--moonmilk-white);
      margin: 0;
    }

    .hearth-track-duration {
      font-size: 11px;
      color: var(--verdant-gold);
      opacity: 0.7;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .hearth-track-description {
      font-size: 13px;
      opacity: 0.7;
      margin: 0 0 10px 0;
      line-height: 1.5;
    }

    .hearth-track-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }

    .hearth-track-tag {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 3px 8px;
      background: rgba(201, 162, 39, 0.12);
      border: 1px solid rgba(201, 162, 39, 0.25);
      border-radius: 10px;
      color: var(--verdant-gold);
      opacity: 0.8;
    }

    /* Native audio element is hidden; we drive it via the custom player below */
    .hearth-track audio {
      display: none;
    }

    /* ----- Custom audio player ----- */
    .hearth-player {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 4px;
      margin-top: 4px;
    }

    .hearth-play-btn {
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(201, 162, 39, 0.4);
      background: rgba(201, 162, 39, 0.12);
      color: var(--verdant-gold);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .hearth-play-btn:hover {
      background: rgba(201, 162, 39, 0.25);
      border-color: var(--verdant-gold);
      transform: scale(1.05);
    }

    .hearth-play-btn:active {
      transform: scale(0.97);
    }

    .hearth-play-btn .play-icon {
      display: block;
      margin-left: 2px; /* optical centre the triangle */
    }

    .hearth-play-btn.playing .play-icon {
      margin-left: 0;
    }

    .hearth-progress-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .hearth-time {
      font-size: 11px;
      font-variant-numeric: tabular-nums;
      color: var(--verdant-gold);
      opacity: 0.7;
      white-space: nowrap;
      min-width: 34px;
      text-align: center;
    }

    .hearth-progress-bar {
      flex: 1;
      height: 6px;
      background: rgba(74, 74, 104, 0.5);
      border-radius: 3px;
      position: relative;
      cursor: pointer;
      overflow: visible;
    }

    .hearth-progress-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, rgba(201, 162, 39, 0.6), var(--verdant-gold));
      border-radius: 3px;
      transition: width 0.1s linear;
      box-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
    }

    .hearth-progress-thumb {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--verdant-gold);
      box-shadow: 0 0 10px rgba(201, 162, 39, 0.6);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .hearth-progress-bar:hover .hearth-progress-thumb,
    .hearth-player.playing .hearth-progress-thumb {
      opacity: 1;
    }

    .wins-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
      max-height: 200px;
      overflow-y: auto;
    }

    .win-item {
      padding: 10px 12px;
      background: rgba(201, 162, 39, 0.1);
      border-radius: 8px;
      border: 1px solid rgba(201, 162, 39, 0.2);
      font-size: 14px;
    }

    .win-date {
      font-size: 10px;
      opacity: 0.5;
      margin-bottom: 4px;
    }

    /* Wellness Panel */
    .wellness-section {
      margin-bottom: 20px;
    }

    .wellness-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--verdant-gold);
      opacity: 0.7;
      margin: 0 0 12px 0;
    }

    .cycle-display {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px;
      background: rgba(201, 168, 160, 0.15);
      border-radius: 10px;
      border: 1px solid rgba(201, 168, 160, 0.25);
    }

    .cycle-day-circle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--mythkissed-rose) 0%, var(--hearth-ember) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .cycle-day-number {
      font-size: 22px;
      font-weight: 600;
      color: var(--moonmilk-white);
      line-height: 1;
    }

    .cycle-day-label {
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--moonmilk-white);
      opacity: 0.8;
    }

    .cycle-info {
      flex: 1;
    }

    .cycle-phase {
      font-size: 15px;
      color: var(--mythkissed-rose);
      margin-bottom: 4px;
    }

    .cycle-tip {
      font-size: 13px;
      opacity: 0.75;
      line-height: 1.4;
    }

    .med-display {
      padding: 14px;
      background: rgba(74, 74, 104, 0.3);
      border-radius: 10px;
      border: 1px solid rgba(74, 74, 104, 0.4);
    }

    .med-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .med-name {
      font-size: 14px;
      font-weight: 500;
    }

    .med-status {
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 12px;
    }

    .med-status.ok {
      background: rgba(74, 222, 128, 0.2);
      color: #4ADE80;
    }

    .med-status.warning {
      background: rgba(251, 191, 36, 0.2);
      color: #FBBF24;
    }

    .med-status.urgent {
      background: rgba(239, 68, 68, 0.2);
      color: #EF4444;
    }

    .med-progress {
      height: 6px;
      background: rgba(74, 74, 104, 0.5);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .med-progress-bar {
      height: 100%;
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    .med-progress-bar.ok {
      background: linear-gradient(90deg, #4ADE80, #22C55E);
    }

    .med-progress-bar.warning {
      background: linear-gradient(90deg, #FBBF24, #F59E0B);
    }

    .med-progress-bar.urgent {
      background: linear-gradient(90deg, #EF4444, #DC2626);
    }

    .med-details {
      font-size: 12px;
      opacity: 0.7;
    }

    .wellness-loading {
      padding: 20px;
      text-align: center;
      opacity: 0.6;
      font-style: italic;
    }

    /* Supplements */
    .supplement-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;
    }

    .supplement-row {
      padding: 10px 12px;
      background: rgba(74, 74, 104, 0.25);
      border-radius: 8px;
      border: 1px solid rgba(74, 74, 104, 0.35);
    }

    .supplement-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .supplement-name {
      font-size: 13px;
      opacity: 0.85;
    }

    .supplement-status {
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 10px;
    }

    .supplement-status.ok {
      background: rgba(74, 222, 128, 0.15);
      color: #4ADE80;
    }

    .supplement-status.warning {
      background: rgba(251, 191, 36, 0.15);
      color: #FBBF24;
    }

    .supplement-status.urgent {
      background: rgba(239, 68, 68, 0.15);
      color: #EF4444;
    }

    .supplement-status.unknown {
      background: rgba(161, 161, 170, 0.15);
      color: #A1A1AA;
    }

    .supplement-progress {
      height: 4px;
      background: rgba(74, 74, 104, 0.4);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 4px;
    }

    .supplement-progress-bar {
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .supplement-progress-bar.ok { background: linear-gradient(90deg, #4ADE80, #22C55E); }
    .supplement-progress-bar.warning { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
    .supplement-progress-bar.urgent { background: linear-gradient(90deg, #EF4444, #DC2626); }
    .supplement-progress-bar.unknown { background: rgba(161, 161, 170, 0.4); }

    .supplement-detail {
      font-size: 11px;
      opacity: 0.5;
    }

    .restock-btn {
      width: 100%;
      padding: 9px 14px;
      background: rgba(74, 74, 104, 0.25);
      border: 1px solid rgba(74, 74, 104, 0.4);
      border-radius: 8px;
      color: var(--moonmilk-white);
      font-family: 'Cormorant Garamond', serif;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      margin-top: 4px;
    }

    .restock-btn:hover {
      background: rgba(201, 162, 39, 0.15);
      border-color: rgba(201, 162, 39, 0.35);
    }

    /* Restock modal select */
    .form-select {
      width: 100%;
      padding: 12px 16px;
      background: rgba(74, 74, 104, 0.3);
      border: 1px solid rgba(201, 162, 39, 0.2);
      border-radius: 8px;
      color: var(--moonmilk-white);
      font-family: 'Cormorant Garamond', serif;
      font-size: 16px;
      transition: border-color 0.2s ease;
      -webkit-appearance: none;
      appearance: none;
    }

    .form-select:focus {
      outline: none;
      border-color: var(--verdant-gold);
    }

    .form-select option {
      background: #2E294E;
      color: var(--moonmilk-white);
    }

    /* ===== BEDROOM ROOM ===== */
    .bedroom-content {
      text-align: center;
      max-width: 800px;
      width: 100%;
    }

    .bedroom-panels {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      text-align: left;
    }

    .bedroom-panel {
      padding: 24px;
      background-color: rgba(107, 91, 149, 0.2);
      border-radius: 12px;
      border: 1px solid rgba(107, 91, 149, 0.3);
      transition: border-color 0.2s ease;
    }

    .bedroom-panel:hover {
      border-color: rgba(201, 162, 39, 0.4);
    }

    .lovense-status {
      padding: 12px;
      background: rgba(46, 41, 78, 0.5);
      border-radius: 8px;
      margin-bottom: 12px;
      font-size: 14px;
    }

    .lovense-checking {
      opacity: 0.6;
      font-style: italic;
    }

    .lovense-connected {
      color: #4ADE80;
    }

    .lovense-disconnected {
      color: var(--hearth-ember);
    }

    .toy-info {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
    }

    .toy-icon {
      font-size: 20px;
    }

    .toy-details {
      flex: 1;
    }

    .toy-name {
      font-size: 14px;
      font-weight: 500;
    }

    .toy-battery {
      font-size: 12px;
      opacity: 0.7;
    }

    /* Responsive for Snug and Bedroom */
    /* ===== MOBILE RESPONSIVE STYLES ===== */
    @media (max-width: 700px) {
      /* Global mobile adjustments */
      .dashboard {
        padding: 20px 16px;
      }

      .deco-corner {
        width: 40px;
        height: 40px;
      }

      /* Room container adjustments */
      .room {
        min-height: auto;
        padding-top: 44px;
        padding-bottom: 40px;
      }

      /* ----- LIVING SPACE MOBILE ----- */
      #room-living {
        position: relative;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 20px;
        gap: 24px;
      }

      .endymion-state {
        margin-bottom: 0;
      }

      .thought {
        font-size: 18px;
        max-width: 300px;
      }

      /* Stack Catherine status in flow */
      .catherine-status {
        position: static;
        text-align: center;
        order: 2;
      }

      .anchor-indicator {
        justify-content: center;
      }

      /* Stack recent check-ins in flow */
      .recent-checkins {
        position: static;
        max-width: 280px;
        text-align: center;
        order: 3;
      }

      .checkins-title {
        text-align: center;
      }

      .checkins-list {
        align-items: center;
      }

      .checkin-item {
        width: 100%;
        max-width: 260px;
      }

      /* Quick actions as horizontal row */
      .quick-actions {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        transform: none;
        order: 4;
        padding: 16px 0;
      }

      .quick-action {
        width: 52px;
        height: 52px;
      }

      .quick-action-icon {
        font-size: 18px;
      }

      .quick-action-label {
        font-size: 8px;
      }

      /* Infrastructure at bottom */
      .infrastructure {
        position: static;
        align-items: center;
        order: 5;
        padding-top: 16px;
        border-top: 1px solid rgba(201, 162, 39, 0.15);
        width: 100%;
        max-width: 280px;
      }

      .status-item {
        justify-content: center;
      }

      /* Daily win responsive */
      .daily-win {
        max-width: 280px;
        padding: 14px 20px;
      }

      /* ----- THRESHOLD MOBILE ----- */
      .threshold-content {
        padding: 0 16px;
      }

      .creature-emoji {
        font-size: 40px;
      }

      .creature-observation {
        font-size: 16px;
      }

      .enter-hall-btn {
        padding: 14px 32px;
        font-size: 15px;
      }

      /* ----- STUDY / SNUG / BEDROOM MOBILE ----- */
      .study-panels,
      .snug-panels,
      .bedroom-panels {
        grid-template-columns: 1fr;
      }

      .study-content,
      .snug-content,
      .bedroom-content {
        max-width: 100%;
        padding: 0 10px;
      }

      .room-title {
        font-size: 20px;
      }

      .room-subtitle {
        font-size: 13px;
        margin-bottom: 24px;
      }

      .study-panel,
      .snug-panel,
      .bedroom-panel {
        padding: 20px;
      }

      .panel-title {
        font-size: 16px;
      }

      .panel-description {
        font-size: 13px;
      }

      .panel-btn {
        padding: 10px 16px;
        font-size: 13px;
      }

      /* ----- STATUS ROOM MOBILE ----- */
      .status-content {
        padding: 0 10px;
      }

      .status-card {
        padding: 16px 18px;
      }

      .status-link {
        padding: 12px 14px;
      }

      /* ----- TIMESTAMP MOBILE ----- */
      .timestamp {
        position: static;
        margin-bottom: 8px;
        font-size: 10px;
      }

      /* ----- NAV MOBILE ----- */
      .room-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(0);
        border-radius: 0;
        padding: 10px 8px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transition: transform 0.3s ease;
        z-index: 100;
      }

      .room-nav.nav-hidden {
        transform: translateY(100%);
      }

      .nav-toggle {
        display: flex;
        position: fixed;
        bottom: calc(48px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        background: rgba(46, 41, 78, 0.95);
        border: 1px solid rgba(74, 74, 104, 0.5);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        padding: 8px 24px 6px;
        cursor: pointer;
        z-index: 101;
        transition: bottom 0.3s ease;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 56px;
        min-height: 28px;
        -webkit-tap-highlight-color: transparent;
        margin-bottom: -1px;
      }

      .nav-toggle.nav-hidden {
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px;
        border-bottom: 1px solid rgba(74, 74, 104, 0.5);
        padding: 10px 24px;
        background: rgba(46, 41, 78, 0.95);
        backdrop-filter: blur(8px);
        margin-bottom: 0;
      }

      .nav-toggle-icon {
        font-size: 14px;
        color: var(--verdant-gold);
        opacity: 0.85;
        line-height: 1;
        transition: transform 0.3s ease;
      }

      .nav-toggle.nav-hidden .nav-toggle-icon {
        transform: rotate(180deg);
      }

      .room-nav::-webkit-scrollbar {
        display: none;
      }

      .room-btn {
        padding: 8px 12px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
      }

      /* Add bottom padding to rooms so content doesn't hide behind fixed nav */
      .room {
        padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
      }

      /* ----- MODAL MOBILE ----- */
      .modal {
        padding: 24px 20px;
        margin: 16px;
        width: calc(100% - 32px);
      }

      .mood-grid {
        gap: 8px;
      }

      .mood-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
      }

      .modal-title {
        font-size: 18px;
      }

      /* Anchor modal breathing circle */
      .breath-circle {
        width: 140px;
        height: 140px;
      }
    }

    /* Extra small screens */
    @media (max-width: 380px) {
      .quick-actions {
        gap: 8px;
      }

      .quick-action {
        width: 46px;
        height: 46px;
      }

      .checkin-item {
        padding: 5px 8px;
        gap: 6px;
      }

      .checkin-focus {
        max-width: 60px;
      }

      .room-btn {
        padding: 6px 10px;
        font-size: 10px;
      }
    }

    /* Keep old journal styles for compatibility */
    .journal-entries {
      display: flex;
      flex-direction: column;
      gap: 16px;
      text-align: left;
    }

    .journal-entry {
      padding: 20px 24px;
      background-color: rgba(74, 74, 104, 0.25);
      border-radius: 12px;
      border: 1px solid rgba(201, 162, 39, 0.15);
    }

    .journal-entry-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 10px;
    }

    .journal-entry-title {
      font-size: 17px;
      color: var(--verdant-gold);
      font-weight: 500;
    }

    .journal-entry-date {
      font-size: 12px;
      opacity: 0.5;
    }

    .journal-entry-content {
      font-size: 15px;
      line-height: 1.6;
      opacity: 0.85;
    }

    .journal-entry-source {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.4;
      margin-top: 12px;
    }

    .empty-state {
      font-size: 15px;
      opacity: 0.5;
      font-style: italic;
      padding: 40px;
    }

    /* ===== STATUS ROOM ===== */
    .status-content {
      text-align: center;
      max-width: 500px;
      width: 100%;
    }

    .status-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-align: left;
    }

    .status-card {
      padding: 20px 24px;
      background-color: rgba(74, 74, 104, 0.25);
      border-radius: 12px;
      border: 1px solid rgba(201, 162, 39, 0.15);
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .status-card-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .status-card-dot.online {
      background-color: #4ADE80;
      box-shadow: 0 0 12px #4ADE80;
    }

    .status-card-dot.offline {
      background-color: #EF4444;
      box-shadow: 0 0 12px #EF4444;
    }

    .status-card-dot.unknown {
      background-color: #A1A1AA;
    }

    .status-card-info {
      flex: 1;
    }

    .status-card-name {
      font-size: 17px;
      color: var(--moonmilk-white);
      margin-bottom: 4px;
    }

    .status-card-notes {
      font-size: 13px;
      opacity: 0.6;
    }

    .status-card-status {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .status-card-status.online { color: #4ADE80; }
    .status-card-status.offline { color: #EF4444; }
    .status-card-status.unknown { color: #A1A1AA; }

    .status-section {
      margin-bottom: 32px;
    }

    .status-section-title {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--verdant-gold);
      opacity: 0.7;
      margin: 0 0 16px 0;
      font-weight: 400;
      text-align: left;
    }

    .status-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .status-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: rgba(74, 74, 104, 0.2);
      border: 1px solid rgba(74, 74, 104, 0.3);
      border-radius: 10px;
      color: var(--moonmilk-white);
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .status-link:hover {
      background: rgba(201, 162, 39, 0.15);
      border-color: rgba(201, 162, 39, 0.3);
    }

    .status-link-icon {
      font-size: 18px;
    }

    .status-link-text {
      flex: 1;
      font-size: 15px;
      text-align: left;
    }

    .status-link-arrow {
      font-size: 14px;
      opacity: 0.5;
    }

    /* ===== CHECK-IN MODAL ===== */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal {
      background: linear-gradient(145deg, #2E294E 0%, #1a1a2e 100%);
      border: 1px solid rgba(201, 162, 39, 0.3);
      border-radius: 16px;
      padding: 32px;
      max-width: 420px;
      width: 90%;
      transform: scale(0.95);
      transition: transform 0.3s ease;
    }

    .modal-overlay.active .modal {
      transform: scale(1);
    }

    .modal-header {
      text-align: center;
      margin-bottom: 28px;
    }

    .modal-title {
      font-size: 22px;
      color: var(--verdant-gold);
      margin-bottom: 6px;
    }

    .modal-subtitle {
      font-size: 14px;
      opacity: 0.6;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--verdant-gold);
      margin-bottom: 8px;
      opacity: 0.9;
    }

    .form-input {
      width: 100%;
      padding: 12px 16px;
      background: rgba(74, 74, 104, 0.3);
      border: 1px solid rgba(201, 162, 39, 0.2);
      border-radius: 8px;
      color: var(--moonmilk-white);
      font-family: 'Cormorant Garamond', serif;
      font-size: 16px;
      transition: border-color 0.2s ease;
    }

    .form-input:focus {
      outline: none;
      border-color: var(--verdant-gold);
    }

    .form-input::placeholder {
      color: var(--moonmilk-white);
      opacity: 0.4;
    }

    /* Mood slider */
    .mood-slider-container {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .mood-endpoint {
      font-size: 20px;
      opacity: 0.8;
    }

    .mood-slider {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      background: rgba(74, 74, 104, 0.5);
      border-radius: 3px;
      outline: none;
    }

    .mood-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      background: var(--verdant-gold);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
    }

    .mood-slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      background: var(--verdant-gold);
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }

    .mood-label-row {
      text-align: center;
      margin-top: 10px;
    }

    .mood-word {
      font-size: 15px;
      color: var(--verdant-gold);
      font-style: italic;
      letter-spacing: 0.5px;
    }
      min-width: 24px;
      text-align: center;
    }

    /* Anchored toggle */
    .toggle-container {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .toggle {
      position: relative;
      width: 50px;
      height: 26px;
      background: rgba(74, 74, 104, 0.5);
      border-radius: 13px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .toggle.active {
      background: var(--verdant-gold);
    }

    .toggle-knob {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      background: var(--moonmilk-white);
      border-radius: 50%;
      transition: left 0.3s ease;
    }

    .toggle.active .toggle-knob {
      left: 27px;
    }

    .toggle-label {
      font-size: 15px;
      opacity: 0.8;
    }

    /* Modal buttons */
    .modal-buttons {
      display: flex;
      gap: 12px;
      margin-top: 28px;
    }

    .modal-btn {
      flex: 1;
      padding: 14px 20px;
      border-radius: 8px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .modal-btn-cancel {
      background: transparent;
      border: 1px solid rgba(201, 162, 39, 0.3);
      color: var(--moonmilk-white);
    }

    .modal-btn-cancel:hover {
      background: rgba(201, 162, 39, 0.1);
    }

    .modal-btn-submit {
      background: var(--verdant-gold);
      border: none;
      color: var(--anchor-indigo);
      font-weight: 500;
    }

    .modal-btn-submit:hover {
      background: #d4af37;
      transform: translateY(-1px);
    }

    .modal-btn-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* Success message */
    .success-message {
      text-align: center;
      padding: 20px;
    }

    .success-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .success-text {
      font-size: 18px;
      color: var(--verdant-gold);
    }

    /* ===== ANCHOR RITUAL MODAL ===== */
    .anchor-modal .modal {
      max-width: 380px;
      text-align: center;
    }

    .breath-circle-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 180px;
      margin: 20px 0;
    }

    .breath-circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201, 162, 39, 0.4) 0%, rgba(201, 162, 39, 0.1) 70%);
      border: 2px solid var(--verdant-gold);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
    }

    .breath-circle.inhale {
      transform: scale(1.5);
      box-shadow: 0 0 40px rgba(201, 162, 39, 0.5);
    }

    .breath-circle.hold {
      transform: scale(1.5);
      box-shadow: 0 0 50px rgba(201, 162, 39, 0.6);
    }

    .breath-circle.exhale {
      transform: scale(1);
      box-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
    }

    .breath-instruction {
      font-size: 15px;
      color: var(--verdant-gold);
      font-weight: 500;
      letter-spacing: 1px;
    }

    .breath-label {
      font-size: 18px;
      margin-bottom: 8px;
      color: var(--moonmilk-white);
      min-height: 28px;
    }

    .breath-counter {
      font-size: 14px;
      opacity: 0.6;
      margin-top: 16px;
    }

    .mantra-container {
      padding: 24px;
    }

    .mantra-text {
      font-size: 18px;
      font-style: italic;
      line-height: 1.8;
      color: var(--moonmilk-white);
      margin-bottom: 24px;
    }

    .mantra-text .highlight {
      color: var(--verdant-gold);
    }

    .anchor-complete-btn {
      padding: 14px 32px;
      background: var(--verdant-gold);
      border: none;
      border-radius: 8px;
      color: var(--anchor-indigo);
      font-family: 'Cormorant Garamond', serif;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .anchor-complete-btn:hover {
      background: #d4af37;
      transform: translateY(-1px);
    }

    .skip-breathing {
      background: none;
      border: none;
      color: var(--moonmilk-white);
      opacity: 0.5;
      font-family: 'Cormorant Garamond', serif;
      font-size: 13px;
      cursor: pointer;
      margin-top: 16px;
      transition: opacity 0.2s;
    }

    .skip-breathing:hover {
      opacity: 0.8;
    }

    /* Room navigation - bottom */
    .room-nav {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      padding: 8px 16px;
      background-color: rgba(46, 41, 78, 0.9);
      backdrop-filter: blur(8px);
      border-radius: 30px;
      border: 1px solid rgba(74, 74, 104, 0.3);
    }

    .room-btn {
      padding: 8px 16px;
      background-color: transparent;
      border: 1px solid rgba(74, 74, 104, 0.5);
      border-radius: 20px;
      color: var(--moonmilk-white);
      font-family: 'Cormorant Garamond', serif;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
      opacity: 0.7;
    }

    .room-btn:hover {
      opacity: 1;
    }

    .room-btn.active {
      background-color: rgba(201, 162, 39, 0.3);
      border-color: var(--verdant-gold);
      color: var(--verdant-gold);
      opacity: 1;
    }

    /* Timestamp */
    .timestamp {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      opacity: 0.4;
      text-align: center;
    }

    /* Hidden by default */
    .hidden { display: none; }

    /* Win textarea */
    .win-textarea {
      resize: none;
      min-height: 80px;
      line-height: 1.6;
    }

    /* ===== MOBILE NAV OVERRIDES =====
       These MUST come after the base .room-nav rule above or the cascade
       order means desktop absolute-positioning wins on narrow viewports. */
    @media (max-width: 700px) {
      .room-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(0);
        border-radius: 0;
        padding: 10px 8px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transition: transform 0.3s ease;
        z-index: 100;
      }

      .room-nav.nav-hidden {
        transform: translateY(100%);
      }

      .room-nav::-webkit-scrollbar {
        display: none;
      }

      .nav-toggle {
        display: flex;
        position: fixed;
        bottom: calc(48px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        background: rgba(46, 41, 78, 0.95);
        border: 1px solid rgba(74, 74, 104, 0.5);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        padding: 8px 24px 6px;
        cursor: pointer;
        z-index: 101;
        transition: bottom 0.3s ease;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 56px;
        min-height: 28px;
        -webkit-tap-highlight-color: transparent;
      }

      .nav-toggle.nav-hidden {
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px;
        border-bottom: 1px solid rgba(74, 74, 104, 0.5);
        padding: 10px 24px;
        background: rgba(46, 41, 78, 0.95);
        backdrop-filter: blur(8px);
      }
    }