/* 4Muses Jar: a full-screen jar with floating controls. */
:root {
  --ink: #221a36; --muted: #625a77; --panel: rgba(255, 255, 255, .9); --line: rgba(34, 26, 54, .12);
  --glow: #ff6a45; --on-glow: #fff; --soft: rgba(34, 26, 54, .06);
  --claude: #0d7a6c; --chatgpt: #6a47cc; --gemini: #1b68b5;
  --f-display: "Syne", "Avenir Next", system-ui, sans-serif; --f-body: "Nunito Sans", system-ui, sans-serif;
  color-scheme: light;
}
body.night { --ink: #efeaf9; --muted: #b3abc9; --panel: rgba(31, 26, 46, .88); --line: rgba(239, 234, 249, .16); --soft: rgba(239, 234, 249, .08); --claude: #3cc6b1; --chatgpt: #a88cf3; --gemini: #62a9ee; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: #ebe6f4; color: var(--ink); font: 15px/1.45 var(--f-body); overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
body.night { background: #1c1830; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
button, input { font: inherit; color: inherit; }
.btn { background: var(--glow); color: var(--on-glow); border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
.round { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--panel); font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(8px); }
.muted { color: var(--muted); } .small { font-size: .82rem; }

header.top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; pointer-events: none; }
header.top > * { pointer-events: auto; }
.logo img { width: 30px; height: 30px; display: block; }
.who { display: flex; flex-direction: column; line-height: 1.15; background: var(--panel); padding: 6px 12px; border-radius: 12px; backdrop-filter: blur(8px); }
.who b { font: 800 1.05rem var(--f-display); }
.who span { font-size: .78rem; color: var(--muted); text-transform: capitalize; }
.bond { margin-left: auto; color: var(--glow); letter-spacing: 2px; background: var(--panel); padding: 6px 10px; border-radius: 12px; backdrop-filter: blur(8px); }
.menu { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 50px); right: 14px; display: flex; flex-direction: column; background: var(--panel); border-radius: 14px; padding: 6px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.15); z-index: 3; }
.menu button { border: 0; background: none; text-align: left; padding: 10px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.menu button:hover { background: var(--soft); }

.tag { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 56px); left: 50%; transform: translateX(-50%); margin: 0; background: var(--panel); padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; backdrop-filter: blur(8px); pointer-events: none; }
.dormant { position: fixed; top: 40%; left: 50%; transform: translateX(-50%); margin: 0; background: var(--panel); padding: 8px 14px; border-radius: 12px; font-size: .9rem; pointer-events: none; }
.bubble { position: fixed; left: 0; top: 0; background: #fff; color: #221a36; padding: 6px 12px; border-radius: 16px; font-size: 1.2rem; font-weight: 700; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.15); white-space: nowrap; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; transform: translateX(-50%); }

.care { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; justify-content: safe center; padding: 10px 10px max(12px, env(safe-area-inset-bottom)); overflow-x: auto; }
.care-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 50px; padding: 8px 4px; border: 0; border-radius: 14px; background: var(--panel); cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.care-btn .ico { font-size: 1.35rem; line-height: 1; }
.care-btn .lbl { font-size: .68rem; font-weight: 700; color: var(--muted); }
.slider { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 84px); background: var(--panel); padding: 10px 16px; border-radius: 14px; display: flex; gap: 10px; align-items: center; backdrop-filter: blur(8px); }
.slider input { width: min(260px, 60vw); }

.panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 72vh; background: var(--panel); border-radius: 20px 20px 0 0; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(12px); box-shadow: 0 -10px 40px rgba(0,0,0,.18); z-index: 4; max-width: 640px; margin: 0 auto; -webkit-user-select: text; user-select: text; }
.panel header { display: flex; justify-content: space-between; align-items: center; }
.panel h2 { margin: 0; font: 800 1.25rem var(--f-display); }
.panel-body { overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.entry { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; }
.entry.by-claude { border-color: var(--claude); } .entry.by-chatgpt { border-color: var(--chatgpt); } .entry.by-gemini { border-color: var(--gemini); }
.entry p { margin: 2px 0; }
.eyebrow { font: 700 .72rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.word { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); background: var(--soft); border-radius: 12px; padding: 10px 12px; text-align: left; cursor: pointer; }
.word b { font-size: 1.4rem; min-width: 2ch; text-align: center; }
.moods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mood { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 1px solid var(--line); background: var(--soft); border-radius: 12px; cursor: pointer; font-size: .8rem; font-weight: 700; text-transform: capitalize; }
.mood .ico { font-size: 1.6rem; }
.panel input:not([type=checkbox]) { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: transparent; width: 100%; }
.set { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; }
.set input:not([type=checkbox]) { max-width: 60%; }

.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(20, 16, 34, .35); z-index: 5; padding: 16px; }
.card { background: #fff; color: #221a36; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; width: min(380px, 100%); }
.card h2 { margin: 0; font: 800 1.35rem var(--f-display); }
.card p { margin: 0; }
.card input { border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; font-size: 1rem; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 90px); background: #221a36; color: #fff; padding: 9px 14px; border-radius: 12px; font-size: .9rem; z-index: 6; max-width: calc(100vw - 32px); }