/* Riley's Birthday Escape: handheld console shell with a dollhouse cutaway on screen. */
:root{
  --shell:#7b2cbf; --shell2:#5a189a; --shell3:#9d4edd; --btn:#ff006e; --btn2:#c30060; --dpad:#2b2d42;
  --sky1:#8ecae6; --sky2:#bde0fe; --grass:#70e000; --grass2:#38b000; --dirt:#8d5a2b; --dirt2:#6b4320;
  --brick:#c0392b; --brick2:#a93226; --roof:#6c3483; --roof2:#5b2c6f; --wood:#8e5a2b; --wood2:#6b4320;
  --ink:#023047; --dark:#1b1030; --paper:#fff4d6; --gold:#ffcc33; --green:#2ecc71; --white:#fff;
  --pxfont:'Press Start 2P','Courier New',monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--pxfont);
  background:#ffd6e0;background-image:radial-gradient(#ffafcc 3px,transparent 3px);background-size:28px 28px;-webkit-text-size-adjust:100%}

/* ---------- console shell ---------- */
.console{width:min(940px,100%);background:var(--shell);border:6px solid var(--shell2);border-radius:24px 24px 60px 24px;padding:26px 26px 40px;
  box-shadow:0 18px 0 var(--shell2),0 26px 40px rgba(0,0,0,.35);position:relative}
.console::before{content:'';position:absolute;inset:6px;border-radius:18px 18px 54px 18px;border:3px solid var(--shell3);pointer-events:none;opacity:.6}
.brand{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--shell3);letter-spacing:2px}
.bezel{background:#2b2d42;border-radius:14px 14px 40px 14px;padding:26px 34px 22px;position:relative}
.led{position:absolute;left:14px;top:50%;width:10px;height:10px;background:#ff0054;box-shadow:0 0 8px #ff0054;animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.35}}
.power{position:absolute;left:8px;top:calc(50% + 18px);font-size:6px;color:#8d99ae}
.screen{position:relative;background:var(--sky1);border:4px solid #0b132b;overflow:hidden;aspect-ratio:16/10.5;display:grid;grid-template-rows:auto 1fr auto}
.screen::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:20;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}

/* ---------- HUD ---------- */
.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;background:var(--ink);color:#fff;font-size:8px;z-index:3}
.tally{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;flex:1}
.tally .px{filter:drop-shadow(1px 1px 0 #000);transition:opacity .3s}
.tally .px.closed{opacity:.22;filter:grayscale(1)}
.tally .px.next{animation:wiggle 1s ease-in-out infinite}
.tally .px.just{animation:popOpen .6s steps(4)}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes popOpen{0%{transform:scale(1)}50%{transform:scale(1.8) rotate(-12deg)}100%{transform:scale(1)}}
.hud-count{color:var(--gold)}

/* ---------- world (sky, ground, house) ---------- */
.world{position:relative;overflow:hidden;background:linear-gradient(var(--sky1),var(--sky2));padding:4px 10px 0;display:flex;align-items:flex-end;justify-content:center}
.cloud{position:absolute;width:44px;height:14px;background:#fff;box-shadow:8px -7px 0 3px #fff,24px -6px 0 4px #fff,-4px 0 0 2px #fff;opacity:.9;animation:drift 40s linear infinite;z-index:0}
.cloud.c1{top:8%}.cloud.c2{top:20%;animation-duration:55s;animation-delay:-20s}.cloud.c3{top:32%;animation-duration:70s;animation-delay:-45s}
@keyframes drift{from{left:-80px}to{left:105%}}
.sun{position:absolute;right:6%;top:6%;width:34px;height:34px;background:var(--gold);box-shadow:0 0 0 6px rgba(255,204,51,.35),0 0 0 12px rgba(255,204,51,.15);animation:pulse 3s ease-in-out infinite;z-index:0}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,204,51,.45),0 0 0 16px rgba(255,204,51,.15)}}
.bird{position:absolute;top:12%;left:-40px;width:14px;height:5px;background:var(--ink);box-shadow:-8px -3px 0 var(--ink),8px -3px 0 var(--ink);animation:fly 16s linear infinite;z-index:0}
@keyframes fly{to{left:110%}}

.house{position:relative;width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;z-index:1}
/* roof: wider than the walls so it overhangs both sides */
/* walls span from 26.48% (8% padding + 22% yard column) to 92% of the world; the roof overhangs 4% past each side */
.roof-wrap{position:relative;height:clamp(54px,14%,80px);margin:0 4% 0 22.48%;z-index:2}
.roof{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(135deg,var(--roof) 0 50%,var(--roof2) 50%);clip-path:polygon(50% 0,100% 100%,0 100%)}
.eave{position:absolute;left:-2%;right:-2%;bottom:-4px;height:10px;background:var(--dark)}
.roof-room{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:32%;min-width:120px;height:calc(100% - 14px);min-height:0}
.body{display:grid;grid-template-columns:22% 1fr;grid-template-rows:1fr 1fr 1fr;gap:0;min-height:0;padding:0 8%}
.sky-gap{grid-column:1;grid-row:1}
.yard{grid-column:1;grid-row:2/4;background:linear-gradient(var(--grass) 0 6%,var(--grass2) 6% 50%,var(--dirt) 50% 56%,var(--dirt2) 56%);border:4px solid var(--dark);border-right:none}
.yard .tree{position:absolute;left:12%;top:34%;width:12px;height:26px;background:var(--wood)}
.yard .tree::before{content:'';position:absolute;left:-12px;top:-24px;width:36px;height:30px;background:#1e8449;box-shadow:4px -6px 0 0 #27ae60}
.walls{grid-column:2;grid-row:1/4;display:grid;grid-template-rows:1fr 1fr 1fr;gap:5px;padding:6px;background:repeating-linear-gradient(0deg,var(--brick) 0 10px,var(--brick2) 10px 12px);border:4px solid var(--dark);min-height:0}
.floor{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;min-height:0}
.floor.two{grid-template-columns:repeat(2,1fr)}

/* ---------- rooms ---------- */
.room{position:relative;border:3px solid var(--dark);background:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:4px;font-size:6px;text-align:center;line-height:1.4;min-height:0;overflow:hidden;transition:background .4s,filter .4s,box-shadow .4s}
.room .label{background:var(--dark);color:#fff;padding:3px 4px;margin-top:4px;white-space:nowrap;z-index:1}
.room .room-locks{position:absolute;top:4px;right:4px;display:flex;gap:3px;z-index:2}
.room .room-locks .px{filter:drop-shadow(1px 1px 0 rgba(0,0,0,.4))}
.room .fixture{width:30px;height:18px;background:var(--wood);margin:auto 0 0;box-shadow:inset 0 -5px 0 var(--wood2)}
.fixture.bed{background:#e74c3c;width:40px;box-shadow:inset 0 -6px 0 #c0392b,-6px 0 0 0 #fff}
.fixture.bed.big{width:50px}
.fixture.tub{background:#5dade2;border-radius:0 0 10px 10px;width:40px;box-shadow:inset 0 -5px 0 #2e86c1}
.fixture.stove{background:#95a5a6;box-shadow:inset 0 -5px 0 #7f8c8d,0 -6px 0 0 #ff5e5e}
.fixture.washer{background:#ecf0f1;width:22px;height:26px;box-shadow:inset 0 0 0 3px #bdc3c7,inset 0 0 0 8px #5dade2}
.fixture.sofa{background:#8e44ad;width:46px;box-shadow:inset 0 -6px 0 #6c3483}
.fixture.box{background:#b9770e;box-shadow:inset 0 -5px 0 #9a7d0a}
.fixture.chimney{background:#7f8c8d;width:14px;height:22px}
.roof-room{background:rgba(27,16,48,.55)}
.roof-room.solved,.roof-room.active{background:var(--paper)}

.room.locked{background:#3b2a4a;filter:saturate(.3)}
.room.locked .fixture{opacity:.25}
.room.locked .label{color:#9b8fb0}
.room.solved{background:#fff9e0;box-shadow:inset 0 0 0 3px var(--green)}
.room.active{background:#fffbe6;box-shadow:0 0 0 3px var(--gold),0 0 18px 4px rgba(255,204,51,.7);animation:glow 1.6s ease-in-out infinite;z-index:3}
@keyframes glow{50%{box-shadow:0 0 0 4px var(--gold),0 0 28px 8px rgba(255,204,51,.9)}}
.room.active .hero{position:absolute;left:8%;bottom:34%;animation:bob 1s steps(2) infinite;z-index:2}
@keyframes bob{50%{transform:translateY(-3px)}}
.room.just-unlocked{animation:doorOpen .9s steps(6) both}
@keyframes doorOpen{0%{filter:saturate(.3) brightness(.5)}50%{filter:saturate(1.4) brightness(1.6)}100%{filter:none}}
.yard.locked{filter:saturate(.35) brightness(.55)}
.yard.solved{box-shadow:inset 0 0 0 3px var(--green)}

/* ---------- confetti ---------- */
.confetti-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:10}
.confetti-layer i{position:absolute;top:-12px;width:8px;height:8px;animation:fall linear forwards}
@keyframes fall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
.confetti-layer i:nth-child(odd){width:6px;height:10px}

/* ---------- prize ---------- */
.prize{position:absolute;inset:0;z-index:12;background:rgba(27,16,48,.92);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;animation:reveal 1s steps(8) both}
.prize[hidden]{display:none}
@keyframes reveal{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.prize h2{font-size:16px;margin:0;color:var(--gold);text-shadow:3px 3px 0 var(--btn);animation:rainbow 2s linear infinite}
@keyframes rainbow{0%{color:#ffcc33}25%{color:#2ec4b6}50%{color:#ff4d9d}75%{color:#70e000}100%{color:#ffcc33}}
.prize p{font-size:9px;margin:0;line-height:1.8}
.prize-name{font-size:12px;line-height:1.8;background:#fff;color:var(--dark);border:4px solid var(--gold);padding:14px 18px;box-shadow:6px 6px 0 var(--btn);animation:bounceIn 1.2s .6s steps(6) both}
@keyframes bounceIn{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.prize .cake{font-size:7px;filter:drop-shadow(0 0 10px rgba(255,204,51,.6));animation:bob 1s steps(2) infinite,flicker .35s steps(2) infinite}
@keyframes flicker{50%{filter:drop-shadow(0 0 18px rgba(255,159,28,.9)) brightness(1.12)}}
@media (max-width:900px){.prize .cake{font-size:6px}}

/* ---------- clue box ---------- */
.box{background:#fff;border-top:4px solid var(--ink);padding:10px 14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;color:var(--ink);z-index:3;position:relative}
.box h2{font-size:7px;margin:0 0 6px;color:#8338ec}
.box p{font-size:9px;margin:0 0 8px;line-height:1.7}
.box input{width:100%;font-family:var(--pxfont);font-size:11px;padding:12px 10px;min-height:48px;border:3px solid var(--ink);background:#f1faee;outline:none;text-transform:uppercase}
.box input:focus{background:#fff;border-color:#8338ec}
.box.wrong{animation:shake .4s steps(4)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.feedback{font-size:7px;min-height:12px;margin-top:6px;color:#8338ec}
.feedback.bad{color:var(--btn)}
.feedback.good{color:#1e8449}
.box-side{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:6px;min-width:56px}
.box-side .px{animation:swing 1s ease-in-out infinite}
@keyframes swing{50%{transform:rotate(12deg)}}
.box-side.open .px{animation:popOpen .6s steps(4)}

/* ---------- console controls ---------- */
.controls{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-top:30px}
.dpad{position:relative;width:96px;height:96px;justify-self:start}
.dpad i{position:absolute;background:var(--dpad);box-shadow:inset -4px -4px 0 #14151f}
.dpad i:nth-child(1){left:32px;top:0;width:32px;height:96px}
.dpad i:nth-child(2){left:0;top:32px;width:96px;height:32px}
.dpad i:nth-child(3){left:32px;top:32px;width:32px;height:32px;box-shadow:none;background:#3a3d5c}
.ss{display:flex;gap:18px;justify-self:center;margin-top:36px}
.pill{width:56px;height:16px;background:var(--dpad);border:none;border-radius:8px;transform:rotate(-20deg);position:relative;cursor:pointer;padding:0}
.pill::after{content:attr(data-l);position:absolute;top:20px;left:0;font-family:var(--pxfont);font-size:6px;color:var(--shell3);white-space:nowrap}
.pill:active{background:#14151f}
.ab{display:flex;gap:16px;justify-self:end;transform:rotate(-20deg)}
.ab button{width:60px;height:60px;border-radius:50%;background:var(--btn);border:none;box-shadow:0 6px 0 var(--btn2);font-family:var(--pxfont);color:#fff;font-size:13px;cursor:pointer;touch-action:manipulation}
.ab button:active{transform:translateY(6px);box-shadow:none}
.ab button:first-child{margin-top:20px}
.speaker{position:absolute;right:40px;bottom:30px;width:70px;height:60px;background:repeating-linear-gradient(-30deg,var(--shell2) 0 6px,transparent 6px 14px);opacity:.8}
.note{position:absolute;bottom:14px;left:26px;font-size:6px;color:var(--shell3)}

/* ---------- iPad portrait: fill the width, taller screen, bigger controls ---------- */
@media (orientation:portrait) and (max-width:900px){
  body{padding:16px;align-items:flex-start}
  .console{padding:22px 18px 36px}
  .bezel{padding:22px 22px 18px}
  .screen{aspect-ratio:4/4.1}
  .tally .px{font-size:2.6px}
  .room{font-size:7px}
  .box p{font-size:10px}
  .controls{margin-top:34px} .dpad{width:120px;height:120px}
  .dpad i:nth-child(1){left:40px;width:40px;height:120px}.dpad i:nth-child(2){top:40px;width:120px;height:40px}.dpad i:nth-child(3){left:40px;top:40px;width:40px;height:40px}
  .ab button{width:76px;height:76px;font-size:15px}
}
/* desktop and iPad landscape: cap so the whole console fits in the viewport height */
@media (orientation:landscape){
  .console{width:min(940px,100%,calc((100vh - 48px) * 1.18))}
}
/* phones */
@media (max-width:520px){
  .room .label{font-size:5px} .hud{font-size:6px} .box-side{display:none}
}