/* ============================================================================
   SUNRISE — "bonus" theme
   Neo-brutalism / risograph. Kraft paper, thick outlines, hard offset
   shadows, large grotesque, stickers/badges, halftone, slight rotations.
   CSS only over canonical markup. No JS, no bespoke DOM.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Risograph palette */
  --paper:#f5f1e6;       /* kraft paper */
  --cobalt:#2b4cf0;      /* cobalt */
  --alarm:#ff5436;       /* scarlet-orange */
  --yellow:#ffd23f;      /* yellow */
  --ink:#14110d;         /* ink */
  --paper-2:#ece5d2;     /* paper shadow */
  --paper-3:#e2d9c0;     /* recess */

  /* Dark plate */
  --ink-soft:#241f17;

  /* Outlines and shadows */
  --bw:3px;              /* base outline */
  --bw-thick:4px;        /* thick outline */
  --bw-fat:5px;          /* very thick outline */
  --sh:6px;              /* shadow offset */
  --sh-lg:9px;           /* large offset */
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:9px 9px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-color:var(--cobalt);

  /* Fonts — Google + system fallback */
  --display:'Archivo Black','Arial Black',system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Rounding — nearly square sticker corners */
  --r:4px;
  --r-pill:999px;

  /* Halftone dots */
  --dot:rgba(20,17,13,.16);

  /* Default track accent */
  --acc:var(--cobalt);

  /* mobile HUD + card-map baseline tokens (theme guide §5) */
  --accent:var(--yellow);
}

/* ----------------------------------------------------------------------------
   BASE
   ---------------------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background-color:var(--paper);
  /* Risograph background: large halftone + slight grid "grain" */
  background-image:
    radial-gradient(var(--dot) 1.6px, transparent 1.7px),
    radial-gradient(var(--dot) 1.6px, transparent 1.7px);
  background-size:22px 22px, 22px 22px;
  background-position:0 0, 11px 11px;
  line-height:1.45;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

::selection{ background:var(--yellow); color:var(--ink); }

a{ color:var(--cobalt); }

b{ font-weight:700; }

/* ----------------------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------------------- */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:18px clamp(16px,4vw,40px);
  background:var(--alarm);
  border-bottom:var(--bw-fat) solid var(--ink);
  position:relative;
  z-index:10;
  box-shadow:0 var(--sh) 0 var(--ink);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.brand-mark{
  font-family:var(--display);
  font-size:26px;
  line-height:1;
  color:var(--ink);
  background:var(--yellow);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--r);
  padding:8px 10px;
  box-shadow:var(--shadow-sm);
  transform:rotate(-4deg);
  display:inline-block;
}

.brand-name{
  font-family:var(--display);
  font-size:clamp(22px,3.4vw,34px);
  letter-spacing:.04em;
  color:var(--paper);
  text-transform:uppercase;
  /* double offset outline like screen printing */
  text-shadow:3px 3px 0 var(--ink), 6px 6px 0 var(--cobalt);
}

.brand-sub{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  color:var(--ink);
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-pill);
  padding:5px 12px;
  box-shadow:var(--shadow-sm);
  transform:rotate(2deg);
  white-space:nowrap;
}

.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.field{
  display:inline-flex;
}

select{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  background:var(--paper);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--r);
  padding:9px 30px 9px 12px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% + 1px),
    calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition:transform .08s ease, box-shadow .08s ease;
  max-width:42vw;
}
select:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
select:focus{ outline:none; background-color:var(--yellow); box-shadow:6px 6px 0 var(--ink); }
select option{ background:var(--paper); color:var(--ink); }

/* Buttons */
.btn{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ink);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--r);
  padding:10px 14px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
  line-height:1;
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

.btn.ghost{
  color:var(--ink);
  background:var(--paper);
}
.btn.ghost:hover{ background:var(--yellow); }

/* keep icon buttons in the toolbar (emoji) readable */
#cardMapBtn, #trophiesBtn, #exportBtn, #importBtn{ font-size:16px; padding:8px 11px; }

/* ----------------------------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------------------------- */
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:clamp(20px,4vw,40px) clamp(16px,4vw,40px) 24px;
}

/* SUMMARY */
.dash{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-bottom:32px;
}

.stat-card{
  position:relative;
  background:var(--paper);
  border:var(--bw-fat) solid var(--ink);
  border-radius:var(--r);
  padding:20px;
  box-shadow:var(--shadow);
  --acc:var(--cobalt);
}
/* Corner sticker on each card */
.stat-card::before{
  content:"";
  position:absolute;
  top:-2px; right:-2px;
  width:34px; height:34px;
  background:var(--acc);
  border-left:var(--bw) solid var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  border-radius:0 var(--r) 0 12px;
}
.stat-card[data-kind=progress]{ --acc:var(--cobalt); }
.stat-card[data-kind=streak]{ --acc:var(--alarm); }
.stat-card[data-kind=phases]{ --acc:var(--yellow); }
.stat-card[data-kind=tracks]{ --acc:var(--ink); }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--yellow);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-pill);
  padding:4px 11px;
  display:inline-block;
  margin-bottom:16px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-1.5deg);
}

.muted{
  color:#6b6353;
  font-family:var(--mono);
  font-size:13px;
}

/* Progress ring (conic, uses --p) */
.ring{
  --p:0;
  width:148px; height:148px;
  margin:6px auto 14px;
  border-radius:50%;
  border:var(--bw-fat) solid var(--ink);
  background:
    conic-gradient(var(--cobalt) calc(var(--p) * 1%), var(--paper-3) 0);
  display:grid;
  place-items:center;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.ring::after{
  /* halftone ring over the remainder */
  content:"";
  position:absolute; inset:6px;
  border-radius:50%;
  background:radial-gradient(rgba(20,17,13,.10) 1px, transparent 1.4px);
  background-size:7px 7px;
  pointer-events:none;
}
.ring > div{
  width:96px; height:96px;
  border-radius:50%;
  background:var(--paper);
  border:var(--bw-thick) solid var(--ink);
  display:grid;
  place-content:center;
  text-align:center;
  z-index:1;
}
.ring b{
  display:block;
  font-family:var(--display);
  font-size:30px;
  line-height:1;
  color:var(--ink);
}
.ring small{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  color:var(--cobalt);
  margin-top:3px;
}

/* Streak */
.flame{
  font-size:46px;
  line-height:1;
  text-align:center;
  filter:drop-shadow(3px 3px 0 var(--ink));
  animation:flicker 1.6s ease-in-out infinite alternate;
}
@keyframes flicker{
  from{ transform:scale(1) rotate(-2deg); }
  to{ transform:scale(1.08) rotate(2deg); }
}
.streak-num{
  font-family:var(--display);
  font-size:64px;
  line-height:.95;
  text-align:center;
  color:var(--alarm);
  text-shadow:4px 4px 0 var(--ink);
  margin:6px 0 2px;
}

/* Phase/track progress rows */
.prow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:14px 0 6px;
}
.lbl{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--body);
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}
.lbl > i{
  width:13px; height:13px;
  border:var(--bw) solid var(--ink);
  border-radius:50%;
  background:var(--acc,var(--cobalt));
  display:inline-block;
  flex:none;
}
.val{
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
  color:var(--ink);
  background:var(--paper-2);
  border:2px solid var(--ink);
  border-radius:var(--r);
  padding:2px 8px;
}

/* Bars */
.bar{
  position:relative;
  height:16px;
  background:var(--paper-3);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-pill);
  overflow:hidden;
  margin-bottom:4px;
}
.bar > i{
  display:block;
  height:100%;
  width:0;
  background:var(--cobalt);
  background-image:repeating-linear-gradient(
    45deg, transparent 0 6px, rgba(20,17,13,.18) 6px 8px);
  border-right:2px solid var(--ink);
  transition:width .5s cubic-bezier(.2,.9,.25,1);
}

.stat-sub{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  color:#6b6353;
  margin-top:8px;
  letter-spacing:.04em;
}

/* ----------------------------------------------------------------------------
   TRACK COLORS — each has its own accent
   ---------------------------------------------------------------------------- */
[data-track="dsa"]{      --acc:#2b4cf0; }  /* cobalt */
[data-track="js"]{       --acc:#ffd23f; }  /* yellow */
[data-track="ts"]{       --acc:#2b6fff; }  /* blue */
[data-track="node"]{     --acc:#2faa4f; }  /* green */
[data-track="sysdesign"]{--acc:#ff5436; }  /* scarlet-orange */
[data-track="patterns"]{ --acc:#a24bff; }  /* purple */
[data-track="distsys"]{  --acc:#00a6a6; }  /* teal */
[data-track="db"]{       --acc:#c8782d; }  /* ochre */
[data-track="cs"]{       --acc:#e2247f; }  /* magenta */
[data-track="rest"]{     --acc:#6b6353; }  /* gray */

/* accent in track rows and bars */
.prow[data-track] .lbl > i{ background:var(--acc); }
.bar[data-track] > i{ background:var(--acc); }

/* track-row card accent inherits via --acc on .prow/.bar */

/* ----------------------------------------------------------------------------
   DAY
   ---------------------------------------------------------------------------- */
.day-rail{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:14px;
}

.day-nav{
  font-family:var(--display);
  font-size:24px;
  line-height:1;
  color:var(--ink);
  background:var(--yellow);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--r);
  width:50px; height:50px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:18px;
  display:grid;
  place-items:center;
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.day-nav:hover:not(:disabled){ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:var(--alarm); color:var(--paper); }
.day-nav:active:not(:disabled){ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.day-nav:disabled{
  opacity:.4;
  cursor:not-allowed;
  background:var(--paper-3);
  box-shadow:2px 2px 0 var(--ink);
}

.today-wrap{ min-width:0; }

/* Day card — large sticker */
.today{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  background:var(--paper);
  border:var(--bw-fat) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  --acc:var(--cobalt);
}

/* side strip with vertical label — colored with track accent */
.today-side{
  background:var(--acc);
  border-right:var(--bw-fat) solid var(--ink);
  display:grid;
  place-items:center;
  padding:14px 6px;
  background-image:radial-gradient(rgba(20,17,13,.18) 1.4px, transparent 1.6px);
  background-size:9px 9px;
}
.vert{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper);
  text-shadow:2px 2px 0 var(--ink);
  white-space:nowrap;
}

.today-main{ padding:clamp(18px,3vw,30px); min-width:0; }

/* track pill */
.trackpill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink);
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-pill);
  padding:5px 12px 5px 5px;
  box-shadow:3px 3px 0 var(--ink);
  margin-bottom:14px;
}
.trackpill .k{
  display:inline-grid;
  place-items:center;
  width:26px; height:26px;
  font-family:var(--display);
  font-size:13px;
  color:var(--paper);
  background:var(--acc,var(--cobalt));
  border:var(--bw) solid var(--ink);
  border-radius:50%;
}
.today[data-track] .trackpill .k{ background:var(--acc); }

.today-title{
  font-family:var(--display);
  font-size:clamp(22px,3.6vw,32px);
  line-height:1.08;
  color:var(--ink);
  margin:6px 0 18px;
}

/* warm-up */
.warm{
  font-size:15px;
  color:var(--ink);
  background:var(--yellow);
  border:var(--bw) solid var(--ink);
  border-left:var(--bw-fat) solid var(--ink);
  border-radius:var(--r);
  padding:12px 14px;
  margin:0 0 20px;
  box-shadow:var(--shadow-sm);
}
.warm .muted{ font-weight:700; color:var(--ink); text-transform:uppercase; font-size:12px; letter-spacing:.06em; }
.warm-i{
  font-size:18px;
  margin-right:4px;
}

/* ----------------------------------------------------------------------------
   TASKS
   ---------------------------------------------------------------------------- */
.tasks{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:22px;
}

.task{
  user-select:text;            /* task text is selectable */
  -webkit-user-select:text;
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  padding:12px 14px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
  /* appears with delay (animation-delay set inline) */
  animation:taskIn .35s both cubic-bezier(.2,.9,.25,1);
}
@keyframes taskIn{
  from{ opacity:0; transform:translateX(-12px); }
  to{ opacity:1; transform:translateX(0); }
}
.task:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:#fffdf4; }

/* custom checkbox box */
.box{
  flex:none;
  width:24px; height:24px;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  box-shadow:2px 2px 0 var(--ink);
  position:relative;
  margin-top:1px;
  transition:background .12s ease, transform .08s ease;
}
.task:hover .box{ background:var(--yellow); }
.task input:focus-visible + .box{ outline:3px solid var(--cobalt); outline-offset:2px; }

/* checkmark */
.box::after{
  content:"";
  position:absolute;
  left:7px; top:2px;
  width:6px; height:12px;
  border:solid var(--paper);
  border-width:0 3px 3px 0;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .14s cubic-bezier(.2,1.6,.4,1);
}

.task-text{
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
  padding-top:1px;
}

/* completed task */
.task.done{
  background:var(--paper-2);
}
.task.done .box{
  background:var(--acc,var(--cobalt));
}
.task.done .box::after{ transform:rotate(45deg) scale(1); }
.task.done .task-text{
  text-decoration:line-through;
  text-decoration-thickness:2px;
  color:#8a8270;
}
/* checkbox accent by day track */
.today[data-track] .task.done .box{ background:var(--acc); }

/* ----------------------------------------------------------------------------
   REFLECTION
   ---------------------------------------------------------------------------- */
.reflect-block{
  margin:0 0 18px;
  background:var(--paper-2);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  padding:14px;
  box-shadow:var(--shadow-sm);
}
.reflect-label{
  display:block;
  font-family:var(--body);
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  margin-bottom:10px;
}
.kanji{
  display:inline-grid;
  place-items:center;
  width:24px; height:24px;
  font-family:var(--display);
  font-size:13px;
  color:var(--paper);
  background:var(--ink);
  border:2px solid var(--ink);
  border-radius:var(--r);
  margin-right:6px;
  vertical-align:-5px;
}
.reflect-label .kanji{ background:var(--acc,var(--cobalt)); }
.today[data-track] .reflect-label .kanji{ background:var(--acc); }

textarea{
  display:block;
  width:100%;
  min-height:84px;
  font-family:var(--mono);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  padding:11px 13px;
  resize:vertical;
  box-shadow:inset 2px 2px 0 rgba(20,17,13,.08);
  transition:box-shadow .1s ease, background .12s ease;
}
textarea::placeholder{ color:#9a9280; }
textarea:focus{
  outline:none;
  background:#fffdf4;
  box-shadow:var(--shadow-sm);
}

/* ----------------------------------------------------------------------------
   RESOURCES
   ---------------------------------------------------------------------------- */
.res-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.chip{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink);
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-pill);
  padding:6px 13px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.chip:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:var(--yellow); }
.chip b{ color:var(--cobalt); }

/* "next day" CTA */
.next-day-cta{
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--cobalt);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--r);
  padding:13px 20px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
  margin-top:6px;
}
.next-day-cta:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); background:var(--alarm); }
.next-day-cta:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }

/* comeback banner */
#comeback{
  font-family:var(--body);
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  background:var(--yellow);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--r);
  padding:14px 18px;
  margin-bottom:24px;
  box-shadow:var(--shadow);
  transform:rotate(-.6deg);
}

/* ----------------------------------------------------------------------------
   MODALS — scroll fully, tooltips not clipped
   ---------------------------------------------------------------------------- */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  overflow-y:auto;
  align-items:flex-start;
  justify-content:center;
  padding:32px 16px;
  background:rgba(20,17,13,.55);
  background-image:radial-gradient(rgba(20,17,13,.25) 1.4px, transparent 1.6px);
  background-size:10px 10px;
}
.modal.open{ display:flex; animation:modalIn .18s ease both; }
@keyframes modalIn{ from{ opacity:0; } to{ opacity:1; } }

.modal-panel{
  overflow:visible;
  max-width:min(560px,92vw);
  margin:auto;
  width:100%;
  background:var(--paper);
  border:var(--bw-fat) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  padding:20px;
  animation:panelIn .22s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(-14px) rotate(-1deg); } to{ opacity:1; transform:translateY(0) rotate(0); } }

/* --- Modal heads (shared) --- */
.tr-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  justify-content:space-between;
}
.tr-head button{
  font-family:var(--display);
  font-size:16px;
  line-height:1;
  color:var(--ink);
  background:var(--yellow);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  width:38px; height:38px;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  flex:none;
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.tr-head button:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:var(--alarm); color:var(--paper); }
#cardMapClose, #trophiesClose{ background:var(--alarm); color:var(--paper); }
#cardMapClose:hover, #trophiesClose:hover{ background:var(--ink); }

/* --- Card map --- */
.cm-grid{ display:flex; flex-direction:column; gap:12px; }
.cm-row{ display:flex; flex-direction:column; gap:6px; }
.cm-rlabel{
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6b6353;
}
.cm-cells{ display:flex; flex-wrap:wrap; gap:6px; }
.cm-card{
  position:relative;
  width:24px; height:24px;
  border:2px solid var(--ink);
  border-radius:var(--r);
  background:var(--paper-2);
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease;
}
.cm-card:hover{ transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); z-index:2; }
.cm-card.done{ background:var(--cobalt); box-shadow:2px 2px 0 var(--ink); }
.cm-card.rest{ border-style:dashed; background:transparent; opacity:.5; }
.cm-card.current{ outline:3px solid var(--yellow); outline-offset:2px; }
.cm-card[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:220px;
  font-family:var(--body);
  font-weight:600;
  font-size:12px;
  line-height:1.35;
  text-align:left;
  color:var(--paper);
  background:var(--ink);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  padding:8px 11px;
  box-shadow:var(--shadow-sm);
  z-index:5;
  pointer-events:none;
  white-space:normal;
}

/* --- Trophies --- */
#trophiesTitle, #cardMapTitle{
  font-family:var(--display);
  font-size:18px;
  color:var(--ink);
  flex:1;
}
.tr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:12px;
}

.badge{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
  padding:14px 8px;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  box-shadow:3px 3px 0 var(--ink);
  cursor:default;
  transition:transform .1s ease, box-shadow .1s ease;
}
.badge:hover{ transform:translate(-2px,-2px) rotate(-1.5deg); box-shadow:5px 5px 0 var(--ink); z-index:2; }
.badge.on{
  background:var(--yellow);
}
.badge.off{
  background:var(--paper-2);
  opacity:.62;
  filter:grayscale(.6);
}
.bi{
  font-size:30px;
  line-height:1;
  filter:drop-shadow(2px 2px 0 rgba(20,17,13,.25));
}
.badge.on .bi{ animation:badgePop .4s cubic-bezier(.2,1.7,.4,1) both; }
@keyframes badgePop{ from{ transform:scale(.4) rotate(-12deg); } to{ transform:scale(1) rotate(0); } }
.bt{
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  line-height:1.2;
  color:var(--ink);
}

/* badge tooltip */
.badge[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:220px;
  font-family:var(--body);
  font-weight:600;
  font-size:12px;
  line-height:1.35;
  text-align:left;
  color:var(--paper);
  background:var(--ink);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  padding:9px 12px;
  box-shadow:var(--shadow-sm);
  z-index:5;
  pointer-events:none;
  white-space:normal;
}
.badge[data-tip]:hover::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 2px);
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:11px; height:11px;
  background:var(--ink);
  z-index:6;
  pointer-events:none;
}

/* ----------------------------------------------------------------------------
   EFFECTS (#fx — spawned by app.js)
   ---------------------------------------------------------------------------- */
#fx{
  position:fixed;
  inset:0;
  z-index:300;
  pointer-events:none;
  overflow:hidden;
}

/* confetti */
.confetti-piece{
  --i:0;
  position:absolute;
  top:-24px;
  width:11px; height:16px;
  background:var(--cobalt);
  border:2px solid var(--ink);
  border-radius:2px;
  animation:confettiFall 1.7s cubic-bezier(.3,.6,.4,1) forwards;
}
.confetti-piece:nth-child(4n+1){ background:var(--alarm); }
.confetti-piece:nth-child(4n+2){ background:var(--yellow); }
.confetti-piece:nth-child(4n+3){ background:var(--cobalt); }
.confetti-piece:nth-child(4n){ background:var(--paper); }
.confetti-piece:nth-child(2n){ width:14px; height:14px; border-radius:50%; }
.confetti-piece:nth-child(3n){ width:9px; height:20px; }
@keyframes confettiFall{
  0%{ transform:translateY(0) rotate(0); opacity:1; }
  100%{ transform:translateY(105vh) rotate(720deg); opacity:.9; }
}

/* toasts */
.toast, .badge-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%, 140%);
  max-width:min(440px,90vw);
  font-family:var(--body);
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  background:var(--paper);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--r);
  padding:13px 18px;
  box-shadow:var(--shadow);
  pointer-events:auto;
  opacity:0;
  transition:transform .4s cubic-bezier(.2,1.3,.4,1), opacity .4s ease;
}
.toast{ background:var(--cobalt); color:var(--paper); }
.badge-toast{
  background:var(--yellow);
  display:flex;
  align-items:center;
  gap:11px;
}
.toast.show, .badge-toast.show{
  transform:translate(-50%,0);
  opacity:1;
}
.bt-i{
  font-size:26px;
  line-height:1;
  flex:none;
  filter:drop-shadow(2px 2px 0 rgba(20,17,13,.3));
}
.badge-toast b{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------------- */
.foot{
  text-align:center;
  padding:28px 16px 44px;
}
#motd{
  display:inline-block;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  background:var(--paper-2);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-pill);
  padding:8px 18px;
  box-shadow:var(--shadow-sm);
  transform:rotate(-1deg);
  transition:opacity .6s ease, transform .6s ease;
}
#motd.motd-out{
  opacity:0;
  transform:rotate(-1deg) translateY(6px);
}

/* ============================================================================
   RESTORED risograph features (after modular refactor) — pure CSS
   ============================================================================ */

/* Bold section headings "SUMMARY / TODAY" (canonical .section-title) */
.section-title{
  font-family:var(--display);
  font-size:clamp(19px,2.8vw,28px);
  letter-spacing:.01em; text-transform:uppercase; opacity:1;
  color:var(--paper); background:var(--ink);
  display:inline-block; padding:6px 16px 4px;
  border:var(--bw-thick) solid var(--ink); border-radius:var(--r);
  box-shadow:5px 5px 0 var(--alarm);
  transform:rotate(-1.2deg);
  margin:8px 2px 18px;
}

/* Alternating tilt of summary cards (scattered stickers) */
.stat-card:nth-child(odd){ transform:rotate(-.8deg); }
.stat-card:nth-child(even){ transform:rotate(.8deg); }
.stat-card:hover{ transform:translate(-2px,-2px) rotate(0deg); box-shadow:var(--shadow-lg); }

/* Rotate day arrows on hover */
.day-prev:hover{ transform:translate(-2px,-2px) rotate(-4deg); }
.day-next:hover{ transform:translate(-2px,-2px) rotate(4deg); }

/* "Stamp" checkmark at a slight angle */
.task.done .box::after{ transform:rotate(45deg) scale(1.05); }

/* Screen flash on day completion (app.js spawns .fx-flash) */
.fx-flash{
  position:fixed; inset:0; z-index:300; pointer-events:none;
  background:var(--yellow); mix-blend-mode:multiply;
  animation:fxFlash .6s ease-out forwards;
}
@keyframes fxFlash{ 0%{opacity:0} 16%{opacity:.5} 100%{opacity:0} }

/* Juicy bursting confetti: "pop" up -> fall, with drift and rotation
   (uses --dx/--dy/--rot set by generic celebrate() in app.js) */
.confetti-piece{
  top:-18px;
  animation:confettiBurst 1.8s cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes confettiBurst{
  0%{ opacity:1; transform:translate(0,0) rotate(0) scale(.5); }
  14%{ opacity:1; transform:translate(calc(var(--dx,0) * 9vw), calc(-6vh - var(--dy,0) * 9vh)) rotate(calc(var(--rot,0deg) * .3)) scale(1.12); }
  100%{ opacity:.85; transform:translate(calc(var(--dx,0) * 24vw), 114vh) rotate(var(--rot,0deg)) scale(.85); }
}