/* Both scenes use the same complete frame and the same fixed paper anchors. */
.news-page { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: clip; background: #151814; color: #efe3cb; box-shadow: none; isolation: isolate; font-family: "Neucha", sans-serif; }
.news-page[open] { display: block; }
.news-page::backdrop { background: #10130f; }
.news-stage { position: absolute; left: 50%; top: 50%; width: max(100vw, 225dvh); aspect-ratio: 9 / 4; transform: translate(-50%, -50%); container-type: size; filter: brightness(var(--news-light, 1)); transition: filter 4.2s; }
.news-board-canvas { position: absolute; left: 16%; top: 0; width: 66.666667%; height: 100%; container-type: size; }
.news-page.is-uneasy .news-stage { transition: filter .75s ease-in-out; }
.news-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.news-scene--other { opacity: 0; transition: opacity 4.2s ease; }
.is-other .news-scene--other { opacity: 1; }
.news-control { position: fixed; z-index: 40; top: max(8px, env(safe-area-inset-top)); min-height: 44px; padding: 10px 16px; border: 1px solid #c8ba975c; border-radius: 3px; color: #eee2c6; background: #171c18b8; backdrop-filter: blur(5px); font: 17px/1.2 "Neucha", sans-serif; cursor: pointer; }
.news-control--back { left: max(12px, env(safe-area-inset-left)); }
.news-page button:focus-visible, .news-reader button:focus-visible { outline: 2px solid #d5bd7c; outline-offset: 3px; }
.news-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.news-notices { position: absolute; left: 26.5%; top: 43.5%; width: 48%; height: 22%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max(44px, calc((100% - 1.4cqh) / 2)); gap: 1.4cqh 1.6cqw; padding: .7cqh .6cqw; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #5f564357 transparent; }
.news-notices:focus-visible { outline: 1px dashed #b4a375; outline-offset: 3px; }
.news-note { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1.4cqh .9cqw .7cqh; text-align: center; border: 0; color: #3c3429; background: linear-gradient(115deg, #f7efd9, #e4d4b2); box-shadow: 1px 3px 4px #0005, inset 0 0 15px #b7975b25; transform: rotate(-.7deg); cursor: pointer; }
.news-note:nth-child(even) { transform: rotate(.6deg); background: linear-gradient(110deg, #e5dfc7, #cfc9ad); }
.news-note::before { content: ""; position: absolute; top: .7cqh; left: calc(50% - .22cqw); width: .44cqw; height: .44cqw; min-width: 4px; min-height: 4px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #c69862, #714426 65%, #30261e); box-shadow: 1px 1px 2px #0007; }
.news-note:hover { box-shadow: 2px 4px 6px #0007, inset 0 0 15px #b7975b25; }
.news-note__title { font: 400 max(13px, min(1.85cqw, 2.78cqh))/1.1 "Marck Script", cursive; display: block; }
.news-reader { position: fixed; max-width: min(660px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); width: 660px; box-sizing: border-box; padding: clamp(24px, 5vw, 54px); border: 1px solid #988268; color: #38352b; background: radial-gradient(ellipse at 30% 15%, #faf5e5, #e7dcc4); box-shadow: 0 16px 80px #0008; overscroll-behavior: contain; }
.news-reader::backdrop { background: #0f1513ba; backdrop-filter: blur(5px); }
.news-reader.is-other { background: radial-gradient(ellipse at 30% 15%, #eeece0, #c8c9b7); }
.news-reader button { border: 0; background: none; padding: 8px 0; margin-bottom: 28px; color: #585d49; cursor: pointer; font: 18px "Neucha", sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.news-reader time { font: 13px Arial, sans-serif; color: #756b57; }
.news-reader h2 { font: 400 clamp(28px, 5vw, 40px)/1.15 "Neucha", sans-serif; margin: 16px 0 25px; }
.news-reader p { font: 16px/1.7 Arial, sans-serif; white-space: pre-line; margin: 0 0 1.2em; }
.news-reader p:last-child { margin-bottom: 0; }

@media (max-height: 500px) and (orientation: landscape) {
  .news-control { font-size: 14px; padding-inline: 10px; }
  .news-notices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .news-page *, .news-page *::after { transition: none !important; }
}