@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400..700;1,400..700&family=Manrope:wght@400..700&Noto+Sans:wght@400..700&family=Noto+Sans+SC:wght@400..700&display=swap');

:root {
  color: var(--1C);
  font-family: 'Plus Jakarta Sans', 'Manrope', 'Noto Sans', 'Noto Sans SC';
  font-variation-settings: 'wght' 500;
  font-optical-sizing: auto;
  line-height: 1.5;
  word-break: break-word;
  scrollbar-width: thin;

  --light:  #f2f2f2;
  --orange: #ff862e;
  --purple: #e27dc9;
  --cyan:   #33cad5;
  --blue:   #4fb3ee;

  --blue100:   #4FB3EE;
  --blue140:   #2F6B8F;
  --blue30:    #CFEDFF;
  --blue50:    #A7D9F7;
  --blue70:    #84CAF3;
  --brown100:  #F4C260;
  --brown140:  #92743A;
  --brown30:   #FFEECE;
  --brown50:   #FAE0B0;
  --brown70:   #F7D490;
  --cyan100:   #33CAD5;
  --cyan140:   #1F7980;
  --cyan30:    #D1FCFF;
  --cyan50:    #99E5EA;
  --cyan70:    #70DAE2;
  --green100:  #4AD077;
  --green140:  #2C7D47;
  --green30:   #DBFFE7;
  --green50:   #A5E7BB;
  --green70:   #80DEA0;
  --orange100: #FF862E;
  --orange140: #99501C;
  --orange30:  #FFE7D6;
  --orange50:  #FFC396;
  --orange70:  #FFAA6D;
  --paars100:  #E27DC9;
  --paars140:  #884B79;
  --paars30:   #FEE2F8;
  --paars50:   #F0BEE4;
  --paars70:   #EBA4D9;
  --pink100:   #996764;
  --pink140:   #FFACA6;
  --pink30:    #FFEAE8;
  --pink50:    #FFD5D3;
  --pink70:    #FFC5C1;
  --red100:    #F96039;
  --red140:    #953A22;
  --red30:     #FFE4DD;
  --red50:     #FCAF9C;
  --red70:     #FB9074;
  --yellow100: #FFCB15;
  --yellow140: #997A0D;
  --yellow30:  #FFF7DA;
  --yellow50:  #FFE58A;
  --yellow70:  #FFDB5B;

  --1C: #1C1C1C;
  --76: #767676;
  --A4: #A4A4A4;
  --E4: #E4E4E4;
  --F0: #F0F0F0;
  --F7: #F7F7F7;
  --FF: #FFFFFF;
}

* {
  margin: unset;
  padding: unset;
}
[hidden] { display: none !important }
iframe   { border: unset }
svg:not([fill]) { fill: currentColor }
a {
  color: unset;
  text-decoration: unset;
  overflow: clip;
}
input, button {
  border: unset;
  font-family: unset;
  font-size: unset;
  font-variation-settings: unset;
  line-height: unset;
}
button {
  cursor: pointer;
  background: unset;
  color: unset;
  text-align: unset;
}
button svg, a svg { display: block }
label input[type="text"] {
  background-color: var(--light);
  border-radius: 10px;
  padding: 20px;
}
label input[type="file"] { display: none }
img { max-width: 100% }
:focus-visible { z-index: 1 }
.checkbox {
  width: 16px;
  height: 16px;
  padding: 8px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--light);
}
.checkbox:has(input:checked) {
  background: var(--yellow100) url("data:image/svg+xml;utf8,<svg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.3334 4L6.00008 11.3333L2.66675 8' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center no-repeat;
  box-shadow: unset;
}
.checkbox input { display: none }

body {
  padding-top: env(safe-area-inset-top, 0);
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
header, main, footer, form {
  box-sizing: border-box;
  width: min(40rem, 100%);
}
header {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding-inline: 10px;
  position: relative;
  z-index: 1;
}
header:has(> .fill:first-child > button:first-child > svg:first-child) { padding-left: unset }
header:has(                    > button:first-child > svg:first-child) { padding-left: unset }

footer {
  position: sticky;
  bottom: 0;
}
footer:has(nav) {
  width: 100%;
}
nav button {
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 1.5rem));
  font-size: 11px;
  letter-spacing: .2px;
}
nav .fg_yellow svg {
  fill: var(--yellow100);
}
ol, ul {
  list-style-position: outside;
  padding-inline-start: 2ch;
}
#beta {
  position: absolute;
  inset: 54px 0 0;
  letter-spacing: .2px;
}
#beta div {
  padding-bottom: 1px;
}

.safe_footer {
  height: env(safe-area-inset-bottom, 2rem);
}

.fs10 { font-size: 0.625rem }
.fs12 { font-size: 0.750rem }
.fs18 { font-size: 1.125rem }
.fs24 { font-size: 1.500rem; line-height: 1.25 }
.fs32 { font-size: 2.000rem; line-height: 1.25 }
.fs36 { font-size: 2.250rem; line-height: 1.25 }
.fs48 { font-size: 3.000rem; line-height: 1.25; overflow-wrap: break-word }
.fw400 { font-variation-settings: 'wght' 400 }
.fw600 { font-variation-settings: 'wght' 600 }
.fw700 { font-variation-settings: 'wght' 700 }
.lh2   { line-height: 2 }
.italic { font-style: italic }
.tx_center { text-align: center; text-wrap: balance }
.tx_mid    { text-align: center; text-wrap: balance }
.pre      { white-space: pre }
.pre_wrap { white-space: pre-wrap }
.crossed { text-decoration: line-through }

.invis { visibility: hidden }

.col, .col_mid { display: flex; flex-direction: column }
.row, .row_mid { display: flex }
.col_mid, .row_mid { align-items: center }
.row_base { display: flex; align-items: baseline }
.row_line { display: inline-flex }
.fill  { flex: 1 }
.fauto { flex: auto }
.gap2  { gap: 2px }
.gap5  { gap: 5px }
.gap10 { gap: 10px }
.gap15 { gap: 15px }
.gap20 { gap: 20px }
.gap30 { gap: 30px }
.gap40 { gap: 40px }
.gap60 { gap: 60px }
button.col { align-items: stretch } /* safari fix */

.word_ph, .opt_input {
  display: inline-block;
  margin-inline: 5px;
  padding-inline: 15px;
  min-width: 2ch;
  max-width: 75svw;
  border-radius: 10px;
}
.word_ph:not(.mode_ok, .mode_err) {
  background-color: var(--brown50);
  border: 2px dotted var(--brown100);
}
.word_ph.mode_ok {
  background-color: var(--FF);
}
.word_ph.mode_err {
  background-color: var(--FF);
  color: var(--red140);
}
.opt_input {
  background-color: var(--FF);
  border: 2px dotted transparent;
  outline: unset;
}
.opt_input:not(.mode_ok, .mode_err) {
  border-color: var(--1C);
}

.p4  { padding: 4px }
.p5  { padding: 5px }
.p10 { padding: 10px }
.p15 { padding: 15px }
.p20 { padding: 20px }
.p30 { padding: 30px }
.p40 { padding: 40px }
.p50 { padding: 50px }
.py2  { padding-block: 2px }
.py5  { padding-block: 5px }
.py10 { padding-block: 10px }
.py15 { padding-block: 15px }
.py20 { padding-block: 20px }
.py28 { padding-block: 28px }
.py30 { padding-block: 30px }
.py40 { padding-block: 40px }
.py50 { padding-block: 50px }
.py120 { padding-block: 120px }
.px10 { padding-inline: 10px }
.px15 { padding-inline: 15px }
.px20 { padding-inline: 20px }
.px30 { padding-inline: 30px }
.px40 { padding-inline: 40px }
.py10_end { padding-block-end: 10px }
.py40_end { padding-block-end: 40px }
.m10 { margin-block: 10px }
.m20 { margin-block: 20px }
.m30 { margin-block: 30px }
.m70 { margin-block: 70px }
.m80 { margin-block: 80px }
.m5_end  { margin-block-end: 5px }
.m8_end  { margin-block-end: 8px }
.m10_end { margin-block-end: 10px }
.m15_end { margin-block-end: 15px }
.m20_end { margin-block-end: 20px }
.m30_end { margin-block-end: 30px }
.m40_end { margin-block-end: 40px }
.m50_end { margin-block-end: 50px }
.m60_end { margin-block-end: 60px }
.m80_end { margin-block-end: 80px }
.m120_end { margin-block-end: 120px }
.m150_end { margin-block-end: 150px }

.br10 { border-radius: 10px }
.br15 { border-radius: 15px }
.br20 { border-radius: 20px }
.br30 { border-radius: 30px }
.br40 { border-radius: 40px }
.br60 { border-radius: 60px }
.round { border-radius: 100% }
.wh20 { min-width: 20px; min-height: 20px }
.wh32 { min-width: 32px; min-height: 32px }
.wch2 { min-width: 2ch }

.fg_red    { color: var(--red140) }
.fg_yellow { color: var(--yellow100) }
.bg_white  { background-color: #fff }
.bg_pink   { background-color: #ffaca6 }
.bg_light  { background-color: var(--light) }
.bg_dark   { background-color: var(--1C); color: #fff }
.bg_yellow { background-color: var(--yellow100) }
.bg_orange { background-color: var(--orange) }
.bg_purple { background-color: var(--purple) }
.bg_cyan   { background-color: var(--cyan) }
.bg_blue   { background-color: var(--blue) }
.bg_green  { background-color: var(--green100) }
.bg_red    { background-color: var(--red100) }
.bg_fade   { background: linear-gradient(.5turn, #FFFFFF00, #FFFFFFCC) }

.fg_76 { color: var(--76) }
.fg_A4 { color: var(--A4) }
.fg_E4 { color: var(--E4) }
.fg_F0 { color: var(--F0) }
.fg_F7 { color: var(--F7) }
.fg_FF { color: var(--FF) }
.bg_1C { background-color: var(--1C) }
.bg_76 { background-color: var(--76) }
.bg_A4 { background-color: var(--A4) }
.bg_E4 { background-color: var(--E4) }
.bg_F0 { background-color: var(--F0) }
.bg_F7 { background-color: var(--F7) }
.bg_FF { background-color: var(--FF) }

.hv_light:hover { background-color: var(--light) }
body:has(.body_brown)  { background-color: var(--brown30) }
body:has(.body_light)  { background-color: var(--light) }
body:has(.body_yellow) { background-color: var(--yellow100) }

body {
  background-position-y: -100svh;
  background-size: 100% 75%;
  background-repeat: no-repeat;
  transition: background-position-y 400ms ease-in;
}
body:has(.mode_ok, .mode_err) { background-position-y: 0 }
body:has(.mode_ok)  { background-image: linear-gradient(180deg, var(--green70) 0, var(--brown30) 100%) }
body:has(.mode_err) { background-image: linear-gradient(180deg, var(--red70)   0, var(--brown30) 100%) }

.chip_ok {
  background-color: var(--green30);
  box-shadow: inset 0 0 0 1px var(--green100);
  color: var(--green100);
}
.chip_err {
  background-color: var(--red30);
  box-shadow: inset 0 0 0 1px var(--red100);
  color: var(--red140);
}

.dot {
  width: .5rem;
  height: .5rem;
  border-radius: 100%;
}

.btn {
  padding: 20px 40px;
  text-align: center;
  transition: background-color 300ms ease-out;
}
.btn > svg { margin-inline-start: -10px }
.btn:is([disabled], [inert]) { color: var(--A4) }
.btn_dark        { background-color: var(--1C); color: var(--FF) }
.btn_dark[inert] { background-color: var(--A4); color: var(--FF) }
.btn_red         { background-color: var(--red140); color: var(--FF) }
.btn_stroke        { box-shadow: inset 0 0 0 2px var(--1C) }
.btn_stroke[inert] { box-shadow: inset 0 0 0 2px var(--A4); color: var(--A4) }
.btn_outline       { box-shadow: inset 0 0 0 2px var(--F7) }

.btn_shadow {
  background-color: var(--FF);
  box-shadow: 0 2px #00000012;
}
.btn_shadow[inert] {
  color: var(--A4);
  box-shadow: unset;
}

.btn_sound {
  padding: 20px;
  border-radius: 100%;
  background-color: #1C1C1C0D;
}
:is(.body_yellow, .bg_yellow) .btn_sound {
  background-color: #FFFFFF4D;
}

.invis:has(+ input[type="text"]) {
  white-space: pre;
  overflow: hidden;
}
.inp_dotted {
  border: 2px dotted var(--1C);
}

.frame_white {
  border: 3px solid #fff;
  box-shadow: 0px 18px 10px -15px #0000001F, 0px 3px 10px 0px #0000000D;
 }

.uline { border-bottom: 1px solid var(--F0) }
.ulink { text-decoration: underline; text-underline-position: under }

.overflow { overflow: auto; scrollbar-width: thin }
.clip { overflow: clip }

.backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--1C);
  opacity: .35;
}
.menu {
  display: flex;
  flex-direction: column;
  position: relative;
}
.menu_items {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 12rem;
}
.popup {
  position: fixed;
  inset: 0;
  z-index: 1; /* backdrop over header */
  padding: 60px 0 120px;
  box-sizing: border-box;
}
.popup > :not(.backdrop) {
  position: relative;
  margin-inline: auto;
  width: min(30rem, 100% - 60px);
  max-height: 100%;
  overflow: auto;
}

:has(> .popover) {
  position: relative;
}
.popover {
  position: absolute;
  inset: 0;
}

.card_stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: 62px;
  height: 284px;
  padding-left: 4px;
  color: var(--A4);
}
.card_stack .card {
  box-sizing: border-box;
  width: 34px;
  height: 42px;
  margin-top: -39.5px;
  background: var(--yellow100);
  border: 1px solid #FFFFFFCC;
  border-radius: 3px;
  transform: matrix(0.96, 0.27, -0.85, 0.52, 0, 0);
  display: grid;
  place-items: center;
}
.card_stack .card + .card {
  box-shadow: 2px 2px 1px -2px #00000026;
}
.card_stack .card_empty {
  background: var(--FF);
  border: 2px dotted var(--E4);
}
.card_stack .card_empty svg {
  width: 18px;
  stroke-width: 1.6px;
}

.list_cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.list_cta button:not([disabled]) {
  box-shadow: 0 2px #00000012;
}

.list_prog {
  display: flex;
  gap: 3px;
}
.list_step {
  flex: 1;
  height: 5px;
}
.list_step,
.list_step > * {
  border-radius: 5px;
}
.list_step .open {
  box-shadow: inset 0 0 0 1.3px var(--F0);
}
.list_cta [disabled] .list_step {
  box-shadow: inset 0 0 0 1.3px var(--E4);
}

:has(> .card_flip) { perspective: 100rem }
.card_flip {
  position: relative;
  transition: transform 100ms ease-out;
  transform-style: preserve-3d;
  box-shadow: 0 25px 25px -25px #00000026, 0 50px 50px -50px #00000026;
  border-radius: 20px;
}
.card_flip.flipped {
  transform: rotateY(-180deg);
  box-shadow: 0 2px 2px #0000000D;
  animation: card_flip 800ms linear;
}
@keyframes card_flip {
  0% {
    transform: scale(1.0);
    box-shadow: 0 25px 25px -25px #00000026, 0 50px 50px -50px #00000026;
    animation-timing-function: ease-in;
  }
  15% {
    transform: scale(1.05);
  }
  35% {
    transform: scale(1.1)  rotateY( -90deg);
    box-shadow: 0 25px 25px -25px #00000026, 0 70px 70px -50px #00000026;
  }
  55% {
    transform: scale(1.05) rotateY(-180deg);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    transform: scale(1.0)  rotateY(-180deg);
  }
}

.card_flip .card_face,
.card_flip .card_back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
}
.card_flip .card_face {
  border: 7px solid var(--FF);
  box-shadow: inset 0 0 0 1px #1C1C1C1A;
}
.card_flip .card_back {
  transform: rotateY(-180deg);
}

.stack { display: grid }
.stack > * { grid-area: 1 / 1 }
.stack_mid { place-items: center }

.fold_in, .fold_out {
  display: grid;
  align-items: start;
  transition: grid-template-rows 300ms ease-out, opacity 300ms ease-out;
}
.fold_in > *, .fold_out > * { overflow: hidden }
.fold_in  { grid-template-rows: 0fr; opacity: 0; overflow: hidden }
.fold_out { grid-template-rows: 1fr; opacity: 1 }

.avatar_s { width:  36px; height:  36px }
.avatar_l { width: 196px; height: 196px }
.avatar_s img, .avatar_l img,
.avatar_s svg, .avatar_l svg {
  width: 100%;
  height: 100%;
}
.avatar_s img, .avatar_l img {
  border-radius: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.awards {
  display: flex;
  gap: 10px;
}
.awards > * {
  border-radius: 30px;
  flex: 1;
  padding: 27px 0;
  text-align: center;
}
.award_progress {
  height: 5px;
  display: flex;
  gap: 1px;
}
.award_progress > * {
  border-radius: 3px;
  flex: 1;
}

.editable {
  outline: 2px dotted var(--1C);
  min-width: 2ch;
  width: fit-content;
  margin-inline: auto;
}

/*@keyframes blink_input_opacity_to_prevent_scrolling_when_focus {
  0%   { opacity: 0 }
  100% { opacity: 1 }
}
input[type="text"]:focus,
[contenteditable]:focus {
  animation: blink_input_opacity_to_prevent_scrolling_when_focus 1ms;
}*/

#add_entry .card_up,
#add_entry .card_down {
  transition: all 300ms ease-out;
}
#add_entry .card_up {
  margin-top: -12rem;
  padding: 0 20px 70px;
}
#add_entry .card_down {
  margin-top: 0;
  padding: 0 30px 0;
  flex: 1;
}

#add_entry .card_rest,
#add_entry .card_rise {
  transition: all 300ms ease-out;
  border: 7px solid var(--FF);
}
#add_entry .card_rest {
  flex: 1;
  box-shadow: inset 0 0 0 1px #1C1C1C1A;
  margin-bottom: -4rem;
  padding-block: 30px;
}
#add_entry .card_rise {
  flex: 0;
  box-shadow: inset 0 0 0 1px #1C1C1C1A, 0 25px 25px -25px #00000026, 0 0 20px #00000012, 0 50px 50px -50px #00000026;
  margin-bottom: 0;
  padding-block: calc(30px + 12rem) 30px;
}
#add_entry .clues {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
#add_entry .clues .hidden {
  grid-column: 2 / 3;
  visibility: hidden;
  height: 0;
}
#add_entry .clues > *:not(.hidden) {
  grid-column: 2 / 4;
}

#pos_tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  min-width: 100%;
  border: 2px solid var(--F0);
  box-sizing: border-box;
}

#calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
#calendar > :not(:empty) {
  border-radius: 40%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#carousel {
  display: grid;
  grid-template: 1fr / repeat(3, 100%);
  overflow: auto;
  padding-block: 20px;
  scroll-snap-type: x mandatory;
}
#carousel > * {
  scroll-snap-align: start;
  padding-inline: 20px;
  position: relative;
}
#carousel > :nth-child(1):after,
#carousel > :nth-child(2):after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 24px;
  height: 24px;
  margin-top: -4rem;
}
#carousel > :nth-child(2):before,
#carousel > :nth-child(3):before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 24px;
  height: 24px;
  margin-top: -4rem;
}
#carousel img {
  border-radius: 10px;
  box-shadow: 0 25px 25px -25px #00000026, 0 0 20px #00000012, 0 50px 50px -50px #00000026;
  max-width: 50svw;
  max-height: 300px;
}

@keyframes shake {
  0%, 70%,
  100% { rotate:   0deg }
   75% { rotate: -30deg }
   80% { rotate:  24deg }
   85% { rotate: -18deg }
   90% { rotate:  12deg }
   95% { rotate:  -6deg }
}