/* 平成Y2Kゲームルーム 共通スタイル */
:root {
  --pink: #F7B7D2;
  --pink-deep: #E58BB3;
  --pink-soft: #FDE7F0;
  --lav: #C9B6F2;
  --lav-soft: #EFE8FC;
  --mint: #B9E8D5;
  --mint-soft: #E6F7F0;
  --blue: #B7D9F4;
  --blue-soft: #E7F2FC;
  --milk: #FFF8F3;
  --silver: #C5CAD4;
  --plum: #654B76;
  --ink: #3E2F4A;
  --muted: #7C6A88;

  --font-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  --font-pixel: "DotGothic16", "M PLUS Rounded 1c", monospace;
  --radius: 14px;
  --shadow: 5px 5px 0 var(--lav);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.7;
  background-color: var(--milk);
  background-image:
    radial-gradient(circle at 10% 10%, rgba(247, 183, 210, 0.45), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(201, 182, 242, 0.45), transparent 35%),
    radial-gradient(circle at 85% 90%, rgba(185, 232, 213, 0.5), transparent 35%),
    linear-gradient(rgba(101, 75, 118, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 75, 118, 0.05) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px, 24px 24px;
  background-attachment: fixed;
}

a { color: var(--plum); }

kbd {
  display: inline-block;
  min-width: 1.7em;
  margin: 0 2px;
  padding: 0 0.35em;
  font: 700 0.8em/1.6 var(--font-body);
  text-align: center;
  color: var(--plum);
  background: #fff;
  border: 1.5px solid var(--plum);
  border-bottom-width: 3px;
  border-radius: 6px;
}

/* ---------------- ヘッダー・フッター ---------------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 4px;
}

.logo {
  font-family: var(--font-pixel);
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  color: var(--plum);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.logo-heart { color: var(--pink-deep); margin-right: 4px; }
.logo-y2k { color: var(--pink-deep); text-shadow: 2px 2px 0 var(--lav); margin: 0 2px; }

.site-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.site-nav a {
  padding: 2px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--plum);
  border-radius: 999px;
}
.site-nav a:hover { background: var(--pink-soft); }

/* アカウント・セーブの状態 */
.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.account:empty { display: none; }
.account a { color: var(--plum); }
.account-name { color: var(--plum); }
.account-save.is-ok { color: #2E9A5B; }
.account-save.is-busy { color: var(--muted); }
.account-save.is-pending { color: var(--pink-deep); }

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

.catch {
  margin: 4px 0 12px;
  font-weight: 800;
  color: var(--muted);
  font-size: 0.95rem;
}

.site-footer {
  padding: 20px 16px 28px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1.5px dashed var(--lav);
}
.site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.site-footer p { margin: 8px 0 0; }

/* ---------------- ウィンドウ風の枠 ---------------- */

.room-window,
.window-dialog {
  background: #fff;
  border: 2px solid var(--plum);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(90deg, var(--pink), var(--lav), var(--blue));
  border-bottom: 2px solid var(--plum);
}
.win-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--plum);
}
.win-dot.is-pink { background: var(--pink); }
.win-dot.is-mint { background: var(--mint); }
.win-title {
  margin-left: 6px;
  font: 700 0.8rem var(--font-pixel);
  color: var(--plum);
  letter-spacing: 0.04em;
}
.win-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  font: 800 1rem/1 var(--font-body);
  color: var(--plum);
  background: #fff;
  border: 1.5px solid var(--plum);
  border-radius: 8px;
  cursor: pointer;
}
.win-close:hover { background: var(--pink-soft); }

/* ---------------- ゲームルーム ---------------- */

.stage {
  position: relative;
  background: #FDEFF6;
  /* 指でなぞって歩くので、ここではスクロールや長押しメニューを止める */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 画面の高さに収まる範囲で、できるだけ大きく表示する（縦横比が変わってもカメラが合わせる） */
#room {
  display: block;
  width: 100%;
  aspect-ratio: 344 / 272;
  max-height: calc(100vh - 210px);
  min-height: 280px;
  outline: none;
  touch-action: none;
}
#room:focus-visible { box-shadow: inset 0 0 0 3px var(--pink-deep); }

/* 表示の切り替え（回す・ズーム／ぜんたい） */
.view-ctrl {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
}
.view-btn {
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  font: 800 0.85rem var(--font-body);
  color: var(--plum);
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--plum);
  border-radius: 999px;
  cursor: pointer;
}
.view-btn.is-wide { padding: 0 12px; font-size: 0.8rem; }

/* 模様替え */
.deco-open {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 12px;
  font: 800 0.8rem var(--font-body);
  color: var(--plum);
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid var(--plum);
  border-radius: 999px;
  cursor: pointer;
}
.deco-open:hover { background: var(--pink-soft); }
.deco-open:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }
.deco-open[hidden] { display: none; }
.deco {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  background: var(--pink-soft);
  border-top: 2px solid var(--plum);
}
.deco[hidden] { display: none; }
.deco-help { margin: 0; font: 0.85rem var(--font-pixel); color: var(--plum); }
.deco-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.deco-sel[hidden] { display: none; }
.deco-variants { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.deco-variants[hidden] { display: none; }
.deco-variants-title { font-weight: 800; color: var(--plum); }
.deco-variant-list { display: flex; flex-wrap: wrap; gap: 6px; }
.deco-name { min-width: 6em; font-weight: 800; color: var(--plum); text-align: center; }
.deco-move { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 4px; margin-inline: 4px; }
.deco-btn {
  padding: 5px 12px;
  font: 800 0.82rem var(--font-body);
  color: var(--plum);
  background: #fff;
  border: 2px solid var(--plum);
  border-radius: 999px;
  cursor: pointer;
}
.deco-btn:hover:not([disabled]) { background: var(--lav-soft); }
.deco-btn:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }
.deco-btn[disabled] { color: var(--muted); border-color: #C9BFD2; cursor: not-allowed; }
.deco-btn.is-small { padding: 4px 9px; }
.deco-btn.is-arrow { width: 2.4em; padding: 3px 0; font-size: 1rem; line-height: 1.1; border-radius: 8px; }
.deco-btn.is-primary { background: var(--pink); }
.deco-btn[aria-pressed="true"] { background: var(--pink); border-color: var(--pink-deep); }
.deco-tray-wrap[hidden] { display: none; }
.deco-tray-title { margin: 0 0 4px; font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.deco-tray { display: flex; gap: 6px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; }
.deco-thing {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 72px;
  padding: 4px 6px;
  font: 800 0.72rem var(--font-body);
  color: var(--plum);
  background: #fff;
  border: 2px solid var(--lav);
  border-radius: 10px;
  cursor: pointer;
}
.deco-thing:hover { border-color: var(--plum); }
.deco-thing img { width: 36px; height: 36px; object-fit: contain; }
.deco-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* おためし（ショップの「部屋に置いてみる」）のときは、保存やしまうボタンを出さない */
.deco-preview-actions { display: none; justify-content: flex-end; }
.deco.is-preview .deco-preview-actions { display: flex; }
.deco.is-preview .deco-actions,
.deco.is-preview [data-deco="store"],
.deco.is-preview [data-deco="prev"],
.deco.is-preview [data-deco="next"] { display: none; }
.deco.is-preview { background: #FFF6D6; }

/* 体力（ハート）：部屋の左上 */
.hearts-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font: 0.8rem var(--font-pixel);
  color: var(--plum);
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--plum);
  border-radius: 999px;
  cursor: pointer;
}
.hearts-hud:hover { background: var(--pink-soft); }
.hearts-hud:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }
.hearts-hud.is-empty .hearts-timer { color: var(--pink-deep); }
.hearts-timer { min-width: 2.6em; text-align: left; }

.heart-row { display: inline-flex; gap: 2px; }
.heart { display: block; width: 18px; height: 16px; shape-rendering: crispEdges; }
.heart .heart-line { fill: var(--plum); }
.heart.is-full .heart-fill { fill: #FF6FA8; }
.heart.is-full .heart-shine { fill: #fff; }
.heart.is-empty .heart-fill, .heart.is-empty .heart-shine { fill: #EDE6F2; }
.heart.is-empty .heart-line { fill: #B9A9C6; }
.rack-heart { color: #FF6FA8; }
.view-btn:hover { background: var(--pink-soft); }
.view-btn:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }

.hint {
  margin: 0;
  padding: 8px 14px;
  min-height: 2.6em;
  font: 0.9rem var(--font-pixel);
  color: var(--plum);
  background: var(--lav-soft);
  border-top: 2px solid var(--plum);
}

.dialog {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  padding: 16px 20px 14px;
  font-family: var(--font-pixel);
  font-size: clamp(0.85rem, 2.6vw, 1.1rem);
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid var(--plum);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--pink);
  cursor: pointer;
}
.dialog-name {
  position: absolute;
  top: -14px;
  left: 14px;
  margin: 0;
  padding: 0 12px;
  font-size: 0.8em;
  line-height: 1.7;
  color: var(--plum);
  background: var(--mint);
  border: 2px solid var(--plum);
  border-radius: 999px;
}
.dialog-text { margin: 0; min-height: 3.2em; white-space: pre-wrap; }
.dialog-next {
  position: absolute;
  right: 14px;
  bottom: 6px;
  font-size: 0.75em;
  color: var(--pink-deep);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* スマートフォン用の操作パッド（タッチ端末だけ表示。判定は main.js が html に is-touch を付ける） */
.pad { display: none; }
.is-touch .pad[hidden] { display: none; } /* 模様替えの間はかくす */

.is-touch .pad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 16px;
  background: var(--milk);
  border-top: 2px solid var(--plum);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.pad-help {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.6;
}

/* なぞって移動するときのスティック表示 */
.stick {
  position: absolute;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border: 2px solid rgba(101, 75, 118, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid var(--plum);
  border-radius: 50%;
  background: rgba(247, 183, 210, 0.9);
}

.act-btn {
  flex: none;
  font-family: var(--font-body);
  color: var(--plum);
  border: 2px solid var(--plum);
  touch-action: none;
  cursor: pointer;
  width: 84px;
  height: 84px;
  font-size: 1rem;
  font-weight: 800;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--lav);
}
.act-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lav); }
.pad.has-target .act-btn { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { background: #FAD0E2; } }

/* ---------------- 広告枠 ---------------- */

.ad-slot {
  margin: 20px 0 0;
  padding: 10px;
  text-align: center;
  background: #fff;
  border: 1.5px dashed var(--silver);
  border-radius: 10px;
}
.ad-label {
  display: inline-block;
  margin-bottom: 6px;
  padding: 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--silver);
  border-radius: 999px;
}

/* ---------------- あそびかた ---------------- */

.howto { margin-top: 28px; }
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font: 1.25rem var(--font-pixel);
  color: var(--plum);
}
.section-title span { color: var(--pink-deep); }

.steps {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: s;
  display: grid;
  gap: 6px;
}
.steps li {
  counter-increment: s;
  position: relative;
  padding: 8px 12px 8px 44px;
  background: #fff;
  border: 1.5px solid var(--silver);
  border-radius: 10px;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  color: #fff;
  background: var(--plum);
  border-radius: 50%;
}

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.control-card {
  padding: 12px 16px;
  background: var(--pink-soft);
  border: 2px solid var(--plum);
  border-radius: 12px;
}
.control-card:nth-child(2) { background: var(--mint-soft); }
.control-card h3 { margin: 0 0 6px; font-size: 1rem; color: var(--plum); }
.control-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.control-card dt { font-weight: 800; }
.control-card dd { margin: 0; }

/* ---------------- ゲームラック ---------------- */

.window-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  color: var(--ink);
}
.window-dialog[open] { display: flex; flex-direction: column; animation: pop-in 0.18s ease-out; }
.window-dialog::backdrop { background: rgba(101, 75, 118, 0.35); }
@keyframes pop-in { from { transform: scale(0.94); opacity: 0; } }

.rack-body { padding: 12px 16px 16px; overflow-y: auto; }

/* お知らせ・運営情報・プライバシーポリシー・お問い合わせ（assets/js/info.js） */
.info-dialog { width: min(640px, calc(100vw - 32px)); }
.info-body { padding: 14px 20px 20px; overflow-y: auto; line-height: 1.8; font-size: 0.95rem; overflow-wrap: anywhere; }
.info-body > :first-child, .info-wp > :first-child { margin-top: 0; }
.info-p, .info-wp p { margin: 0 0 0.8em; }
.info-h, .info-wp h2, .info-wp h3, .info-wp h4 {
  margin: 1.2em 0 0.4em;
  padding-left: 0.6em;
  font-size: 1rem;
  color: var(--plum);
  border-left: 4px solid var(--pink-deep);
}
.info-ul, .info-wp ul, .info-wp ol { margin: 0 0 0.8em; padding-left: 1.4em; }
.info-ul li::marker, .info-wp ul li::marker { color: var(--pink-deep); }
.info-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em 1em; margin: 0 0 1em; padding: 0.8em 1em; background: var(--lav-soft); border-radius: 10px; }
.info-dl dt { font-weight: 800; color: var(--plum); }
.info-dl dd { margin: 0; }
.info-wp img { max-width: 100%; height: auto; }
.info-wp a, .info-body a:not(.info-btn) { color: var(--pink-deep); }
.info-loading { color: var(--muted); }
.info-note { padding: 0.6em 0.9em; color: var(--plum); background: #FFF6D6; border-radius: 8px; }
.info-actions { text-align: center; margin-top: 1em; }
.info-btn { display: inline-block; padding: 0.5em 1.4em; font-weight: 800; color: #fff; text-decoration: none; background: var(--pink-deep); border: 2px solid var(--plum); border-radius: 999px; box-shadow: 0 3px 0 var(--plum); }
.info-news { list-style: none; margin: 0; padding: 0; }
/* お問い合わせフォーム */
.cf { display: grid; gap: 0.7em; margin-top: 1em; padding: 1em; background: var(--lav-soft); border-radius: 12px; }
.cf-field { display: grid; gap: 0.25em; }
.cf-label { font-weight: 800; color: var(--plum); font-size: 0.9em; }
.cf-note { font-size: 0.8em; color: var(--muted); }
.cf input[type="text"], .cf input[type="email"], .cf select, .cf textarea {
  width: 100%; padding: 0.45em 0.6em; font: inherit; color: var(--ink); background: #FFFFFF;
  border: 1.5px solid var(--lav); border-radius: 8px; box-sizing: border-box;
}
.cf textarea { resize: vertical; min-height: 7em; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: 2px solid var(--pink-deep); outline-offset: 0; }
.cf-agree { font-size: 0.9em; }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-error { min-height: 1em; margin: 0; font-weight: 800; color: #E8515F; font-size: 0.9em; }
.cf-done { margin: 0; font-weight: 800; color: var(--pink-deep); }
.info-btn:disabled { opacity: 0.6; }
button.info-btn { font: inherit; font-weight: 800; cursor: pointer; }
.info-news-item { border-bottom: 1.5px dashed var(--lav); }
.info-news-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.9em; width: 100%;
  padding: 0.7em 0.2em; font: inherit; text-align: left; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.info-news-head::after { content: "＋"; margin-left: auto; color: var(--pink-deep); font-weight: 800; }
.info-news-head[aria-expanded="true"]::after { content: "−"; }
.info-news-head:hover .info-news-title, .info-news-head:focus-visible .info-news-title { color: var(--pink-deep); }
.info-date { flex: none; font-size: 0.85em; color: var(--muted); }
.info-news-title { flex: 1 1 14em; font-weight: 800; }
.info-news-body { padding: 0 0.2em 0.8em; }
@media (max-width: 480px) {
  .info-body { padding: 12px 14px 16px; font-size: 0.9rem; }
  .info-dl { grid-template-columns: 1fr; gap: 0.1em; }
  .info-dl dd { margin-bottom: 0.5em; }
}

/* たいりょくウィンドウ */
.window-dialog.is-small { width: min(360px, calc(100vw - 32px)); }
.hearts-body {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 16px 18px;
  text-align: center;
}
.hearts-body .heart { width: 36px; height: 32px; }
.hearts-body .heart-row { gap: 4px; }
.hearts-body p { margin: 0; }
.hearts-alert { font: 1.05rem var(--font-pixel); color: var(--pink-deep); }
.hearts-lead { font-weight: 800; color: var(--plum); white-space: pre-line; line-height: 1.6; }
.hearts-count { font: 1.1rem var(--font-pixel); color: var(--plum); }
.hearts-next { font: 0.85rem var(--font-pixel); color: var(--plum); }
.hearts-help { font-size: 0.78rem; color: var(--muted); white-space: pre-line; line-height: 1.6; }
.hearts-message { font-weight: 800; color: var(--pink-deep); white-space: pre-line; }
.hearts-actions { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.hearts-btn {
  padding: 8px 12px;
  font: 800 0.9rem var(--font-body);
  color: var(--plum);
  background: #fff;
  border: 2px solid var(--plum);
  border-radius: 999px;
  cursor: pointer;
}
.hearts-btn:hover:not([disabled]) { background: var(--pink-soft); }
.hearts-btn.is-primary { background: var(--pink); }
.hearts-btn.is-ad { background: var(--mint-soft); }
.hearts-btn[disabled] { color: var(--muted); background: #F1EEF3; border-color: #C9BFD2; cursor: not-allowed; }
.hearts-btn:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }
a.hearts-btn { display: block; text-align: center; text-decoration: none; }

/* おやすみ（ベッド）・アカウントについて */
.sleep-body { display: grid; gap: 8px; padding: 16px 16px 18px; text-align: center; max-height: calc(100vh - 120px); overflow-y: auto; }
.sleep-body p { margin: 0; }
.sleep-moon { font-size: 2rem; line-height: 1; color: #B7A2E8; }
.sleep-lead { font-weight: 800; color: var(--plum); }
.sleep-text { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* とどいた荷物（ドア） */
.delivery-box { font-size: 2rem; line-height: 1; }
.delivery-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; text-align: left; max-height: 240px; overflow-y: auto; }
.delivery-item { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 2px solid var(--lav-soft); border-radius: 10px; background: #fff; }
.delivery-icon { position: relative; flex: none; width: 40px; height: 40px; }
.delivery-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.delivery-name { font-weight: 700; color: var(--plum); font-size: 0.9rem; }
.delivery-whisper { font-size: 0.8rem; color: #A69BB4; font-style: italic; }
.sleep-notes { margin: 0; padding: 10px 12px 10px 28px; text-align: left; font-size: 0.8rem; line-height: 1.6; color: var(--ink); background: #FFF6D6; border-radius: 10px; }
.sleep-notes li + li { margin-top: 4px; }
.account-about { padding: 0; font: inherit; color: var(--plum); background: none; border: 0; text-decoration: underline dotted; cursor: pointer; }

/* 広告のテスト表示（config.js の ads.rewarded.provider が 'test' のとき） */
.ad-test {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 16px;
  color: #fff;
  text-align: center;
  background: rgba(30, 20, 40, 0.97);
}
.ad-test p { margin: 0; }
.ad-test-label { font: 0.8rem var(--font-pixel); padding: 2px 10px; border: 1px solid #fff; }
.ad-test-body {
  display: grid;
  place-content: center;
  width: min(320px, 80vw);
  aspect-ratio: 16 / 9;
  font-size: 0.85rem;
  background: repeating-linear-gradient(45deg, #3a2c48 0 12px, #46365a 12px 24px);
  border: 2px dashed #b9a9c6;
}
.ad-test-count { font: 1rem var(--font-pixel); }
.ad-test-close {
  padding: 8px 18px;
  font: 800 0.9rem var(--font-body);
  color: var(--plum);
  background: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.rack-lead { margin: 0 0 10px; font-size: 0.8rem; color: var(--muted); }
.rack-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.cartridge {
  display: flex;
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: #fff;
  border: 2px solid var(--plum);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cartridge:hover,
.cartridge:focus-visible {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--pink);
}
.cartridge[aria-disabled="true"] { cursor: not-allowed; background: #F7F5FA; }
.cartridge[aria-disabled="true"] .cartridge-title { color: var(--muted); }
.cartridge-spine {
  flex: none;
  width: 18px;
  background: var(--label);
  border-right: 2px solid var(--plum);
  background-image: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255, 255, 255, 0.45) 6px 8px);
}
.cartridge-body { display: grid; gap: 2px; padding: 8px 12px; }
.cartridge-title { font: 1.05rem var(--font-pixel); color: var(--plum); }
.cartridge-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.72rem; font-weight: 700; }
.cartridge-meta > span {
  padding: 0 8px;
  border: 1px solid var(--plum);
  border-radius: 999px;
  background: var(--lav-soft);
}
.cartridge-status { background: #EEE !important; color: var(--muted); }
.cartridge-status.is-playable { background: var(--mint) !important; color: var(--plum); }
.cartridge-best { background: var(--pink-soft) !important; }
.cartridge-desc { font-size: 0.82rem; color: var(--muted); }
.cartridge-reward { display: block; margin-top: 2px; font-size: 0.76rem; font-weight: 800; color: #B7791F; }
.cartridge-reward[hidden] { display: none; }
.cartridge.is-shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------------- ブラウン管テレビ ---------------- */

.crt {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  background: transparent;
  border: 0;
}
.crt[open] { display: grid; place-items: center; }
.crt::backdrop { background: rgba(40, 28, 52, 0.82); }

.crt-bezel {
  --screen-w: min(calc(100vw - 230px), calc((100vh - 180px) * 4 / 3), 900px);
  --frame-pink: #F2A6D6;
  --frame-purple: #4E3484;
  position: relative;
  padding: 12px 16px 14px;
  /* 外わく：ピンクのプラスチック（ふちにドットのでこぼこ） */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 12px) top / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(120, 40, 110, 0.18) 0 4px, transparent 4px 12px) bottom / 100% 6px no-repeat,
    linear-gradient(180deg, #F9C4E6, var(--frame-pink) 45%, #D883C0);
  border: 4px solid #6A3C7E;
  border-radius: 30px;
  box-shadow: inset 0 0 0 3px #FFD9F0, inset 0 0 0 6px #C86DB0, 8px 8px 0 rgba(201, 182, 242, 0.85);
  image-rendering: pixelated;
}
/* 中のむらさきの板 */
.crt-bezel::before {
  content: "";
  position: absolute;
  inset: 12px 16px 14px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px) 0 0 / 10px 10px,
    linear-gradient(180deg, #5B3E95, var(--frame-purple) 60%, #3E2A6C);
  border: 3px solid #2E1D52;
  border-radius: 22px;
  box-shadow: inset 0 0 0 3px #8C6CCB;
  pointer-events: none;
}
.crt-bezel > * { position: relative; }
.crt-logo {
  margin: 0;
  padding: 8px 0 4px;
  text-align: center;
  font: clamp(18px, 3.2vw, 36px)/1 var(--font-pixel);
  letter-spacing: 0.12em;
  color: #F7F0FF;
  text-shadow: 0 3px 0 #2E1D52;
}
.crt-body { display: flex; align-items: stretch; gap: 0; padding: 0 6px; }
.crt-side {
  position: relative;
  flex: 0 0 72px;
}
.tv-deco { position: absolute; image-rendering: pixelated; pointer-events: none; }
.d-heart-white { width: 40px; left: 14px; top: -34px; }
.d-spark-a { width: 18px; left: 10px; top: 22px; }
.d-gem-blue { width: 22px; left: 18px; bottom: 96px; }
.d-heart-big { width: 44px; left: 12px; bottom: 34px; animation: tv-bob 2.6s ease-in-out infinite; }
.d-flower { width: 22px; left: 32px; bottom: 6px; }
.d-heart-pink { width: 50px; right: 6px; top: -38px; animation: tv-bob 2.2s ease-in-out infinite; }
.d-star { width: 44px; right: 8px; top: 30px; animation: tv-twinkle 1.8s steps(2) infinite; }
.d-spark-b { width: 18px; right: 24px; top: 92px; }
.d-gem-small { width: 16px; right: 34px; bottom: 30px; }
@keyframes tv-bob { 50% { transform: translateY(-4px); } }
@keyframes tv-twinkle { 50% { filter: brightness(1.25); } }
.crt-led {
  position: absolute;
  left: 4px;
  top: 34%;
  display: grid;
  justify-items: center;
  gap: 2px;
  font: 0.95rem var(--font-pixel);
  letter-spacing: 0.06em;
  color: #F3EAFF;
  text-shadow: 0 2px 0 #2E1D52;
}
.crt-led img { width: 52px; image-rendering: pixelated; }
.crt.is-booting .crt-led img { animation: tv-led 0.7s steps(2) 2; }
@keyframes tv-led { 50% { filter: brightness(0.5); } }
.crt-screen {
  position: relative;
  flex: none;
  width: var(--screen-w);
  aspect-ratio: 4 / 3;
  background: #111522;
  /* 画面のまわりの黒いふち */
  border: 6px solid #15101F;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #8C6CCB, 0 0 0 5px #2E1D52;
  overflow: hidden;
}
.crt-screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #111522;
}
.crt-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.12), transparent 40%),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.3));
}
.crt-power {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}
.crt-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 86px 8px;
  color: #F3EAFF;
}
.crt-title { font: 0.95rem var(--font-pixel); flex: 1; text-align: center; letter-spacing: 0.06em; }
.crt-exit {
  font: 800 0.85rem var(--font-body);
  color: var(--plum);
  padding: 4px 14px;
  background: linear-gradient(#FFD0E6, #F28FC4);
  border: 2px solid #2E1D52;
  border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 2px 0 #2E1D52;
  cursor: pointer;
}
.crt-exit kbd { font-size: 0.7rem; }

/* 下の帯の「Y2K VISION」は、前のシルバーの枠のときだけ */
.crt-brand { display: none; font: 0.75rem var(--font-pixel); letter-spacing: 0.15em; opacity: 0.7; }

/* 前のシルバーのテレビの枠（data/games.js で tv: 'classic' のゲーム。もちもっち） */
.crt.is-classic .crt-bezel {
  --screen-w: min(calc(100vw - 72px), calc((100vh - 150px) * 4 / 3), 960px);
  padding: 22px 22px 12px;
  background: linear-gradient(160deg, #EEF0F5, var(--silver) 60%, #A9AFBD);
  border: 3px solid var(--plum);
  border-radius: 34px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2), 8px 8px 0 var(--lav);
}
.crt.is-classic .crt-bezel::before,
.crt.is-classic .crt-logo,
.crt.is-classic .crt-side { display: none; }
.crt.is-classic .crt-body { padding: 0; }
.crt.is-classic .crt-screen {
  border: 3px solid var(--plum);
  border-radius: 26px / 22px;
  box-shadow: none;
}
.crt.is-classic .crt-glass {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.12), transparent 40%),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35));
}
.crt.is-classic .crt-panel { padding: 10px 0 0; color: var(--plum); }
.crt.is-classic .crt-brand { display: inline; }
.crt.is-classic .crt-exit {
  background: var(--pink);
  border-color: var(--plum);
  box-shadow: none;
}

/* パチスロ台の画面（data/games.js で tv: 'cabinet' のゲーム。ラブドリーム）：テレビのかざりを外して、ピンクの台の枠にする */
.crt.is-cabinet .crt-bezel {
  padding: 14px 14px 10px;
  background: linear-gradient(160deg, #FFD3E8, #F48DC0 55%, #C2448A);
  border: 3px solid var(--plum);
  border-radius: 22px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25), 8px 8px 0 var(--lav);
}
.crt.is-cabinet .crt-bezel::before,
.crt.is-cabinet .crt-logo,
.crt.is-cabinet .crt-side,
.crt.is-cabinet .crt-glass { display: none; }
.crt.is-cabinet .crt-body { padding: 0; }
.crt.is-cabinet .crt-screen { border: 3px solid var(--plum); border-radius: 12px; box-shadow: none; }
.crt.is-cabinet .crt-panel { padding: 8px 0 0; color: #FFFFFF; }
.crt.is-cabinet .crt-exit { background: #FFF4FA; border-color: var(--plum); box-shadow: none; }

/* 電源ON：横一本の線から画面が広がる */
.crt.is-booting iframe { animation: crt-on 0.7s ease-out both; }
.crt.is-booting .crt-power { animation: crt-flash 0.7s ease-out both; }
@keyframes crt-on {
  0% { transform: scale(1, 0.004); filter: brightness(4); }
  45% { transform: scale(1, 0.004); filter: brightness(4); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
@keyframes crt-flash {
  0% { opacity: 0; transform: scale(0.02, 0.004); }
  30% { opacity: 1; transform: scale(1, 0.004); }
  60% { opacity: 0.8; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}

/* 電源OFF：画面がつぶれて光の点になって消える */
.crt.is-off iframe { animation: crt-off 0.5s ease-in both; }
.crt.is-off .crt-power { animation: crt-off-flash 0.5s ease-in both; }
@keyframes crt-off {
  0% { transform: scale(1, 1); filter: brightness(1); }
  55% { transform: scale(1, 0.004); filter: brightness(4); }
  100% { transform: scale(0, 0.004); filter: brightness(4); }
}
@keyframes crt-off-flash {
  0% { opacity: 0; }
  40% { opacity: 0.8; transform: scale(1, 0.004); }
  100% { opacity: 0; transform: scale(0, 0.004); }
}

/* ---------------- パソコン（デスクトップ・ショップ） ---------------- */

.pc {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 12px;
  background: transparent;
  border: 0;
}
.pc[open] { display: grid; place-items: center; }
.pc::backdrop { background: rgba(40, 28, 52, 0.82); }
.pc-frame { display: grid; justify-items: center; gap: 10px; }

.pc-screen {
  container: pcscreen / inline-size;
  position: relative;
  width: min(calc(100vw - 24px), calc(100vh - 90px), 860px);
  aspect-ratio: 1;
  border-radius: 4%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.pc.is-booting .pc-screen { animation: crt-on 0.6s ease-out both; }
.pc-desktop { display: block; width: 100%; height: 100%; max-width: none; }

.pc-icon {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 2px dashed transparent;
  border-radius: 8px;
  cursor: pointer;
}
.pc-icon:hover,
.pc-icon:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.85);
}

.pc-close {
  font: 800 0.9rem var(--font-body);
  color: var(--plum);
  padding: 6px 18px;
  background: var(--pink);
  border: 2px solid var(--plum);
  border-radius: 999px;
  cursor: pointer;
}
.pc-close kbd { font-size: 0.7rem; }

/* デスクトップの画面部分（枠の内側）。ウィンドウはこの中に開く */
.pc-windows {
  position: absolute;
  inset: 6% 5% 5% 6%;
  pointer-events: none;
}

/* ウィンドウ（SHOP! のデザインに合わせた平成のOS風） */
.win {
  --bevel-light: #FFFFFF;
  --bevel-dark: #8E889A;
  /* 左側のアイコンを隠さないよう、右寄せで開く */
  position: absolute;
  right: 1.5%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  width: 62%;
  max-height: 92%;
  font-size: clamp(11px, 2.3cqw, 17px);
  color: var(--ink);
  background: linear-gradient(135deg, #DCD3F5, #F3D3E4);
  border: 0.45cqw solid #A79FB4;
  border-radius: 1cqw;
  box-shadow: inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.7), 0.8cqw 0.8cqw 0 rgba(60, 40, 80, 0.25);
  pointer-events: auto;
  animation: pop-in 0.15s ease-out;
}
.win.is-small { width: 52%; }
.win.is-note { width: 60%; }
.win.is-maximized { left: 0; right: auto; top: 0; transform: none; width: 100%; height: 100%; max-height: none; }

.win-titlebar {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.1cqw 1.3cqw 1cqw 1.8cqw;
  cursor: grab;
  touch-action: none;
}
.win-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 英字は太いドットフォント、日本語は DotGothic16 */
  font-family: "Press Start 2P", var(--font-pixel);
  font-size: clamp(12px, 2.9cqw, 24px);
  line-height: 1.3;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  -webkit-text-stroke: max(3px, 0.6cqw) #3E3550;
  paint-order: stroke fill;
  text-shadow: max(1px, 0.3cqw) max(2px, 0.4cqw) 0 #3E3550;
}
.win-btns { display: flex; gap: 0.7cqw; }
.win-btn {
  position: relative;
  width: max(22px, 5cqw);
  height: max(19px, 4.3cqw);
  padding: 0;
  background: #DAD7E0;
  border: max(2px, 0.35cqw) solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  cursor: pointer;
}
.win-btn:active { border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); }
.win-btn:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 1px; }
.win-btn::before { content: ""; position: absolute; }
.win-btn.is-min::before { left: 24%; right: 24%; bottom: 22%; height: 18%; background: #1F1A28; }
.win-btn.is-max::before { inset: 18% 22%; border: max(2px, 0.35cqw) solid #1F1A28; border-top-width: max(3px, 0.7cqw); }
.win-btn.is-close::before,
.win-btn.is-close::after { left: 46%; top: 12%; width: 12%; height: 76%; background: #1F1A28; transform: rotate(45deg); }
.win-btn.is-close::after { content: ""; position: absolute; transform: rotate(-45deg); }

.win-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 1.8cqw 1.8cqw;
  background: #F4F3F6;
  border: max(2px, 0.4cqw) solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  overflow: hidden;
}
.win-text { margin: 0; padding: 1.2em; white-space: pre-line; line-height: 1.7; font-family: var(--font-pixel); }
.win-note {
  margin: 0;
  padding: 1em 1.2em;
  max-height: 24em;
  overflow: auto;
  font: 1em/1.8 var(--font-pixel);
  white-space: pre-wrap;
  background: #FFFFFF;
}
.win-note-small { margin: 0; padding: 0.6em 1.2em 1em; font-size: 0.82em; color: var(--muted); }
.win-note-small a { color: var(--plum); }
.win-spec { display: grid; grid-template-columns: auto 1fr; gap: 0.3em 1em; margin: 0; padding: 1.2em; font-family: var(--font-pixel); }
.win-spec dt { color: var(--muted); }
.win-spec dd { margin: 0; }

/* デスクトップ画像にないアイコン（インターネット）：絵と名前を重ねて描く */
.pc-icon.is-drawn { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4%; padding-bottom: 2%; }
.pc-icon-img { width: 74%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0.3cqw 0 rgba(62, 53, 80, 0.35)); }
/* デスクトップ画像のアイコン名（太い白い字・こい紫の地）に合わせる */
.pc-icon-label {
  padding: 0.1cqw 0.7cqw;
  font: 700 clamp(9px, 2.6cqw, 22px)/1.3 var(--font-body);
  color: #FFFFFF;
  white-space: nowrap;
  background: rgba(62, 53, 80, 0.82);
  border-radius: 0.5cqw;
  -webkit-text-stroke: max(1px, 0.2cqw) #2E2640;
  paint-order: stroke fill;
}
.win-actions { padding: 0 1.2em 1.2em; }

/* ---------- ブラウザ（Heart Navigator） ---------- */
.win.is-browser { right: auto; left: 2%; width: 96%; height: 94%; max-height: none; }
.web { display: flex; flex-direction: column; flex: 1; min-height: 0; font-family: var(--font-pixel); user-select: text; -webkit-user-select: text; }
.win.is-browser .win-body { flex: 1; }
.web-toolbar, .web-addressbar { display: flex; align-items: center; gap: 0.5em; padding: 0.35em 0.5em; background: #E7E4EC; border-bottom: 1px solid #C9C4D2; }
.web-btn, .web-go, .web-favs button {
  min-width: 2.2em;
  padding: 0.15em 0.5em;
  font: inherit;
  color: var(--ink);
  background: #DAD7E0;
  border: max(2px, 0.3cqw) solid;
  border-color: #FFFFFF #8E889A #8E889A #FFFFFF;
  cursor: pointer;
}
.web-btn:active, .web-go:active { border-color: #8E889A #FFFFFF #FFFFFF #8E889A; }
.web-btn:disabled { color: #A9A3B3; cursor: default; }
.web-label { font-size: 0.85em; color: var(--muted); white-space: nowrap; }
.web-address {
  flex: 1;
  min-width: 0;
  padding: 0.2em 0.4em;
  font: 0.95em var(--font-pixel);
  color: #1F1A28;
  background: #FFFFFF;
  border: max(2px, 0.3cqw) solid;
  border-color: #8E889A #FFFFFF #FFFFFF #8E889A;
}
.web-favs { display: grid; gap: 2px; margin: 0; padding: 0.4em; list-style: none; background: #F4F3F6; border-bottom: 1px solid #C9C4D2; }
.web-favs[hidden] { display: none; }
.web-favs button { width: 100%; text-align: left; }
.web-page { flex: 1; min-height: 0; overflow: auto; padding: 0.8em 1em 1.4em; background: #FFFFFF; color: #1F1A28; line-height: 1.6; outline: none; }
.web-page a { color: #1D3FD8; text-decoration: underline; cursor: pointer; }
.web-page a:visited { color: #7A2BB8; }
.web-page h1, .web-page h2, .web-page h3 { margin: 0.4em 0; line-height: 1.3; }
.web-page h1 { font-size: 1.4em; }
.web-page h2 { font-size: 1.1em; }
.web-page h3 { font-size: 1em; }
.web-page p { margin: 0.4em 0; }
.web-page ul, .web-page ol { margin: 0.3em 0; padding-left: 1.4em; }
.web-small { font-size: 0.8em; color: #6A6474; }
.web-url { display: block; font-size: 0.8em; color: #2A8A3A; }
.web-status { display: flex; align-items: center; gap: 0.6em; padding: 0.2em 0.5em; font-size: 0.8em; background: #E7E4EC; border-top: 1px solid #C9C4D2; }
.web-status-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.web-progress { width: 22%; height: 0.8em; background: #FFFFFF; border: 1px solid #8E889A; }
.web-progress > span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #1D3FD8 0 6px, transparent 6px 8px); }
.web-zone { white-space: nowrap; }
.web-action { margin-top: 0.3em; padding: 0.2em 0.8em; font: inherit; color: #FFFFFF; background: #E05A9A; border: 2px outset #F4A9CB; cursor: pointer; }

/* 流れる文字 */
.web-marquee { overflow: hidden; white-space: nowrap; margin: 0.5em 0; padding: 0.15em 0; background: #FFFBCC; border: 1px solid #E3D77A; }
.web-marquee > span { display: inline-block; padding-left: 100%; animation: web-marquee 14s linear infinite; }
.web-marquee.is-pink { background: #FFE3F1; border-color: #F4A9CB; color: #D0337A; }
@keyframes web-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .web-marquee > span { animation: none; padding-left: 0; } }

/* 平成ナビ */
.site-portal { background: #FFFFFF; }
.portal-head { display: flex; align-items: baseline; gap: 1em; flex-wrap: wrap; border-bottom: 3px double #1D3FD8; padding-bottom: 0.3em; }
.web-page .portal-logo { font: 1.7em "Press Start 2P", var(--font-pixel); text-decoration: none; color: #E05A9A; letter-spacing: 0.04em; }
.portal-logo b { color: #1D3FD8; }
.portal-catch { color: #6A6474; font-size: 0.85em; }
.portal-search { display: flex; gap: 0.4em; margin: 0.6em 0; }
.portal-search input { flex: 1; min-width: 0; padding: 0.2em 0.4em; font: inherit; border: 2px inset #C9C4D2; }
.portal-search button { padding: 0.15em 1em; font: inherit; background: #DAD7E0; border: 2px outset #FFFFFF; cursor: pointer; }
.portal-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: 0.8em; }
.portal-box { border: 1px solid #B7C3F4; }
.portal-box h2 { margin: 0; padding: 0.15em 0.5em; font-size: 0.95em; color: #FFFFFF; background: #4F6BE0; }
.portal-cats, .portal-news { margin: 0.4em 0.6em; }
.portal-cats dt { font-weight: 700; }
.portal-cats dd { margin: 0 0 0.3em 1em; }
.portal-results li { margin-bottom: 0.6em; }

/* ゆめかわ☆ぱらだいす */
.site-yume { background: #FFF0F7 repeating-linear-gradient(45deg, transparent 0 14px, rgba(255, 182, 214, 0.25) 14px 16px); color: #6A3A5C; text-align: center; }
.yume-title { color: #FF5FA8; text-shadow: 2px 2px 0 #FFFFFF, 3px 3px 0 #C9B6F2; }
.yume-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3em 0.9em; margin: 0.4em 0; }
.site-yume a { color: #E0338A; }
.yume-counter { margin: 0.6em 0; }
.yume-digits { display: inline-block; padding: 0 0.3em; font-family: "Press Start 2P", monospace; color: #7CFF7C; background: #1F1A28; letter-spacing: 0.15em; }
.yume-kiri { color: #E0338A; font-weight: 700; animation: yume-blink 1s steps(2) infinite; }
@keyframes yume-blink { 50% { opacity: 0.2; } }
.yume-box { margin: 0.8em auto; padding: 0.4em 0.9em 0.7em; max-width: 34em; text-align: left; background: #FFFFFF; border: 2px dotted #FF9CCB; border-radius: 10px; }
.yume-box h2 { text-align: center; color: #FF5FA8; }
.yume-box.is-dark { background: #1F1A28; color: #D9D2E8; border-color: #6A6474; }
.yume-box.is-dark h2 { color: #B9A8E8; }
.yume-prof { display: grid; grid-template-columns: auto 1fr; gap: 0.2em 1em; margin: 0; }
.yume-prof dt { color: #FF5FA8; }
.yume-prof dd { margin: 0; }
.yume-construction { color: #C27A00; font-weight: 700; }
.yume-form { display: grid; gap: 0.4em; margin: 0.5em 0 0.8em; }
.yume-form input, .yume-form textarea { font: inherit; padding: 0.2em 0.4em; border: 2px solid #FFB6D6; border-radius: 6px; }
.yume-form button { justify-self: start; padding: 0.2em 1.2em; font: inherit; color: #FFFFFF; background: #FF7EB9; border: 2px solid #E0338A; border-radius: 999px; cursor: pointer; }
.yume-bbs { margin: 0; padding: 0; list-style: none; }
.yume-bbs li { padding: 0.4em 0; border-top: 1px dashed #FFB6D6; }
.yume-bbs-head { color: #9A6A8A; font-size: 0.85em; }
.yume-foot { margin-top: 1.2em; font-size: 0.8em; color: #B07AA0; }

/* スターダスト占い */
.site-uranai { background: #1B1440 radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px) 0 0 / 46px 46px; color: #F2EAFF; }
.uranai-title { text-align: center; color: #FFE38A; text-shadow: 0 0 8px #B49BFF; }
.uranai-lead, .uranai-sign { text-align: center; }
.uranai-signs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); gap: 0.5em; padding: 0 !important; list-style: none; }
.site-uranai a { color: #C8B8FF; }
.uranai-signs a { display: grid; padding: 0.4em; text-align: center; text-decoration: none; color: #F2EAFF; background: rgba(255, 255, 255, 0.08); border: 1px solid #6B5BC4; border-radius: 8px; }
.uranai-signs a:hover { background: rgba(255, 255, 255, 0.18); }
.uranai-signs span { font-size: 0.75em; color: #B9A8E8; }
.uranai-table { margin: 0.6em auto; border-collapse: collapse; }
.uranai-table th, .uranai-table td { padding: 0.15em 0.8em; border-bottom: 1px solid #4B3D8C; }
.uranai-table td { color: #FFE38A; letter-spacing: 0.1em; }
.uranai-msg { padding: 0.6em; background: rgba(255, 255, 255, 0.08); border-radius: 8px; }
.uranai-lucky { display: flex; align-items: center; gap: 0.8em; margin: 0.6em 0; padding: 0.5em; background: rgba(255, 227, 138, 0.1); border: 1px dashed #FFE38A; border-radius: 8px; }
.uranai-lucky img { width: 4em; height: 4em; object-fit: contain; }

/* 攻略wiki */
.site-wiki { background: #F6F7FB; }
.wiki-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-bottom: 0.3em; border-bottom: 2px solid #3A6B3A; }
.web-page .wiki-logo { font-size: 1.2em; font-weight: 700; color: #2F5F2F; text-decoration: none; }
.wiki-body { display: grid; grid-template-columns: minmax(8em, 11em) 1fr; gap: 1em; margin-top: 0.6em; }
.wiki-side { display: grid; align-content: start; gap: 0.2em; padding: 0.5em; font-size: 0.85em; background: #FFFFFF; border: 1px solid #CFD6C8; }
.wiki-main h1 { border-bottom: 1px solid #CFD6C8; }
.wiki-main h2 { padding-left: 0.4em; border-left: 4px solid #3A6B3A; }
.wiki-table { border-collapse: collapse; margin: 0.4em 0; background: #FFFFFF; }
.wiki-table th, .wiki-table td { padding: 0.2em 0.6em; border: 1px solid #B9C2B0; text-align: left; }
.wiki-table th { background: #E3EBD9; }
@container pcscreen (max-width: 520px) { .wiki-body { grid-template-columns: 1fr; } }

/* あやしい掲示板 */
.site-bbs { background: #EFEFEF; }
.bbs-title { color: #B00000; }
.bbs-threads li { margin-bottom: 0.3em; }
.bbs-dead { color: #888888; }
.bbs-thread-title { color: #B00000; font-size: 1.15em; }
.bbs-post { margin: 0 0 0.8em; }
.bbs-post dt { font-size: 0.9em; }
.bbs-name { color: #228B22; }
.bbs-post dd { margin: 0.2em 0 0 1.5em; white-space: pre-line; }

/* 平成ナビの広告・かすかな文字 */
.portal-news-top a { font-weight: 700; }
.portal-new { color: #E8515F; font-weight: 700; font-size: 0.85em; }
.portal-article { margin: 0.6em 0; padding: 0.6em 0.9em; border: 1px solid #B7C3F4; background: #FFFFFF; }
.portal-article p { margin: 0 0 0.7em; line-height: 1.7; }
.portal-article-title { margin: 0.2em 0 0.7em; font-size: 1.1em; color: #2D3FA0; border-bottom: 2px solid #4F6BE0; }
.portal-ad { margin: 0.8em 0 0.4em; padding: 0.3em 0.6em; background: #F4F3F6; border: 1px dashed #C9C4D2; }
.web-faint { margin-top: 1.4em; font-size: 0.72em; color: #D3CFDA; }
.site-uranai .web-faint, .site-bbs .web-faint { color: #BDBDBD; }

/* ゆりかごネット（かくしページ） */
.site-yurikago { display: grid; align-content: center; justify-items: center; gap: 0.2em; text-align: center; background: #FFFFFF; color: #8E889A; letter-spacing: 0.08em; }
.yurikago-title { font-weight: 400; color: #B8B2C2; }
.yurikago-q { margin-top: 1.2em !important; color: #6A6474; }
.yurikago-choices { display: flex; gap: 2em; }
.site-yurikago a { color: #8E889A; }

/* ページを表示できません */
.site-404 { background: #FFFFFF; }
.web-404 h1 { font-size: 1.2em; }
.web-404 hr { border: 0; border-top: 1px solid #C9C4D2; }

/* スクロールバーも平成のOS風に */
.shop-scroll,
.win-note {
  scrollbar-color: #CFCBD6 #E4E2E8;
}
.shop-scroll::-webkit-scrollbar,
.win-note::-webkit-scrollbar { width: max(16px, 3.6cqw); }
.shop-scroll::-webkit-scrollbar-track,
.win-note::-webkit-scrollbar-track { background: #E4E2E8; border-left: 1px solid var(--bevel-dark); }
.shop-scroll::-webkit-scrollbar-thumb,
.win-note::-webkit-scrollbar-thumb {
  background: #D3D0DA;
  border: max(2px, 0.35cqw) solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}

/* ショップ */
.shop { display: flex; flex-direction: column; min-height: 0; }
.shop-scroll { overflow-y: auto; max-height: min(58cqw, 100%); padding: 1.4em 1.4em 1.6em; outline: none; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em 1.4em; margin: 0; padding: 0; list-style: none; }
.shop-cell { display: grid; gap: 0.35em; }

.shop-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  background: linear-gradient(155deg, #D5CBF3, #EBCDE8);
  border: max(2px, 0.45cqw) solid #A99DC8;
  border-radius: 1.6cqw;
  box-shadow: inset 0 0 0 max(1px, 0.3cqw) rgba(255, 255, 255, 0.55);
}
button.shop-tile { cursor: pointer; transition: transform 0.1s; }
button.shop-tile:hover,
button.shop-tile:focus-visible { outline: none; transform: translateY(-2px); border-color: var(--pink-deep); }
.shop-tile.is-small { width: 3.4em; flex: none; }
.shop-tile.is-large { width: 40%; flex: none; align-self: start; }
/* 絵の大きさ（縦長・横長）でタイルが広がらないように、絵はタイルの中に重ねて置く */
.shop-icon { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain; }

.price-tag {
  position: absolute;
  right: -0.3em;
  bottom: -0.4em;
  padding: 0 0.55em;
  font: 700 0.8em/1.6 var(--font-body);
  color: var(--plum);
  background: #FFFFFF;
  border: 1.5px solid var(--plum);
  border-radius: 999px;
}
.price-tag.is-free { background: var(--mint); }
.price-tag.is-points { background: #FFE38A; }

/* 交換ポイントの残高 */
.shop-points {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.6em;
  margin: 0;
  padding: 0.55em 1.2em;
  font-size: 0.85em;
  background: #FFF6D6;
  border-bottom: 1px solid var(--bevel-dark);
}
.shop-points-label { font-weight: 800; color: var(--plum); }
.shop-buy-points { padding: 0.15em 0.8em; font: 800 0.9em var(--font-body); color: #FFFFFF; background: var(--pink-deep); border: 1.5px solid var(--plum); border-radius: 999px; cursor: pointer; }
.shop-buy-points:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; }
/* ポイントを買う */
.point-shop { padding: 1em 1.2em; overflow-y: auto; }
.point-shop-title { margin: 0 0 0.2em; font-size: 1.1em; color: var(--plum); }
.point-shop-lead { margin: 0 0 0.8em; font-size: 0.85em; color: var(--muted); }
.point-input { display: flex; align-items: center; gap: 0.4em; margin: 0 0 0.3em; }
.point-amount { flex: 1; min-width: 0; padding: 0.4em 0.6em; font: 1.4em var(--font-pixel); color: var(--pink-deep); text-align: right; background: #FFFFFF; border: 2px solid var(--pink-deep); border-radius: 10px; }
.point-amount:focus { outline: 3px solid var(--lav); }
.point-unit { font-weight: 800; color: var(--plum); }
.point-preview { min-height: 1.4em; margin: 0 0 0.6em; font-size: 0.85em; color: var(--plum); text-align: right; }
.point-quick { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0 0 0.6em; }
.point-quick-btn { flex: 1 1 5em; padding: 0.35em 0.4em; font: 800 0.85em var(--font-body); color: var(--plum); background: linear-gradient(#FFFFFF, #FFF0F7); border: 1.5px solid var(--pink-deep); border-radius: 999px; cursor: pointer; }
.point-quick-btn:hover, .point-quick-btn:focus-visible { outline: none; background: var(--pink); }
.point-error { min-height: 1em; margin: 0 0 0.4em; font-size: 0.85em; font-weight: 800; color: #E8515F; }
.point-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr)); gap: 0.6em; margin: 0 0 0.8em; padding: 0; list-style: none; }
.point-pack { display: grid; justify-items: center; gap: 0.2em; width: 100%; padding: 0.8em 0.4em; font: inherit; color: var(--ink); background: linear-gradient(#FFFFFF, #FFF0F7); border: 2px solid var(--pink-deep); border-radius: 12px; box-shadow: 0 3px 0 var(--lav); cursor: pointer; }
.point-pack:hover, .point-pack:focus-visible { outline: none; background: var(--pink); }
.point-pack-pt { font: 1.3em var(--font-pixel); color: var(--pink-deep); }
.point-pack-price { font-weight: 800; color: var(--plum); }
.point-tile { display: grid; place-items: center; font: 1.6em var(--font-pixel); color: #FFFFFF; background: radial-gradient(circle at 35% 30%, #FFE38A, #E8B83A); border-radius: 50%; }
.shop-tabs {
  flex: none;
  display: flex;
  gap: 0.4em;
  padding: 0.5em 1.2em;
  overflow-x: auto;
  background: #ECEAF0;
  border-bottom: 1px solid var(--bevel-dark);
  scrollbar-width: thin;
}
.shop-tab {
  flex: none;
  padding: 0.25em 0.8em;
  font: 800 0.8em var(--font-body);
  color: var(--plum);
  background: #F4F3F6;
  border: max(2px, 0.3cqw) solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  cursor: pointer;
  white-space: nowrap;
}
.shop-tab.is-on { background: var(--pink); border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); }
.shop-tab:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 1px; }
.shop-sort {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 1.2em;
  overflow-x: auto;
  background: #F6F4F8;
  border-bottom: 1px solid var(--bevel-dark);
  scrollbar-width: thin;
}
.shop-sort-label { flex: none; font: 800 0.75em var(--font-body); color: var(--muted); }
.shop-sort-btn {
  flex: none;
  padding: 0.15em 0.7em;
  font: 800 0.75em var(--font-body);
  color: var(--plum);
  background: #FFFFFF;
  border: 1px solid var(--bevel-dark);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.shop-sort-btn.is-on { color: #FFFFFF; background: var(--pink-deep); border-color: var(--pink-deep); }
.shop-sort-btn:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 1px; }
.shop-points b { font: 1.3em var(--font-pixel); color: var(--pink-deep); }
.shop-points-hint { font-size: 0.85em; color: var(--muted); }

.shop-meta { display: flex; align-items: center; gap: 0.15em; }
.rarity { display: inline-flex; gap: 0.05em; }
.star {
  font-size: 1.35em;
  line-height: 1;
  color: #F7D25C;
  text-shadow: 1px 0 0 #7A5A3C, -1px 0 0 #7A5A3C, 0 1px 0 #7A5A3C, 0 -1px 0 #7A5A3C;
}
.star.is-empty { color: #CFCCD5; text-shadow: none; }
.star.is-half {
  background: linear-gradient(90deg, #F7D25C 50%, #CFCCD5 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.fav {
  margin-left: auto;
  padding: 0 0.1em;
  font-size: 1.35em;
  line-height: 1;
  color: #C9C6CF;
  background: none;
  border: 0;
  cursor: pointer;
}
.fav.is-on { color: #EC7A9C; }
.fav:focus-visible { outline: 2px solid var(--pink-deep); border-radius: 4px; }

.shop-detail { display: flex; gap: 1.2em; padding: 1.4em; overflow-y: auto; }
.shop-info { display: grid; gap: 0.45em; min-width: 0; align-content: start; flex: 1; }
.shop-category { margin: 0; font-size: 0.8em; font-weight: 700; color: var(--muted); }
.shop-name { margin: 0; font: 1.25em/1.3 var(--font-pixel); color: var(--plum); }
.shop-desc { margin: 0; font-size: 0.9em; line-height: 1.6; }
.shop-price { margin: 0; font-size: 0.9em; }
.shop-price b { font: 1.35em var(--font-pixel); color: var(--pink-deep); }
.shop-owned { margin: 0; font-weight: 800; color: var(--plum); }
.shop-actions { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 0.3em; }
.shop-btn {
  font: 800 0.92em var(--font-body);
  color: var(--plum);
  padding: 0.35em 1.1em;
  background: #DAD7E0;
  border: max(2px, 0.35cqw) solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  cursor: pointer;
}
.shop-btn.is-primary { background: var(--pink); }
a.shop-btn { display: inline-block; text-decoration: none; }
.shop-btn[disabled] { background: #E4E2E8; color: var(--muted); cursor: not-allowed; }
.shop-btn:active { border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); }
.shop-btn:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 2px; }

.shop-confirm { display: grid; justify-items: center; gap: 0.7em; padding: 1.4em; text-align: center; }
.shop-confirm .shop-tile { width: 28%; }
.shop-confirm-text { margin: 0; white-space: pre-line; line-height: 1.7; }
.shop-confirm-text b { font: 1.2em var(--font-pixel); color: var(--pink-deep); }
.shop-confirm .win-note-small { padding: 0; }

.inv-list { display: grid; gap: 0.6em; margin: 0; padding: 1.2em 1.2em 0.4em; list-style: none; }
.inv-item { display: flex; align-items: center; gap: 0.8em; }
.inv-name { font-family: var(--font-pixel); }

/* 画面が小さいとき（スマートフォン）はウィンドウを広げる */
@container pcscreen (max-width: 560px) {
  .win, .win.is-small, .win.is-note { right: 4%; width: 92%; }
  .shop-detail { flex-direction: column; align-items: center; text-align: center; }
  .shop-tile.is-large { width: 34%; align-self: center; }
  .shop-detail .shop-meta, .shop-detail .shop-actions { justify-content: center; }
  .shop-detail .fav { margin-left: 0.3em; }
}

/* スマートフォン（縦持ち・横持ち）：テレビの枠を細くして、画面いっぱいにゲームを映す。
   4:3 に固定せず、画面の形に合わせる（ゲーム側が縦長・横長それぞれのレイアウトを持つ） */
@media (max-width: 600px), (max-height: 500px) {
  .crt {
    height: 100dvh;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .crt[open] { display: flex; align-items: stretch; }
  .crt-bezel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 5px 6px 5px;
    border-width: 3px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 2px #FFD9F0;
  }
  .crt-bezel::before { inset: 5px 6px; border-width: 2px; border-radius: 12px; box-shadow: inset 0 0 0 2px #8C6CCB; }
  .crt-logo { padding: 5px 0 3px; font-size: 0.95rem; }
  .crt-side { display: none; }
  .crt-body { flex: 1; min-height: 0; padding: 0 5px; }
  .crt-screen {
    flex: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-width: 3px;
    border-radius: 8px;
  }
  .crt-panel { padding: 4px 8px 4px; gap: 8px; }
  .crt-title { font-size: 0.8rem; text-align: left; }
  .crt-exit { padding: 2px 12px; font-size: 0.8rem; }
  .crt-exit kbd { display: none; }
  .crt.is-classic .crt-bezel { padding: 6px 6px 4px; border-width: 2px; border-radius: 16px; box-shadow: none; }
  .crt.is-classic .crt-screen { border-width: 2px; border-radius: 12px / 10px; }
  .crt.is-classic .crt-panel { padding-top: 4px; }
  .crt.is-classic .crt-brand { display: none; }
}

/* 横持ちで高さが低いときは下の帯も隠して、高さをすべてゲームに使う
   （ゲーム側に「部屋に戻る」ボタンがある。games/_shared/bridge.js の exit() を参照） */
@media (orientation: landscape) and (max-height: 500px) {
  .crt-panel, .crt-logo { display: none; }
  .crt-bezel { padding: 6px; }
  .crt.is-classic .crt-bezel { padding: 4px; }
  .crt-bezel::before { inset: 4px; }
  .crt-body { padding: 4px; }
}

/* スマートフォンの縦持ちでは、部屋の表示を縦長にして大きく見せる */
@media (max-width: 600px) and (orientation: portrait) {
  #room { aspect-ratio: 1 / 1.1; max-height: calc(100svh - 300px); }
  .catch { margin: 0 0 8px; font-size: 0.85rem; }
}

/* 小さい画面では左右の余白を詰めて、部屋をできるだけ大きく見せる */
@media (max-width: 480px) {
  main { padding: 0 8px 28px; }
  .room-window { border-radius: 10px; box-shadow: 3px 3px 0 var(--lav); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; }
}

.noscript {
  max-width: 560px;
  margin: 16px auto;
  padding: 12px;
  text-align: center;
  background: var(--pink-soft);
  border: 2px solid var(--plum);
  border-radius: 10px;
}

/* ---------- 窓の外がこわれる演出（assets/js/anomaly.js） ---------- */
/* 窓を調べた瞬間：部屋の画面が乱れる */
.is-glitching .stage { animation: glitch-shake 0.12s steps(2) infinite; }
.is-glitching #room { animation: glitch-color 0.4s steps(3) infinite; }
@keyframes glitch-shake {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-4px, 2px) skewX(2deg); }
  100% { transform: translate(3px, -2px); }
}
@keyframes glitch-color {
  0% { filter: none; }
  33% { filter: hue-rotate(90deg) saturate(3) contrast(1.4); }
  66% { filter: invert(1) hue-rotate(180deg); }
  100% { filter: grayscale(1) contrast(2); }
}
@media (prefers-reduced-motion: reduce) {
  .is-glitching .stage, .is-glitching #room { animation: none; filter: grayscale(1); }
}

/* 緊急メンテナンスの画面（閉じられない） */
/* 緊急メンテナンス：仮想世界（お部屋）を修復している画面。ゲームの中の演出だとわかるように、電脳空間の見た目にする */
.maintenance { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 16px; border: 0; color: #EDE6FF;
  background: linear-gradient(rgba(150, 130, 255, 0.12) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(150, 130, 255, 0.12) 1px, transparent 1px) 0 0 / 28px 28px, radial-gradient(ellipse at 50% 40%, #2E2366, #0E0A24 75%); }
.maintenance[open] { display: grid; place-items: center; }
.maintenance::backdrop { background: #0E0A24; }
.maintenance-box { max-width: 560px; padding: 24px 22px; text-align: center; background: rgba(24, 18, 58, 0.88); border: 2px solid #8F7BEA; border-radius: 14px; box-shadow: 0 0 24px rgba(143, 123, 234, 0.45), inset 0 0 0 2px rgba(201, 182, 242, 0.15); font: 0.95rem/1.8 sans-serif; }
.maintenance-box h2 { margin: 0 0 12px; font-size: 1.25rem; color: #FFD2E8; letter-spacing: 0.05em; }
.maintenance-box p { margin: 0 0 10px; }
.maintenance-box b { color: #9FE3FF; }
.maintenance-sys { font: 0.75rem monospace; color: #9C8FD8; letter-spacing: 0.1em; }
.maintenance-mark { font-size: 2.2rem; line-height: 1; color: #9FE3FF; animation: maintenance-spin 3s linear infinite; }
@keyframes maintenance-spin { to { transform: rotate(360deg); } }
.maintenance-progress { position: relative; height: 10px; margin: 14px auto 6px; max-width: 320px; overflow: hidden; background: #241B52; border: 1px solid #8F7BEA; border-radius: 999px; }
.maintenance-progress span { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, #F7B7D2, #9FE3FF); border-radius: 999px; animation: maintenance-scan 1.8s ease-in-out infinite; }
@keyframes maintenance-scan { from { left: -40%; } to { left: 100%; } }
.maintenance-status { font: 0.8rem monospace; color: #9FE3FF; }
.maintenance-btn { margin: 8px 0 14px; padding: 8px 22px; font: 700 0.95rem sans-serif; color: #3A2050; background: linear-gradient(#FFD2E8, #F7A9D0); border: 2px solid #F8C6DF; border-radius: 999px; cursor: pointer; }
.maintenance-btn:focus-visible { outline: 3px solid #9FE3FF; outline-offset: 2px; }
.maintenance-code { font: 0.75rem monospace; color: #8A7FC0; }
.maintenance-sign { font-size: 0.8rem; color: #C9B6F2; }