/* from my window: the page's dress. Paper cards over one drawn scene. */
:root{
  --paper:#FBF6EC; --paper2:#F2EADB; --ink:#22262B; --soft:#6B6A64; --green:#3F6E5B; --greenD:#2C5243; --pink:#E86A8A; --gold:#E7A93B;
  --ui: ui-rounded, "SF Pro Rounded", "Nunito", "Avenir Next", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%; overflow:hidden; touch-action:manipulation; -webkit-touch-callout:none; background:#18234A; color:var(--ink); font:16px/1.35 var(--ui); -webkit-user-select:none; user-select:none; overscroll-behavior:none}
button{font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer}
[hidden]{display:none !important}

/* ---- the scene ---- */
#scene{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:manipulation}
.cwin{fill:#FFD98A; opacity:calc(var(--win) * .9)} .cwin.off{opacity:calc(var(--win) * .1)}
.actor{cursor:pointer} .hit{cursor:pointer}
.note{font:700 20px var(--serif); fill:#fff; paint-order:stroke; stroke:rgba(30,40,60,.55); stroke-width:3px; pointer-events:none; animation:note 1.5s ease-out forwards}
@keyframes note{0%{opacity:0; transform:translate(0,0)}15%{opacity:1}100%{opacity:0; transform:translate(10px,-58px)}}
.ring{fill:none; stroke:#fff; stroke-width:5; pointer-events:none; animation:ring .6s ease-out forwards; transform-box:fill-box; transform-origin:50% 50%}
@keyframes ring{0%{opacity:.8; transform:scale(.3)}100%{opacity:0; transform:scale(1.5)}}
#room .tailg{transform-box:fill-box; transform-origin:0% 100%; animation:sway 5s ease-in-out infinite}
#room .ziggy .tailg{animation-duration:6.6s}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
#room .ear{transform-box:fill-box; transform-origin:50% 100%; transition:transform .12s}
#room .ear.tw{transform:rotate(-10deg)} #room .ear.r.tw{transform:rotate(10deg)}
.cat .whole,.cat .head{transform-box:fill-box; transform-origin:50% 100%}
.boo.chatter .head{animation:jit .1s linear infinite}
.boo.chatter .tailg{animation:lash .2s ease-in-out infinite}
@keyframes jit{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-6px) rotate(-2deg)}}
@keyframes lash{0%,100%{transform:rotate(0)}50%{transform:rotate(-15deg)}}
.ziggy.windup .whole{animation:wiggle .17s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-1.7deg)}50%{transform:rotate(1.7deg)}}
.ziggy.bonk .whole{animation:bonk .75s cubic-bezier(.2,.7,.3,1)}
@keyframes bonk{0%{transform:none}26%{transform:translate(22px,-150px) scale(1.06,1.1)}38%{transform:translate(30px,-160px) scale(1.13,.93)}62%{transform:translate(8px,-18px) scale(1)}80%{transform:scale(1.05,.93)}100%{transform:none}}
#flash{position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:15}
#flash.on{animation:flash .32s ease-out}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}

/* ---- the day's controls ---- */
#hud{position:fixed; inset:0; pointer-events:none; z-index:10}
#hud > *{pointer-events:auto}
.chip{background:rgba(251,246,236,.93); border-radius:15px; padding:7px 12px; box-shadow:0 2px 10px rgba(20,24,40,.22); display:inline-flex; align-items:center; gap:7px}
.chip.small{font-size:13px; padding:5px 10px; color:var(--soft)} .chip.small b{color:var(--ink); font-weight:700}
.tl{position:absolute; left:10px; top:calc(10px + var(--st)); display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none}
.tr{position:absolute; right:10px; top:calc(10px + var(--st)); display:flex; gap:8px; align-items:center}
#clock{flex-direction:column; align-items:flex-start; gap:0; padding:6px 12px 7px}
#clock b{font:700 21px/1.1 var(--ui); letter-spacing:.2px} #clock span{font-size:12.5px; color:var(--soft)}
.btn{min-height:42px} .btn:active{transform:scale(.95)}
#albumBtn b{font-size:18px} #albumBtn span{font-size:13px; color:var(--soft)}
#albumBtn.bump{animation:bump .5s ease-out}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
.round{width:42px; height:42px; padding:0; justify-content:center; border-radius:50%}
#shutter{position:absolute; right:16px; bottom:calc(18px + var(--sb)); width:82px; height:82px; border-radius:50%; background:rgba(251,246,236,.95); box-shadow:0 4px 16px rgba(20,24,40,.35), inset 0 0 0 4px #fff, inset 0 0 0 7px var(--greenD); display:grid; place-items:center; transition:transform .08s}
#shutter i{width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 38% 34%, #9CC4D6 0 12%, #2D3B44 13% 46%, #15191B 47%); box-shadow:0 0 0 3px #5E8C79}
#shutter:active{transform:scale(.92)}
#shutter.cool i{filter:brightness(.6)}
#shutter.hint::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:4px solid var(--pink); animation:pulse 1.1s ease-out infinite; pointer-events:none}
@keyframes pulse{0%{transform:scale(.88); opacity:.95}100%{transform:scale(1.28); opacity:0}}
@media (min-width:760px){ #shutter{right:28px; bottom:26px; width:92px; height:92px} #shutter i{width:58px; height:58px} }

/* ---- small words over the scene ---- */
#caption{position:fixed; left:50%; top:calc(124px + var(--st)); transform:translateX(-50%); z-index:9; pointer-events:none; text-align:center; width:min(86vw,520px)}
#caption span{display:inline-block; font:italic 600 17px/1.3 var(--serif); color:#fff; text-shadow:0 1px 6px rgba(15,20,40,.75), 0 0 2px rgba(15,20,40,.6); opacity:0; transition:opacity .5s}
#caption span.on{opacity:1}
#bubbles{position:fixed; inset:0; pointer-events:none; z-index:11}
.bub{position:absolute; transform:translate(-50%,-100%); background:var(--paper); border-radius:13px; padding:7px 11px; font-size:14px; line-height:1.25; max-width:200px; text-align:center; box-shadow:0 3px 12px rgba(20,24,40,.3); animation:bub 2.3s ease-out forwards}
.bub::after{content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; background:var(--paper); transform:translateX(-50%) rotate(45deg); border-radius:2px}
.bub.big{font:800 19px var(--ui)}
@keyframes bub{0%{opacity:0; margin-top:8px}10%{opacity:1; margin-top:0}80%{opacity:1}100%{opacity:0}}
#banner{position:fixed; left:50%; top:calc(8px + var(--st)); transform:translateX(-50%); z-index:14; pointer-events:none; width:min(94vw,430px)}
.ban{display:flex; gap:11px; align-items:center; background:var(--paper); border-radius:17px; padding:8px 12px 8px 8px; box-shadow:0 6px 22px rgba(20,24,40,.35); animation:ban 2.9s cubic-bezier(.2,.8,.3,1) forwards}
.ban .ph{width:104px; flex:none} .ban b{display:block; font-size:16px; line-height:1.2} .ban span{font-size:13.5px; color:var(--soft)}
@keyframes ban{0%{transform:translateY(-130%)}9%{transform:none}86%{transform:none; opacity:1}100%{transform:translateY(-130%); opacity:0}}
.ph{display:block; width:100%; height:auto; border-radius:11px; background:#333}

/* ---- screens ---- */
.screen{position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:calc(12px + var(--st)) 12px calc(12px + var(--sb)); background:rgba(18,22,40,.42); animation:fade .25s ease-out}
.screen.clear{background:linear-gradient(180deg, rgba(18,22,40,0) 30%, rgba(18,22,40,.35))}
@media (min-width:900px){ .screen.clear{justify-content:flex-end; padding-right:5vw} }
@keyframes fade{from{opacity:0}to{opacity:1}}
.card{background:var(--paper); border-radius:24px; width:100%; max-width:440px; max-height:100%; overflow:auto; -webkit-overflow-scrolling:touch; box-shadow:0 14px 44px rgba(10,14,30,.45); padding:18px 18px 16px; animation:rise .34s cubic-bezier(.2,.9,.3,1.1)}
@keyframes rise{from{transform:translateY(26px) scale(.97); opacity:0}to{transform:none; opacity:1}}
.card h1{font:italic 700 34px/1.05 var(--serif); margin:2px 0 6px} .card h2{font:700 24px/1.15 var(--serif); margin:10px 0 2px}
.card p{margin:7px 0} .soft{color:var(--soft)} .small{font-size:13.5px} .center{text-align:center}
.go{display:block; width:100%; margin-top:14px; padding:13px 16px; border-radius:16px; background:var(--green); color:#fff; font-weight:800; font-size:17px; box-shadow:0 3px 0 var(--greenD)}
.go:active{transform:translateY(2px); box-shadow:0 1px 0 var(--greenD)}
.link{display:block; margin:10px auto 0; color:var(--soft); font-size:13.5px; text-decoration:underline}
.how{list-style:none; padding:0; margin:12px 0 4px} .how li{display:flex; gap:10px; align-items:center; margin:8px 0; font-size:15.5px}
.how i{flex:none; width:34px; height:34px; border-radius:50%; background:var(--paper2); display:grid; place-items:center; font-style:normal}
.ded{font:italic 15px var(--serif); color:var(--soft); text-align:center; margin-top:12px}

/* the morning shelf */
.shelf{max-width:560px} .shelf h2{margin-top:0}
.foods{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px}
.food{display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:#fff; border-radius:16px; padding:9px 11px 10px; box-shadow:0 1px 0 #E2D8C6, inset 0 0 0 1.5px #EAE0CF; min-height:128px}
.food:active{transform:scale(.97)} .food svg.ic{width:58px; height:44px}
.food b{font-size:15.5px; line-height:1.15; margin-top:2px} .food span{font-size:12.5px; line-height:1.25; color:var(--soft); margin-top:3px}
.food .heads{display:flex; flex-wrap:wrap; gap:0; margin-top:auto; padding-top:6px; min-height:26px} .food .heads svg{width:26px; height:20px}
.food .heads em{font-style:normal; font-size:12px; color:#A39A88; align-self:center}
@media (min-width:600px){ .foods{grid-template-columns:1fr 1fr 1fr} }

/* a bird's card */
.bird .photo{position:relative; max-width:calc(32vh * 4 / 3); margin:0 auto} .stamp{position:absolute; right:-6px; top:-8px; background:var(--pink); color:#fff; font-weight:900; font-size:17px; padding:5px 12px; border-radius:12px; transform:rotate(7deg); box-shadow:0 3px 0 #B8466A; animation:stamp .5s cubic-bezier(.2,1.6,.4,1) .15s backwards}
@keyframes stamp{from{transform:rotate(-20deg) scale(2.2); opacity:0}}
.latin{font:italic 14.5px var(--serif); color:var(--soft); margin:0 0 8px !important}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px} .tag{font-size:12.5px; background:var(--paper2); border-radius:9px; padding:3px 8px; color:#55534C}
.bird .how2{font-weight:700} .bird .more{color:#55534C}
.eats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0 4px}
.eat{background:#fff; border-radius:11px; padding:5px 7px 6px; font-size:12.5px; line-height:1.2; box-shadow:inset 0 0 0 1.5px #EAE0CF} .eat b{display:block; font-size:13px}
.eat.l3{background:#E3F0E6; box-shadow:inset 0 0 0 1.5px #9CC7A8} .eat.l2{background:#EEF4E4} .eat.l0{color:#A39A88}
.voice{display:flex; gap:10px; align-items:center; background:var(--paper2); border-radius:14px; padding:8px 10px; margin-top:10px; font-size:14px; line-height:1.3}
.play{flex:none; width:44px; height:44px; border-radius:50%; background:var(--gold); box-shadow:0 3px 0 #B9801F; display:grid; place-items:center} .play:active{transform:translateY(2px); box-shadow:0 1px 0 #B9801F}
.play svg{width:16px; height:16px; margin-left:3px}
.words{font:italic 600 15px var(--serif); color:var(--green); margin:6px 0 0 !important}

/* the album */
.album{max-width:720px; padding-top:14px} .album header{display:flex; align-items:baseline; justify-content:space-between; gap:10px; position:sticky; top:-14px; background:var(--paper); padding:6px 0 8px; z-index:2}
.album header h2{margin:0} .x{width:40px; height:40px; border-radius:50%; background:var(--paper2); font-size:20px; line-height:1; flex:none}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px} @media (min-width:560px){ .grid{grid-template-columns:repeat(5,1fr)} }
.cell{background:#fff; border-radius:14px; padding:6px 6px 7px; text-align:center; box-shadow:inset 0 0 0 1.5px #EAE0CF; min-height:104px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end}
.cell svg{width:100%; height:62px} .cell b{font-size:12px; line-height:1.15; font-weight:700; margin-top:3px}
.cell.grey svg{filter:brightness(0) opacity(.2)} .cell.grey b{color:#A39A88; font-weight:600}
.cell.none{background:var(--paper2); box-shadow:none; justify-content:center; color:#C9BFAD; font:700 30px var(--serif)}
.cell:active{transform:scale(.96)}
.hint{background:var(--paper2); border-radius:12px; padding:8px 11px; font-size:13.5px; margin:10px 0 2px}

/* the night card */
.row{display:flex; flex-wrap:wrap; gap:2px; margin:4px 0 2px} .row svg{width:58px; height:46px} .row.grey svg{filter:brightness(0) opacity(.22)}
.night h2{margin-top:2px} .night .line{font:italic 15.5px/1.4 var(--serif); color:#55534C; border-top:1.5px dashed #E2D8C6; margin-top:12px; padding-top:10px}
.big{font:800 22px var(--ui)} .lab{font-size:13px; color:var(--soft); margin:10px 0 0 !important}

/* a little paper confetti for a new bird */
.conf{position:fixed; left:50%; top:38%; width:9px; height:13px; border-radius:2px; z-index:30; pointer-events:none; animation:conf 1.25s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0); opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:0}}
@media (prefers-reduced-motion:reduce){ .conf{display:none} #room .tailg{animation:none} }

/* ---- every pop-up fits a phone with no scrolling (Matthew, 2026-11-10) ---- */
.card{padding:14px 14px 12px}
.card h1{font-size:30px}
.how{margin:8px 0 2px} .how li{margin:6px 0; font-size:14.5px; line-height:1.28} .how i{width:30px; height:30px}
.go{margin-top:10px; padding:12px 16px} .ded{margin-top:8px} .lab{margin:7px 0 0 !important}
.foods{grid-template-columns:1fr; gap:6px; margin-top:8px}
.food{flex-direction:row; align-items:center; gap:10px; min-height:0; padding:7px 10px}
.food svg.ic{width:46px; height:35px; flex:none}
.food .ft{display:flex; flex-direction:column; flex:1; min-width:0; margin:0}
.food b{margin-top:0; font-size:15px}
.food .ln{font-size:12.5px; line-height:1.22; margin-top:1px}
.food .heads{display:flex; flex-wrap:nowrap; margin-top:2px; padding-top:0; min-height:0; overflow:hidden} .food .heads svg{width:22px; height:17px; flex:none}
.food .heads em{font-size:11.5px; margin-left:3px}
.newtag{font:600 11px var(--ui); font-style:normal; color:#fff; background:var(--pink); border-radius:7px; padding:1px 6px; margin-left:4px; vertical-align:2px}
@media (min-width:600px){ .foods{grid-template-columns:1fr 1fr} }
@media (max-height:600px){ .food .ln{display:none} .how li{font-size:13.5px} }
.bird .photo{max-width:calc(27vh * 4 / 3); max-width:calc(27dvh * 4 / 3)}
.bird .words{position:absolute; left:8px; top:8px; background:rgba(251,246,236,.94); border-radius:9px; padding:3px 8px; font:italic 600 13.5px var(--serif); color:var(--green); margin:0 !important}
.namerow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.namerow h2{margin:0; font-size:22px} .namerow .latin{margin:1px 0 0 !important; font-size:13.5px}
.namerow .play{width:42px; height:42px}
.tabs{display:flex; gap:4px; margin:8px 0 7px; background:var(--paper2); border-radius:12px; padding:3px}
.tab{flex:1; padding:7px 4px; border-radius:10px; font-weight:700; font-size:14px; color:var(--soft)}
.tab.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(20,24,40,.16)}
.panels{display:grid} .panel{grid-area:1/1; visibility:hidden} .panel.on{visibility:visible}
.panel p{margin:0 0 6px; font-size:14.5px; line-height:1.32} .eats{margin:0}
.album header{position:static; padding:0 0 8px}
.grid{grid-template-columns:repeat(5,1fr); gap:6px}
.cell{min-height:0; height:56px; padding:3px; justify-content:center; border-radius:11px} .cell svg{width:100%; height:100%} .cell.none{font-size:20px}
.hint{margin:9px 0 0; min-height:52px; font-size:13.5px}
@media (min-width:560px){ .grid{grid-template-columns:repeat(8,1fr)} .cell{height:70px} }
.row svg{width:38px; height:30px} .row em{font-style:normal; font-size:12.5px; color:#A39A88; align-self:center; margin-left:4px}
.night .line{font-size:14.5px; margin-top:9px; padding-top:8px}
.food .ft{color:var(--ink)} .food .ln{color:var(--soft)}

/* ---- stars: one for a blur, two for a clear picture, three for the bird's own moment (Matthew, 2026-11-10) ---- */
.stars{color:var(--gold); letter-spacing:1px; font-size:15px; white-space:nowrap} .stars i{font-style:normal; color:#D9CFBC}
.st{color:#B9801F; font-weight:800; white-space:nowrap} #albumBtn .st{font-size:15px; color:#B9801F} #albumBtn .st b{font-size:16px; margin-left:1px}
.grade{display:flex; align-items:baseline; gap:8px; margin-top:8px; background:var(--paper2); border-radius:12px; padding:6px 10px; font-size:13.5px; line-height:1.25}
.grade > b{font-size:15px; flex:none} .grade > span:last-child{color:var(--soft); min-width:0} .grade > span:last-child b{color:var(--ink)}
.grade .stars{font-size:17px; flex:none}
.grade.g3{background:linear-gradient(100deg,#FFF3C9,#FFE3EC 50%,#DDF3FF); box-shadow:inset 0 0 0 1.5px #E7A93B} .grade.g3 > b{color:#B9801F} .grade.g3 > span:last-child{color:#55534C}
.grade.g1 .stars{color:#B9A98E}
.stamp.up{background:var(--gold); box-shadow:0 3px 0 #B9801F}
.ban .stars{display:inline-block; margin-left:6px; font-size:14px; vertical-align:1px; color:var(--gold)} .ban .stars i{color:#D9CFBC} .ban b{display:inline}
.ban span:last-child{display:block}
/* the foil on a three-star photo: a slow rainbow sheen and one glint. plain gradients, no blend modes. */
.photo.foil{border-radius:13px; box-shadow:0 0 0 3px #E7A93B, 0 0 18px rgba(231,169,59,.55)}
.photo.foil::before, .photo.foil::after{content:""; position:absolute; inset:0; border-radius:11px; pointer-events:none}
.photo.foil::before{background:linear-gradient(115deg, rgba(255,60,140,0) 12%, rgba(255,60,140,.26) 26%, rgba(255,196,40,.26) 38%, rgba(70,230,150,.24) 50%, rgba(60,160,255,.26) 62%, rgba(170,90,255,.26) 74%, rgba(255,60,140,0) 88%); background-size:280% 280%; animation:foil 4.2s linear infinite}
.photo.foil::after{background:linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 58%); background-size:300% 300%; animation:foil 2.8s ease-in-out infinite}
@keyframes foil{0%{background-position:100% 0}100%{background-position:0 100%}}
#shutter.last::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:4px solid var(--gold); animation:pulse 1.1s ease-out infinite; pointer-events:none}
/* the album, with stars under every picture */
.album header{align-items:flex-start} .tally{margin:1px 0 0 !important; font-size:13.5px; color:var(--soft)} .tally b{color:var(--ink)} .tally .st{color:#B9801F}
.grid{grid-template-columns:repeat(6,1fr); gap:5px}
.cell{position:relative; height:56px; padding:2px 2px 13px; overflow:hidden} .cell svg{height:100%}
.cell .stars{position:absolute; left:0; right:0; bottom:1px; font-size:10px; letter-spacing:.5px; line-height:1}
.cell.g1 svg{filter:blur(1.3px); opacity:.75}
.cell.g3{box-shadow:inset 0 0 0 2px #E7A93B; background:linear-gradient(120deg,#FFF6D8,#FFE8EF 50%,#E2F4FF)}
.cell.none.last{color:#E3C98F; font-size:18px}
.catcell svg{height:100%}
@media (min-width:560px){ .grid{grid-template-columns:repeat(9,1fr)} .cell{height:74px} .cell .stars{font-size:12px} }
@media (prefers-reduced-motion:reduce){ .photo.foil::before, .photo.foil::after{animation:none} }
@media (max-height:600px){ .bird .photo{max-width:calc(21vh * 4 / 3); max-width:calc(21dvh * 4 / 3)} .grade{margin-top:6px; padding:5px 9px; font-size:13px} .namerow{margin-top:6px} .tabs{margin:6px 0 6px} }
/* a foil CARD (the whole paper shines, the photo can stay clear): pale enough that the ink still reads */
.card.foilcard{position:relative; background:linear-gradient(118deg,#FFF1C2 0%,#FFD9E8 18%,#D6F0FF 36%,#DDFBE6 54%,#FFF1C2 72%,#FFD9E8 90%,#D6F0FF 100%); background-size:320% 320%; animation:rise .34s cubic-bezier(.2,.9,.3,1.1), foilbg 7s linear infinite; box-shadow:0 0 0 3px #E7A93B, 0 0 0 6px rgba(255,255,255,.75), 0 14px 44px rgba(10,14,30,.5), 0 0 34px rgba(231,169,59,.55)}
.card.foilcard::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(118deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 62%); background-size:300% 300%; animation:foil 3.4s ease-in-out infinite}
.card.foilcard > *{position:relative}
.card.foilcard .tabs{background:rgba(255,255,255,.5)} .card.foilcard .grade.g3{background:rgba(255,255,255,.55)}
.card.foilcard .photo{border-radius:13px; box-shadow:0 0 0 3px #E7A93B}
@keyframes foilbg{0%{background-position:0 0}100%{background-position:100% 100%}}
@media (prefers-reduced-motion:reduce){ .card.foilcard, .card.foilcard::before{animation:none} }
/* the shine follows the hand (or the mouse) when it can */
.tilt .card.foilcard{animation:rise .34s cubic-bezier(.2,.9,.3,1.1); background-position:var(--tx,50%) var(--ty,50%)}
.tilt .card.foilcard::before, .tilt .photo.foil::before, .tilt .photo.foil::after{animation:none; background-position:var(--tx,50%) var(--ty,50%)}
.tiltbtn{position:absolute; right:7px; bottom:7px; background:rgba(251,246,236,.95); border-radius:11px; padding:5px 10px; font-weight:800; font-size:13px; color:#B9801F; box-shadow:0 2px 0 #E7A93B; z-index:2}
.bird .words{top:auto; bottom:22px; max-width:calc(100% - 104px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-height:600px){ .bird .words{display:none} .tiltbtn{padding:4px 8px; font-size:12px} }
.bird .photo:not(:has(.tiltbtn)) .words{max-width:calc(100% - 16px)}