/* Three clear destinations; optional modes and personal tools live one level deeper. */
:root { --safe-top:max(env(safe-area-inset-top,0px),var(--toy-safe-top,0px)); --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--toy-safe-bottom,0px)); --safe-left:max(env(safe-area-inset-left,0px),var(--toy-safe-left,0px)); --safe-right:max(env(safe-area-inset-right,0px),var(--toy-safe-right,0px)); }
.wrap { width:min(100%,var(--toy-viewport-width,100%)); }
.screen { min-height:min(100dvh,var(--toy-viewport-height,100dvh)); padding-top:max(24px,var(--safe-top)); padding-bottom:max(24px,var(--safe-bottom)); }
body.on-home .wrap { max-width:520px; padding-inline:max(18px,var(--safe-left)) max(18px,var(--safe-right)); }
#screen-home { padding-block:max(16px,var(--safe-top)) max(16px,var(--safe-bottom)); animation:none; }
.home-shell { width:100%; }
.home-brand { display:grid; grid-template-columns:32px 1fr 44px; gap:0 10px; align-items:center; min-height:44px; }
.home-brand-logo { grid-row:1/3; width:32px; height:32px; object-fit:contain; }
.home-brand h1 { font-size:19px; font-weight:600; letter-spacing:.12em; }
.home-brand p { display:none; }
.home-catalog-count { grid-column:2; font-size:10px; color:var(--ink-soft); margin-top:3px; }
body.on-home .btn-bgm { position:static; grid-column:3; grid-row:1/3; width:44px; height:44px; box-shadow:none; }
.home-start-area { display:grid; gap:18px; margin:24px 0; }
.home-eyebrow { color:var(--ink-soft); font-size:11px; letter-spacing:.1em; margin-bottom:14px; }
.home-intro .home-eyebrow { display:none; }
.home-intro h2 { font-size:25px; font-weight:500; line-height:1.45; }
.home-intro h2 br { display:none; }
.home-intro > p:last-child { margin-top:6px; color:var(--ink-soft); font-size:12px; }
.home-play-card { padding:16px; border:1px solid #4d5d8c38; border-radius:14px; background:#faf8f2eb; box-shadow:0 12px 34px #23283b0a; }
.home-play-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; color:var(--ink-soft); font-size:11px; }
.home-setting { min-height:44px; padding:4px 8px; border:1px solid var(--line); border-radius:7px; background:#f0f0e9; font:inherit; color:var(--ink); cursor:pointer; }
.home-mode-spec { font-size:11px; color:var(--ink-soft); margin:8px 0 12px; line-height:1.6; }
.home-start.btn-mode { width:100%; min-height:52px; flex-direction:row; align-items:center; justify-content:space-between; padding:12px 18px; border-radius:8px; font-size:16px; }
.home-rank-link { width:100%; display:flex; align-items:center; gap:8px; min-height:44px; margin-top:8px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink-soft); background:#f0f0e9; font:inherit; cursor:pointer; }
.home-rank-link > span { font-size:12px; color:var(--ink); }
.home-rank-link small { font-size:10px; }
.home-rank-link i { margin-left:auto; font-style:normal; }
.home-section-label { margin-bottom:10px; }
.home-section-label h2 { font-size:12px; font-weight:500; color:var(--ink-soft); }
.home-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.home-feature { display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; min-height:90px; padding:14px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#faf8f2de; font:inherit; text-align:left; cursor:pointer; }
.home-feature strong { display:flex; align-items:center; justify-content:space-between; gap:4px; font-size:16px; font-weight:500; }
.home-feature i { font-size:12px; font-style:normal; color:var(--ink-soft); }
.home-feature > span { font-size:10px; color:var(--ink-soft); line-height:1.5; }
.home-secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.home-secondary button,.home-more-links button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:64px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#faf8f0d9; font:inherit; text-align:left; letter-spacing:0; cursor:pointer; }
.home-secondary button { background:transparent; border-color:transparent; border-top-color:var(--line); border-radius:0; padding-inline:4px; }
:is(.home-secondary,.home-more-links) button > span { display:grid; gap:5px; min-width:0; }
:is(.home-secondary,.home-more-links) b { font-size:13px; font-weight:500; }
:is(.home-secondary,.home-more-links) small { font-size:10px; color:var(--ink-soft); line-height:1.5; }
:is(.home-secondary,.home-more-links) i { font-size:16px; font-style:normal; color:var(--ink-soft); }
.home-more-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
:is(.home-feature,.home-setting,.home-rank-link,.home-secondary button,.home-more-links button):hover { border-color:var(--accent); background:#fffaf0; }
.home-more-links button:hover { box-shadow:none; transform:none; }
.home-help-note { font-size:11px; line-height:1.8; color:var(--ink-soft); margin:8px 0 14px; }
.home-footer { padding-top:18px; color:var(--ink-soft); font-size:10px; line-height:1.8; text-align:center; }
.home-shell .login-banner { display:block; width:fit-content; max-width:100%; border-radius:8px; font-size:11px; line-height:1.8; margin:0 auto 14px; text-align:center; }
.home-shell .login-banner.hidden { display:none; }
.home-shell .sdk-status { font-size:11px; line-height:1.8; color:var(--ink-soft); margin-bottom:8px; }
.home-shell button:disabled { opacity:.5; cursor:wait; }
.home-shell :is(button,select,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:is(.home-challenge-dialog,.friend-dialog,.online-confirm) { --dialog-width:calc(min(100vw,var(--toy-viewport-width,100vw)) - var(--safe-left) - var(--safe-right)); --dialog-height:calc(min(100dvh,var(--toy-viewport-height,100dvh)) - var(--safe-top) - var(--safe-bottom) - 24px); position:fixed; inset:var(--safe-top) var(--safe-right) calc(max(0px,100dvh - var(--toy-viewport-height,100dvh)) + var(--safe-bottom)) var(--safe-left); margin:auto; }
.home-challenge-dialog { width:min(480px,calc(var(--dialog-width) - 24px)); max-height:var(--dialog-height); padding:18px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:#f5f1e8; overflow:auto; overscroll-behavior:contain; }
.home-challenge-dialog::backdrop { background:#1e263559; backdrop-filter:blur(4px); }
.home-challenge-dialog[open] { animation:home-emerge .3s ease both; }
.home-challenge-dialog header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.home-challenge-dialog > header { position:sticky; top:-18px; z-index:2; background:#f5f1e8; padding-block:6px; }
.home-challenge-dialog h2 { font-size:21px; font-weight:500; }
.home-challenge-dialog header p { font-size:11px; margin-top:6px; color:var(--ink-soft); }
.home-dialog-close { flex:0 0 44px; width:44px; height:44px; border:0; border-radius:50%; background:#e9e4d9; font-size:25px; color:var(--ink-soft); cursor:pointer; }
.home-difficulty { border:0; padding:0; margin:0; min-width:0; }
.home-difficulty legend { width:100%; font-size:12px; margin-bottom:10px; }
.home-difficulty legend > span { display:block; color:var(--ink-soft); font-size:10px; margin-top:5px; }
.difficulty-segments { --difficulty-index:1; position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; background:#e9e7df; border:1px solid #dedcd3; border-radius:10px; }
.difficulty-segments::before { content:""; position:absolute; z-index:-1; inset:4px auto 4px 4px; width:calc((100% - 16px)/3); background:#faf8f0; border:1px solid #d0d5d5; border-radius:7px; box-shadow:0 2px 5px #303e4d12; transform:translateX(calc(var(--difficulty-index) * (100% + 4px))); transition:transform .34s cubic-bezier(.2,.75,.25,1); }
.difficulty-segments label { position:relative; min-width:0; cursor:pointer; }
.difficulty-segments input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.difficulty-segments label > span { display:flex; min-height:54px; flex-direction:column; justify-content:center; align-items:center; gap:4px; border-radius:7px; color:var(--ink-soft); border:1px solid transparent; transition:color .25s; }
.difficulty-segments b { font-size:14px; font-weight:500; }
.difficulty-segments small { font-size:10px; }
.difficulty-segments input:checked + span { color:#3e536a; }
.difficulty-segments input:checked + span b::before { content:"·"; margin-right:4px; color:var(--accent); }
.difficulty-segments input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
#btn-home-apply { width:100%; min-height:44px; margin:12px 0; font-size:12px; }
.home-menu-subtitle { font-size:12px; font-weight:500; color:var(--ink-soft); margin:12px 0; }
.home-challenge-options { display:grid; gap:8px; }
.home-challenge-options button { min-height:64px; justify-content:center; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#ffffff80; font:inherit; cursor:pointer; }
.home-challenge-options strong { font-size:15px; font-weight:500; }
.home-challenge-options span { font-size:11px; color:var(--ink-soft); line-height:1.7; }
#home-account-dialog .diagnostics { margin-top:8px; font-size:11px; line-height:1.8; }
#home-account-dialog summary { min-height:44px; padding:12px 0; cursor:pointer; }
#home-account-dialog pre { max-height:160px; overflow:auto; }
.home-credits { margin-bottom:12px; }
.home-load-error { padding:24px; margin-top:24px; color:var(--ng); border:1px solid var(--ng); border-radius:10px; line-height:1.8; background:var(--paper); }
.home-arriving .home-brand,.home-arriving [data-home-reveal] { animation:home-emerge .65s cubic-bezier(.2,.6,.3,1) both; }
.home-arriving .home-start-area { animation-delay:.08s; }
.home-arriving .home-discover { animation-delay:.18s; }
.home-arriving .home-secondary { animation-delay:.26s; }
@keyframes home-emerge { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@media(min-width:761px) {
  html:not(.toy-compact) body.on-home .wrap { max-width:960px; padding-inline:max(32px,var(--safe-left)) max(32px,var(--safe-right)); }
  html:not(.toy-compact) .home-start-area { grid-template-columns:1fr 1fr; gap:40px; margin:32px 0; }
  html:not(.toy-compact) .home-intro h2 { font-size:36px; line-height:1.6; }
  html:not(.toy-compact) .home-intro h2 br { display:block; }
  html:not(.toy-compact) .home-intro .home-eyebrow { display:block; }
  html:not(.toy-compact) .home-feature { min-height:104px; padding:20px; }
}
.toy-small .home-start-area { margin:12px 0; gap:10px; }
.toy-small .home-intro h2 { font-size:20px; }
.toy-small .home-play-card { padding:10px; }
.toy-small .home-feature { min-height:76px; padding:10px; }
@media(max-width:360px),(max-height:600px) and (max-width:760px) {
  .home-start-area { margin:12px 0; gap:10px; }
  .home-intro h2 { font-size:20px; }
  .home-play-card { padding:10px; }
  .home-feature { min-height:76px; padding:10px; }
  .home-rank-link small { display:none; }
}
@media(prefers-reduced-motion:reduce) { #screen-home *,.home-challenge-dialog[open] { animation:none !important; transition:none !important; } }