/* Not Telestrations: the pieces the TV and the phones share. White dry-erase pages with
   a plastic spiral coil in the owner's colour, the word card with die faces, the die,
   Doodles, and the table: a kraft-paper craft table by day (light) and a chalkboard at
   night (dark). Sizes come from the container; the TV and phone files set them. */
:root {
  --ntl-hand: "Marker Felt", "Chalkboard SE", "Noteworthy", "Comic Sans MS", "Segoe Print", "Bradley Hand", "casual", cursive;
  --ntl-ink: #16171a;
  --ntl-red: #e8402f;
  --ntl-paper: #fffefa;
}
.ntl-hand { font-family: var(--ntl-hand); font-weight: 700; letter-spacing: .005em; }
.ntl-fit { display: block; max-width: 100%; min-width: 0; overflow-wrap: normal; word-break: normal; }
.ntl-tv [hidden], .ntlp [hidden] { display: none !important; }

/* ---- a sketchbook page ---- */
.ntl-sheet { position: relative; }
.ntl-paper {
  position: relative; background: var(--ntl-paper); border-radius: 3% 3% 2.4% 2.4% / 3% 3% 2.4% 2.4%;
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(40,30,10,.10), 0 2px 0 #ece7dc, 0 4px 0 #e3ddd0, 0 6px 0 #d9d2c3, 0 14px 30px rgba(40,30,10,.28);
  overflow: hidden;
}
/* faint whiteboard sheen and the ghost of last round's erased marker */
.ntl-paper::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 60%), radial-gradient(ellipse 50% 30% at 70% 80%, rgba(120,130,150,.05), transparent 70%), radial-gradient(ellipse 40% 25% at 25% 30%, rgba(120,130,150,.045), transparent 70%); z-index: 0; }
.ntl-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.ntl-ptag { position: absolute; left: 50%; top: 5%; transform: translateX(-50%) rotate(-1.5deg); z-index: 2; background: var(--ntl-ink); color: #fff; font-family: var(--ntl-hand); font-weight: 700; letter-spacing: .06em; padding: .18em .7em .14em; border-radius: .5em; white-space: nowrap; box-shadow: 0 .12em 0 rgba(0,0,0,.15); }
.ntl-pnum { position: absolute; right: 3.5%; bottom: 2.5%; z-index: 2; font-family: var(--ntl-hand); font-weight: 700; color: transparent; -webkit-text-stroke: .045em rgba(22,23,26,.28); line-height: 1; }

/* the spiral coil: plastic rings in the owner's colour, punched through the top */
.ntl-coil { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: 0 5%; height: var(--coil-h, 30px); margin-bottom: calc(var(--coil-h, 30px) * -.55); pointer-events: none; }
.ntl-coil { --cc: var(--coil, #9a9aa2); }
.ntl-coil i { position: relative; width: var(--ring-w, 8px); height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 55%, #000) 0%, var(--cc) 32%, color-mix(in srgb, var(--cc) 45%, #fff) 52%, var(--cc) 70%, color-mix(in srgb, var(--cc) 65%, #000) 100%); box-shadow: 0 2px 2px rgba(0,0,0,.28); }
.ntl-coil i::after { content: ''; position: absolute; left: 50%; bottom: 8%; width: 170%; height: 26%; transform: translateX(-50%); border-radius: 50%; background: rgba(40,30,20,.55); z-index: -1; }

/* ---- the word card ---- */
.ntl-card { position: relative; background: #fff; border-radius: 16px; padding: 10px 14px 12px; color: var(--ntl-ink); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 3px 0 #e8e2d4, 0 14px 30px rgba(40,30,10,.22); overflow: hidden; }
.ntl-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, #ffcf3f 0 22px, #19c3b1 22px 44px, #ff6b57 44px 66px, #6c7cff 66px 88px); }
.ntl-chead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 4px; font-size: 11px; font-weight: 900; letter-spacing: .2em; color: rgba(22,23,26,.45); }
.ntl-chead b { font-size: 11px; letter-spacing: .04em; color: #0b8d80; text-transform: none; font-weight: 800; }
.ntl-crow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 3px 4px; border-bottom: 1.5px dashed rgba(22,23,26,.12); }
.ntl-crow:last-of-type { border-bottom: none; }
.ntl-crow .ntl-pips { width: 26px; height: 26px; flex: none; }
.ntl-cw { font-family: var(--ntl-hand); font-weight: 700; font-size: 21px; line-height: 1.1; min-width: 0; }
.ntl-cw.cat u { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ntl-cw small { display: block; font-family: var(--font, sans-serif); font-size: 11px; font-weight: 700; color: rgba(22,23,26,.45); letter-spacing: .02em; }
.ntl-cw.blank i { display: inline-block; width: 120px; border-bottom: 2.5px solid rgba(22,23,26,.5); height: 18px; }
.ntl-crow.on .ntl-cw { color: #000; }
.ntl-crow.can { cursor: pointer; border-radius: 10px; }
.ntl-crow.can:active { background: rgba(25,195,177,.12); }
.ntl-crow.chosen { background: rgba(25,195,177,.16); box-shadow: inset 0 0 0 2px #19c3b1; border-radius: 10px; }
.ntl-cmascot { position: absolute; right: 8px; bottom: 6px; width: 48px; opacity: .95; transform: rotate(8deg); }
.ntl-card.has-mascot .ntl-crow { padding-right: 46px; }
.ntl-pipbox { fill: #fff; stroke: var(--ntl-ink); stroke-width: 7; }
.ntl-pip { fill: var(--ntl-ink); }
.ntl-crow.on .ntl-pipbox { fill: var(--ntl-ink); }
.ntl-crow.on .ntl-pip { fill: #fff; }
/* the rolled word, circled in red marker */
.ntl-circle { position: absolute; left: 34px; right: -6px; top: -4px; bottom: -4px; width: calc(100% - 28px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.ntl-circle path { fill: none; stroke: var(--ntl-red); stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ntl-circle .7s .25s cubic-bezier(.4,.1,.3,1) forwards; }
@keyframes ntl-circle { to { stroke-dashoffset: 0; } }

/* ---- Doodles, the little marker ---- */
.ntl-mascot { display: block; width: 100%; height: auto; overflow: visible; }
.ntl-mline { fill: none; stroke: var(--ntl-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ntl-mfill { fill: var(--ntl-ink); }
.ntl-mbody { fill: #ffd23f; stroke: var(--ntl-ink); stroke-width: 3.5; }
.ntl-mband { fill: #19c3b1; stroke: var(--ntl-ink); stroke-width: 3.5; }
.ntl-mcap { fill: var(--ntl-ink); }

/* ---- the die ---- */
.ntl-die { --s: 120px; width: var(--s); height: var(--s); perspective: calc(var(--s) * 6); }
.ntl-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.2,.75,.25,1.08); }
.ntl-face { position: absolute; inset: 0; border-radius: 20%; background: radial-gradient(circle at 30% 25%, #fff, #f1ede4 70%); box-shadow: inset 0 0 0 calc(var(--s) * .035) rgba(0,0,0,.08), inset 0 calc(var(--s) * -.06) calc(var(--s) * .1) rgba(0,0,0,.08); backface-visibility: hidden; }
.ntl-face i { position: absolute; width: 18%; height: 18%; margin: -9% 0 0 -9%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3b40, #0d0d10 70%); }
.ntl-face.f1 i { width: 24%; height: 24%; margin: -12% 0 0 -12%; background: radial-gradient(circle at 40% 35%, #ff7a68, #c4241a 70%); }
.ntl-face.f1 { transform: translateZ(calc(var(--s) / 2)); }
.ntl-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.ntl-face.f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.ntl-face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.ntl-face.f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.ntl-face.f2 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.ntl-die[data-show="1"] .ntl-cube { transform: rotateX(-14deg) rotateY(16deg); }
.ntl-die[data-show="6"] .ntl-cube { transform: rotateX(-14deg) rotateY(196deg); }
.ntl-die[data-show="3"] .ntl-cube { transform: rotateX(-14deg) rotateY(-74deg); }
.ntl-die[data-show="4"] .ntl-cube { transform: rotateX(-14deg) rotateY(106deg); }
.ntl-die[data-show="5"] .ntl-cube { transform: rotateX(-104deg) rotateZ(-16deg); }
.ntl-die[data-show="2"] .ntl-cube { transform: rotateX(76deg) rotateZ(16deg); }
/* a roll: big spins that settle on the face shown */
.ntl-die.rolled .ntl-cube { animation: 1.35s cubic-bezier(.15,.65,.25,1) both; }
.ntl-die.rolled[data-show="1"] .ntl-cube { animation-name: ntl-roll1; }
.ntl-die.rolled[data-show="6"] .ntl-cube { animation-name: ntl-roll6; }
.ntl-die.rolled[data-show="3"] .ntl-cube { animation-name: ntl-roll3; }
.ntl-die.rolled[data-show="4"] .ntl-cube { animation-name: ntl-roll4; }
.ntl-die.rolled[data-show="5"] .ntl-cube { animation-name: ntl-roll5; }
.ntl-die.rolled[data-show="2"] .ntl-cube { animation-name: ntl-roll2; }
@keyframes ntl-roll1 { from { transform: rotateX(706deg) rotateY(556deg); } }
@keyframes ntl-roll6 { from { transform: rotateX(706deg) rotateY(736deg); } }
@keyframes ntl-roll3 { from { transform: rotateX(706deg) rotateY(466deg); } }
@keyframes ntl-roll4 { from { transform: rotateX(706deg) rotateY(646deg); } }
@keyframes ntl-roll5 { from { transform: rotateX(616deg) rotateZ(344deg); } }
@keyframes ntl-roll2 { from { transform: rotateX(796deg) rotateZ(376deg); } }
.ntl-die.spin .ntl-cube { animation: ntl-spin .55s linear infinite; }
@keyframes ntl-spin { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(360deg); } }
.ntl-die.idle .ntl-cube { animation: ntl-wobble 2.4s ease-in-out infinite; }
@keyframes ntl-wobble { 0%, 100% { transform: rotateX(-18deg) rotateY(24deg); } 50% { transform: rotateX(-8deg) rotateY(-30deg) translateY(-6%); } }

/* ---- the table: a chalkboard at night (dark), kraft paper by day (light) ---- */
.tbl-sketch {
  --tbl-edge: #0d1214; --tbl-rim: #3b4a4d; --tbl-glow: rgba(220,255,240,.06);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' fill='none' stroke='%23e8f1ec' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='.09'%3E%3Cpath d='M60 70 l12 26 l28 3 l-21 19 l6 28 l-25 -14 l-25 14 l6 -28 l-21 -19 l28 -3 z'/%3E%3Cpath d='M470 90 c-30 -10 -40 30 -10 35 c40 5 50 -45 10 -55 c-55 -12 -75 60 -25 80'/%3E%3Cpath d='M300 300 c10 -25 45 -25 45 5 c0 25 -45 45 -45 60 c0 -15 -45 -35 -45 -60 c0 -30 35 -30 45 -5z'/%3E%3Cpath d='M90 470 h120 m-25 -18 l25 18 l-25 18'/%3E%3Ccircle cx='520' cy='470' r='38'/%3E%3Cpath d='M505 460 v4 M535 460 v4 M503 482 q17 16 34 0'/%3E%3Cpath d='M180 230 c20 -30 60 -20 60 5 c25 -10 45 20 20 35 h-80 c-25 -5 -20 -40 0 -40z'/%3E%3Cpath d='M420 580 q20 -20 40 0 t40 0 t40 0'/%3E%3Cpath d='M40 330 l20 -20 l20 20 l20 -20 l20 20'/%3E%3Cpath d='M590 250 l-14 30 h28 z'/%3E%3C/svg%3E") 0 0 / 640px 640px,
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(160,200,180,.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #24312f 0%, #1a2423 60%, #141c1b 100%);
}
[data-theme="light"] .tbl-sketch {
  --tbl-edge: #ffffff; --tbl-rim: #d8c7a6; --tbl-glow: rgba(255,255,255,.3);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' fill='none' stroke='%237a5f35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='.13'%3E%3Cpath d='M60 70 l12 26 l28 3 l-21 19 l6 28 l-25 -14 l-25 14 l6 -28 l-21 -19 l28 -3 z'/%3E%3Cpath d='M470 90 c-30 -10 -40 30 -10 35 c40 5 50 -45 10 -55 c-55 -12 -75 60 -25 80'/%3E%3Cpath d='M300 300 c10 -25 45 -25 45 5 c0 25 -45 45 -45 60 c0 -15 -45 -35 -45 -60 c0 -30 35 -30 45 -5z'/%3E%3Cpath d='M90 470 h120 m-25 -18 l25 18 l-25 18'/%3E%3Ccircle cx='520' cy='470' r='38'/%3E%3Cpath d='M505 460 v4 M535 460 v4 M503 482 q17 16 34 0'/%3E%3Cpath d='M180 230 c20 -30 60 -20 60 5 c25 -10 45 20 20 35 h-80 c-25 -5 -20 -40 0 -40z'/%3E%3Cpath d='M420 580 q20 -20 40 0 t40 0 t40 0'/%3E%3Cpath d='M40 330 l20 -20 l20 20 l20 -20 l20 20'/%3E%3Cpath d='M590 250 l-14 30 h28 z'/%3E%3C/svg%3E") 0 0 / 640px 640px,
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255,250,236,.55), transparent 70%),
    repeating-linear-gradient(17deg, rgba(120,90,40,.035) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-23deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #ecdcbc 0%, #e3cfa8 100%);
}