/*
 * Charte graphique des jeux: portal screens of edith.jsp and joe.jsp (level, rules, game mode).
 *
 * Loaded after edith_en.css / common.css. The default values below are the client theme
 * (blue #0b4da2 and orange #f7931e); another theme only overrides the --charte-* variables
 * in themes/<name>.css (see themes/README.md and include/theme.jsp).
 *
 * Rules of the charte: one plain grey background, the game colour is only an accent (pill dot
 * and illustration), one main pill button with a solid shadow, no borders, Poppins everywhere.
 */

@import url("poppins.css");


/* ----- Client theme (default): blue and orange ----- */
:root {
  --charte-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --charte-bg: #eff1f6;            /* plain background of every screen */
  --charte-card: #ffffff;
  --charte-ink: #34314f;           /* text */
  --charte-ink-soft: #6f6c8c;      /* subtitles */
  --charte-card-shadow: rgba(0, 0, 0, 0.08);

  --charte-pri: #0b4da2;           /* main button (Continuer, Jouer, Oui) */
  --charte-pri-dark: #07346f;      /* its solid shadow */
  --charte-back-bg: #f7931e;       /* close button, orange like the home page */
  --charte-back-fg: #ffffff;       /* white cross on the orange close button */
  --charte-back-shadow: #c06a0a;
  --charte-sec-bg: #f7931e;        /* secondary button (Non) */
  --charte-sec-fg: #ffffff;
  --charte-sec-shadow: #c06a0a;
  --charte-highlight: #fcdcb4;     /* title highlight */

  /* numbered rules: number colour, its text, background of the rule picture */
  --charte-step-1: #0b4da2;
  --charte-step-1-fg: #ffffff;
  --charte-step-1-soft: #e8f4fd;
  --charte-step-2: #f7931e;
  --charte-step-2-fg: #07346f;
  --charte-step-2-soft: #fef9e7;
  --charte-step-3: #2fb5b0;
  --charte-step-3-fg: #ffffff;
  --charte-step-3-soft: #fde8f0;

  /* level cards */
  --charte-level-1-bg: #d7f3f5;
  --charte-level-1-fg: #1f8a78;
  --charte-level-2-bg: #ffeca7;
  --charte-level-2-fg: #b5870a;
  --charte-level-3-bg: #fcd3e2;
  --charte-level-3-fg: #e73469;

  --charte-radius: 22px;
}

/* ----- Whole portal ----- */
body {
  background-color: var(--charte-bg);
  font-family: var(--charte-font);
  color: var(--charte-ink);
}

/* ----- Common layout of the level, rules and game mode screens ----- */
.level.charte-screen,
.content-type.charte-screen,
.rules.charte-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100%;
  background-color: var(--charte-bg);
  background-image: none;
  overflow-y: auto;
}

/* Top bar: close button on the left, pill in the middle */
.charte-top {
  position: absolute;
  top: 3vh;
  left: 3vw;
  right: 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

.charte-top .charte-back,
.charte-top-spacer {
  flex: none;
  width: clamp(48px, 8vh, 76px);
  height: clamp(48px, 8vh, 76px);
}

.charte-top .charte-back {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background-color: var(--charte-back-bg);
  color: var(--charte-back-fg);
  font-size: clamp(22px, 3.6vh, 34px);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 0 var(--charte-back-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.charte-top .charte-back:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--charte-back-shadow);
}

.charte-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  max-width: 60vw;
  padding: 0.45em 1.4em;
  border-radius: 999px;
  background-color: var(--charte-card);
  font-size: clamp(16px, 2.6vh, 26px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 5px 0 var(--charte-card-shadow);
}

.charte-pill i {
  flex: none;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
}

/* Centre: illustration, highlighted title, subtitle, choices */
.charte-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14vh 4vw 6vh;
  text-align: center;
}

.charte-illustration {
  width: clamp(96px, 17vh, 180px);
  height: clamp(96px, 17vh, 180px);
  margin-bottom: 3vh;
  border-radius: 22%;
  overflow: hidden;
  transform: rotate(-5deg);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.12);
  /* solid shadow in a darker shade of the game accent (as in the charte mockup) */
  box-shadow: 0 8px 0 color-mix(in srgb, var(--charte-accent, #888888) 78%, #000000);
}

.charte-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.charte-title {
  margin: 0;
  font-family: var(--charte-font);
  font-size: clamp(28px, 5.6vh, 58px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--charte-ink);
}

.charte-title span {
  padding: 0 0.25em;
  background: linear-gradient(transparent 62%, var(--charte-highlight) 62%);
}

.charte-subtitle {
  margin: 1.2vh 0 0;
  font-size: clamp(16px, 2.8vh, 28px);
  font-weight: 500;
  color: var(--charte-ink-soft);
}

/* ----- Level screen: three pastel cards with their number ----- */
.charte-screen .level-choice {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw;
  margin-top: 5vh;
}

.charte-screen .level-choice .level-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(130px, 24vh, 240px);
  padding: 2.8vh 1vw;
  border-radius: var(--charte-radius);
  color: var(--charte-ink);
  font-size: clamp(18px, 3.2vh, 32px);
  font-weight: 800;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.charte-screen .level-choice .level-button:hover {
  transform: translateY(-3px);
}

.charte-screen .level-choice .level-button:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

.charte-screen .level-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  margin-bottom: 0.5em;
  border-radius: 50%;
  background-color: var(--charte-card);
  font-size: 1.25em;
  font-weight: 800;
}

.charte-screen .level-button-easy { background-color: var(--charte-level-1-bg); }
.charte-screen .level-button-easy .level-number { color: var(--charte-level-1-fg); }
.charte-screen .level-button-medium { background-color: var(--charte-level-2-bg); }
.charte-screen .level-button-medium .level-number { color: var(--charte-level-2-fg); }
.charte-screen .level-button-hard { background-color: var(--charte-level-3-bg); }
.charte-screen .level-button-hard .level-number { color: var(--charte-level-3-fg); }

/* ----- Game mode screen: white cards (same layout as the level screen) ----- */
.charte-screen .content-type-choice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw;
  margin-top: 5vh;
}

.charte-screen .content-type-choice .content-type-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(150px, 28vh, 280px);
  padding: 3vh 2.4vw;
  border-radius: var(--charte-radius);
  background-color: var(--charte-card);
  color: var(--charte-ink);
  font-size: clamp(18px, 3.2vh, 32px);
  font-weight: 800;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.charte-screen .content-type-choice .content-type-button:hover {
  transform: translateY(-3px);
}

.charte-screen .content-type-choice .content-type-button:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

/* Game mode cards: a pictogram in a pastel square above the label (img/charte/modes/<type>.svg) */
.charte-screen .content-type-choice .content-type-button[data-type] {
  flex-direction: column;
  gap: 1.6vh;
  padding-top: 2.6vh;
}

.charte-screen .content-type-choice .content-type-button[data-type]::before {
  content: "";
  flex: none;
  width: clamp(64px, 11vh, 104px);
  height: clamp(64px, 11vh, 104px);
  border-radius: 22px;
  background-color: #e8f4fd;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 62%;
}

.charte-screen .content-type-button[data-type="table"]::before { background-color: #fef9e7; background-image: url("../img/charte/modes/table.svg"); }
.charte-screen .content-type-button[data-type="picture"]::before { background-color: #e8f4fd; background-image: url("../img/charte/modes/picture.svg"); }
.charte-screen .content-type-button[data-type="propositions"]::before { background-color: #f0eeff; background-image: url("../img/charte/modes/propositions.svg"); }
.charte-screen .content-type-button[data-type="freeAnswer"]::before { background-color: #eaf7f5; background-image: url("../img/charte/modes/freeAnswer.svg"); }
.charte-screen .content-type-button[data-type="recipe"]::before { background-color: #fdf0e8; background-image: url("../img/charte/modes/recipe.svg"); }
.charte-screen .content-type-button[data-type="ingredients"]::before { background-color: #eaf7f5; background-image: url("../img/charte/modes/ingredients.svg"); }
.charte-screen .content-type-button[data-type="quickmode"]::before { background-color: #fef9e7; background-image: url("../img/charte/modes/quickmode.svg"); }
.charte-screen .content-type-button[data-type="carefulmode"]::before { background-color: #fde8f0; background-image: url("../img/charte/modes/carefulmode.svg"); }
.charte-screen .content-type-button[data-type="color"]::before { background-color: #fdf0e8; background-image: url("../img/charte/modes/color.svg"); }
.charte-screen .content-type-button[data-type="form"]::before { background-color: #e8f4fd; background-image: url("../img/charte/modes/form.svg"); }
.charte-screen .content-type-button[data-type="colorform"]::before { background-color: #f0eeff; background-image: url("../img/charte/modes/colorform.svg"); }
.charte-screen .content-type-button[data-type="europe"]::before { background-color: #eaf7f5; background-image: url("../img/charte/modes/europe.svg"); }
.charte-screen .content-type-button[data-type="states"]::before { background-color: #e8f4fd; background-image: url("../img/charte/modes/states.svg"); }

/* ----- Intermediate screens: geo (find / name the place), cook (starter / main / dessert, recipes),
   puzzle (pictures). Plain background and close button; geo and cook use the level screen layout ----- */
.choose-content.charte-screen {
  position: relative;
  background-color: var(--charte-bg) !important;
  background-image: none !important;
}

.choose-content-geo.charte-screen,
.choose-content-cook.charte-screen {
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
}

.charte-screen .type-choice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw;
  margin: 5vh 0 0;
}

.charte-screen .type-choice .button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6vh;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: clamp(150px, 28vh, 280px);
  padding: 3vh 2.4vw;
  border: 0;
  border-radius: var(--charte-radius);
  background-color: var(--charte-card) !important;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.charte-screen .type-choice .button:hover {
  transform: translateY(-3px);
}

.charte-screen .type-choice .button:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

.charte-screen .type-choice .type-choice-title,
.charte-screen #placeTitle,
.charte-screen #nameTitle {
  flex: none;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--charte-ink);
  font-family: var(--charte-font);
  font-size: clamp(18px, 3.2vh, 32px);
  font-weight: 800;
  line-height: 1.2;
}

.charte-screen .type-choice .dish-image-first {
  width: clamp(120px, 22vh, 220px);
  height: clamp(120px, 22vh, 220px);
  padding: 0;
  border-radius: 16px;
  object-fit: cover;
}

/* Cook recipes: the title written by the portal script takes the charte title style */
.choose-content-cook-recipe.charte-screen .content-type-title {
  font-family: var(--charte-font);
  font-size: clamp(26px, 5vh, 52px);
  font-weight: 800;
  color: var(--charte-ink);
}

/* Cook recipes: white cards instead of the coloured tiles written inline by the portal script */
.choose-content-cook-recipe.charte-screen #container-recipes {
  justify-content: center;
  gap: 2.4vh 1.6vw;
  padding: 0 3vw 4vh;
}

.choose-content-cook-recipe.charte-screen #container-recipes > .button {
  padding: 0;
}

.choose-content-cook-recipe.charte-screen .card {
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: var(--charte-radius);
  background-color: var(--charte-card) !important;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.12s ease;
}

.choose-content-cook-recipe.charte-screen .card:hover {
  transform: translateY(-3px);
}

.choose-content-cook-recipe.charte-screen .dish-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  padding: 0;
  object-fit: cover;
}

.choose-content-cook-recipe.charte-screen .content-title-dish-choice-specify {
  padding: 1.6vh 1vw 2vh;
  font-family: var(--charte-font);
  font-size: clamp(16px, 2.6vh, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--charte-ink);
}

/* ----- Rules screen: numbered rounded cards, pill "Continuer" ----- */
.rules.charte-screen .rules-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.2vh;
  margin: 0;
  padding: 15vh 5vw 1vh;
}

.rules.charte-screen .rule {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin: 0;
  padding: 1.6vh 2vw;
  border-radius: var(--charte-radius);
  background-color: var(--charte-card);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.06);
}

.rules.charte-screen .rule[data-step]::before {
  content: attr(data-step);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 6.4vh, 64px);
  height: clamp(40px, 6.4vh, 64px);
  border-radius: 50%;
  background-color: var(--charte-step-1);
  color: var(--charte-step-1-fg);
  font-size: clamp(18px, 3vh, 30px);
  font-weight: 800;
}

.rules.charte-screen .rule[data-step="2"]::before,
.rules.charte-screen .rule[data-step="5"]::before {
  background-color: var(--charte-step-2);
  color: var(--charte-step-2-fg);
}

.rules.charte-screen .rule[data-step="3"]::before,
.rules.charte-screen .rule[data-step="6"]::before {
  background-color: var(--charte-step-3);
  color: var(--charte-step-3-fg);
}

.rules.charte-screen .rule-text {
  flex: 1;
  margin: 0;
  font-size: clamp(16px, 3.2vh, 30px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--charte-ink);
}

.rules.charte-screen .rule-image-container {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 12vh, 120px);
  height: clamp(64px, 12vh, 120px);
  padding: 1.2vh;
  border-radius: 18px;
  background-color: var(--charte-step-1-soft);
}

.rules.charte-screen .rule[data-step="2"] .rule-image-container,
.rules.charte-screen .rule[data-step="5"] .rule-image-container {
  background-color: var(--charte-step-2-soft);
}

.rules.charte-screen .rule[data-step="3"] .rule-image-container,
.rules.charte-screen .rule[data-step="6"] .rule-image-container {
  background-color: var(--charte-step-3-soft);
}

.rules.charte-screen .rule-image {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
}

.rules.charte-screen .rules-bottom {
  flex: none;
  height: auto;
  padding: 3vh 5vw 5vh;
}

.rules.charte-screen .rules-button {
  padding: 1.6vh 6vw;
  border-radius: 999px;
  background-color: var(--charte-pri);
  color: #ffffff;
  font-size: clamp(18px, 3.2vh, 30px);
  font-weight: 800;
  box-shadow: 0 8px 0 var(--charte-pri-dark);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rules.charte-screen .rules-button:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 var(--charte-pri-dark);
}

/* ----- Narrow screens ----- */
@media screen and (max-width: 632px), all and (max-device-width: 480px) {
  .charte-pill {
    max-width: 50vw;
  }

  .rules.charte-screen .rule {
    padding: 1.4vh 3vw;
  }
}