/* SaferWord home page (Plan Alfa, 2026-10-28): one light look, liquid glass over big patches of coloured light.
   Screens: home (Acasă / Jocuri, switched from the floating bar at the bottom), sign-in and a 3-step tour on demand.
   Opening an app or a game plays the iOS-style launch. Zi / Noapte (data-sh-mode from /look.js): the night look is at the end. */
/* Fonts are self-hosted (a Google stylesheet blocks the first paint on phones). Inter for everything, Newsreader italic for verses. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/newsreader-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/newsreader-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #F3EFE8; --ink: #1C1C1E; --mute: #4E4E56; --faint: #6E6E76; --acc: #7A4405; --acc-hi: #5C3304;
  --line: rgba(28,28,30,.1);
  --r-xl: 30px; --r-lg: 26px; --r-md: 18px;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --verse: "Newsreader", Georgia, serif;
  --spring: cubic-bezier(.32, 1.28, .48, 1); --ease: cubic-bezier(.22, .8, .24, 1);
  --blur: 24px;
  /* the glass recipe (Plan Alfa 3.2) */
  --glass-bg: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.2));
  --glass-edge: 1px solid rgba(255,255,255,.75);
  --glass-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 18px 44px rgba(40,30,60,.14);
  --chip-bg: rgba(255,255,255,.4); --chip-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
html:root { color-scheme: light; } /* /look.css says dark for the apps' night theme; the night look below says dark too */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { height: var(--app-h, 100%); }
body { background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.45; overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-hi); }
button:focus-visible, input:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- light behind the glass: without it the glass looks grey and flat ---------- */
#sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
#sky i, .blobs i { position: absolute; border-radius: 50%; display: block; }
#sky .b1 { width: 430px; height: 430px; left: -110px; top: -120px; background: radial-gradient(circle, rgba(255,170,70,.95), rgba(255,170,70,0) 68%); }
#sky .b2 { width: 420px; height: 420px; right: -150px; top: 30%; background: radial-gradient(circle, rgba(90,150,255,.85), rgba(90,150,255,0) 68%); }
#sky .b3 { width: 420px; height: 420px; left: -130px; bottom: -140px; background: radial-gradient(circle, rgba(170,130,255,.75), rgba(170,130,255,0) 68%); }
/* on the home page the patches scroll with the content, all the way down */
.blobs { position: absolute; z-index: -1; left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); top: -40px; bottom: -140px; overflow: hidden; pointer-events: none; }
.blobs i { width: 430px; height: 430px; }
.blobs i:nth-child(1) { left: -110px; top: -80px; background: radial-gradient(circle, rgba(255,170,70,.95), rgba(255,170,70,0) 68%); }
.blobs i:nth-child(2) { right: -150px; top: 180px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(90,150,255,.85), rgba(90,150,255,0) 68%); }
.blobs i:nth-child(3) { left: -60px; top: 20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,120,150,.75), rgba(255,120,150,0) 68%); }
.blobs i:nth-child(4) { right: -90px; top: 32%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255,190,80,.9), rgba(255,190,80,0) 68%); }
.blobs i:nth-child(5) { left: -130px; top: 45%; background: radial-gradient(circle, rgba(170,130,255,.75), rgba(170,130,255,0) 68%); }
.blobs i:nth-child(6) { right: -120px; top: 58%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,90,90,.65), rgba(255,90,90,0) 68%); }
.blobs i:nth-child(7) { left: -100px; top: 70%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(80,200,170,.7), rgba(80,200,170,0) 68%); }
.blobs i:nth-child(8) { right: -130px; top: 82%; background: radial-gradient(circle, rgba(90,150,255,.8), rgba(90,150,255,0) 68%); }
/* a short page (Jocuri, few games) keeps the patches from bunching up */
.blobs { min-height: 100%; }
/* iOS draws the status bar text white over this light page (the apps need the see-through bar): a soft dusk keeps the clock readable */
body::before { content: ""; position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px); pointer-events: none; background: linear-gradient(rgba(52,40,84,.5), rgba(52,40,84,.15)); }

/* ---------- glass ---------- */
.glass { position: relative; background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(190%); backdrop-filter: blur(var(--blur)) saturate(190%);
  border: var(--glass-edge); box-shadow: var(--glass-shadow); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255,255,255,.88); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: rgba(255,255,255,.88); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- icons (app and game pictures) ---------- */
.ico { display: block; flex: none; overflow: hidden; border-radius: 22.5%; background: #fff; position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 20px -10px rgba(40,30,60,.5); }
.ico img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); }
.ico.svg img { transform: none; }

/* ---------- screens ---------- */
#app { position: relative; z-index: 1; height: 100%; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  transition: opacity .5s var(--ease), transform .6s var(--ease); }
.screen.out { opacity: 0; transform: scale(.98) translateY(10px); pointer-events: none; }
.screen.out-up { opacity: 0; transform: scale(1.02) translateY(-10px); pointer-events: none; }
#home { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); scroll-padding-top: 84px; } /* the sticky top bar must not cover a section we scroll to */

/* ---------- buttons ---------- */
.btn { min-height: 52px; padding: 0 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--ink); transition: transform .35s var(--spring); }
.btn:hover { color: var(--ink); }
.btn:active { transform: scale(.96); }
.btn.dark { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(28,28,30,.28); }
.btn.dark:hover { color: #fff; }
.btn.white { background: #fff; color: var(--ink); box-shadow: 0 10px 24px rgba(40,30,60,.14); }
.btn.glass { background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.25)); border-color: rgba(255,255,255,.8); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.iconbtn { width: 44px; height: 44px; border-radius: 22px; flex: none; display: flex; align-items: center; justify-content: center; position: relative;
  border: 1px solid rgba(255,255,255,.7); background: var(--chip-bg); box-shadow: var(--chip-shadow); color: var(--ink); transition: transform .35s var(--spring); }
.iconbtn:active { transform: scale(.92); }
.iconbtn svg { width: 19px; height: 19px; }
.iconbtn[aria-expanded="true"] { background: rgba(255,255,255,.85); }
.link { color: var(--mute); font-size: 15px; font-weight: 600; padding: 10px 12px; border-radius: 12px; min-height: 44px; }
.link:hover { color: var(--ink); }
.fine { font-size: 13px; color: var(--mute); margin: 0; max-width: 36ch; }
.err { color: #b3261e; font-size: 14px; margin: 0; }

/* ---------- sign-in ---------- */
#login { align-items: center; justify-content: center; text-align: center; }
.login-card { width: min(100%, 420px); border-radius: var(--r-xl); padding: 34px 26px 26px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mark { width: 84px; height: 84px; border-radius: 26px; display: flex; align-items: center; justify-content: center; color: var(--acc);
  background: var(--glass-bg); border: var(--glass-edge); box-shadow: var(--glass-shadow); }
.mark svg { width: 44%; height: 44%; }
.mark.big { width: 120px; height: 120px; border-radius: 36px; }
.wordmark { font-weight: 800; font-size: 36px; letter-spacing: -.035em; margin: 0; }
.tagline { margin: -10px 0 0; color: var(--mute); font-size: 16px; max-width: 30ch; text-wrap: balance; }
.btns { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.btns .btn { width: 100%; }
#emailBox { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.field { height: 52px; border-radius: 999px; padding: 0 22px; font: inherit; color: var(--ink); background: rgba(255,255,255,.7); border: 1px solid var(--line); outline: none; width: 100%; }
.field::placeholder { color: var(--faint); }
.sent { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sent svg { width: 54px; height: 54px; color: var(--acc); }
.sent b { font-size: 20px; }
.sent p { margin: 0; color: var(--mute); max-width: 30ch; }

/* ---------- tour ---------- */
#tour { align-items: center; justify-content: center; }
.tour { width: min(100%, 460px); display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
.tour-top { display: flex; justify-content: flex-end; }
.slides { height: min(58vh, 460px); border-radius: var(--r-xl); overflow: hidden; touch-action: pan-y; }
.track { display: flex; height: 100%; transition: transform .6s var(--spring); }
.slide { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 26px; text-align: center; }
.slide h2 { font-size: clamp(25px, 6.6vw, 30px); line-height: 1.15; margin: 0; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.slide p { margin: 0; color: var(--mute); font-size: 17px; max-width: 28ch; text-wrap: balance; }
.art { height: 140px; display: flex; align-items: center; justify-content: center; width: 100%; }
.cloud { width: 120px; height: 84px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.cloud svg { width: 44px; height: 44px; color: var(--acc); }
.dots { display: flex; gap: 8px; justify-content: center; }
.dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(28,28,30,.18); transition: width .4s var(--spring), background .3s; }
.dot.on { width: 26px; background: var(--ink); }
.tour-nav { display: flex; gap: 12px; }
.tour-nav .btn { flex: 1; }
/* the gold home button, as it looks inside the apps */
.homepill-demo { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 6px; border-radius: 999px; font-weight: 800; font-size: 15px; color: #140d03;
  background: linear-gradient(180deg, #f8dc9b, #f2c45a 50%, #b8862c); box-shadow: 0 12px 30px -12px rgba(184,134,44,.8), inset 0 1px 0 rgba(255,255,255,.6); }

/* ---------- home ---------- */
.wrap { position: relative; isolation: isolate; width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; flex: 1 0 auto; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 7px 0 18px; border-radius: 29px;
  transition: transform .25s var(--ease), opacity .25s var(--ease); will-change: transform; }
#home.bars-away .topbar { transform: translateY(calc(-100% - max(14px, env(safe-area-inset-top, 0px)) - 16px)); opacity: 0; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); min-height: 44px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand svg { width: 20px; height: 20px; color: var(--acc); }
.tb-btns { display: flex; gap: 4px; }
#avatarBtn .letter { font-weight: 800; font-size: 17px; }
#avatarBtn .sync { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #2e9e5b; border: 2px solid #fff; }
#avatarBtn .sync.off { background: #8a8aa3; }
#avatarBtn .sync.busy { background: #d79a2b; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* search: opens under the top bar */
.findbox { margin-top: -18px; border-radius: var(--r-lg); padding: 8px; display: flex; flex-direction: column; gap: 4px; animation: drop .35s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.find-in { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.75); }
.find-in svg { width: 19px; height: 19px; flex: none; color: var(--acc); }
.find-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.find-in input::placeholder { color: var(--faint); }
.find-in input:focus-visible { outline: none; }
.find-res:empty { display: none; }
.find-res { display: flex; flex-direction: column; padding: 2px 6px; }
.res { display: flex; align-items: center; gap: 12px; padding: 8px 4px; min-height: 52px; color: var(--ink); border-top: 1px solid var(--line); }
.res:first-child { border-top: 0; }
.res:hover { color: var(--ink); }
.res .ico { width: 40px; height: 40px; }
.res .t { display: flex; flex-direction: column; min-width: 0; }
.res b { font-weight: 600; }
.res small { color: var(--mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-none { margin: 0; padding: 10px 6px; color: var(--mute); font-size: 15px; }

/* announcement banner, written in /admin → Anunțuri */
.ann { margin-top: -12px; border-radius: var(--r-md); padding: 12px 8px 12px 16px; display: flex; gap: 12px; align-items: center; border-left: 4px solid var(--acc); }
.ann.info { border-left-color: #3d6fd1; } .ann.maint { border-left-color: #c77a12; }
.ann .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ann .t b { font-weight: 700; }
.ann .t span { color: var(--mute); font-size: 14px; }
.ann .btn { min-height: 44px; padding: 0 16px; font-size: 14px; flex: none; }
.ann .x { width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: var(--mute); font-size: 22px; line-height: 1; }
.ann .x:hover { color: var(--ink); }
@media (max-width: 520px) { .ann { flex-wrap: wrap; } .ann .t { flex-basis: calc(100% - 56px); } .ann .btn { order: 3; } }

.view { display: flex; flex-direction: column; gap: 30px; animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* hero */
.hero { padding: 22px 8px 0; display: flex; flex-direction: column; gap: 14px; }
.hello { margin: 0 0 -4px; font-size: 15px; color: var(--mute); }
.hello b { color: var(--ink); font-weight: 600; }
.hero h1 { margin: 0; font-size: 46px; line-height: 1.03; font-weight: 800; letter-spacing: -.04em; }
.hero h1 span { display: block; }
.lead { margin: 0; font-size: 18px; line-height: 1.45; color: #3E3E46; max-width: 34ch; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero-btns .btn svg { width: 16px; height: 16px; }

/* section headings, used by the sections still to come */
.sec-h { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.sec-h h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.sec-h a { font-size: 16px; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--acc-hi); }
html:not([data-sh-mode="noapte"]) .sec-h a { color: #4E2B03; } /* over the blue patch on a tablet the darker gold was still just under 4.5:1 */

/* Cuvântul zilei */
.verse { border-radius: var(--r-xl); padding: 26px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.verse-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kick { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.verse-date { font-size: 13px; font-weight: 500; color: var(--mute); }
.verse blockquote { margin: 0; font-family: var(--verse); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.32; letter-spacing: -.01em; text-wrap: pretty; }
.verse-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.verse-ref { font-size: 15px; font-weight: 600; color: #2E2E34; }
.verse-acts { display: flex; gap: 6px; }
#verseSave[aria-pressed="true"] svg { fill: var(--acc); stroke: var(--acc); }

/* sections with a heading and a link */
.sec { display: flex; flex-direction: column; gap: 12px; }
.sec-link { font-size: 16px; font-weight: 600; min-height: 44px; min-width: 44px; justify-content: flex-end; display: flex; align-items: center; color: var(--acc); }
.sec-link:hover { color: var(--acc-hi); }

/* Ascultă acum: the clip of the day */
.clip { border-radius: var(--r-xl); padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.cover { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #E7D4B4; }
.cover img, .cover iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.pill-badge { position: absolute; padding: 7px 12px; border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff; }
.pill-badge.dur { left: 12px; bottom: 12px; }
.pill-badge.new { left: 12px; top: 12px; background: var(--ink); color: #fff; border-color: transparent; box-shadow: none; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.cover.playing .pill-badge { display: none; }
.clip-info { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.clip-info .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clip-info b { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.clip-info .tx > span { font-size: 14px; color: var(--mute); }
.play-btn { width: 54px; height: 54px; border-radius: 27px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(28,28,30,.3); transition: transform .35s var(--spring); }
.play-btn:active { transform: scale(.92); }
.play-btn svg { width: 20px; height: 20px; margin-left: 3px; }
.yt-link { margin: 0 2px 2px; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 23px; color: var(--ink); font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
.yt-link:hover { color: var(--ink); }
.yt-link svg { width: 18px; height: 18px; }

/* Playlisturi: cards that scroll sideways, edge to edge */
.shelf { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 20px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf-nav { display: none; gap: 8px; margin: 0 auto 0 14px; }
.shelf-nav .iconbtn { width: 40px; height: 40px; -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
.shelf-nav .iconbtn:disabled { opacity: .4; cursor: default; transform: none; }
@media (hover: hover) and (pointer: fine) { .shelf-nav { display: flex; } }
.plcard { flex: 0 0 230px; scroll-snap-align: start; border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); transition: transform .35s var(--spring); }
.plcard:hover { color: var(--ink); }
.plcard:active { transform: scale(.97); }
.plcard .pic { position: relative; height: 128px; border-radius: 18px; overflow: hidden; background: #E7D4B4; }
.plcard .pic img { width: 100%; height: 100%; object-fit: cover; }
.plcard .n { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 14px; font-size: 12px; font-weight: 700; color: var(--ink);
  background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff; }
.plcard .n svg { width: 13px; height: 13px; }
.plcard .tx { display: flex; flex-direction: column; gap: 2px; padding: 0 6px 6px; }
.plcard b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plcard small { font-size: 13px; color: var(--mute); }

/* Noi: grouped list, iOS style */
.list { border-radius: var(--r-lg); padding: 4px 16px; display: flex; flex-direction: column; }
.item { display: flex; align-items: center; gap: 14px; padding: 12px 0; min-height: 44px; color: var(--ink); position: relative; }
.item:hover { color: var(--ink); }
.item + .item::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--line); }
.sq { width: 44px; height: 44px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.sq svg { width: 20px; height: 20px; }
.item .tx, .rowcard .tx, .card .tx, .soon-card .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item small, .card small, .rowcard small { font-size: 14px; color: var(--mute); }
.go { width: 16px; height: 16px; flex: none; color: var(--faint); }

/* Biblia on its own row, Predica + Cititor under it */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { border-radius: var(--r-lg); padding: 18px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; color: var(--ink); transition: transform .35s var(--spring); }
.card:hover { color: var(--ink); }
.card:active, .rowcard:active, .gcard:active { transform: scale(.97); }
.card > svg { width: 28px; height: 28px; color: var(--acc); }
.card b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.card.big { grid-column: 1 / -1; min-height: 132px; }
.card.big b { font-size: 24px; }

.rowcard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); text-align: left; width: 100%; color: var(--ink); transition: transform .35s var(--spring); }
.rowcard b { font-size: 16px; font-weight: 700; }
.rowcard .sq svg { width: 22px; height: 22px; }

/* Joacă-te */
.soon-card { border-radius: var(--r-xl); padding: 20px; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; color: #fff;
  background: linear-gradient(145deg, rgba(28,28,30,.92), rgba(28,28,30,.78)); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); backdrop-filter: blur(var(--blur)) saturate(160%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), 0 18px 44px rgba(28,28,30,.3); }
.soon-chip { align-self: flex-start; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.soon-card b { font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.soon-card small { font-size: 15px; line-height: 1.4; color: #E2E2E8; }
.games3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gcard { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px; border-radius: 24px; color: var(--ink); text-align: center; transition: transform .35s var(--spring); }
.gcard:hover { color: var(--ink); }
.gcard .ico { width: 52px; height: 52px; border-radius: 16px; }
.gcard span:last-child { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.gcard.maint .ico img { opacity: .5; filter: saturate(.4); }

/* search results for poems and songs */
.res .sq { width: 40px; height: 40px; border-radius: 12px; }
.res .sq svg { width: 18px; height: 18px; }
.find-k { margin: 8px 4px 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }

/* saved verses (Cont) */
.saved { display: flex; flex-direction: column; gap: 10px; }
.saved figure { margin: 0; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.7); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.saved blockquote { margin: 0; font-family: var(--verse); font-style: italic; font-size: 18px; line-height: 1.35; }
.saved figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; color: #2E2E34; }
.saved figcaption button { color: var(--mute); font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 6px; }

/* footer */
.foot { padding: 8px 8px 0; display: flex; flex-direction: column; gap: 8px; }
.foot b { font-size: 15px; font-weight: 700; }
.foot > span { font-size: 14px; line-height: 1.5; color: #3E3E46; }
.foot-links { display: flex; gap: 16px; }
.foot-links a { font-size: 15px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.langs { align-self: flex-start; display: flex; gap: 4px; border-radius: 999px; padding: 4px; margin-top: 6px; }
.langs button { min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--mute); }
.langs button[aria-pressed="true"] { background: rgba(255,255,255,.85); color: var(--ink); box-shadow: 0 2px 8px rgba(40,30,60,.1); }

/* ---------- bottom bar: floating glass, the active tab wears a whiter pill ---------- */
.tabbar { position: fixed; z-index: 10; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 4px));
  margin: 0 auto; max-width: 520px; height: 66px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 6px; }
/* the glass is its own layer, so it can close in to a circle without squashing the icons */
.tabbar > .tb-bg { position: absolute; inset: 0; margin: 0; z-index: -1; border-radius: 33px; pointer-events: none;
  --blur: 26px; background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.28)); border-color: rgba(255,255,255,.8);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.4), 0 18px 44px rgba(40,30,60,.2);
  clip-path: inset(-60px round 93px); transition: clip-path .3s var(--ease), opacity .15s linear; }
/* the circle with the SaferWord cross that the bar melts into */
.tabbar > .tb-orb { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; z-index: 1; color: var(--acc);
  --blur: 26px; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.34)); border-color: rgba(255,255,255,.85);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.4), 0 14px 34px rgba(40,30,60,.22);
  opacity: 0; transform: scale(.4); visibility: hidden; pointer-events: none;
  transition: transform .3s var(--spring), opacity .2s var(--ease), visibility 0s linear .3s; }
.tabbar > .tb-orb svg { width: 22px; height: 22px; }
.tabbar > .tb-orb:hover { color: var(--acc-hi); }
.tabbar > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 6px 2px; border-radius: 27px; color: var(--mute); min-width: 0; transition: background .3s, color .3s; }
/* closed: the tabs slide to the middle and fade, the glass closes in to a 56px circle, the cross grows out of it */
.tabbar > :not(.tb-bg):not(.tb-orb) { position: relative; z-index: 1; transition: background .3s, color .3s, transform .3s var(--ease), opacity .2s var(--ease), visibility 0s; }
.tabbar > :nth-child(2) { --k: 2; } .tabbar > :nth-child(3) { --k: 1; } .tabbar > :nth-child(5) { --k: -1; } .tabbar > :nth-child(6) { --k: -2; }
.tabbar.mini { pointer-events: none; }
.tabbar.mini > :not(.tb-bg):not(.tb-orb) { transform: translateX(calc(var(--k, 0) * (100% + 4px))); opacity: 0; visibility: hidden;
  transition: background .3s, color .3s, transform .3s var(--ease), opacity .2s var(--ease), visibility 0s linear .3s; }
.tabbar.mini > .tb-bg { clip-path: inset(5px calc(50% - 28px) round 28px); opacity: 0; transition: clip-path .3s var(--ease), opacity .12s linear .2s; }
.tabbar.mini > .tb-orb { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: transform .3s var(--spring) .06s, opacity .2s var(--ease) .06s, visibility 0s; }
.tabbar > *:hover { color: var(--ink); }
.tabbar svg { width: 21px; height: 21px; }
.tabbar span { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar [aria-current="page"] { color: var(--ink); background: rgba(255,255,255,.75); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(40,30,60,.12); }

/* ---------- Jocuri: the games grid ---------- */
.resume { border-radius: var(--r-lg); padding: 14px; display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; color: var(--ink); transition: transform .45s var(--spring); }
.resume:hover { color: var(--ink); }
.resume:active { transform: scale(.98); }
.resume .ico { width: 64px; height: 64px; }
.resume .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.resume small { color: var(--acc); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.resume b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume .desc { color: var(--mute); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 6px; border-radius: 9px; background: rgba(28,28,30,.1); overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; border-radius: 9px; background: var(--acc); }
.resume .play { width: 48px; height: 48px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; }
.resume .play svg { width: 18px; height: 18px; margin-left: 3px; }

.pane { display: flex; flex-direction: column; gap: 14px; }
.pane-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 8px; }
.kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc-hi); } /* the darker gold: small text over the patches of light needs 4.5:1 */
.pane-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.arrange { min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; transition: transform .35s var(--spring); }
.arrange:active { transform: scale(.94); }
.arrange svg { width: 16px; height: 16px; }
.arrange.done { background: var(--ink); color: #fff; border-color: transparent; }
.hint { display: none; color: var(--acc); font-size: 14px; font-weight: 600; padding: 0 8px; margin: -4px 0 0; }
.editing .hint { display: block; }
/* the person picks 2-5 icons per row (html[data-cols]) or a list (html[data-layout]); wide screens fit as many as the width allows */
:root { --cols: 4; --ico: 60px; --nm: 12.5px; }
html[data-cols="2"] { --cols: 2; --ico: 76px; --nm: 15px; }
html[data-cols="3"] { --cols: 3; --ico: 70px; --nm: 14px; }
html[data-cols="5"] { --cols: 5; --ico: 52px; --nm: 11.5px; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 18px 6px; align-items: start; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--ico) * 1.25 + 40px), 1fr)); } }
.tile { position: relative; min-width: 0; display: flex; color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: opacity .3s, border-color .35s, box-shadow .35s; }
.tile:hover { color: var(--ink); }
.tile .ico { width: var(--ico); height: var(--ico); transition: transform .42s var(--spring), box-shadow .35s; }
.tile .ico img { -webkit-user-drag: none; }
.tile .tx { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.tile .name { font-weight: 600; overflow: hidden; }
.tile .desc { color: var(--mute); }
.tile .meta, .tile .end, .tile .desc { display: none; }
.tile:active .ico { transform: scale(.92); }
@media (hover: hover) { .tile:hover .ico { transform: translateY(-3px); } }
.tile { flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 2px; }
.tile .name { font-size: var(--nm); line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-cols="2"]:not([data-layout="list"]) .tile .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; margin-top: 3px; padding: 0 6px; }
html[data-layout="list"] .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px 12px; }
html[data-layout="list"] .tile { flex-direction: row; gap: 13px; padding: 10px 12px 10px 11px; border-radius: 22px; text-align: left; }
html[data-layout="list"] .tile .ico { width: 48px; height: 48px; }
html[data-layout="list"] .tile .name { font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; display: block; }
html[data-layout="list"] .tile .desc { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="list"] .tile .end { display: block; position: relative; width: 22px; height: 22px; flex: none; color: var(--faint); }
html[data-layout="list"] .tile:hover .ico { transform: none; }
.end svg { position: absolute; inset: 1px; transition: opacity .3s, transform .35s var(--spring); }
.end .grip { opacity: 0; transform: scale(.6); color: var(--acc); }
.tile.locked { opacity: .45; }
/* switches from /admin → Aplicații: maintenance = dimmed with an amber dot, hidden (admin only sees it) = dashed ring */
.tile.maint .ico img, .tile.hid .ico img { opacity: .5; filter: saturate(.4); }
.tflag { position: absolute; top: 9%; right: 9%; width: 22%; height: 22%; min-width: 10px; min-height: 10px; border-radius: 50%; background: #e0951f; box-shadow: 0 0 0 2px #fff; }
.tile.hid .tflag { background: transparent; border: 2px dashed var(--ink); box-shadow: none; }
.tile.maint.hid .tflag { background: #e0951f; }
.chip { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(28,28,30,.07); color: var(--ink); }
.chip b { font-weight: 800; }
.chip.gold { background: rgba(122,68,5,.12); color: var(--acc); }
.chip.warn { color: #9a5a00; }
/* arranging: calm, no wiggle. A soft ring says "you can move these"; the one you hold lifts. */
.editing .tile { cursor: grab; }
.editing .tile .ico { box-shadow: 0 0 0 2px rgba(122,68,5,.45), 0 8px 20px -10px rgba(40,30,60,.5); }
html[data-layout="list"] .editing .tile .ico { box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 20px -10px rgba(40,30,60,.5); }
html[data-layout="list"] .editing .tile { border-color: rgba(122,68,5,.35); }
.editing .end .chev { opacity: 0; transform: scale(.6); }
.editing .end .grip { opacity: 1; transform: none; }
.tile.sortable-ghost { opacity: .3; }
.tile.dragging .ico, .tile.sortable-fallback .ico { transform: scale(1.14); box-shadow: 0 0 0 2px var(--acc), 0 22px 36px -10px rgba(40,30,60,.55); }
.tile.sortable-fallback { opacity: 1 !important; cursor: grabbing; }
.tile.sortable-fallback .name { opacity: 0; }
html[data-layout="list"] .tile.dragging .ico, html[data-layout="list"] .tile.sortable-fallback .ico { transform: none; }
html[data-layout="list"] .tile.sortable-fallback { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), 0 26px 40px -14px rgba(40,30,60,.5); }
html[data-layout="list"] .tile.sortable-fallback .name { opacity: 1; }
.lab { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.lab h3 { margin: 0; padding: 0 8px; font-size: 13px; color: var(--mute); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- launch ---------- */
#launch { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  clip-path: inset(var(--t, 50%) var(--r, 50%) var(--b, 50%) var(--l, 50%) round var(--rad, 24px)); transition: clip-path .5s var(--ease); }
#launch.open { clip-path: inset(0 0 0 0 round 0); }
.launch-bg { position: absolute; inset: 0; background: var(--bg); }
.launch-body { position: relative; opacity: 0; transform: scale(.8); transition: opacity .3s .15s, transform .5s .1s var(--spring); }
#launch.open .launch-body { opacity: 1; transform: none; }
.launch-body .ico { width: 120px; height: 120px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 24px 60px -20px rgba(40,30,60,.5); }

/* ---------- sheets (account, install, move, info) ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(40,30,60,.28); opacity: 0; transition: opacity .4s; }
.scrim.on { opacity: 1; }
.sheet { position: fixed; z-index: 41; left: 50%; bottom: 0; width: min(100%, 520px); max-height: 92%; overflow-y: auto; border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px max(22px, env(safe-area-inset-left, 0px)) max(26px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 105%); transition: transform .6s var(--spring);
  display: flex; flex-direction: column; gap: 16px; background: rgba(250,248,244,.9); }
.sheet.on { transform: translate(-50%, 0); }
/* a sheet taller than the screen scrolls inside itself: its parts keep their height (a flex column would squash them,
   on a phone the Cont rows shrank to 2px and could not be tapped) and the page behind does not scroll along */
.sheet { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet > * { flex-shrink: 0; }
.grab { width: 44px; height: 5px; border-radius: 9px; background: rgba(28,28,30,.18); align-self: center; flex: none; }
.sheet h4 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; text-align: center; }
.sheet p { margin: 0; color: var(--mute); }
.me { display: flex; gap: 14px; align-items: center; }
.me .avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; background: var(--ink); }
.me b { font-size: 20px; display: block; }
.me small { color: var(--mute); overflow-wrap: anywhere; }
.rows { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 52px; text-align: left; width: 100%; border-top: 1px solid var(--line); color: var(--ink); }
.row:first-child { border-top: 0; }
.row svg { width: 20px; height: 20px; color: var(--acc); flex: none; }
.row .ico { width: 28px; height: 28px; border-radius: 8px; }
.row span { flex: 1; }
.row em { font-style: normal; color: var(--mute); font-size: 14px; }
button.row:hover { background: rgba(28,28,30,.04); }
.ins-icon { width: 72px; height: 72px; align-self: center; }
.ins-why, .ins-steps { margin: 0; padding-left: 22px; color: var(--mute); display: flex; flex-direction: column; gap: 6px; }
.ins-steps { color: var(--ink); }
.ins-ic { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins-done, .ins-old { font-size: 14px; }
.sheet .actions { display: flex; flex-direction: column; gap: 10px; }
.sheet .btn.plain { background: rgba(28,28,30,.07); color: var(--ink); }
.code { width: 100%; min-height: 96px; border-radius: var(--r-md); padding: 12px 14px; font: 13px/1.4 ui-monospace, Consolas, monospace; color: var(--ink); background: rgba(255,255,255,.75); border: 1px solid var(--line); resize: vertical; }
.note { border-radius: var(--r-md); padding: 12px 14px; background: rgba(122,68,5,.1); color: var(--acc) !important; font-weight: 600; font-size: 14px; }
.info-ico { width: 84px; height: 84px; align-self: center; margin-top: 4px; }
.sheet .info-desc { text-align: center; max-width: 34ch; align-self: center; }
.info-chips { display: flex; justify-content: center; gap: 6px; }

/* account sheet: how the game icons look, and the apps' theme */
.look { display: flex; flex-direction: column; gap: 10px; }
.look-h { margin: 2px 2px 0 !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc) !important; }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.picks.three { grid-template-columns: 1fr 1fr 1fr; }
.picks.four { grid-template-columns: repeat(4, 1fr); }
.picks.four .pick { padding: 8px 4px; }
.picks.five { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.picks.five .pick { padding: 10px 2px 8px; font-size: 12px; }
.pick .num { font-size: 20px; line-height: 1; }
.cols-row { display: flex; flex-direction: column; gap: 10px; }
html[data-layout="list"] .cols-row { display: none; }
.pick { border-radius: var(--r-md); padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; min-height: 44px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line); transition: box-shadow .3s, border-color .3s, transform .35s var(--spring); }
.pick:active { transform: scale(.96); }
.pick.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.mini { width: 66px; height: 42px; display: grid; gap: 4px; }
.mini i { display: block; border-radius: 4px; }
.mini.g { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12px; align-content: center; }
.mini.g i { background: var(--acc); opacity: .7; }
.mini.l { grid-template-rows: repeat(3, 1fr); }
.mini.l i { background: linear-gradient(90deg, var(--acc) 0 11px, rgba(28,28,30,.15) 11px); }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.sw[data-sw="aur"] { background: conic-gradient(from 200deg, #f2c45a, #ff9d5c, #f2c45a); }
.sw[data-sw="aurora"] { background: conic-gradient(from 200deg, #2ee6c9, #7c8cff, #2ee6c9); }
.sw[data-sw="ametist"] { background: conic-gradient(from 200deg, #c08bff, #ff7ac3, #c08bff); }
.sw[data-sw="jar"] { background: conic-gradient(from 200deg, #ff8a4c, #ffcc66, #ff8a4c); }
.sw[data-sw="safir"] { background: conic-gradient(from 200deg, #5cb6ff, #8f7bff, #5cb6ff); }
.shp { width: 30px; height: 30px; background: var(--sh-btn); }
.shp[data-shp="rot"] { border-radius: 22.5%; } .shp[data-shp="cerc"] { border-radius: 50%; } .shp[data-shp="patrat"] { border-radius: 12%; }
.look-note { margin: 0 2px !important; font-size: 13px; color: var(--mute); }

.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 40px); opacity: 0; visibility: hidden; border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 14px;
  max-width: calc(100% - 32px); text-align: center; background: rgba(255,255,255,.9); transition: transform .5s var(--spring), opacity .3s, visibility 0s .5s; }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .5s var(--spring), opacity .3s, visibility 0s; }

/* ---------- tablets: the phone layout, roomier ---------- */
@media (min-width: 600px) {
  .games3 { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .cards { grid-template-columns: 2fr 1fr 1fr; }
  .card.big { grid-column: auto; min-height: 150px; }
}
/* ---------- tablets across and computers: two columns, content centred (max 1100px); the bar stays a floating pill at the bottom, max 520px ---------- */
@media (min-width: 740px) {
  #vHome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 28px; align-items: start; }
  #vHome > * { grid-column: 1 / -1; order: 10; }
  #vHome > .hero { order: 1; } #vHome > .verse { order: 2; } #vHome > #listenSec { order: 3; } #vHome > #newSec { order: 4; } #vHome > #plSec { order: 5; }
  #vHome > .hero { grid-column: 1; align-self: center; padding: 56px 8px 24px; }
  #vHome > .verse { grid-column: 2; align-self: center; margin-top: 32px; }
  #vHome > #listenSec { grid-column: 1; }
  #vHome > #newSec { grid-column: 2; }
  .hero h1 { font-size: clamp(48px, 5vw, 64px); }
  .lead { font-size: 20px; }
  .verse blockquote { font-size: clamp(24px, 2.4vw, 30px); }
  .shelf { margin: 0; padding: 4px 2px 20px; scroll-padding: 0 2px; }
  .plcard { flex-basis: 250px; }
  #paneGames, #resume { max-width: 900px; width: 100%; margin: 0 auto; }
  .foot { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 24px; }
  .foot .langs { margin: 0 0 0 auto; }
}
@media (hover: hover) {
  .card:hover, .gcard:hover, .plcard:hover, .rowcard:hover, .clip .yt-link:hover { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 22px 50px rgba(40,30,60,.2); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .topbar, .tabbar > * { transition: none !important; } }

/* no visible scrollbars anywhere in SaferWord (home.js does the same in every app and game) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- Noapte: dark liquid glass (2026-10-28). /look.js sets data-sh-mode on <html> before the first paint
   (Zi / Noapte / Automat from Cont, Automat follows the phone), so a night visit never flashes white. ---------- */
html[data-sh-mode="noapte"] {
  color-scheme: dark;
  --bg: #0B0D1A; --ink: #F2F0EA; --mute: #B4B2C2; --faint: #9C9AAE; --acc: #E8B864; --acc-hi: #F4CF8A;
  --line: rgba(255,255,255,.12);
  --glass-bg: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
  --glass-edge: 1px solid rgba(255,255,255,.13);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(255,255,255,.04), 0 22px 50px rgba(0,0,0,.5);
  --chip-bg: rgba(255,255,255,.09); --chip-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  --on-acc: #1C1406;
}
/* the same patches of light, deeper and softer: amber, indigo, rose, lilac */
html[data-sh-mode="noapte"] #sky i, html[data-sh-mode="noapte"] .blobs i { opacity: .42; }
html[data-sh-mode="noapte"] #sky .b1, html[data-sh-mode="noapte"] .blobs i:nth-child(1), html[data-sh-mode="noapte"] .blobs i:nth-child(4) { background: radial-gradient(circle, rgba(214,128,40,.8), rgba(214,128,40,0) 70%); }
html[data-sh-mode="noapte"] #sky .b2, html[data-sh-mode="noapte"] .blobs i:nth-child(2), html[data-sh-mode="noapte"] .blobs i:nth-child(8) { background: radial-gradient(circle, rgba(76,72,220,.85), rgba(76,72,220,0) 70%); }
html[data-sh-mode="noapte"] .blobs i:nth-child(3), html[data-sh-mode="noapte"] .blobs i:nth-child(6) { background: radial-gradient(circle, rgba(200,70,130,.7), rgba(200,70,130,0) 70%); }
html[data-sh-mode="noapte"] #sky .b3, html[data-sh-mode="noapte"] .blobs i:nth-child(5), html[data-sh-mode="noapte"] .blobs i:nth-child(7) { background: radial-gradient(circle, rgba(140,96,230,.75), rgba(140,96,230,0) 70%); }
/* under the clock: a shade, not a dusk, on the dark sky */
html[data-sh-mode="noapte"] body::before { background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.1)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-sh-mode="noapte"] .glass { background: rgba(26,28,46,.94); } }
@media (prefers-reduced-transparency: reduce) { html[data-sh-mode="noapte"] .glass { background: rgba(26,28,46,.94); } }

/* text that was a fixed dark grey */
html[data-sh-mode="noapte"] .lead, html[data-sh-mode="noapte"] .foot > span { color: #C9C7D4; }
html[data-sh-mode="noapte"] .verse-ref, html[data-sh-mode="noapte"] .saved figcaption { color: #E2E0EA; }
html[data-sh-mode="noapte"] .err { color: #FF9C92; }
html[data-sh-mode="noapte"] .chip.warn { color: #F2B866; }

/* the black buttons turn gold with dark text */
html[data-sh-mode="noapte"] .btn.dark, html[data-sh-mode="noapte"] .play-btn, html[data-sh-mode="noapte"] .resume .play, html[data-sh-mode="noapte"] .arrange.done,
html[data-sh-mode="noapte"] .me .avatar, html[data-sh-mode="noapte"] .pill-badge.new {
  background: linear-gradient(180deg, #F2CB7E, #E8B864 55%, #D49E45); color: var(--on-acc); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px rgba(232,184,100,.22); }
html[data-sh-mode="noapte"] .btn.dark:hover { color: var(--on-acc); }
html[data-sh-mode="noapte"] .dot.on { background: var(--acc); }
html[data-sh-mode="noapte"] .btn.white { background: rgba(255,255,255,.92); color: #1C1C1E; }
html[data-sh-mode="noapte"] .btn.glass { background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.18); }
html[data-sh-mode="noapte"] .iconbtn { border-color: rgba(255,255,255,.16); }
html[data-sh-mode="noapte"] .iconbtn[aria-expanded="true"] { background: rgba(255,255,255,.2); }

/* light fills on the glass become smoked glass */
html[data-sh-mode="noapte"] .field, html[data-sh-mode="noapte"] .find-in, html[data-sh-mode="noapte"] .rows, html[data-sh-mode="noapte"] .saved figure,
html[data-sh-mode="noapte"] .code, html[data-sh-mode="noapte"] .pick { background: rgba(255,255,255,.07); }
html[data-sh-mode="noapte"] .pill-badge:not(.new), html[data-sh-mode="noapte"] .plcard .n { background: rgba(14,16,32,.74); border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
html[data-sh-mode="noapte"] .yt-link { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
html[data-sh-mode="noapte"] .cover, html[data-sh-mode="noapte"] .plcard .pic { background: #241E33; }
html[data-sh-mode="noapte"] .sq { color: #1C1C1E; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); filter: brightness(.92); }
html[data-sh-mode="noapte"] .langs button[aria-pressed="true"], html[data-sh-mode="noapte"] .tabbar [aria-current="page"] { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.3); }
html[data-sh-mode="noapte"] .chip, html[data-sh-mode="noapte"] .sheet .btn.plain { background: rgba(255,255,255,.1); }
html[data-sh-mode="noapte"] .chip.gold, html[data-sh-mode="noapte"] .note { background: rgba(232,184,100,.14); }
html[data-sh-mode="noapte"] .grab, html[data-sh-mode="noapte"] .dot, html[data-sh-mode="noapte"] .bar { background: rgba(255,255,255,.2); }
html[data-sh-mode="noapte"] button.row:hover { background: rgba(255,255,255,.06); }
html[data-sh-mode="noapte"] .mini.l i { background: linear-gradient(90deg, var(--acc) 0 11px, rgba(255,255,255,.2) 11px); }
html[data-sh-mode="noapte"] .scrim { background: rgba(0,0,0,.5); }
html[data-sh-mode="noapte"] .sheet { background: rgba(22,24,42,.94); }
html[data-sh-mode="noapte"] .toast { background: rgba(30,32,52,.94); }
html[data-sh-mode="noapte"] #avatarBtn .sync { border-color: var(--bg); }

/* "În curând": darker glass with a gold edge */
html[data-sh-mode="noapte"] .soon-card { background: linear-gradient(145deg, rgba(8,9,20,.72), rgba(8,9,20,.5)); border-color: rgba(232,184,100,.5);
  box-shadow: inset 0 1px 0 rgba(232,184,100,.3), 0 22px 50px rgba(0,0,0,.5); }

/* the bottom bar and the circle with the cross; gold icons glow a little */
html[data-sh-mode="noapte"] .tabbar > .tb-bg { background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(255,255,255,.04), 0 20px 46px rgba(0,0,0,.55); }
html[data-sh-mode="noapte"] .tabbar > .tb-orb { background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 34px rgba(0,0,0,.55), 0 0 22px rgba(232,184,100,.16); }
html[data-sh-mode="noapte"] .tb-orb svg, html[data-sh-mode="noapte"] .brand svg, html[data-sh-mode="noapte"] .card > svg { filter: drop-shadow(0 0 6px rgba(232,184,100,.45)); }
@media (hover: hover) {
  html[data-sh-mode="noapte"] .card:hover, html[data-sh-mode="noapte"] .gcard:hover, html[data-sh-mode="noapte"] .plcard:hover, html[data-sh-mode="noapte"] .rowcard:hover, html[data-sh-mode="noapte"] .clip .yt-link:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 26px 56px rgba(0,0,0,.6); }
}
html[data-sh-mode="noapte"] .pick.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }