/* Styles for the "life" pages: trophies, sticker wall, morning, wake-up, calendar, friends, story room. */
.lf-level { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lf-level .num { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #2a1a00; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcb3d 55%, #d48a00); box-shadow: 0 5px 0 #a86a00, 0 0 22px rgba(255,203,61,.5); flex: none; }
.lf-wall { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--kr); overflow: hidden; border: 3px solid var(--line2); touch-action: none; user-select: none; -webkit-user-select: none; }
.lf-st { position: absolute; transform-origin: 50% 50%; cursor: grab; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); background: none; border: 0; padding: 0; }
.lf-st img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; } .lf-st.sel { outline: 3px dashed var(--gold); outline-offset: 4px; border-radius: 10px; }
.lf-tray { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; }
.lf-tray button { width: 52px; height: 52px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); font-size: 28px; cursor: pointer; padding: 3px; } .lf-tray button img { width: 100%; height: 100%; object-fit: contain; }
.lf-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lf-cal .dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.lf-cal .day { min-height: calc(64px * var(--k)); border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); color: var(--text); padding: 4px; text-align: left; cursor: pointer; font-size: 12px; overflow: hidden; }
.lf-cal .day.other { opacity: .4; } .lf-cal .day.today { border-color: var(--gold); } .lf-cal .day.sel { background: color-mix(in srgb, var(--blue) 30%, var(--panel)); }
.lf-cal .day b { display: block; font-size: 14px; } .lf-cal .day .dot { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-code { font-size: clamp(28px, calc(7 * var(--vw)), 46px); font-weight: 800; letter-spacing: .12em; color: var(--gold); text-align: center; }
.lf-chat { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; padding: 6px; }
.lf-msg { max-width: 80%; padding: 8px 14px; border-radius: 18px; background: var(--panel2); border: 2px solid var(--line); align-self: flex-start; } .lf-msg.mine { align-self: flex-end; background: var(--me); color: #fff; border-color: transparent; } .lf-msg.big { font-size: 40px; background: none; border: 0; padding: 0; }
.lf-turn { padding: 10px 14px; border-radius: 16px; background: var(--panel2); border-left: 6px solid var(--c-stories); } .lf-turn.mine { border-left-color: var(--gold); } .lf-turn small { color: var(--muted); display: block; }
.lf-wake { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; text-align: center; padding: 20px; background: radial-gradient(900px 600px at 50% 110%, #ffb347, transparent 60%), linear-gradient(180deg, #19357a, #ff9a5a); color: #fff; }
.lf-wake h1 { font-size: clamp(34px, calc(8 * var(--vw)), 72px); margin: 0; text-shadow: 0 4px 0 rgba(0,0,0,.25); } .lf-wake .time { font-size: clamp(22px, calc(5 * var(--vw)), 40px); font-weight: 700; }
@media (max-width: 699px) { .lf-cal .day { min-height: 46px; } .lf-cal .day .dot { display: none; } .lf-cal .day.has::after { content: "•"; color: var(--gold); font-size: 20px; line-height: .5; } }
.lf-build { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 8px 0; } .lf-build label { display: grid; gap: 2px; font-size: 13px; font-weight: 600; } .lf-build select { width: 100%; }
.lf-preview { margin: 6px 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--panel2); font-size: calc(17px * var(--k)); line-height: 1.5; }

/* Keep even shrunken wall stickers reachable by touch and keyboard. */
.lf-wall .lf-st{min-width:44px;min-height:44px;display:grid;place-items:center}
.lf-wall .lf-st:focus-visible{outline:3px solid #ffe19a;outline-offset:2px;border-radius:8px}