.page-stage { display:grid; grid-template-rows:auto minmax(0,1fr); background:var(--base); }
.page-top { position:relative; z-index:2; display:flex; align-items:center; gap:20px; height:58px; padding:0 var(--page-gutter); border-bottom:1px solid #ffffff25; background:var(--base); }
.page-nav { display:flex; align-items:center; gap:8px; margin-left:auto; }
.page-nav a { position:relative; color:var(--muted); }
.page-nav a[aria-current="page"] { color:var(--text); font-weight:750; }
.page-nav a[aria-current="page"]::after { content:''; position:absolute; height:2px; background:var(--accent); inset:auto 12px 2px; }
.page-fullscreen { min-width:44px; }
.page-fullscreen span { font-size:1.5rem; line-height:1; }
.doc { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:clamp(24px,5cqw,90px); min-height:0; padding:0 var(--page-gutter); }
.doc-intro { min-width:0; overflow:auto; padding:28px 4px 28px 0; scrollbar-width:thin; }
.back-link { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-size:.85rem; text-decoration:none; margin:0 0 12px; }
.back-link:hover { color:var(--accent); }
.doc h1 { font-size:clamp(2rem,4.6cqw,4.5rem); line-height:1; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance; }
.lead { font-size:.95rem; line-height:1.65; color:var(--muted); margin:0; max-width:36rem; }
.doc-index { display:grid; justify-items:start; margin-top:20px; gap:4px; }
.doc-index a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; color:var(--muted); font-size:.85rem; text-decoration:none; }
.doc-index a:hover { color:var(--accent); text-decoration:underline; }
.doc-body { min-width:0; overflow:auto; padding:28px 8px 40px 4px; scroll-padding-top:24px; scrollbar-width:thin; scrollbar-color:var(--line) var(--base); }
.doc-body section { padding:24px 0; border-top:1px solid #ffffff25; }
.doc-body section:first-child { padding-top:0; border-top:0; }
.doc h2 { font-size:clamp(1.5rem,2.6cqw,2rem); line-height:1.1; margin:0 0 12px; }
.doc p, .doc li, .doc dd { line-height:1.7; color:var(--muted); overflow-wrap:anywhere; }
.doc p { margin:0 0 16px; }
.doc ul { padding-left:20px; margin:0; }
.tips li + li { margin-top:12px; }
.doc a:not(.back-link) { display:inline-flex; align-items:center; min-height:44px; }
.storage-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.storage-table th, .storage-table td { text-align:left; vertical-align:top; padding:14px 12px 14px 0; border-bottom:1px solid #ffffff25; line-height:1.6; }
.storage-table th { font-weight:600; color:var(--muted); }
.storage-table td:first-child { font-weight:700; color:var(--text); width:30%; }
.storage-table td:last-child { padding-right:0; color:var(--muted); }
.note { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-panel); padding:18px; margin:20px 0; }
.note h3 { margin:0 0 6px; font-size:1rem; color:var(--accent); }
.note p { margin:0; }
.action-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0; }
.action-row [role="status"] { margin:0; color:var(--accent); font-size:.9rem; }
.game-list, .license-list { margin:0; display:grid; gap:20px; }
.game-list dt, .license-list dt { font-weight:700; color:var(--text); }
.game-list dd, .license-list dd { margin:4px 0 0; }
.game-list a { display:inline-flex; align-items:center; font-size:.85rem; }
.page-foot { padding-top:20px; border-top:1px solid #ffffff25; color:var(--muted); font-size:.82rem; }
.page-foot a { display:inline-flex; align-items:center; min-height:44px; }
.lost { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:center; gap:24px; height:100%; overflow:auto; padding:24px var(--page-gutter); }
.lost-copy { max-width:560px; }
.lost h1 { font-size:clamp(2rem,5.5cqw,5rem); line-height:1; letter-spacing:-.02em; margin:0 0 16px; }
.lost p { color:var(--muted); line-height:1.65; margin:0 0 24px; }
.lost img { width:100%; max-width:480px; height:auto; justify-self:center; }
.noscript { position:fixed; inset:auto 16px 16px; padding:16px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-panel); z-index:20; }
@container stage (max-width:650px) {
  .page-top { gap:10px; }
  .page-nav { gap:2px; }
  .page-nav .quiet-action { padding-inline:10px; font-size:.8rem; }
  .doc { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:24px; }
  .storage-table, .storage-table tbody, .storage-table tr, .storage-table td { display:block; }
  .storage-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .storage-table tr { padding:12px 0; border-bottom:1px solid #ffffff25; }
  .storage-table td { width:auto!important; border:0; padding:0 0 6px; }
  .doc-index { margin-top:12px; }
  .lost { gap:16px; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
}
@container stage (max-height:420px) {
  .page-top { height:52px; }
  .doc-intro, .doc-body { padding-top:16px; padding-bottom:24px; }
  .doc h1 { font-size:clamp(1.8rem,4cqw,2.7rem); }
  .lead, .doc-body { font-size:.875rem; }
  .doc-index { gap:0; }
  .doc-intro { padding-bottom:8px; }
  .doc-intro .back-link, .doc-intro .lead { display:none; }
  .doc-intro h1 { font-size:1.7rem; margin-bottom:8px; }
  .doc-index { margin-top:0; }
  .back-link { margin-bottom:4px; }
  .lost h1 { font-size:clamp(2rem,4.8cqw,3rem); }
  .lost p { font-size:.9rem; margin-bottom:16px; }
  .lost img { max-height:62cqh; width:auto; max-width:100%; }
}
@container stage (min-height:650px) {
  .page-top { height:82px; }
  .page-top .wordmark { font-size:1.35rem; }
  .page-nav { gap:16px; }
  .page-nav .quiet-action { font-size:.95rem; }
  .doc-intro, .doc-body { padding-top:56px; }
  .lead { font-size:1.1rem; }
  .doc-body { font-size:1rem; }
}