/* 齊齊的鋼琴樂園 — 新版「貼紙風」(from the cute sticker design kit).
   Active only while <html class="look-cute">, set by look.js; without that class the old look is untouched.
   Loaded after restyle.css. Every rule starts with html.look-cute, so it outranks the old !important rules. */

@font-face { font-family: "Huninn App"; src: url("fonts/huninn-app.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Huninn Full"; src: url("fonts/huninn-full.woff2") format("woff2"); font-display: swap; }
/* Mali's long dash and bullet look odd in song names (P.30—小步舞曲) and the ••• button: 粉圓 draws those two */
@font-face { font-family: "Huninn Marks"; src: url("fonts/huninn-app.woff2") format("woff2"); font-display: swap; unicode-range: U+2014, U+2022; }

/* ---------- tokens ---------- */
html.look-cute {
  --k-ink: #1e1e24;
  --k-mut: #55555c;
  --k-pri: #f6c445; --k-soft: #ffe7a3; --k-deep: #7a5600; --k-ground: #fdf3dc;
  --k-raised: color-mix(in srgb, var(--k-soft) 35%, #fff);
  --k-rule: color-mix(in srgb, var(--k-soft) 70%, #e9e6df);
  --k-stroke: 2px; --k-lip: 5px;
  --k-card: 22px; --k-tile: 14px;

  /* the old layer's own names, pointed at the sticker palette */
  --ground: var(--k-ground);
  --surface: var(--k-raised);
  --raised: #fff;
  --border: var(--k-ink);
  --rule: var(--k-rule);
  --control: var(--k-ink);
  --text: var(--k-ink);
  --muted: var(--k-mut);
  --accent-ink: var(--k-deep);
  --accent-pale: var(--k-soft);
  --primary: var(--k-pri);
  /* Mali takes every Latin letter and digit; 中文 falls through to 粉圓 */
  /* full-width ，。、：；！？ in Noto Sans TC (the "TC Punct" face from restyle.css), centred the Taiwanese way */
  --font: "TC Punct", "Huninn Marks", "Mali", "Huninn App", "Huninn Full", "GenJyuu App", "GenJyuu Full", system-ui, sans-serif;
  --k-title: "TC Punct", "GenJyuu App", "GenJyuu Full", "Huninn App", sans-serif;
  --serif: var(--k-title);
}
html.look-cute[data-kpal="mint"]      { --k-pri: #6dd3a0; --k-soft: #c6eed8; --k-deep: #0f5c3b; --k-ground: #e7f5ec; }
html.look-cute[data-kpal="sky"]       { --k-pri: #7ebbf2; --k-soft: #cde3f8; --k-deep: #1b4f82; --k-ground: #e5f0fb; }
html.look-cute[data-kpal="butter"]    { --k-pri: #f6c445; --k-soft: #ffe7a3; --k-deep: #7a5600; --k-ground: #fdf3dc; }
html.look-cute[data-kpal="grape"]     { --k-pri: #b49cf5; --k-soft: #ddd3fa; --k-deep: #4b2f96; --k-ground: #efeafb; }
html.look-cute[data-kpal="tangerine"] { --k-pri: #f8ae6b; --k-soft: #fcddbe; --k-deep: #8a4510; --k-ground: #fdeedf; }

html.look-cute, html.look-cute body { background: var(--k-ground) !important; color: var(--k-ink) !important; font-family: var(--font) !important; transition: background-color .25s; }
html.look-cute body * { font-family: inherit !important; }
html.look-cute :is(button, input, select, textarea) { font-family: var(--font) !important; }

/* ---------- the sticker card ---------- */
html.look-cute :is(section.summary, .streak-card, .trip-home, .home-dashboard, .active-songs, .completed-songs, .restore-daily, .inline-month-calendar) {
  background: #fff !important;
  border: var(--k-stroke) solid var(--k-ink) !important;
  border-bottom-width: var(--k-lip) !important;
  border-radius: var(--k-card) !important;
  box-shadow: none !important;
  padding: 18px 18px !important;
}
/* the one highlighted card on the home screen: today's goal and the stars */
html.look-cute section.summary { background: var(--k-soft) !important; }

/* ---------- greeting and the top bar ---------- */
html.look-cute .greet h1 { font-family: var(--k-title) !important; font-weight: 700 !important; font-size: 26px !important; letter-spacing: .01em; }
html.look-cute .greet p { color: var(--k-mut) !important; font-weight: 700; }
html.look-cute .greet p b { color: var(--k-deep) !important; font-weight: 700 !important; }
html.look-cute .cloudbar .cloudstatus { color: var(--k-mut) !important; }

/* ---------- pill buttons: white with an ink outline; the main action filled with the palette colour, ink text ---------- */
html.look-cute :is(#cloudLogin, .top-tools button, .compact-today-btn, .compact-calendar-btn, #next.circle, #tripMore, #dashboardDetail, section.summary #editDailyGoal, .restore-daily button) {
  background: #fff !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; box-shadow: none !important;
  border-radius: 999px !important; font-weight: 700 !important;
}
html.look-cute :is(#cloudLogin, .top-tools button, .compact-today-btn, #tripMore, #dashboardDetail, .restore-daily button):hover { background: var(--k-raised) !important; }
html.look-cute .top-tools #focusBtn { background: #fff !important; color: var(--k-ink) !important; }
html.look-cute.piano-focus .top-tools #focusBtn, html.look-cute .compact-calendar-btn[aria-expanded="true"] { background: var(--k-pri) !important; color: var(--k-ink) !important; }
html.look-cute .top-tools .focus-info { color: var(--k-ink) !important; font-weight: 700 !important; }
html.look-cute .compact-month-static { font-weight: 700 !important; }

/* ---------- week strip: little letter tiles ---------- */
html.look-cute .weekstrip .weekday {
  background: #fff !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; border-bottom-width: 4px !important;
  border-radius: var(--k-tile) !important; box-shadow: none !important; font-weight: 700 !important;
}
html.look-cute .weekstrip .weekday.active { background: var(--k-pri) !important; color: var(--k-ink) !important; }
html.look-cute .weekstrip .weekday.today:not(.active) { background: var(--k-soft) !important; box-shadow: none !important; }
html.look-cute .compact-week-btn { color: var(--k-ink) !important; }
html.look-cute .inline-month-day { background: #fff !important; border: 1.5px solid var(--k-ink) !important; color: var(--k-ink) !important; font-weight: 700 !important; }
html.look-cute .inline-month-day.active { background: var(--k-pri) !important; color: var(--k-ink) !important; }
html.look-cute .inline-month-day.today:not(.active) { background: var(--k-soft) !important; box-shadow: none !important; }
html.look-cute .inline-month-weekday { color: var(--k-mut) !important; font-weight: 700 !important; }
html.look-cute .inline-month-calendar select { border: var(--k-stroke) solid var(--k-ink) !important; }

/* ---------- section heads ---------- */
html.look-cute .fold-head { font-weight: 700 !important; font-size: 16px !important; color: var(--k-ink) !important; }
html.look-cute .fold-head .fold-peek { color: var(--k-mut) !important; font-weight: 700 !important; }
html.look-cute :is(.fold-head .fold-chev, .section-chevron) {
  background: #fff !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; box-shadow: none !important;
}
html.look-cute .fold.closed .fold-head {
  background: #fff !important;
  border: var(--k-stroke) solid var(--k-ink) !important; border-bottom-width: var(--k-lip) !important;
  border-radius: 18px !important;
}
html.look-cute :is(.active-songs h3, .section-toggle) { font-weight: 700 !important; font-size: 16px !important; color: var(--k-ink) !important; }

/* ---------- today's goal ---------- */
html.look-cute section.summary .sub { font-weight: 700 !important; }
html.look-cute :is(section.summary .secondary, #progressText) { color: var(--k-ink) !important; font-weight: 700 !important; }
html.look-cute section.summary .progress {
  height: 14px !important; background: #fff !important;
  border: var(--k-stroke) solid var(--k-ink) !important; border-radius: 999px !important;
}
html.look-cute section.summary .progress .fill { background: var(--k-pri) !important; border-radius: 999px !important; }
html.look-cute #stars.stars { font-family: var(--font) !important; font-weight: 700 !important; color: var(--k-ink) !important; }
html.look-cute #stars.stars:hover, html.look-cute #stars.stars:active { background: #fff !important; }
html.look-cute #stars.stars::after { color: var(--k-deep) !important; font-weight: 700; }
html.look-cute :is(.g-star, .g-star-off, .songstars) { color: var(--k-deep) !important; }

/* ---------- songs: each one a small sticker in its own colour ---------- */
html.look-cute .active-songs .song {
  background: color-mix(in srgb, var(--card-accent, #ffc1d6) 28%, #fff) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; border-bottom-width: 4px !important;
  border-radius: 18px !important; box-shadow: none !important;
  padding: 14px !important; margin: 0 0 10px !important;
}
html.look-cute .songicon {
  background: #fff !important; border: var(--k-stroke) solid var(--k-ink) !important; border-radius: 50% !important;
}
html.look-cute .songname { font-weight: 700 !important; font-size: 17px !important; color: var(--k-ink) !important; }
html.look-cute .song .meta { color: var(--k-mut) !important; font-weight: 700 !important; }
html.look-cute #songs .song button.start {
  background: var(--k-pri) !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; border-radius: 999px !important;
  font-weight: 700 !important; font-size: 15px !important; height: 42px;
}
html.look-cute #songs .song button.start:hover { background: var(--k-soft) !important; }
html.look-cute :is(#songs .song button.check, #songs .song button.daily-skip, #songs .active-songs .song button.check, #songs .active-songs .song button.daily-skip) {
  background: #fff !important; color: var(--k-ink) !important; border: var(--k-stroke) solid var(--k-ink) !important;
}
html.look-cute .completed-song {
  background: #fff !important; border: 0 !important; border-top: 1px solid var(--k-rule) !important;
  border-radius: 0 !important; margin: 0 !important; padding: 12px 2px !important;
}
html.look-cute .completed-song:first-child { border-top: 0 !important; }
html.look-cute .completed-song strong { font-weight: 700 !important; }
html.look-cute .completed-song strong .g-check { color: var(--k-deep) !important; }
html.look-cute .completed-song button { background: #fff !important; border: var(--k-stroke) solid var(--k-ink) !important; color: var(--k-ink) !important; }
html.look-cute .empty { color: var(--k-mut) !important; font-weight: 700 !important; }

/* ---------- streak ---------- */
html.look-cute :is(.streak-num, .streak-num b, .streak-msg, .streak-msg b) { color: var(--k-ink) !important; font-weight: 700 !important; }
html.look-cute .streak-label { color: var(--k-mut) !important; font-weight: 700 !important; }
html.look-cute .streak-best { background: var(--k-soft) !important; border: var(--k-stroke) solid var(--k-ink) !important; color: var(--k-ink) !important; font-weight: 700 !important; }
html.look-cute .sw i { background: #fff !important; border: var(--k-stroke) solid var(--k-ink) !important; }
html.look-cute .sw.on i { background: var(--k-pri) !important; border-color: var(--k-ink) !important; color: var(--k-ink) !important; }
html.look-cute .sw.on i .g-check { color: var(--k-ink) !important; }
html.look-cute .sw span { color: var(--k-mut) !important; font-weight: 700 !important; }
html.look-cute .sw.today span { color: var(--k-ink) !important; }
html.look-cute .streak-bar { height: 14px !important; background: #fff !important; border: var(--k-stroke) solid var(--k-ink) !important; border-radius: 999px !important; overflow: hidden; }
html.look-cute .streak-bar i { background: var(--k-pri) !important; border-radius: 999px !important; }

/* ---------- shinkansen trip ---------- */
html.look-cute .tm-how { background: var(--k-raised) !important; border: 1.5px solid var(--k-ink) !important; }
html.look-cute .tm-steps span { background: #fff !important; border: 1.5px solid var(--k-ink) !important; font-weight: 700 !important; }
/* the ➜ between the steps is a plain arrow, not a box */
html.look-cute .tm-steps span:nth-child(even) { background: none !important; border: 0 !important; padding: 0 !important; min-width: 0 !important; }
/* on a computer or iPad there is room: 「🏁 到終點送 50 ⭐」 stays on one line */
@media (min-width: 700px) {
  html.look-cute .tm-steps span { white-space: nowrap; }
  html.look-cute .tm-steps span br { display: none; }
}
html.look-cute .tm-route span {
  background: var(--k-soft) !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; font-weight: 700 !important;
}
html.look-cute .tm-map > rect { fill: var(--k-raised) !important; }
html.look-cute .tm-map > path:nth-of-type(1) { stroke: var(--k-ink) !important; }
html.look-cute .tm-map .tm-done { stroke: var(--k-deep) !important; }
html.look-cute .tm-node circle { fill: #fff !important; stroke: var(--k-ink) !important; }
html.look-cute .tm-node.past circle { fill: var(--k-pri) !important; stroke: var(--k-ink) !important; }
html.look-cute .tm-node.here circle { fill: #fff !important; stroke: var(--k-ink) !important; stroke-width: 4px !important; }
html.look-cute .tm-name { fill: var(--k-ink) !important; font-weight: 700 !important; }
html.look-cute .tm-home-foot b { color: var(--k-deep) !important; }
html.look-cute .tm-past { border: var(--k-stroke) solid var(--k-ink) !important; border-bottom-width: 4px !important; }
html.look-cute .tm-past-lap { color: #fff; }
html.look-cute .tm-past-stops span { background: var(--k-raised) !important; }

/* ---------- practice totals ---------- */
html.look-cute .home-stats { background: var(--k-raised) !important; border: 1.5px solid var(--k-ink); }
html.look-cute .home-stat + .home-stat { border-left: 1.5px solid var(--k-ink) !important; }
html.look-cute .home-stat strong { color: var(--k-ink) !important; font-weight: 700 !important; }
html.look-cute :is(.home-stat small, .home-stat span, .home-chart-title, .home-chart-value, .home-chart-day b) { color: var(--k-mut) !important; font-weight: 700 !important; }
html.look-cute .home-week-chart { background: var(--k-raised) !important; border: 1.5px solid var(--k-ink); }
html.look-cute .home-chart-bar-area { border-bottom: var(--k-stroke) solid var(--k-ink) !important; }
html.look-cute .home-chart-bar { background: var(--k-soft) !important; border: 1.5px solid var(--k-ink) !important; border-bottom: 0 !important; border-radius: 6px 6px 0 0 !important; }
html.look-cute .home-chart-day.active .home-chart-bar { background: var(--k-pri) !important; }
html.look-cute :is(.home-chart-day.active .home-chart-value, .home-chart-day.active b) { color: var(--k-ink) !important; }

/* ---------- bottom bar ---------- */
html.look-cute footer.footer { background: var(--k-ground) !important; }
html.look-cute footer.footer button.primary {
  background: #fff !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; border-bottom-width: 4px !important;
  font-weight: 700 !important;
}
html.look-cute footer.footer button.round {
  background: #fff !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; border-bottom-width: 4px !important;
  border-radius: 16px !important; font-weight: 700 !important;
}
html.look-cute footer.footer :is(button.primary, button.round):hover { background: var(--k-raised) !important; }

/* ---------- sheets: menus, dialogs, the timer, the gacha ---------- */
html.look-cute .overlay { background: rgba(30, 30, 36, .4) !important; }
html.look-cute .sheet {
  background: var(--k-ground) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; border-bottom: 0 !important;
  box-shadow: none !important;
}
html.look-cute .sheet h2 { font-family: var(--k-title) !important; font-weight: 700 !important; font-size: 24px !important; color: var(--k-ink) !important; }
html.look-cute .sheet h3 { font-weight: 700 !important; }
html.look-cute :is(.sheet p, .sheet .secondary) { color: var(--k-mut) !important; }
html.look-cute .sheet button {
  background: #fff !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important; box-shadow: none !important; font-weight: 700 !important;
}
html.look-cute .sheet button:hover { background: var(--k-raised) !important; }
html.look-cute :is(.sheet button.main, .sheet .actions button:last-child, #finish, .reward-ok) {
  background: var(--k-pri) !important; color: var(--k-ink) !important;
  border: var(--k-stroke) solid var(--k-ink) !important;
}
/* picked days in a calendar, chosen options, and the gacha's one big button */
html.look-cute :is(.sheet button.picked, .sheet button.active, .sheet button[aria-pressed="true"]) { background: var(--k-pri) !important; color: var(--k-ink) !important; }
html.look-cute #carSpin { background: var(--k-pri) !important; color: var(--k-ink) !important; border-bottom-width: 5px !important; }
html.look-cute #carSpin:disabled { background: #fff !important; color: var(--k-mut) !important; }
html.look-cute :is(.sheet input, .sheet select, .sheet textarea) {
  background: #fff !important; border: var(--k-stroke) solid var(--k-ink) !important; color: var(--k-ink) !important;
}
html.look-cute :is(.sheet input, .sheet select, .sheet textarea):focus { outline: 3px solid var(--k-pri) !important; outline-offset: 1px; }
html.look-cute :is(.sheet .historyitem, .sheet .detail-panel, .sheet .season-section) {
  background: #fff !important; border: var(--k-stroke) solid var(--k-ink) !important; border-radius: var(--k-tile) !important;
}
html.look-cute :is(.sheet .timer, #clock) { font-weight: 700 !important; }
html.look-cute .sheet details.metro { background: #fff !important; border: var(--k-stroke) solid var(--k-ink) !important; box-shadow: none !important; }
html.look-cute .round-progress { color: var(--k-deep) !important; font-weight: 700 !important; }
html.look-cute .main-menu button { border-radius: 16px !important; border-bottom-width: 4px !important; }
html.look-cute .reward-box { background: var(--k-ground) !important; border: var(--k-stroke) solid var(--k-ink) !important; border-bottom-width: var(--k-lip) !important; }
html.look-cute .car-tile { border: var(--k-stroke) solid var(--k-ink) !important; box-shadow: none !important; }

/* ---------- focus ---------- */
html.look-cute :focus-visible { outline: 3px solid var(--k-pri) !important; outline-offset: 2px; }

/* ---------- the 畫面風格 sheet itself (shown in both looks) ---------- */
.look-seg { display: flex; gap: 6px; padding: 5px; margin: 6px 0 18px; border-radius: 999px; background: var(--raised, #fff); }
.look-seg button { flex: 1; height: 46px; font-size: 16px !important; }
.look-seg button[aria-pressed="true"] { background: var(--primary) !important; color: #fff !important; }
html.look-cute .look-seg { border: var(--k-stroke) solid var(--k-ink); background: #fff; }
html.look-cute .look-seg button { border: 0 !important; background: none !important; color: var(--k-mut) !important; }
html.look-cute .look-seg button[aria-pressed="true"] { background: var(--k-pri) !important; color: var(--k-ink) !important; }
.look-pals h3 { margin: 0 0 10px; }
.look-pal-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.look-pal-list button { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 14px 6px 6px !important; font-size: 15px !important; }
.look-pal-list button i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #1e1e24; flex: none; }
html.look-cute .look-pal-list button[aria-pressed="true"] { background: var(--k-soft) !important; }

@media (min-width: 1024px) {
  html.look-cute .greet h1 { font-size: 32px !important; }
}
@media (prefers-reduced-motion: reduce) { html.look-cute, html.look-cute body { transition: none; } }