:root {
    --bg: #0f0f0e;
    --bg-2: #132018;
    --board-line: rgba(237,237,227,.10);
    --chalk: #EDEDE3;
    --chalk-dim: rgba(237,237,227,.58);
    --yellow: #F2C230;
    --green: #8FD14F;
    --red: #E2604F;
    --paper: #EFEAD9;
    --ink: #2B2A26;
    --ink-dim: rgba(43,42,38,.55);
    --ink-line: rgba(43,42,38,.14);
    --metal-1: #c9cdd1;
    --metal-2: #8f959b;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; -webkit-tap-highlight-color: transparent; }
  
  body {
    background:
      radial-gradient(ellipse at 15% 0%, rgba(255,255,255,.03), transparent 45%),
      radial-gradient(ellipse at 85% 100%, rgba(255,255,255,.025), transparent 45%),
      var(--bg);
    color: var(--chalk);
    font-family: 'IBM Plex Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
  }

  /* Faint chalkboard grain */
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.008) 3px 4px),
      repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.008) 3px 4px);
    opacity: .6;
  }

  .dust {
    position: fixed; z-index: 0; border-radius: 50%; 
    background: rgba(237,237,227,.35); filter: blur(1px); 
    pointer-events: none; animation: float 9s ease-in-out infinite;
  }
  @keyframes float {
    0% { transform: translateY(0) translateX(0); opacity: .15; }
    50% { transform: translateY(-18px) translateX(6px); opacity: .5; }
    100% { transform: translateY(0) translateX(0); opacity: .15; }
  }

  /* MOBILE FIRST: Smaller padding for mobile screens */
  .wrap { position: relative; z-index: 1; padding: 16px 12px 60px; margin: 0 auto; width: 100%; }

  /* ---------- Header ---------- */
  header.topbar {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    border-bottom: 2px dashed var(--board-line);
    padding-bottom: 16px; margin-bottom: 20px;
    animation: dropIn .6s cubic-bezier(.2,.9,.25,1.15) both;
  }
  @keyframes dropIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
  
  .brand h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem; /* Mobile font size */
    letter-spacing: .06em; line-height: 1;
    color: var(--chalk); margin: 0;
    text-shadow: 0 0 18px rgba(237,237,227,.10);
  }
  .brand h1 span { color: var(--yellow); }
  .brand p {
    font-family: 'Caveat', cursive; font-size: 1.05rem; /* Mobile font size */
    color: var(--chalk-dim); margin: 2px 0 0 2px; transform: rotate(-1deg);
  }
  .day-badge {
    font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--chalk-dim);
    border: 1px solid var(--board-line); border-radius: 999px; padding: 6px 12px;
    letter-spacing: .08em; align-self: flex-start;
  }

  h2.section-title {
    font-family: 'Bebas Neue', sans-serif; letter-spacing: .05em; font-size: 1.4rem;
    color: var(--chalk); margin-bottom: 2px;
  }
  .section-sub {
    font-family: 'Caveat', cursive; font-size: 1rem; color: var(--chalk-dim); 
    margin-bottom: 14px; transform: rotate(-.4deg); display: inline-block;
  }

  .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .chip {
    font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .05em;
    background: transparent; border: 1.5px dashed var(--board-line); color: var(--chalk-dim);
    border-radius: 999px; padding: 8px 14px; /* Larger tap target */ 
    cursor: pointer; transition: all .18s ease; touch-action: manipulation;
  }
  .chip:hover, .chip:active { border-color: var(--yellow); color: var(--chalk); }
  .chip.active { background: var(--yellow); border-color: var(--yellow); color: #241a02; font-weight: 600; }

  .search-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
  .search-row input, .search-row select {
    background: rgba(255,255,255,.03); border: 1.5px solid var(--board-line); color: var(--chalk);
    font-family: 'IBM Plex Sans', sans-serif; font-size: .95rem; border-radius: 8px;
    padding: 10px; /* Better mobile tap target */
  }
  .search-row input::placeholder { color: var(--chalk-dim); }
  .search-row input:focus, .search-row select:focus {
    background: rgba(255,255,255,.05); border-color: var(--yellow); color: var(--chalk); box-shadow: none;
  }
  .search-row select option { color: #111; }

  /* Limit height on mobile so user doesn't scroll forever */
  .lib-scroll { max-height: 40vh; overflow-y: auto; padding-right: 4px; margin-bottom: 16px; }
  .lib-scroll::-webkit-scrollbar { width: 4px; }
  .lib-scroll::-webkit-scrollbar-thumb { background: var(--board-line); border-radius: 4px; }

  .ex-card {
    display: flex; align-items: center; gap: 10px;
    border: 1px dashed var(--board-line); border-radius: 10px;
    padding: 12px; margin-bottom: 10px;
    background: rgba(255,255,255,.015);
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .ex-card:active { transform: scale(0.98); }
  .ex-card .ex-body { flex: 1; min-width: 0; }
  .ex-tag {
    font-family: 'IBM Plex Mono', monospace; font-size: .65rem; letter-spacing: .08em;
    color: var(--green); text-transform: uppercase;
  }
  .ex-name { font-size: 1rem; font-weight: 600; margin: 2px 0 3px; color: var(--chalk); }
  .ex-desc { font-size: .8rem; color: var(--chalk-dim); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  
  .ex-add-btn {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; /* Larger tap target */
    background: transparent; border: 1.5px solid var(--yellow); color: var(--yellow);
    font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s ease; touch-action: manipulation;
  }
  .ex-add-btn:active { background: var(--yellow); color: #241a02; transform: scale(.92) rotate(90deg); }
  .empty-lib { color: var(--chalk-dim); font-family: 'Caveat', cursive; font-size: 1.1rem; padding: 20px; text-align: center; }

  .custom-add { border-top: 2px dashed var(--board-line); margin-top: 10px; padding-top: 14px; }
  .custom-add .toggle-link {
    font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--yellow); cursor: pointer;
    letter-spacing: .03em; display: inline-block; padding: 4px 0; touch-action: manipulation;
  }
  .custom-form { display: none; margin-top: 12px; }
  .custom-form.show { display: block; animation: dropIn .3s ease both; }
  .custom-form .row > div { margin-bottom: 12px; } /* More spacing on mobile */
  .custom-form label { font-size: .75rem; letter-spacing: .06em; color: var(--chalk-dim); font-family: 'IBM Plex Mono', monospace; margin-bottom:4px;}
  .btn-chalk {
    font-family: 'IBM Plex Mono', monospace; font-size: .85rem; letter-spacing: .04em;
    background: transparent; border: 1.5px solid var(--green); color: var(--green);
    border-radius: 8px; padding: 10px 20px; width: 100%; transition: all .15s ease;
  }
  .btn-chalk:active { background: var(--green); color: #0e1d0e; }

  .board-easel { position: relative; padding-top: 36px; margin-top: 20px; }
  .clip {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 90px; height: 30px; z-index: 3;
    background: linear-gradient(180deg,var(--metal-1),var(--metal-2));
    border-radius: 8px; box-shadow: 0 6px 10px rgba(0,0,0,.35);
  }
  .clip::before {
    content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(180deg,var(--metal-1),var(--metal-2));
    border: 4px solid var(--bg-2);
  }

  .paper {
    position: relative; background: var(--paper); color: var(--ink);
    border-radius: 4px 4px 10px 10px; transform: rotate(-.3deg); /* Less rotation on mobile */
    box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.15);
    padding: 24px 16px 20px; /* Tighter padding for mobile */
    background-image: repeating-linear-gradient(var(--paper) 0 31px, var(--ink-line) 31px 32px);
    background-position: 0 8px;
    animation: dropIn .7s .1s cubic-bezier(.2,.9,.25,1.1) both;
  }

  .routine-name-input {
    width: 100%; border: none; background: transparent; outline: none;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .03em;
    color: var(--ink); border-bottom: 2px solid var(--ink-line); padding-bottom: 4px; margin-bottom: 6px;
  }
  .routine-name-input::placeholder { color: rgba(43,42,38,.35); }
  .routine-meta-line { font-family: 'IBM Plex Mono', monospace; font-size: .65rem; color: var(--ink-dim); letter-spacing: .06em; margin-bottom: 16px; }

  /* Mobile scrollable tabs */
  .tabs-row {
    display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 16px;
    overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  }
  .tabs-row::-webkit-scrollbar { height: 4px; }
  .tabs-row::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 4px; }

  .rtab {
    font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .03em;
    border: 1.5px solid var(--ink-line); border-radius: 999px; padding: 6px 12px;
    display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-dim);
    background: rgba(43,42,38,.03); transition: all .15s ease; white-space: nowrap; flex-shrink: 0;
  }
  .rtab.active { border-color: var(--ink); color: var(--ink); background: rgba(43,42,38,.08); font-weight: 600; }
  .rtab .rtab-x { opacity: .5; font-size: 1rem; padding: 2px; }
  .rtab .rtab-x:active { opacity: 1; color: var(--red); }
  .rtab-new { border-style: dashed; }

  #routineList { min-height: 60px; }
  .routine-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; /* allow wrap on very small screens */
    padding: 12px 4px; border-bottom: 1px solid var(--ink-line);
    animation: stampIn .32s cubic-bezier(.3,1.4,.5,1) both;
  }
  @keyframes stampIn {
    0% { opacity: 0; transform: scale(.75) translateY(-6px); }
    60% { opacity: 1; transform: scale(1.04) translateY(0); }
    100% { opacity: 1; transform: scale(1); }
  }
  .routine-row.removing { animation: rowOut .28s ease forwards; }
  @keyframes rowOut { to { opacity: 0; transform: translateX(40px) scale(.9); } }

  .row-no { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--ink-dim); width: 16px; }
  .drag-handle { cursor: grab; color: var(--ink-dim); font-size: 1.1rem; letter-spacing: -2px; user-select: none; padding: 4px; touch-action: none; }
  .drag-handle:active { cursor: grabbing; }
  
  .row-info { flex: 1; min-width: 120px; }
  .row-name { font-weight: 600; font-size: .95rem; line-height: 1.2; margin-bottom: 2px; }
  .row-meta { font-size: .65rem; color: var(--ink-dim); font-family: 'IBM Plex Mono', monospace; letter-spacing: .04em; }
  
  .row-fields { display: flex; gap: 6px; align-items: center; }
  .field { text-align: center; }
  .field label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .55rem; color: var(--ink-dim); letter-spacing: .06em; margin-bottom: 2px; }
  .field input {
    width: 48px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: .9rem;
    border: 1px solid var(--ink-line); border-radius: 6px; background: rgba(255,255,255,.4); color: var(--ink);
    padding: 6px 2px; /* Better mobile tap target */
  }
  .field input:focus { outline: none; border-color: var(--ink); background: #fff; }
  
  .row-remove {
    background: none; border: none; color: var(--ink-dim); font-size: 1.4rem; line-height: 1; 
    cursor: pointer; padding: 4px 8px; transition: color .15s ease, transform .15s ease;
  }
  .row-remove:active { color: var(--red); transform: rotate(90deg) scale(1.15); }

  .ui-sortable-placeholder {
    border: 1.5px dashed var(--ink-dim); border-radius: 6px; margin: 4px 0; visibility: visible !important;
  }

  .empty-routine { text-align: center; padding: 40px 10px; font-family: 'Caveat', cursive; font-size: 1.3rem; color: var(--ink-dim); }

  .paper-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; flex-wrap: wrap; gap: 16px; }
  .count-note { font-family: 'Caveat', cursive; font-size: 1.15rem; color: var(--ink-dim); transform: rotate(-.5deg); display: block; margin-bottom: 6px; }

  .stamp-btn {
    position: relative; font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 1rem;
    border: 3px solid var(--ink); color: var(--ink); background: transparent;
    border-radius: 50%; width: 84px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1.05; transform: rotate(-6deg); cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease; flex-shrink: 0;
  }
  .stamp-btn:active { transform: rotate(-6deg) scale(.9) translateY(3px); background: var(--yellow); }
  .stamp-btn.stamped { animation: press .35s ease; }
  @keyframes press { 0% { transform: rotate(-6deg) scale(1); } 40% { transform: rotate(-6deg) scale(.82) translateY(4px); background: var(--yellow); color: #241a02; } 100% { transform: rotate(-6deg) scale(1); } }
  .stamp-btn small { font-family: 'IBM Plex Mono', monospace; letter-spacing: .02em; font-size: .55rem; display: block; margin-top:2px; }

  .exportall-link {
    font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--ink-dim); text-decoration: underline dotted;
    cursor: pointer; background: none; border: none; padding: 8px 0; touch-action: manipulation;
  }
  .exportall-link:active { color: var(--ink); }

  .chalk-toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--panel, #1E2F24); color: var(--chalk); border: 1.5px dashed var(--yellow);
    font-family: 'IBM Plex Mono', monospace; font-size: .85rem; padding: 12px 24px; border-radius: 8px;
    opacity: 0; pointer-events: none; transition: all .3s ease; z-index: 1000; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: max-content; max-width: 90vw;
  }
  .chalk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .chalk-toast svg { width: 18px; height: 18px; flex-shrink: 0; }
  .chalk-toast path { stroke: var(--green); stroke-width: 3; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; stroke-linecap: round; stroke-linejoin: round; }
  .chalk-toast.show path { animation: draw .4s .15s ease forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  @media (min-width: 768px) {
    .topbar { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 0; }
    .day-badge { align-self: auto; }
    .search-row { flex-direction: row; }
    .search-row select { max-width: 150px; }
    .routine-row { flex-wrap: nowrap; }
    .btn-chalk { width: auto; }
  }

  @media (min-width: 992px) {
    .wrap { max-width: 1360px; padding: 28px 22px 70px; }
    .brand h1 { font-size: 3.2rem; }
    .brand p { font-size: 1.25rem; }
    .lib-scroll { max-height: 640px; padding-right: 8px; }
    
    .board-easel { margin-top: 0; padding-top: 26px; }
    .clip { width: 110px; height: 34px; }
    .clip::before { width: 34px; height: 34px; top: 8px; }
    .paper { padding: 38px 26px 26px; transform: rotate(-.6deg); }
    .tabs-row { flex-wrap: wrap; overflow-x: visible; }
    
    .routine-name-input { font-size: 2rem; }
    .stamp-btn { width: 92px; height: 92px; font-size: 1.1rem; }
    .stamp-btn:hover { transform: rotate(-6deg) scale(1.06); }
    
    .ex-card:hover { border-color: rgba(237,237,227,.4); transform: translateX(2px); background: rgba(255,255,255,.03); }
    .ex-add-btn:hover { background: var(--yellow); color: #241a02; transform: scale(1.08) rotate(90deg); }
    .chip:hover { border-color: var(--yellow); color: var(--chalk); }
    .rtab:hover { background: rgba(43,42,38,.06); }
    .rtab .rtab-x:hover { opacity: 1; color: var(--red); }
    .row-remove:hover { color: var(--red); transform: rotate(90deg) scale(1.15); }
    .btn-chalk:hover { background: var(--green); color: #0e1d0e; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }
  .btn-play{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg, var(--ember), var(--ember-2));
  color:#ffffff;
  font-weight:800;
  font-size:0.82rem;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:11px 22px;
  border-radius:999px;
  box-shadow:0 8px 24px rgba(255,94,26,0.28);
  transition:transform .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn-play:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(255,94,26,0.42);
  color:#0a0a0a;
}
.btn-play svg{width:18px;height:18px;}

.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--bone);
  border:1px solid var(--steel);
  padding:11px 22px;
  border-radius:999px;
  font-weight:700;font-size:0.82rem;
  letter-spacing:0.5px;text-transform:uppercase;
  transition:border-color .25s ease, background .25s ease;
}
.btn-ghost:hover{border-color:var(--ember);background:rgba(255,94,26,0.08);color:var(--bone);}