/* InteleScreen Tools: playful, colourful, brand red. */
:root{
  --red:#d7262e;--red-d:#a91c23;--ink:#231f20;--mut:#5d5a66;--bg:#fff8f1;--card:#fff;--line:#f0e3d6;
  --yellow:#fff3a8;--pink:#ffd3e2;--mint:#c9f2dc;--sky:#cfe8ff;--lilac:#e4d9ff;--peach:#ffdcc2;
  --r:18px;--shadow:0 6px 18px rgba(35,31,32,.08);
  --stripe:#fbf6f0;--chip:#efe9e2;--board:#c8955a;--board-edge:#8a5a2b;
  --blob1:#ffe3e4;--blob2:#e6f4ff;--blob3:#eaffef
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);
  background:var(--bg);
  background-image:radial-gradient(circle at 8% 12%,var(--blob1) 0 90px,transparent 91px),radial-gradient(circle at 92% 30%,var(--blob2) 0 120px,transparent 121px),radial-gradient(circle at 20% 88%,var(--blob3) 0 110px,transparent 111px);
  background-attachment:fixed}
a{color:var(--red-d)}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border-bottom:3px solid var(--red);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:29px;width:auto;display:block}
.brand-sub{background:var(--red);color:#fff;font-weight:800;font-size:14px;padding:3px 10px;border-radius:99px;transform:rotate(-4deg);letter-spacing:.04em}
.clock{color:var(--mut);font-size:14px;font-variant-numeric:tabular-nums}
#time{font-weight:700;color:var(--ink);margin-left:6px}
main{max-width:1160px;margin:0 auto;padding:12px 24px 40px}
.hero{padding:26px 0 10px}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:0 0 6px;font-weight:900;letter-spacing:-.02em}
.hero p{margin:0;color:var(--mut);font-size:18px}
.wave{display:inline-block;animation:wave 2.4s ease-in-out infinite;transform-origin:70% 70%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
h2{font-size:22px;margin:28px 0 14px;font-weight:800;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
h2 .sub{font-size:14px;font-weight:400;color:var(--mut)}
h2 .count{font-size:12px;font-weight:700;background:var(--mint);color:#1b6b3f;padding:2px 10px;border-radius:99px}

/* Toolbox */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.app{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r);background:var(--card);border:2px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);min-height:170px;position:relative;transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
.app.live{border-color:var(--red)}
.app.live:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 12px 26px rgba(215,38,46,.18)}
.app-emoji{font-size:38px;line-height:1}
.app-name{font-weight:800;font-size:18px}
.app-desc{color:var(--mut);font-size:14px;flex:1}
.app-cta{font-weight:800;color:var(--red)}
.app.soon{opacity:.72;background:repeating-linear-gradient(135deg,#fff,#fff 12px,var(--stripe) 12px,var(--stripe) 24px)}
.app.soon .app-cta{color:var(--mut);font-weight:600;font-size:13px;background:var(--chip);align-self:flex-start;padding:2px 10px;border-radius:99px}

/* Buzz Board */
.buzz{background:var(--board);background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:7px 7px;border:10px solid var(--board-edge);border-radius:22px;padding:4px 20px 24px;margin-top:28px;box-shadow:inset 0 0 22px rgba(0,0,0,.18),var(--shadow)}
.buzz h2{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.buzz h2 .sub{color:#fff3e0}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.note{position:relative;padding:22px 18px 14px;min-height:150px;box-shadow:0 8px 14px rgba(0,0,0,.2);border-radius:4px 4px 18px 4px;color:var(--ink)}
.note h3{margin:0 0 6px;font-size:17px;line-height:1.3}
.note p{margin:0 0 10px;font-size:15px;overflow-wrap:anywhere}
.note footer{font-size:12px;color:rgba(35,31,32,.6)}
.note-pic{display:block;margin:0 0 10px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.06);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.note-pic img{display:block;width:100%;max-height:200px;object-fit:cover}
.note .pin{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:24px}
.note.yellow{background:var(--yellow)}.note.pink{background:var(--pink)}.note.mint{background:var(--mint)}
.note.sky{background:var(--sky)}.note.lilac{background:var(--lilac)}.note.peach{background:var(--peach)}
.tilt0{transform:rotate(-1.6deg)}.tilt1{transform:rotate(1.2deg)}.tilt2{transform:rotate(-.6deg)}.tilt3{transform:rotate(1.8deg)}
.note:hover{transform:rotate(0) scale(1.02);z-index:2}
.empty{color:#fff;font-size:18px;margin:6px 0 10px}

/* Daily fun */
.daily{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:10px;align-items:start}
.card{background:var(--card);border-radius:var(--r);padding:4px 20px 18px;box-shadow:var(--shadow);border:2px solid var(--line)}
.card h2{font-size:18px;margin:16px 0 10px}
.quote{background:linear-gradient(160deg,#fff 0%,#fff0f1 100%)}
.quote blockquote{margin:0}
.quote blockquote p{font-size:20px;font-weight:700;line-height:1.35;margin:0 0 8px}
.quote blockquote p::before{content:"\201C";color:var(--red);font-size:44px;line-height:0;vertical-align:-16px;margin-right:4px}
.quote cite{color:var(--mut);font-style:normal;font-weight:600}
.joke{background:linear-gradient(160deg,#fff 0%,#fffbe0 100%)}
.joke .setup{font-size:18px;font-weight:700;margin:0 0 12px}
.joke .punch{font-size:18px;margin:0 0 10px;animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.reveal{background:var(--red);color:#fff;border:0;border-radius:99px;padding:10px 20px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 4px 0 var(--red-d)}
.reveal:hover{background:var(--red-d)}
.reveal:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-d)}
.picture{background:linear-gradient(160deg,#fff 0%,#eef4ff 100%)}
.pic{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#0b1026}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic.placeholder{display:flex;align-items:center;justify-content:center;gap:18px;font-size:44px;background:linear-gradient(135deg,#0b1026,#3a2b6b)}
.pic-title{font-weight:700;margin:10px 0 4px}
.credit{font-size:12px;color:var(--mut);margin:8px 0 0}

.bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1160px;margin:0 auto;padding:18px 24px 30px;color:var(--mut);font-size:13px}
.admin-link{color:var(--mut)}

@media (max-width:600px){
  .top,main,.bottom{padding-left:16px;padding-right:16px}
  .buzz{padding:4px 12px 18px;border-width:7px}
  .tilt0,.tilt1,.tilt2,.tilt3{transform:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 1.3 themes (Admin > Settings > Theme). "classic" is the :root values above. */
body.theme-sunshine{--bg:#fffbe0;--line:#ffe48a;--stripe:#fff6c4;--chip:#ffefa0;--board:#ff9f43;--board-edge:#e8590c;--blob1:#ffd6e0;--blob2:#b9f3ff;--blob3:#c8ffb0}
body.theme-ocean{--bg:#eaf7ff;--line:#bfe3fb;--stripe:#dff1fd;--chip:#d3ecfb;--board:#2f9fe8;--board-edge:#1666b0;--blob1:#ffe066;--blob2:#ffc2dd;--blob3:#a8f0d8}
body.theme-candy{--bg:#fff0f8;--line:#ffd0e8;--stripe:#ffe6f3;--chip:#ffd9ee;--board:#a970ff;--board-edge:#6b3fc4;--blob1:#fff3a0;--blob2:#c6f6ff;--blob3:#d4ffc9}
body.theme-mint{--bg:#ecfff6;--line:#bff0d8;--stripe:#dcfaec;--chip:#cdf5e2;--board:#16b88a;--board-edge:#0b7a5a;--blob1:#ffe3a3;--blob2:#ffd1e3;--blob3:#cde8ff}