/* v351: a quieter sports studio. Home and shared navigation, across both themes.
   Existing entry points, keyboard order and permission flows stay intact. */
#screen-menu {
  --home-border: color-mix(in srgb, var(--p-ink) 16%, transparent);
  --home-shadow: 0 8px 26px #07181008;
  background-image: none;
}
#screen-menu .menu-top { border-bottom:1px solid var(--home-border); padding-bottom:14px; margin-bottom:24px; }
#screen-menu .home-brand-symbol { transform:none; border:0; border-radius:10px; box-shadow:none; background:var(--p-ink); color:var(--p-paper); }
#screen-menu .brand-tag { letter-spacing:.14em; font-size:7px; }
#screen-menu .home-toolbar .lang-mini { border:1px solid var(--home-border); }
#screen-menu .menu-card.menu-shortcut { border:1px solid var(--home-border); box-shadow:none; border-radius:14px; }
#screen-menu .home-heading { padding:8px 0 24px; border:0; border-bottom:1px solid var(--home-border); border-radius:0; background:none; box-shadow:none; overflow:visible; margin-bottom:24px; }
#screen-menu .home-eyebrow { display:inline-flex; padding:0; margin:0 0 20px; border:0; background:none; color:var(--p-muted); letter-spacing:.16em; font-size:9px; }
#screen-menu .home-status-dot { background:var(--p-accent); }
#screen-menu .home-heading h1 { font-size:clamp(29px,6.8vw,42px); line-height:1.5; letter-spacing:-.05em; padding:0; }
#screen-menu .home-heading h1 em { background:none; padding:0; }
#screen-menu .home-subtitle { font-size:13px; line-height:1.85; margin-top:12px; max-width:470px; }
#screen-menu button.home-craft-emblem { display:block; width:52px; top:0; right:0; transform:none; border:0; border-radius:18px; background:var(--p-raised); box-shadow:none; }
#screen-menu .home-craft-emblem img { border-radius:18px; }
#screen-menu .home-craft-emblem::after { display:none; }
#screen-menu .home-coach-speech { border:1px solid var(--home-border); font-weight:500; }
#screen-menu .home-workspace { gap:24px; }
#screen-menu .home-start-path-heading { margin-bottom:16px; }
#screen-menu .home-start-path-heading > .home-note-kicker { display:none; }
#screen-menu .home-start-path-heading h2 { margin:0 0 5px; font-size:22px; line-height:1.5; letter-spacing:-.035em; }
#screen-menu .home-start-path-heading p { font-size:12px; line-height:1.8; }
#screen-menu .home-start-options { gap:12px; }
#screen-menu .home-start-options button {
  display:grid; grid-template-columns:minmax(0,1fr) 104px; align-items:center; align-content:normal;
  gap:14px; min-height:142px; padding:18px; border:1px solid var(--home-border); border-radius:20px;
  background:var(--p-paper); box-shadow:var(--home-shadow); overflow:hidden;
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease;
}
#screen-menu .home-start-options .home-start-copy { display:block; min-width:0; order:0; padding-bottom:20px; }
#screen-menu .home-start-options .home-start-kicker { display:block; margin-bottom:7px; font:700 9px/1.4 var(--p-font); letter-spacing:.12em; color:var(--p-muted); }
#screen-menu .home-start-options strong { font-size:19px; font-weight:800; line-height:1.5; }
#screen-menu .home-start-options small { margin-top:5px; font-size:12px; line-height:1.75; color:var(--p-muted); }
#screen-menu .home-start-options .home-start-art { position:relative; display:block; order:0; min-width:0; width:104px; height:112px; border-radius:14px; overflow:hidden; }
#screen-menu .home-start-art-learn { background:#182e24; }
#screen-menu .home-start-art-learn > img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 14%; }
#screen-menu .home-art-play { position:absolute; right:7px; bottom:7px; width:26px; height:26px; display:grid; place-items:center; color:#fffdf6; background:#172d25c9; border:1px solid #ffffff50; border-radius:50%; }
#screen-menu .home-art-play svg { width:14px; height:14px; }
#screen-menu .home-start-options [data-home-start="move"] { background:var(--pc-mint); }
#screen-menu .home-start-art-move { color:var(--p-ink); }
#screen-menu .home-start-art-move > svg { width:100%; height:100%; stroke:var(--p-ink); stroke-opacity:.16; stroke-width:1; }
#screen-menu .home-start-art-move .home-timer-arc { stroke:var(--p-accent); stroke-opacity:1; stroke-width:3; stroke-linecap:round; stroke-dasharray:222 283; transform:rotate(-90deg); transform-origin:60px 60px; }
#screen-menu .home-art-time { position:absolute; inset:36% 0 auto; text-align:center; font:700 25px/1 var(--p-font); letter-spacing:-.07em; font-variant-numeric:tabular-nums; }
#screen-menu .home-art-time-note { position:absolute; inset:64% 0 auto; text-align:center; font:700 6px/1 var(--p-font); letter-spacing:.08em; }
#screen-menu .home-start-art-ask { background:var(--pc-peach); }
#screen-menu .home-start-art-ask > img { display:block; width:100%; height:100%; object-fit:contain; padding:10px 1px 0; box-sizing:border-box; }
#screen-menu .home-art-chat { position:absolute; top:7px; right:7px; display:flex; align-items:center; gap:3px; padding:8px; border-radius:9px 9px 1px 9px; background:var(--p-paper); color:var(--p-ink); box-shadow:0 2px 8px #0718100d; }
#screen-menu .home-art-chat i { width:3px; height:3px; border-radius:50%; background:currentColor; }
#screen-menu .home-start-arrow { position:absolute; bottom:13px; left:18px; width:auto; height:auto; margin:0; border:0; background:none; font-size:19px; color:var(--p-accent); }
#screen-menu .home-start-options button:focus-visible { outline:3px solid var(--p-accent); outline-offset:4px; }
#screen-menu .home-start-options button:not(:disabled):active { transform:translateY(1px); box-shadow:none; }
#screen-menu :is(.home-note,.home-companion,.home-camera-free,.home-use-guide,.home-progress) { border:1px solid var(--home-border); box-shadow:none; border-radius:20px; }
#screen-menu :is(.home-note,.home-companion) { padding:22px; }
#screen-menu .home-note-action { border:0; box-shadow:none; border-radius:12px; }
#screen-menu .home-workspace > .menu-hero { border:0; box-shadow:none; border-radius:24px; }
#screen-menu .playground-card { border:1px solid var(--home-border); box-shadow:none; }
/* Keep the same navigation treatment when moving to Learn, Journal or Settings. */
#daily-navigation { border:1px solid var(--p-line); border-radius:20px; box-shadow:0 10px 36px #0718101a; padding:6px; }
#daily-navigation button { min-height:52px; border:0; border-radius:14px; box-shadow:none; font-size:10px; }
#daily-navigation button[aria-current="page"] { background:var(--pc-mint); color:var(--p-ink); box-shadow:none; }
#daily-navigation svg { width:21px; height:21px; stroke-width:1.8; }
@media (hover:hover) and (pointer:fine) {
  #screen-menu .home-start-options button:hover { transform:translateY(-3px); border-color:var(--p-accent); box-shadow:0 12px 28px #07181012; }
}
@media (min-width:900px) {
  #screen-menu .menu-content { padding-top:24px; }
  #screen-menu .home-heading { padding:16px 0 30px; margin-bottom:28px; }
  #screen-menu .home-heading h1 { font-size:44px; max-width:calc(100% - 150px); }
  #screen-menu button.home-craft-emblem { width:104px; top:24px; right:8px; border-radius:28px; }
  #screen-menu .home-craft-emblem img { border-radius:28px; }
  #screen-menu .home-start-path-heading { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:16px; }
  #screen-menu .home-start-options button { grid-template-columns:minmax(0,1fr); grid-template-rows:170px 1fr; padding:18px; gap:18px; align-items:start; min-height:326px; }
  #screen-menu .home-start-options .home-start-art { grid-row:1; width:100%; height:170px; border-radius:13px; }
  #screen-menu .home-start-art-learn > img { object-position:50% 0%; }
  #screen-menu .home-start-art-move > svg { display:block; width:160px; margin:auto; }
  #screen-menu .home-art-time { font-size:38px; inset:35% 0 auto; }
  #screen-menu .home-art-time-note { font-size:9px; inset:64% 0 auto; }
  #screen-menu .home-start-art-ask > img { max-width:180px; margin:auto; padding:4px; }
  #screen-menu .home-art-chat { top:26px; right:calc(50% - 82px); padding:12px; gap:4px; }
  #screen-menu .home-art-chat i { width:4px; height:4px; }
  #screen-menu .home-start-options .home-start-copy { padding:0 24px 10px 2px; }
  #screen-menu .home-start-options strong { font-size:21px; }
  #screen-menu .home-start-arrow { left:auto; right:20px; bottom:24px; }
  #screen-menu .home-workspace { gap:28px; }
}
@media (max-width:480px) {
  #screen-menu .menu-content { padding-inline:18px; }
  #screen-menu .menu-top { margin-bottom:16px; }
  #screen-menu .brand-mark { font-size:28px; }
  #screen-menu .home-heading { margin-bottom:20px; padding-top:5px; padding-bottom:18px; }
  #screen-menu .home-eyebrow { margin-bottom:17px; font-size:8px; }
  #screen-menu .home-heading h1 { font-size:29px; }
  #screen-menu .home-subtitle { margin-top:9px; font-size:12px; }
  #screen-menu .home-start-options button { min-height:136px; grid-template-columns:minmax(0,1fr) 96px; padding:15px; gap:12px; }
  #screen-menu .home-start-options .home-start-art { width:96px; height:110px; }
  #screen-menu .home-art-time-note { display:none; }
  #screen-menu .home-start-options strong { font-size:18px; }
  #screen-menu .home-start-options .home-start-kicker { font-size:8px; letter-spacing:.09em; }
  #screen-menu .home-start-options small { font-size:11px; }
  #screen-menu .home-start-arrow { left:15px; bottom:10px; }
}
@media (max-width:359px) {
  #screen-menu .menu-content { padding-inline:14px; }
  #screen-menu .brand-mark { font-size:24px; }
  #screen-menu .brand-tag { font-size:6px; }
  #screen-menu .home-heading h1 { font-size:27px; }
  #screen-menu .home-start-options button { grid-template-columns:minmax(0,1fr) 76px; gap:10px; }
  #screen-menu .home-start-options .home-start-art { width:76px; height:104px; }
  #screen-menu .home-start-options strong { font-size:16px; }
  #screen-menu .home-art-time { font-size:22px; }
  #screen-menu .home-art-time-note { font-size:5px; }
}
@media (prefers-reduced-motion:reduce) {
  #screen-menu .home-start-options button { transition:none; }
  #screen-menu .home-start-options button:hover,#screen-menu .home-start-options button:not(:disabled):active { transform:none; }
}