@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@400;500;600;700&display=swap');

:root { font-family: Montserrat, sans-serif; color: #211b18; background: #f4eddf; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button { font: inherit; }
button:focus-visible { outline: 2px solid #b8914b; outline-offset: 4px; }
.page-enter { min-height: 100svh; animation: appear .45s ease both; }
.button { min-height: 54px; padding: 0 30px; border: 1px solid #8e713e; border-radius: 2px; background: #681f2b; color: #fffaf0; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 600; cursor: pointer; transition: transform .2s, background .2s; }
.button:hover { background: #7b2935; transform: translateY(-1px); }
.text-button { padding: 12px; border: 0; border-bottom: 1px solid #a98a55; background: transparent; color: inherit; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; cursor: pointer; }
.brand { text-align: center; }
.brand__name { display: flex; align-items: center; justify-content: center; color: inherit; font-family: Montserrat, sans-serif; font-size: clamp(4.4rem, 20vw, 7rem); line-height: .8; letter-spacing: -.055em; font-weight: 600; }
.brand__heart { width: .9em; height: .82em; margin: 0 .015em; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 11; }
.home .brand__heart { width: .75em; height: .68em; transform: translateY(.015em); }
.brand--small { text-align: left; }
.brand--small .brand__name { font-size: 1.9rem; letter-spacing: -.06em; }
.brand--small .brand__heart { stroke-width: 10; }
.home { display: flex; height: 100vh; min-height: 0; justify-content: center; overflow: hidden; color: #e6bf78; background: #170b08; }
.home__content { width: 100%; height: 100%; text-align: center; }
.home__visual, .home__visual picture { position: relative; display: block; width: 100%; height: 100%; }
.home__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home__invitation { position: absolute; top: clamp(30px, 6dvh, 64px); right: 16px; left: 16px; margin: 0; color: #f1cf91; font: 500 clamp(.88rem, 4vw, 1.1rem)/1.2 'Cormorant Garamond', serif; letter-spacing: .025em; text-align: center; text-shadow: 0 1px 7px rgba(23,7,3,.95); }
.home__invitation-heart { display: inline-block; margin: 0 .025em; color: #e8b968; font-size: .85em; transform: translateY(-.02em); }
.home__actions { position: absolute; right: 20px; bottom: clamp(16px, 5vw, 28px); left: 20px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.button--home { width: min(100%, 350px); border-color: #e6bf78; background: rgba(67,12,23,.95); color: #f6dda8; box-shadow: 0 6px 20px rgba(12,3,2,.38); }
.button--home:hover { background: rgba(91,20,32,.98); }
.home__actions .text-button { padding: 7px 9px 5px; color: #f5d99f; background: rgba(25,8,6,.72); text-shadow: 0 1px 4px #120402; }
.simple-header, .game__header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 60px); }
.back { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; }
.rules { color: #8b5e18; background: #d8c8b2; padding-bottom: 70px; }
.rules .simple-header { color: #5a111b; }
.rules__content { max-width: 760px; margin: 28px auto 0; padding: 0 16px; }
.rules-card { border: 1px solid rgba(124,87,35,.35); border-radius: 28px; background: #f7f0e3; box-shadow: 0 22px 48px rgba(54,35,19,.28); }
.rules-card__frame { padding: clamp(32px, 7vw, 62px) clamp(22px, 7vw, 62px); border-radius: inherit; background-image: repeating-linear-gradient(115deg, transparent 0 8px, rgba(139,94,24,.018) 9px 10px); }
.eyebrow, .level span { color: #8b6b33; text-transform: uppercase; letter-spacing: .22em; font-size: .65rem; font-weight: 600; }
.rules h1 { margin: 0 0 clamp(34px, 7vw, 56px); text-align: center; text-transform: uppercase; letter-spacing: .08em; font: 600 clamp(2rem, 7vw, 3.6rem)/1 Montserrat, sans-serif; }
.rules__list { list-style: none; margin: 0; padding: 0; }
.rules__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 0 0 clamp(30px, 6vw, 44px); }
.rules__icon { display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }
.rules__icon svg { width: 45px; height: 45px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.rules h2 { margin: 0 0 7px; text-transform: uppercase; letter-spacing: .045em; font-size: clamp(.78rem, 2.8vw, 1.05rem); line-height: 1.3; }
.rules h2 span { margin-right: 8px; }
.rules li p { margin: 0; color: #8b5e18; font: 400 clamp(.82rem, 3vw, 1.02rem)/1.5 Montserrat, sans-serif; }
.rules__note { margin: 2px 0 0; text-align: center; }
.rules__note > span { display: block; width: 76px; height: 2px; margin: 0 auto 26px; background: currentColor; }
.rules__note strong { display: block; letter-spacing: .01em; font-size: clamp(.76rem, 2.7vw, .95rem); line-height: 1.6; }
.rules__note p { margin: 3px 0 0; font-size: clamp(.76rem, 2.7vw, .95rem); line-height: 1.6; }
.rules__content > .button { display: block; margin: 30px auto 0; border-color: #e3bd76; background: #5a111b; color: #fff5df; }
.game { --bg: #ded2c1; --ink: #34291e; --card: #f2eadc; --card-ink: #8f672b; --accent: #b4853e; min-height: 100svh; color: var(--ink); background: radial-gradient(circle at 50% 32%, #eee6da 0, var(--bg) 72%); transition: color .6s, background .6s; }
.theme-devoiler { --bg: #d6c7b5; --ink: #5f1721; --card: #681722; --card-ink: #edca82; --accent: #bd8a42; }
.theme-rencontrer { --bg: #d4c5b2; --ink: #071c34; --card: #061b34; --card-ink: #e3b668; --accent: #b88742; }
.game__header { color: var(--ink); }
.menu-wrap { position: relative; z-index: 10; }
.menu-button { width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; }
.menu-button span { display: block; width: 23px; height: 1px; margin: 6px auto; background: currentColor; }
.menu { position: absolute; top: 48px; right: 0; width: 230px; padding: 10px; border: 1px solid rgba(174,139,76,.55); background: #f6efe4; box-shadow: 0 14px 40px rgba(0,0,0,.16); }
.menu button { width: 100%; padding: 14px 12px; border: 0; border-bottom: 1px solid #ded1bd; background: transparent; color: #251d19; text-align: left; font-size: .74rem; cursor: pointer; }
.menu button:last-child { border: 0; }
.game__content { display: flex; min-height: calc(100svh - 76px); flex-direction: column; align-items: center; padding: 8px 20px 24px; }
.level { text-align: center; }
.level span { color: var(--accent); }
.level h1 { margin: 5px 0 15px; color: var(--ink); font: 500 clamp(2rem, 7vw, 2.8rem) 'Cormorant Garamond', serif; }
.card { width: min(82vw, 354px, calc((100svh - 250px) * .716)); aspect-ratio: 63 / 88; padding: 0; border: 0; background: transparent; perspective: 1300px; cursor: pointer; }
.card__inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .65s cubic-bezier(.2,.7,.2,1); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.card.is-flipped .card__inner { transform: rotateY(180deg); }
.card__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 24px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 18px 42px rgba(42,28,17,.27), 0 2px 4px rgba(42,28,17,.22); }
.card__face::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .13; background-image: repeating-linear-gradient(117deg, transparent 0 5px, rgba(255,255,255,.22) 6px, transparent 7px 12px), repeating-linear-gradient(23deg, transparent 0 8px, rgba(0,0,0,.08) 9px, transparent 10px 16px); mix-blend-mode: soft-light; }
.card__back { z-index: 1; color: var(--card-ink); background: var(--card); transform: rotateY(0deg); }
.card__identity { z-index: 1; display: flex; flex-direction: column; align-items: center; transform: translateY(-2%); }
.card__symbol { display: block; width: 122px; height: 88px; }
.card__symbol svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(71,42,10,.35)); }
.theme-devoiler .card__symbol { width: 98px; height: 88px; }
.theme-rencontrer .card__symbol { width: 112px; height: 112px; }
.theme-rencontrer .card__symbol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card__back-title { margin-top: 12px; max-width: 90%; text-transform: uppercase; letter-spacing: .105em; font-size: clamp(1.22rem, 5.3vw, 1.55rem); font-weight: 500; line-height: 1.25; text-align: center; text-shadow: 0 1px 1px rgba(71,42,10,.25); }
.card__front { z-index: 2; padding: clamp(28px, 8vw, 48px) clamp(22px, 7vw, 42px); color: var(--card-ink); background: var(--card); transform: rotateY(180deg); }
.card__question { z-index: 1; max-width: 100%; overflow-wrap: anywhere; font: 500 clamp(1.3rem, 5.4vw, 2.05rem)/1.2 'Cormorant Garamond', serif; text-align: center; }
.card:not(.is-flipped) .card__front { visibility: hidden; }
.card.is-flipped .card__back { visibility: hidden; }
.game__actions { display: flex; min-height: 112px; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; }
.next { visibility: hidden; opacity: 0; transition: opacity .3s, transform .3s; }
.next.is-visible { visibility: visible; opacity: 1; }.next:disabled { pointer-events: none; }
.theme-devoiler .button, .theme-rencontrer .button { border-color: var(--accent); color: #fff9ed; background: var(--card); }
.level-navigation { display: flex; width: min(94vw, 560px); align-items: stretch; justify-content: space-between; gap: 12px; }
.next-level { min-height: 50px; padding: 9px 6px; border: 0; background: transparent; color: var(--ink); white-space: nowrap; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 600; line-height: 1.45; cursor: pointer; opacity: .9; }
.next-level span { color: #211b18; font-size: 1.2em; font-weight: 700; line-height: 1; }
.next-level--previous { text-align: left; }
.next-level--following { margin-left: auto; text-align: right; }
.next-level--previous span { margin-right: 3px; }
.next-level--following span { margin-left: 3px; }
.level-navigation .next-level:only-child { flex: none; }
.level-navigation .next-level:not(:only-child) { min-width: 0; }
.deck-finished { display: flex; width: min(82vw, 354px, calc((100svh - 250px) * .716)); aspect-ratio: 63 / 88; padding: 45px; flex-direction: column; align-items: center; justify-content: center; border-radius: 24px; color: var(--card-ink); background: var(--card); text-align: center; box-shadow: 0 18px 42px rgba(42,28,17,.27); }
.deck-finished span { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .58rem; }
.deck-finished h2 { margin: 22px 0 14px; font: 500 2rem/1.05 'Cormorant Garamond', serif; }
.deck-finished p { margin: 0; font: 500 1rem/1.45 'Cormorant Garamond', serif; opacity: .78; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@supports (height: 100dvh) { .home { height: 100dvh; } }
@media (max-width: 699px) { .home__visual { --home-image-lift: clamp(16px, 3dvh, 28px); }.home__visual img { height: calc(100% + var(--home-image-lift)); transform: translateY(calc(0px - var(--home-image-lift))); }.home__invitation { top: clamp(76px, 11dvh, 100px); font-size: clamp(1.05rem, 5vw, 1.35rem); white-space: nowrap; }.home__actions { bottom: clamp(75px, 11dvh, 101px); } }
@media (min-width: 700px) { .home__invitation { top: clamp(30px, 6dvh, 64px); font-size: clamp(1rem, 1.55vw, 1.55rem); }.home__actions { right: 4%; bottom: 4.5%; left: 4%; flex-direction: row; justify-content: center; gap: 18px; }.button--home { width: min(32vw, 360px); }.home__actions .text-button { flex: 0 1 auto; }.rules__list li { grid-template-columns: 86px 1fr; gap: 24px; }.rules__icon svg { width: 56px; height: 56px; }.game__content { padding-top: 0; }.level h1 { margin-bottom: 12px; } }
@media (max-width: 390px) { .rules__content { padding: 0 10px; }.rules-card__frame { padding-right: 18px; padding-left: 18px; }.rules__list li { grid-template-columns: 43px minmax(0, 1fr); gap: 12px; }.rules__icon svg { width: 39px; height: 39px; }.rules h1 { font-size: 1.85rem; }.rules h2 { font-size: .75rem; }.rules li p { font-size: .79rem; }.rules__content > .button { width: calc(100% - 24px); padding: 0 16px; } }
@media (max-width: 430px) { .level-navigation { width: calc(100vw - 16px); gap: 0; }.next-level { min-height: 50px; padding: 8px 0; font-size: clamp(.71rem, 3.15vw, .84rem); font-weight: 700; letter-spacing: .025em; }.next-level span { font-size: 1.2em; font-weight: 700; }.next-level--previous span { margin-right: 1px; }.next-level--following span { margin-left: 1px; } }
@media (max-height: 720px) { .game__header { height: 60px; }.game__content { min-height: calc(100svh - 60px); }.level h1 { margin: 2px 0 8px; font-size: 1.8rem; }.card, .deck-finished { width: min(78vw, 310px, calc((100svh - 215px) * .716)); }.game__actions { padding-top: 10px; min-height: 90px; }.button { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }