/* Base: the reset the prototype got from its host page */
html { -webkit-text-size-adjust: 100%; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; min-height: 100vh; }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: inherit; }

/* Layout: an illustrated night scene across the top (village or Bethlehem), then either the giver's workshop (settings + door grid) or the recipient's calendar board hung with a garland of lights. Single deliberate night look; gift styles re-tint the doors. */
:root {
  --sky1: #0e1730;
  --sky2: #1f3157;
  --panel: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --snow: #f4f7fb;
  --frost: #b8c6da;
  --gold: #e7c26a;
  --gold-deep: #b98a2c;
  --card: #fbf6ea;
  --ink: #2a2321;
  --muted: #6d625a;
  --ok: #2f7a55;
  --berry: #b8323f;
  --d0: #b8323f; --d1: #2e6b4a; --d2: #f3ead6; --d3: #2f5d7c;
  --page: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 520px, var(--sky1) 100%);
  --hero-bg: transparent;
  --tile: rgba(8,12,26,.42);
  --field: rgba(8,12,26,.5);
  --board-bg: radial-gradient(120% 80% at 50% 0%, rgba(255,214,140,.10), transparent 60%), linear-gradient(180deg, #24304e, #182238);
  --board-frame: inset 0 0 0 2px rgba(231,194,106,.5), inset 0 0 40px rgba(0,0,0,.25);
  --behind: rgba(20,16,30,.95);
  --gl1: #1d4f33; --gl2: #2f7a48; --gl3: #5fae6e; --glbow: #c3293a; --glbow2: #9e1f2e;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;
  color-scheme: dark;
}
[data-style="cozy"]     { --d0: #c4473a; --d1: #7a4e33; --d2: #f6e3c3; --d3: #4d7a55; }
[data-style="romantic"] { --d0: #a33b62; --d1: #5c2d52; --d2: #f6dfe0; --d3: #8a5a7a; }
[data-style="frost"]    { --d0: #4d7fb0; --d1: #2c4a70; --d2: #e8f0f7; --d3: #6b9aa6; }
[data-spirit="faith"]   { --sky1: #120f2b; --sky2: #2c2550; }
html, body { background: var(--sky1); color: var(--snow); }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.5; background: var(--page); background-attachment: fixed; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero { position: relative; z-index: 1; height: clamp(170px, 26vw, 280px); overflow: hidden; background: var(--hero-bg); border-radius: 0 0 44px 44px / 0 0 30px 30px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hero svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-text { position: absolute; left: 0; right: 0; top: 0; z-index: 2; max-width: 1080px; margin: 0 auto; padding-block: 18px 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 22px; text-shadow: 0 2px 12px rgba(0,0,0,.5); background: rgba(10,16,32,.55); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 4px 16px; }
.brand em { font-style: normal; color: var(--gold); }
.modes { display: inline-flex; background: rgba(10,16,32,.55); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.modes button { font: 700 14px var(--font-body); border: 0; border-radius: 999px; padding: 8px 16px; background: transparent; color: var(--frost); cursor: pointer; }
.modes button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding-block: 8px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 22px; }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 6vw, 58px); line-height: 1.02; margin: 4px 0 0; text-wrap: balance; }
h1 .script { font-family: var(--font-script); font-size: 1.25em; color: var(--gold); font-weight: 400; line-height: .8; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0; text-wrap: balance; }
h3 { font: 700 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0; }
.demo-note { font-size: 13px; color: var(--frost); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin: 0; }
svg.ico { display: block; }

/* Giver */
.builder { display: grid; grid-template-columns: minmax(0, 350px) minmax(0, 1fr); gap: 22px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 18px; display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(4px); }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--frost); font-weight: 500; }
.panel input[type=text], .panel textarea { font: 16px var(--font-body); padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--field); color: var(--snow); width: 100%; box-sizing: border-box; }
.panel textarea { min-height: 76px; resize: vertical; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spirits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spirit { border: 2px solid var(--line); border-radius: 20px; background: var(--tile); color: var(--snow); cursor: pointer; padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; }
.spirit svg { width: 40px; height: 40px; }
.spirit strong { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.spirit span { font-size: 12.5px; color: var(--frost); line-height: 1.35; }
.spirit[aria-pressed="true"] { border-color: var(--gold); background: rgba(231,194,106,.1); }
.tiers { display: grid; gap: 8px; }
.tier { text-align: left; border: 2px solid var(--line); background: var(--tile); color: var(--snow); border-radius: 20px; padding: 12px; cursor: pointer; font: inherit; display: grid; gap: 2px; }
.tier .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tier strong { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.tier .price { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.tier .what { font-size: 13px; color: var(--frost); }
.tier[aria-pressed="true"] { border-color: var(--gold); background: rgba(231,194,106,.1); }
.styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sty { border: 2px solid var(--line); border-radius: 18px; padding: 8px; background: var(--tile); color: var(--snow); font: 500 14px var(--font-body); cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.sty .sw { display: flex; gap: 3px; height: 16px; }
.sty .sw i { flex: 1; border-radius: 8px; }
.sty[aria-pressed="true"] { border-color: var(--gold); }
.lock { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.gridhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--frost); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); border: 1px solid var(--line); }
.dgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dtile { aspect-ratio: 1 / 1.05; max-width: 100%; border: 1px solid var(--line); border-radius: 18px; background: var(--tile); color: var(--snow); cursor: pointer; padding: 7px; display: grid; grid-template-rows: auto 1fr auto; text-align: left; font: inherit; position: relative; }
.dtile .n { font-family: var(--font-display); font-size: 18px; line-height: 1; }
.dtile svg.ico { width: 60%; height: auto; max-height: 100%; justify-self: center; align-self: center; }
.dtile .k { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--frost); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtile.custom { border-color: var(--gold); background: rgba(231,194,106,.14); }
.dtile.gift { border-color: #e66b76; background: rgba(184,50,63,.3); }
.dtile.stale::after { content: "Upgrade"; position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--gold); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Buttons */
.btn { font: 700 15px var(--font-body); border: 0; border-radius: 999px; padding: 10px 18px; background: linear-gradient(180deg, #f2d48a, var(--gold)); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(231,194,106,.3), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn.dark { background: var(--berry); color: #fff; box-shadow: none; }
.linkbtn { background: none; border: 0; color: var(--frost); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0; }

/* Recipient */
.cover { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.cover .msg { max-width: 44ch; color: var(--frost); font-size: 15px; margin: 0; }
.cover .msg strong { color: var(--snow); font-variant-numeric: tabular-nums; }
.bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--frost); }
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--snow); }
.toggle input { appearance: none; width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.2); position: relative; cursor: pointer; margin: 0; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--snow); transition: transform .2s; }
.toggle input:checked { background: var(--berry); }
.toggle input:checked::after { transform: translateX(18px); }
.boardwrap { position: relative; padding-top: 26px; }
.garland { position: absolute; left: -6px; right: -6px; top: 0; z-index: 3; width: calc(100% + 12px); height: auto; pointer-events: none; }
.garland .bulb { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.board { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(118px, 1fr); grid-auto-flow: dense; gap: 14px; padding: 46px 18px 18px;
  background: var(--board-bg); border-radius: 34px; box-shadow: var(--board-frame), 0 24px 60px rgba(0,0,0,.35); }
[data-art="classic"][data-spirit="faith"] { --board-bg: radial-gradient(120% 80% at 50% 0%, rgba(255,214,140,.14), transparent 60%), linear-gradient(180deg, #2f2650, #1c1734); --board-frame: inset 0 0 0 2px rgba(231,194,106,.55), inset 0 0 0 7px #1c1734, inset 0 0 0 8px rgba(231,194,106,.25); }
.slot { position: relative; perspective: 800px; min-height: 118px; }
.slot.wide { grid-column: span 2; } .slot.tall { grid-row: span 2; } .slot.big { grid-column: span 2; grid-row: span 2; }
.behind { position: absolute; inset: 0; border: 0; border-radius: 22px; cursor: pointer; color: var(--gold); font: 700 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  background: radial-gradient(circle at 50% 45%, rgba(255,210,120,.35), var(--behind) 70%); box-shadow: inset 0 3px 12px rgba(0,0,0,.6); display: grid; place-items: center; align-content: center; gap: 6px; }
.behind svg { width: 44%; max-width: 70px; height: auto; opacity: .9; }
.door { position: absolute; inset: 0; border: 0; border-radius: 22px; cursor: pointer; padding: 10px; transform-origin: left center; transition: transform .8s cubic-bezier(.3,.7,.2,1), filter .2s;
  display: grid; grid-template-rows: auto 1fr auto; text-align: left; color: #fff; overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.3), inset 0 -14px 22px rgba(0,0,0,.14), inset 0 14px 22px rgba(255,255,255,.07), 0 10px 22px rgba(0,0,0,.28); }
.door::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 85% 85% at 50% 45%, #000 20%, transparent 100%); }
.door.p0::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 4px, transparent 4px 16px), repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 4px, transparent 4px 16px), repeating-linear-gradient(90deg, rgba(0,0,0,.12) 8px 10px, transparent 10px 16px); }
.door.p1::before { background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 7px, transparent 7px 18px); }
.door.p2::before { background: radial-gradient(circle, rgba(255,255,255,.22) 2px, transparent 2.5px) 0 0 / 16px 16px, radial-gradient(circle, rgba(255,255,255,.22) 2px, transparent 2.5px) 8px 8px / 16px 16px; }
.door.p3::before { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%); opacity: 1; }
.door.ribbon::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - 9px), rgba(231,194,106,.5) calc(50% - 5px), rgba(250,224,150,.95) 50%, rgba(231,194,106,.5) calc(50% + 5px), transparent calc(50% + 9px)); }
.door.c0 { background-color: var(--d0); } .door.c1 { background-color: var(--d1); } .door.c3 { background-color: var(--d3); }
.door.c2 { background-color: var(--d2); color: var(--ink); }
.door.c2::before { filter: invert(1); opacity: .25; }
.door .num { position: relative; z-index: 2; justify-self: start; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  font: 600 18px var(--font-display); color: #3a2a10; background: radial-gradient(circle at 35% 30%, #fff3c7, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 3px 8px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.door svg.ico { position: relative; z-index: 2; width: 62%; max-width: 92px; height: auto; max-height: 100%; justify-self: center; align-self: center; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.door .tag { position: relative; z-index: 2; font: 700 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.slot.big .door .num { min-width: 52px; height: 52px; font-size: 28px; }
.slot.big .door svg.ico { max-width: 170px; }
.door:hover:not(:disabled) { filter: brightness(1.08); }
.door:disabled { cursor: not-allowed; filter: saturate(.45) brightness(.72); }
.door:disabled .tag::after { content: " · locked"; }
.slot.open .door { transform: rotateY(-108deg); box-shadow: none; }
.report { font-size: 13px; color: var(--frost); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
footer { font-size: 13px; color: var(--frost); }

/* Modal card */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(6,8,20,.7); display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.card { width: min(540px, 100%); max-height: calc(100% - 16px); overflow-y: auto; color: var(--ink); border-radius: 30px; padding: 26px; position: relative; animation: rise .35s ease-out; display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(120% 60% at 50% 0%, #fffdf6, var(--card) 70%); box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(185,138,44,.22), inset 0 0 0 8px var(--card), inset 0 0 0 9px rgba(185,138,44,.16); }
.scrim[hidden] { display: none; }
@keyframes rise { from { transform: translateY(16px); opacity: .4; } to { transform: none; opacity: 1; } }
.card .medal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff, #f1e6cc); box-shadow: inset 0 0 0 2px rgba(185,138,44,.45); align-self: center; }
.card .medal svg { width: 44px; height: 44px; }
.card .daylabel { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--berry); font-weight: 700; text-align: center; }
.card h2 { font-size: 28px; text-align: center; }
.card p { margin: 0; }
.card ol, .card ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.card .f { color: var(--muted); }
.card input[type=text], .card input[type=url], .card input[type=search], .card textarea { font: 16px var(--font-body); padding: 9px 11px; border-radius: 14px; border: 2px solid #eadfc8; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; min-width: 0; }
.card textarea { min-height: 90px; resize: vertical; }
.card .btn.ghost { color: var(--ink); }
.close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); font-size: 22px; cursor: pointer; z-index: 2; }
.close:hover { background: #efe5cf; }
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.kind { border: 2px solid #eadfc8; background: #fff; color: var(--ink); border-radius: 18px; padding: 10px; font: 700 14px var(--font-body); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.kind small { font-weight: 400; color: var(--muted); font-size: 12px; }
.kind[aria-pressed="true"] { border-color: var(--berry); background: #fbecea; }
.kind .lk { color: var(--berry); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.err { color: var(--berry); font-size: 14px; font-weight: 700; min-height: 1.2em; }
.choices { display: grid; gap: 8px; }
.choice { text-align: left; font: 500 15px var(--font-body); padding: 11px 16px; border-radius: 16px; border: 2px solid #e2d6bd; background: #fff; color: var(--ink); cursor: pointer; }
.choice.right { border-color: var(--ok); background: #e3f2ea; }
.choice.wrong { border-color: var(--berry); background: #f6e3e5; }
.feedback { font-weight: 700; min-height: 1.5em; }
.feedback.ok { color: var(--ok); } .feedback.no { color: var(--berry); }
.tiles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tile { font: 600 22px var(--font-display); width: 38px; height: 44px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3c7, var(--gold) 60%, var(--gold-deep)); color: #3a2a10; border-radius: 14px; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row input { flex: 1 1 180px; }
.punch { font-family: var(--font-display); font-size: 26px; color: var(--berry); text-align: center; }
.globe { display: block; width: 100%; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #34507a, #0e1730 70%); cursor: pointer; box-shadow: inset 0 0 0 4px rgba(255,255,255,.4); }
.photo { width: 100%; max-width: 100%; border-radius: 18px; display: block; }
.note { font-size: 13px; color: var(--muted); }
.from { font-family: var(--font-script); font-size: 34px; color: var(--berry); text-align: right; line-height: 1; }
.letter { font-size: 18px; white-space: pre-wrap; line-height: 1.55; }
.verse { font-family: var(--font-display); font-size: 21px; line-height: 1.45; text-align: center; margin: 0; padding: 4px 8px; }
.ref { text-align: center; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; color: var(--gold-deep); }
.reflect { background: #f3ead6; border-radius: 18px; padding: 12px 14px; }
.reflect b { color: var(--berry); }
.wrapbox { position: relative; height: 170px; border-radius: 24px; background: repeating-linear-gradient(45deg, var(--d0) 0 18px, color-mix(in srgb, var(--d0) 82%, #000) 18px 36px); display: grid; place-items: center; overflow: hidden; }
.wrapbox::before, .wrapbox::after { content: ""; position: absolute; background: linear-gradient(90deg, #f2d48a, var(--gold-deep)); }
.wrapbox::before { left: calc(50% - 10px); width: 20px; top: 0; bottom: 0; }
.wrapbox::after { top: calc(50% - 10px); height: 20px; left: 0; right: 0; }
.wrapbox .btn { position: relative; z-index: 1; background: var(--card); color: var(--ink); }
.wrapbox.torn { animation: tear .6s ease-in forwards; }
@keyframes tear { to { transform: scale(1.15) rotate(-4deg); opacity: 0; } }
.giftcard { border-radius: 24px; padding: 20px; color: #fff; background: linear-gradient(135deg, var(--d1), var(--d0)); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.2); position: relative; overflow: hidden; }
.giftcard .brandname { font-family: var(--font-display); font-size: 26px; }
.giftcard .amt { font-family: var(--font-display); font-size: 34px; color: #f6dc97; font-variant-numeric: tabular-nums; }
.code { font: 700 18px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; background: rgba(0,0,0,.25); padding: 8px 10px; border-radius: 8px; user-select: all; overflow-wrap: anywhere; }
.giftcard a, .linkout { color: inherit; font-weight: 700; }
.domain { display: inline-block; font: 700 12px ui-monospace, Menlo, monospace; background: #efe5cf; color: var(--ink); padding: 2px 8px; border-radius: 6px; }
/* Art themes */
[data-art="swirl"] { --sky1: #08163a; --sky2: #183a80; }
[data-art="impression"] { --sky1: #23284a; --sky2: #565b88; }
:is([data-art="dream"], [data-art="surreal"]) { --sky1: #122129; --sky2: #2c5560; }
.hero canvas.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero canvas.art[hidden] { display: none; }
[data-paint] .skyobj { display: none; }
[data-art="swirl"] .hero svg.scene { filter: url(#paint) saturate(1.15) brightness(.9); }
[data-art="impression"] .hero svg.scene { filter: url(#paintSoft) brightness(1.1) saturate(.8); opacity: .92; }
:is([data-art="dream"], [data-art="surreal"]) .hero svg.scene, [data-art="cubist"] .hero svg.scene { display: none; }
[data-paint] .door::before { display: none; }
[data-paint] .door.c0 { background: var(--tex0) center / cover; }
[data-paint] .door.c1 { background: var(--tex1) center / cover; }
[data-paint] .door.c2 { background: var(--tex2) center / cover; }
[data-paint] .door.c3 { background: var(--tex3) center / cover; }
[data-paint] { --board-bg: var(--texB) center / cover; }
[data-art="swirl"] .door.c2, [data-art="impression"] .door, :is([data-art="dream"], [data-art="surreal"]) .door.c2 { color: var(--ink); }
:is([data-art="dream"], [data-art="surreal"]) .slot:not(.open) .door { animation: drift 7s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(.6deg); } }
.arts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.artopt { border: 2px solid var(--line); border-radius: 18px; padding: 8px; background: var(--tile); color: var(--snow); font: 500 14px var(--font-body); cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.artopt .chip { height: 46px; border-radius: 12px; }
.artopt small { color: var(--frost); font-size: 12px; line-height: 1.3; }
.artopt[aria-pressed="true"] { border-color: var(--gold); background: rgba(231,194,106,.1); }
.chip.classic { background: radial-gradient(circle at 75% 30%, #fdf3d6 0 6px, transparent 7px), linear-gradient(180deg, #0e1730, #1f3157 60%, #dfe8f4 61%); }
.chip.swirl { background: radial-gradient(circle at 75% 35%, #f6dc6a 0 5px, rgba(246,220,106,.5) 6px 9px, transparent 10px), repeating-radial-gradient(circle at 30% 40%, #2f5cc0 0 4px, #16306e 4px 8px, #5b86d6 8px 11px); }
.chip.impression { background: radial-gradient(circle at 30% 70%, #f4dfc3 0 6px, transparent 14px), repeating-linear-gradient(170deg, #c9b6d9 0 5px, #a9c2df 5px 9px, #e8c3b0 9px 13px, #d7d0e8 13px 17px); }
.chip.surreal { background: radial-gradient(circle at 76% 28%, #fbeede 0 6px, transparent 7px), radial-gradient(circle at 34% 62%, transparent 6px, #fff 6px 9px, transparent 9px), linear-gradient(180deg, #14394a, #5f9a98 55%, #f2c48d 56%, #b7794c); }
.chip.dream { background: radial-gradient(circle at 70% 30%, #e9b0c4 0 5px, transparent 6px), radial-gradient(circle at 30% 45%, #c3293a 0 5px, transparent 6px), linear-gradient(180deg, #1d4e5f, #6fa3a0 55%, #f2c48d 56%, #b7794c); }

/* Universal looks: each one restyles page, panels, calendar, doors, garland and popups */
[data-art="merry"] {
  --page: radial-gradient(circle, rgba(255,255,255,.12) 2px, transparent 4px) 0 0 / 40px 40px, radial-gradient(circle, rgba(255,215,90,.1) 2px, transparent 4px) 20px 20px / 40px 40px, linear-gradient(180deg, #d01d2f 0%, #a8101f 55%, #7e0a16 100%);
  --sky1: #8e0c18;
  --hero-bg: radial-gradient(circle at 12% 30%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 46% 18%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 70% 40%, #ffe9a0 0 2px, transparent 2.5px), radial-gradient(circle at 30% 50%, #ffe9a0 0 1.5px, transparent 2px), radial-gradient(ellipse at 50% 130%, #23b061, #0e6b3a 50%, #063a22);
  --panel: rgba(255,255,255,.13); --line: rgba(255,220,120,.5); --snow: #ffffff; --frost: #ffe3e3;
  --gold: #ffd54a; --gold-deep: #c99a1e; --tile: rgba(90,0,12,.38); --field: rgba(70,0,10,.4);
  --board-bg: radial-gradient(120% 70% at 50% 0%, rgba(255,240,180,.22), transparent 60%), linear-gradient(180deg, #13924c, #0a6232);
  --board-frame: inset 0 0 0 4px #ffd54a, inset 0 0 0 9px rgba(255,255,255,.85), inset 0 0 50px rgba(0,60,30,.25);
  --behind: #3d0a10;
  --card: #fffdf7; --berry: #c8172a; --ink: #3a1418;
  --gl1: #0b5a2e; --gl2: #18a24d; --gl3: #7be09a; --glbow: #ffd54a; --glbow2: #c99a1e;
}
[data-art="merry"][data-spirit="faith"] { --hero-bg: radial-gradient(circle at 12% 30%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 46% 18%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 30% 50%, #ffe9a0 0 1.5px, transparent 2px), radial-gradient(ellipse at 60% 10%, #ffe9a0 0, #3a56c8 30%, #1b2f8a 70%); }
[data-art="swirl"] {
  --page: linear-gradient(rgba(8,22,64,.72), rgba(6,16,46,.86)), var(--texB) center / 700px;
  --panel: rgba(30,70,170,.28); --line: rgba(243,216,112,.4); --frost: #c9d9f7;
  --gold: #f3d870; --gold-deep: #c9a23a; --tile: rgba(10,26,72,.55); --field: rgba(8,20,60,.6); --behind: #081536;
  --board-frame: inset 0 0 0 3px #f3d870, inset 0 0 0 8px #0d1f4a, inset 0 0 0 9px rgba(243,216,112,.5);
  --card: #f7f0d8; --berry: #1d3f8a; --ink: #14224a;
  --gl1: #142c22; --gl2: #2a5a3e; --gl3: #f3d870; --glbow: #f3d870; --glbow2: #c9a23a;
}
[data-art="impression"] {
  --page: linear-gradient(rgba(70,66,110,.55), rgba(46,44,80,.8)), var(--texB) center / 700px;
  --panel: rgba(255,255,255,.13); --line: rgba(255,226,200,.45); --frost: #ece4f4;
  --gold: #f6c79a; --gold-deep: #c88d5a; --tile: rgba(60,56,96,.45); --field: rgba(50,46,84,.5); --behind: #3a3456;
  --board-frame: inset 0 0 0 3px #f6c79a, inset 0 0 0 8px #3a3d5c, inset 0 0 0 9px rgba(246,199,154,.5);
  --card: #fbf3ea; --berry: #9b5c8a; --ink: #3a3048;
  --gl1: #4d6b53; --gl2: #7fa384; --gl3: #d6ead0; --glbow: #e8a6b8; --glbow2: #b97a8e;
}
:is([data-art="dream"], [data-art="surreal"]) {
  --page: linear-gradient(180deg, #123542 0%, #2c5d66 45%, #9c6a4b 100%);
  --panel: rgba(255,255,255,.1); --line: rgba(242,196,141,.45); --frost: #d5e6e4;
  --gold: #f2c48d; --gold-deep: #c98a4f; --tile: rgba(14,40,50,.5); --field: rgba(12,34,44,.55); --behind: #1a2a30;
  --board-frame: inset 0 0 0 3px #f2c48d, inset 0 0 0 8px #20343f, inset 0 0 0 9px rgba(242,196,141,.5);
  --card: #f7ead6; --berry: #b8483a; --ink: #2e2026;
  --gl1: #1f4a52; --gl2: #3f7f8c; --gl3: #9fd0d0; --glbow: #d98e5f; --glbow2: #a8603a;
}
[data-art="cubist"] {
  --page: linear-gradient(rgba(242,232,212,.86), rgba(232,216,188,.92)), var(--texB) center / 700px;
  --panel: rgba(255,250,240,.6); --line: rgba(42,36,32,.3); --snow: #2a2420; --frost: #5a4e44;
  --gold: #b8432f; --gold-deep: #7e2a1c; --tile: rgba(255,250,240,.75); --field: #fffaf0; --behind: #2a2420;
  --board-frame: inset 0 0 0 3px #2a2420, inset 0 0 0 8px #e6d6b4, inset 0 0 0 10px #2a2420;
  --card: #f6ecd9; --berry: #b8432f; --ink: #2a2420;
  --gl1: #2a2420; --gl2: #556b3a; --gl3: #d9b25a; --glbow: #b8432f; --glbow2: #7e2a1c;
}
[data-art="cubist"] .brand, [data-art="cubist"] .modes { background: rgba(246,236,217,.92); color: #2a2420; border-color: #2a2420; }
[data-art="cubist"] .brand em { color: #b8432f; }
[data-art="cubist"] .modes button { color: #5a4e44; }
[data-art="cubist"] .modes button[aria-pressed="true"] { background: #b8432f; color: #fff; }
[data-art="cubist"] .door { border-radius: 4px; box-shadow: inset 0 0 0 3px #2a2420, 0 4px 0 rgba(42,36,32,.25); }
[data-art="cubist"] .door.c2 { color: var(--ink); }
[data-art="cubist"] .door .num { border-radius: 4px; background: #f6ecd9; color: #2a2420; box-shadow: inset 0 0 0 2px #2a2420; }
[data-art="cubist"] .door svg.ico { transform: skewX(-6deg); }
[data-art="cubist"] .board { border-radius: 4px; }
[data-art="cubist"] .card { border-radius: 6px; }
[data-art="cubist"] h1, [data-art="cubist"] h2 { letter-spacing: -.02em; }
[data-art="cubist"] .btn { border-radius: 4px; background: #b8432f; color: #fff; box-shadow: 3px 3px 0 #2a2420; }
[data-art="cubist"] .btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.chip.cubist { background: linear-gradient(118deg, transparent 38%, #2a2420 38% 40%, transparent 40%), linear-gradient(62deg, transparent 55%, #2a2420 55% 57%, transparent 57%), linear-gradient(135deg, #b8432f 0 30%, #d9b25a 30% 52%, #3f5a7a 52% 75%, #556b3a 75%); }
.garland .gl1 { stroke: var(--gl1); } .garland .gl2 { stroke: var(--gl2); } .garland .gl3 { stroke: var(--gl3); }
.garland .glbow { fill: var(--glbow); } .garland .glbow-s { stroke: var(--glbow); } .garland .glknot { fill: var(--glbow2); }
.btn.dark { background: var(--berry); }
.card .daylabel { color: var(--berry); }

[data-art="kids"] {
  --font-display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-script: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  --page: radial-gradient(circle, rgba(255,255,255,.55) 3px, transparent 4px) 0 0 / 46px 46px, radial-gradient(circle, rgba(255,255,255,.35) 2px, transparent 3px) 23px 23px / 46px 46px, linear-gradient(180deg, #5ec8f2 0%, #8fdcf7 50%, #b8ecff 100%);
  --sky1: #5ec8f2;
  --hero-bg: linear-gradient(180deg, #3fb6f0, #8fdcf7);
  --panel: rgba(255,255,255,.75); --line: rgba(255,79,154,.35); --snow: #23306b; --frost: #3f5a8f;
  --gold: #ff4f9a; --gold-deep: #c2185b; --tile: #ffffff; --field: #ffffff;
  --board-bg: radial-gradient(circle, rgba(255,255,255,.6) 4px, transparent 5px) 0 0 / 38px 38px, linear-gradient(180deg, #7fe3c0, #3fd6a6);
  --board-frame: inset 0 0 0 10px transparent;
  --behind: #2a3a7a;
  --card: #ffffff; --berry: #ff4f9a; --ink: #23306b;
  --gl1: #ff3b5c; --gl2: #ffffff; --gl3: #ff3b5c; --glbow: #3fd6a6; --glbow2: #13a37a;
}
[data-art="kids"] .board { border: 10px solid transparent; border-radius: 28px; background: var(--board-bg) padding-box, repeating-linear-gradient(45deg, #ff3b5c 0 14px, #fff 14px 28px) border-box; }
[data-art="kids"] .garland .gl2 { stroke-dasharray: 6 6; }
[data-art="kids"] .brand, [data-art="kids"] .modes { background: rgba(255,255,255,.85); color: #23306b; }
[data-art="kids"] .brand em { color: #ff4f9a; }
[data-art="kids"] .modes button { color: #3f5a8f; }
[data-art="kids"] .modes button[aria-pressed="true"] { background: #ff4f9a; color: #fff; }
[data-art="kids"] h1, [data-art="kids"] h2 { font-weight: 700; letter-spacing: -.01em; }
[data-art="kids"] h1 .script { font-size: 1em; color: #ff4f9a; }
[data-art="kids"] .btn { background: #ff4f9a; color: #fff; box-shadow: 0 4px 0 #c2185b; font-family: var(--font-display); }
[data-art="kids"] .btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 3px currentColor; }
[data-art="kids"] .btn.dark { background: #4fb3ff; box-shadow: 0 4px 0 #1f7fc8; }
[data-art="kids"] .panel, [data-art="kids"] .tier, [data-art="kids"] .spirit, [data-art="kids"] .artopt, [data-art="kids"] .dtile { border-width: 3px; }
[data-art="kids"] .door { border-radius: 22px; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.12), 0 8px 14px rgba(0,0,0,.15); }
[data-art="kids"] .door.c0 { background: #ff4f9a; } [data-art="kids"] .door.c1 { background: #3fd6a6; }
[data-art="kids"] .door.c2 { background: #ffd23f; color: #23306b; } [data-art="kids"] .door.c3 { background: #4fb3ff; }
[data-art="kids"] .door::before { opacity: 1; filter: none; inset: 0 0 auto; height: 22px; background: radial-gradient(circle at 10px 0, #fff 10px, transparent 10.5px) 0 0 / 20px 22px repeat-x; }
[data-art="kids"] .door .num { background: #fff; color: #ff4f9a; font-family: var(--font-display); font-weight: 700; box-shadow: 0 3px 0 rgba(0,0,0,.15); margin-top: 6px; }
[data-art="kids"] .door .tag { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; font-weight: 600; }
[data-art="kids"] .slot:not(.open) .door:hover { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
[data-art="kids"] .slot.today .door { animation: jelly 1.8s ease-in-out infinite; }
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.04, .96); } 50% { transform: scale(.97, 1.03); } 70% { transform: scale(1.02, .98); } }
[data-art="kids"] .slot.today::after { box-shadow: 0 0 0 4px #ffd23f, 0 0 0 8px #ff4f9a; border-radius: 26px; }
[data-art="kids"] .card { border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 8px 0 #ff4f9a, inset 0 16px 0 #ffd23f, inset 0 24px 0 #3fd6a6; padding-top: 38px; }
[data-art="kids"] .verse { font-family: var(--font-display); font-weight: 500; }
[data-art="kids"] .tile { background: #ff4f9a; color: #fff; font-family: var(--font-display); }
.chip.kids { background: radial-gradient(circle at 25% 70%, #fff 0 7px, transparent 8px), linear-gradient(90deg, #ff4f9a 0 25%, #3fd6a6 25% 50%, #ffd23f 50% 75%, #4fb3ff 75%); }
.cloud { animation: cloud 30s linear infinite; }
@keyframes cloud { 0% { transform: translateX(-60px); } 50% { transform: translateX(60px); } 100% { transform: translateX(-60px); } }
.sunrays { animation: spin 20s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.blink { animation: flick 1.6s steps(1) infinite; }
.wobble { animation: wob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wob { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.hop { animation: hop 1.6s ease-in-out infinite; }
@keyframes hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.sparkle { animation: flick 1.2s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .cloud, .sunrays, .blink, .wobble, .hop, .sparkle, [data-art="kids"] .slot.today .door { animation: none !important; } }

/* Merry & Bright doors: every door a wrapped present in red, green, gold or silver */
[data-art="merry"] .door.c0 { background: radial-gradient(circle at 30% 16%, #ff7c86, #e0283a 52%, #b3182a); --rib: linear-gradient(90deg, #c99a1e, #fff1a8, #c99a1e); }
[data-art="merry"] .door.c1 { background: radial-gradient(circle at 30% 16%, #62e598, #1fae52 52%, #107a38); --rib: linear-gradient(90deg, #9aa3ad, #ffffff, #9aa3ad); }
[data-art="merry"] .door.c2 { background: linear-gradient(135deg, #c99a2e 0%, #f7dc86 30%, #e3bb4a 50%, #fbeaa8 70%, #d0a43c 100%); background-size: 220% 220%; color: #3a2405; --rib: linear-gradient(90deg, #a8101f, #e2303f, #a8101f); animation: metal 7s ease-in-out infinite; }
[data-art="merry"] .door.c3 { background: linear-gradient(135deg, #a7afb9 0%, #f3f5f8 30%, #d0d6dd 50%, #fbfcfd 70%, #adb5bf 100%); background-size: 220% 220%; color: #24303c; --rib: linear-gradient(90deg, #0a6232, #18a24d, #0a6232); animation: metal 7s ease-in-out infinite; animation-delay: -3s; }
@keyframes metal { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
[data-art="merry"] .door::before { inset: 0; opacity: 1; background: var(--rib) center / 14px 100% no-repeat; -webkit-mask-image: none; mask-image: none; border-radius: 0; filter: drop-shadow(0 0 4px rgba(0,0,0,.28)); }
[data-art="merry"] .door::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--rib); -webkit-mask: linear-gradient(transparent calc(50% - 7px), #000 calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)); mask: linear-gradient(transparent calc(50% - 7px), #000 calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)); filter: drop-shadow(0 0 4px rgba(0,0,0,.28)); }
[data-art="merry"] .door.c2 .num { background: radial-gradient(circle at 35% 30%, #ffffff, #d5dbe2 55%, #8d96a1); color: #24303c; }
[data-art="merry"] .door .tag { background: rgba(0,0,0,.28); color: #fff; justify-self: start; padding: 2px 8px; border-radius: 999px; }
[data-art="merry"] .door svg.ico { filter: drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
[data-art="merry"] .slot::before { content: "✦"; position: absolute; z-index: 5; top: 6px; right: 10px; color: #fff; font-size: 15px; pointer-events: none; text-shadow: 0 0 8px #fff; animation: glint 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.53s); }
[data-art="merry"] .slot.open::before { display: none; }
@keyframes glint { 0%, 60%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 75% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
.chip.merry { background: radial-gradient(circle at 70% 35%, #fff 0 3px, transparent 4px), linear-gradient(90deg, transparent 44%, #ffd54a 44% 56%, transparent 56%), linear-gradient(135deg, #db1d30 0 25%, #16a34a 25% 50%, #f9de7e 50% 75%, #e9edf2 75%); }
@media (prefers-reduced-motion: reduce) { [data-art="merry"] .door.c2, [data-art="merry"] .door.c3, [data-art="merry"] .slot::before { animation: none !important; } }

/* Content library picker */
.card > * { flex-shrink: 0; }
@media (max-width: 640px) { .libres { max-height: 52vh; } }
.libbar { display: flex; gap: 8px; flex-wrap: wrap; }
.libbar input { flex: 1 1 200px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 2px solid #e2d6bd; background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 11px; font: 600 13px var(--font-body); cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--berry); border-color: var(--berry); color: #fff; }
.libmeta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.libscope { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.libcount { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.libres { max-height: 320px; overflow-y: auto; display: grid; gap: 6px; padding: 2px; }
.librow { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; border: 2px solid #e2d6bd; background: #fff; color: var(--ink); border-radius: 16px; padding: 8px 12px; cursor: pointer; font: inherit; }
.librow svg { width: 36px; height: 36px; }
.librow b { display: block; font-size: 15px; line-height: 1.3; }
.librow small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.librow:hover { border-color: color-mix(in srgb, var(--berry) 50%, #e2d6bd); }
.librow[aria-selected="true"] { border-color: var(--berry); background: color-mix(in srgb, var(--berry) 9%, #fff); }
.libpick { margin: 0; font-size: 14px; background: #f3ead6; border-radius: 14px; padding: 8px 12px; }

/* Kids' activities */
.card .medal svg { filter: drop-shadow(0 1px 2px rgba(0,40,90,.4)); }
[data-art="kids"] .close { top: 30px; }
.kid-hint { text-align: center; color: var(--muted); font-size: 14px; margin: 0; }
.story-p { font-size: 18px; line-height: 1.65; }
.lyrics { text-align: center; font-family: var(--font-display); font-size: 21px; line-height: 1.5; white-space: pre-line; margin: 0; }
.pal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pc { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: var(--c); box-shadow: 0 0 0 2px #d9d1c0; cursor: pointer; padding: 0; transition: transform .15s; }
.pc.on { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.15); }
.colorwrap { width: 100%; max-width: 330px; margin: 0 auto; }
.colorwrap svg, .findwrap svg, .countwrap svg { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 22px; }
.colorwrap .rg { cursor: pointer; transition: fill .15s; }
.colorwrap .rg:focus-visible { outline: none; stroke: #ff4f9a; stroke-width: 5; }
.findwrap svg { box-shadow: inset 0 0 0 2px #e2d6bd; }
.findwrap .target { cursor: pointer; outline: none; }
.findwrap .ring { opacity: 0; fill: none; stroke: #ff4f9a; stroke-width: 4; transition: opacity .2s; }
.findwrap .target.found .ring, .findwrap .target:focus-visible .ring { opacity: 1; }
.findwrap .target.shown .ring { stroke: #4fb3ff; }
.counts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.counts .choice { min-width: 64px; text-align: center; font: 700 22px var(--font-display); }
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mcard { aspect-ratio: 1; max-width: 100%; border: 0; padding: 0; cursor: pointer; position: relative; perspective: 600px; background: transparent; }
.mcard .in { position: absolute; inset: 0; transition: transform .45s; transform-style: preserve-3d; }
.mcard.flip .in, .mcard.done .in { transform: rotateY(180deg); }
.mcard .f, .mcard .b { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.mcard .b { background: repeating-linear-gradient(45deg, var(--berry) 0 8px, color-mix(in srgb, var(--berry) 70%, #fff) 8px 16px); box-shadow: inset 0 0 0 3px #fff; }
.mcard .f { background: #fff; transform: rotateY(180deg); box-shadow: inset 0 0 0 3px #e2d6bd; }
.mcard .f svg { width: 70%; height: auto; }
.mcard.done .f { box-shadow: inset 0 0 0 4px #3fd6a6; }
.slots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.slots span { width: 42px; height: 48px; border-radius: 14px; border: 3px dashed #d9d1c0; display: grid; place-items: center; font: 700 24px var(--font-display); color: var(--ink); }
.slots span.fill { border-style: solid; border-color: #3fd6a6; background: #e8fbf4; }
.ltile { border: 0; cursor: pointer; width: 46px; height: 52px; font-size: 24px; }
.ltile:disabled { opacity: .2; cursor: default; }
.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .mcard .in { transition: none; } .shake { animation: none; } }

/* Motion */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.slot { animation: settle .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 35ms); }
@keyframes settle { from { transform: translateY(14px) scale(.96); opacity: .45; } }
.slot:not(.open) .door:hover { transform: translateY(-4px) rotate(-.6deg); }
.door:hover svg.ico { animation: wiggle .7s ease-in-out; }
@keyframes wiggle { 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(6deg) scale(1.08); } }
.door .num { overflow: hidden; }
.door .num::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.8) 50%, transparent 65%); background-size: 260% 100%; background-position: 150% 0; animation: shine 6s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes shine { 0%, 70% { background-position: 150% 0; } 100% { background-position: -110% 0; } }
.slot.today::after { content: ""; position: absolute; inset: -6px; border-radius: 28px; pointer-events: none; z-index: 4; box-shadow: 0 0 0 2px var(--gold), 0 0 26px 6px rgba(255,214,120,.55); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.slot.today .door svg.ico, .door.ribbon svg.ico { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.slot.open .behind { animation: spill 1s ease-out; }
@keyframes spill { from { box-shadow: inset 0 0 40px 20px rgba(255,220,140,.9), 0 0 30px 8px rgba(255,220,140,.6); } }
.sleigh { animation: fly 24s linear infinite; }
@keyframes fly { from { transform: translateX(-1150px); } to { transform: translateX(450px); } }
.puff { transform-box: fill-box; transform-origin: center; animation: smoke 6s linear infinite; opacity: 0; }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .55; } 100% { transform: translate(16px, -56px) scale(1.9); opacity: 0; } }
.flick { animation: flick 5s steps(1) infinite; }
@keyframes flick { 0%, 100% { opacity: 1; } 46% { opacity: .7; } 50% { opacity: 1; } 78% { opacity: .85; } }
.starpulse { transform-box: fill-box; transform-origin: center; animation: starpulse 4s ease-in-out infinite; }
@keyframes starpulse { 50% { transform: scale(1.08); opacity: .85; } }
.glowflick { animation: flick 3s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .slot, .door .num::after, .slot.today::after, .slot.today .door svg.ico, .door.ribbon svg.ico, .sleigh, .puff, .flick, .starpulse, .glowflick, :is([data-art="dream"], [data-art="surreal"]) .slot:not(.open) .door, .slot.open .behind { animation: none !important; } }
@media (max-width: 820px) { .builder { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .board { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 30px 10px 10px; grid-auto-rows: minmax(96px, 1fr); }
  .slot { min-height: 96px; }
  .door .num { min-width: 28px; height: 28px; font-size: 15px; }
  .card { padding: 20px; }
  .pair { grid-template-columns: 1fr; }
  .hero-text { padding-block: 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .door, .card, .wrapbox.torn, .garland .bulb { transition: none; animation: none; } }

/* Live-site screens: sign-in, my calendars, sharing */
.brand { text-decoration: none; }
.demobar { position: relative; z-index: 2; margin: 0; padding: 8px max(16px, env(safe-area-inset-left, 0px)); text-align: center; font-size: 13px; background: #ffd54a; color: #3a1418; }
.loading { color: var(--frost); font-size: 16px; padding-block: 40px; text-align: center; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.save-status { font-size: 13px; color: var(--frost); }
.save-status.bad, .toast.bad { color: #fff; background: #b8323f; }
.save-status.bad { padding: 2px 8px; border-radius: 999px; }
.authbox { max-width: 560px; margin: 8px auto 0; gap: 14px; }
.authbox h1 { font-size: clamp(30px, 5vw, 46px); }
.authbox p { margin: 0; }
.authform { display: flex; flex-direction: column; gap: 10px; }
.panel input[type=email], .card select { font: 16px var(--font-body); padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--snow); width: 100%; box-sizing: border-box; }
.card select { background: #fff; color: var(--ink); border: 2px solid #e2d6bd; margin-top: 4px; }
.or { text-align: center; color: var(--frost); font-size: 13px; }
.fine { font-size: 12.5px; color: var(--frost); }
.err.good { color: var(--snow); }
.authbox .err { color: #ffd0d4; }
[data-art="kids"] .authbox .err, [data-art="cubist"] .authbox .err { color: #b8323f; }
.mine-head { margin-bottom: 8px; }
.calgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.calcard { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 2px solid var(--line); background: var(--tile); color: var(--snow); border-radius: 22px; padding: 12px; cursor: pointer; font: inherit; }
.calcard:hover { border-color: var(--gold); }
.calcard .chip { height: 70px; border-radius: 14px; display: block; }
.calcard strong { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.calcard span { font-size: 13px; color: var(--frost); }
.empty, .notice { max-width: 560px; }
.empty p, .notice p { margin: 0; }
.tier.owned { opacity: .75; cursor: default; }
.sharelink { color: var(--ink); background: #f3ead6; user-select: all; font-size: 14px; }
.toast { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(92vw, 520px); background: #fffdf7; color: #2a2321; border-radius: 12px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 15px; }
.sitefoot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-block: 0 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); font-size: 13px; color: var(--frost); }
.fatal { position: fixed; inset: auto 16px 16px; z-index: 50; background: #fff; color: #2a2321; padding: 14px; border-radius: 12px; }

/* Friends & Family */
.tier.family { border-style: dashed; }
.tier.family.owned { border-style: solid; }
.btn.sm { padding: 7px 14px; font-size: 14px; }
.people { display: flex; flex-direction: column; gap: 10px; }
.person { border: 2px solid #eadfc8; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.person-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.person-head .pname { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.person-acts { display: inline-flex; gap: 12px; }
.card .linkbtn { color: var(--muted); }
.person .sharelink { font-size: 13px; }
.addperson { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.addperson label { flex: 1 1 200px; }
.addperson.rename { flex: 1 1 100%; }
.addperson.rename input { flex: 1 1 160px; }
.fampitch { border: 2px dashed var(--berry); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--berry) 6%, #fff); }
.fampitch p { margin: 0; }
.note.warn { color: #8a4b00; background: #fff4d6; border-radius: 10px; padding: 8px 10px; }

/* Softer shapes everywhere: rounded line joins on every icon */
svg.ico, svg.ico * { stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 640px) { .board { border-radius: 26px; } .door { border-radius: 18px; } .behind { border-radius: 18px; } }