.no-underline {
  text-decoration: none !important;
}
.no-underline:hover {
  text-decoration: none !important;
}

@font-face {
  font-family: "Luckiest Guy";
  src: url('../fonts/LuckiestGuy.ttf');
}

/* "Bree Serif" is a per-script stack under a single family name. Browser picks
   a face per codepoint via unicode-range; call sites keep saying "Bree Serif".
   Every face declares font-weight/style explicitly so Safari matches it as-is
   instead of synthesizing a heavier cut. */

/* Latin (default range — matches anything not claimed by a restricted face). */
@font-face {
  font-family: "Bree Serif";
  src: url('../fonts/BreeSerif-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

/* Vietnamese diacritics — Bree lacks these glyphs, so a stray Vietnamese word
   inside otherwise-Latin copy lands here. Aleo Regular is the closest weight
   match to Bree; Medium and SemiBold both read as bold beside it (QA feedback).
   Cards that are wholly Vietnamese are tagged lang="vi" and swapped below, so
   this face only ever covers the mixed case. */
@font-face {
  font-family: "Bree Serif";
  src: url('../fonts/Aleo-Regular.ttf');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9;
  font-weight: normal;
  font-style: normal;
}

/* Scripts Bree has no glyphs for at all. Each is pinned to one installed face
   so Safari can't fall back per glyph (root cause of the "Chinese weight
   inconsistent" report) and can't synthesize bold ("Arabic too bold"). */

/* Cyrillic — Russian et al. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif"), local("PT Serif"), local("Times New Roman");
  unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
  font-weight: normal;
  font-style: normal;
}

/* Greek. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif"), local("Times New Roman"), local("Georgia");
  unicode-range: U+0370-03FF, U+1F00-1FFF;
  font-weight: normal;
  font-style: normal;
}

/* Arabic. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Naskh Arabic UI"), local("Noto Naskh Arabic"), local("Amiri"), local("Geeza Pro");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  font-weight: normal;
  font-style: normal;
}

/* Hebrew. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif Hebrew"), local("Arial Hebrew"), local("New Peninim MT"), local("Times New Roman");
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
  font-weight: normal;
  font-style: normal;
}

/* Armenian. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif Armenian"), local("Mshtakan"), local("Noto Sans Armenian");
  unicode-range: U+0530-058F, U+FB13-FB17;
  font-weight: normal;
  font-style: normal;
}

/* Georgian. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif Georgian"), local("Noto Sans Georgian"), local("Sylfaen");
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
  font-weight: normal;
  font-style: normal;
}

/* Devanagari — Hindi. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif Devanagari"), local("Kohinoor Devanagari"), local("Devanagari MT"), local("Noto Sans Devanagari");
  unicode-range: U+0900-097F, U+A8E0-A8FF;
  font-weight: normal;
  font-style: normal;
}

/* Bengali. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif Bengali"), local("Kohinoor Bangla"), local("Bangla MN"), local("Noto Sans Bengali");
  unicode-range: U+0980-09FF;
  font-weight: normal;
  font-style: normal;
}

/* Thai. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif Thai"), local("Thonburi"), local("Ayuthaya"), local("Noto Sans Thai");
  unicode-range: U+0E00-0E7F;
  font-weight: normal;
  font-style: normal;
}

/* Khmer. */
@font-face {
  font-family: "Bree Serif";
  src: local("Noto Serif Khmer"), local("Khmer MN"), local("Khmer Sangam MN"), local("Noto Sans Khmer");
  unicode-range: U+1780-17FF, U+19E0-19FF;
  font-weight: normal;
  font-style: normal;
}

/* CJK — Chinese, Japanese, Korean. */
@font-face {
  font-family: "Bree Serif";
  src: local("PingFang SC"), local("Hiragino Mincho ProN"), local("YuMincho"), local("Noto Serif SC"), local("Microsoft YaHei"), local("SimSun");
  unicode-range: U+1100-11FF, U+3000-303F, U+3040-309F, U+30A0-30FF, U+3130-318F, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FF00-FFEF;
  font-weight: normal;
  font-style: normal;
}

/* Separate family so :lang(vi) can swap the *whole* text to Aleo, not just VN
   codepoints. Fixes per-char Bree/Aleo weight inconsistency on Vietnamese
   content (QA screenshot). Medium is the weight match for a full-run swap. */
@font-face {
  font-family: "Aleo";
  src: url('../fonts/Aleo-Medium.ttf');
  font-weight: normal;
  font-style: normal;
}

/* Route Vietnamese content (elements tagged lang="vi") entirely to Aleo. */
.font-bree:lang(vi),
[lang="vi"] .font-bree {
  font-family: "Aleo", serif;
}


@font-face {
  font-family: "Roboto", sans-serif;
  src: url('../fonts/Roboto-Regular.ttf');
}

.font-luckiest {
  font-family: "Luckiest Guy";
  font-size: 2.5em;
}

.font-bree {
  font-family: "Bree Serif", serif;
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

.font-roboto {
  font-family: "Roboto", sans-serif;
}

@font-face {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style: normal;
}

.ico {
  font-family: "FontAwesome";
}

textarea {
  resize: none;
}

.navbar-inverse .navbar-nav > li > a {
  color: #9c9c9c;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navbar {
  margin-bottom: 0px;
}

.navbar-right {
  margin-left: 5px;
  margin-right: 5px;
}

.navbar-text {
  text-decoration: none !important;
}
.navbar-text:hover {
  color: #fff;
}

.jumbotron {
  margin-top: 25px;
  background-image: url("../img/food.jpg");

  background-attachment: fixed;
  margin-bottom: 20px;
  padding-bottom: 2vmin;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.jumbo-tagline {
  font-size: 1.2em;
}

.footer {
  margin-top: 2em;
  margin-bottom: 1em;
}

.img-small {
  max-height: 240px;
  border-radius: 10px;
}

.img-index {
  max-height: 150px;
  border-radius: 5px;
}

.show-problem {
  font-size: 1.5em;
}

#upload-file-info {
  font-size: 1em;
}

.index-points {
  font-size: 1.35em;
  padding-top: 4px;
  padding-bottom: 4px;
}
.index-name {
  font-size: 1.4em;
  color: #333;
  padding: 0.4em 0 0.4em 0;
}

.panel-heading-index {
  height: auto;
  color: black;
}

.index-game-stats {
  font-size: 1.2em;
  color: #f8a91a;
  padding: 0;
  margin: 0;
}

.panel-body-index {
  margin: 0;
  padding: 0 0 1em 0;
}

.privacy-rules {
  line-height: 200%;
}

.game-description {
  height: auto;
  font-size: 1em;
  margin: 0;
  padding: 0;
  padding-left: 0.4em;
  padding-right: 0.4em;
}

.index-answer {
  font-size: 1.5em;
  color: #1e6894;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.5s all;
}

.ctrl-panel-text {
  font-family: "Bree Serif";
  color: #fff;
  font-size: 1.4em;
}
.control-panel-header {
  padding: 0.6em 0 0.6em 0;
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.inline {
  display: inline;
}

.badge-danger {
  background-color: #d43f3a;
  font-size: 1.1em;
}

.badge-success {
  background-color: #34be38;
  font-size: 1.1em;
}

.badge-primary {
  background-color: #3173ad;
  font-size: 1.1em;
}

.badge-questions {
  background-color: #fff;
  color: #0a91ab;
  font-size: 1em;
  padding-top: 1px;
  padding-bottom: 1px;
}

.badge-thanks {
  background-color: #fff;
  color: #f0386b;
  font-size: 1em;
  padding-top: 1px;
  padding-bottom: 1px;
}

.badge-info {
  background-color: #6787a6;
  font-size: 1em;
  padding-top: 1px;
  padding-bottom: 1px;
}

.pad-right {
  padding-right: 0.8em;
}

.pad-right-mobile {
  margin-right: 0.6em;
}

.well {
  padding-top: 12px;
  padding-bottom: 12px;
  background: white;
  border-radius: 10px;
  border: 0px solid grey;
}

.scrollable {
  overflow: auto;
  height: 90px;
  width: 100%;
  vertical-align: middle;
}

.game-control-box {
  height: 55px;
}

.index-by {
  padding-top: 16px;
  padding-bottom: 0px;
  margin: 0;
  font-size: 0.84em;
}

.user-link {
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 1em;
}

.mid {
  vertical-align: middle;
}

.question-box {
  overflow: auto;
  height: 90px;
  width: 100%;
  vertical-align: middle;
}

.imageless-question-box {
  overflow: auto;
  height: 90px;
  width: 100%;
  vertical-align: middle;
}

.question-stats {
  font-size: 1.2em;
  color: #f8a91a;
  margin-top: 9px;
  padding-bottom: 3px;
}

.question-count {
  font-size: 1em;
}

.existing-questions {
  height: 323px;
  overflow: auto;
  border-radius: 3px;
}

hr {
  margin: 10px 0 10px 0;
}

alert {
  margin: 0;
}

.shaded {
  background-color: #f3f5f8;
  padding: 5px 15px 15px 15px;
  border-radius: 5px;
}

.non-shaded {
  padding: 5px 15px 15px 15px;
  border-radius: 5px;
}

.faded-heart {
  color: #f35f88;
}

.btn-thanks {
  background: #f0386b;
  color: #ffffff;
  transition: all 0.2s;
}
.btn-thanks:hover,
.btn-thanks:focus,
.btn-thanks:active,
.btn-thanks.active,
.open > .dropdown-toggle.btn-thanks {
  background: #d83260;
  color: #ffffff;
}

.btn-defaulted {
  background: #8d98a2; 
  color: #ffffff;
  transition: all 0.2s;
}
.btn-defaulted:hover,
.btn-defaulted:focus,
.btn-defaulted:active,
.btn-defaulted.active,
.open > .dropdown-toggle.btn-defaulted {
  background: #65717c;
  color: #ffffff;
}

.btn-dangerous {
  background: #6d6479; 
  color: #ffffff;
  transition: all 0.2s;
}
.btn-dangerous:hover,
.btn-dangerous:focus,
.btn-dangerous:active,
.btn-dangerous.active,
.open > .dropdown-toggle.btn-dangerous {
  background: #575060;
  color: #ffffff;
}

.btn-successful {
  background: #fb4d3d; 
  color: #ffffff;
  transition: all 0.2s;
}
.btn-successful:hover,
.btn-successful:focus,
.btn-successful:active,
.btn-successful.active,
.open > .dropdown-toggle.btn-successful {
  background: #c83d30;
  color: #ffffff;
}

.btn-infoed {
  background: #2ebe4e; 
  color: #ffffff;
  transition: all 0.2s;
}
.btn-infoed:hover,
.btn-infoed:focus,
.btn-infoed:active,
.btn-infoed.active,
.open > .dropdown-toggle.btn-infoed {
  /*background: #269e41;*/
  color: #ffffff;
}

.btn-primaryed {
  background: #0a91ab;
  color: #ffffff;
  transition: all 0.2s;
}
.btn-primaryed:hover,
.btn-primaryed:focus,
.btn-primaryed:active,
.btn-primaryed.active,
.open > .dropdown-toggle.btn-primaryed {
  background: #087286;
  color: #ffffff;
}

.panel {
  border: 0;
  overflow: hidden;
}

.panel > .panel-heading {
  background-image: none;
  background-color: #6787a6;
  color: #fff;
  border: 0;
}

.panel-menus {
  border-radius: 3px;
  padding: 0;
  margin: 0;
  border: 0;
  transition: all 0.2s;
}
.panel-menus:hover {
  box-shadow: 0 12px 14px 2px rgba(0, 0, 0, 0.16),
    0 3px 24px 5px rgba(0, 0, 0, 0.16), 0 8px 10px -5px rgba(0, 0, 0, 0.24);
}

.panel-game {
  border-radius: 3px;
  padding: 0;
  margin: 0;
  border: 0;
  transition: all 0.3s;
}
.panel-game:hover {
  box-shadow: 0 12px 14px 2px rgba(0, 0, 0, 0.14),
    0 3px 24px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.paginator {
}

.box-shadow--2dp {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.box-shadow--3dp {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2),
    0 1px 8px 0 rgba(0, 0, 0, 0.12);
}
.box-shadow--4dp {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.box-shadow--6dp {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
    0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.box-shadow--8dp {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.box-shadow--16dp {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
    0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.index-game-settings {
  font-size: 1.2em;
  padding: 0.25em;
  color: #c7c7c7;
}
.index-game-settings:hover {
  color: #0a91ab; /*turq*/
}

.label-default {
  background-color: #6787a6;
  color: #fff;
}

.pointer-cursor {
  cursor: pointer;
}

.label-privacy {
  cursor: default;
  font-family: "Bree Serif";
  color: #fff;
  font-size: 0.95em;
  border-radius: 3px;
  padding: 2px 6px 4px 6px;
}

.label-faded {
  background-color: #d6dfe7 !important;
}

.label-private {
  background-color: #6787a6; 
}

.label-pending {
  background-color: #ef8354; 
}

.label-shared {
  background-color: #fb4d3d;
}

.label-hidden {
  background-color: #8d98a2;
}

.label-featured {
  background-color: #f0386b;
}

.label-daily {
  background-color: #0a91ab;
}

.list-group-item {
  border: 0px solid;
}

.page-header {
  margin-top: 0px;
  margin-bottom: 30px;
}
.alert-pink {
  background-image: none;
  background-color: #f0386b;
  color: #fff;
  font-size: 1.2em;
  border: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px 10px 10px 10px;
  transition: all 0.2s;
}
.alert-pink:hover {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.alert-success {
  background-image: none;
  background-color: #0a91ab;
  color: #fff;
  font-size: 1.2em;
  border: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px 10px 10px 10px;
  transition: all 0.2s;
}
.alert-success:hover {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.alert-danger {
  background-image: none;
  background-color: #fb4d3d;
  color: white;
  font-size: 1.2em;
  border: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px 10px 10px 10px;
  transition: all 0.2s;
}
.alert-danger:hover {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.alert-info {
  background-image: none;
  background-color: #6787a6;
  color: white;
  font-size: 1.2em;
  border: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px 10px 10px 10px;
  transition: all 0.2s;
}
.alert-info:hover {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.btn-link-q {
  font-size: 1.2em;
  color: #f8a91a;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.created {
  font-size: 1.2em;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.btn-link-d {
  font-size: 1.2em;
  padding: 0;
  margin: 0;
  background-color: #fff;
  transition: 2s;
}

.panel-icon {
  font-size: 1.2em;
  color: #f0386b;
  margin: 0.1em;
}

.hero {
  background-color: #fac564;
  background-image: url("../img/food.jpg");
  margin-top: 50px;
  background-attachment: fixed;
}

.logo {
  margin-top: 5em;
  margin-bottom: 5em;
}

.typing {
  margin-top: 60px;
  margin-bottom: 60px;
  font-family: "Bree Serif";
  color: #444;
}

@media screen and (min-width: 0px) {
  .logo {
    width: 80%;
  }
  .typing {
    font-size: 1.55em;
  }
}

@media screen and (min-width: 600px) {
  .logo {
    width: 70%;
  }
  .typing {
    font-size: 2.2em;
  }
}

@media screen and (min-width: 900px) {
  .logo {
    width: 50%;
  }
  .typing {
    font-size: 2.6em;
  }
}

@media screen and (min-width: 1200px) {
  .logo {
    width: 40%;
  }
  .typing {
    font-size: 3.2em;
  }
}