.home-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ritual-count { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
#home { padding-top:calc(env(safe-area-inset-top) + 24px); display:block; }
.home-header { padding-bottom:18px; }
.home-header h1 { font-size:29px; }
.game-heading { padding:12px 0 7px; gap:10px; }
.game-name { flex:1; min-width:0; }
.game-heading h2 { font-size:18px; }
.game-heading p { font-size:11px; margin-top:3px; }
.game-art { width:40px; height:40px; flex:none; display:block; }
.game-art svg { width:100%; height:100%; display:block; }
.daily-count { font-size:14px; font-weight:500; }
.daily-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:12px; }
.daily-options button { border:1px solid var(--line); border-radius:6px; background:var(--surface); display:flex; flex-direction:row; justify-content:center; align-items:center; gap:5px; min-height:44px; padding:5px 3px; }
.daily-options button strong { font-size:13px; font-weight:500; }
.daily-options [data-daily-icon]:empty { display:none; }
.daily-options [data-daily-icon] { display:block; width:auto; }
.daily-options [data-daily-icon] svg,.hub-mark svg { width:14px; height:14px; display:block; }
.hub-mark:empty { display:none; }
.hub-mark { color:var(--action); }
.progress-mark { display:block; width:6px; height:6px; border-radius:50%; background:var(--action); }
.daily-options .complete { border-color:color-mix(in srgb,var(--action) 40%,var(--line)); }
.daily-options .in-progress { border-bottom:2px solid var(--action); }
.home-footer { padding-top:4px; }
.home-footer .practice-link { min-height:44px; font-size:12px; }

#companion { width:100%; height:100dvh; height:var(--visible-height,100dvh); max-width:520px; margin:0 auto; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top) + 14px) max(12px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 10px) max(12px,env(safe-area-inset-left)); }
#companion .header { padding:0 0 10px; }
#companion h1 { font-size:21px; }
#companion .tools { gap:0; }
#companion .pack-picker { margin:0 0 8px; }
.pack-picker [data-comp-pack][aria-pressed="true"] { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px #0001; }
.comp-meta { display:flex; align-items:center; justify-content:space-between; padding:2px 4px; flex:none; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.comp-goal { text-align:center; font-size:13px; color:var(--muted); margin:8px 0; flex:none; }
.comp-stage { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px; display:flex; flex-direction:column; }
.comp-bank { flex:none; display:grid; grid-template-columns:repeat(var(--bank-columns,4),minmax(0,1fr)); gap:7px; padding:12px 4px 4px; }
.bank-item,.target-slot { display:flex; justify-content:center; align-items:center; position:relative; width:100%; min-width:0; min-height:48px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:4px; touch-action:none; -webkit-user-select:none; user-select:none; }
.target-slot { border-style:dashed; background:var(--tile); }
.target-slot.occupied { border-style:solid; background:var(--surface); }
.bank-item.selected,.target-slot.selected { border:2px solid var(--action); box-shadow:0 0 0 1px var(--action); }
.target-slot.suggested,.icon-button.suggested { outline:2px dashed var(--action); outline-offset:2px; }
.target-slot.drop-target { background:color-mix(in srgb,var(--action) 18%,var(--surface)); outline:2px solid var(--action); }
.bank-item svg,.target-slot svg { width:100%; height:100%; display:block; pointer-events:none; }
.bank-item:disabled { opacity:1; }
.bank-item.used { border-style:dashed; background:transparent; opacity:.45; }
.bank-vacancy { width:12px; height:2px; background:var(--line); }
.comp-drag-ghost { position:fixed; width:68px; height:68px; z-index:50; pointer-events:none; display:flex; align-items:center; justify-content:center; background:var(--surface); border:2px solid var(--action); border-radius:6px; box-shadow:0 6px 14px #0003; padding:3px; }
.comp-drag-ghost svg { width:100%; height:100%; }
.drag-origin { opacity:.3; }
.target-slot:disabled { opacity:1; }
.slot-number { color:var(--muted); opacity:.55; font-size:16px; font-weight:400; }
.comp-footer { flex:none; padding:4px 4px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; min-height:48px; }
.comp-status { font-size:12px; line-height:18px; min-height:20px; margin:0; align-self:center; overflow-wrap:anywhere; }
.comp-actions { display:flex; align-items:center; justify-content:center; min-height:44px; gap:12px; }
.patch-tools { display:flex; align-items:center; gap:6px; }
.patch-tools .icon-button { background:var(--surface); border-color:var(--line); }
.comp-storage { font-size:10px; color:var(--muted); }
.comp-finish { display:flex; align-items:center; gap:10px; min-height:50px; grid-column:1 / -1; }
.comp-finish>span { color:var(--muted); font-size:12px; white-space:nowrap; }
.comp-finish .primary-button { flex:1; font-size:14px; min-width:0; }
.shelf-board { display:grid; grid-template-columns:repeat(var(--items),minmax(0,1fr)); gap:5px; padding:18px 0 12px; flex:none; }
.shelf-position { min-width:0; border-bottom:4px solid var(--line); text-align:center; }
.shelf-position>.target-slot { aspect-ratio:1; }
.shelf-position>span { display:block; color:var(--muted); font-size:11px; padding:5px 0; }
#companion[data-game="shelf"] .bank-item { aspect-ratio:1; }
.shelf-clues { margin:10px 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0; }
.shelf-clues li { display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.5; padding:10px 0; border-bottom:1px solid var(--line); }
.shelf-clues b { font-weight:600; }
.clue-state { display:flex; flex:none; width:18px; }
.clue-state svg { width:18px; height:18px; color:var(--muted); }
.satisfied .clue-state svg,.equation.satisfied .equation-state svg { color:var(--action); }
.violated .clue-state svg,.equation.violated .equation-state svg { color:light-dark(#b65242,#f0a392); }
.equations { display:flex; flex-direction:column; gap:24px; margin:auto 0; padding:20px 0; }
.equation { display:grid; grid-template-columns:minmax(48px,1fr) 18px minmax(48px,1fr) 18px 48px 18px; gap:7px; align-items:center; }
.equation .target-slot { height:74px; }
.operator { text-align:center; font-size:21px; color:var(--muted); }
.equation-target { text-align:center; font-size:27px; font-weight:600; }
.equation-state { width:18px; height:18px; color:var(--muted); }
.equation-state svg { width:18px; height:18px; }
.number-value { font-size:29px; font-weight:600; }
#companion[data-game="equal"] .bank-item { height:60px; background:color-mix(in srgb,var(--b) 22%,var(--surface)); }
#companion[data-game="equal"] .bank-item.used { background:transparent; }
.patch-stage { display:grid; grid-template-columns:minmax(76px,1fr) minmax(0,2.1fr); align-items:center; gap:18px; margin:auto 0; padding:20px 0; }
.patch-target { margin:0; width:100%; }
.patch-target figcaption { color:var(--muted); font-size:12px; margin-bottom:10px; text-align:center; }
.patch-target svg { display:block; width:100%; aspect-ratio:1; }
.patch-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; width:100%; aspect-ratio:1; }
.patch-board .target-slot { aspect-ratio:1; padding:0; border-radius:3px; overflow:hidden; }
#companion[data-game="patchwork"] .bank-item { aspect-ratio:1; padding:0; border-radius:4px; overflow:hidden; }
.tile-face { position:absolute; right:3px; bottom:3px; background:#fff; color:#29343b; font-size:9px; line-height:14px; text-align:center; width:14px; height:14px; border-radius:2px; }
@media (max-height:650px) {
  #companion { padding-top:calc(env(safe-area-inset-top) + 6px); padding-bottom:calc(env(safe-area-inset-bottom) + 6px); }
  #companion .header { padding-bottom:4px; }
  .comp-meta { font-size:10px; }
  .comp-goal { margin:4px 0; font-size:12px; }
  .shelf-board { padding-top:6px; padding-bottom:5px; }
  .shelf-clues { margin-top:4px; }
  .shelf-clues li { padding:7px 0; font-size:12px; }
  .equations { gap:16px; padding:10px 0; }
  .comp-bank { padding-top:8px; }
  .patch-stage { padding:8px 0; }
}