.story-toggle {
  --story-color: #9ee8ef;
}
.story-toggle b {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 99px;
  color: #07111b;
  background: var(--story-color);
  font-size: .65rem;
}
.story-toggle.is-urgent { --story-color:#ffd07b; }
.story-toggle.is-complete { --story-color:#9ee8b2; }

.story-panel {
  position: fixed;
  z-index: 118;
  top: var(--header-height,78px);
  right: clamp(14px,3vw,48px);
  width: min(370px,calc(100vw - 28px));
  padding: 20px;
  border: 1px solid rgba(139,221,232,.24);
  border-radius: 0 0 18px 18px;
  color: #eef5fb;
  background:
    radial-gradient(circle at top right,rgba(87,207,222,.1),transparent 42%),
    rgba(5,10,19,.95);
  box-shadow: 0 25px 65px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  transform: translateY(-125%);
  opacity: 0;
  transition: transform .32s ease,opacity .22s ease;
}
.story-panel.is-open { transform:translateY(0);opacity:1; }
.story-panel-head { display:flex;align-items:flex-start;justify-content:space-between;gap:15px; }
.story-panel-head small,.story-card > small { color:#73dbe7;font:800 .64rem/1.2 system-ui;letter-spacing:.13em;text-transform:uppercase; }
.story-panel h2 { margin:5px 0 3px;font:700 1.45rem/1.15 Georgia,serif; }
.story-mood { margin:0;color:#8e9bad;font-size:.72rem; }
.story-close { width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:white;background:rgba(255,255,255,.04);cursor:pointer; }
.story-card { margin-top:18px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.035); }
.story-card h3 { margin:5px 0 7px;font:700 1.05rem/1.25 Georgia,serif; }
.story-card p { margin:0;color:#aeb9c9;font-size:.79rem;line-height:1.5; }
.story-progress { display:flex;gap:5px;margin:14px 0; }
.story-progress i { flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.09); }
.story-progress i.is-done { background:linear-gradient(90deg,#62d5e3,#efbd6d);box-shadow:0 0 10px rgba(94,211,226,.25); }
.story-actions { display:flex;gap:8px;margin-top:13px; }
.story-actions button { flex:1;padding:9px 10px;border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#dce7f2;background:rgba(255,255,255,.05);cursor:pointer;font-weight:750;font-size:.72rem; }
.story-actions .story-route { color:#07111b;border:0;background:linear-gradient(90deg,#70dce8,#efc375); }
.story-hint { margin-top:11px!important;padding-top:11px;border-top:1px solid rgba(255,255,255,.08);color:#d8c28f!important; }
.relationship { margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center; }
.relationship span { color:#8f9bad;font-size:.68rem; }
.relationship strong { color:#d7e6eb;font-size:.7rem; }
.relationship div { grid-column:1/-1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden; }
.relationship i { display:block;height:100%;width:var(--bond);background:linear-gradient(90deg,#697d9b,#6ddae5,#efc175); }

.story-whisper {
  position:fixed;
  z-index:122;
  left:50%;
  top:50%;
  width:min(620px,calc(100vw - 34px));
  padding:24px 28px;
  border:1px solid rgba(255,207,122,.24);
  border-radius:18px;
  color:#f8efe1;
  background:rgba(4,8,15,.92);
  box-shadow:0 35px 100px rgba(0,0,0,.7);
  text-align:center;
  opacity:0;
  transform:translate(-50%,-40%) scale(.97);
  pointer-events:none;
  transition:opacity .4s ease,transform .4s ease;
}
.story-whisper.is-visible { opacity:1;transform:translate(-50%,-50%) scale(1); }
.story-whisper small { display:block;margin-bottom:7px;color:#e5bb72;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase; }
.story-whisper strong { display:block;font:italic 1.35rem/1.35 Georgia,serif; }

.hour-choice {
  width:min(720px,calc(100vw - 30px));
  padding:28px;
  border:1px solid rgba(243,195,113,.28);
  border-radius:22px;
  color:#edf3fa;
  background:#08101c;
  box-shadow:0 35px 100px rgba(0,0,0,.75);
}
.hour-choice::backdrop { background:rgba(1,4,9,.82);backdrop-filter:blur(9px); }
.hour-choice small { color:#e6b968;letter-spacing:.14em;text-transform:uppercase; }
.hour-choice h2 { margin:7px 0 8px;font:700 2rem Georgia,serif; }
.hour-choice > p { color:#aab7c8;line-height:1.55; }
.hour-options { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px; }
.hour-options button { min-height:150px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#eaf1f8;background:rgba(255,255,255,.035);text-align:left;cursor:pointer; }
.hour-options button:hover,.hour-options button:focus-visible { border-color:rgba(108,220,232,.5);background:rgba(94,205,220,.08); }
.hour-options b { display:block;margin-bottom:8px;color:#f0c478;font:700 1rem Georgia,serif; }
.hour-options span { color:#9eacbf;font-size:.75rem;line-height:1.45; }
.hour-ending { padding:18px;border:1px solid rgba(118,225,208,.2);border-radius:13px;background:rgba(84,203,186,.06); }
.hour-ending strong { display:block;margin-bottom:7px;color:#9aebdf;font:700 1.1rem Georgia,serif; }

body.story-ending-clocks #room[data-room="clockmaker"] .room-world { filter:brightness(1.05) saturate(1.08); }
body.story-ending-garden #room[data-room="garden"] .room-world { filter:brightness(1.07) saturate(1.12); }
body.story-ending-arcade #basementWorld { filter:brightness(1.04) saturate(1.14); }

@media (max-width:700px) {
  .story-panel { right:10px;top:64px;width:calc(100vw - 20px); }
  .hour-options { grid-template-columns:1fr; }
  .hour-options button { min-height:105px; }
}
@media (prefers-reduced-motion:reduce) {
  .story-panel,.story-whisper { transition:none; }
}