/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h3, h4, b {
  font-weight: bold;
}

h3 {
  font-size: 1.17em;
  margin-block-start: 2em;
  margin-block-end: 0.5em;
}

select {
  -webkit-appearance: none; /* Removes Safari’s gloss */
  -moz-appearance: none;    /* For Firefox */
  appearance: none;         /* Standard */
}

.grid-placeholder {
  height:610px;
}

/* Wrap select in order to add a custom arrow */
.select-wrapper {
  position: relative;
  display: inline-block;
}

.select-wrapper::after {
  content: "⏷";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 50%;
  pointer-events: none;
}

:root {
  --overlay: rgba(26, 29, 36, 0.5);
  --button-color: white;
  -webkit-font-smoothing:antialiased;
}

body.dark {
  --bg: #1a1d24;
  --warn: #bc9300;
  --card-bg: #322f3b;
  --background-highlight: #0000002c;
  --modal-bg: #242830;
  --modal-bg-secondary: #2c3039;
  --text: #f3f3f3;
  --text-title: #f3f3f3;
  --text-title-time: #f3f3f3;
  --text-muted: #a6acb8;
  --border-button: #4a4b55;
  --button-background: var(--bg);
  --border-neutral: #4a4b55;
  --shadow-color: rgb(0, 0, 0);
  --shadow-color-secondary: rgb(0, 0, 0);
  --face-shadow-color: #aeaeae4c;
  --share-color: var(--innocent);
  --speech-bg: #262626;
  --speech-border: rgb(172, 172, 172);
  --speech-color: rgb(221, 221, 221);
  --input-border-color: white;
  --input-bg-color: black;
  --input-text-color: white;
  --tag-color-default: rgb(255, 255, 255, 0.04);
  --tag-color-hover-default: rgba(255, 255, 255, 0.1);
}

body.use-italics {
  --non-clue-font-style: italic;
}

body.theme-default {
  --tag-color-1: #ffff00;
  --tag-color-2: red;
  --tag-color-3: rgb(0, 255, 0);
  --tag-color-4: #ff8800;
  --tag-color-5: #ff00ff;
  --tag-color-6: #00ffff;

}

body.theme-acc-1 {
  --tag-color-1: #ffff00;
  --tag-color-2: #ff00ff;
  --tag-color-3: #00ffff;
  --tag-color-4: #ff8800ff;
  --tag-color-5: red;
  --tag-color-6: rgb(0, 255, 0);
}

/* Pattern definitions for the grayscale theme */
body.theme-gray {
  --tag-color-1: #eeeeee;
  --tag-color-2: #dddddd;
  --tag-color-3: #cccccc;
  --tag-color-4: #bbbbbb;
  --tag-color-5: #aaaaaa;
  --tag-color-6: #999999;

  /* Pattern ink is overridden for light/dark mode below */
  --tag-pattern-ink: rgba(0, 0, 0, 0.45);

  /* 1: dots */
  --tag-pattern-1:
    radial-gradient(
      circle,
      var(--tag-pattern-ink) 1.5px,
      transparent 1.7px
    );
  --tag-pattern-size-1: 7px 7px;

  /* 2: horizontal lines */
  --tag-pattern-2:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 4px,
      var(--tag-pattern-ink) 4px,
      var(--tag-pattern-ink) 6px
    );
  --tag-pattern-size-2: auto;

  /* 3: vertical lines */
  --tag-pattern-3:
    repeating-linear-gradient(
        0deg,
        transparent 2px,
        transparent 3px,
        var(--tag-pattern-ink) 4px,
        var(--tag-pattern-ink) 6px
    );
  --tag-pattern-size-3: 1px;

  /* 4: square grid */
  --tag-pattern-4:
    linear-gradient(
      var(--tag-pattern-ink) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--tag-pattern-ink) 1px,
      transparent 1px
    );
  --tag-pattern-size-4: 7px 7px;

  /* 5: diagonal lines */
  --tag-pattern-5:
      linear-gradient(
        45deg,
        var(--tag-pattern-ink) 5px,
        transparent 25% 75%,
        var(--tag-pattern-ink) 5px
      ),
      linear-gradient(
        45deg,
        var(--tag-pattern-ink) 5px,
        transparent 25% 75%,
        var(--tag-pattern-ink) 5px
      );
    --tag-pattern-size-5: 8px 8px;
    --tag-pattern-position-5: 0 0, 4px 4px;

  /* 6: diagonal crosshatch */
  --tag-pattern-6:
  radial-gradient(
    circle,
    var(--tag-pattern-ink) 3.5px,
    transparent 1.7px
  );
  --tag-pattern-size-6: 7px 7px;
}

body.theme-gray.light {
  --tag-pattern-ink: rgba(0, 0, 0, 0.42);
}

body.theme-gray.dark {
  --tag-color-1: #333333;
  --tag-color-2: #3b3b3b;
  --tag-color-3: #444444;
  --tag-color-4: #4d4d4d;
  --tag-color-5: #565656;
  --tag-color-6: #5f5f5f;

  --tag-pattern-ink: rgba(255, 255, 255, 0.42);
}

body.theme-gray.tag {
  background-color: var(--tag-color);
  background-image: var(--tag-pattern);
  background-size: var(--tag-pattern-size);
}

body.theme-gray .tag-color-2 {
  background-color: var(--tag-color-2);
  background-image: var(--tag-pattern-2);
  background-size: var(--tag-pattern-size-2);
}

body.theme-gray .tag-color-3 {
  background-color: var(--tag-color-3);
  background-image: var(--tag-pattern-3);
  background-size: var(--tag-pattern-size-3);
}

body.theme-gray .tag-color-4 {
  background-color: var(--tag-color-4);
  background-image: var(--tag-pattern-4);
  background-size: var(--tag-pattern-size-4);
}

body.theme-gray .tag-color-5 {
  background-color: var(--tag-color-5);
  background-image: var(--tag-pattern-5);
  background-size: var(--tag-pattern-size-5);
}

body.theme-gray .tag-color-6 {
  background-color: var(--tag-color-6);
  background-image: var(--tag-pattern-6);
  background-size: var(--tag-pattern-size-6);
}


body.theme-default.dark {
  --innocent: #58a284;
  --criminal: #c66464;

  --background-innocent: rgb(38, 77, 59);
  --background-highlight-innocent: rgb(29, 64, 48);
  --border-innocent: rgb(46, 102, 76);

  --background-criminal: #5c2235;
  --background-highlight-criminal: #501d2e;
  --border-criminal: #8b2a53;

  --background-innocent-consumed: rgb(38, 77, 59); /*#1a352e;*/
  --background-highlight-innocent-consumed: rgb(29, 64, 48); /*#142d26;*/
  --background-criminal-consumed: #5c2235; /*#411b2b;*/
  --background-highlight-criminal-consumed: #501d2e; /*#371624;*/
  --text-innocent: white;
  --text-criminal: white;

  --button-innocent: #58a284;
  --button-criminal: #c66464;
  --button-innocent-hover: #58a2843b;
  --button-criminal-hover: #c664644f;
}

body.theme-acc-1.dark {
  --innocent: #36a4df;
  --criminal: #d3c76e;

  --background-innocent: #074262;
  --background-highlight-innocent: #0f374d;
  --border-innocent: #0d6da0;

  --background-criminal: #413910;
  --background-highlight-criminal: #362f0d;
  --border-criminal: #766a12;

  --background-innocent-consumed: #074262; /* #063148; */
  --background-highlight-innocent-consumed: #0f374d; /* #062b3e; */
  --background-criminal-consumed: #413910; /* #342d0c; */
  --background-highlight-criminal-consumed: #362f0d; /* #2a240a; */
  --text-innocent: white;
  --text-criminal: white;

  --button-innocent: #36b2df;
  --button-criminal: #acac52;
  --button-innocent-hover: #36a4df7e;
  --button-criminal-hover: #d3c76e5f;
}

body.light {
  --bg: #fff9ee;
  --warn: rgb(172, 116, 36);
  --card-bg: #e3d2b7;
  --background-highlight: #ebe3cd;
  --modal-bg: #e3d2b7;
  --modal-bg-secondary: #d6c8b2;
  --text: #4f5264;
  --text-title: #393c4d;
  --text-title-time:#393c4d;
  --text-muted: #59556e;
  --border-button: #9e9ca7;
  --button-background: #afafaf47;
  --border-neutral: #f6f6f0;
  --shadow-color: rgb(164, 156, 155);
  --shadow-color-secondary: rgb(147, 121, 110);
  --face-shadow-color: #6c6c6c;
  --input-bg-color: #ffffff;
  --input-border-color: #ada292;
  --input-text-color: #383a4a;
  --share-color: #53a2c2;

  --speech-bg: #fbead1;
  --speech-border: rgb(150, 108, 93);
  --speech-color: rgb(150, 108, 93);

  --tag-color-default: rgba(0, 0, 0, 0.05);
  --tag-color-hover: rgba(0, 0, 0, 0.15);
}

body.theme-default.light {
  --background-innocent: #c1e2a3;
  --background-criminal: #f6c0a9;
  --border-innocent: #83b792;
  --border-criminal: #c88580;
  --background-highlight-innocent: #dcebb7;
  --background-highlight-criminal: #ffd2bf;
  --background-innocent-consumed: #c1e2a3; /*  #d8e4b0; */
  --background-criminal-consumed: #f6c0a9; /*  #f6d2bc; */
  --background-highlight-innocent-consumed: #dcebb7; /* #e5edcc; */
  --background-highlight-criminal-consumed: #ffd2bf; /* #fcdecb; */
  --text-innocent: #3a4b57;
  --text-criminal: #503247;
  --innocent: #a3e2b1;
  --criminal: #ee95a4;
  --button-innocent: #77bb5f;
  --button-innocent-hover: #45ad835e;
  --button-criminal: #ca7868;
  --button-criminal-hover: #c3568353;
}

body.theme-acc-1.light {
  --bg: #f8faff;
  --background-innocent: #97dbe6;
  --background-criminal: #eebddc;
  --border-innocent: #27b2cb;
  --border-criminal: #b094c6;
  --background-highlight-innocent: #aae8f2;
  --background-highlight-criminal: #f7cde8;
  --background-innocent-consumed: #97dbe6; /* #c9e6f2; */
  --background-criminal-consumed: #eebddc; /* #f5d1eb; */
  --background-highlight-innocent-consumed: #aae8f2; /* #d5f0fb; */
  --background-highlight-criminal-consumed: #f7cde8; /* #fbdcf3; */
  --text-innocent: #403a57;
  --text-criminal: #444469;
  --innocent: #97dbe6;
  --criminal: #eebddc;
  --button-innocent: #44b1c1;
  --button-innocent-hover: #83bec7ac;
  --button-criminal: #c861a2;
  --button-criminal-hover: #b584a391;
}

/* Gray theme: light mode */
body.theme-gray.light {
  /* General light-mode values */
  --bg: #f4f4f4;
  --warn: #5f5f5f;
  --card-bg: #dddddd;
  --background-highlight: #e9e9e9;
  --modal-bg: #dddddd;
  --modal-bg-secondary: #cccccc;

  --text: #3f3f3f;
  --text-title: #242424;
  --text-title-time: #242424;
  --text-muted: #626262;

  --border-button: #929292;
  --button-background: rgba(0, 0, 0, 0.08);
  --border-neutral: #f8f8f8;

  --shadow-color: #a8a8a8;
  --shadow-color-secondary: #888888;
  --face-shadow-color: #666666;

  --input-bg-color: #ffffff;
  --input-border-color: #999999;
  --input-text-color: #292929;

  --share-color: #555555;

  --speech-bg: #e8e8e8;
  --speech-border: #777777;
  --speech-color: #555555;

  --tag-color-default: rgba(0, 0, 0, 0.06);
  --tag-color-hover: rgba(0, 0, 0, 0.16);

  /* Semantic states */
  --innocent: #bcbcbc;
  --criminal: #777777;

  --background-innocent: #ededed;
  --background-highlight-innocent: #eeeeee;
  --border-innocent: #d5d5d5;

  --background-criminal: #c8c8c8;
  --background-highlight-criminal: #c9c9c9;
  --border-criminal: #b8b8b8;

  --background-innocent-consumed: #d2d2d2;
  --background-highlight-innocent-consumed: #e2e2e2;
  --background-criminal-consumed: #ababab;
  --background-highlight-criminal-consumed: #bdbdbd;

  --text-innocent: #292929;
  --text-criminal: #111111;

  --button-innocent: #777777;
  --button-criminal: #444444;
  --button-innocent-hover: rgba(119, 119, 119, 0.28);
  --button-criminal-hover: rgba(68, 68, 68, 0.28);
}

/* Gray theme: dark mode */
body.theme-gray.dark {
  /* General dark-mode values */
  --bg: #171717;
  --warn: #c2c2c2;
  --card-bg: #232323;
  --background-highlight: #414141;
  --modal-bg: #292929;
  --modal-bg-secondary: #222222;

  --text: #ffffff;
  --text-title: #ffffff;
  --text-title-time: #ffffff;
  --text-muted: #aaaaaa;

  --border-button: #686868;
  --button-background: rgba(255, 255, 255, 0.09);
  --border-neutral: #3e3e3e;

  --shadow-color: #090909;
  --shadow-color-secondary: #111111;
  --face-shadow-color: #050505;

  --input-bg-color: #202020;
  --input-border-color: #686868;
  --input-text-color: #eeeeee;

  --share-color: #bcbcbc;

  --speech-bg: #303030;
  --speech-border: #8a8a8a;
  --speech-color: #d0d0d0;

  --tag-color-default: rgba(255, 255, 255, 0.07);
  --tag-color-hover: rgba(255, 255, 255, 0.18);

  /* Semantic states */
  --innocent: #a8a8a8;
  --criminal: #d4d4d4;

  --background-innocent: #0b0b0b;
  --background-highlight-innocent: #343434;
  --border-innocent: #292929;

  --background-criminal: #464646;
  --background-highlight-criminal: #525252;
  --border-criminal: #565656;

  --background-innocent-consumed: #242424;
  --background-highlight-innocent-consumed: #2e2e2e;
  --background-criminal-consumed: #3d3d3d;
  --background-highlight-criminal-consumed: #484848;

  --text-innocent: #ffffff;
  --text-criminal: #ffffff;

  --button-innocent: #a2a2a2;
  --button-criminal: #d8d8d8;
  --button-innocent-hover: rgba(168, 168, 168, 1.0);
  --button-criminal-hover: rgba(212, 212, 212, 0.35);
}


/* Global body styling updated */
html {
  background-color: var(--bg);
  text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--app-font); /* "Chalkboard SE", "Comic Sans MS", "Comic Sans", sans-serif; */
}

#root {
  width: 100%;
}

:root {
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: var(--bg);
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  line-height: 1.1;
}

button:disabled, select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button, select {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

ul {
  text-align: left;
  /* padding-left: 30px; */
}

li {
  margin: 10px;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: var(--bg);
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

button, select {
  padding: 10px 16px;
  border: 2px solid var(--border-button); /* Changed from highlight */
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  transition: all 0.2s ease;
  outline: none;
  background-color: transparent; /* var(--button-background); */
  border-color: var(--border-button);
  margin: 4px;
}

button:focus {
  background-color: var(--border-button);
  border-color: var(--border-button);
  outline: none;
}

button:hover:not(:disabled) {
  @media (hover: hover) {
    &:hover {
      background-color: var(--border-button);
      /* border-color: var(--border-button); */ /* Removed 27.06.2026, was overriding stuff for no gain? */
      outline: none;
    }
  }
}

input[type="text"],
input[type="email"] {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-bg-color);
  color: var(--input-text-color);
}

.banner {
  width: 80%;
  display: block;
  margin: 10px auto;
}

.banner img {
  width:100%;
}

div.result p {
  margin:0px; 
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'MyRibeye';
  font-style: normal;
  font-weight: 400;
  src: url('https://cluesbysam.com/s/assets/ribeye-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* comic-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'MyComicNeue';
  font-style: normal;
  font-weight: 400;
  src: url('https://cluesbysam.com/s/assets/comic-neue-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.video {
  max-width:500px;
  margin:10px auto;
}

.video button {
  background-color: unset !important;
}

div.week-puzzles {
  margin: 20px auto;
}

div.day-buttons, div.tutorial-buttons {
  margin: 5px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0px 5px;
  justify-content: center;
}

div.day-buttons button {
    width:43px;
    height:35px;
    padding:5px 1px;
    margin-left:0px;
    margin-right:0px;
    background-color: var(--button-background);
}

div.tutorial-buttons button {
    height:35px;
    padding:5px 10px;
    margin-left:0px;
    margin-right:0px;
    background-color: var(--button-background);
}


div.day-buttons button.tutorial {
  width: 60px;
}

div.day-buttons button:disabled {
  opacity: 0.25;
}


div.day-buttons button.today {
  opacity: 1.0;
  border-style: none;
  text-decoration: underline;
  background: none;
}

div.day-buttons button.completed, div.day-buttons button.tutorial {
  border-color: var(--border-innocent);
  color: var(--border-innocent);
}