@font-face {
  font-family: 'SignikaNegative';
  src: url('/fonts/SignikaNegative.ttf') format('truetype');
}

:root {
    font-size: 20px;
    font-family: 'SignikaNegative';
    --real-vh: 100vh;

    --pink: #eb9399;
    --peach: #ffe8ce;
    --peach-light: #fff2dd;
    --white: #fefcf0;
    --text: #784c27;
    --text-light: #fef8f7;
    --border: #a56534;

    --shadow: #ffb2824D;
    --theme-shadow: #554;

    --positive: #7fb77e;
    --negative: #d85a5a;

    --transition-speed: 400ms;
    --fast-transition-speed: 150ms;

    --canvas-size: 16rem;
    --note-size: 20rem;
}

* {
    font-family: 'SignikaNegative';
    font-size: 1rem;
}

::-webkit-scrollbar {
    display: none;
}

html,
body {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: var(--text);
    background-color: var(--peach);
}

.hidden {
  display: none!important;
}

h1 {
    font-size: 1.25rem;
}

h2 {
    font-size: 1.1rem;
}

#notes img { 
  width:150px; 
  margin:10px; 
  border-radius:8px;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
}

main#notes button {
    margin:5px 0;
    padding:8px 12px;
}
main#notes button input { display:block; margin:5px 0; padding:8px; width:100%; }
#draw{
  border:1px solid #ccc;
  background:#fffcc9; /* effet post-it */
  margin:10px 0;
  cursor: crosshair;
}

#tools {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}


/* Login page */
main#loginMain {
    background-color: var(--peach-light);
    width: 100%;
    height: 100%;
}

#logoSection {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    height: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.5rem;
}

#logoSection img {
    width: 3rem;
    height: 3rem;
}

#loginSection,
#registerSection {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
}

#loginSwitch,
#registerSwitch {
    padding: 0 0.25rem;
    cursor: pointer;
}

input {
    background: var(--white);
    border: none;
    box-shadow: 0px 6px 0px var(--shadow);
    min-width: 0;
    width: min(75%, 15rem);
    max-width: min(75%, 15rem);
    font-weight: bold;
    color: var(--text);
    padding: 0.8rem 1.5rem;
    margin: 0.5rem 0;
    border-radius: 1.5rem;
    cursor: pointer;
    font-size: 1.05rem;
    will-change: transform;
    transform: translateZ(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

input:focus {
    outline: 2px solid var(--border);
    box-shadow: 0px 4px 0px var(--shadow);
    transform: scale(1.05) translateZ(0);
}

.input-view-wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.view-toggle {
    position: absolute;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    translate: 0 -50%;
    right: -1.25rem;
    cursor: pointer;
}

input.view-lock {
    transform-origin: 100% 50%;
}

.view-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

p[tabindex]:focus,
span[tabindex]:focus {
  outline: 2px solid var(--border);
  border-radius: 0.25rem;
  outline-offset: 2px;
}

p.message {
    min-width: 0;
    width: min(75%, 15rem);
    max-width: min(75%, 15rem);
    text-align: center;
    margin: 0 0 0.25rem 0;
    color: var(--negative);
    overflow: hidden;
    font-weight: 600;
    height: 0;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.5s ease;
}

p.message.success {
    color: var(--positive);
}

p.message.shake {
    animation: 0.4s shake 0.2s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

p.message.visible {
    margin-top: 0.25rem;
    vertical-align: middle;
    height: auto;
    opacity: 1;
}

form > button {
    margin-top: 0.5rem;
}

button {
    background: var(--pink);
    border: 2px solid var(--border);
    box-shadow: 0px 6px 0px var(--shadow);
    font-weight: bold;
    color: var(--text-light);
    padding: 0.8rem 1.5rem;
    border-radius: 1.5rem;
    cursor: pointer;
    font-size: 1.05rem;
    z-index: 10;
    will-change: transform;
    transform: translateZ(0);
    transition: transform 0.2s ease;
}

button:hover,
button:focus,
.btn:hover,
.btn:focus {
    transform: scale(1.05) translateZ(0);
}

/* Draw page */
main#notes {
    width: 100%;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    background-color: var(--peach);
}

canvas {
    width: var(--canvas-size);
    height: var(--canvas-size);
    cursor: crosshair;
    transition: filter 0.25s ease-in-out;
    /* prevent scroll/zoom and random pointercancel event */
    touch-action: none;
}

div#new-note-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

div#canvas-command,
div#draw-palette {
    display: flex;
    background: var(--peach-light);
    width: var(--canvas-size);
    height: 2rem;
    align-items: center;
    z-index: 3;
}

div#canvas-command span#cancel-btn,
div#canvas-command span#save-btn {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    margin: 0 0.5rem;
}

div#canvas-command span svg,
div#draw-palette span svg {
    width: 100%;
    height: 100%;
    fill: var(--text);
}

div#canvas-command span,
div#draw-palette span {
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform var(--transition-speed);
}

div#draw-palette #eraser-brush,
div#draw-palette #selected-brush {
    margin: 0 0.5rem;
}

div#brush-size-selector span[selected] span.icon-round-brush {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

span.color-brush[selected] {
    transform-origin: 50% 50%;
    transform: scale(1.2);
}

span#eraser-brush[selected] {
    transform: scale(1.3);
}

div#canvas-command {
    justify-content: space-between;
    border-radius: 0.5rem 0.5rem 0 0;
}

div.undo-command {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

div.undo-command span {
    transition: opacity 0.5s;
}

span.inactive-btn {
    opacity: 0.5;
}

div#draw-palette {
    justify-content: space-between;
    gap: 1.2rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

#brush-size-selector {
    height: 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
}

#brush-size-selector span.icon-round-brush {
    width: 0.8rem;
    height: 0.8rem;
    background: var(--text);
    border-radius: 50%;
}

span#brush-size-1 span.icon-round-brush {
    transform-origin: 50% 50%;
    width: 0.4rem;
    height: 0.4rem;
}

span#brush-size-2 span.icon-round-brush {
    transform-origin: 50% 50%;
    width: 0.5rem;
    height: 0.5rem;
}

span#brush-size-3 span.icon-round-brush {
    transform-origin: 50% 50%;
    width: 0.6rem;
    height: 0.6rem;
}

span#selected-brush {
    background-color: #000;
    border-radius: 0.25rem;
}

span.color-brush[visible="false"] {
    opacity: 0;
    pointer-events: none;
}

span.color-brush[visible="true"] {
    opacity: 1;
}

canvas[palette-open="true"] {
    pointer-events: none;
    overflow: hidden;
}

#color-palette {
    position: absolute;
    display: none;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    padding: 0.5rem;
    width: calc(var(--canvas-size) - 2rem);
    margin: 0 1rem;
    height: auto;
    background: var(--peach);
    border: 2px solid var(--peach-light);
    border-radius: 0.5rem;
    box-sizing: border-box;
    z-index: 1;
}

#color-palette-backdrop {
    position: absolute;
    display: none;
    width: var(--canvas-size);
    height: var(--canvas-size);
    background-color: var(--shadow);
    backdrop-filter: blur(2px);
    top: 0;
    left: 0;
    pointer-events: none;
}

#color-palette[visible="true"]+#color-palette-backdrop {
    display: flex;
}

span.color-brush {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    border-radius: 20%;
    cursor: pointer;
    transition: transform 0.2s, border 0.2s;
}

#color-palette[visible="false"] {
    display: none;
}

#color-palette[visible="true"] {
    display: grid;
}

div.canvas-wrapper {
    position: relative;
    width: var(--canvas-size);
    height: var(--canvas-size);
    overflow: hidden;
}

/* Board page */
#coupleZone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    height: 100%;
}

#coupleZone h2 {
    margin: 0;
}

#coupleZone p {
    margin: 0;
    text-align: center;
}

#createCoupleSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

#coupleInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    width: min(75%, 30rem);
    max-width: min(75%, 30rem);
}

#coupleCode {
    width: fit-content!important;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    background-color: var(--peach-light);
    border-radius: 1.5rem;
    border: 2px solid var(--border);
}

main#home {
    position: relative;
    background-color: #ffe8ce;
    /* background-color: #f0b971; */
    width: 100vw;
    max-width: 100vw;
    height: var(--real-vh);
    overflow: hidden;
}

main#home::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("/images/background/noise.svg"); /* adapte le chemin */
  background-repeat: repeat;
  opacity: 0.3; /* noise intensity */
  filter: invert(1);
  mix-blend-mode: soft-light;
}

div.notes {
    box-sizing: border-box;
    position: absolute;
    width: var(--note-size);
    height: var(--note-size);
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    top: 0;
    left: 0;
    rotate: 0deg;
    transform-origin: 50% 50%;
    opacity: 0;
    z-index: 1;
    user-select: none;
    transition:
        top var(--transition-speed) ease,
        left var(--transition-speed) ease,
        translate var(--transition-speed) ease,
        rotate var(--transition-speed) ease,
        scale var(--transition-speed) ease var(--transition-speed),
        opacity var(--transition-speed) ease var(--transition-speed);
    /* antialiasing */
    outline: 1px solid transparent;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    -webkit-perspective: 1000;
}

div.notes.loaded {
    opacity: 1;
}

div.notes.focused {
    top: calc(50% - var(--note-size) / 2) !important;
    left: calc(50% - var(--note-size) / 2) !important;
    rotate: 0deg !important;
    scale: 1.2;
    z-index: 2;
    transition:
        top var(--transition-speed) ease var(--fast-transition-speed),
        left var(--transition-speed) ease var(--fast-transition-speed),
        translate var(--transition-speed) ease var(--fast-transition-speed),
        rotate var(--transition-speed) ease var(--fast-transition-speed),
        scale var(--transition-speed) ease;
}

#notes-trigger {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 0;
    transition:
        background-color var(--fast-transition-speed) ease,
        backdrop-filter var(--fast-transition-speed) ease;
}

#notes-trigger.active {
    z-index: 2;
    background-color: var(--shadow);
    backdrop-filter: blur(5px);
}

div.notes::after,
div.notes div.shadow {
    transition: opacity var(--fast-transition-speed) ease-in var(--transition-speed);
}

div.notes.focused::after,
div.notes.focused div.shadow {
    transition: opacity var(--fast-transition-speed) ease-out;
}

div.notes.focused::after {
    opacity: 0.4;
}

div.notes.focused div.shadow {
    opacity: 0.2;
}

div.notes div.spotlight {
    position: absolute;
    width: var(--note-size);
    height: var(--note-size);
    background: radial-gradient(farthest-corner circle at 0% 70%, #ffffff2a 20%, #ffffff00 60%);
}

div.notes:hover {
    z-index: 2;
}

div.notes img {
    width: var(--note-size);
    height: var(--note-size);
}

div.notes span {
    height: 1rem;
    background-color: var(--theme-shadow);
    color: var(--text-light);
    opacity: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 10px 0 0 0;
    pointer-events: none;
    transform: translateX(1px) translateY(calc(-100% + 1px));
    transition: opacity 0.25s;
}

div.notes:hover span, div.notes.focused span {
    opacity: 1;
}

div.notes::before {
    content: '';
    width: var(--note-size);
    height: var(--note-size);
    position: absolute;
    clip-path: polygon(100% 15%, 100% 100%, 0% 100%, 0% 80%);
    background: linear-gradient(147deg, transparent 60%, #66666616 70%, #66666633 100%);
    pointer-events: none;
}

div.notes div.shadow {
    position: absolute;
    width: calc(1.025 * var(--note-size));
    height: calc(0.78 * var(--note-size));
    background: linear-gradient(147deg, transparent 60%, #33333311 70%, #33333333 100%);
    clip-path: polygon(0% 0%, 0% calc(0.77 * var(--note-size)), 100% 100%, calc(1.0125 * var(--note-size)) 0%);
    transform: translate(0.25rem, calc(0.235 * var(--note-size))) translateZ(0);
    z-index: -1;
    border-radius: 3px;
    opacity: 1;
}

div.notes div.shadow::before {
    content: '';
    position: absolute;
    width: var(--note-size);
    height: calc(0.765 * var(--note-size));
    box-shadow: 5px 5px 10px -5px #333;
    transform: translateX(calc(0.0125 - var(--note-size)));
}

div.notes::after {
    content: '';
    width: var(--note-size);
    height: calc(0.235 * var(--note-size));
    background: linear-gradient(#66666633 0%, #6666661b 80%, transparent 100%);
    position: absolute;
    pointer-events: none;
    opacity: 1;
}

#memory {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 1;
}

#memories-reveal {
    width: 15rem;
}

#memory .memory-gif {
    width: 10rem;
    user-select: none;
}

#memories-reveal,
#memory .memory-gif {
    max-width: 70%;
    opacity: 1;
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.5s;
}

#memory[drawn] #memories-reveal,
#memory[drawn] .memory-gif {
    opacity: 0;
    z-index: 0;
}

#memory span.memories-title {
    position: absolute;
    font-size: 1.2rem;
    transform: translateY(-11rem);
}

#memory span.memories-title,
#memory div.notes {
    opacity: 0 !important;
    filter: blur(20px);
    pointer-events: none;
    transition: filter 2s 0.5s ease-in, opacity 2s 0.5s ease-in;
}

#memory div.notes {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

#memory[drawn] span.memories-title,
#memory[drawn] div.notes {
    opacity: 1 !important;
    filter: none;
    pointer-events: initial;
}

#memories-reveal.no-memories {
    position: relative;
    background: transparent;
    pointer-events: none;
    box-shadow: none;
}
#memories-reveal.no-memories::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--pink);
    border: 2px solid var(--border);
    box-shadow: 0px 6px 0px var(--shadow);
    padding: 0.8rem 1.5rem;
    border-radius: 1.5rem;
    filter: grayscale(1);
    z-index: -1;
    pointer-events: none;
}

/* Settings page */

#settingsMain {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: var(--peach-light);
    padding: 2rem 0;
}

#statsSection {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#stats {
    display: flex;
    flex-direction: column;
    max-width: min(70%, 20rem);
    gap: 0.5rem;
    background-color: var(--peach);
    border: 2px solid var(--border);
    box-shadow: 0px 6px 0px var(--shadow);
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
}

#stats p {
    margin: 0;
}

#changePasswordSection {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#stats.loaded .loader {
    display: none;
}

.loader {
  width: 2rem;
  aspect-ratio: 4;
  background: radial-gradient(closest-side at calc(100%/6) 50%,var(--text) 90%,#0000) 0/75% 100%;
  position: relative;
  animation: l15-0 1s infinite linear;
  margin: 1.5rem 3rem;
}
.loader::before {
  content:"";
  position: absolute;
  background: inherit;
  clip-path: inset(0 0 0 50%);
  inset: 0;
  animation: l15-1 0.5s infinite linear;
}
@keyframes l15-0 { 
    0%,49.99% {transform: scale(1)}
    50%,100%  {transform: scale(-1)} 
}
@keyframes l15-1 { 
    0%       {transform: translateX(-37.5%) rotate(0turn)} 
    80%,100% {transform: translateX(-37.5%) rotate(1turn)} 
}

/* Menu */
a {
    text-decoration: none;
    width: 100%;
}

header {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    z-index: 100;
    pointer-events: none;
}

header nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: fit-content;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 2.5rem;
    border: 2px solid var(--border);
    background-color: var(--peach-light);
    box-shadow: 0px 6px 0px var(--shadow);
    translate: 0% -1.25rem;
    pointer-events: auto;
    /* transition: opacity 0.3s ease, translate 0.6s ease; */
    transition: opacity 0.4s ease, translate 0.6s ease;
}

header nav.closed {
    opacity: 0;
    /* translate: 0 -0.75rem; */
    translate: 150% -1.25rem;
    pointer-events: none;
}

header nav button {
    padding: 0.6rem 1.125rem;
    width: 100%;
}

#menuTrigger {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

#menuTrigger svg {
    fill: var(--text-light);
    width: 1.25rem;
    height: 1.25rem;
    rotate: 90deg;
    transition: rotate 0.3s ease;
}

#menuTrigger.closed svg {
    rotate: 0deg;
}

@media only screen and (min-width:1100px) {
    #settingsMain {
        flex-direction: row;
    }
    #statsSection {
        flex: 1;
    }
}

@media only screen and (max-width:720px) {
    :root {
        font-size: 16px;
        --canvas-size: 20rem;
        --note-size: 12rem;
    }

    #memory div.notes {
        --note-size: 14rem;
    }
    
    #memory span.memories-title {
        position: absolute;
        font-size: 1.2rem;
        transform: translateY(-8rem);
    }
}