/*
 * The egg (approved mockup, 2026-10-09): one shell, the LCD window cut into it, the eight actions printed on the
 * plastic around the window, three round buttons below. The window IS the screen: the room fills it edge to edge.
 * Only the app's own language: --shell / --bg / --lcd follow the room (set by app.js), ink #160B33,
 * lavender #C7B4FF, red #FF3A2E, pink #FF7EC4, Heebo + VT323. No new colours.
 */
body.tama{overflow-x:hidden}
.tama #app{max-width:none;padding:calc(env(safe-area-inset-top) + 26px) 0 calc(env(safe-area-inset-bottom) + 14px);display:flex;justify-content:center;align-items:flex-start;min-height:100dvh}

/* the shell */
.tama .egg{position:relative;flex:none;width:380px;height:530px;border-radius:50% 50% 50% 50% / 56% 56% 44% 44%;
  background:radial-gradient(110% 60% at 30% 12%,rgba(255,255,255,.17),transparent 45%),var(--shell);
  box-shadow:inset 0 5px 0 rgba(255,255,255,.13),inset 0 -12px 0 rgba(0,0,0,.33),inset 0 0 0 3px rgba(10,5,24,.35),0 26px 40px -18px rgba(22,11,51,.8);
  display:flex;flex-direction:column;align-items:center;padding-top:46px;transform-origin:50% 0}
.tama .egg::before{content:"";position:absolute;top:-16px;left:50%;width:30px;height:30px;transform:translateX(-50%);border:6px solid #C7B4FF;border-radius:50%;box-shadow:0 3px 0 rgba(10,5,24,.4)}

/* the eight actions, printed on the plastic: icons only, the active one gets a small red triangle toward the screen */
.tama .prints{display:grid;grid-template-columns:repeat(4,54px);gap:4px;justify-content:center}
.tama .prints button{position:relative;height:36px;display:flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .15s;touch-action:manipulation}
.tama .prints button:active{opacity:1}
.tama .prints canvas{width:20px;height:20px;image-rendering:pixelated;display:block}
.tama .prints span{display:none}
.tama .prints button.on{opacity:1}
.tama .prints button.off{opacity:.18;pointer-events:none}
.tama .prints button.on::after{content:"";position:absolute;left:50%;bottom:1px;transform:translateX(-50%);width:0;height:0;border:4px solid transparent;border-top:5px solid #FF3A2E;border-bottom:0}
.tama .prints.bottom button.on::after{bottom:auto;top:1px;border-top:0;border-bottom:5px solid #FF3A2E}

/* the window: a recessed ring and one rounded LCD, no inner frame */
.tama .bezel{margin:4px 0;padding:7px;border-radius:30px;background:#140C2C;box-shadow:inset 0 3px 0 rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.1)}
.tama .lcd{position:relative;width:264px;height:252px;padding:0;border-radius:24px;overflow:hidden;background:var(--lcd);
  box-shadow:inset 0 0 0 2px rgba(22,11,51,.55),inset 0 8px 16px rgba(0,0,0,.22)}
.tama .lcd::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(22,11,51,.55),inset 0 8px 16px rgba(0,0,0,.22)}
.tama #scene{width:264px;height:252px;aspect-ratio:auto;image-rendering:pixelated;display:block}
.tama .glare{background:linear-gradient(125deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 30%,transparent 31%)}

/* the toy's digits in the window corners */
.tama .pill{position:absolute;color:#160B33;line-height:1;background:var(--lcd);pointer-events:none;transition:background 1.2s}
.tama .pill.day{top:10px;right:14px;display:flex;direction:rtl;align-items:baseline;gap:4px;padding:3px 8px 1px;border-radius:9px}
.tama .pill.day b{font:900 11px Heebo,sans-serif}
.tama .pill.day .n{font-size:30px;line-height:.9}
.tama .pill.day small{font-size:16px;opacity:.45}
.tama .pill.clock{top:12px;left:16px;font-size:20px;direction:ltr;padding:2px 7px 0;border-radius:8px;opacity:.9}

/* the name of an action, flashed for a moment when it is tapped */
.tama .tag{position:absolute;top:13px;left:50%;transform:translateX(-50%);background:#160B33;color:#C7B4FF;font:900 12px Heebo,sans-serif;padding:2px 9px 3px;border-radius:7px;pointer-events:none;white-space:nowrap}

/* what she says */
.tama .bubble{top:60px;left:12px;max-width:150px;padding:4px 8px;font:900 13px/1.25 Heebo,sans-serif;border-width:3px}
.tama .bubble::after{bottom:-9px;left:24px;width:10px;height:10px}

/* alert and skull: small ink icons in the bottom corners */
.tama #icSkull,.tama #icAlert{position:absolute;bottom:12px;width:18px;height:18px;opacity:.28;pointer-events:none}
.tama #icSkull{right:18px}.tama #icAlert{left:18px}
.tama #icSkull canvas,.tama #icAlert canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.tama #icSkull.on,.tama #icAlert.blink{opacity:1}
.tama #icAlert.blink{animation:blink .8s steps(1) infinite}

/* craving fight: an ink band on top with the timer and the hits, breathing at the bottom */
.tama .fight{position:absolute;top:0;left:0;right:0;background:#160B33;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 22px 6px;pointer-events:none}
.tama .fight b{font:900 12px Heebo,sans-serif}
.tama .fight .t{font-size:34px;line-height:.9;color:#FF7EC4;direction:ltr}
.tama .fight .hits{font:900 12px Heebo,sans-serif;display:flex;align-items:baseline;gap:4px}
.tama .fight .hits .num{font-size:22px;color:#fff}
.tama .breathband{position:absolute;bottom:0;left:0;right:0;background:#160B33;color:var(--lcd);display:flex;align-items:center;gap:8px;padding:6px 22px 12px;font:900 12px Heebo,sans-serif;pointer-events:none}
.tama .breathband .track{flex:1;height:8px;border:2px solid var(--lcd);direction:ltr}
.tama .breathband .track i{display:block;height:100%;width:0;background:var(--lcd)}
.tama .breathband .num{font-size:20px;line-height:.8;min-width:10px;text-align:center}
.tama.craving .pill,.tama.craving #icSkull,.tama.craving #icAlert,.tama.craving .tag{display:none}
.tama.craving .bubble{top:58px}
.tama.breathing .bubble{display:none}

/* status pages: the whole LCD becomes the toy's info screen, one big number each */
.tama .page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:0 0 12px;cursor:pointer;
  background-color:var(--lcd);background-image:linear-gradient(rgba(22,11,51,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(22,11,51,.06) 1px,transparent 1px);background-size:3px 3px}
.tama .page .bar-top{width:100%;background:#160B33;color:var(--lcd);font:900 13px Heebo,sans-serif;text-align:center;padding:12px 0 6px;letter-spacing:.02em}
.tama .page .lbl{margin-top:16px;font:900 12px Heebo,sans-serif;color:#B0243A}
.tama .page .big{font-family:VT323,monospace;font-size:64px;line-height:.9;margin-top:6px;direction:ltr;white-space:nowrap}
.tama .page .big.l9{font-size:52px}.tama .page .big.l10{font-size:44px}
.tama .page .big.words{direction:rtl;display:flex;align-items:baseline;gap:4px}
.tama .page .big.words small{font:900 13px Heebo,sans-serif;margin-left:6px}
.tama .page .blocks{display:flex;gap:3px;margin-top:8px;direction:ltr}
.tama .page .blocks i{width:14px;height:10px;border:2px solid #160B33}
.tama .page .blocks i.f{background:#160B33}
.tama .page .hearts{display:flex;gap:4px;direction:ltr;margin-top:8px}
.tama .page .hearts canvas{width:21px;height:18px;image-rendering:pixelated}
.tama .page .what{margin-top:12px;font:800 15px/1.3 Heebo,sans-serif;text-align:center;padding:0 22px}
.tama .page .now{margin-top:auto;font:500 11px/1.3 Heebo,sans-serif;text-align:center;padding:0 26px;opacity:.75}
.tama .page .dots{display:flex;gap:6px;margin-top:8px;justify-content:center}
.tama .page .dots i{width:7px;height:7px;background:rgba(22,11,51,.22)}
.tama .page .dots i.on{background:#160B33}

/* the three round buttons; in a craving they change role and their labels turn pink */
.tama .btns{margin-top:10px;display:flex;align-items:flex-start;gap:30px}
.tama .btns > div{display:flex;flex-direction:column;align-items:center;gap:6px}
.tama .btns .round{border-radius:50%;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.35),0 4px 0 rgba(10,5,24,.5);touch-action:manipulation}
.tama .btns .round:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.tama .btns .round.small{width:34px;height:34px;background:#C7B4FF;margin-top:10px}
.tama .btns .round.big{width:64px;height:64px;background:#FF3A2E}
.tama .btns span{font:900 11px Heebo,sans-serif;color:#C7B4FF;white-space:nowrap}
.tama .btns .m span{color:#fff;font-size:12px}
.tama.craving .btns span{color:#FF7EC4}

/* the quit-time button stays reachable: small lavender text on the shell */
.tama .setbtn{margin-top:10px;font:800 11px Heebo,sans-serif;color:#C7B4FF;opacity:.6;padding:4px 10px}
/* a page with long body text: a smaller number so the sentence still fits the window */
.tama .page.long .lbl{margin-top:9px}
.tama .page.long .big{font-size:48px}
.tama .page.long .big.l9{font-size:42px}.tama .page.long .big.l10{font-size:38px}
.tama .page.long .what{margin-top:7px;font-size:13px;line-height:1.25;padding:0 16px}
.tama .page.long .now{padding:0 18px;line-height:1.25}

/* 11.10: the daily update icon, the tappable pills, the rubber keys */
.tama #icNews{position:absolute;bottom:12px;left:50%;width:27px;height:21px;margin-left:-13px;z-index:4;cursor:pointer;
  background:var(--lcd);border-radius:6px;padding:3px;animation:blink .8s steps(1) infinite}
.tama #icNews canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.tama .pill{cursor:pointer;z-index:3;pointer-events:auto}
.tama .round,.tama .prints button{transition:transform .06s}
.tama .round.down{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 1px 0 rgba(10,5,24,.5)}
.tama .prints button.down{transform:translateY(2px)}
.tama .page .src{font-size:10px;opacity:.7}
.tama.paging .pill,.tama.paging #icSkull,.tama.paging #icAlert{display:none}