:root {
  --hub-line: #4d36c4;
  --hub-ink: #35267f;
  --hub-pink: #ed58a7;
  --hub-cyan: #bdeeed;
  --hub-paper: #fffaff;
}

html:has(.reading-hub-app),
body:has(.reading-hub-app) {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  background: #f8eafb !important;
}

body:has(.reading-hub-app) .music-player,
body:has(.reading-hub-app) #page-height-extend {
  display: none !important;
}

.reading-hub-app {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  color: var(--hub-ink);
  background:
    linear-gradient(110deg, rgba(255, 239, 250, .94), rgba(218, 246, 245, .78)),
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(77, 54, 196, .06) 22px 24px);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.reading-hub-titlebar {
  display: flex;
  align-items: center;
  min-width: 0;
  border-bottom: 3px solid var(--hub-line);
  padding: 5px 12px;
  color: var(--hub-ink);
  background: linear-gradient(90deg, #f2dff6 0 72%, var(--hub-cyan) 72%);
  box-shadow: 0 3px 0 rgba(237, 88, 167, .44);
  font-family: "DotGothic16", "Noto Sans SC", sans-serif;
}

.reading-hub-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 9px;
  color: white;
  background: var(--hub-line);
  font: 8px/1 ui-monospace, monospace;
}

.reading-hub-titlebar > div {
  display: grid;
  min-width: 0;
}

.reading-hub-titlebar strong {
  font-size: 11px;
}

.reading-hub-titlebar small {
  color: #735fac;
  font-size: 8px;
}

.reading-hub-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #6e58a4;
  font-size: 8px;
}

.reading-hub-status i {
  width: 7px;
  height: 7px;
  background: var(--hub-pink);
  box-shadow: 0 0 0 2px #ffd6e9;
}

.reading-hub-titlebar > a {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin-left: 14px;
  border: 1px solid var(--hub-line);
  padding: 0 12px;
  color: var(--hub-ink);
  background: #fff8fd;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.reading-hub-titlebar > a:hover,
.reading-hub-titlebar > a:focus-visible {
  color: white;
  background: var(--hub-line);
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.reading-hub-app.is-desktop-embed { position:relative; inset:auto; min-height:100%; height:auto; }
.reading-hub-app.is-desktop-embed .reading-hub-titlebar { display:none; }

.reading-hub-scroll {
  min-height: 0;
  overflow: auto;
  scrollbar-color: var(--hub-pink) #f1e3f4;
}

.reading-hub-content {
  width: min(1540px, calc(100% - 48px));
  min-height: 100%;
  margin: 0 auto;
  padding: 28px 0 44px;
}

.reading-hub-content .reading-launcher {
  grid-template-columns: minmax(0, 1fr) 190px;
  padding: clamp(24px, 4vh, 52px) clamp(24px, 4vw, 64px);
  background: linear-gradient(112deg, rgba(255,255,255,.97) 0 68%, rgba(215,245,244,.96) 68%);
}

.reading-hub-content .reading-heading h1 {
  font-size: 42px;
  letter-spacing: 0;
}

.reading-hub-content .reading-heading p:not(.nso-kicker) {
  max-width: 850px;
  font-size: 14px;
  line-height: 1.8;
}

.reading-hub-content .reading-scoreboard {
  min-height: 108px;
}

.reading-hub-content .reading-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.reading-hub-content .reading-card {
  display: flex;
  min-width: 0;
  min-height: 360px;
  flex-direction: column;
}

.reading-hub-content .reading-cover {
  height: 174px;
  flex: 0 0 174px;
}

.reading-hub-content .reading-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px;
}

.reading-hub-content .reading-card-copy small {
  font-size: 10px;
}

.reading-hub-content .reading-card-copy h2 {
  margin-top: 9px;
  font-size: 20px;
}

.reading-hub-content .reading-card-copy h3 {
  font-size: 12px;
}

.reading-hub-content .reading-card-copy p {
  min-height: 0;
  margin: 14px 0 20px;
  font-size: 14px;
  line-height: 1.6;
}

.reading-hub-content .reading-card-copy b {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 9px;
  font-size: 10px;
}

.reading-hub-content .reading-note {
  margin-top: 22px;
  padding: 15px 18px;
}

@media (max-width: 1180px) {
  .reading-hub-content .reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .reading-hub-app { grid-template-rows: 44px minmax(0, 1fr); }
  .reading-hub-titlebar { padding-inline: 8px; }
  .reading-hub-titlebar small,
  .reading-hub-status { display: none; }
  .reading-hub-titlebar > a { margin-left: auto; padding-inline: 9px; }
  .reading-hub-content { width: calc(100% - 22px); padding: 14px 0 28px; }
  .reading-hub-content .reading-launcher { grid-template-columns: 1fr; padding: 22px 18px; }
  .reading-hub-content .reading-heading h1 { font-size: 29px; }
  .reading-hub-content .reading-heading p:not(.nso-kicker) { font-size: 12px; }
  .reading-hub-content .reading-scoreboard { width: 138px; min-height: 76px; }
  .reading-hub-content .reading-grid { grid-template-columns: 1fr; gap: 14px; }
  .reading-hub-content .reading-card { min-height: 0; }
  .reading-hub-content .reading-cover { height: 156px; flex-basis: 156px; }
  .reading-hub-content .reading-note { align-items: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-hub-content .reading-card { transition: none !important; }
}

/* Windose study center: the queue is a diary application, not a card wall. */
.reading-hub-app { grid-template-rows:39px minmax(0,1fr); background:#f7dfea url('/assets/ngod-game/stream-background.png') no-repeat right bottom / min(59vw,696px) auto; }
.reading-hub-app::before { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,rgba(255,242,251,.92) 0 44%,rgba(255,239,251,.61) 67%,rgba(255,239,251,.17)); }
.reading-hub-titlebar { min-height:39px; border-bottom-width:2px; padding:3px 10px; background:#eed5ec; box-shadow:0 2px 0 var(--hub-cyan); }
.reading-hub-mark { display:block; width:27px; height:27px; margin-right:7px; object-fit:contain; image-rendering:pixelated; color:transparent; background:transparent; font-size:0; }
.reading-hub-titlebar strong { font-size:10px; }.reading-hub-titlebar small { font-size:7px; }.reading-hub-status { font-size:8px; }.reading-hub-titlebar > a { height:25px; margin-left:10px; padding:0 8px; font-size:8px; }
.reading-hub-scroll { padding:18px 0 54px; }.reading-hub-content { width:min(1190px,calc(100% - 138px)); min-height:auto; }.study-desktop-grid { display:grid; grid-template-columns:minmax(0,1fr) 286px; align-items:start; gap:18px; }
.study-diary-window,.study-status-window,.study-webcam,.reading-note { border:2px solid var(--hub-line); background:var(--hub-paper); box-shadow:4px 5px 0 rgba(98,72,166,.33),0 0 0 1px rgba(255,255,255,.8) inset; }
.study-window-titlebar { display:flex; align-items:center; min-height:34px; border-bottom:2px solid var(--hub-line); padding:4px 5px; background:#edd4ed; font-family:"DotGothic16","Noto Sans SC",sans-serif; }.study-window-titlebar>img { margin-right:6px; image-rendering:pixelated; }.study-window-titlebar span { display:grid; gap:1px; }.study-window-titlebar b { font-size:9px; }.study-window-titlebar small { color:#785e9e; font-size:7px; }.study-window-titlebar>div { display:flex; gap:2px; margin-left:auto; }.study-window-titlebar>div img { display:block; width:20px; height:20px; image-rendering:pixelated; }
.study-diary-body { padding:26px 26px 30px; background:linear-gradient(90deg,#fffaff 0 57px,#f2ecfb 57px 59px,#fffaff 59px); }.reading-heading { max-width:710px; padding-left:31px; }.nso-kicker { margin:0 0 8px; color:#d74891; font:8px "DotGothic16",sans-serif; }.reading-heading h1 { margin:0; color:#40308c; font-size:clamp(29px,3.4vw,46px)!important; letter-spacing:0; line-height:1.18; }.reading-heading h1 em { color:#e4539e; font-style:normal; }.reading-heading p:not(.nso-kicker) { max-width:650px; margin:13px 0 0; color:#5b4d72; font-size:13px!important; line-height:1.78; }
.reading-queue { display:grid; gap:7px; margin-top:24px; }.reading-queue-row { display:grid; grid-template-columns:32px 76px minmax(0,1fr) auto; gap:11px; align-items:center; min-height:82px; border:1px solid #b9a7d6; padding:6px 10px 6px 0; color:inherit; background:#fff; text-decoration:none; transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease; }.reading-queue-row:hover,.reading-queue-row:focus-visible { border-color:var(--hub-pink); box-shadow:3px 3px 0 #bce9e5; outline:none; transform:translate(-1px,-1px); }.queue-index { display:grid; place-items:center; align-self:stretch; border-right:1px solid #d6c8e6; color:#b14183; background:#faebf3; font:9px "DotGothic16",sans-serif; }.queue-cover { display:block; width:76px; height:64px; border:1px solid var(--hub-line); background:center/cover no-repeat; }.queue-copy { display:grid; min-width:0; gap:2px; }.queue-copy small { color:#846a9b; font:8px "DotGothic16",sans-serif; }.queue-copy b { color:#3b2b83; font-size:16px; line-height:1.2; }.queue-copy strong { color:#b43f81; font-size:11px; }.queue-copy em { overflow:hidden; color:#675678; font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.queue-open { align-self:end; color:#fff; background:#5b47a2; padding:5px 6px; font:8px "DotGothic16",sans-serif; white-space:nowrap; }
.study-side-stack { display:grid; gap:14px; }.study-status-window header { display:flex; align-items:center; gap:6px; min-height:39px; border-bottom:1px solid #a9d7d5; padding:6px 9px; background:#e8f7f4 url('/assets/ngod-game/jine-background.png') right bottom/84px auto no-repeat; font-family:"DotGothic16",sans-serif; }.study-status-window header img { image-rendering:pixelated; }.study-status-window header span { display:grid; gap:2px; }.study-status-window header b { font-size:9px; }.study-status-window header small { color:#d0498e; font-size:7px; }.study-status-window>p { display:flex; align-items:flex-start; gap:6px; margin:0; padding:11px; color:#5b4978; font-size:11px; line-height:1.6; }.study-status-window>p img { flex:0 0 auto; image-rendering:pixelated; }.study-status-window dl { display:grid; gap:0; margin:0 11px 11px; }.study-status-window dl div { display:grid; grid-template-columns:1fr auto; align-items:center; min-height:31px; border-top:1px solid #b4a3cc; }.study-status-window dt { display:flex; align-items:center; gap:5px; color:#745a96; font-size:9px; }.study-status-window dt img { image-rendering:pixelated; }.study-status-window dd { margin:0; color:#46348f; font:8px "DotGothic16",sans-serif; }.study-webcam { margin:0; overflow:hidden; background:#d7eeec; }.study-webcam figcaption { border-bottom:1px solid var(--hub-line); padding:6px 8px; color:#5b438a; background:#ecd8ed; font:8px "DotGothic16",sans-serif; }.study-webcam img { display:block; width:100%; height:172px; object-fit:cover; object-position:center top; }
.reading-note { display:flex; align-items:center; gap:9px; margin-top:0!important; padding:10px; background:#fff9fe; }.reading-note>span { display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--hub-line); color:#fff; background:#e555a0; font-weight:900; }.reading-note div { min-width:0; }.reading-note b { color:#45318b; font-size:10px; }.reading-note p { margin:2px 0 0; color:#705d83; font-size:9px; line-height:1.45; }.reading-note a { margin-left:auto; color:#fff; background:#614aa6; padding:5px 6px; font:8px "DotGothic16",sans-serif; text-decoration:none; }
@media (max-width:1000px) { .reading-hub-content { width:min(880px,calc(100% - 118px)); }.study-desktop-grid { grid-template-columns:minmax(0,1fr) 235px; }.study-diary-body { padding-inline:18px; }.reading-heading { padding-left:22px; }.queue-copy b { font-size:14px; }.queue-cover { width:62px; }.reading-queue-row { grid-template-columns:30px 62px minmax(0,1fr); }.queue-open { display:none; }.study-webcam img { height:146px; } }
@media (max-width:680px) { .reading-hub-app { grid-template-rows:40px minmax(0,1fr); background-size:0; }.reading-hub-app::before { background:#f7e4f1; }.reading-hub-status,.reading-hub-titlebar small { display:none; }.reading-hub-titlebar>a { margin-left:auto; }.reading-hub-scroll { padding:10px 0 24px; }.reading-hub-content { width:calc(100% - 18px); }.study-desktop-grid { display:block; }.study-diary-body { padding:17px 11px 20px; background:linear-gradient(90deg,#fffaff 0 40px,#f2ecfb 40px 42px,#fffaff 42px); }.reading-heading { padding-left:18px; }.reading-heading h1 { font-size:30px!important; }.reading-heading p:not(.nso-kicker) { font-size:12px!important; }.reading-queue { margin-top:17px; }.reading-queue-row { grid-template-columns:27px 56px minmax(0,1fr); gap:7px; min-height:72px; }.queue-cover { width:56px; height:56px; }.queue-copy small { font-size:7px; }.queue-copy b { font-size:13px; }.queue-copy strong { font-size:10px; }.queue-copy em { display:none; }.study-side-stack { grid-template-columns:1fr; margin-top:13px; }.study-webcam { display:none; }.reading-note { min-height:55px; } }
@media (prefers-reduced-motion:reduce) { .reading-queue-row { transition:none; } }

/* The desktop frame already supplies window chrome. In an iframe, the queue's
   diary window is the one visible application surface, not a second launcher
   titlebar with another copy of the notepad mark. */
.reading-hub-app.is-desktop-embed { position: relative; inset: auto; width: 100%; min-height: 0; height: auto; grid-template-rows: auto; }
.reading-hub-app.is-desktop-embed .reading-hub-titlebar { display: none; }

/* The desktop frame is the Study application window. Its embedded content is
   a single reading surface, not another resizable diary window inside it. */
html:has(.reading-hub-app.is-desktop-embed),
body:has(.reading-hub-app.is-desktop-embed) { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.reading-hub-app.is-desktop-embed { min-height: 0 !important; height: auto !important; overflow: visible; }
.reading-hub-app.is-desktop-embed .reading-hub-scroll { min-height: 0; height: auto; overflow: visible; padding: 18px 0 24px; }
.reading-hub-app.is-desktop-embed .reading-hub-content { min-height: 0; height: auto; padding: 0; }
.reading-hub-app.is-desktop-embed .study-desktop-grid { min-height: 0; height: auto; align-items: start; }
.reading-hub-app.is-desktop-embed .study-diary-window { display: flex; flex-direction: column; min-height: 0; border: 0; box-shadow: none; background: transparent; }
.reading-hub-app.is-desktop-embed .study-window-titlebar { display: none; }
.reading-hub-app.is-desktop-embed .study-diary-body { flex: 0 0 auto; min-height: 0; padding: 30px 30px 34px; border: 0; background: linear-gradient(90deg,#fffaff 0 57px,#f2ecfb 57px 59px,#fffaff 59px); }
.reading-hub-app.is-desktop-embed .study-status-window,
.reading-hub-app.is-desktop-embed .study-webcam,
.reading-hub-app.is-desktop-embed .reading-note { box-shadow: none; }

@media (max-width: 680px) {
  .reading-hub-app.is-desktop-embed .reading-hub-content { height: auto; min-height: 0; padding: 10px 0 20px; }
  .reading-hub-app.is-desktop-embed .study-desktop-grid,
  .reading-hub-app.is-desktop-embed .study-diary-window { height: auto; min-height: 0; }
  .reading-hub-app.is-desktop-embed .study-diary-body { padding: 17px 11px 20px; }
}

/* The mobile launcher is a single desktop application.  Keep its file queue
   readable and let the iframe scroll the full application rather than clipping
   status windows below a fixed desktop-sized surface. */
@media (max-width: 620px) {
  .reading-hub-app.is-desktop-embed { display:block; min-height:100% !important; background:#f7dfea; }
  .reading-hub-app.is-desktop-embed .reading-hub-scroll { min-height:100%; overflow:auto; padding:0; }
  .reading-hub-app.is-desktop-embed .reading-hub-content { width:100%; min-height:100%; padding:0; }
  .reading-hub-app.is-desktop-embed .study-desktop-grid { display:block; }
  .reading-hub-app.is-desktop-embed .study-diary-body { padding:17px 11px 18px; }
  .reading-hub-app.is-desktop-embed .reading-heading { padding-left:18px; }
  .reading-hub-app.is-desktop-embed .reading-heading h1 { font-size:29px !important; }
  .reading-hub-app.is-desktop-embed .reading-heading p:not(.nso-kicker) { margin-top:10px; font-size:12px !important; }
  .reading-hub-app.is-desktop-embed .reading-queue { margin-top:16px; }
  .reading-hub-app.is-desktop-embed .study-side-stack { gap:10px; margin:0 11px 16px; }
  .reading-hub-app.is-desktop-embed .study-status-window { display:block; }
  .reading-hub-app.is-desktop-embed .study-webcam { display:none; }
  .reading-hub-app.is-desktop-embed .reading-note { margin:0 !important; }
}