html, body { width: 100%; height: 100%; overflow: hidden; scroll-behavior: auto; }
body { background-color: var(--cream); }
#home-app { height: var(--noel-native-viewport-height, var(--home-height, 100dvh)); display: flex; flex-direction: column; min-height: 0; }
.home-header { flex: none; border-bottom: 1px solid var(--line); background: var(--nh-detail-color-292); z-index: 2; }
.home-header-inner { max-width: 1372px; margin: auto; display: flex; gap: var(--nh-space-008); align-items: center; justify-content: space-between; padding: var(--nh-space-008) var(--nh-space-043); }
.home-header .brand { min-width: 0; }
.home-header .brand > span { font-size: var(--nh-type-010); }
.home-header .brand > svg { width: 30px; height: 30px; }
.home-header nav { display: flex; align-items: center; gap: var(--nh-space-011); }
.home-header nav a { display: flex; align-items: center; gap: var(--nh-space-021); min-height: 42px; padding: var(--nh-space-021) var(--nh-space-001); color: var(--muted); font-size: var(--nh-type-002); border-radius: var(--nh-radius-010); }
.home-header nav a[aria-current=page] { color: var(--brick-dark); background: var(--nh-detail-color-032); }
.home-header .trial-label { color: var(--muted); font-size: var(--nh-type-001); white-space: nowrap; }
#home-main { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scroll-behavior: auto; padding-bottom: env(safe-area-inset-bottom); }
#home-main > .page { min-height: 0; padding-bottom: var(--nh-space-040); }
.page-back { display: inline-flex; align-items: center; gap: var(--nh-space-012); margin-bottom: var(--nh-space-022); border: 0; background: none; padding: var(--nh-space-021) 0; color: var(--muted); font-size: var(--nh-type-002); }
.room-door-link { display: block; color: inherit; }
.room-door-link:focus-visible { outline-offset: 8px; }
.home-scene .common-polaroid { display: block; }
.home-shelf .little-note { margin-top: var(--nh-space-007); }
.home-shelf .little-note a { display: inline-flex; gap: var(--nh-space-003); align-items: center; margin-top: var(--nh-space-001); font-size: var(--nh-type-002); }
.room-scene .hero-panel { position: relative; }
.room-scene .hero-panel img { width: 100%; }
.room-module { width: 100%; display: block; text-align: left; border: 0; background: transparent; padding: var(--nh-space-022); }
.room-module .module-symbol { display: block; margin: var(--nh-space-011) 0 var(--nh-space-035); color: var(--brick); }
.room-module .module-symbol svg { width: 38px; height: 38px; }
.room-module h3 { margin-bottom: var(--nh-space-004); font-family: var(--nh-font-stack-003); }
.room-module p { font-size: var(--nh-type-002); color: var(--muted); }
.room-module .module-open { display: flex; gap: var(--nh-space-012); align-items: center; font-size: var(--nh-type-006); color: var(--brick-dark); }
.room-module .preview-label { font-size: var(--nh-type-008); color: var(--muted); }
.room-module-note { padding: var(--nh-space-001) var(--nh-space-027); color: var(--muted); font-size: var(--nh-type-008); }
.content-page { max-width: 860px; margin: 0 auto; padding: var(--nh-space-043) var(--nh-space-020) var(--nh-space-050); }
.content-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--nh-space-002); margin: var(--nh-space-011) 0 var(--nh-space-043); }
.content-heading h1 { margin-bottom: var(--nh-space-003); font-size: clamp(var(--nh-type-025), 3vw, var(--nh-type-032)); }
.content-heading p { font-size: var(--nh-type-002); color: var(--muted); }
.diary-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.diary-index li { border-bottom: 1px solid var(--line); }
.diary-index a { display: grid; grid-template-columns: 1fr auto; gap: var(--nh-space-012) var(--nh-space-002); padding: var(--nh-space-022) var(--nh-space-027); }
.diary-index h2 { margin: 0; font-size: var(--nh-type-012); }
.diary-index p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--nh-type-003); overflow-wrap: anywhere; }
.diary-index time { color: var(--muted); font-size: var(--nh-type-008); white-space: nowrap; }
.diary-index .diary-author { font-size: var(--nh-type-006); color: var(--muted); }
.article-page { max-width: 760px; }
.article-header { margin: var(--nh-space-008) 0 var(--nh-space-033); }
.article-header h1 { font-size: clamp(var(--nh-type-031), 4vw, var(--nh-type-005)); margin-bottom: var(--nh-space-005); overflow-wrap: anywhere; }
.article-byline { display: flex; flex-wrap: wrap; gap: var(--nh-space-003) var(--nh-space-002); font-size: var(--nh-type-006); color: var(--muted); }
.article-body { font-size: var(--nh-type-017); line-height: var(--nh-line-height-014); white-space: pre-wrap; overflow-wrap: anywhere; }
.article-actions { display: flex; gap: var(--nh-space-001); margin-top: var(--nh-space-040); padding-top: var(--nh-space-016); border-top: 1px solid var(--line); }
.home-form { display: grid; gap: var(--nh-space-001); }
.home-form label { font-size: var(--nh-type-002); color: var(--muted); }
.home-form input, .home-form textarea, .home-form select { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: var(--nh-radius-011); padding: var(--nh-space-001) var(--nh-space-008); color: var(--ink); background: var(--nh-chat-paper); }
.home-form textarea { min-height: 300px; line-height: var(--nh-line-height-007); resize: vertical; }
.home-form .btn { justify-self: start; }
.form-error { color: var(--nh-semantic-warning); font-size: var(--nh-type-002); overflow-wrap: anywhere; }
.page-notice { margin: var(--nh-space-035) 0; padding: var(--nh-space-013) 0; color: var(--muted); font-size: var(--nh-type-003); }
.game-create { padding: var(--nh-space-022) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--nh-space-042); }
.game-create h2 { font-size: var(--nh-type-010); }
.game-create .home-form { display: flex; align-items: end; flex-wrap: wrap; }
.game-create label { flex: 1; min-width: 160px; }
.game-create label select { display: block; margin-top: var(--nh-space-003); }
.game-index { display: grid; gap: 0; }
.game-row { display: flex; align-items: center; justify-content: space-between; gap: var(--nh-space-024); padding: var(--nh-space-035) 0; border-bottom: 1px solid var(--line); }
.game-row strong { display: block; }
.game-row small { display: block; color: var(--muted); margin-top: var(--nh-space-011); }
.trial-board-wrap { max-width: 540px; margin: var(--nh-space-042) auto; }
.trial-board { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); padding: var(--nh-space-001); border: 1px solid var(--nh-detail-color-293); border-radius: var(--nh-radius-016); background: var(--nh-detail-color-294); box-shadow: var(--nh-shadow-028); touch-action: manipulation; }
.trial-cell { aspect-ratio: 1; padding: 0; min-width: 0; position: relative; border: 0; background: transparent; opacity: 1 !important; }
.trial-cell::before, .trial-cell::after { position: absolute; content: ''; background: var(--nh-detail-color-295); pointer-events: none; }
.trial-cell::before { height: 1px; top: 50%; left: 0; right: 0; }
.trial-cell::after { width: 1px; left: 50%; top: 0; bottom: 0; }
.trial-cell .stone { position: absolute; width: 78%; height: 78%; inset: 11%; border-radius: var(--nh-radius-002); z-index: 1; box-shadow: var(--nh-shadow-029); }
.trial-cell .stone.black { background: radial-gradient(circle at 35% 30%, var(--nh-detail-color-296), var(--nh-detail-color-297) 65%); }
.trial-cell .stone.white { background: radial-gradient(circle at 35% 30%, var(--nh-pure-white), var(--nh-detail-color-299) 65%); }
.trial-cell.last::after { inset: 42%; width: 16%; height: 16%; border-radius: var(--nh-radius-002); background: var(--brick); z-index: 2; }
.trial-cell:focus-visible { outline-offset: -3px; z-index: 3; }
.game-state { min-height: 28px; color: var(--muted); font-size: var(--nh-type-003); text-align: center; }
.game-members { display: flex; justify-content: center; gap: var(--nh-space-035); color: var(--muted); font-size: var(--nh-type-002); }
.game-note { margin-top: var(--nh-space-013); text-align: center; color: var(--muted); font-size: var(--nh-type-006); }
.content-tools { display: flex; justify-content: center; gap: var(--nh-space-001); flex-wrap: wrap; margin-top: var(--nh-space-042); }
.home-sheet { width: min(500px, calc(100vw - 30px)); max-height: calc(var(--home-height, 100dvh) - 30px); padding: var(--nh-space-016); border: 1px solid var(--line); border-radius: var(--nh-radius-017); background: var(--paper); color: var(--ink); overflow: auto; }
.home-sheet::backdrop { background: var(--nh-detail-color-300); }
.home-sheet header { display: flex; justify-content: space-between; gap: var(--nh-space-004); align-items: center; margin-bottom: var(--nh-space-035); }
.home-sheet header h2 { margin: 0; font-size: var(--nh-type-010); }
.share-room { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: var(--nh-space-013) 0; background: transparent; text-align: left; }
.share-room small { display: block; color: var(--muted); margin-top: var(--nh-space-026); }
#home-toast { position: fixed; z-index: 100; bottom: max(25px, env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 12px); width: max-content; max-width: calc(100vw - 35px); padding: var(--nh-space-014) var(--nh-space-002); background: var(--nh-detail-color-301); color: var(--nh-detail-color-302); border-radius: var(--nh-radius-003); font-size: var(--nh-type-002); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
#home-toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) {
  .home-header-inner { padding: var(--nh-space-023) var(--nh-space-030); gap: var(--nh-space-003); }
  .home-header .brand { grid-template-columns: 27px auto; column-gap: var(--nh-space-012); }
  .home-header .brand > span { font-size: var(--nh-type-021); }
  .home-header .brand > svg { width: 25px; height: 25px; }
  .home-header .brand small { font-size: var(--nh-type-009); padding-top: var(--nh-space-025); }
  .home-header nav a { padding: var(--nh-space-012) var(--nh-space-003); }
  .home-header nav a span { display: none; }
  .home-header .trial-label { display: none; }
  #home-main > .page { padding: var(--nh-space-016) var(--nh-space-002) var(--nh-space-043); }
  .content-page { padding: var(--nh-space-035) var(--nh-space-035) var(--nh-space-006); }
  .content-heading { gap: var(--nh-space-004); flex-wrap: wrap; margin-bottom: var(--nh-space-022); }
  .content-heading h1 { font-size: var(--nh-type-004); }
  .article-body { font-size: var(--nh-type-024); }
  .room-module { padding: var(--nh-space-035); }
  .home-form textarea { min-height: 240px; }
  .trial-board { padding: var(--nh-space-003); }
  .content-tools .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }