/* ============================================================
   amaaru's arcade v4 — pink, soft, sticker-shop energy
   ============================================================ */

:root{
  --p0:#fff8fb; --p1:#ffeef7; --p2:#ffd9e9; --p3:#ffbcd8;
  --p4:#ff92c2; --p5:#ff5c9e; --p6:#e6417d; --p7:#b62a5e;
  --cream:#fff9f0; --gold:#e0a92c; --capp:#c99a6b;
  --ink:#4a2538; --ink2:#8a6076;
  --shadow:0 8px 22px rgba(214,60,116,.16);
  --shadow-lg:0 16px 40px rgba(214,60,116,.26);
  --r-lg:26px; --r-md:18px; --r-sm:13px;
  --tab-h:64px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --font:'Baloo 2',ui-rounded,system-ui,sans-serif;
  --display:'Pacifico',cursive;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* keep the hidden attribute winning over any display rule below */
[hidden]{display:none!important}

html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font);color:var(--ink);
  background:linear-gradient(168deg,var(--p1) 0%,var(--p2) 46%,var(--cream) 100%);
  background-attachment:fixed;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea{font-family:inherit;color:inherit}
button{border:none;background:none;cursor:pointer}

/* floating hearts ------------------------------------------------ */
#hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#hearts span{position:absolute;bottom:-10vh;animation:rise linear infinite;opacity:0;will-change:transform}
@keyframes rise{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:0}
  12%{opacity:.55}
  88%{opacity:.5}
  100%{transform:translate3d(14px,-118vh,0) rotate(320deg);opacity:0}
}

/* app shell ------------------------------------------------------ */
.shell{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}
#main{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-t) + 12px) 16px 26px;
}
#main::-webkit-scrollbar{display:none}
.screen{display:none;max-width:520px;margin:0 auto;width:100%}
.screen.is-on{display:block;animation:fadeUp .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* hero ----------------------------------------------------------- */
.hero{display:flex;align-items:center;gap:12px;padding:6px 2px 14px}
.hero-mascot{width:104px;height:104px;object-fit:contain;flex:none;
  filter:drop-shadow(0 8px 14px rgba(214,60,116,.22));animation:sway 5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}
.hero-text{min-width:0}
h1{font-family:var(--display);color:var(--p6);font-size:clamp(1.6rem,7.4vw,2.1rem);
  line-height:1.32;text-shadow:0 2px 0 #fff;letter-spacing:.2px}
.hero-sub{font-weight:700;color:var(--ink2);font-size:.9rem;margin-top:2px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{background:#fff;border:2px solid var(--p3);color:var(--p6);border-radius:999px;
  padding:3px 11px;font-size:.76rem;font-weight:800;box-shadow:0 3px 9px rgba(214,60,116,.1)}
.chip-streak{background:linear-gradient(135deg,#fff2c9,#ffd9e9);border-color:#f3ca6a;color:#a8641c}

/* daily challenge ------------------------------------------------ */
.daily{display:block;width:100%;text-align:left;background:linear-gradient(135deg,var(--p5),var(--p6));
  color:#fff;border-radius:var(--r-md);padding:13px 15px;box-shadow:var(--shadow);
  margin-bottom:6px;transition:transform .18s}
.daily:active{transform:scale(.98)}
.daily-flag{display:block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.86}
.daily-body{display:block;font-size:1rem;font-weight:800;margin-top:3px}
.daily-state{display:block;font-size:.78rem;font-weight:700;opacity:.92;margin-top:2px}
.daily.done{background:linear-gradient(135deg,#7fce8f,#4faf6a)}

/* section titles ------------------------------------------------- */
.sect{font-family:var(--display);color:var(--p6);font-size:1.15rem;font-weight:400;
  margin:22px 0 10px 4px;text-shadow:0 2px 0 #fff}
.sect-top{margin-top:6px}
.lede{color:var(--ink2);font-weight:700;font-size:.85rem;margin:-4px 0 12px 4px}
.tinyprint{text-align:center;color:var(--ink2);font-weight:700;font-size:.76rem;
  opacity:.78;padding:22px 0 6px}

/* game grid ------------------------------------------------------ */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{position:relative;background:#fff;border:3px solid var(--p3);border-radius:var(--r-lg);
  padding:14px 11px 13px;display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.9),transparent 60%);pointer-events:none}
.card:active{transform:scale(.955);box-shadow:0 4px 12px rgba(214,60,116,.18)}
.card:focus-visible{outline:3px solid var(--p5);outline-offset:2px}
.card canvas{width:62px;height:62px;display:block;margin-bottom:6px}
.card h3{font-family:var(--display);color:var(--p6);font-size:.98rem;font-weight:400;line-height:1.25}
.card p{font-size:.74rem;font-weight:700;color:var(--ink2);line-height:1.32;margin-top:3px}
.crown{position:absolute;top:7px;right:7px;background:linear-gradient(135deg,#fff0c2,#ffd9e9);
  border:2px solid #f0c765;border-radius:999px;padding:1px 8px;font-size:.68rem;font-weight:800;color:#9a5f14;z-index:2}
.newtag{position:absolute;top:7px;left:7px;background:var(--p5);color:#fff;border-radius:999px;
  padding:1px 8px;font-size:.66rem;font-weight:800;z-index:2;letter-spacing:.04em}

/* stats ---------------------------------------------------------- */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:#fff;border:3px solid var(--p3);border-radius:var(--r-md);padding:12px 6px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.5rem;color:var(--p6);line-height:1.1}
.stat small{font-size:.7rem;font-weight:700;color:var(--ink2)}
.scores{display:flex;flex-direction:column;gap:8px}
.score{display:flex;align-items:center;gap:10px;background:#fff;border:2.5px solid var(--p2);
  border-radius:var(--r-sm);padding:9px 12px;box-shadow:0 4px 12px rgba(214,60,116,.09)}
.score canvas{width:34px;height:34px;flex:none}
.score .nm{flex:1;font-weight:800;font-size:.88rem}
.score .vl{font-weight:800;color:var(--p6);font-size:1rem}
.score .vl.none{color:var(--ink2);opacity:.6;font-size:.8rem}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.badge{background:#fff;border:2.5px solid var(--p2);border-radius:var(--r-sm);padding:11px 6px;text-align:center;
  box-shadow:0 4px 12px rgba(214,60,116,.09)}
.badge i{display:block;font-size:1.55rem;font-style:normal;line-height:1.2}
.badge b{display:block;font-size:.72rem;margin-top:3px;line-height:1.2}
.badge small{display:block;font-size:.64rem;font-weight:700;color:var(--ink2);line-height:1.25;margin-top:2px}
.badge.locked{opacity:.5;filter:grayscale(.75)}

/* notes ---------------------------------------------------------- */
.notegrid{display:flex;flex-direction:column;gap:9px}
.note{background:#fff;border:2.5px solid var(--p3);border-left:7px solid var(--p4);
  border-radius:var(--r-sm);padding:12px 14px;font-weight:700;font-size:.93rem;line-height:1.44;
  box-shadow:0 5px 14px rgba(214,60,116,.1)}
.note.locked{background:rgba(255,255,255,.55);border-color:var(--p2);border-left-color:var(--p2);
  color:var(--ink2);font-weight:800;font-size:.82rem}
.note em{font-style:normal;display:block;font-family:var(--display);color:var(--p6);font-size:.78rem;margin-top:6px}

/* settings ------------------------------------------------------- */
.card-list{display:flex;flex-direction:column;gap:9px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;
  border:2.5px solid var(--p2);border-radius:var(--r-sm);padding:12px 14px;box-shadow:0 4px 12px rgba(214,60,116,.09)}
.row.col{flex-direction:column;align-items:stretch;gap:10px}
.row b{display:block;font-size:.92rem}
.row small{display:block;font-size:.76rem;font-weight:700;color:var(--ink2);line-height:1.35;margin-top:2px}
textarea{border:2.5px solid var(--p2);border-radius:var(--r-sm);padding:9px 11px;font-size:.84rem;
  font-weight:700;resize:vertical;background:var(--p0);width:100%}
textarea:focus{outline:none;border-color:var(--p4)}

.sw{appearance:none;-webkit-appearance:none;width:52px;height:31px;border-radius:999px;
  background:var(--p2);position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .2s}
.sw:checked{background:var(--p5)}
.sw:checked::after{transform:translateX(21px)}

/* buttons -------------------------------------------------------- */
.btn{min-height:50px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,var(--p5),var(--p6));
  color:#fff;font-weight:800;font-size:.98rem;box-shadow:0 7px 18px rgba(214,60,116,.34);
  transition:transform .16s}
.btn:active{transform:scale(.96)}
.btn-ghost{background:#fff;color:var(--p6);border:2.5px solid var(--p4);box-shadow:0 5px 14px rgba(214,60,116,.16)}
.btn-sm{min-height:42px;padding:0 16px;font-size:.85rem}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.btnrow.center{justify-content:center;margin-top:14px}
.linkbtn{margin-top:12px;font-weight:800;font-size:.84rem;color:var(--p6);text-decoration:underline;
  text-decoration-color:var(--p3);text-underline-offset:3px}

/* tab bar -------------------------------------------------------- */
#tabs{display:flex;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-top:2.5px solid var(--p2);padding-bottom:var(--safe-b);flex:none}
.tab{flex:1;min-height:var(--tab-h);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:.68rem;font-weight:800;color:var(--ink2);transition:color .18s}
.tab span{font-size:1.28rem;line-height:1;transition:transform .2s}
.tab.is-on{color:var(--p6)}
.tab.is-on span{transform:translateY(-2px) scale(1.14)}

/* game screen ---------------------------------------------------- */
#play{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;
  background:linear-gradient(168deg,var(--p1),var(--p2) 60%,var(--cream));
  padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
#play.is-on{display:flex}
.ghead{width:100%;max-width:520px;display:flex;align-items:center;gap:10px;padding:10px 14px 6px;flex:none}
#gTitle{flex:1;text-align:center;font-family:var(--display);color:var(--p6);font-size:1.16rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:46px;height:46px;flex:none;border-radius:50%;background:#fff;border:2.5px solid var(--p3);
  color:var(--p6);font-size:1.1rem;font-weight:800;box-shadow:0 4px 12px rgba(214,60,116,.16);
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.iconbtn:active{transform:scale(.92)}
.canvaswrap{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:0 8px 8px;min-height:0}
.gfoot{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.72);border:2.5px solid var(--p2);
  border-radius:999px;padding:7px 16px 7px 8px;box-shadow:0 4px 12px rgba(214,60,116,.1);max-width:94%}
.gfoot img{width:38px;height:38px;flex:none;object-fit:contain}
.gfoot span{font-size:.78rem;font-weight:800;color:var(--ink2);line-height:1.3}
.gfoot b{display:block;color:var(--p6);font-size:.84rem}
canvas#cv{display:block;border-radius:24px;border:4px solid var(--p4);background:var(--p1);
  box-shadow:var(--shadow-lg);touch-action:none;-webkit-user-select:none;user-select:none}

/* result --------------------------------------------------------- */
#result{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 18px) 22px calc(var(--safe-b) + 18px);
  background:rgba(255,214,232,.965);backdrop-filter:blur(6px);overflow-y:auto}
#result.is-on{display:flex;animation:pop .3s cubic-bezier(.2,1.1,.3,1) both}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.res-inner{text-align:center;max-width:360px;width:100%}
#resImg{width:62%;max-width:210px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:24px;
  border:5px solid #fff;box-shadow:var(--shadow-lg);animation:bob 2.4s ease-in-out infinite;background:var(--p2)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
#resTitle{font-family:var(--display);color:var(--p6);font-size:1.6rem;font-weight:400;margin:12px 0 4px;line-height:1.25}
#resScore{font-weight:800;font-size:1rem;color:var(--ink)}
.newbest{display:inline-block;margin-top:9px;background:linear-gradient(135deg,#ffe9a8,#ffc7de);
  border:2.5px solid #f0c765;color:#93590f;border-radius:999px;padding:5px 14px;font-weight:800;font-size:.85rem;
  animation:glow 1.5s ease-in-out infinite}
@keyframes glow{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.lovenote{margin-top:13px;background:#fff;border:2.5px solid var(--p3);border-radius:var(--r-md);
  padding:12px 15px;font-weight:700;font-size:.9rem;line-height:1.45;box-shadow:var(--shadow);text-align:left}
.lovenote em{font-style:normal;display:block;font-family:var(--display);color:var(--p6);font-size:.78rem;margin-top:6px}

/* confetti + toast ---------------------------------------------- */
.confetti{position:fixed;top:-8vh;z-index:200;pointer-events:none;animation:fall linear forwards;will-change:transform}
@keyframes fall{to{transform:translate3d(0,116vh,0) rotate(420deg);opacity:.65}}
#toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--safe-b) + 18px);transform:translate(-50%,20px);
  background:var(--ink);color:#fff;font-weight:800;font-size:.85rem;padding:11px 18px;border-radius:999px;
  z-index:300;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center}
#toast.is-on{opacity:.96;transform:translate(-50%,0)}

/* reduced motion ------------------------------------------------- */
body.no-motion #hearts{display:none}
body.no-motion .hero-mascot,
body.no-motion #resImg,
body.no-motion .newbest{animation:none}
body.no-motion .screen.is-on{animation:none}
@media (prefers-reduced-motion:reduce){
  #hearts{display:none}
  .hero-mascot,#resImg,.newbest,.screen.is-on{animation:none!important}
}

/* very short screens -------------------------------------------- */
@media (max-height:620px){
  .hero-mascot{width:76px;height:76px}
  .ghead{padding:6px 12px 4px}
  .iconbtn{width:40px;height:40px}
  #gTitle{font-size:1rem}
}