/* R6.54 — pre-launch responsive & audio UX fixes */

/* Future-awareness tracks: stable responsive axes and stages. */
.r654-future-stage-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
.r654-future-axis-card{
  min-width:0!important;
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  gap:10px!important;
  padding:12px!important;
  border:1px solid #e1e9eb!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#fbfffe,#fff)!important;
  box-shadow:0 12px 30px rgba(23,56,87,.065)!important;
  overflow:hidden!important;
}
.r654-future-axis-card>.premium-unit{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:6px 7px 4px!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
}
.r654-future-axis-card>.premium-unit:after{display:none!important}
.r654-future-axis-card>.premium-unit span{font-size:.66rem!important;color:#148b82!important;font-weight:900!important;writing-mode:horizontal-tb!important}
.r654-future-axis-card>.premium-unit b{font-size:1rem!important;line-height:1.45!important;color:#22364b!important;white-space:normal!important;overflow-wrap:break-word!important;writing-mode:horizontal-tb!important}
.r654-future-axis-stages{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;min-width:0!important}
.r654-future-axis-card .premium-stage{
  width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;
  display:flex!important;flex-direction:column!important;min-height:100%!important;padding:16px!important;
}
.r654-future-axis-card .premium-stage h3,
.r654-future-axis-card .premium-stage p,
.r654-future-axis-card .premium-stage .stage-meta,
.r654-future-axis-card .premium-stage .btn{
  min-width:0!important;white-space:normal!important;writing-mode:horizontal-tb!important;word-break:normal!important;overflow-wrap:break-word!important;
}
.r654-future-axis-card .premium-stage p{min-height:0!important;flex:1 1 auto!important}
.r654-future-axis-card .premium-stage .btn{line-height:1.45!important}
.r654-future-world-head{min-width:0!important;overflow:hidden!important}
.r654-future-pills{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
.r654-future-pills button{min-width:0!important;white-space:nowrap!important}

/* Story controls: no page pulse and clear stable interaction. */
.r69-story-reader :is(button,.r652-segment,.r69-option,.r653-audio-button){
  transform:none!important;
  animation:none!important;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease!important;
}
.r69-story-reader :is(button,.r652-segment,.r69-option,.r653-audio-button):active{transform:none!important;animation:none!important}
.r653-audio-panel.available{border-color:#d8e9e6!important;background:linear-gradient(180deg,#fbfffe,#f4fbf8)!important}
.r653-audio-panel .r69-audio-status{display:block!important;min-width:0!important;white-space:normal!important;writing-mode:horizontal-tb!important}

/* Stronger mobile containment for story metadata/focus mode. */
@media(max-width:900px){
  .r69-story-reader,.r69-reader-shell,.r69-story-stage,.r69-story-info{min-width:0!important;max-width:100%!important}
  .r69-story-info *{writing-mode:horizontal-tb!important}
  .r69-story-info{overflow:hidden!important}
  .r69-story-info h2,.r69-story-info p,.r69-story-meta span{max-width:100%!important}
}
@media(max-width:1080px){
  .r654-future-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .r654-future-world-head{
    display:grid!important;grid-template-columns:42px minmax(0,1fr) 58px!important;gap:8px!important;padding:13px!important;border-radius:20px!important;
  }
  .r654-future-world-head>.world-icon{display:none!important}
  .r654-future-world-head>div:nth-of-type(2){grid-column:2!important;min-width:0!important}
  .r654-future-world-head h1{font-size:1.16rem!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:break-word!important}
  .r654-future-world-head p{font-size:.69rem!important;line-height:1.55!important;white-space:normal!important;overflow-wrap:break-word!important}
  .r654-future-world-head .world-progress{width:54px!important;height:54px!important;min-width:54px!important}
  .r654-future-world-head .world-progress b{font-size:.78rem!important}
  .r654-future-world-head .world-progress small{font-size:.48rem!important}
  .r654-future-pills{margin:10px 0 12px!important;padding:5px!important;border-radius:14px!important}
  .r654-future-pills button{padding:8px 5px!important;font-size:.68rem!important}
  .r654-future-stage-grid{grid-template-columns:1fr!important;gap:11px!important}
  .r654-future-axis-card{padding:9px!important;border-radius:19px!important}
  .r654-future-axis-card .premium-stage{padding:14px!important;border-radius:18px!important}
  .r654-future-axis-card .premium-stage h3{font-size:.96rem!important;line-height:1.45!important}
  .r654-future-axis-card .premium-stage p{font-size:.76rem!important;line-height:1.6!important}
  .r654-future-axis-card .stage-top{grid-template-columns:36px minmax(0,1fr) 34px!important;gap:7px!important}
  .r654-future-axis-card .stage-number{width:36px!important;height:36px!important}
  .r654-future-axis-card .stage-state{width:34px!important;height:34px!important}
  .r69-story-info{grid-template-columns:58px minmax(0,1fr)!important;grid-template-areas:"cover title" "cover progress" "meta meta"!important}
  .r69-story-info>img{width:58px!important;height:52px!important}
  .r69-story-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important}
  .r69-story-meta span{min-width:0!important;font-size:.52rem!important;line-height:1.25!important;white-space:nowrap!important}
  .r620-focus-toggle{overflow:hidden!important}
}
@media(max-width:390px){
  .r654-future-world-head{grid-template-columns:38px minmax(0,1fr) 52px!important;padding:10px!important}
  .r654-future-pills button{font-size:.62rem!important}
  .r654-future-axis-card .premium-stage{padding:12px!important}
  .r69-story-meta{gap:3px!important}
  .r69-story-meta span{font-size:.49rem!important;padding-inline:2px!important}
}