/* Lily character viewer — proportions follow the approved reference (941×1672); cream / teal / warm brown */
:root{
  --cream:#FDF3E7; --cream-2:#FFF8EE;
  --teal:#50ADB4; --brown:#805239; --line:#EBD9C4;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  font-size:calc(min(100vw, 460px) / 24.375);   /* 1rem = 16px on a 390px-wide phone */
  background:var(--cream); -webkit-text-size-adjust:100%;
}
html,body{margin:0;height:100%}
body{
  font-family: ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Varela Round","Nunito","Trebuchet MS",system-ui,sans-serif;
  color:var(--brown); overscroll-behavior:none; -webkit-user-select:none; user-select:none;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,.stage:focus-visible{outline:3px solid #3a7f86;outline-offset:3px;border-radius:1rem}
ul,dl,dd,h1,h2,p{margin:0;padding:0}
ul{list-style:none}

.ic{display:inline-block;width:1.25rem;height:1.25rem;flex:none;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat}

.app{
  position:relative; max-width:460px; margin:0 auto; height:100dvh; min-height:33rem;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(11rem,1fr) auto; overflow:hidden auto;
  padding-bottom:calc(var(--safe-b) + .4rem);
  background:var(--cream);
}

/* ---------- top bar (shorter band + large soft wave) ---------- */
.topbar{
  position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:.5rem;
  padding:calc(var(--safe-t) + .15rem) calc(.6rem + var(--safe-r)) .3rem calc(.5rem + var(--safe-l));
  background:linear-gradient(#86C3C5,#78BABD);
  margin-bottom:.7rem;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-.78rem; height:.8rem; pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 50% 0, #78BABD 0 97%, transparent 100%) 50% 0/6.2rem 100% repeat-x;
  filter:drop-shadow(0 .1rem .1rem rgba(60,120,125,.16));
}
.sprite-btn{position:relative;width:max(44px,2.5rem);height:max(44px,2.5rem);display:grid;place-items:center;
  transition:transform .12s ease, filter .12s ease; border-radius:50%}
.sprite-btn img{width:3rem;max-width:none;height:auto;pointer-events:none}   /* artwork looks like the picture; the tap area stays >= 44px */
.sprite-btn:active{transform:scale(.93);filter:brightness(.97)}
.topbar-right{display:flex;gap:.15rem;justify-content:flex-end}
.title-pill{
  font-size:1.1rem; font-weight:700; letter-spacing:.02em; color:#fff; text-shadow:0 .06rem 0 rgba(0,90,100,.25);
  padding:.3rem 2.1rem .34rem; border-radius:99rem;
  background:linear-gradient(#58AAB0,#459DA5); box-shadow:inset 0 .12rem .2rem rgba(255,255,255,.25), 0 .12rem .25rem rgba(40,100,108,.25);
}

/* ---------- stage ---------- */
.stage{position:relative; min-height:11rem; overflow:hidden; outline:none; touch-action:pan-y; cursor:grab}
.stage.dragging{cursor:grabbing}
.stage-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ground{position:absolute;left:20%;right:21%;bottom:0;height:12%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(220,196,164,.6), rgba(220,196,164,.3) 55%, transparent 72%)}
.char-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}   /* the drawing code centres the character inside this box */
.side{position:absolute;top:52%;transform:translateY(-50%);width:3.7rem;height:3.7rem;z-index:2}
.side img{width:100%}
.side:active{transform:translateY(-50%) scale(.93)}
.side.prev{left:calc(.1rem + var(--safe-l))} .side.next{right:calc(.1rem + var(--safe-r))}
.chip-360{
  position:absolute;right:calc(.9rem + var(--safe-r));bottom:.9rem;z-index:2;min-height:1.75rem;
  display:flex;align-items:center;gap:.25rem;padding:.2rem .7rem;border-radius:99rem;
  font-weight:800;font-size:.82rem;color:var(--brown);background:linear-gradient(#FFFDF8,#FBEFE0);
  border:.1rem solid #EBD9C4;box-shadow:0 .18rem .35rem rgba(150,110,70,.18);
}
.chip-360::after{content:"";position:absolute;inset:-.55rem -.4rem}   /* keeps the tap area >= 44px */
.chip-360 svg{width:1.15rem;height:1.15rem}
.chip-360[aria-disabled="true"]{opacity:.85}
.chip-360.on{background:linear-gradient(#FFE88F,#FFD361);border-color:#F2BE46}
.toast{position:absolute;left:50%;top:.5rem;transform:translate(-50%,-.6rem);opacity:0;pointer-events:none;
  background:rgba(128,82,57,.92);color:#fff8ee;font-weight:700;font-size:.85rem;padding:.4rem .9rem;border-radius:99rem;
  transition:opacity .2s, transform .2s;white-space:nowrap;z-index:4}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- info ---------- */
.info{display:flex;flex-direction:column;gap:.42rem;padding:.15rem calc(.65rem + var(--safe-r)) 0 calc(.65rem + var(--safe-l))}
.name-plate{align-self:center;min-width:12.4rem;text-align:center;padding:.08rem 2rem .2rem;border-radius:99rem;
  background:linear-gradient(#FFFDF8,#FBEFE0);border:.1rem solid #EBD9C4;box-shadow:0 .18rem .3rem rgba(150,110,70,.2), inset 0 .1rem 0 #fff}
.name-plate h2{font-size:1.5rem;line-height:1.2;font-weight:800;letter-spacing:.01em;color:var(--brown)}
.tags{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:1.55rem;min-width:5.6rem;padding:.1rem .8rem;border-radius:99rem;font-weight:500;font-size:.8rem;
  box-shadow:0 .14rem .22rem rgba(120,80,50,.22), inset 0 .08rem 0 rgba(255,255,255,.45)}
.tag .ic{width:1.05rem;height:1.05rem}
.tag-cup{width:1.15rem;height:1.15rem;object-fit:contain}
.btn-check{width:1.35rem;height:1.35rem;object-fit:contain}
.tag-pink{color:#fff;background:linear-gradient(#FF9F99,#F27F7E)}
.tag-teal{color:#fff;background:linear-gradient(#8ECDD1,#6DB8BF)}
.tag-yellow{color:var(--brown);background:linear-gradient(#FFDA70,#F8C546)}

.profile{position:relative;margin-top:.8rem}
.profile-tab{position:absolute;left:.1rem;top:-.85rem;z-index:1;display:inline-flex;align-items:center;gap:.35rem;
  padding:.18rem 1rem .22rem .7rem;border-radius:99rem;color:#fff;font-weight:700;font-size:.85rem;
  background:linear-gradient(#58AAB0,#459DA5);box-shadow:0 .1rem .18rem rgba(40,100,108,.25)}
.profile-tab .ic{width:1rem;height:1rem}
.profile-text{padding:1rem 1rem .55rem 1.5rem;border-radius:1rem;background:var(--cream-2);border:.12rem solid var(--line);
  font-size:.78rem;line-height:1.36;font-weight:500;color:var(--brown);box-shadow:inset 0 .1rem 0 #fff}

.details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:1rem;background:var(--cream-2);border:.12rem solid var(--line);
  padding:.25rem .45rem;box-shadow:inset 0 .1rem 0 #fff}
.d-row{display:grid;grid-template-columns:1.3rem minmax(0,1fr) auto;align-items:center;column-gap:.28rem;padding:.3rem .15rem;min-width:0}
.d-row .dic{width:1.4rem;height:1.4rem;object-fit:contain}
.d-row:nth-child(odd){border-right:.1rem solid var(--line);margin-right:.3rem;padding-right:.35rem}
.d-row:nth-child(-n+2){border-bottom:.1rem solid var(--line)}
dt{font-size:.64rem;font-weight:500;color:var(--brown);min-width:0;line-height:1.1;white-space:nowrap}
.chip{font-size:.64rem;font-weight:700;padding:.14rem .42rem;border-radius:99rem;white-space:nowrap}
.chip-mint{background:#DCEFEC;color:#2f8f97}
.chip-lav{background:#E7E4F6;color:#6a4fc4}

.cta{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:1rem;margin-top:.2rem;padding:0 1.15rem}
.btn{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.75rem;border-radius:99rem;font-size:1.1rem;font-weight:800;
  transition:transform .12s ease, box-shadow .12s ease}
.btn .ic{width:1.3rem;height:1.3rem}
.btn-select{color:var(--brown);background:linear-gradient(#FFE27D,#FFC93C);box-shadow:0 .26rem 0 #E0911A, 0 .45rem .55rem rgba(200,140,40,.3), inset 0 .12rem 0 rgba(255,255,255,.55)}
.btn-preview{color:var(--brown);background:linear-gradient(#FFFDF8,#FBF1E4);border:.16rem solid #5DB7BD;box-shadow:0 .22rem 0 #4fa3a9, 0 .42rem .5rem rgba(60,130,135,.25), inset 0 .1rem 0 #fff}
.btn-preview .ic{color:#3a9fa6}
.btn:active{transform:translateY(.2rem)}
.btn-select:active{box-shadow:0 .08rem 0 #E2A21B, 0 .2rem .3rem rgba(200,140,40,.3)}
.btn-preview:active{box-shadow:0 .04rem 0 #4fa3a9}

.rail{margin:.25rem -.3rem 0;border-radius:1.4rem;padding:.4rem .5rem;background:linear-gradient(#66AEB1,#52A4AA);
  box-shadow:0 .25rem .5rem rgba(50,120,126,.28), inset 0 .12rem 0 rgba(255,255,255,.25)}
.rail-list{display:flex;gap:.42rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:.2rem .2rem .3rem;justify-content:safe center}
.rail-list::-webkit-scrollbar{display:none}
.rail-list li{flex:none;scroll-snap-align:center}
.card{position:relative;width:3.95rem;height:3.95rem;display:block}
.card.selected{transform:scale(1.07)}
.card-bg{position:absolute;left:50%;top:50%;width:4.75rem;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
.card .thumb{position:absolute;left:50%;top:50%;width:3.2rem;height:3.2rem;object-fit:contain;transform:translate(-50%,-52%);pointer-events:none}
.card .sil{position:absolute;left:14%;top:8%;width:68%;height:68%;pointer-events:none;
  background:linear-gradient(#D5C6B1,#C2B09A);   /* one flat warm tan, picked to sit on the cream card */
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.card.locked{cursor:not-allowed}
.card.selected:focus-visible,.card:focus-visible{outline-offset:1px}

/* ---------- landscape: stage left, details right ---------- */
@media (orientation:landscape) and (max-height:520px){
  html{font-size:calc(min(100vh, 460px) / 24.375)}
  .app{max-width:none;height:100dvh;min-height:0;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto 1fr;
    column-gap:.2rem;padding-bottom:var(--safe-b)}
  .topbar{grid-column:1/-1;padding-top:calc(var(--safe-t) + .3rem);padding-bottom:.4rem;margin-bottom:.7rem;
    padding-left:calc(.75rem + var(--safe-l));padding-right:calc(.75rem + var(--safe-r))}
  .sprite-btn{width:2.75rem;height:2.75rem}
  .stage{grid-column:1;grid-row:2;min-height:0;margin-left:var(--safe-l)}
  .info{grid-column:2;grid-row:2;overflow-y:auto;padding-bottom:1rem;padding-top:.9rem;-webkit-overflow-scrolling:touch}
  .side{top:48%}
  .side.prev{left:.1rem} .side.next{right:.1rem}   /* the stage already sits inside the safe area */
  .chip-360{right:.9rem}
  .cta{position:sticky;bottom:0;z-index:2;padding:.5rem .35rem .3rem;background:linear-gradient(rgba(253,243,231,0),var(--cream) 32%)}
  .rail{margin-bottom:.4rem}
  .name-plate h2{font-size:1.4rem}
}


/* ---------- motion ---------- */
.pop{animation:pop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.22)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.shake{animation:shake .38s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-.25rem)}40%{transform:translateX(.25rem)}60%{transform:translateX(-.15rem)}80%{transform:translateX(.1rem)}}
.nudge-l{animation:nudgeL .35s ease}.nudge-r{animation:nudgeR .35s ease}
@keyframes nudgeL{0%,100%{transform:translateY(-50%)}40%{transform:translate(-.35rem,-50%) scale(1.08)}}
@keyframes nudgeR{0%,100%{transform:translateY(-50%)}40%{transform:translate(.35rem,-50%) scale(1.08)}}
#btnFav[aria-pressed="true"] img{animation:beat 1.5s ease-in-out infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(.98)}45%{transform:scale(1.07)}}
.char-canvas{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -.3rem}}
.ground{animation:shadow 3.4s ease-in-out infinite}
@keyframes shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.93);opacity:.85}}
.btn-select{animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.btn-select:active{animation:none}
.chip-360 svg{transition:transform .5s}
.chip-360:active svg{transform:rotate(180deg)}
.topbar,.stage{animation:fadeIn .5s both}
.info>*{animation:rise .55s cubic-bezier(.2,1.2,.4,1) both}
.info>:nth-child(1){animation-delay:.05s}.info>:nth-child(2){animation-delay:.12s}.info>:nth-child(3){animation-delay:.19s}
.info>:nth-child(4){animation-delay:.26s}.info>:nth-child(5){animation-delay:.33s}.info>:nth-child(6){animation-delay:.4s}
.rail-list li{animation:rise .5s cubic-bezier(.2,1.3,.4,1) both}
.rail-list li:nth-child(1){animation-delay:.45s}.rail-list li:nth-child(2){animation-delay:.5s}.rail-list li:nth-child(3){animation-delay:.55s}
.rail-list li:nth-child(4){animation-delay:.6s}.rail-list li:nth-child(5){animation-delay:.65s}
@keyframes rise{from{opacity:0;transform:translateY(.9rem) scale(.96)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.d-row dt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-row .chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}