@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Press Start 2P', cursive;
  color: #174f19;
}

html, body { height: 100%; margin:0; }

/* background moods */
body[data-mood="idle"]    { background:#b6f1b9; }
body[data-mood="cheer"]   { background:#ffe4d3; }
body[data-mood="victory"] { background:#fff6c9; }
body[data-mood="sleep"]   { background:#cfefff; }

.app { max-width:1000px; margin:16px auto; padding:60px 16px; display:grid;
       grid-template-columns: 1fr 220px; gap:16px; align-items:start; }

/* header */
.header { background:#fff; padding:20px; text-align:center; border:3px solid #174f19;
          border-radius:12px; }
.header h2 { margin:0 0 12px; font-size:18px; }
#new-task-form { display:grid; grid-template-columns:1fr auto auto; gap:8px; }

/* buttons */
.addBtn,.clearBtn { background:#fcb198; color:#fff; padding:12px 20px; border:2px solid #fcb198;
                    border-radius:6px; cursor:pointer; font-size:12px; }
.addBtn:hover,.clearBtn:hover { background:#fff; color:#fcb198; }

/* list */
.list { border-radius:12px; padding:8px 8px 0; margin-bottom:25px; background:#fff; }
ul { margin:0; padding:0; }
ul li { list-style:none; cursor:pointer; position:relative; padding:12px 40px; font-size:13px;
        text-align:center; text-decoration:underline; transition:background .2s ease;
        border-bottom:1px dashed #dcdcdc; }
ul li:last-child { border-bottom:0; }
ul li:hover { background:#fcb19822; }
ul li.checked { background:#fcb198; color:#fff; text-decoration:line-through; }
ul li.checked::before { content:"✓"; position:absolute; left:10px; top:12px; color:#fff; font-size:16px; }

/* close button */
.close { position:absolute; right:10px; top:12px; color:#fff; font-size:20px; font-weight:bold; transition:.2s; }
ul li:hover .close { color:#174f19; }

/* mascot */
.mascot { grid-column:2/3; position:sticky; top:100px; display:grid; gap:8px; justify-items:center; }
.card   {  border-radius:12px; padding:8px; background:#fff; }
#froggie { width:128px; height:128px; image-rendering:pixelated; image-rendering: crisp-edges; display:block; }
.tiny { font-size:12px; opacity:.85; text-align:center; }

/* animations */
@keyframes frogbounce { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
@keyframes wiggle { 0%,100%{ transform: rotate(0deg) } 50%{ transform: rotate(-2deg) } }

body[data-mood="cheer"]   #froggie { animation: frogbounce 1s ease-in-out infinite; }
body[data-mood="victory"] #froggie { animation: wiggle 1.2s ease-in-out infinite; }

/* === mood background: final authority === */
:root{
    --idle-bg:#b6f1b9;
    --cheer-bg:#ffe4d3;
    --victory-bg:#fff6c9;
    --sleep-bg:#cfefff;
  }
  
  body { background: var(--idle-bg) !important; transition: background .120s ease; }
  body[data-mood="idle"]    { background: var(--idle-bg) !important; }
  body[data-mood="cheer"]   { background: var(--cheer-bg) !important; }
  body[data-mood="victory"] { background: var(--victory-bg) !important; }
  body[data-mood="sleep"]   { background: var(--sleep-bg) !important; }
  
  /* (optional) tint Froggie’s card to match */
  .mascot .card{ background:#fff; transition: background .120s ease; }
  body[data-mood="idle"]    .mascot .card{ background: linear-gradient(#fff8,#fff8), var(--idle-bg); }
  body[data-mood="cheer"]   .mascot .card{ background: linear-gradient(#fff8,#fff8), var(--cheer-bg); }
  body[data-mood="victory"] .mascot .card{ background: linear-gradient(#fff8,#fff8), var(--victory-bg); }
  body[data-mood="sleep"]   .mascot .card{ background: linear-gradient(#fff8,#fff8), var(--sleep-bg); }