/* Moonlit Burgundy — approved desktop and mobile art direction. */
:root{--ink:#f6e9ee;--muted:#cda4b4;--pink:#e6a8c1;--rose:#a44970;--line:#bb718e;--panel:#29101d;--paper:#fff3f5;--shadow:#10060c}
body{background:#160912;--perch-space:133px}
.scene{background-image:linear-gradient(#18091055,#18091070),url('fancon-bg.jpg');filter:saturate(.7) brightness(.82)}
.scene:after{background:linear-gradient(90deg,#10060c50,transparent 30%,transparent 70%,#10060c50)}
.panel{background:linear-gradient(150deg,rgba(50,19,33,.64),rgba(33,12,24,.75));backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-color:#cc93aa9c;box-shadow:0 0 0 3px #1c0b1660,0 0 0 4px #bb718e35,0 14px 34px #0d050940,inset 0 1px #ffe3ee12}
.panel:before,.panel:after{width:5px;height:5px;background:#dfa0b9}
.home-panel{width:400px;padding:30px 28px 23px}
.home-panel>.eyebrow{font-size:.65rem;letter-spacing:.2em;margin-bottom:10px}
.brand{font-size:2.6rem;line-height:1.6;color:#ffe3ee;text-shadow:2px 3px #63263e;margin:6px 0 0}
.ornament{font-size:.8rem;letter-spacing:.12em;margin-bottom:22px;color:#d798b3}
.home-menu{gap:12px}
.menu-button,.game-link{min-height:56px;padding:10px 16px;font-size:1rem;background:linear-gradient(100deg,#73314e65,#3a142866);border-color:#d898b29c;box-shadow:inset 0 0 0 2px #b66f8a10,2px 3px #12070e55}
.menu-button:hover{background:linear-gradient(100deg,#70304b,#542139)}
.menu-icon{font-size:1.3rem;color:#f3cedc}
.menu-button>span:last-child{font-size:1.25rem}
.home-note{font-size:.75rem;letter-spacing:.06em;margin-top:22px}
.topbar nav{background:#1d0c1799;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-color:#bb718e60;box-shadow:2px 2px #0c050a50}
.header-music{background:#4c1a3299;border-color:#bb718e;box-shadow:inset 0 0 0 2px #b66f8a10,2px 2px #0c050a55}
.header-music:hover,.lang.active{background:#76324f}
.lang.active{box-shadow:inset 0 0 0 1px #d99ab5}
.primary{background:#73304b;border-color:#c7839f}.primary:hover{background:#8d3d5d}
.secondary,dialog{background:#29101d}
.letter-entry{border-color:#bb718e70;background:#d890ac05}.letter-entry:hover{background:#a4497026}
.reading-toolbar{background:#1d0c17df}.letter-paper{color:#4e2836;border-color:#ca90a6;box-shadow:0 0 0 3px #29101d,0 0 0 4px #bb718e90,4px 6px #10060c50}
.game-panel{width:620px}.card-back{background:linear-gradient(145deg,#4a2034,#29101d)}
.card-back,.card-front{border-color:#bb718e;box-shadow:inset 0 0 0 2px #29101d,2px 3px #10060c}
.card:not(.flipped):hover .card-back{background:#5e2942}
.music-dock{background:#210c1899;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-color:#bb718e;box-shadow:0 0 0 2px #29101d,3px 4px #10060c70}
.footer{color:#c497ab}.jewel{filter:drop-shadow(0 3px 5px #10060c55)}
body[data-page=home] .home-panel>.jewel,body:not([data-page=home]) .jewel-perch>.jewel{width:130px;left:calc(50% - 65px)}
@media(max-width:700px){
  body{--perch-space:123px}
  .home-panel{width:330px;padding:26px 22px 22px}
  .brand{font-size:2.15rem}.home-panel>.eyebrow{font-size:.6rem;letter-spacing:.15em}
  .menu-button{min-height:52px;font-size:.95rem;padding:10px 12px;gap:10px}
  .home-note{font-size:.7rem;letter-spacing:.02em}
  body[data-page=home] .home-panel>.jewel,body:not([data-page=home]) .jewel-perch>.jewel{width:120px;left:calc(50% - 60px)}
}
@media(max-width:700px) and (orientation:portrait){.scene{background-image:linear-gradient(#18091018,#18091028),url('fancon-mobile-v2.png');background-position:center top;filter:saturate(.85) brightness(.92)}}

/* Completed game: preserve the whole board for viewing. */
.game-complete .card.matched { opacity: 1; filter: none; }
.game-complete .game-instruction strong { font-size: 20px; color: #ffdbe7; line-height: 1.8; }
.game-complete .game-instruction span { font-size: 13px; }
.game-complete .game-bottom { display: flex; justify-content: center; padding: 18px 0 4px; border-top: 1px solid #dc9cb63b; }
.game-complete #again { min-width: 180px; }
.game-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }

.game-complete .game-instruction { text-align: center; }