:root{--ink:#151129;--cream:#eee3d3;--blue:#45c3ee;--deep:#174a8b;--gold:#e7a839}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#130d25;font-family:"Courier New",monospace;color:var(--ink);overflow-x:hidden}
button{font:inherit}
.game-shell{min-height:100svh;position:relative;padding:clamp(8px,1.4vw,20px);background-image:linear-gradient(rgba(28,12,53,.08),rgba(28,12,53,.08)),url('images/background/mansion.png');background-size:cover;background-position:center;display:flex;flex-direction:column;align-items:center;gap:8px;image-rendering:pixelated}
.topbar{width:min(1180px,96vw);height:clamp(76px,13vh,142px);display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.logo{width:clamp(210px,34vw,410px);height:auto;image-rendering:pixelated;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.55))}
.scorebox{position:relative;width:clamp(180px,24vw,300px);aspect-ratio:429/248;margin-top:4px}
.scorebox>img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.score{position:absolute;right:12%;width:31%;text-align:center;color:#fff;font-weight:900;text-shadow:2px 2px 0 #174a8b;font-size:clamp(18px,2.5vw,31px);line-height:1}
.score.level{top:13%}.score.moves{top:41%}.score.pairs{top:69%}
.board-wrap{position:relative;width:min(1180px,96vw);flex:1;min-height:520px;display:flex;align-items:center;justify-content:center;padding:8px 0 24px}
.board{--cols:4;--card-w:min(13.2vw,150px);display:grid;grid-template-columns:repeat(var(--cols),var(--card-w));grid-auto-rows:calc(var(--card-w)*230/173);gap:clamp(7px,1.25vw,18px);justify-content:center;align-content:center;width:100%;min-height:100%;perspective:1000px}
.card{width:var(--card-w);aspect-ratio:173/230;border:0;background:none;padding:0;cursor:pointer;position:relative;image-rendering:pixelated;transition:filter .12s;transform-origin:center center;will-change:transform}
.card:not(.flipped):not(.matched):not(.card-flip-out):not(.card-flip-in):active{transform:translateY(3px) scale(.985)}
.card.card-flip-out{animation:cardSquash .09s steps(4,end) forwards;pointer-events:none}
.card.card-flip-in{animation:cardExpand .09s steps(4,end) forwards;pointer-events:none}
@keyframes cardSquash{from{transform:scaleX(1)}to{transform:scaleX(.04)}}
@keyframes cardExpand{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.card.card-flip-out,.card.card-flip-in{animation-duration:.01s}}
/* Face visibility is explicit rather than using a 3D rotation. This prevents the back face from ever becoming visible on a solved card. */
.card-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.35));pointer-events:none}
.card-front{display:none}
.card.flipped .card-back,.card.matched .card-back{display:none}
.card.flipped .card-front,.card.matched .card-front{display:block}
.card.matched{filter:brightness(1.12);pointer-events:none}
.board.level-10{grid-template-columns:repeat(4,var(--card-w));grid-template-areas:"a b c d" "e . . f" "g h i j"}
.board.level-10 .card:nth-child(1){grid-area:a}.board.level-10 .card:nth-child(2){grid-area:b}.board.level-10 .card:nth-child(3){grid-area:c}.board.level-10 .card:nth-child(4){grid-area:d}.board.level-10 .card:nth-child(5){grid-area:e}.board.level-10 .card:nth-child(6){grid-area:f}.board.level-10 .card:nth-child(7){grid-area:g}.board.level-10 .card:nth-child(8){grid-area:h}.board.level-10 .card:nth-child(9){grid-area:i}.board.level-10 .card:nth-child(10){grid-area:j}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(16,8,33,.62);opacity:0;visibility:hidden;transition:opacity .15s;z-index:10;padding:10px}
.overlay.show{opacity:1;visibility:visible}
.start-overlay{background:rgba(16,8,33,.72);cursor:pointer}
.splash-button{border:0;background:transparent;padding:0;margin:0;width:min(86vmin,820px);max-width:94vw;max-height:94svh;aspect-ratio:1;cursor:pointer;display:block;line-height:0}
.splash-image{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.4));user-select:none;-webkit-user-drag:none}
.splash-button:focus-visible{outline:4px solid #fff;outline-offset:6px}
.splash-button:active{transform:translate(2px,2px)}
.pixel-panel{background:#eadfce;border:6px solid #b88332;box-shadow:0 0 0 5px #fff0b1,0 0 0 10px #613d18,10px 12px 0 rgba(0,0,0,.45);padding:30px;text-align:center;max-width:560px}
.start-logo{width:min(430px,75vw);image-rendering:pixelated}.start-panel p{font-weight:bold;font-size:clamp(16px,2vw,24px)}
.pixel-button{border:4px solid #174a8b;background:#48c6ef;color:#13234d;font-weight:900;padding:12px 24px;box-shadow:inset -5px -5px 0 #2586b8,inset 5px 5px 0 #a6efff,5px 6px 0 #111;cursor:pointer;text-transform:uppercase;font-size:clamp(16px,2vw,24px)}
.pixel-button:active{transform:translate(3px,3px);box-shadow:inset -4px -4px 0 #2586b8,inset 4px 4px 0 #a6efff,2px 3px 0 #111}.pixel-button.small{font-size:clamp(13px,1.6vw,19px);padding:8px 18px}
.art-popup{position:relative;width:min(760px,92vw);aspect-ratio:1233/754;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.45))}.popup-frame{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.popup-content{position:absolute;left:10%;right:10%;top:23%;bottom:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(7px,1.4vh,15px)}
.detail-image{max-width:62%;max-height:46%;object-fit:contain;image-rendering:pixelated;background:transparent!important;filter:none}.design-name{font-size:clamp(24px,5vw,48px);font-weight:900;text-transform:uppercase;color:#174a8b;text-shadow:3px 3px 0 #91ddf8;letter-spacing:2px}.complete-message{text-align:center;font-size:clamp(20px,4vw,42px);font-weight:900;color:#174a8b;text-shadow:2px 2px 0 #91ddf8;white-space:pre-line}.complete-content{gap:clamp(16px,4vh,34px)}
.copyright{width:clamp(180px,24vw,300px);height:auto;image-rendering:pixelated;align-self:flex-start;margin-left:max(2vw,10px);opacity:.9}
@media(max-width:760px){.game-shell{background-position:center top}.topbar{height:90px;width:98vw}.logo{width:190px}.scorebox{width:155px}.score{font-size:16px}.board-wrap{width:98vw;min-height:calc(100svh - 130px);padding-bottom:8px}.board{--card-w:min(20vw,112px);gap:6px}.copyright{display:none}.art-popup{width:96vw}.popup-content{top:22%}.detail-image{max-width:68%}}
@media(max-width:480px){.topbar{height:72px}.logo{width:145px}.scorebox{width:126px}.score{font-size:13px}.board{--card-w:min(21vw,90px);gap:4px}.board[data-cols="3"]{--card-w:min(28vw,104px)}.pixel-panel{padding:20px 14px}.design-name{font-size:25px}}
@media(orientation:landscape) and (max-height:600px){.game-shell{padding:4px}.topbar{height:65px}.logo{width:165px}.scorebox{width:135px}.board-wrap{min-height:calc(100svh - 78px);padding:0}.board{--card-w:min(10.2vw,92px);gap:5px}.copyright{display:none}.art-popup{width:min(610px,78vw)}}