:root{
  --bg:#fff0f6; --surface:#ffffff; --input-bg:#ffffff;
  --border:#ffd9ea; --ink:#5b2a44; --muted:#c290ac;
  --accent:#ff4fa8; --accent-soft:#ffe1ef; --brand:#e23a86;
  --sec:#ff7a5c; --sec-soft:#ffe6dd;
  --radius:24px; --radius-sm:16px;
  --shadow:0 12px 30px rgba(255,79,168,.16); --shadow-sm:0 5px 16px rgba(255,79,168,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:"Nunito",system-ui,sans-serif}
body{max-width:520px;margin:0 auto;min-height:100dvh;padding-bottom:120px;
  background-image:radial-gradient(circle at center, rgba(255,120,190,.16) 2px, transparent 2.7px);
  background-size:24px 24px; transition:background-color .4s ease, color .4s ease}
h1,h2,h3,.points,.owned-chip .n,.tier-pill,.price,.dice,.brand,.panel-head,.shelf-label,.btn,.drawer h3,.reception h3{font-family:"Fredoka","Nunito",system-ui,sans-serif}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:16px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== per-screen worlds (pink/white UI, per-page secondary color) ===== */
body:has(#panel-list.active){
  --bg:#ffe7de; --sec:#ff7a5c; --sec-soft:#ffd9cd}
body:has(#panel-board.active){
  --bg:#e7daff; --sec:#9b6dff; --sec-soft:#ddccff;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='46'%20height='46'%3E%3Cpath%20d='M23%207c1%209%206%2014%2015%2016-9%202-14%207-15%2016-1-9-6-14-15-16%209-2%2014-7%2015-16z'%20fill='%23b07cff'%20fill-opacity='0.16'/%3E%3C/svg%3E"); background-size:46px 46px}
body:has(#panel-shop.active){
  --bg:#d2f5e8; --sec:#13bd92; --sec-soft:#c2f0df;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%3E%3Ccircle%20cx='12'%20cy='14'%20r='3'%20fill='%2313bd92'%20fill-opacity='0.45'/%3E%3Crect%20x='40'%20y='9'%20width='9'%20height='4'%20rx='2'%20fill='%23ff7ec3'%20fill-opacity='0.45'%20transform='rotate(25%2044%2011)'/%3E%3Ccircle%20cx='48'%20cy='44'%20r='3'%20fill='%23ffcf3f'%20fill-opacity='0.5'/%3E%3Crect%20x='9'%20y='42'%20width='9'%20height='4'%20rx='2'%20fill='%2373c8ff'%20fill-opacity='0.5'%20transform='rotate(-20%2013%2044)'/%3E%3Ccircle%20cx='30'%20cy='29'%20r='2'%20fill='%23b07cff'%20fill-opacity='0.45'/%3E%3C/svg%3E"); background-size:60px 60px}
body:has(#panel-roll.active){
  --bg:#ffdcec; --sec:#e0407f; --sec-soft:#ffd0e3;
  background-color:#ffdcec;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,140,196,.16) 0 7px, transparent 8px),
    radial-gradient(circle at 72% 64%, rgba(255,120,185,.12) 0 11px, transparent 12px);
  background-size:110px 110px, 86px 86px}

/* ===== header ===== */
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--bg) 74%,transparent);
  padding:18px 18px 12px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600;font-size:1.14rem;color:#e23a86;letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.brand .heart{color:#ff4fa8}
.gear{width:42px;height:42px;border-radius:50%;background:#ffffff;box-shadow:0 5px 16px rgba(255,79,168,.14);
  display:grid;place-items:center;color:#ff4fa8;border:1px solid #ffd9ea;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gear svg{width:22px;height:22px}
.hero-aside{display:flex;align-items:center;gap:11px}
.hero-cal{position:relative;width:46px;height:46px;border-radius:14px;background:#fff;
  display:grid;place-items:center;color:#ff4fa8;border:1px solid #ffd9ea;
  box-shadow:0 5px 14px rgba(255,79,168,.16);transition:transform .12s,filter .15s}
.hero-cal:active{transform:scale(.94)}
.hero-cal:hover{filter:brightness(1.02)}
.hero-cal svg{width:24px;height:24px}
.cal-dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;
  background:#ff2d8e;border:2px solid #fff;display:none}
.cal-dot.show{display:block;animation:dotPulse 1.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

/* ===== hero ===== */
.hero{margin:2px 18px 18px;background:linear-gradient(150deg,#ffffff,#ffe1ef);
  border:1px solid #ffd9ea;border-radius:var(--radius);box-shadow:0 12px 30px rgba(255,79,168,.16);
  padding:20px 22px;display:flex;flex-direction:column;gap:16px;overflow:hidden;position:relative;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hero-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.hero::after{content:"";position:absolute;right:-34px;top:-34px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%);pointer-events:none}
.hero-label{font-size:.8rem;font-weight:800;color:#c290ac;text-transform:lowercase;letter-spacing:.5px}
.points{font-weight:700;font-size:3.4rem;line-height:1;color:#ff4fa8}
.points.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.owned-chip{position:relative;z-index:1;text-align:center;background:#ffe1ef;
  border:1px solid #ffd9ea;border-radius:var(--radius-sm);padding:11px 16px;min-width:74px}
.owned-chip .n{font-weight:700;font-size:1.7rem;color:#ff4fa8;line-height:1}
.owned-chip .t{font-size:.66rem;font-weight:800;color:#c290ac;text-transform:lowercase;letter-spacing:.3px}

/* ===== daily login bonus ===== */
.daily{position:relative;z-index:1}
.daily-claim{width:100%;margin-top:14px;font-family:"Fredoka",sans-serif;font-weight:600;font-size:1rem;color:#fff;padding:13px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0)),#ff4fa8;
  box-shadow:0 6px 15px rgba(255,79,168,.4),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .12s,filter .15s}
.daily-claim:active{transform:scale(.97)}
.daily-claim:hover{filter:brightness(1.05)}
.daily-claim.done{background:#ffe1ef;color:#d98bb4;box-shadow:none;font-weight:700;cursor:default}
.daily-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dday{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.dday .pip{width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  font-family:"Fredoka",sans-serif;font-weight:700;font-size:.82rem;color:#d99cbb;
  background:#fff;border:1.5px solid #ffd9ea;transition:transform .15s}
.dday .lbl{font-size:.54rem;font-weight:800;color:#c9a0b6;text-transform:lowercase;letter-spacing:.2px}
.dday.big .pip{color:#caa05a;border-color:#ffdd9a;background:#fff7e6}
.dday.claimed .pip{background:#ff4fa8;border-color:#ff4fa8;color:#fff;box-shadow:0 3px 7px rgba(255,79,168,.34)}
.dday.claimed.big .pip{background:linear-gradient(180deg,#ffd874,#ff9f3c);border-color:#ff9f3c;color:#fff;box-shadow:0 3px 8px rgba(230,140,30,.4)}
.dday.today .pip{border-color:#ff4fa8;border-style:solid;border-width:2px;animation:pipPulse 1.6s ease-in-out infinite}
.dday.today.big .pip{border-color:#ff9f3c}
@keyframes pipPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.dday .gift{width:15px;height:15px}
.dday .pip svg{width:15px;height:15px}

/* ===== reception ===== */
.reception{margin:0 18px 16px;background:linear-gradient(145deg,var(--surface),var(--accent-soft));
  border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.reception h3{font-size:1.12rem;color:var(--sec);margin-bottom:4px}
.reception p{font-size:.9rem;color:var(--ink);margin-bottom:12px;line-height:1.45}
.reception .row{display:flex;gap:8px}

/* ===== panels ===== */
.panel{padding:0 18px;display:none}
.panel.active{display:block;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen-banner{display:flex;align-items:center;gap:11px;margin:6px 0 2px}
.head-chip{flex-shrink:0;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--sec-soft);color:var(--sec);border:1px solid var(--border)}
.head-chip svg{width:23px;height:23px}
.panel-head{font-size:1.55rem;color:var(--sec);font-weight:600;letter-spacing:.2px}
.panel-sub{font-size:.85rem;color:var(--muted);margin:8px 2px 16px;line-height:1.45;font-weight:600}

/* ===== cards / forms ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px;margin-bottom:14px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.form-card{background:var(--sec-soft)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.field label{font-size:.76rem;font-weight:800;color:var(--sec);text-transform:lowercase;letter-spacing:.3px}
.input,.select{width:100%;padding:13px 15px;background:var(--input-bg);border:1.5px solid var(--sec);
  border-radius:var(--radius-sm);outline:none;transition:border-color .15s,box-shadow .15s;color:var(--ink)}
.input::placeholder{color:var(--muted);opacity:.85}
.input:focus,.select:focus{border-color:var(--sec);box-shadow:0 0 0 4px var(--sec-soft)}
.row{display:flex;gap:10px}.row>*{flex:1}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 18px;border-radius:999px;
  font-weight:600;font-size:1.02rem;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0)),var(--accent);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .12s,filter .15s;width:100%}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(1.04)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn.ghost{background:var(--surface);color:var(--accent);border:1.5px solid var(--border);box-shadow:var(--shadow-sm)}
.btn.mint{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0)),#19c79a}
.btn.small{width:auto;padding:10px 18px;font-size:.92rem}
.btn[disabled]{background:#e9d6e2;color:#b69cae;box-shadow:none;cursor:not-allowed;filter:none}

/* ===== items ===== */
.item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 14px;margin-bottom:11px;box-shadow:var(--shadow-sm)}
.item .body{flex:1;min-width:0}
.item .title{font-weight:800;font-size:1rem;color:var(--ink);word-break:break-word}
.item .meta{font-size:.74rem;color:var(--muted);font-weight:700;margin-top:2px;text-transform:lowercase}
.tier-pill{flex-shrink:0;font-weight:700;font-size:1rem;color:#fff;background:var(--accent);
  border-radius:12px;padding:6px 12px;min-width:44px;text-align:center;box-shadow:var(--shadow-sm)}
.icon-btn{flex-shrink:0;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-size:1.15rem;background:var(--accent-soft);color:var(--accent);border:1px solid var(--border)}
.icon-btn.go{background:var(--accent);color:#fff;border:none}
.icon-btn.del{background:transparent;color:var(--muted);font-size:1rem;border-color:transparent}
.empty{text-align:center;color:var(--muted);font-size:.92rem;padding:28px 10px;line-height:1.5;font-weight:600}
.empty .big{display:none}
.empty::before{content:"";display:block;width:48px;height:48px;margin:0 auto 12px;background:var(--muted);opacity:.65;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208l9-4%209%204-9%204-9-4z'/%3E%3Cpath%20d='M3%208v8l9%204%209-4V8'/%3E%3Cpath%20d='M12%2012v8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208l9-4%209%204-9%204-9-4z'/%3E%3Cpath%20d='M3%208v8l9%204%209-4V8'/%3E%3Cpath%20d='M12%2012v8'/%3E%3C/svg%3E") center/contain no-repeat}
#panel-board .item{border-left:4px solid var(--accent);border-radius:8px var(--radius-sm) var(--radius-sm) 8px;
  background:linear-gradient(90deg,var(--accent-soft),var(--surface) 24%)}
#panel-shop .item{border:1.5px dashed var(--border);background:var(--surface)}

/* ===== roll / gachapon machine ===== */
.gacha-field{display:flex;flex-direction:column;gap:7px;margin:2px 0 2px}
.gacha-field label{font-size:.78rem;font-weight:800;color:var(--sec);text-transform:lowercase;letter-spacing:.3px}
.gacha{position:relative;display:flex;justify-content:center;align-items:flex-end;padding:10px 0 2px;margin:2px 0 8px}
.gacha-glow{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:236px;height:236px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,158,205,.55), transparent 64%);filter:blur(6px);z-index:0;pointer-events:none}

.machine{position:relative;z-index:1;width:172px;height:262px;margin:0 auto}
.globe{position:absolute;left:50%;top:0;transform:translateX(-50%);width:166px;height:122px;border-radius:26px;overflow:hidden;
  border:3px solid rgba(255,255,255,.9);
  background:radial-gradient(circle at 36% 28%, rgba(255,255,255,.5), rgba(255,255,255,.1) 58%, rgba(255,255,255,.03));
  box-shadow:0 10px 22px rgba(214,53,127,.24), inset 0 -10px 18px rgba(214,53,127,.14);z-index:3}
.globe::after{content:"";position:absolute;left:10%;top:9%;width:38%;height:32%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);filter:blur(1px);z-index:4;pointer-events:none}
.cap{position:absolute;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(180deg, var(--cap) 0 47%, rgba(120,30,70,.16) 47% 53%, #fff6fb 53% 100%);
  box-shadow:inset 0 5px 6px rgba(255,255,255,.5), inset 0 -4px 5px rgba(0,0,0,.12)}
.c1{left:10px;top:88px;--cap:#ff8cc4;transform:rotate(-14deg)}
.c2{left:38px;top:90px;--cap:#7ad6ff;transform:rotate(20deg)}
.c3{left:66px;top:88px;--cap:#ffd24d;transform:rotate(-6deg)}
.c4{left:94px;top:90px;--cap:#9be7c4;transform:rotate(28deg)}
.c5{left:122px;top:88px;--cap:#c4a0ff;transform:rotate(-22deg)}
.c6{left:24px;top:66px;--cap:#ff9f86;transform:rotate(12deg)}
.c7{left:52px;top:64px;--cap:#c4a0ff;transform:rotate(-32deg)}
.c8{left:80px;top:66px;--cap:#ff8cc4;transform:rotate(40deg)}
.c9{left:108px;top:64px;--cap:#9be7c4;transform:rotate(-10deg)}
.c10{left:134px;top:66px;--cap:#ffd24d;width:26px;height:26px;transform:rotate(24deg)}
.c11{left:40px;top:44px;--cap:#7ad6ff;transform:rotate(-18deg)}
.c12{left:68px;top:42px;--cap:#ff9f86;transform:rotate(34deg)}
.c13{left:96px;top:44px;--cap:#ff8cc4;transform:rotate(-28deg)}
.c14{left:124px;top:44px;--cap:#c4a0ff;width:26px;height:26px;transform:rotate(16deg)}

.m-body{position:absolute;left:50%;top:118px;transform:translateX(-50%);width:166px;height:104px;border-radius:24px;z-index:2;
  background:linear-gradient(180deg,#ffb3d6,#ff84bd);
  box-shadow:0 14px 26px rgba(214,53,127,.3), inset 0 3px 0 rgba(255,255,255,.55), inset 0 -10px 16px rgba(170,30,90,.2)}
.knob{position:absolute;left:50%;top:24px;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 38% 32%, #ffffff, #ffd6e8);box-shadow:0 4px 8px rgba(150,20,80,.3), inset 0 -3px 5px rgba(170,30,90,.22)}
.knob::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:24px;border-radius:6px;background:#ff5fa0;transform:translate(-50%,-50%)}
.outlet{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:58px;height:30px;border-radius:9px;
  background:linear-gradient(180deg,#a82d6a,#771d4c);box-shadow:inset 0 3px 7px rgba(0,0,0,.45)}
.tray{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;height:42px;border-radius:10px 10px 18px 18px;z-index:1;
  background:linear-gradient(180deg,#ff9ecb,#ef67a7);box-shadow:0 10px 20px rgba(214,53,127,.3), inset 0 4px 7px rgba(170,30,90,.25)}

.burst{position:absolute;left:50%;bottom:30px;transform:translate(-50%,0) scale(.3);width:130px;height:130px;border-radius:50%;
  opacity:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,212,236,.5) 32%, transparent 66%)}

.dice{position:absolute;left:50%;bottom:6px;margin-left:-50px;width:100px;height:100px;border-radius:50%;z-index:3;
  display:grid;place-items:center;text-align:center;padding:0 14px;
  font-weight:700;font-size:1.25rem;line-height:1.02;color:#c8367f;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 44%, rgba(255,255,255,0) 72%);
  opacity:0}
.dice::before{content:"";position:absolute;left:0;top:0;width:100%;height:50%;z-index:3;border-radius:100px 100px 0 0;
  background:linear-gradient(180deg,#ff8cc4,#ef64a4);box-shadow:inset 0 5px 7px rgba(255,255,255,.55), inset 0 -2px 3px rgba(150,20,80,.2)}
.dice::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:50%;z-index:3;border-radius:0 0 100px 100px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,224,240,.94));box-shadow:inset 0 -5px 7px rgba(255,255,255,.6), inset 0 2px 3px rgba(150,20,80,.12)}
.dice.rolling{animation:none;opacity:0}
.dice.pop{opacity:1;animation:reveal 4.2s cubic-bezier(.33,0,.2,1) forwards}
.dice.pop::before{transform:translateY(-58%) rotate(-12deg);animation:lidUp .5s ease .58s both}
.dice.pop::after{transform:translateY(58%) rotate(9deg);animation:lidDown .5s ease .58s both}
.dice.box{font-size:.92rem;color:#a85800}
.dice.box::before{background:linear-gradient(180deg,#ffe08a,#ffb347)}
.machine:has(.dice.rolling) .globe{animation:gShake .3s ease-in-out infinite}
.machine:has(.dice.rolling) .knob{animation:gSpin .72s ease}
.machine:has(.dice.pop) .burst{animation:burst .7s ease .56s both}
@keyframes capBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes reveal{0%{transform:translateY(-130px) scale(.92);opacity:0}4%{opacity:1}
  14%{transform:translateY(7px) scaleX(1.06) scaleY(.92)}18%{transform:translateY(-5px) scaleX(.98) scaleY(1.03)}22%{transform:translateY(0) scale(1)}
  80%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(16px) scale(.88);opacity:0}}
@keyframes lidUp{from{transform:translateY(0) rotate(0)}to{transform:translateY(-58%) rotate(-12deg)}}
@keyframes lidDown{from{transform:translateY(0) rotate(0)}to{transform:translateY(58%) rotate(9deg)}}
@keyframes gShake{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}}
@keyframes gSpin{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(230deg)}}
@keyframes burst{0%{opacity:0;transform:translate(-50%,0) scale(.3)}30%{opacity:.85}100%{opacity:0;transform:translate(-50%,0) scale(1.4)}}
@keyframes vanish{0%{opacity:1}100%{opacity:1}}
.dice-cap{font-size:.9rem;color:var(--muted);min-height:1.2em;font-weight:700;text-align:center}

/* ===== shop labels ===== */
.shelf-label{font-weight:600;font-size:1.02rem;color:var(--sec);margin:20px 2px 10px;display:flex;align-items:center;gap:8px}
.locked{opacity:.62}
.lock-note{font-size:.74rem;color:var(--muted);font-weight:800;margin-top:3px}
.price{flex-shrink:0;font-weight:700;color:var(--accent);font-size:1.18rem;min-width:34px;text-align:right}

/* ===== drawer ===== */
.drawer-bg{position:fixed;inset:0;background:rgba(40,16,32,.4);z-index:40;display:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer-bg.open{display:block}
.drawer{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;
  background:var(--bg);border-radius:28px 28px 0 0;z-index:41;padding:22px 20px 34px;
  box-shadow:0 -10px 36px rgba(40,16,32,.25);display:none}
.drawer.open{display:block;animation:slideup .26s ease}
@keyframes slideup{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.drawer h3{color:var(--accent);margin-bottom:4px;font-size:1.28rem}
.drawer p{font-size:.85rem;color:var(--muted);margin-bottom:14px;line-height:1.45}
.drawer .btn{margin-bottom:10px}
.danger{color:var(--accent)}

/* ===== tabs ===== */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));
  width:calc(100% - 28px);max-width:492px;background:rgba(255,255,255,.86);border:1px solid #ffd9ea;
  border-radius:26px;display:flex;z-index:30;padding:8px;box-shadow:0 12px 34px rgba(120,40,90,.18);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.tab{flex:1;background:none;padding:7px 2px;border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:#c290ac;font-weight:800;font-size:.68rem;transition:color .15s,background .15s;text-transform:lowercase}
.tab .ic{display:grid;place-items:center}
.tab .ic svg{width:24px;height:24px}
.tab.active{color:#ff4fa8;background:#ffe1ef}
.tab.active .ic{transform:scale(1.05)}

.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%) translateY(20px);
  background:#3a1a2c;color:#fff;padding:12px 22px;border-radius:999px;font-weight:800;font-size:.9rem;
  z-index:50;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:var(--shadow);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== rendered line-icon sizing ===== */
.icon-btn svg{width:20px;height:20px}
.btn svg{width:18px;height:18px}
.shelf-label svg{width:18px;height:18px}
.lock-note svg{width:14px;height:14px;flex-shrink:0}

/* ===== log / ledger world ===== */
body:has(#panel-log.active){
  --bg:#dfe6ff; --sec:#5d77e6; --sec-soft:#d2dcff;
  background-color:#dfe6ff;
  background-image:repeating-linear-gradient(0deg, transparent 0 37px, rgba(93,119,230,.07) 37px 38px);
  background-size:auto}

/* ===== board: two columns ===== */
#questList{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#questList .empty{grid-column:1/-1}
.qcard{display:flex;flex-direction:column;gap:6px;min-height:120px;padding:13px;
  background:linear-gradient(160deg,var(--accent-soft),var(--surface) 62%);
  border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:8px var(--radius-sm) var(--radius-sm) 8px;box-shadow:var(--shadow-sm)}
.qcard-top{display:flex;align-items:center;justify-content:space-between}
.qcard-title{font-weight:800;font-size:.98rem;color:var(--ink);line-height:1.25;word-break:break-word}
.qcard-meta{font-size:.7rem;color:var(--muted);font-weight:700;text-transform:lowercase}
.qcard-do{margin-top:auto;width:100%;padding:9px 10px;font-size:.9rem;gap:5px}

/* ===== shop awning ===== */
.awning{position:relative;margin:4px 0 26px;height:62px;border-radius:14px 14px 0 0;
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(90deg,#ff8cc4 0 27px,#e0407f 27px 54px);
  box-shadow:0 9px 18px rgba(170,30,90,.26), inset 0 3px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(120,20,70,.25)}
.awning::before{content:"";position:absolute;left:-5px;right:-5px;top:-7px;height:10px;border-radius:6px;
  background:linear-gradient(180deg,#fff,#ffd9ea);box-shadow:0 3px 6px rgba(170,30,90,.22)}
.awning::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:16px;
  background:repeating-linear-gradient(90deg,#ff8cc4 0 27px,#e0407f 27px 54px);
  -webkit-mask:radial-gradient(circle 13px at 13.5px 0, #000 12px, transparent 12.5px) 0 0/27px 16px repeat-x;
  mask:radial-gradient(circle 13px at 13.5px 0, #000 12px, transparent 12.5px) 0 0/27px 16px repeat-x;
  filter:drop-shadow(0 5px 5px rgba(170,30,90,.22))}
.awning-title{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.42rem;color:#fff;
  text-shadow:0 2px 5px rgba(120,20,70,.55)}
.awning-title svg{width:23px;height:23px}

/* ===== shop: warm-wood shelves ===== */
.cabinet{margin:0 0 14px;padding:14px 13px 4px;border-radius:18px;position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(90,54,24,.07) 0 3px, transparent 3px 13px),
    linear-gradient(180deg,#c9a276,#bd9266 60%,#b0855a);
  border:1px solid rgba(90,54,24,.35);
  box-shadow:var(--shadow-sm), inset 0 2px 0 rgba(255,236,212,.45), inset 0 -3px 10px rgba(70,40,16,.3)}
.cabinet .empty{color:#6e4a26}
.shelf{position:relative;margin-bottom:14px}
.shelf:last-child{margin-bottom:8px}
.shelf::before{content:"";position:absolute;left:6px;right:6px;top:14px;bottom:6px;z-index:0;border-radius:7px;
  background:linear-gradient(180deg,#7c5630,#8a6238 55%,#9a6f43);
  box-shadow:inset 0 8px 16px rgba(40,22,10,.62), inset 0 -3px 7px rgba(40,22,10,.4), inset 2px 0 6px rgba(40,22,10,.35), inset -2px 0 6px rgba(40,22,10,.35)}
.shelf-items{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-items:end;position:relative;z-index:2;padding:8px 9px 0}
.plank{position:relative;z-index:1;height:13px;margin-top:-3px;border-radius:3px 3px 5px 5px;
  background:linear-gradient(180deg,#d8b187 0 5px,#9c6f43 5px);
  box-shadow:0 7px 11px rgba(70,40,16,.4), inset 0 1px 0 rgba(255,240,218,.6)}

.box{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  filter:drop-shadow(0 8px 7px rgba(70,40,16,.34));transition:transform .14s}
.box:active{transform:translateY(-2px) scale(1.015)}
.box-art{position:relative;width:100%;aspect-ratio:1/1.08;border-radius:9px 9px 5px 5px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), inset -7px 0 12px rgba(0,0,0,.13), inset 7px 0 9px rgba(255,255,255,.22)}
.box-art img{width:100%;height:100%;object-fit:cover;display:block}
.box-art .sheen-top{position:absolute;left:0;right:0;top:0;height:30%;
  background:linear-gradient(180deg,rgba(255,255,255,.26),transparent);pointer-events:none;z-index:3}
.box-gen{position:absolute;inset:0;background:var(--gen,#ffb3d6)}
.box-gen .q{position:absolute;top:24%;left:0;right:0;font-family:"Fredoka",sans-serif;font-weight:700;
  font-size:1.9rem;color:rgba(255,255,255,.92);text-shadow:0 2px 5px rgba(0,0,0,.18);text-align:center}
.box-art .nm{position:absolute;left:6px;right:6px;bottom:7px;z-index:3;background:rgba(255,255,255,.95);border-radius:7px;padding:4px 6px;
  font-family:"Fredoka",sans-serif;font-weight:600;font-size:.7rem;line-height:1.12;color:#5b3a4c;text-align:center;
  box-shadow:0 2px 5px rgba(0,0,0,.14);word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.box.locked .box-art .nm{color:#6e4a26;font-style:italic}
.tag{position:absolute;top:-7px;right:-5px;z-index:5;display:flex;align-items:center;gap:2px;
  font-family:"Fredoka",sans-serif;font-weight:700;font-size:.86rem;color:#fff;padding:4px 9px 4px 8px;
  background:var(--accent);border-radius:5px 9px 9px 5px;box-shadow:0 3px 7px rgba(170,30,90,.4);
  border:none;cursor:pointer;transition:transform .12s,filter .15s}
.tag::before{content:"";position:absolute;left:-3px;top:50%;transform:translateY(-50%);width:6px;height:6px;
  border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--accent)}
.tag:active{transform:scale(.93)}
.tag:hover{filter:brightness(1.05)}
.tag.cant{background:#cbb39f;color:#fff7ef;box-shadow:0 2px 5px rgba(70,40,16,.25);cursor:not-allowed}
.tag.cant::before{box-shadow:inset 0 0 0 2px #cbb39f}
.sticker{position:absolute;top:6px;left:6px;z-index:5;font-family:"Fredoka",sans-serif;font-weight:600;
  font-size:.6rem;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.94);color:#5a3a1f;
  box-shadow:0 2px 4px rgba(0,0,0,.18)}
.sticker.out{background:#5a3a1f;color:#fff}
.box.locked .box-art{filter:saturate(.55) brightness(.95)}
.wrap-sheen{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:9px 9px 5px 5px;
  background:linear-gradient(125deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 47%,rgba(255,255,255,0) 56%)}
.lock-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;background:rgba(40,22,12,.72);color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.lock-badge svg{width:18px;height:18px}
.lock-cap{color:#6e4a26;font-style:italic}

/* owned top shelf accent */
.cabinet.owned-cab{background:
    repeating-linear-gradient(90deg, rgba(90,54,24,.07) 0 3px, transparent 3px 13px),
    linear-gradient(180deg,#d7b083,#caa06f 60%,#bd9264)}
.cabinet-label{display:flex;align-items:center;gap:7px;font-family:"Fredoka",sans-serif;font-weight:600;
  font-size:.92rem;color:#4f3115;margin:0 2px 11px;text-shadow:0 1px 0 rgba(255,240,218,.5)}
.cabinet-label svg{width:17px;height:17px}
.box .open-tag{background:#13bd92;box-shadow:0 3px 7px rgba(12,120,90,.4)}
.box .open-tag::before{box-shadow:inset 0 0 0 2px #13bd92}

/* ===== image picker (forms) ===== */
.img-pick{display:flex;align-items:center;gap:12px}
.img-thumb{position:relative;width:62px;height:80px;flex-shrink:0;border-radius:9px;overflow:hidden;
  background:var(--accent-soft);border:1.5px dashed var(--border);display:grid;place-items:center;color:var(--muted)}
.img-thumb img{width:100%;height:100%;object-fit:cover}
.img-thumb svg{width:24px;height:24px}
.img-pick-btns{display:flex;flex-direction:column;gap:7px;flex:1}
.img-pick-btns .btn.small{width:100%}

/* ===== crop modal ===== */
.crop-bg{position:fixed;inset:0;background:rgba(30,12,22,.66);z-index:70;display:none;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.crop-bg.open{display:block}
.crop-sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;z-index:71;
  background:var(--bg);border-radius:28px 28px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));display:none;
  box-shadow:0 -10px 36px rgba(40,16,32,.3)}
.crop-sheet.open{display:block;animation:slideup .26s ease}
.crop-sheet h3{font-family:"Fredoka",sans-serif;color:var(--accent);font-size:1.18rem;margin-bottom:3px;text-align:center}
.crop-sheet p{font-size:.8rem;color:var(--muted);text-align:center;margin-bottom:13px;font-weight:600}
.crop-stage{position:relative;width:min(270px,74vw);aspect-ratio:3/4;margin:0 auto 8px;border-radius:12px;overflow:hidden;
  background:#2a1a22;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), 0 8px 22px rgba(0,0,0,.3)}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{position:absolute;left:0;top:0;transform-origin:0 0}
.crop-stage .grid{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px) 0 0/100% 33.33%,
             linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px) 0 0/33.33% 100%}
.crop-zoom{display:flex;align-items:center;gap:10px;width:min(270px,74vw);margin:6px auto 14px;color:var(--muted)}
.crop-zoom input{flex:1;accent-color:var(--accent)}
.crop-zoom svg{width:18px;height:18px;flex-shrink:0}
.crop-actions{display:flex;gap:10px;width:min(300px,82vw);margin:0 auto}
.crop-actions .btn{margin:0}

/* ===== log items ===== */
#logList{display:flex;flex-direction:column;gap:9px}
.log-item{display:flex;align-items:center;gap:11px;padding:12px 13px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.log-dot{flex-shrink:0;width:11px;height:11px;border-radius:50%;background:var(--accent)}
.log-dot.task{background:#ff6fb5}.log-dot.quest{background:#8b5cff}.log-dot.roll{background:#c4a0ff}
.log-dot.buy{background:#e0407f}.log-dot.box{background:#ffb347}.log-dot.open{background:#13bd92}
.log-dot.daily{background:#ffcf3f}
.log-body{flex:1;min-width:0}
.log-text{font-weight:800;font-size:.92rem;color:var(--ink);line-height:1.25;word-break:break-word}
.log-time{font-size:.69rem;color:var(--muted);font-weight:700;margin-top:1px}
.log-delta{flex-shrink:0;font-family:"Fredoka","Nunito",sans-serif;font-weight:700;font-size:1.05rem}
.log-delta.up{color:#16a06f}.log-delta.down{color:#e0407f}.log-delta.zero{color:var(--muted)}

/* ===== confirm modal ===== */
.confirm-bg{position:fixed;inset:0;background:rgba(40,16,32,.42);z-index:60;display:none;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.confirm-bg.open{display:block}
.confirm{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);width:min(340px,86vw);z-index:61;display:none;
  background:#fff;border-radius:24px;padding:24px 22px 18px;box-shadow:0 24px 60px rgba(40,16,32,.34);text-align:center}
.confirm.open{display:block;animation:popin .22s ease}
@keyframes popin{from{opacity:0;transform:translate(-50%,-40%) scale(.94)}to{opacity:1;transform:translate(-50%,-46%) scale(1)}}
.confirm h3{font-family:"Fredoka","Nunito",sans-serif;color:#e0407f;font-size:1.22rem;margin-bottom:6px}
.confirm p{font-size:.88rem;color:#a07c8d;line-height:1.45;margin-bottom:16px}
.confirm .row{display:flex;gap:10px}
.confirm .btn{margin:0}

/* ===== long-press menu + edit sheet ===== */
[data-menu]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
[data-menu]:active{transform:scale(.985);transition:transform .1s}
#actionMenu .btn{display:flex;align-items:center;justify-content:center;gap:8px}
#actionMenu .btn svg{width:18px;height:18px;flex-shrink:0}
#actionMenu .btn.del-act{color:#e0407f}
#editSheet .field{margin-bottom:11px}
#editSheet .row .field{margin-bottom:0}

/* ===== color swatches ===== */
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.swatch{width:32px;height:32px;border-radius:50%;background:var(--sw);cursor:pointer;
  border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.08);transition:transform .12s}
.swatch:active{transform:scale(.9)}
.swatch.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent);transform:scale(1.06)}
.swatch.default{background:linear-gradient(135deg,#ff8cc4,#73c8ff,#b07cff)}

/* ===== task drag handle + reordering ===== */
.drag-handle{flex-shrink:0;width:30px;align-self:stretch;display:grid;place-items:center;color:#d9acc4;
  cursor:grab;touch-action:none;margin:-13px 0 -13px -4px}
.drag-handle:active{cursor:grabbing}
.drag-handle svg{width:20px;height:20px;pointer-events:none}
.item.dragging{opacity:.92;box-shadow:0 14px 28px rgba(255,79,168,.32);transform:scale(1.02);
  position:relative;z-index:5;cursor:grabbing}
#taskList.is-dragging .item{transition:transform .16s ease}
#taskList.is-dragging .item.dragging{transition:none}
.item .tier-pill{background:var(--pill,var(--accent))}
#panel-board .qcard{border-left-color:var(--pill,var(--accent))}
.qcard .tier-pill{background:var(--pill,var(--accent))}