/* The Sanctuary: a warm, soft, round look. Cream paper, coral and mint accents, big touch targets (44px and up), 100dvh layouts with
   safe-area insets, a dock on phones and a side column on wide screens. Reduced motion and the light path switch the animation off. */
:root {
    --bg: #fff1dc; --bg2: #ffe3c2; --card: #fffaf1; --line: #f0d6b4; --ink: #5a3e36; --muted: #9a7e70; --coral: #ff8a6b; --coral-d: #e2664a; --mint: #7cc9a8; --mint-d: #4fa583;
    --gold: #ffcf5c; --sky: #8ecae6; --pink: #f48aa8; --shadow: 0 6px 18px rgba(120, 70, 40, .14); --r: 20px;
    --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
    --font: "Nunito", "Quicksand", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body.sm-page { font-family: var(--font); color: var(--ink); background: radial-gradient(1200px 700px at 20% -10%, #fff9ee 0%, var(--bg) 55%, var(--bg2) 100%) fixed; overscroll-behavior: none; touch-action: manipulation; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
#sanctBoot { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; gap: 14px; font-weight: 800; font-size: 20px; color: var(--muted); }
#sanctApp { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }
#sanctApp[hidden], [hidden] { display: none !important; }

/* ---------- buttons ---------- */
.sm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 16px; background: linear-gradient(#ffa585, var(--coral)); color: #fff; font-weight: 800; box-shadow: 0 4px 0 var(--coral-d), 0 8px 14px rgba(160, 80, 50, .2); text-decoration: none; transition: transform .08s, box-shadow .08s, filter .15s; text-shadow: 0 1px 0 rgba(150, 60, 30, .35); }
.sm-btn:hover { filter: brightness(1.05); }
.sm-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-d); }
.sm-btn:focus-visible, .sm-tab:focus-visible, .sm-act:focus-visible, .sm-card:focus-visible, .sm-room:focus-visible, .sm-chip:focus-visible, .sm-petchip:focus-visible { outline: 3px solid #5b9be0; outline-offset: 2px; }
.sm-btn.big { min-height: 52px; padding: 10px 26px; font-size: 18px; }
.sm-btn.ghost { background: var(--card); color: var(--ink); text-shadow: none; box-shadow: 0 3px 0 var(--line), 0 6px 12px rgba(120, 70, 40, .1); border: 2px solid var(--line); }
.sm-btn.danger { background: linear-gradient(#f28b8b, #e05a5a); box-shadow: 0 4px 0 #b83e3e; }
.sm-btn.ghost.danger { background: var(--card); color: #c24a4a; box-shadow: 0 3px 0 #f0c6c0; border-color: #f0c6c0; }
.sm-btn[disabled] { opacity: .5; pointer-events: none; filter: grayscale(.4); }
.sm-btn.sm-icon { width: 44px; min-width: 44px; padding: 0; border-radius: 50%; background: var(--card); color: var(--ink); text-shadow: none; box-shadow: 0 3px 0 var(--line), 0 5px 10px rgba(120, 70, 40, .12); border: 2px solid var(--line); }
.sm-link { min-height: 44px; background: none; border: 0; padding: 6px 4px; color: var(--coral-d); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.sm-ic { flex: none; vertical-align: middle; }
.sm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; }
.sm-row.end { justify-content: flex-end; }
.sm-muted { color: var(--muted); }

/* ---------- header and navigation ---------- */
.sm-header { display: flex; align-items: center; gap: 12px; padding: calc(8px + var(--sat)) calc(14px + var(--sar)) 8px calc(14px + var(--sal)); background: rgba(255, 250, 241, .88); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); z-index: 5; }
.sm-brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; min-height: 44px; }
.sm-brand b { display: block; font-size: 18px; line-height: 1.1; }
.sm-brand small { color: var(--muted); font-weight: 700; }
.sm-logo { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(#ffb99c, var(--coral)); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 var(--coral-d); }
.sm-xp { width: 90px; height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.sm-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), #a8e0c6); border-radius: 6px; transition: width .5s; }
.sm-tabs { display: flex; gap: 4px; margin-left: auto; }
.sm-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; background: none; border: 0; border-radius: 14px; font-weight: 800; color: var(--muted); }
.sm-tab.on, .sm-tab:hover { background: #ffe9d0; color: var(--ink); }
.sm-coins { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: #fff3c9; border: 2px solid #f4dc8a; border-radius: 999px; font-weight: 900; min-height: 44px; color: #8a6414; cursor: pointer; }
.sm-coins .sm-ic { color: #e9a91c; }
.sm-bottom { display: none; }
.sm-btab { flex: 1; min-height: 56px; background: none; border: 0; display: grid; place-items: center; gap: 2px; padding: 6px 2px; font-size: 11px; font-weight: 800; color: var(--muted); }
.sm-btab.on { color: var(--coral-d); }
.sm-btab.on .sm-ic { transform: translateY(-2px) scale(1.12); }

/* ---------- screens ---------- */
.sm-main { position: relative; min-height: 0; overflow: hidden; }
#sanctScreens { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 18px calc(18px + var(--sar)) 40px calc(18px + var(--sal)); }
.sm-screen { max-width: 1100px; margin: 0 auto; animation: sm-in .35s both; }
@keyframes sm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sm-head h1 { margin: 0; font-size: 28px; line-height: 1.1; }
.sm-head p { margin: 4px 0 0; color: var(--muted); font-weight: 700; }
.sm-lvl { min-width: 190px; display: grid; gap: 4px; }
.sm-lvl i, .sm-tasks i { display: block; height: 10px; background: var(--line); border-radius: 6px; overflow: hidden; }
.sm-lvl u, .sm-tasks u, .sm-xpbar i, i.bar u { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), #a8e0c6); text-decoration: none; border-radius: 6px; }
.sm-lvl small { color: var(--muted); font-weight: 700; }
.sm-card { background: var(--card); border: 2px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; }
button.sm-card { text-align: center; color: inherit; transition: transform .12s, box-shadow .12s; }
button.sm-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(120, 70, 40, .18); }
.sm-card h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 18px; }
.sm-card h4 { margin: 12px 0 6px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sm-empty { text-align: center; color: var(--muted); padding: 30px; font-weight: 700; }
.sm-hero { text-align: center; padding: 26px 18px; margin-bottom: 18px; background: linear-gradient(135deg, #fff5df, #ffe6c9); border: 2px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.sm-hero-art { color: var(--coral); }
.sm-hero p { max-width: 520px; margin: 8px auto 16px; color: var(--muted); font-weight: 700; }

/* map */
.sm-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 16px 0; }
.sm-room { position: relative; padding: 0; border: 3px solid #fff; border-radius: 22px; overflow: hidden; background: var(--tint, #ddd); box-shadow: var(--shadow); aspect-ratio: 16 / 10; transition: transform .15s, box-shadow .15s; }
.sm-room:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 14px 26px rgba(120, 70, 40, .22); }
.sm-room-cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-room.locked .sm-room-cv { filter: saturate(.4) brightness(.8); }
.sm-room-name { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: rgba(255, 250, 241, .92); border-radius: 999px; font-size: 14px; font-weight: 900; color: var(--ink); }
.sm-room-pets { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; }
.sm-room-pets .sm-pimg { margin-right: -8px; background: rgba(255, 250, 241, .9); border-radius: 50%; border: 2px solid #fff; }
.sm-room-pets em { margin-left: 12px; font-style: normal; font-weight: 900; background: rgba(255, 250, 241, .9); border-radius: 999px; padding: 2px 8px; font-size: 13px; }
.sm-room-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; color: #fff; background: rgba(60, 40, 30, .35); font-weight: 900; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.sm-pets-row { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 12px; scrollbar-width: thin; }
.sm-petchip { flex: none; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 6px 12px 6px 6px; min-height: 56px; background: var(--card); border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 3px 0 var(--line); text-align: left; font-weight: 800; }
.sm-petchip .sm-needs { grid-column: 2; }
.sm-petchip.on { border-color: var(--coral); box-shadow: 0 3px 0 var(--coral-d); background: #fff1e8; }
.sm-petchip.mini { display: block; padding: 3px; min-height: 52px; min-width: 52px; border-radius: 50%; position: relative; }
.sm-petchip.alert::after { content: "!"; position: absolute; right: -2px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: #ff6b6b; color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center; border: 2px solid #fff; }
.sm-pimg { display: inline-block; position: relative; flex: none; vertical-align: middle; }
.sm-pimg canvas { display: block; width: 100%; height: 100%; }
.sm-pimg.round { border-radius: 50%; overflow: hidden; }
.sm-pimg.dark canvas { filter: brightness(0) opacity(.28); }
.sm-tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sm-tasks li { display: grid; grid-template-columns: 26px 1fr 90px 52px; align-items: center; gap: 8px; font-weight: 800; }
.sm-tasks li.done { opacity: .6; }
.sm-tasks li em { font-style: normal; color: #b78414; text-align: right; }
.sm-tasks small { display: block; margin-top: 8px; color: var(--muted); }

/* needs */
.sm-needs { display: grid; gap: 6px; }
.sm-need { display: grid; grid-template-columns: 22px 1fr 32px; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; }
.sm-need i { display: block; height: 10px; background: #f3e2c8; border-radius: 6px; overflow: hidden; }
.sm-need b { display: block; height: 100%; border-radius: 6px; transition: width .6s; }
.sm-need.low i { animation: sm-pulse 1.2s infinite; }
.sm-need em { font-style: normal; text-align: right; color: var(--muted); }
.sm-needs.compact { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sm-needs.compact .sm-need { grid-template-columns: 16px 1fr; gap: 3px; }
@keyframes sm-pulse { 50% { opacity: .45; } }
.sm-hearts { display: inline-flex; gap: 2px; color: #f3c9d1; }
.sm-hearts .on { color: #f0587a; }
.sm-hearts .on .sm-ic { fill: currentColor; }

/* grids */
.sm-grid { display: grid; gap: 12px; }
.sm-grid-pets { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sm-grid-breeds { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sm-grid-species { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sm-grid-shop { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 12px; }
.sm-grid-awards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sm-grid-games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sm-grid-rooms { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sm-petcard, .sm-breed, .sm-item, .sm-game, .sm-spc, .sm-pick-room { display: grid; justify-items: center; gap: 4px; align-content: start; }
.sm-petcard .nm { font-size: 17px; } .sm-petcard small, .sm-breed small, .sm-item small, .sm-game small, .sm-spc small { color: var(--muted); font-weight: 700; }
.sm-petcard .meta { font-weight: 800; font-size: 13px; color: var(--mint-d); }
.sm-petcard .sm-needs { width: 100%; }
.sm-petcard .mood { font-style: normal; font-weight: 800; font-size: 12px; color: var(--muted); }
.sm-breed .pr { font-weight: 900; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #8a6414; }
.sm-breed.have { opacity: .65; } .sm-breed.locked { opacity: .75; }
.sm-breed.unknown b, .sm-spc.unknown b { color: var(--muted); }
.sm-rar { font-size: 11px; font-weight: 900; padding: 2px 9px; border-radius: 999px; color: #fff; background: var(--c, #999); text-transform: uppercase; letter-spacing: .04em; }
.sm-item .ok { color: var(--mint-d); } .sm-item i { font-style: normal; opacity: .85; }
.sm-item.have { background: #f3fbf6; }
.sm-game .ic { color: var(--coral-d); }
.sm-game.off { opacity: .5; }
.sm-award.got { background: #fff6d7; border-color: #f0d37a; } .sm-award .sm-ic { color: var(--coral-d); } .sm-award.got .sm-ic { color: #e9a91c; }
.sm-award { display: grid; gap: 4px; justify-items: start; } .sm-award small { color: var(--muted); font-weight: 700; } .sm-award em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--mint-d); }
i.bar { display: block; width: 100%; height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; }
.sm-filters { display: grid; gap: 10px; margin-bottom: 14px; }
.sm-search { width: 100%; min-height: 48px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); padding: 8px 16px; font-weight: 700; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-fchip { min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font-weight: 800; font-size: 14px; }
.sm-fchip.on { background: var(--coral); color: #fff; border-color: var(--coral-d); }
.sm-selects { display: flex; flex-wrap: wrap; gap: 12px; } .sm-selects label { display: grid; gap: 4px; font-weight: 800; font-size: 13px; color: var(--muted); }
select { min-height: 44px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); padding: 6px 12px; font-weight: 700; }
.sm-more { text-align: center; margin: 18px 0; }
.sm-slots { font-weight: 800; color: var(--muted); }
.sm-tabs2 { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.sm-tabs2 button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); font-weight: 800; }
.sm-tabs2 button.on { background: var(--coral); color: #fff; border-color: var(--coral-d); }
.sm-tag { display: inline-block; padding: 3px 11px; border-radius: 999px; background: #e9f6ef; color: var(--mint-d); font-weight: 800; font-size: 13px; margin: 2px 4px 2px 0; }
.sm-mini-chip { display: inline-flex; align-items: center; margin-right: 4px; }

/* breed sheet, pet page */
.sm-breed-sheet { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.2fr); gap: 18px; align-items: start; }
.sm-breed-art { height: 280px; background: radial-gradient(circle at 50% 60%, #fff5e0, #ffe2c0); border-radius: 24px; border: 2px solid var(--line); overflow: hidden; }
.sm-breed-art.small { height: 160px; width: 200px; margin: 0 auto 8px; }
.sm-petcv { display: block; }
.sm-breed-info h2 { margin: 0; } .sm-breed-info .sub { color: var(--muted); font-weight: 700; margin: 4px 0 10px; }
.sm-breed-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin: 10px 0; } .sm-breed-info dt { font-weight: 800; color: var(--muted); font-size: 13px; } .sm-breed-info dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sm-stages { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; } .sm-stages b { font-size: 13px; color: var(--muted); }
.sm-note { display: flex; gap: 6px; align-items: center; background: #fff3c9; border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 14px; }
.sm-namesheet { text-align: center; }
.sm-name { width: 100%; min-height: 52px; text-align: center; font-size: 22px; font-weight: 900; border-radius: 16px; border: 3px solid var(--line); background: #fff; padding: 6px 14px; margin: 8px 0; }
.sm-petpage .back { margin-bottom: 8px; }
.sm-pp-top { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.3fr); gap: 20px; align-items: start; margin-bottom: 16px; }
.sm-pp-art { height: 320px; background: radial-gradient(circle at 50% 65%, #fff5e0, #ffe0be); border-radius: 28px; border: 3px solid #fff; box-shadow: var(--shadow); overflow: hidden; }
.sm-pp-info h1 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.sm-pp-info .sub { color: var(--muted); font-weight: 700; margin: 0 0 8px; } .sm-badges { margin-bottom: 8px; }
.sm-xpbar { height: 12px; background: var(--line); border-radius: 8px; overflow: hidden; margin: 6px 0; }
.sm-pp-bond { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.sm-pp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.sm-favs { display: flex; gap: 14px; flex-wrap: wrap; } .sm-favs .fv { display: grid; justify-items: center; text-align: center; gap: 2px; } .sm-favs small { color: var(--muted); font-weight: 800; }
.sm-quirk { margin: 4px 0; font-weight: 700; font-size: 14px; }
.sm-stats { list-style: none; display: flex; gap: 14px; padding: 0; margin: 0 0 8px; } .sm-stats li { display: grid; font-weight: 700; font-size: 13px; color: var(--muted); } .sm-stats b { font-size: 24px; color: var(--ink); }
.sm-gstars { display: flex; flex-wrap: wrap; gap: 8px; } .sm-gstars span { display: inline-flex; align-items: center; gap: 2px; opacity: .35; } .sm-gstars span.on { opacity: 1; color: var(--coral-d); } .sm-gstars em { font-style: normal; font-size: 11px; color: #e9a91c; }
.sm-wslot h5 { margin: 10px 0 6px; font-size: 13px; color: var(--muted); }
.sm-witems { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-witem { display: grid; justify-items: center; width: 82px; padding: 6px 4px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font-weight: 800; gap: 1px; }
.sm-witem small { font-size: 11px; line-height: 1.1; text-align: center; } .sm-witem em { font-style: normal; font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.sm-witem.on { border-color: var(--coral); background: #fff1e8; } .sm-witem.unowned { opacity: .85; }
.sm-diary { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sm-diary li { display: grid; font-weight: 700; } .sm-diary small { color: var(--muted); }
.sm-diary.big li { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 8px 14px; }

/* ---------- the room view ---------- */
#sanctRoomView { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "view" "dock"; background: #1c1426; }
#sanctRoomCv { grid-area: view; width: 100%; height: 100%; display: block; touch-action: none; min-height: 0; background: #8ecae6; }
.sm-roomtop { grid-area: view; align-self: start; display: flex; align-items: center; gap: 10px; padding: 10px calc(12px + var(--sar)) 0 calc(12px + var(--sal)); pointer-events: none; z-index: 2; }
.sm-roomtop > * { pointer-events: auto; }
.sm-roomtitle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 250, 241, .92); box-shadow: var(--shadow); font-size: 16px; }
.sm-roomnav { margin-left: auto; display: flex; gap: 8px; }
.sm-tray { grid-area: view; align-self: end; margin: 10px; padding: 12px; background: rgba(255, 250, 241, .96); border-radius: 22px; border: 2px solid var(--line); box-shadow: var(--shadow); z-index: 3; display: grid; gap: 10px; }
.sm-tray-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .sm-tray-head small { color: var(--muted); font-weight: 700; flex: 1 1 200px; }
.sm-tray-items { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.sm-chip { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; min-height: 76px; padding: 6px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-weight: 800; position: relative; }
.sm-chip.on { border-color: var(--coral); background: #fff1e8; box-shadow: 0 0 0 3px rgba(255, 138, 107, .25); }
.sm-chip.no { opacity: .55; }
.sm-chip .lb { font-size: 12px; line-height: 1.1; max-width: 90px; text-align: center; }
.sm-chip em { position: absolute; right: 3px; top: 2px; font-style: normal; font-size: 11px; color: var(--muted); background: #fff; border-radius: 8px; padding: 0 4px; }
.sm-dock { grid-area: dock; background: rgba(255, 250, 241, .97); border-top: 3px solid var(--line); padding: 10px calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal)); display: grid; gap: 10px; z-index: 2; max-height: 46vh; overflow-y: auto; }
.sm-dock-pets { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; }
.sm-dock-sel { display: grid; gap: 8px; }
.sm-dock-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sm-dock-name .sm-link { font-size: 18px; color: var(--ink); }
.sm-dock-acts { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; }
.sm-act { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 76px; min-height: 68px; padding: 8px 10px; border-radius: 18px; border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: 12px; box-shadow: 0 3px 0 var(--line); color: var(--ink); }
.sm-act .sm-ic { color: var(--coral-d); }
.sm-act:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.sm-act.hot { border-color: var(--coral); background: #fff1e8; animation: sm-pulse 1.4s infinite; }

/* ---------- toasts, sheets ---------- */
#sanctToasts { position: fixed; left: 50%; top: calc(66px + var(--sat)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 120; pointer-events: none; width: min(92vw, 460px); }
.sm-toast { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fffaf1; border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); font-weight: 800; opacity: 0; transform: translateY(-10px); transition: opacity .25s, transform .25s; }
.sm-toast.in { opacity: 1; transform: none; } .sm-toast.good { border-color: var(--mint); } .sm-toast.award { border-color: var(--gold); background: #fff6d7; } .sm-toast.bad { border-color: #f0a0a0; }
#sanctModal { position: relative; z-index: 100; }
.sm-sheet-wrap { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; pointer-events: none; }
.sm-sheet-back { position: absolute; inset: 0; background: rgba(60, 38, 30, .45); opacity: 0; transition: opacity .25s; pointer-events: auto; }
.sm-sheet-wrap.in .sm-sheet-back { opacity: 1; }
.sm-sheet { position: relative; width: min(94vw, 560px); max-height: 88dvh; overflow-y: auto; background: var(--bg); border: 3px solid #fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(60, 30, 20, .4); padding: 20px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.2, 1.2, .4, 1), opacity .2s; pointer-events: auto; }
.sm-sheet.wide { width: min(94vw, 820px); } .sm-sheet.small { width: min(92vw, 400px); text-align: center; }
.sm-sheet-wrap.in .sm-sheet { transform: none; opacity: 1; }
.sm-sheet-x { position: absolute; right: 10px; top: 10px; z-index: 2; }
.sm-sheet h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 22px; } .sm-sheet.small h3 { justify-content: center; }
.sm-settings { display: grid; gap: 14px; } .sm-settings section { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 12px 14px; display: grid; gap: 8px; } .sm-settings h4 { margin: 0; display: flex; gap: 6px; align-items: center; }
.sm-seg { display: flex; gap: 6px; } .sm-seg button { flex: 1; min-height: 44px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font-weight: 800; } .sm-seg .on { background: var(--coral); color: #fff; border-color: var(--coral-d); }
.sm-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; } .sm-switch input { width: 24px; height: 24px; accent-color: var(--coral); flex: none; }
.sm-range { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; font-weight: 700; } .sm-range input { accent-color: var(--coral); height: 32px; }

/* ---------- minigames ---------- */
.sm-mini { position: fixed; inset: 0; z-index: 60; background: #1c1426; touch-action: none; user-select: none; -webkit-user-select: none; }
.sm-mini-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sm-mini-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 8px calc(10px + var(--sal)); background: linear-gradient(rgba(40, 24, 20, .45), transparent); transition: opacity .3s; }
.sm-mini-hud.quiet { opacity: .0; pointer-events: none; }
.sm-mini-hud .sm-btn.sm-icon { flex: none; }
.sm-mini-title { display: none; align-items: center; gap: 6px; color: #fff; font-weight: 900; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.sm-mini-time { flex: 1; height: 12px; background: rgba(255, 255, 255, .3); border-radius: 8px; overflow: hidden; } .sm-mini-time i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--mint), var(--gold)); border-radius: 8px; transition: width .2s linear; }
.sm-mini-score { min-width: 56px; padding: 6px 12px; background: rgba(255, 250, 241, .92); border-radius: 999px; text-align: center; font-weight: 900; }
.sm-mini-hint { position: absolute; left: 50%; bottom: calc(14px + var(--sab)); transform: translateX(-50%); max-width: 90vw; text-align: center; color: #fff; font-weight: 900; font-size: 18px; text-shadow: 0 2px 6px rgba(60, 30, 20, .8); pointer-events: none; }
.sm-mini-hint:empty { display: none; }
.sm-mini-card { position: absolute; left: 50%; top: 50%; width: min(92vw, 420px); transform: translate(-50%, -46%) scale(.94); opacity: 0; pointer-events: none; background: var(--bg); border: 3px solid #fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(40, 20, 10, .5); padding: 20px; text-align: center; transition: transform .3s cubic-bezier(.2, 1.2, .4, 1), opacity .2s; max-height: 92dvh; overflow-y: auto; }
.sm-mini-card.show { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.sm-mini-card h2 { margin: 6px 0; } .sm-mini-card p { margin: 6px 0 12px; font-weight: 700; color: var(--muted); } .sm-mini-card small { display: block; margin-top: 10px; color: var(--muted); }
.sm-mini-ico { color: var(--coral-d); }
.sm-pick { margin: 8px 0 14px; } .sm-pick b { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .sm-pick-row { display: flex; gap: 8px; overflow-x: auto; justify-content: flex-start; padding: 6px 2px; }
.sm-stars { display: flex; justify-content: center; gap: 6px; color: #d9c7b0; } .sm-stars span { display: inline-block; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), color .2s; } .sm-stars span.on { color: #ffc93c; transform: scale(1.18) rotate(-6deg); } .sm-stars .sm-ic { fill: currentColor; }
.sm-rewards { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; text-align: left; font-weight: 800; } .sm-rewards li { display: flex; align-items: center; gap: 8px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 6px 12px; } .sm-rewards li.up { border-color: var(--gold); background: #fff6d7; } .sm-rewards .sm-ic { color: var(--coral-d); }
.sm-note { margin-top: 6px; font-size: 13px; }

/* ---------- layouts ---------- */
@media (min-width: 900px) {
    .sm-mini-title { display: inline-flex; }
    #sanctRoomView { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "view dock"; }
    .sm-dock { border-top: 0; border-left: 3px solid var(--line); max-height: none; align-content: start; padding-top: 14px; }
    .sm-dock-pets { flex-wrap: wrap; }
    .sm-dock-acts { flex-wrap: wrap; overflow: visible; } .sm-act { min-width: 96px; }
    body.sm-lefty #sanctRoomView { grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "dock view"; }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 560px) {
    #sanctRoomView { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "view dock"; }
    .sm-dock { border-top: 0; border-left: 3px solid var(--line); max-height: none; align-content: start; }
    .sm-dock-acts { flex-wrap: wrap; overflow: visible; }
    body.sm-lefty #sanctRoomView { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "dock view"; }
    .sm-header { padding-top: 4px; padding-bottom: 4px; }
}
@media (max-width: 719px) {
    .sm-tabs, .sm-xp { display: none; }
    .sm-coins { margin-left: auto; }
    .sm-bottom { display: flex; background: rgba(255, 250, 241, .96); border-top: 2px solid var(--line); padding-bottom: var(--sab); z-index: 5; }
    .sm-head h1 { font-size: 24px; }
    .sm-breed-sheet, .sm-pp-top { grid-template-columns: 1fr; }
    .sm-breed-art { height: 220px; } .sm-pp-art { height: 260px; }
    .sm-rooms { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sm-grid-breeds { grid-template-columns: repeat(2, 1fr); } .sm-grid-pets { grid-template-columns: repeat(2, 1fr); } .sm-grid-shop { grid-template-columns: repeat(2, 1fr); }
    .sm-tasks li { grid-template-columns: 24px 1fr 56px 44px; }
    #sanctScreens { padding: 14px calc(12px + var(--sar)) 24px calc(12px + var(--sal)); }
    .sm-range { grid-template-columns: 90px 1fr; }
    .sm-dock { max-height: 50vh; }
}
body.sm-big .sm-btn, body.sm-big .sm-act, body.sm-big .sm-chip { min-height: 56px; font-size: 1.08em; }
body.sm-big .sm-act { min-width: 90px; }
body.sm-reduced *, body.sm-reduced *::before { animation-duration: .001s !important; transition-duration: .001s !important; }
body.sm-lite .sm-sheet-back, body.sm-lite .sm-header { backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .sm-screen { animation: none; } .sm-need.low i, .sm-act.hot { animation: none; } }

/* ---------- motion: everything eases, springs and staggers ---------- */
.sm-pop { animation: sm-popin .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes sm-popin { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.sm-btn { will-change: transform; }
.sm-btn:hover { transform: translateY(-2px); }
.sm-btn:active { transform: translateY(3px) scale(.97); }
.sm-act { transition: transform .15s cubic-bezier(.2, 1.6, .4, 1), box-shadow .15s; }
.sm-act:hover { transform: translateY(-4px) rotate(-1.5deg); }
.sm-act .sm-ic { transition: transform .25s cubic-bezier(.2, 1.8, .4, 1); } .sm-act:hover .sm-ic { transform: scale(1.25) rotate(-8deg); }
.sm-logo { animation: sm-wiggle 6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes sm-wiggle { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-12deg) scale(1.08); } 96% { transform: rotate(10deg) scale(1.08); } }
.sm-hero-art { animation: sm-bob 2.4s ease-in-out infinite; display: inline-block; } @keyframes sm-bob { 50% { transform: translateY(-8px) rotate(4deg); } }
.sm-coins { transition: transform .2s; } .sm-coins:hover { transform: scale(1.06); }
.sm-need.gain b { filter: brightness(1.35); } .sm-need.gain { animation: sm-gain .7s ease; } @keyframes sm-gain { 40% { transform: scale(1.06); } }
.sm-rewards li { animation: sm-popin .45s cubic-bezier(.2, 1.4, .4, 1) both; } .sm-rewards li:nth-child(2) { animation-delay: .08s; } .sm-rewards li:nth-child(3) { animation-delay: .16s; } .sm-rewards li:nth-child(4) { animation-delay: .24s; } .sm-rewards li:nth-child(5) { animation-delay: .32s; } .sm-rewards li:nth-child(n+6) { animation-delay: .4s; }
#sanctRoomView:not([hidden]) .sm-dock { animation: sm-slideup .45s cubic-bezier(.2, 1.2, .4, 1) both; } @keyframes sm-slideup { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) { #sanctRoomView:not([hidden]) .sm-dock { animation-name: sm-slideleft; } @keyframes sm-slideleft { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } } }
.sm-roomtitle { animation: sm-popin .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.sm-petchip, .sm-fchip, .sm-witem, .sm-chip { transition: transform .15s cubic-bezier(.2, 1.6, .4, 1), border-color .15s, background .15s; } .sm-petchip:hover, .sm-fchip:hover, .sm-witem:hover, .sm-chip:hover { transform: translateY(-3px) scale(1.04); }
.sm-pimg canvas { transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); } .sm-card:hover .sm-pimg canvas, .sm-petchip:hover .sm-pimg canvas { transform: translateY(-4px) scale(1.08) rotate(-2deg); }
.sm-xp i, .sm-xpbar i, .sm-lvl u { transition: width .8s cubic-bezier(.2, 1, .3, 1); }
.sm-mini-score { transition: transform .15s; } .sm-mini-hint { animation: sm-hint .35s cubic-bezier(.2, 1.4, .4, 1); } @keyframes sm-hint { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); } }
.sm-stars span.on { animation: sm-star .6s cubic-bezier(.2, 1.8, .4, 1) both; } @keyframes sm-star { from { transform: scale(.2) rotate(-60deg); } }
body.sm-reduced .sm-pop, body.sm-reduced .sm-logo, body.sm-reduced .sm-hero-art { animation: none; }
/* while a minigame is on screen the app underneath is not painted at all (it costs a lot on weak devices) */
body.sm-playing #sanctApp { visibility: hidden; }
.sm-dock { grid-auto-rows: max-content; overflow-y: auto; }
.sm-dock-pets { min-height: 60px; flex: none; }
.sm-brand b { white-space: nowrap; }
@media (max-height: 560px) { .sm-brand small, .sm-xp { display: none; } .sm-header { gap: 8px; } .sm-tab span { display: none; } .sm-tab { padding: 6px 10px; } }