/* Верити: the smiley helper from ThatMob's Minecraft series. By day (light) a sunny yellow page doodled with smiles,
   framed in navy ink, content on white stickers; Verity herself floats at the bottom of the side panel and watches the
   cursor (verity.js), her face on every cover without a picture. By night (dark) it's the third day: the page goes
   to ink, the doodles become watching eyes, titles drip, and her face is not the same any more. Rubik throughout:
   Bubbles for the page titles by day, Wet Paint by night. */
[data-design="verity"] {
  --bg: #ffd21f;
  --side: #1b2559;
  --card: #ffffff;
  --card-2: #fff3b8;
  --line: rgb(27 37 89 / 0.16);
  --ink: #1b2559;
  --text: #1b2559;
  --muted: #535c8c;
  --accent: #1b2559;
  --accent-ink: #ffd21f;
  --accent-soft: rgb(27 37 89 / 0.08);
  --pop: #ff8a1f;
  --danger: #d0312d;
  --edge: 2.5px solid var(--ink);
  --shadow: 0 6px 0 #e2b100;
  --lv1: #b06400; --lv2: #1f6fb0; --lv3: #6d3fc2; --lv4: #535c8c; --lv5: #d0312d;
  --title: "Rubik Bubbles";
  --ball-day: radial-gradient(circle at 34% 28%, #fffbc4, #f0e223 26%, #d6c712 64%, #877b00); /* her ball, as verity.js draws it */
  --ball-night: radial-gradient(circle at 78% 84%, rgb(255 77 94 / 0.4), transparent 45%), radial-gradient(circle at 34% 28%, #e8de5c, #b4a810 30%, #625a00 72%, #221f00);
  --doodles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%231b2559' stroke-opacity='.17' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='32' cy='34' r='12'/%3E%3Cpath d='M28 29v3M36 29v3M26 38q6 6 12 0'/%3E%3Cg transform='rotate(24 108 102)'%3E%3Ccircle cx='108' cy='102' r='9'/%3E%3Cpath d='M105 99v2M111 99v2M104 105q4 4 8 0'/%3E%3C/g%3E%3Cpath d='M74 22q6-8 12 0t12 0M18 112q5 7 10 0t10 0'/%3E%3Ccircle cx='128' cy='36' r='2'/%3E%3Ccircle cx='62' cy='128' r='2'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
[data-design="verity"][data-theme="dark"] {
  --bg: #14163a;
  --side: #0b0d26;
  --card: #1e2154;
  --card-2: #282c68;
  --line: rgb(243 238 210 / 0.12);
  --ink: #0b0d26;
  --text: #f3eed2;
  --muted: #a8a6c9;
  --accent: #f2c200;
  --accent-ink: #14163a;
  --accent-soft: rgb(242 194 0 / 0.12);
  --pop: #ff4d5e;
  --danger: #ff5d6c;
  --edge: 1.5px solid rgb(242 194 0 / 0.22);
  --shadow: 0 6px 0 #0b0d26;
  --lv1: #f2c200; --lv2: #6cb8ff; --lv3: #c49cff; --lv4: #a8a6c9; --lv5: #ff5d6c;
  --title: "Rubik Wet Paint";
  --doodles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cg fill='%23f2c200' fill-opacity='.11'%3E%3Cellipse cx='34' cy='36' rx='3' ry='5'/%3E%3Cellipse cx='45' cy='36' rx='3' ry='5'/%3E%3Cellipse cx='118' cy='112' rx='2.2' ry='3.8'/%3E%3Cellipse cx='126' cy='112' rx='2.2' ry='3.8'/%3E%3Cellipse cx='132' cy='30' rx='1.6' ry='2.8'/%3E%3Cellipse cx='138' cy='30' rx='1.6' ry='2.8'/%3E%3C/g%3E%3Cpath d='M40 140q16 12 32 0' fill='none' stroke='%23f2c200' stroke-opacity='.08' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}

[data-design="verity"] body { font-family: Rubik, system-ui, sans-serif; background: var(--doodles), var(--bg); }
[data-design="verity"][data-theme="dark"] body { background: radial-gradient(circle at 55% 40%, transparent 35%, rgb(0 0 0 / 0.45)), var(--doodles), var(--bg); }
[data-design="verity"] h1, [data-design="verity"] h2, [data-design="verity"] h3, [data-design="verity"] .tile-value { font-family: Rubik, sans-serif; letter-spacing: 0; }
[data-design="verity"] .head h1 { font-family: var(--title), Rubik, sans-serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); }
[data-design="verity"][data-theme="dark"] .head h1 { color: var(--accent); }
[data-design="verity"] a { color: inherit; }

/* the navy frame: the side panel and the player, with Verity at the bottom of the panel */
[data-design="verity"] .side { background: var(--side); border-right: 0; }
[data-design="verity"] .logo.only-light { display: none; } /* the panel is navy in both themes: the white logo always */
[data-design="verity"] .logo.only-dark { display: inline; }
[data-design="verity"] .brand { padding-bottom: 12px; }
[data-design="verity"] .logo { max-width: 138px; } /* a smaller logo and menu: the room goes to Verity below */
[data-design="verity"] .nav a { padding: 9px 14px; color: #dfe3ff; border-radius: 999px; font-weight: 500; }
[data-design="verity"] .nav a:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
[data-design="verity"] .nav a.on { background: #ffd21f; color: #1b2559; }
[data-design="verity"][data-theme="dark"] .nav a.on { background: rgb(242 194 0 / 0.14); color: #f2c200; }
[data-design="verity"] .nav .badge { --c: #ff8a1f; }
[data-design="verity"] .side-foot { margin-top: 0; color: #aab0dc; }
[data-design="verity"] .side-foot .ext-link { color: #aab0dc; }
[data-design="verity"] .verity-buddy { position: relative; flex: 1 1 0; min-height: 0; max-height: 140px; aspect-ratio: 1; align-self: center; margin: auto 0; /* the panel's free room, no more; centred in it, the footer stays at the bottom */ animation: verity-float 4.5s ease-in-out infinite; }
/* her ball lit from the upper left; the face rides on it, turned to the cursor (verity.js) */
[data-design="verity"] .verity-buddy .ball { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 16px 18px -6px rgb(0 0 0 / 0.4); background: var(--ball-day); }
[data-design="verity"][data-theme="dark"] .verity-buddy .ball { background: var(--ball-night); }
[data-design="verity"] .verity-buddy .look { position: absolute; inset: 8%; transform: translate(var(--lx, 0), var(--ly, 0)); transition: transform 0.3s ease-out; }
[data-design="verity"][data-theme="dark"] .verity-buddy .look { transition: none; } /* by night she doesn't ease into it */
[data-design="verity"] .verity-buddy .look img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
[data-design="verity"] .verity-buddy .night, [data-design="verity"][data-theme="dark"] .verity-buddy .day { display: none; }
[data-design="verity"][data-theme="dark"] .verity-buddy .night { display: block; }
[data-design="verity"] .verity-buddy .faces { mix-blend-mode: multiply; }
[data-design="verity"] .verity-buddy .teeth img { filter: drop-shadow(0 0 3px rgb(255 250 225 / 0.9)) drop-shadow(0 0 8px rgb(255 240 190 / 0.55)); } /* her teeth glow in the dark */
/* the frames (the groups say which they have): the face at rest; now and then a blink by day (only the happy face
   has one) or a mad laugh with a twitch by night */
[data-design="verity"] .verity-buddy .look .f0 { opacity: 1; }
[data-design="verity"] .verity-buddy .has-f1 .f0 { animation: verity-rest 5.5s step-end infinite; }
[data-design="verity"] .verity-buddy .f1 { animation: verity-flash 5.5s step-end infinite; }
[data-design="verity"] .verity-buddy .night.has-f1 .f0 { animation: verity-rest-night 7s step-end infinite; }
[data-design="verity"] .verity-buddy .night .f1 { animation: verity-flash-night 7s step-end infinite; }
[data-design="verity"][data-theme="dark"] .verity-buddy { animation: verity-float 4.5s ease-in-out infinite, verity-twitch 7s linear infinite; }
/* the music's on: she bobs, and sings along (by night laughs along) if her face has an open mouth */
[data-design="verity"].listening .verity-buddy { animation-duration: 1.1s, 7s; }
[data-design="verity"].listening .verity-buddy .f1 { animation: none; opacity: 0; }
[data-design="verity"].listening .verity-buddy .has-f1 .f0 { animation: none; }
[data-design="verity"].listening .verity-buddy .has-f2 .f0 { animation: verity-talk 0.6s step-end -0.3s infinite; } /* half a beat behind: shut while the mouth is open */
[data-design="verity"].listening .verity-buddy .f2 { animation: verity-talk 0.6s step-end infinite; }
@keyframes verity-float { 50% { transform: translateY(-7px); } }
@keyframes verity-rest { 0% { opacity: 1; } 94% { opacity: 0; } 96.5% { opacity: 1; } }
@keyframes verity-flash { 0% { opacity: 0; } 94% { opacity: 1; } 96.5% { opacity: 0; } }
@keyframes verity-rest-night { 0% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } }
@keyframes verity-flash-night { 0% { opacity: 0; } 90% { opacity: 1; } 95% { opacity: 0; } }
@keyframes verity-twitch { 0%, 90%, 95%, 100% { rotate: 0deg; } 91% { rotate: 6deg; } 92.5% { rotate: -5deg; } 94% { rotate: 3deg; } }
@keyframes verity-talk { 0% { opacity: 1; } 50% { opacity: 0; } }

/* the settings' face picker: a row of little Verity balls for the day, one for the night on the night's ink (so the
   teeth glow); the chosen one ringed */
[data-design="verity"] .face-row { display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 20px; background: #ffd21f; }
[data-design="verity"] .face-row + .face-row { margin-top: 10px; }
[data-design="verity"] .face-row.night { background: #14163a; }
[data-design="verity"] .face-row-label { font-weight: 700; color: #1b2559; }
[data-design="verity"] .face-row.night .face-row-label { color: #f3eed2; }
[data-design="verity"] .face-picks { display: flex; flex-wrap: wrap; gap: 12px; }
[data-design="verity"] .face-pick { position: relative; width: 58px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--ball-day); cursor: pointer; transition: transform 0.12s; }
[data-design="verity"] .night .face-pick { background: var(--ball-night); }
[data-design="verity"] .face-pick:hover { transform: scale(1.08); }
[data-design="verity"] .face-pick img { position: absolute; inset: -6%; width: 112%; height: 112%; mix-blend-mode: multiply; } /* a little bigger than on her: they are small here */
[data-design="verity"] .face-pick img.glow { mix-blend-mode: normal; filter: drop-shadow(0 0 2px rgb(255 250 225 / 0.9)); }
[data-design="verity"] .face-pick[aria-checked="true"] { box-shadow: 0 0 0 3px #1b2559, 0 0 0 6px #fff; }
[data-design="verity"] .night .face-pick[aria-checked="true"] { box-shadow: 0 0 0 3px #f2c200, 0 0 0 6px #14163a; }

/* stickers: white cards outlined in ink, standing a little off the yellow */
[data-design="verity"] :is(.card, .tile, .faq-item, .pl, .hint, .quick-row, .me, .seg, .vote, .toast, .menu) {
  background: var(--card); border: var(--edge); border-radius: 24px; box-shadow: var(--shadow);
}
[data-design="verity"] .menu { border-radius: 18px; }
[data-design="verity"] .seg { border-radius: 999px; }
[data-design="verity"] .faq-item[open] { border-color: var(--ink); }
[data-design="verity"][data-theme="dark"] .faq-item[open] { border-color: var(--accent); }
[data-design="verity"] .faq-item p { color: var(--text); opacity: 0.85; }
[data-design="verity"] :is(.hint, .quick-row, .tile) > .ic, [data-design="verity"] .setting-title .ic { color: var(--pop); }
[data-design="verity"] .eyebrow { color: var(--pop); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; }

/* buttons: round as she is */
[data-design="verity"] .btn { border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--text); font-weight: 500; }
[data-design="verity"][data-theme="dark"] .btn { border: 1.5px solid rgb(243 238 210 / 0.25); background: var(--card-2); }
[data-design="verity"] .btn:hover { background: var(--card-2); border-color: var(--ink); }
[data-design="verity"][data-theme="dark"] .btn:hover { border-color: var(--accent); }
[data-design="verity"] .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-design="verity"][data-theme="dark"] .btn.primary { box-shadow: 0 0 18px rgb(242 194 0 / 0.35); }
[data-design="verity"] .btn.danger { color: var(--danger); }
[data-design="verity"] .input { border-radius: 16px; border: 2px solid var(--line); background: var(--card); }
[data-design="verity"] .seg button.on { background: var(--accent); color: var(--accent-ink); }
[data-design="verity"] .badge { border-radius: 999px; }

/* the air: the cover framed like a sticker, the title big and plain */
[data-design="verity"] .hero { background: var(--card); border: var(--edge); border-radius: 30px; box-shadow: var(--shadow); }
[data-design="verity"] .hero-bg { display: none; }
[data-design="verity"] .cover { border-radius: 24px; border: var(--edge); box-shadow: none; }
[data-design="verity"] .cover.placeholder { background: var(--card-2); padding: 10%; }
[data-design="verity"][data-theme="dark"] .cover.placeholder { background: #0b0d26; }
[data-design="verity"] .hero h2 { font-weight: 700; }
[data-design="verity"] .hero .time { color: var(--text); }
[data-design="verity"] .radio-down { color: var(--danger); }

/* lists and the rest */
[data-design="verity"] .row { border-radius: 16px; }
[data-design="verity"] .row:hover { background: var(--card-2); }
[data-design="verity"] .row.mine { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--pop); }
[data-design="verity"] .thumb { border-radius: 12px; }
[data-design="verity"] .thumb.placeholder { background: var(--card-2); }
[data-design="verity"] .ch { border-radius: 18px; }
[data-design="verity"] .ch.has-bot { border-color: var(--ink); background: var(--card-2); }
[data-design="verity"][data-theme="dark"] .ch.has-bot { border-color: var(--accent); background: var(--accent-soft); }
[data-design="verity"] .pl-art { border-radius: 50%; background: var(--ball-day); color: #1b2559; }
[data-design="verity"][data-theme="dark"] .pl-art { background: var(--ball-night); }
[data-design="verity"] .pl-art.collage, [data-design="verity"] .pl-hero .pl-art { border-radius: 22px; }
[data-design="verity"] .design-card { border-radius: 20px; }
[data-design="verity"] .design-card.on { border-color: var(--ink); box-shadow: 0 0 0 4px #ffd21f; }
[data-design="verity"][data-theme="dark"] .design-card.on { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
[data-design="verity"] .thank > .ic { color: var(--pop); }
[data-design="verity"] .thank a, [data-design="verity"] .version a { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* the player: navy, the listen button is a little Verity-yellow ball */
[data-design="verity"] .bar { background: var(--side); border-top: 0; color: #fff; }
[data-design="verity"] .bar .t-sub { color: #aab0dc; }
[data-design="verity"] .bar .thumb { border: 2px solid #ffd21f; }
[data-design="verity"] .center .time { color: #ffd21f; }
[data-design="verity"] .listen {
  width: 54px; height: 54px; color: #1b2559;
  background: var(--ball-day);
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.35);
}
[data-design="verity"][data-theme="dark"] .listen { background: var(--ball-night); box-shadow: 0 0 22px rgb(242 194 0 / 0.35); }
[data-design="verity"] .right { color: #aab0dc; }
[data-design="verity"] .right input { accent-color: #ffd21f; }
[data-design="verity"] .toast { color: var(--text); font-weight: 500; }

@media (max-width: 860px) {
  [data-design="verity"] .tabs { background: var(--side); border-top: 0; }
  [data-design="verity"] .tabs a { color: #dfe3ff; }
  [data-design="verity"] .tabs a.on { color: #ffd21f; }
  [data-design="verity"] .head-icon { width: 40px; height: 40px; }
  [data-design="verity"] .head h1 { font-size: 24px; }
}
[data-design="verity"] .quick-row .input, [data-design="verity"] .quick-row .input:focus { border: 0; outline: none; background: none; box-shadow: none; }