@font-face { font-family: Gaegu; src: url(fonts/Gaegu-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Gaegu; src: url(fonts/Gaegu-Bold.ttf); font-weight: 700; font-display: swap; }

:root {
  --ink: #3b332f; --cream: #f7eddb; --paper: #f3ead8; --sheet: #f2e8d6; --accent: #cc6645; --honey: #d69e66;
  --sage: #5c8c61;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 20px/1.45 Gaegu, "Comic Sans MS", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }

/* ---------- app shell ---------- */
.app { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.stage { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; }
#dog { position: absolute; cursor: pointer; }
#snowfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }   /* crayon flakes, in front of the pup */
#fx { position: absolute; inset: 0; pointer-events: none; }
.tapfx { position: absolute; width: 64px; translate: -50% -50%; animation: fx 1.3s ease-out forwards; }
@keyframes fx { 0% { transform: scale(.3); opacity: 0; } 20% { transform: scale(1.05); opacity: 1; } 100% { transform: translateY(-70px) scale(1); opacity: 0; } }

.hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center;
       padding: max(28px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); }
.hud > * { pointer-events: auto; }
.lettering { color: var(--cream); text-shadow: 0 1px 3px rgba(0,0,0,.28); }
.lettering.small { font-size: 15px; font-weight: 700; letter-spacing: .5px; }

.hud-top { position: absolute; top: max(80px, calc(env(safe-area-inset-top) + 56px)); left: 16px; right: 16px;
           display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.records-entry { position: relative; width: 112px; height: 104px; text-align: left; touch-action: none; cursor: grab;
                  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.records-entry img { -webkit-user-drag: none; pointer-events: none; }
.records-entry { z-index: 4; }            /* stays grabbable wherever it is dropped (above the clock, tags, pup) */
.records-entry.dragging { cursor: grabbing; z-index: 6; }
.records-entry.dragging .sleeve { rotate: -9deg; }
.records-entry .sleeve { position: absolute; left: 0; top: 0; width: 64px; height: 64px; z-index: 2; rotate: -4deg;
                          box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius: 3px; overflow: hidden; }
.records-entry .sleeve img { width: 100%; height: 100%; object-fit: cover; }
.records-entry .disc { position: absolute; left: 24px; top: 2px; width: 62px; height: 62px; border-radius: 50%;
  background: center/42% no-repeat; background-color: #1c1a19;
  box-shadow: inset 0 0 0 9px #1c1a19, inset 0 0 0 10px #333, 0 2px 5px rgba(0,0,0,.3);
  transition: left .45s cubic-bezier(.3,1.4,.5,1); }
.records-entry .disc.spin { left: 40px; animation: spin 6s linear infinite; }
.records-entry .disc img { position: absolute; inset: 29%; width: 42%; height: 42%; border-radius: 50%; object-fit: cover; }
.records-entry .small { position: absolute; left: 4px; top: 72px; }
@keyframes spin { to { rotate: 360deg; } }

.jar { position: relative; width: 78px; height: 120px; }
.jar-glass { position: absolute; left: 0; top: 0; width: 78px; height: 96px; }
.jar-pile { position: absolute; left: 0; top: 0; width: 78px; height: 96px;
            clip-path: inset(36% 8% 4% 8% round 18px); }
.jar-pile img { position: absolute; width: 31px; translate: -50% -50%; rotate: var(--r); }
.jar .small { position: absolute; left: 0; right: 0; top: 98px; text-align: center; white-space: nowrap; }

.clock { margin-top: 10px; text-align: center; user-select: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.digits { font-size: clamp(76px, 22vw, 108px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
          display: flex; align-items: baseline; justify-content: center; }
.mm { font: inherit; color: inherit; text-shadow: inherit; border-radius: 12px; padding: 0 4px;
      background-image: linear-gradient(currentColor, currentColor); background-size: 0 3px; background-position: 50% 92%;
      background-repeat: no-repeat; transition: background-size .2s; }
.mm:hover, .mm:focus-visible { background-size: 70% 3px; outline: none; }
.focusing .mm { pointer-events: none; }
.mm-input { font: inherit; color: var(--ink); width: 1.6em; text-align: center; border: 0; border-radius: 12px; padding: 0 4px;
            background: #faf0dcf0; box-shadow: 0 2px 8px rgba(0,0,0,.18); outline: 3px solid var(--honey); }
.presets { display: flex; gap: 8px; order: 3; margin-top: 6px; }   /* below the status: clears the records + jar corners on phones */
.preset { position: relative; width: 62px; padding: 6px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 1px;
          background: url(ui/paper_1.webp) center/100% 100%; color: var(--ink); font-size: 26px; font-weight: 700; line-height: 1;
          transition: transform .12s, translate .12s; }
.preset:nth-child(odd) { rotate: -2deg; } .preset:nth-child(even) { rotate: 2deg; background-image: url(ui/paper_4.webp); }
.preset small { display: flex; align-items: center; gap: 2px; font-size: 15px; opacity: .7; }
.preset small img { width: 15px; }
.preset:hover { translate: 0 -2px; }
.preset:active { transform: scale(.94); }
.preset.on { position: relative; }
.preset.on::before { content: ""; position: absolute; left: 50%; top: -9px; width: 40px; height: 16px; translate: -50% 0; rotate: -5deg;
                     background: url(ui/tape_honey.webp) center/100% 100%; }
.preset.custom { width: 70px; background-image: url(ui/paper_3.webp); rotate: -1deg; }
.preset.custom:not(.set) span { font-size: 21px; padding-top: 4px; }
.preset.custom small { white-space: nowrap; }
.editing .preset.custom { translate: 0 -3px; }
.editing .preset.custom::before { content: ""; position: absolute; left: 50%; top: -9px; width: 40px; height: 16px; translate: -50% 0;
                                   rotate: -5deg; background: url(ui/tape_honey.webp) center/100% 100%; }
.focusing .presets { visibility: hidden; }
@media (max-width: 560px) { .presets { margin-top: 42px; gap: 6px; } .preset { width: 54px; } .preset.custom { width: 62px; } }   /* narrow: drop below the jar's count */
.status { font-size: 22px; }

.hud-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tags { display: flex; align-items: flex-end; gap: 8px; }
.tag { width: 92px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
       background: url(ui/paper_2.webp) center/100% 100%; font-weight: 700; font-size: 18px; rotate: -3deg;
       transition: transform .12s; }
.tag.paper3 { background-image: url(ui/paper_3.webp); rotate: 2deg; }
.tag img { width: 46px; height: 40px; object-fit: cover; border-radius: 3px; }
.tag.paper3 img { object-fit: contain; }
.bigtag { width: 100px; height: 114px; background: url(ui/paper_start.webp) center/100% 100%; font-size: 36px; font-weight: 700;
          rotate: 3deg; position: relative; transition: transform .12s; }
.bigtag::before { content: ""; position: absolute; left: 50%; top: -10px; width: 58px; height: 24px; translate: -50% 0; rotate: -6deg;
                  background: url(ui/tape_orange.webp) center/100% 100%; }
.tag:active, .bigtag:active, .chip:active, .rec:active { transform: scale(.94); }
.focusing .tag { display: none; }
.today { font-size: 20px; }
/* profile tag: a scrap of paper taped to the wall, top right */
.corner { position: absolute; z-index: 5; top: max(20px, env(safe-area-inset-top)); right: max(22px, env(safe-area-inset-right));
          display: flex; align-items: center; gap: 14px; }
.profile { position: relative;
           display: flex; align-items: center; gap: 9px; max-width: min(300px, 70vw); padding: 9px 14px 8px 9px;
           background: #f7d6c2 url(ui/paper_1.webp) center/100% 100%; background-blend-mode: multiply;
           border: 2px solid rgba(59, 51, 47, .8); border-radius: 12px 9px 13px 8px;   /* a hand-cut sticker */
           color: var(--ink); rotate: 1.5deg;
           filter: drop-shadow(0 3px 5px rgba(60, 40, 20, .3)); transition: translate .15s, rotate .15s; }
.profile::after { content: ""; position: absolute; inset: 4px; border: 2px dashed rgba(214, 158, 102, .9);
                  border-radius: 8px 6px 9px 5px; pointer-events: none; }          /* stitched edge */
.profile .paw { position: absolute; right: -12px; bottom: -14px; width: 30px; rotate: 18deg; pointer-events: none; }
.profile::before { content: ""; position: absolute; left: 50%; top: -10px; width: 62px; height: 22px; translate: -50% 0; rotate: -5deg;
                   background: url(ui/tape_sage.webp) center/100% 100%; }
.profile:hover { translate: 0 -2px; rotate: -.5deg; }
.profile .avatar { flex: none; width: 38px; height: 38px; z-index: 1; border-radius: 50%; display: grid; place-items: center;
                   background: url(ui/paper_start.webp) center/180% 180%; border: 2.5px solid var(--ink);
                   font-size: 22px; font-weight: 700; line-height: 1; color: var(--ink); rotate: -4deg; }
.profile .avatar.photo { overflow: hidden; background: #fffaf0; }
.profile .avatar.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile .who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.05; }
.profile .hello { font-size: 13px; opacity: .6; letter-spacing: .4px; }
.profile .email { font-size: 17px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile .narrow { display: none; }
.profile .tick { flex: none; font-size: 18px; font-weight: 700; color: #5d8c60; }
@media (max-width: 899px) {                 /* narrow: a compact tag (avatar + "Sign in", or avatar + tick), jar beside it */
  .corner { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); gap: 10px; }
  .profile { padding: 7px 10px 6px 7px; gap: 7px; }
  .profile .hello { display: none; }
  .profile .avatar { width: 32px; height: 32px; font-size: 19px; }
  .profile .email { font-size: 15px; max-width: 110px; }
  .profile .wide { display: none; }
  .profile .narrow { display: inline; }
  .signed-in .profile .who { display: none; }
  .profile .paw { width: 24px; right: -9px; bottom: -11px; }
  .has-corner .clock { margin-top: 84px; }
  .has-corner .hud-top { top: max(12px, env(safe-area-inset-top)); }   /* records up in the top row, beside the tag */
}
.profile .avatar.google { background: #fffaf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.2 0 24 0 14.6 0 6.6 5.4 2.7 13.3l7.9 6.1C12.5 13.6 17.8 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.2 5.3-4.6 6.9l7.4 5.7c4.3-4 6.9-9.9 6.9-17.1z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.6c-.5-1.4-.8-3-.8-4.6s.3-3.2.8-4.6l-7.9-6.1C1 16.6 0 20.2 0 24s1 7.4 2.7 10.7l7.8-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.4-5.7c-2.1 1.4-4.8 2.3-8.5 2.3-6.2 0-11.5-4.2-13.4-9.9l-7.9 6.1C6.6 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center/58% no-repeat; }
/* full screen: a small paper square beside the tag, four corner marks drawn in ink */
.fs-btn { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
          background: #f3e3c8 url(ui/paper_2.webp) center/100% 100%; background-blend-mode: multiply;
          border: 2px solid rgba(59, 51, 47, .8); border-radius: 11px 8px 12px 7px; rotate: -2deg;
          filter: drop-shadow(0 3px 5px rgba(60, 40, 20, .3)); transition: translate .15s, rotate .15s; }
.fs-btn i { width: 20px; height: 20px; --c: var(--ink); --l: 8px; --w: 3px;
  background: linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
              linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
              linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
              linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat; border-radius: 2px; }
.is-fullscreen .fs-btn i { scale: .7; }
.fs-btn:hover { translate: 0 -2px; rotate: 1deg; }
.fs-btn:active { transform: scale(.94); }
.fs-page .fs-btn { animation: fs-nudge 1.2s ease-in-out 3 .8s; }
@keyframes fs-nudge { 50% { translate: 0 -5px; rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .fs-page .fs-btn { animation: none; } }
/* in full screen the page below the timer is out of view anyway; keep the app filling the screen */
.app:fullscreen { width: 100vw; height: 100vh; }
/* the jar beside the tag: as tall as the tag, its count on a little paper dot */
.corner .jar { zoom: .68; scale: 1 !important; translate: none; rotate: none; height: 96px; }
.corner .jar .small { top: auto !important; bottom: 0; left: auto; right: -16px; width: 40px; height: 40px; display: grid; place-items: center;
                      background: url(ui/paper_start.webp) center/100% 100%; border-radius: 50%; font-size: 24px; color: var(--ink); text-shadow: none; }
.corner .jar:hover { translate: 0 -3px; rotate: 3deg; }


.account { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 6px; rotate: -1.5deg;
           background: url(ui/paper_2.webp) center/100% 100%; color: var(--ink); text-shadow: none;
           font-size: 18px; font-weight: 700; transition: transform .12s; }
.account::before { content: ""; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.2 0 24 0 14.6 0 6.6 5.4 2.7 13.3l7.9 6.1C12.5 13.6 17.8 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.2 5.3-4.6 6.9l7.4 5.7c4.3-4 6.9-9.9 6.9-17.1z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.6c-.5-1.4-.8-3-.8-4.6s.3-3.2.8-4.6l-7.9-6.1C1 16.6 0 20.2 0 24s1 7.4 2.7 10.7l7.8-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.4-5.7c-2.1 1.4-4.8 2.3-8.5 2.3-6.2 0-11.5-4.2-13.4-9.9l-7.9 6.1C6.6 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat; }
.account.in::before { display: none; }
.account:hover { translate: 0 -1px; }
.account:active { transform: scale(.95); }
.note small { display: block; margin-top: 8px; font-size: 16px; opacity: .7; }
.get-app { font-size: 16px; color: var(--cream); opacity: .85; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* ---------- desktop: the 16:9 painting fills the screen, controls float over the right-hand wall ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hud { left: auto; width: clamp(360px, 27vw, 480px);   /* .wide-scene .clock below centres on the page using this width */ padding: 26px 24px 22px; }
  .lettering, .get-app { color: var(--ink); text-shadow: 0 1px 2px rgba(255, 244, 226, .55); }
  .clock { margin-top: 128px; }
  /* the time sits in the middle of the room, above the pup; the rest stays on the right-hand wall */
  .wide-scene .clock { position: absolute; left: calc(clamp(360px, 27vw, 480px) - 50vw); top: clamp(36px, 7vh, 80px); margin: 0; translate: -50% 0; z-index: 1; }
  .wide-scene .digits { font-size: clamp(96px, 9vw, 150px); }
  /* records and the biscuit jar: big enough to read as buttons from across the room */
  .wide-scene .hud-top { top: max(36px, calc(env(safe-area-inset-top) + 24px)); }
  .has-corner .hud-top { top: max(104px, calc(env(safe-area-inset-top) + 90px)); }
  .wide-scene .records-entry { scale: 3.1; transform-origin: top left; transition: translate .15s, rotate .15s; }
  .wide-scene .jar { scale: 1.55; transform-origin: top right; transition: translate .15s, rotate .15s; }
  .wide-scene .records-entry .small { font-size: 9px; top: 70px; }   /* ×3.1 → ~28px */
  .wide-scene .jar .small { font-size: 22px; top: 100px; }
  .wide-scene .jar-glass { filter: drop-shadow(0 2px 3px rgba(70, 45, 25, .45)) drop-shadow(0 0 1px rgba(70, 45, 25, .6)); }
  .wide-scene .records-entry .sleeve, .wide-scene .records-entry .disc { filter: drop-shadow(0 3px 5px rgba(60, 40, 20, .3)); }
  .wide-scene .records-entry:hover { translate: 0 -3px; rotate: -2deg; }
  .wide-scene .jar:hover { translate: 0 -3px; rotate: 3deg; }
  .digits { font-size: clamp(88px, 7.5vw, 120px); }
  .get-app { color: var(--accent); }
}

/* ---------- sheets ---------- */
.sheet-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 10; }
.sheet { position: fixed; z-index: 11; left: 50%; bottom: 0; translate: -50% 0; width: min(760px, 100%); max-height: 88svh; overflow: auto;
         background: var(--sheet); border-radius: 26px 26px 0 0; padding: 18px 20px 30px; box-shadow: 0 -8px 30px rgba(0,0,0,.2); }
@media (min-width: 900px) { .sheet { bottom: auto; top: 50%; translate: -50% -50%; border-radius: 26px; } }
.sheet header { display: flex; align-items: baseline; gap: 12px; }
.sheet h2, .sheet .sheet-title { margin: 0; font-size: 32px; font-weight: 700; }
.tin { display: flex; align-items: center; font-size: 20px; }
.tin img { width: 26px; }
.close { margin-left: auto; font-size: 34px; line-height: 1; opacity: .5; }
.hint { font-size: 17px; opacity: .6; margin: 14px 0 0; }

/* the record player at the top of the crate (walnut deck painting; platter, spindle and tonearm drawn on it) */
.now { margin: 12px 0 6px; }
.deck { position: relative; width: min(520px, 100%); margin: 0 auto; border-radius: 14px; overflow: visible; }
.deck-art { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 16px rgba(60, 40, 20, .25); }
.platter { position: absolute; border-radius: 50%; cursor: pointer; }
.spindle { position: absolute; left: var(--cx); top: var(--cy); width: 8px; height: 8px; translate: -50% -50%; border-radius: 50%; background: #d9d4cc; z-index: 3; }
.arm { position: absolute; left: var(--px); top: var(--py); width: 0; height: 0; z-index: 4; rotate: 0deg; transform-origin: 0 0; }
.arm .rod { position: absolute; left: -3.5px; top: 0; width: 7px; height: var(--reach); border-radius: 4px; background: #dcdad6;
            box-shadow: 4px 8px 6px rgba(0,0,0,.35); transition: box-shadow .4s; }
.arm .head { position: absolute; left: -8px; top: calc(var(--reach) - 14px); width: 16px; height: 26px; border-radius: 3px; background: #474341;
             box-shadow: 4px 8px 6px rgba(0,0,0,.35); transition: box-shadow .4s; }
.arm.down .rod, .arm.down .head { box-shadow: 1px 2px 2px rgba(0,0,0,.3); }      /* needle in the groove: tight shadow */
.pivot { position: absolute; left: var(--px); top: var(--py); width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; z-index: 5;
         background: radial-gradient(circle, #6b6764 0 34%, #9e9b97 36%); }
.deck-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: min(520px, 100%); margin: 12px auto 0; }
.now-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.now-title small { opacity: .6; font-size: 15px; }
.deck-row input { width: 110px; accent-color: var(--honey); }
/* a vinyl disc: grooves, a soft sheen, the cover as its round label */
.disc { display: block; width: 100%; height: 100%; border-radius: 50%; position: relative;
        background: repeating-radial-gradient(circle, #1c1a19 0 3px, #262322 3px 4px), #1c1a19;
        box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
               background: conic-gradient(transparent 0 10%, rgba(255,255,255,.10) 15%, transparent 22% 55%, rgba(255,255,255,.07) 62%, transparent 70%); }
.disc img { position: absolute; inset: 29%; width: 42%; height: 42%; border-radius: 50%; object-fit: cover; }
.disc.nature, .rec .vinyl.nature { background: repeating-radial-gradient(circle, #3d6b4d 0 3px, #467858 3px 4px), #3d6b4d; }
.disc.spin { animation: spin 1.8s linear infinite; }
.flier { position: fixed; z-index: 60; pointer-events: none; }
.flier .disc { box-shadow: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; margin-top: 18px; }
.rec { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 22px; rotate: var(--tilt); transition: transform .12s; }
.rec .sleeve { position: relative; z-index: 2; width: 112px; height: 112px; overflow: hidden; border-radius: 4px; box-shadow: 0 3px 6px rgba(0,0,0,.2); }
.rec .sleeve img { width: 100%; height: 100%; object-fit: cover; }
.rec .vinyl { position: absolute; top: 0; width: 100px; height: 100px; border-radius: 50%; background: #1c1a19;
              box-shadow: inset 0 0 0 1px #333; }
.rec .vinyl img { width: 42%; height: 42%; margin: 29%; border-radius: 50%; object-fit: cover; }
.rec .vinyl.spin { animation: spin 6s linear infinite; top: -14px; }
.rec.locked .sleeve img, .rec.locked .vinyl { filter: saturate(.15); opacity: .6; }
.rec b { margin-top: 6px; font-size: 18px; }
.rec small { font-size: 15px; opacity: .6; }
.rec.locked small { color: var(--accent); opacity: .9; }
.rec.on b { color: var(--accent); }
.price { position: absolute; z-index: 3; top: 104px; right: calc(50% - 60px); display: flex; align-items: center; gap: 2px; padding: 1px 8px 1px 4px;
         border-radius: 99px; background: rgba(242,232,214,.95); font-size: 15px; font-weight: 700; rotate: -5deg; }
.price img { width: 22px; }
.price.ok { background: var(--accent); color: var(--cream); }

.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.snd { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; background: url(ui/paper_3.webp) center/100% 100%; opacity: .7; }
.snd img { width: 64px; }
.snd { border-radius: 16px; transition: opacity .2s, box-shadow .2s; }
.snd.on { opacity: 1; box-shadow: inset 0 0 0 2px rgba(214, 158, 102, .35), 0 3px 10px rgba(60, 40, 20, .10); }   /* a soft honey glow, not a frame */
/* slider: a crayon-soft track and a honey dot (also the record player's volume) */
.snd input, .deck-row input[type=range] { -webkit-appearance: none; appearance: none; width: 85%; height: 18px; background: none; cursor: pointer; }
.snd input::-webkit-slider-runnable-track, .deck-row input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: rgba(120, 90, 60, .22); }
.snd input::-moz-range-track, .deck-row input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(120, 90, 60, .22); }
.snd input::-moz-range-progress, .deck-row input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: rgba(214, 158, 102, .85); }
.snd input::-webkit-slider-thumb, .deck-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #e2ac72; border: 2px solid #fffaf0; box-shadow: 0 1px 3px rgba(60, 40, 20, .3); }
.snd input::-moz-range-thumb, .deck-row input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #e2ac72; border: 2px solid #fffaf0; box-shadow: 0 1px 3px rgba(60, 40, 20, .3); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: url(ui/paper_2.webp) center/100% 100%;
        font-size: 20px; font-weight: 700; white-space: nowrap; transition: transform .12s; }
.chip.honey { background-image: url(ui/paper_start.webp); color: var(--accent); }
.chip img { height: 18px; }

.note { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.28); padding: 16px; }
.note[hidden] { display: none; }
.note .card { width: min(330px, 100%); padding: 30px 24px 22px; text-align: center; background: url(ui/paper_3.webp) center/100% 100%;
              rotate: -1.5deg; position: relative; animation: pop .45s cubic-bezier(.3,1.5,.5,1); }
.note .card::before { content: ""; position: absolute; left: 50%; top: -14px; width: 92px; height: 32px; translate: -50% 0; rotate: -4deg;
                      background: url(ui/tape_lilac.webp) center/100% 100%; }
.note h3 { margin: 0 0 6px; font-size: 28px; }
.note p { margin: 0; font-size: 19px; opacity: .85; }
.note .row { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.reveal { display: flex; justify-content: center; margin: 6px 0 8px; }
.reveal img { width: 80px; margin: 0 -8px; animation: pop .5s cubic-bezier(.3,1.5,.5,1) both; }
.reveal img:nth-child(2) { animation-delay: .25s; } .reveal img:nth-child(3) { animation-delay: .5s; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ---------- SEO copy ---------- */
.seo { max-width: 720px; margin: 0 auto; padding: 48px 20px 60px; font-size: 21px; }
.seo h1 { font-size: 44px; line-height: 1.1; margin: 0 0 14px; }
.seo h2 { font-size: 30px; margin: 36px 0 8px; }
.seo p { margin: 0 0 12px; }
.seo details { padding: 10px 0; border-bottom: 1px dashed rgba(59,51,47,.25); }
.seo summary { font-weight: 700; cursor: pointer; }
.seo a { color: var(--accent); }
.links { columns: 2; padding-left: 20px; }
footer { margin-top: 48px; font-size: 17px; opacity: .7; }

/* test mode panel (/test/ or #test) */
.test-panel { position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
              width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px;
              background: #f7d6c2 url(ui/paper_1.webp) center/100% 100%; background-blend-mode: multiply; color: var(--ink);
              border: 2px dashed rgba(59, 51, 47, .7); border-radius: 12px; font-size: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.test-panel b { font-size: 20px; }
.test-panel .row { display: flex; flex-wrap: wrap; gap: 6px; }
.test-panel button { padding: 4px 10px; border-radius: 8px; background: #fffaf0; border: 1.5px solid rgba(59, 51, 47, .6); font-size: 15px; font-weight: 700; }
.test-panel button:active { transform: scale(.95); }
.test-panel small { font-size: 13px; opacity: .7; line-height: 1.25; }

.toast { position: fixed; z-index: 40; left: 50%; top: 22px; translate: -50% 0; display: flex; align-items: center; gap: 8px;
         padding: 8px 16px; font-size: 18px; font-weight: 700; color: var(--ink); background: #fffaf0 url(ui/paper_1.webp) center/100% 100%;
         border: 2px solid rgba(59, 51, 47, .7); border-radius: 12px; animation: toastIn 3.2s ease both; }
.toast img { width: 24px; }
@keyframes toastIn { 0% { opacity: 0; translate: -50% -12px; } 10%, 85% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; } }

/* records entry: a small pool of warm crayon light on the wall behind it, like lamplight, slowly breathing
   (no frame, no card); and now and then a little wiggle of the sleeve */
.records-entry::before { content: ""; position: absolute; left: -62px; top: -52px; width: 232px; height: 196px; z-index: 0;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 176, 66, .62) 0 45%, rgba(255, 186, 86, .34) 68%, rgba(255, 200, 110, 0) 100%);
  animation: recGlow 4s ease-in-out infinite; }
.records-entry .sleeve { animation: recWiggle 7s ease-in-out infinite; }
.records-entry.dragging::before { animation: none; opacity: .5; }
.records-entry:hover .sleeve, .records-entry.dragging .sleeve { animation: none; }
@keyframes recGlow { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes recWiggle {
  0%, 84%, 100% { transform: rotate(0deg); }
  87% { transform: rotate(-4deg) translateY(-2px); }
  90% { transform: rotate(3deg) translateY(-2px); }
  93% { transform: rotate(-2deg); }
  96% { transform: rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .records-entry::before, .records-entry .sleeve { animation: none; } }

/* ---------- notification ask: a paper note that slides up, bottom right ---------- */
.notify-card { position: fixed; z-index: 35; right: 50%; bottom: max(18px, env(safe-area-inset-bottom));   /* bottom centre: clear of Start and the quests */
  width: min(340px, calc(100vw - 36px)); display: grid; grid-template-columns: 46px 1fr; gap: 6px 12px; align-items: start;
  padding: 16px 16px 12px; color: var(--ink); rotate: 1deg;
  background: #fbe9c9 url(ui/paper_1.webp) center/100% 100%; background-blend-mode: multiply;
  border: 2px solid rgba(59, 51, 47, .75); border-radius: 12px 10px 13px 9px;
  filter: drop-shadow(0 6px 10px rgba(60, 40, 20, .28));
  translate: 50% 140%; opacity: 0; transition: translate .45s cubic-bezier(.2,1.3,.4,1), opacity .3s; }
.notify-card.in { translate: 50% 0; opacity: 1; }
.notify-card::before { content: ""; position: absolute; right: 30px; top: -12px; width: 66px; height: 22px; rotate: 5deg;
                       background: url(ui/tape_lilac.webp) center/100% 100%; }
.notify-card .bell { width: 46px; animation: bellNod 2.4s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes bellNod { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -10deg; } 86% { rotate: 8deg; } 93% { rotate: -4deg; } }
.notify-card .msg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notify-card .msg b { font-size: 19px; line-height: 1.2; }
.notify-card .msg span { font-size: 15px; line-height: 1.3; opacity: .8; }
.notify-card .acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.notify-card .acts button { padding: 5px 14px; border-radius: 9px; font-size: 16px; font-weight: 700; }
.notify-card .later { opacity: .6; }
.notify-card .yes { background: url(ui/paper_start.webp) center/100% 100%; color: var(--ink); }
.notify-card.asking .bell { animation-duration: .8s; }
@media (max-width: 899px) { .notify-card { bottom: auto; top: max(84px, calc(env(safe-area-inset-top) + 72px)); translate: 50% -40px; }
                            .notify-card.in { translate: 50% 0; } }   /* phones: drops in under the top row, clear of Start */

.wide-scene .lettering, .wide-scene .get-app { color: var(--ink); text-shadow: 0 1px 2px rgba(255, 244, 226, .6); }   /* ink on the cream attic wall at any width */
.wide-scene .get-app { color: var(--accent); }
@media (max-width: 899px) {   /* narrow window over the attic: Start sits under the clock, the pup keeps its rug */
  .wide-scene .hud-bottom { margin-top: 18px; }
  .wide-scene .today { margin-top: 2px; }
}

/* ---------- first-visit hints ---------- */
.hint-arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity .5s; }
.hint-arrow.in { opacity: 1; }
.hint-arrow .hint-words { position: absolute; font-size: 19px; font-weight: 700; line-height: 1.15; color: var(--ink); width: max-content;
                   text-shadow: 0 0 4px rgba(255, 244, 226, 1), 0 0 10px rgba(255, 244, 226, .8); rotate: -3deg; }
.hint-arrow img { position: absolute; scale: var(--fx, 1) var(--fy, 1); animation: hintNudge 1.8s ease-in-out infinite;
                  filter: drop-shadow(0 0 2px rgba(255, 244, 226, .9)) drop-shadow(0 0 6px rgba(255, 244, 226, .6)); }
@keyframes hintNudge { 0%, 100% { translate: 0 0; } 50% { translate: calc(5px * var(--fx, 1)) calc(5px * var(--fy, 1)); } }   /* nudges toward Start whichever way the arrow is flipped */
.hint-arrow.compact img { display: none; }
.hint-arrow.compact .hint-words { font-size: 16px; padding: 6px 12px; rotate: -1.5deg; text-shadow: none;
                   background: #fffaf0 url(ui/paper_1.webp) center/100% 100%; border: 1.5px solid rgba(59, 51, 47, .55); border-radius: 10px;
                   filter: drop-shadow(0 3px 5px rgba(60, 40, 20, .2)); }
#startTag.hinting { animation: startBreathe 2s ease-in-out infinite; }
@keyframes startBreathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 214, 140, 0)); }
                          50% { filter: drop-shadow(0 0 12px rgba(255, 200, 120, .95)) drop-shadow(0 0 3px rgba(204, 102, 69, .5)); } }
.hint-tag { position: absolute; z-index: 9; display: flex; align-items: center; gap: 6px; padding: 6px 12px; pointer-events: none;
            font-size: 16px; font-weight: 700; color: var(--ink); background: #fffaf0 url(ui/paper_1.webp) center/100% 100%;
            border: 1.5px solid rgba(59, 51, 47, .55); border-radius: 10px; rotate: -1.5deg; white-space: nowrap;
            filter: drop-shadow(0 3px 5px rgba(60, 40, 20, .2)); animation: hintBob 2.2s ease-in-out infinite; }
.hint-tag img { width: 22px; }
@keyframes hintBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.records-entry.hint-glow::before { opacity: 1 !important; animation-duration: 1.6s !important; }
@media (prefers-reduced-motion: reduce) { .hint-arrow img, .hint-tag, #startTag.hinting { animation: none; } }
.hint-over-foot #today, .hint-over-foot #getApp { visibility: hidden; }   /* the first-visit note sits in their place */

/* ---------- sleep log ---------- */
.tag#logTag img { width: 44px; height: 44px; object-fit: contain; border-radius: 0; }
button.today { cursor: pointer; }
button.today::after { content: " ›"; opacity: .7; }
.focusing button.today { pointer-events: none; }
.focusing button.today::after { content: ""; }
.stat-tabs { display: flex; gap: 12px; margin: 16px 0 14px; }
.stat-tab { position: relative; padding: 9px 22px 8px; font-size: 20px; font-weight: 700; opacity: .7;
            background: url(ui/paper_1.webp) center/100% 100%; filter: drop-shadow(0 2px 3px rgba(60, 40, 20, .18)); rotate: -2deg; transition: transform .12s, opacity .15s; }
.stat-tab:nth-child(2) { background-image: url(ui/paper_2.webp); rotate: 1deg; }
.stat-tab:nth-child(3) { background-image: url(ui/paper_3.webp); rotate: -1deg; }
.stat-tab.on { opacity: 1; font-size: 23px; }
.stat-tab.on::before { content: ""; position: absolute; left: 50%; top: -9px; width: 46px; height: 18px; translate: -50% 0; rotate: -8deg;
                       background: url(ui/tape_lilac.webp) center/100% 100%; }
.stat-tab.on:nth-child(2)::before { background-image: url(ui/tape_sage.webp); }
.stat-tab.on:nth-child(3)::before { background-image: url(ui/tape_orange.webp); }
.stat-tab:active { transform: scale(.94); }
.stat-sum { margin: 0 0 10px; font-size: 21px; font-weight: 700; }
.stat-sum.empty { font-weight: 400; opacity: .7; }

.day-cal { height: min(52svh, 460px); overflow-y: auto; border-radius: 18px; background: #faf0db;
           box-shadow: 0 2px 8px rgba(60, 40, 20, .08); padding: 14px 10px 10px; }
.day-col { position: relative; }
.hr { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(59, 51, 47, .12); margin-left: 50px; }
.hr span { position: absolute; right: calc(100% + 6px); top: -11px; font-size: 14px; opacity: .5; white-space: nowrap; }
.nap { position: absolute; left: 56px; right: 4px; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px;
       padding: 2px 8px 2px 12px; border-radius: 8px; overflow: hidden; line-height: 1.15;
       background: linear-gradient(rgba(243, 206, 146, .9), rgba(243, 206, 146, .9)), url(ui/crayon_grain.png); }
.nap::before { content: ""; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: #d69e66; }
.nap.short { background: linear-gradient(rgba(234, 226, 212, .92), rgba(234, 226, 212, .92)), url(ui/crayon_grain.png); }
.nap.short::before { background: rgba(59, 51, 47, .25); }
.nap b { font-size: 17px; display: block; }
.nap small { font-size: 14px; opacity: .65; }
.now-line { position: absolute; left: 46px; right: 0; height: 0; border-top: 1.5px solid var(--accent); }
.now-line::before { content: ""; position: absolute; left: 0; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.sticker { position: relative; display: inline-block; flex: none; }
.sticker img { width: 26px; }
.sticker i { position: absolute; right: -10px; bottom: -4px; font-style: normal; font-size: 13px; font-weight: 700; }

.stat-card { position: relative; padding: 18px; background: url(ui/paper_3.webp) center/100% 100%; rotate: .6deg; }
.stat-card h3 { margin: 0 0 10px; font-size: 26px; }
.week { display: flex; align-items: flex-end; gap: 8px; height: 220px; margin-bottom: 12px; }
.wd { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.wd .bar { width: 26px; background: url(ui/stat_bar_v.webp) center/100% 100%; }
.wd b { font-size: 18px; opacity: .7; }
.wd b.is-today { color: var(--accent); opacity: 1; }
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 420px; }
.heat b { text-align: center; font-size: 16px; opacity: .55; }
.heat img { width: 100%; aspect-ratio: 1; object-fit: contain; max-height: 46px; }
.heat img.is-today { outline: 2.5px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.legend { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 15px; opacity: .55; }
.legend img { width: 16px; height: 16px; }
.month .locked { filter: blur(5px); pointer-events: none; user-select: none; }
.month-cta { position: absolute; left: 50%; top: 50%; translate: -50% -50%; text-decoration: none; color: var(--accent); rotate: -2deg; }

/* ---------- a page's own sound (rain, café, jazz...) ---------- */
.play-chip { font-size: 18px; padding: 6px 16px; rotate: -1.5deg; }
.play-chip img { height: 18px; }

/* ---------- /embed/: the compact timer for Notion and other dashboards ---------- */
.embed-brand { display: none; }
body.embed .embed-brand { display: block; position: fixed; z-index: 6; left: 10px; bottom: 8px; font-size: 15px; font-weight: 700;
                          color: var(--ink); text-decoration: none; opacity: .75; text-shadow: 0 1px 2px rgba(255, 244, 226, .7); }
body.embed .app { min-height: 0; height: 100vh; }
body.embed .seo, body.embed .corner, body.embed .get-app, body.embed .account, body.embed #logTag, body.embed #today,
body.embed .hint-arrow, body.embed .hint-tag { display: none !important; }
body.embed .hud-top { top: 12px; }
body.embed .records-entry { scale: .8 !important; transform-origin: 0 0; }
@media (max-height: 520px) { body.embed .presets { display: none; } body.embed .status { display: none; } }

/* the embed how-to on the Notion page */
.embed-box { display: grid; gap: 14px; margin: 18px 0 8px; }
.embed-url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.embed-url code { flex: 1 1 260px; min-width: 0; padding: 10px 14px; border-radius: 12px; background: #fffaf0; border: 1.5px dashed rgba(59, 51, 47, .3);
                  font: 18px/1.3 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.embed-preview { width: 100%; aspect-ratio: 16 / 10; max-height: 460px; border: 0; border-radius: 16px; box-shadow: 0 4px 14px rgba(60, 40, 20, .18); }

/* comparison tables on roundup pages */
.compare { overflow-x: auto; margin: 20px 0 8px; -webkit-overflow-scrolling: touch; }
.compare table { border-collapse: collapse; min-width: 720px; font-size: 16px; line-height: 1.35; }
.compare caption { text-align: left; font-size: 14px; opacity: .7; padding-bottom: 6px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px dashed rgba(59,51,47,.25); }
.compare thead th { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.compare tbody th { font-weight: 700; min-width: 140px; }
.compare tr:last-child { background: rgba(255, 214, 160, .25); }

/* phones held sideways (and very short windows): like the apps held sideways, the painting and the pup on the left,
   the clock, presets and Start on a paper panel on the right, so nothing sits on the pup. Records, jar and sign-in
   stay over the painting's top edge, as in portrait. */
@media (orientation: landscape) and (max-height: 500px) {
  .app { min-height: 300px; --panel: clamp(290px, 44vw, 400px); --panel-edge: calc(var(--panel) + env(safe-area-inset-right, 0px)); }
  .stage { right: var(--panel-edge); box-shadow: 3px 0 12px rgba(60, 40, 20, .22); z-index: 1; }
  .hud { z-index: 2; padding: max(10px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
         max(6px, env(safe-area-inset-bottom)) calc(100% - var(--panel-edge) + 8px); justify-content: center; }
  .hud-top, .has-corner .hud-top { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: calc(var(--panel-edge) + 12px); }
  .corner { right: calc(var(--panel-edge) + 12px); }
  .clock, .has-corner .clock { margin-top: 0; gap: 2px; }
  .digits { font-size: clamp(52px, 16vh, 72px); }
  .presets { margin-top: 4px; gap: 5px; }
  .preset { width: 50px; font-size: 23px; } .preset.custom { width: 60px; }
  .hud-bottom { margin-top: 10px; gap: 0; }
  .tags { transform: scale(.8); transform-origin: 50% 100%; margin-top: -14px; }
  .clock .lettering, .hud-bottom .lettering { color: var(--ink); text-shadow: none; }
  .hud-bottom .get-app { color: var(--accent); text-shadow: none; }
}

/* Japanese labels are wider per character: keep Start / Stop on one line in the paper tag */
:lang(ja) .bigtag { font-size: 23px; white-space: nowrap; letter-spacing: -.02em; }
:lang(ja) .tag { font-size: 16px; }
:lang(ja) .preset.custom:not(.set) span { font-size: 17px; white-space: nowrap; }   /* その他 on one line */