@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root { --ink: #171526; --paper: #fff6dc; --purple: #7354d6; --pink: #fa6f94; --yellow: #ffdf62; --mint: #8df4c8; --sky: #84d9ff; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--paper); background-color: #282143; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 24px 24px; font-family: 'VT323', monospace; }
button { font-family: inherit; }
.scene { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; padding: 16px 18px; isolation: isolate; }
.scene::before, .scene::after { content: ''; position: absolute; z-index: -1; width: 150px; height: 150px; background: var(--purple); border: 5px solid var(--ink); box-shadow: 8px 8px 0 #120f1d; transform: rotate(45deg); opacity: .45; }
.scene::before { left: -90px; top: 20%; }.scene::after { right: -90px; bottom: 15%; background: var(--pink); }
.console { width: min(100%, 1020px); height: min(690px, calc(100vh - 32px)); height: min(690px, calc(100svh - 32px)); min-height: 420px; display: grid; grid-template-columns: 132px minmax(0, 1fr) 132px; grid-template-rows:minmax(0,1fr); align-items: stretch; padding: 18px; gap: 16px; border: 5px solid #131323; border-radius: 78px; background: linear-gradient(160deg,#555361,#2e2c39 65%,#191822); box-shadow: 0 20px 0 #10101a, 0 35px 60px #090713cc, inset 0 5px 5px #ffffff35, inset 0 -9px 10px #0009;contain:layout size;flex:none; }
.joy { position: relative; min-height: 0; border: 4px solid #141321; box-shadow: inset 0 5px 4px #ffffff3b, inset 0 -7px 8px #0003, 0 3px 0 #111; }
.joy-left { border-radius: 64px 16px 16px 64px; background: linear-gradient(105deg,#ff7580,#ed3657 66%,#c52249); }
.joy-right { border-radius: 16px 64px 64px 16px; background: linear-gradient(255deg,#65e7f5,#25b5da 65%,#1d87bd); }
.stick { position:absolute; width:48px; height:48px; border:6px solid #282733; border-radius:50%; background:radial-gradient(circle at 38% 32%,#676673,#32313e 68%); box-shadow:0 5px 2px #0005,inset 0 3px 3px #ffffff30; }
.stick-left { left:50%; top:22%; transform:translateX(-50%); }.stick-right { left:50%; bottom:12%; transform:translateX(-50%); }
.dpad,.action { position:absolute; display:grid; place-items:center; color:#292832; font-family:Arial,sans-serif; font-weight:900; }
.dpad { width:24px;height:24px;border-radius:3px;background:linear-gradient(135deg,#50505b,#292833);box-shadow:0 2px 2px #0006; }
.dpad-up { left:50%;top:calc(59% - 22px);transform:translateX(-50%); }.dpad-down { left:50%;top:calc(59% + 2px);transform:translateX(-50%); }.dpad-left { left:calc(50% - 22px);top:59%;transform:translateY(-50%); }.dpad-right { left:calc(50% + 2px);right:auto;top:59%;transform:translateY(-50%); }
.action { --action-diameter:28px;--action-offset:44px;--action-center:56%;width:var(--action-diameter);height:var(--action-diameter);border-radius:50%;background:linear-gradient(145deg,#56e8f2,#a2f6ee);box-shadow:0 3px 2px #125977;color:#147797;font-size:13px; }
.action-x { left:50%;top:calc(var(--action-center) - var(--action-offset));transform:translateX(-50%); }.action-y { left:calc(50% - var(--action-offset));top:var(--action-center);transform:translateY(-50%); }.action-a { left:calc(50% + var(--action-offset) - var(--action-diameter));right:auto;top:var(--action-center);transform:translateY(-50%); }.action-b { left:50%;top:calc(var(--action-center) + var(--action-offset) - var(--action-diameter));transform:translateX(-50%); }
.joy-minus,.joy-plus { position:absolute;top:12%;color:#292733;font:bold 20px Arial; }.joy-minus {right:17%;}.joy-plus {left:17%;}
.screen-shell { min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px;padding:13px 15px 8px;border:4px solid #101019;border-radius:25px;background:#171620;box-shadow:inset 0 2px 4px #ffffff22,0 2px 0 #ffffff18;overflow:hidden; }
.screen { min-height:0;flex:1;display:grid;place-items:stretch;position:relative;overflow:hidden;border:4px solid #080a14;border-radius:8px;background:#282143;box-shadow:inset 0 0 0 2px #73727e; }
.boot-screen { width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:18px 12px;color:#eafaff;background:radial-gradient(ellipse at 50% 35%,#293f82,#11182f 66%,#090d1c);text-align:center; }
.boot-screen::before { content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 4px);opacity:.5; }
.boot-stars { position:absolute;top:8%;color:#b7e5ff;font:clamp(10px,2vw,17px) 'Press Start 2P',monospace;letter-spacing:8px;animation:blink .7s steps(2,end) infinite alternate; }
.boot-icon { width:clamp(44px,8vw,72px);height:clamp(44px,8vw,72px);display:grid;place-items:center;margin:6px 0 14px;border:3px solid #111426;background:#ffdf62;box-shadow:5px 5px 0 #7354d6;font-size:clamp(24px,5vw,42px);animation:hop 1s steps(2,end) infinite; }
.boot-kicker { margin:0 0 7px;font:clamp(6px,1.1vw,9px) 'Press Start 2P',monospace;letter-spacing:1px;color:#92dfff; }
#boot-title { margin:0;color:#fff6dc;font:clamp(34px,7vw,66px)/1 'Press Start 2P',monospace;letter-spacing:-3px;text-shadow:4px 4px 0 #e74773,8px 8px 0 #171526; }
#boot-title span { color:#ffdf62; }
.boot-copy { margin:14px 0 16px;color:#cbd8ff;font:clamp(7px,1.15vw,10px)/2 'Press Start 2P',monospace; }
.power-button { display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 15px;border:3px solid #111426;color:#111426;background:#8df4c8;box-shadow:4px 4px 0 #e74773;font:clamp(8px,1.2vw,11px) 'Press Start 2P',monospace;cursor:pointer;animation:power-pulse 1.8s steps(2,end) infinite; }
.power-button:hover { background:#b0ffe0; }.power-button:disabled { cursor:wait;animation:none; }
.power-button:focus-visible { outline:3px dashed white;outline-offset:4px; }
.power-symbol { font: bold 19px Arial,sans-serif; }
.boot-hint { margin-top:12px;color:#8797c6;font:6px 'Press Start 2P',monospace;letter-spacing:1px; }
.screen.is-booting::after { content:'';position:absolute;z-index:4;left:0;right:0;top:50%;height:5px;background:#c8faff;box-shadow:0 0 20px 8px #72e5ff;transform:translateY(-50%);animation:screen-power .85s steps(8,end) forwards;pointer-events:none; }
.boot-screen.powering-on { animation:boot-fade .7s steps(6,end) 1s forwards; }
.boot-dots { animation:blink .35s steps(2,end) infinite alternate; }
.story-screen { width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:18px 14px;color:#fff6dc;background:radial-gradient(circle at 50% 30%,#3d3b86,#1c2146 55%,#10162b);text-align:center;animation:story-enter .35s steps(5,end) both; }
.story-screen::before { content:'+';position:absolute;top:8%;right:10%;color:#ffdf62;font:24px 'Press Start 2P',monospace;text-shadow:-100px 75px #84d9ff,75px 125px #fa6f94;opacity:.8; }
.story-icon { width:clamp(45px,8vw,74px);height:clamp(45px,8vw,74px);display:grid;place-items:center;margin-bottom:12px;border:3px solid #111426;background:#ffdf62;box-shadow:5px 5px 0 #e74773;font-size:clamp(25px,5vw,43px); }
.story-kicker { margin:0 0 8px;color:#92dfff;font:clamp(6px,1.1vw,9px) 'Press Start 2P',monospace;letter-spacing:.5px; }
.story-title { margin:0;color:#fff;font:clamp(17px,3vw,29px)/1.5 'Press Start 2P',monospace;text-shadow:3px 3px 0 #e74773; }
.story-copy { max-width:34ch;margin:10px auto 16px;color:#dce7ff;font:clamp(16px,2vw,23px)/1.15 'VT323',monospace; }
.story-progress { display:flex;gap:7px;margin:0 0 14px; }.story-progress span { width:20px;height:7px;border:1px solid #b7c6f2;background:#343a65; }.story-progress span.active { background:#ffdf62;border-color:#ffdf62;box-shadow:0 0 8px #ffdf6280; }
.story-controls { display:flex;flex-direction:column;align-items:center;gap:5px; }
.story-screen .power-button { min-width:150px; }
.story-skip { padding:5px 8px;border:0;color:#aebbe1;background:transparent;font:6px 'Press Start 2P',monospace;letter-spacing:.4px;cursor:pointer; }
.story-skip:hover { color:#fff; }
.story-skip:focus-visible { outline:2px dashed #ffdf62;outline-offset:3px; }
.story-level { min-width:144px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;margin:-3px auto 10px;padding:1px 5px 18px; }
.story-level .old-level { color:#9fa9c4;font:clamp(23px,4vw,37px) 'Press Start 2P',monospace;text-decoration:line-through;text-decoration-color:#fa6f94;text-decoration-thickness:3px; }
.story-level .level-arrow { color:#8df4c8;font-size:20px; }
.story-level strong { color:#ffdf62;font:clamp(40px,7vw,60px)/1 'Press Start 2P',monospace;text-shadow:4px 4px 0 #e74773,0 0 18px #ffdf6280; }
.fighter-stage { width:92px;height:76px;flex:none;position:relative;display:flex;align-items:center;justify-content:flex-start;margin-right:3px;overflow:visible; }
.ryu-fighter { width:62px;height:70px;overflow:visible;image-rendering:pixelated;filter:drop-shadow(2px 3px 0 #111426); }
.ryu-punch { transform-box:fill-box;transform-origin:left center; }
.hadouken { width:17px;height:17px;position:absolute;top:29px;left:55px;border:2px solid #d6ffff;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 12%,#9afaff 22%,#42caff 55%,#557bff 100%);box-shadow:0 0 7px 3px #4edfff,0 0 15px 5px #557bff88;opacity:0; }
.hadouken::before { content:'';position:absolute;top:4px;right:10px;width:18px;height:5px;background:linear-gradient(90deg,transparent,#91f7ff);filter:blur(1px); }
.hadouken i { position:absolute;inset:4px;border-radius:50%;background:#fff;opacity:.85; }
.level-up-label { position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:4px 7px;color:#151426;background:#8df4c8;border:2px solid #101426;white-space:nowrap;font:7px 'Press Start 2P',monospace; }
.level-up-scene .story-icon { position:relative;background:#8df4c8;box-shadow:5px 5px 0 #ffdf62,0 0 24px #8df4c877;animation:avatar-powerup .9s steps(7,end) both; }
.level-up-scene .story-icon::after { content:'✦';position:absolute;top:-14px;right:-14px;color:#ffdf62;font:18px 'Press Start 2P',monospace;animation:spark-pop .7s steps(4,end) both; }
.level-up-scene .old-level { animation:old-level-fade .5s steps(4,end) .35s both; }
.level-up-scene .story-level strong { animation:number-pop .65s steps(5,end) .45s both; }
.level-up-scene .ryu-punch { animation:ryu-punch .8s steps(4,end) .25s infinite alternate; }
.level-up-scene .hadouken { animation:hadouken-flight 1.6s steps(7,end) .55s infinite; }
.screen-bottom { display:flex;justify-content:space-between;align-items:center;padding:0 4px;color:#a5a4b2;font:700 8px Arial,sans-serif;letter-spacing:1px; }
.sound-toggle { min-width:22px;padding:1px 3px;border:0;border-radius:4px;color:#fff;background:transparent;font-size:12px;line-height:1;cursor:pointer; }.sound-toggle:hover{background:#ffffff22}.sound-toggle:focus-visible{outline:2px solid #ffdf62;outline-offset:2px}
.stars { position: fixed; inset: 0; z-index: -1; background-image: radial-gradient(var(--yellow) 2px, transparent 2.5px), radial-gradient(var(--sky) 2px, transparent 2.5px); background-position: 12px 18px, 83px 104px; background-size: 131px 127px, 173px 181px; opacity: .55; animation: blink 1.2s steps(2, end) infinite alternate; }
.planet, .orbit { display: none; }
.card { width: 100%; height: 100%; min-height: 0; display:flex; flex-direction:column; position: relative; padding: 18px 25px 13px; overflow: hidden; text-align: center; color: var(--ink); background: var(--paper); border: 5px solid var(--ink); box-shadow: 9px 9px 0 var(--pink), 18px 18px 0 #130f21; image-rendering: pixelated; }
.panel { width:100%; min-width:0;min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden; }
.card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 9px; background: repeating-linear-gradient(90deg, var(--purple) 0 18px, var(--pink) 18px 36px, var(--sky) 36px 54px, var(--yellow) 54px 72px); }
.badge { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 16px; padding: 8px 10px; color: var(--paper); background: var(--ink); font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.5; }
.badge-dot { width: 9px; height: 9px; background: var(--mint); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--mint); animation: blink .6s steps(2, end) infinite; }
.hero-icon { display: grid; place-items: center; width: 90px; height: 90px; margin: 0 auto 15px; border: 4px solid var(--ink); background: var(--sky); box-shadow: 5px 5px 0 var(--purple); font-size: 49px; image-rendering: pixelated; animation: hop 1.2s steps(2, end) infinite; }
.eyebrow { margin: 0 0 10px; font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.7; }
h1 { margin: 0; font-family: 'Press Start 2P', monospace; font-size: clamp(28px, 7.2vw, 42px); line-height: 1.35; letter-spacing: -2px; text-shadow: 3px 3px 0 var(--sky); }
h1 span { color: #e74773; text-shadow: 3px 3px 0 var(--yellow); }
.name { margin: 13px 0 5px; font-size: 27px; font-weight: bold; }.name span:first-child { color: #6542c1; }
.intro { margin: 0; font-size: 22px; line-height: 1.15; }
.primary-button { width: 100%; margin: 18px 0 14px; padding: 15px 12px; color: var(--paper); background: var(--purple); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.6; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.primary-button span { color: var(--yellow); }.primary-button:hover { background: #5e3fc2; transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }.primary-button:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.primary-button:focus-visible, .again-button:focus-visible { outline: 3px dashed #e74773; outline-offset: 5px; }
.message { width:100%;padding: 15px; border: 4px dashed var(--purple); background: #e7f9ee; animation: appear .3s steps(4, end) both; }
.message-icon { font-size: 33px; }.message h2 { margin: 8px 0; font-family: 'Press Start 2P', monospace; color: #e74773; font-size: 14px; line-height: 1.6; }
.message p { margin: 0; font-size: 22px; line-height: 1.2; }.message strong { color: #5a39bc; }.message .signoff { margin-top: 9px; font-weight: bold; }
.again-button { display:inline-block;margin: 7px auto 5px;padding: 8px 10px;border:3px solid var(--ink);color:var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font:8px/1.5 'Press Start 2P',monospace;cursor:pointer;transition:transform .12s,box-shadow .12s; }.again-button:hover { transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);background:#ffe994; }.again-button:active { transform:translate(4px,4px);box-shadow:none; }
#birthday-panel.celebrating { gap:3px;justify-content:flex-start;padding-top:8px; }
#birthday-panel.celebrating .badge,#birthday-panel.celebrating .hero-icon,#birthday-panel.celebrating .eyebrow,#birthday-panel.celebrating h1,#birthday-panel.celebrating .name { display:none!important; }
.message.replaying { animation: replay-burst .85s steps(6,end) both; }
.card-footer { margin-top: 18px; padding-top: 12px; border-top: 3px dashed #c6b9e9; font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1.7; }.card-footer span { color: #e74773; }
.rsvp { margin: 18px 0 0; padding: 14px; border: 4px solid var(--ink); background: #ffeda9; box-shadow: 4px 4px 0 #d3b6ff; text-align: left; }
.rsvp-heading { display:flex; align-items:center; gap:9px; color:#5435b2; }.rsvp-heading>span { font-size:25px; }.rsvp-heading h2 { margin:0; font: 11px/1.6 'Press Start 2P',monospace; }
.rsvp-caption { margin:5px 0 12px; font-size:18px; }
.field-label { display:block; margin:10px 0 4px; font:8px 'Press Start 2P',monospace; }
.rsvp input[type="text"],.rsvp select { width:100%; min-height:37px; padding:6px 9px; border:3px solid var(--ink); border-radius:0; color:var(--ink); background:#fffdf4; font:20px 'VT323',monospace; }
.rsvp input:focus-visible,.rsvp select:focus-visible { outline:3px dashed #e74773; outline-offset:2px; }
.rsvp-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.choice { cursor:pointer; }.choice input { position:absolute; opacity:0; }.choice span { min-height:39px; display:grid; place-items:center; padding:5px 3px; border:3px solid var(--ink); color:var(--ink); background:#fffdf4; font:7px/1.5 'Press Start 2P',monospace; text-align:center; }.choice input:checked+span { color:#fff; background:#7150cb; box-shadow:inset 0 0 0 2px #fff; }.choice input:focus-visible+span { outline:3px dashed #e74773; outline-offset:2px; }
.rsvp-submit { width:100%; margin-top:12px; padding:10px; border:3px solid var(--ink); color:white; background:#e74773; box-shadow:3px 3px 0 var(--ink); font:9px 'Press Start 2P',monospace; cursor:pointer; }.rsvp-submit:hover { background:#d73965; }.rsvp-submit:active { transform:translate(3px,3px);box-shadow:none; }
.rsvp-status { min-height:19px; margin:8px 0 0; color:#5435b2; font-size:18px; font-weight:bold; }
.open-rsvp { margin:0 auto 5px;padding:7px 10px;border:2px dashed #7354d6;color:#5435b2;background:transparent;font:8px 'Press Start 2P',monospace;cursor:pointer; }.open-rsvp:hover,.back-button:hover{background:#e7ddff}
.rsvp-panel { gap:12px; }.rsvp-panel .rsvp { width:min(100%,500px);margin:0;padding:13px; }.back-button { padding:7px 9px;border:2px solid var(--ink);color:var(--ink);background:#fffdf4;font:7px 'Press Start 2P',monospace;cursor:pointer; }
.float-emoji { position: absolute; font-size: 28px; image-rendering: pixelated; animation: hop 1s steps(2, end) infinite; }.float-one { top: 17%; left: 14%; }.float-two { top: 69%; right: 12%; animation-delay: -.35s; }.float-three { top: 27%; right: 17%; animation-delay: -.7s; }
[hidden] { display: none !important; }
.confetti { position: fixed; z-index: 5; top: -18px; width: 10px; height: 10px; border: 2px solid var(--ink); image-rendering: pixelated; pointer-events: none; animation: fall var(--duration) steps(12, end) forwards; }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(720deg); opacity: .2; } } @keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes blink { to { opacity: .25; } } @keyframes appear { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes power-pulse { 50% { filter:brightness(1.15);box-shadow:4px 4px 0 #e74773,0 0 0 4px #8df4c833; } }
@keyframes screen-power { 0% { opacity:1;transform:translateY(-50%) scaleY(1); } 45% { opacity:1;transform:translateY(-50%) scaleY(.35); } 100% { opacity:0;transform:translateY(-50%) scaleY(0); } }
@keyframes boot-fade { to { opacity:0;transform:scaleY(.02); } }
@keyframes story-enter { from { opacity:0;transform:scale(.96); } to { opacity:1;transform:scale(1); } }
@keyframes replay-burst { 0% { transform:scale(.93);background:#fff4c6;box-shadow:0 0 0 0 #ffdf6200; } 45% { transform:scale(1.025);background:#d6fff0;box-shadow:0 0 0 7px #ffdf6266; } 100% { transform:scale(1);background:#e7f9ee;box-shadow:0 0 0 0 #ffdf6200; } }
@keyframes avatar-powerup { 0% { transform:translateY(15px) scale(.55);filter:brightness(.6); } 45% { transform:translateY(-8px) scale(1.2);filter:brightness(1.8); } 75% { transform:translateY(2px) scale(.95);filter:brightness(1.25); } 100% { transform:translateY(0) scale(1);filter:brightness(1); } }
@keyframes number-pop { 0% { transform:scale(.2) rotate(-18deg);opacity:0; } 60% { transform:scale(1.25) rotate(5deg);opacity:1; } 100% { transform:scale(1) rotate(0);opacity:1; } }
@keyframes old-level-fade { to { transform:translateY(-8px);opacity:.25; } }
@keyframes spark-pop { 0% { transform:scale(0) rotate(-35deg);opacity:0; } 60% { transform:scale(1.5) rotate(10deg);opacity:1; } 100% { transform:scale(1) rotate(0);opacity:1; } }
@keyframes ryu-punch { from { transform:translateX(-1px); } to { transform:translateX(7px); } }
@keyframes hadouken-flight { 0%,12% { opacity:0;transform:translateX(0) scale(.45); } 22% { opacity:1;transform:translateX(0) scale(1); } 78% { opacity:1;transform:translateX(39px) scale(.82); } 100% { opacity:0;transform:translateX(48px) scale(.5); } }
@media (max-width: 700px) { .scene { min-height:100vh;min-height:100svh;padding:12px 8px; }.console { width:100%; height:min(540px, calc(100vh - 24px)); height:min(540px, calc(100svh - 24px)); min-height:420px; grid-template-columns:clamp(48px,12vw,84px) minmax(0,1fr) clamp(48px,12vw,84px);gap:6px;padding:8px;border-radius:42px;border-width:3px; }.joy { min-height:0;border-width:3px; }.joy-left {border-radius:36px 10px 10px 36px}.joy-right{border-radius:10px 36px 36px 10px}.stick{width:32px;height:32px;border-width:4px}.dpad{width:15px;height:15px}.dpad-up{top:calc(59% - 14px)}.dpad-down{top:calc(59% + 1px)}.dpad-left{left:calc(50% - 14px)}.dpad-right{left:calc(50% + 1px)}.action{--action-diameter:20px;--action-offset:32px;font-size:10px}.screen-shell{padding:7px 6px 5px;border-radius:13px;gap:5px}.screen-bottom{font-size:6px;letter-spacing:0}.card { padding: 12px 12px 8px; box-shadow: 5px 5px 0 var(--pink), 9px 9px 0 #130f21; }.hero-icon { width: 52px; height: 52px; margin: 0 auto 7px;font-size:30px; }.badge{font-size:clamp(5px,1.2vw,7px);padding:5px 6px;margin:2px 0 8px}h1{font-size:clamp(16px,4.5vw,28px);letter-spacing:-1.5px}.eyebrow{font-size:clamp(5px,1.2vw,6px);margin-bottom:5px}.name{font-size:21px;margin:8px 0 4px}.intro{font-size:18px}.primary-button{font-size:clamp(6px,1.5vw,8px);padding:9px 5px;margin:9px 0}.message{padding:8px}.message h2{font-size:10px;margin:5px 0}.message p{font-size:16px}.message-icon{font-size:22px}.again-button{margin:5px auto 0;padding:5px}.card-footer{font-size:6px;margin-top:7px;padding-top:6px}.open-rsvp{font-size:clamp(6px,1.5vw,8px);margin-bottom:2px}.rsvp-panel{gap:8px}.rsvp-panel .rsvp{padding:9px}.rsvp-caption{margin:3px 0 7px}.field-label{font-size:clamp(6px,1.3vw,7px);margin:7px 0 3px}.rsvp input[type="text"],.rsvp select{min-height:33px;padding:4px 8px}.rsvp-actions{margin-top:8px}.choice span{min-height:34px;font-size:clamp(5px,1.1vw,6px)}.rsvp-submit{margin-top:8px;padding:8px;font-size:clamp(6px,1.3vw,7px)}.rsvp-status{min-height:14px;margin:4px 0 0;font-size:15px}.back-button{font-size:clamp(5px,1.2vw,7px)}.float-one{left:1%;top:8%}.float-two{right:1%;top:83%}.float-three{right:1%;top:19%} }
@media (max-width: 380px) { .scene{padding-inline:6px}.console{grid-template-columns:clamp(44px,12vw,50px) minmax(0,1fr) clamp(44px,12vw,50px);gap:5px;padding:6px;border-radius:34px}.joy-left{border-radius:29px 8px 8px 29px}.joy-right{border-radius:8px 29px 29px 8px}.stick{width:28px;height:28px}.dpad{width:12px;height:12px}.dpad-up{top:calc(59% - 11px)}.dpad-down{top:calc(59% + 1px)}.dpad-left{left:calc(50% - 11px)}.dpad-right{left:calc(50% + 1px)}.action{--action-diameter:17px;--action-offset:29px;font-size:8px}.screen-shell{padding:5px 4px 4px}.card{padding-inline:9px}.screen-bottom span:first-child{display:none}.screen-bottom{justify-content:center}.rsvp-actions{gap:5px} }
@media (max-height: 460px) { .console{height:calc(100vh - 20px);height:calc(100svh - 20px);min-height:0}.scene{padding-block:10px}.hero-icon{display:none}.badge{margin-block:3px 6px}.name{margin-block:6px 3px}.intro{font-size:16px}.primary-button{margin:7px 0;padding:7px}.card-footer{margin-top:5px;padding-top:4px}.rsvp-panel{gap:4px}.rsvp-panel .rsvp{padding:6px}.rsvp-caption{margin:0 0 4px}.field-label{margin:4px 0 2px}.rsvp input[type="text"],.rsvp select{min-height:28px}.rsvp-actions{margin-top:5px}.rsvp-submit{margin-top:5px;padding:6px}.rsvp-status{min-height:10px;margin:2px 0;font-size:14px} }
@media (max-width:700px) { .boot-screen{padding:8px 5px}.boot-icon{margin:3px 0 8px}.boot-copy{margin:8px 0 10px;line-height:1.75}.boot-stars{top:6%} }
@media (max-height:460px) { .boot-icon{width:38px;height:38px;margin:2px 0 5px;font-size:22px}.boot-copy{margin:5px 0 7px}.boot-stars{top:3%}.boot-hint{margin-top:6px} }
@media (max-width:700px) { .story-screen{padding:10px 5px}.story-icon{width:42px;height:42px;margin-bottom:7px;font-size:24px}.story-kicker{font-size:clamp(5px,1vw,7px);margin-bottom:5px}.story-title{font-size:clamp(14px,3.2vw,22px)}.story-copy{font-size:clamp(15px,4vw,19px);margin:7px auto 10px}.story-progress{margin-bottom:9px}.story-progress span{width:15px;height:6px}.story-screen .power-button{min-width:0;padding:8px 9px;font-size:clamp(6px,1.5vw,8px)}.story-level{min-width:120px;gap:7px;margin:0 auto 7px;padding-bottom:16px}.story-level .old-level{font-size:clamp(20px,6vw,30px)}.story-level .level-arrow{font-size:16px}.story-level strong{font-size:clamp(34px,9vw,48px)}.level-up-label{font-size:6px;padding:3px 5px}.story-skip{font-size:5px} }
@media (max-height:460px) { .story-icon{width:34px;height:34px;margin-bottom:4px;font-size:20px}.story-copy{margin:4px auto 6px}.story-progress{margin-bottom:6px} }
@media (max-width:700px) { #birthday-panel.celebrating{gap:0}#birthday-panel.celebrating .message{padding:7px 8px}.message h2{font-size:clamp(8px,2vw,10px);line-height:1.45}.message p{font-size:clamp(14px,3.7vw,16px);line-height:1.12}.message .signoff{margin-top:5px}.again-button{font-size:clamp(6px,1.7vw,8px);padding:6px 5px;margin:4px auto 3px} }
/* Portrait phones get a clear rotate prompt; the full handheld layout is tuned for landscape. */
.rotate-prompt { display:none; }
@media (max-width:700px) and (orientation:portrait) {
  .scene { min-height:100vh;min-height:100svh;padding:22px 16px; }
  .console { display:none; }
  .rotate-prompt { width:min(100%,340px);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:26px 20px;border:4px solid #111426;border-radius:18px;color:#fff6dc;background:#201b3a;box-shadow:8px 8px 0 #fa6f94;text-align:center; }
  .rotate-prompt p { margin:3px 0 0;color:#84d9ff;font:7px/1.8 'Press Start 2P',monospace; }
  .rotate-prompt h1 { margin:0;color:#ffdf62;font:clamp(13px,4vw,18px)/1.8 'Press Start 2P',monospace;letter-spacing:0;text-shadow:2px 2px 0 #e74773; }
  .rotate-prompt small { color:#cbd8ff;font:18px 'VT323',monospace; }
  .rotate-phone { width:39px;height:66px;position:relative;border:4px solid #fff6dc;border-radius:9px;background:#84d9ff;box-shadow:inset 0 0 0 3px #201b3a,0 0 20px #84d9ff66;animation:phone-turn 2.2s ease-in-out infinite; }
  .rotate-phone::before { content:'';position:absolute;top:4px;left:50%;width:12px;height:2px;transform:translateX(-50%);background:#fff6dc; }
  .rotate-phone span { position:absolute;left:50%;bottom:4px;width:5px;height:5px;transform:translateX(-50%);border-radius:50%;background:#fff6dc; }
}
@media (orientation:landscape) and (max-height:520px) {
  .scene { height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;padding:4px 10px calc(4px + env(safe-area-inset-bottom)); }
  .console { width:min(98vw,1280px);height:min(500px,calc(100vh - 20px));height:min(500px,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px));min-height:0;grid-template-columns:clamp(76px,11vw,108px) minmax(0,1fr) clamp(76px,11vw,108px);grid-template-rows:minmax(0,1fr);gap:8px;padding:9px;border-radius:48px;border-width:4px;box-shadow:0 6px 0 #10101a,0 12px 22px #09071399,inset 0 5px 5px #ffffff35,inset 0 -9px 10px #0009; }
  .joy { min-height:0;border-width:3px; }
  .joy-left { border-radius:42px 13px 13px 42px; }.joy-right { border-radius:13px 42px 42px 13px; }
  .stick { width:38px;height:38px;border-width:5px; }
  .dpad { width:18px;height:18px; }.dpad-up{top:calc(59% - 17px)}.dpad-down{top:calc(59% + 1px)}.dpad-left{left:calc(50% - 17px)}.dpad-right{left:calc(50% + 1px)}
  .stick-right { bottom:9%; }
  .action { --action-diameter:22px;--action-offset:35px;--action-center:48%;font-size:11px; }
  .screen-shell { padding:6px 8px 4px;border-radius:18px;gap:5px; }
  .card { padding:7px 15px 5px; }.card::before { height:5px; }
  .badge { margin:2px 0 5px;padding:4px 7px;font-size:6px; }
  .hero-icon,.eyebrow { display:none!important; }
  h1 { font-size:clamp(16px,2.5vw,23px);line-height:1.1;letter-spacing:-1px; }
  .name { margin:5px 0 3px;font-size:20px; }
  .intro { display:none; }
  .primary-button { margin:7px 0 5px;padding:8px;font-size:8px; }
  .card-footer { margin-top:5px;padding-top:5px;font-size:6px; }
  #birthday-panel:not(.celebrating) { display:grid;grid-auto-rows:min-content;align-content:center;justify-items:center;gap:4px;padding:4px 10px; }
  #birthday-panel:not(.celebrating) .badge { margin:0 auto;padding:3px 6px;font-size:5px; }
  #birthday-panel:not(.celebrating) h1 { font-size:clamp(15px,2.2vw,21px);line-height:1.08;margin:0; }
  #birthday-panel:not(.celebrating) .name { margin:0;font-size:18px; }
  #birthday-panel:not(.celebrating) .intro { display:block;margin:0;font-size:15px;line-height:1.1; }
  #birthday-panel:not(.celebrating) .primary-button { width:min(100%,680px);margin:2px 0;padding:7px 8px;font-size:8px;line-height:1.25; }
  #birthday-panel:not(.celebrating) .open-rsvp { margin:0;padding:4px 7px;font-size:5px;line-height:1.25; }
  .card-footer { margin-top:3px;padding-top:4px;font-size:5px; }
  .open-rsvp { padding:5px;font-size:6px; }
  #birthday-panel.celebrating { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-content:stretch;gap:4px;padding:3px 8px; }
  #birthday-panel.celebrating .message { grid-column:1/-1;padding:4px 8px;border-width:3px; }
  .message-icon { font-size:18px;line-height:1; }.message h2 { margin:2px 0;font-size:9px;line-height:1.25; }.message p { font-size:15px;line-height:1.02; }.message .signoff { margin-top:3px; }
  .again-button { grid-column:1;justify-self:end;margin:0;padding:5px 7px;font-size:6px; }
  .open-rsvp { grid-column:2;justify-self:start;margin:0;padding:5px 7px;font-size:6px; }
  .rsvp-panel { display:grid;grid-template-rows:auto minmax(0,1fr);align-content:center;gap:4px;padding:3px 8px; }
  .rsvp-panel .rsvp { width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;gap:4px 8px;margin:0;padding:7px; }
  .rsvp-heading,.rsvp-caption,#rsvp-form { grid-column:1/-1; }
  .rsvp-heading h2 { font-size:9px; }.rsvp-caption { margin:0 0 2px;font-size:16px; }
  #rsvp-form { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:4px 8px; }
  .field-label { margin:0;font-size:7px; }.rsvp input[type="text"],.rsvp select { min-height:29px;padding:3px 6px;font-size:18px; }
  .rsvp-actions,.rsvp-submit,.rsvp-status { grid-column:1/-1; }
  .rsvp-actions { margin-top:2px; }.choice span { min-height:29px;font-size:6px; }.rsvp-submit { margin-top:2px;padding:6px;font-size:7px; }.rsvp-status { min-height:10px;margin:0;font-size:14px; }
  .boot-screen { padding:6px 10px; }.boot-icon { width:38px;height:38px;margin:2px 0 5px;font-size:22px; }.boot-kicker { margin-bottom:3px;font-size:7px; }.boot-copy { margin:5px 0 7px;font-size:7px;line-height:1.55; }.boot-hint { margin-top:5px;font-size:5px; }.power-button { padding:7px 10px;font-size:8px; }
  .story-screen { display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(7,min-content);align-content:center;justify-items:center;gap:clamp(3px,.8vh,6px);min-height:0;padding:8px 14px;overflow:hidden; }.story-screen::before { display:none; }.story-icon { flex:none;width:44px;height:44px;margin:0;font-size:26px; }.story-kicker { margin:0;font-size:clamp(6px,1vw,8px);line-height:1.3; }.story-title { margin:0;font-size:clamp(17px,2.5vw,23px);line-height:1.25; }.story-copy { max-width:54ch;margin:0 auto;font-size:clamp(16px,1.9vw,19px);line-height:1.15; }.story-progress { margin:0; }.story-progress span { height:6px; }.story-level { min-width:120px;gap:8px;margin:0;padding:0 5px 15px; }.story-level .old-level { font-size:26px; }.story-level .level-arrow { font-size:15px; }.story-level strong { font-size:36px; }.level-up-label { bottom:0;padding:2px 5px;font-size:6px; }.story-screen .power-button { min-width:0;padding:6px 10px;font-size:7px; }.story-controls { gap:2px; }.story-skip { padding:3px;font-size:6px; }.story-screen.level-up-scene .story-icon::after { display:none; }
  .float-emoji { display:none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@keyframes phone-turn { 0%,15% { transform:rotate(0deg); } 45%,75% { transform:rotate(90deg); } 100% { transform:rotate(0deg); } }
@media (max-width:700px) { .fighter-stage{width:78px;height:64px;margin-right:0}.ryu-fighter{width:54px;height:62px}.hadouken{width:14px;height:14px;top:25px;left:48px}.hadouken::before{right:8px;width:15px;height:4px} }
@media (orientation:landscape) and (max-height:520px) { .fighter-stage{width:70px;height:60px}.ryu-fighter{width:50px;height:58px}.hadouken{width:13px;height:13px;top:23px;left:44px}.hadouken::before{width:14px} }
.story-screen { background:radial-gradient(ellipse at 50% 0%,#343b76 0,#171a31 54%,#101323 100%); }
.story-screen::before { display:none; }
.story-screen .story-kicker { margin:0;color:#ffdf62; }
.story-screen .story-title { line-height:1.2;text-shadow:3px 3px 0 #e74773; }
.story-screen .story-copy { margin:2px 0 7px;color:#cbd8ff; }
.fighter-select { width:min(100%,560px);min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;position:relative;margin:0 auto 3px; }
.fighter-select::before { content:'VS';position:absolute;z-index:2;top:50%;left:50%;width:32px;height:32px;display:grid;place-items:center;transform:translate(-50%,-50%);border:3px solid #fff6dc;border-radius:50%;color:#fff6dc;background:#e74773;box-shadow:0 0 0 3px #171526;font:8px 'Press Start 2P',monospace; }
.fighter-choice { min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 5px;border:3px solid #505a80;color:#fff6dc;background:linear-gradient(155deg,#202d52,#15182a 70%);box-shadow:3px 3px 0 #0a0c17;font:7px 'Press Start 2P',monospace;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s; }
.fighter-choice:first-child { background:linear-gradient(155deg,#263d68,#15182a 70%); }
.fighter-choice:last-child { background:linear-gradient(205deg,#582b4b,#15182a 70%); }
.fighter-choice:hover { transform:translateY(-2px);border-color:#fff6dc; }
.fighter-choice.selected { transform:translateY(-3px) scale(1.025);border-color:#ffdf62;box-shadow:0 0 0 2px #ffdf6266,0 0 18px #5bdcff88,4px 5px 0 #0a0c17; }
.fighter-choice:focus-visible { outline:3px dashed #ffdf62;outline-offset:3px; }
.fighter-name { color:#ffdf62;line-height:1.4; }
.fighter-choice img { display:block;width:min(100%,150px);height:clamp(76px,17vh,136px);object-fit:contain;background:transparent;image-rendering:pixelated; }
.fighter-move { color:#9ce8ff;font-size:6px;line-height:1.4; }
.story-controls { margin-top:2px; }
.story-screen .power-button { min-width:0;padding:7px 13px;border-color:#111426;background:#ffdf62;box-shadow:4px 4px 0 #e74773;color:#171526;font-size:8px; }
.story-screen .power-button:hover { background:#fff09d; }
.story-screen.fighting .fighter-select { animation:fighter-impact .65s steps(5,end) both; }
.story-screen.fighting .fighter-choice.selected { box-shadow:0 0 0 3px #8df4c8,0 0 24px 8px #4fcaffaa,5px 5px 0 #0a0c17; }
@keyframes fighter-impact { 0% { transform:translateX(0) scale(1); } 28% { transform:translateX(-5px) scale(1.02); } 55% { transform:translateX(6px) scale(1.04); } 100% { transform:translateX(0) scale(1); } }
@media (max-width:700px) { .fighter-select{gap:10px}.fighter-choice{gap:3px;padding:5px 3px;font-size:6px}.fighter-choice img{height:clamp(70px,19vh,110px)}.fighter-move{font-size:5px}.fighter-select::before{width:28px;height:28px;font-size:7px} }
@media (orientation:landscape) and (max-height:520px) {
  .story-screen { grid-template-rows:repeat(5,min-content);gap:clamp(3px,.8vh,6px);padding:8px 14px; }
  .story-screen .story-title { font-size:clamp(16px,2.5vw,23px); }
  .story-screen .story-copy { margin:0 0 2px;font-size:clamp(15px,1.9vw,19px);line-height:1.05; }
  .fighter-select { width:min(100%,520px);gap:12px;margin:0 auto; }
  .fighter-choice { padding:4px;gap:2px;font-size:6px; }
  .fighter-choice img { height:clamp(68px,17vh,104px); }
  .fighter-move { font-size:5px; }
  .story-screen .power-button { padding:5px 10px;font-size:7px; }
}
.card { color:#f5f2e9;background:linear-gradient(180deg,#202a49,#12182c);border-color:#39496f;box-shadow:inset 0 0 0 2px #6477aa,6px 6px 0 #e74773,10px 10px 0 #0a0d18; }
.card::before { height:8px;background:repeating-linear-gradient(90deg,#e74773 0 20px,#ffdf62 20px 40px,#4aa5ff 40px 60px,#171526 60px 80px); }
.badge { color:#ffdf62;background:#0e1324;border:2px solid #53658e; }
.badge-dot { background:#8df4c8;box-shadow:0 0 0 2px #0e1324,0 0 0 4px #8df4c8; }
.hero-icon { background:#ffdf62;border-color:#0e1324;box-shadow:4px 4px 0 #e74773; }
.eyebrow { color:#9ddfff; }
h1 { color:#fff6dc;text-shadow:3px 3px 0 #2968b4; }
h1 span { color:#ffdf62;text-shadow:3px 3px 0 #e74773; }
.name { color:#fff6dc; }.name span:first-child { color:#9ddfff; }
.intro { color:#d7def4; }
.primary-button { color:#fff6dc;background:#d83c61;border-color:#101426;box-shadow:5px 5px 0 #0a0d18; }
.primary-button:hover { background:#f04c70; }
.message { border-color:#ffdf62;background:linear-gradient(145deg,#202d4e,#11182c);color:#f5f2e9; }
.message h2 { color:#ffdf62; }
.message strong { color:#8feaff; }
.message .signoff { color:#ffdf62; }
.again-button { color:#fff6dc;background:#1d79a4;border-color:#0a0d18;box-shadow:4px 4px 0 #0a0d18; }
.open-rsvp { border-color:#9ddfff;color:#9ddfff; }
.open-rsvp:hover,.back-button:hover { color:#171526;background:#9ddfff; }
.card-footer { border-color:#4f628f;color:#cbd8ff; }
.card-footer span { color:#ffdf62; }
.rsvp { border-color:#6276a6;background:#19233e;box-shadow:4px 4px 0 #e74773;color:#f5f2e9; }
.rsvp-heading { color:#ffdf62; }
.rsvp-caption { color:#d7def4; }
.field-label { color:#9ddfff; }
.choice span { border-color:#52658d;color:#fff6dc;background:#10172a; }
.choice input:checked+span { color:#101426;background:#8df4c8;box-shadow:inset 0 0 0 2px #fff; }
.rsvp-submit { border-color:#101426;color:#fff6dc;background:#d83c61;box-shadow:3px 3px 0 #080b14; }
.rsvp-status { color:#8df4c8; }
.back-button { border-color:#9ddfff;color:#fff6dc;background:#182440; }

/* Compact retro player-select layout. */
.story-screen {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:repeat(6,min-content);
  align-content:center;
  justify-items:center;
  gap:clamp(3px,.7vh,8px);
  padding:clamp(6px,1.5vh,14px) clamp(8px,2vw,22px);
  background:linear-gradient(180deg,#14244b 0%,#273a70 48%,#142047 100%);
}
.story-screen::after {
  content:'AJ\'S BLOCK WORLD';
  position:absolute;
  right:10px;
  bottom:8px;
  color:#e9cf6a;
  opacity:.45;
  font:5px 'Press Start 2P',monospace;
  pointer-events:none;
}
.story-screen .story-kicker { z-index:1;margin:0;color:#e9cf6a;font-size:clamp(6px,1vw,9px); }
.story-screen .story-title { z-index:1;margin:0;font-size:clamp(13px,2.2vw,22px);line-height:1.2;text-shadow:2px 2px 0 #10172b; }
.story-screen .story-copy { z-index:1;margin:0;color:#d5e8ff;font-size:clamp(14px,1.8vw,19px);line-height:1.05; }
.fighter-select {
  width:min(100%,480px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(3px,.6vw,7px);
  margin:0 auto;
}
.fighter-select::before { display:none; }
.fighter-choice {
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  justify-items:center;
  gap:3px;
  padding:3px;
  border:2px solid #7184af;
  color:#fff6dc;
  background:#1a274a;
  box-shadow:2px 2px 0 #090f21;
  font-size:clamp(5px,.7vw,7px);
  transition:background-color .12s,border-color .12s,transform .12s,box-shadow .12s;
}
.fighter-choice:nth-child(2n) { background:#202d54; }
.fighter-choice:hover { transform:translateY(-2px);border-color:#fff6dc; }
.fighter-choice.selected { transform:translateY(-2px);border-color:#ffe66b;background:#384b79;box-shadow:0 0 0 2px #ffe66b66,0 0 12px #ffe66b66,2px 3px 0 #090f21; }
.fighter-choice:focus-visible { outline:2px dashed #ffe66b;outline-offset:2px; }
.fighter-portrait {
  width:100%;
  height:clamp(30px,7vh,58px);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  border:2px solid #0b1225;
  color:#fff4d5;
  background:linear-gradient(145deg,var(--fighter-light),var(--fighter-dark));
  box-shadow:inset 0 0 0 2px #ffffff28;
  image-rendering:pixelated;
}
.fighter-portrait::before,.fighter-portrait::after { content:'';position:absolute;z-index:0;image-rendering:pixelated; }
.fighter-portrait::before { width:26%;height:55%;top:9%;left:37%;background:var(--fighter-light);box-shadow:-7px 7px 0 var(--fighter-dark),7px 7px 0 var(--fighter-dark); }
.fighter-portrait::after { width:52%;height:26%;left:24%;bottom:4%;background:var(--fighter-dark);box-shadow:-8px 3px 0 var(--fighter-dark),8px 3px 0 var(--fighter-dark); }
.fighter-portrait span { z-index:1;color:#fff6dc;font:clamp(13px,2.3vh,20px) 'Press Start 2P',monospace;text-shadow:2px 2px 0 #10172b; }
.portrait-ryu { --fighter-light:#faeee0;--fighter-dark:#bb5145;background:linear-gradient(145deg,#fbf0dd,#8f3137); }
.portrait-honda { --fighter-light:#d3e4f1;--fighter-dark:#4f7fb1;background:linear-gradient(145deg,#d3e4f1,#385a94); }
.portrait-blanka { --fighter-light:#d7f47a;--fighter-dark:#64a63b;background:linear-gradient(145deg,#d7f47a,#326f42); }
.portrait-guile { --fighter-light:#e7cf82;--fighter-dark:#426c9c;background:linear-gradient(145deg,#e7cf82,#375482); }
.portrait-ken { --fighter-light:#f4d782;--fighter-dark:#d34d38;background:linear-gradient(145deg,#f4d782,#ae2938); }
.portrait-chunli { --fighter-light:#b7e5ff;--fighter-dark:#526ad0;background:linear-gradient(145deg,#b7e5ff,#3940a0); }
.portrait-zangief { --fighter-light:#e2a777;--fighter-dark:#8b3e4a;background:linear-gradient(145deg,#e2a777,#603548); }
.portrait-dhalsim { --fighter-light:#f0d899;--fighter-dark:#b76546;background:linear-gradient(145deg,#f0d899,#823c4b); }
.fighter-name { max-width:100%;overflow:hidden;color:#fff2bd;font-size:inherit;line-height:1.25;text-overflow:ellipsis;white-space:nowrap; }
.selected-fighter { z-index:1;margin:0;color:#e9cf6a;font:clamp(5px,.7vw,7px) 'Press Start 2P',monospace;line-height:1.4; }
.selected-fighter strong { color:#fff6dc; }
.story-controls { z-index:1;margin:0; }
.story-screen .power-button { min-width:clamp(125px,22vw,210px);padding:clamp(5px,.8vh,9px) 10px;border-color:#10172b;background:#e9cf6a;box-shadow:3px 3px 0 #10172b;color:#172040;font-size:clamp(6px,.8vw,9px); }
.story-screen.world-launching .fighter-select { animation:fighter-impact .65s steps(5,end) both; }
.story-screen.world-launching .fighter-choice.selected { box-shadow:0 0 0 3px #a9df64,0 0 20px 7px #75c95599,4px 4px 0 #263b26; }
.fighter-portrait { background:#152143; }
.fighter-portrait::before,.fighter-portrait::after { display:none; }
.fighter-portrait img { display:block;width:100%;height:100%;object-fit:contain;background:transparent;image-rendering:pixelated; }
@media (max-width:700px) {
  .fighter-select { gap:3px; }
  .fighter-choice { gap:2px;padding:2px;font-size:5px; }
  .fighter-portrait { height:clamp(27px,9vh,44px); }
}
@media (orientation:landscape) and (max-height:520px) {
  .story-screen { grid-template-rows:repeat(6,min-content);gap:clamp(2px,.55vh,5px);padding:4px 12px; }
  .story-screen .story-copy { font-size:clamp(12px,1.7vw,16px); }
  .fighter-select { width:min(100%,500px);gap:4px; }
  .fighter-choice { padding:2px;font-size:5px; }
  .fighter-portrait { height:clamp(25px,7.7vh,39px); }
  .fighter-portrait span { font-size:clamp(12px,2vh,17px); }
  .selected-fighter { font-size:5px; }
  .story-screen .power-button { padding:4px 10px;font-size:6px; }
}

/* Minecraft-inspired birthday world, drawn with CSS so it stays crisp and has no white image boxes. */
:root { --ink:#203022;--paper:#f5e8bd;--purple:#477c37;--pink:#db9d47;--yellow:#f5d45e;--mint:#89cb55;--sky:#8bd7ff; }
body { color:#1d2b24;background:#8bd7ff;background-image:linear-gradient(180deg,#8bd7ff 0 55%,#75c955 55% 70%,#80522f 70% 100%); }
.stars { display:none; }
.scene { background:linear-gradient(180deg,transparent 0 56%,#76c94f 56% 61%,#477d38 61% 67%,#8b5a32 67% 100%); }
.scene::before,.scene::after { z-index:-1;width:clamp(80px,16vw,190px);height:clamp(80px,16vw,190px);border:0;border-radius:0;box-shadow:none;transform:none;opacity:1; }
.scene::before { left:4%;top:auto;bottom:8%;background:#4d8f3b;clip-path:polygon(0 100%,0 42%,22% 42%,22% 18%,43% 18%,43% 0,69% 0,69% 28%,100% 28%,100% 100%); }
.scene::after { right:5%;bottom:8%;background:#6cab43;clip-path:polygon(0 100%,0 32%,24% 32%,24% 4%,65% 4%,65% 25%,100% 25%,100% 100%); }
.float-emoji { filter:drop-shadow(3px 3px 0 #263c23); }
.float-one { display:none; }
.float-two { display:none; }
.float-three { display:none; }
.rotate-prompt { color:#25412b; }

.screen { background:#77ceff; }
.minecraft-world { position:absolute;z-index:0;inset:0;overflow:hidden;background:linear-gradient(#77ceff 0 64%,#78c84d 64% 67%,#905b35 67% 100%); }
.mc-sun { position:absolute;top:10%;right:9%;width:clamp(20px,4vw,42px);aspect-ratio:1;background:#ffe36b;box-shadow:0 0 0 5px #ffe36b55,5px 5px 0 #d5a83c;image-rendering:pixelated; }
.mc-cloud { position:absolute;width:clamp(42px,9vw,90px);height:13px;background:#f8ffff;box-shadow:0 -8px 0 -2px #f8ffff,12px -5px 0 -1px #f8ffff,24px 1px 0 #f8ffff;image-rendering:pixelated; }
.mc-cloud-one { top:16%;left:13%; }.mc-cloud-two { top:27%;right:26%;transform:scale(.68);opacity:.88; }
.mc-hill { position:absolute;bottom:28%;width:36%;height:28%;background:#68b949;clip-path:polygon(0 100%,0 42%,18% 42%,18% 25%,39% 25%,39% 0,70% 0,70% 24%,100% 24%,100% 100%); }
.mc-hill-one { left:-5%; }.mc-hill-two { right:-8%;bottom:29%;width:42%;height:34%;background:#50983f;transform:scaleX(-1); }
.mc-ground { position:absolute;left:0;right:0;bottom:0;height:31%;background-color:#8e5b35;background-image:linear-gradient(90deg,#75482c 0 10px,transparent 10px 22px,#a87345 22px 31px,transparent 31px 48px),linear-gradient(0deg,#74472c 0 9px,transparent 9px 24px,#a87345 24px 32px,transparent 32px 45px);background-size:48px 45px; }
.mc-ground::before { content:'';position:absolute;left:0;right:0;top:-9px;height:12px;background:repeating-linear-gradient(90deg,#4c9f37 0 18px,#68bd45 18px 36px,#589f3d 36px 54px);border-bottom:3px solid #387733; }
.mc-ground::after { content:'';position:absolute;inset:13px 0 auto;height:5px;background:repeating-linear-gradient(90deg,transparent 0 17px,#66442e 17px 20px,transparent 20px 38px);opacity:.72; }
.mc-tree { position:absolute;z-index:1;bottom:25%;width:13px;height:55px;background:#75502e;box-shadow:inset 4px 0 #93643a; }
.mc-tree::before { content:'';position:absolute;width:42px;height:34px;left:50%;top:-25px;transform:translateX(-50%);background:#438d37;box-shadow:0 -9px 0 -3px #59a744,0 8px 0 #397b34,-10px 8px 0 #4a9838,10px 8px 0 #367b32; }
.mc-tree-one { left:12%; }.mc-tree-two { right:13%;bottom:24%;transform:scale(.78); }
.screen > #boot-screen,.screen > #story-screen,.screen > #main-card { z-index:2; }
.boot-screen { color:#fff8dd;background:linear-gradient(180deg,#234332d9,#183428eF); }
.boot-screen::before { background-image:repeating-linear-gradient(0deg,#ffffff12 0 2px,transparent 2px 6px);opacity:.35; }
.boot-stars { color:#ffe578;letter-spacing:5px; }
.boot-icon { border:3px solid #493b2b;background:#8d623c;box-shadow:5px 5px 0 #477c37; }
.boot-kicker { color:#b9e987; }
#boot-title { color:#fff8dd;text-shadow:4px 4px 0 #477c37,8px 8px 0 #273523; }
#boot-title span { color:#ffe36b; }
.boot-copy { color:#f4edcf; }
.boot-hint { color:#d1e6ae; }
.power-button { border-color:#263b26;color:#fff8dc;background:#548b3e;box-shadow:4px 4px 0 #273523; }
.power-button:hover { background:#68a94c; }
.story-screen { color:#fff8df;background:#203c2ade; }
.story-screen::after { color:#f1db72; }
.story-screen .story-kicker { color:#f2d764; }
.story-screen .story-title { color:#fff8df;text-shadow:3px 3px 0 #304f31; }
.story-screen .story-copy { color:#d5edb0; }
.fighter-select { width:min(100%,500px); }
.fighter-choice,.fighter-choice:nth-child(2n) { border:2px solid #506c3f;color:#fff8df;background:#59422ddf;box-shadow:2px 2px 0 #28251b; }
.fighter-choice:hover { border-color:#e8d779;background:#6b5034; }
.fighter-choice.selected { border-color:#ffe36b;background:#587e3a;box-shadow:0 0 0 2px #ffe36b70,0 0 14px #b8e87888,2px 3px 0 #28251b; }
.fighter-choice:focus-visible { outline:2px dashed #ffe36b; }
.fighter-portrait { height:clamp(31px,7vh,58px);border:2px solid #352b20;background:#466d38;box-shadow:inset 0 0 0 2px #ffffff15; }
.fighter-portrait::before { display:block;content:'';position:absolute;z-index:0;left:30%;bottom:0;width:40%;height:25%;background:var(--shirt);box-shadow:-5px 1px 0 var(--shirt),5px 1px 0 var(--shirt); }
.fighter-portrait::after { display:block;content:'';position:absolute;z-index:1;left:50%;top:12%;width:34%;height:55%;transform:translateX(-50%);background:var(--skin);box-shadow:0 -4px 0 var(--hair); }
.avatar-face { position:absolute;z-index:2;left:50%;top:35%;width:4px;height:4px;transform:translateX(-50%);overflow:visible;color:transparent;font-size:0; }
.fighter-portrait .avatar-face { font:0/0 sans-serif;color:transparent;text-shadow:none; }
.avatar-face::before { content:'';position:absolute;left:-5px;top:0;width:3px;height:3px;background:#24221a;box-shadow:9px 0 #24221a; }
.avatar-steve { --skin:#c79364;--hair:#493428;--shirt:#318084;background:#648b45; }
.avatar-alex { --skin:#d7a777;--hair:#cb7a36;--shirt:#4c7c39;background:#7a984a; }
.avatar-creeper { --skin:#66ad45;--hair:#54953d;--shirt:#4a873a;background:#4d8a3c; }
.avatar-creeper::after { width:34%;height:77%;top:10%;background:#5eaa43;box-shadow:none; }
.avatar-creeper .avatar-face::before { left:-5px;top:0;width:4px;height:7px;background:#183426;box-shadow:9px 0 #183426,4px 8px 0 2px #183426,0 13px 0 #183426,9px 13px 0 #183426; }
.avatar-enderman { --skin:#342b45;--hair:#1c1a2c;--shirt:#41375c;background:#33314a; }
.avatar-enderman::after { width:25%;height:82%;top:5%;background:#292638;box-shadow:none; }
.avatar-enderman .avatar-face::before { left:-5px;top:2px;width:4px;height:3px;background:#df59b6;box-shadow:9px 0 #df59b6; }
.avatar-zombie { --skin:#6eaa62;--hair:#51884a;--shirt:#476eb4;background:#538b43; }
.avatar-skeleton { --skin:#d8d1b1;--hair:#a49b7e;--shirt:#bab397;background:#809062; }
.avatar-villager { --skin:#bd8e67;--hair:#605039;--shirt:#72523c;background:#77964b; }
.avatar-villager .avatar-face::after { content:'';position:absolute;left:1px;top:6px;width:10px;height:3px;background:#a87857; }
.avatar-piglin { --skin:#ce8d78;--hair:#8b554f;--shirt:#9b713f;background:#af8243; }
.fighter-name { color:#fff2bf; }
.selected-fighter { color:#ffe36b; }
.selected-fighter strong { color:#fff8df; }
.story-screen .power-button { border-color:#273523;color:#fff8df;background:#548b3e;box-shadow:3px 3px 0 #273523; }
.story-screen .power-button:hover { background:#68a94c; }

.card { width:auto;height:auto;margin:1.2%;color:#30271a;background:rgba(248,237,200,.93);border:4px solid #62452b;box-shadow:inset 0 0 0 3px #c9a96b,6px 6px 0 #477c37,10px 10px 0 #263b26; }
.card::before { height:9px;background:repeating-linear-gradient(90deg,#4e973c 0 18px,#72bd4b 18px 36px,#397d35 36px 54px,#704b2f 54px 72px); }
.badge { color:#fff7d9;background:#59402b;border:2px solid #382c20; }
.badge-dot { background:#a9df64;box-shadow:0 0 0 2px #59402b,0 0 0 4px #a9df64; }
.hero-icon { background:#69b94a;border-color:#4b3725;box-shadow:4px 4px 0 #89613a; }
.eyebrow { color:#477c37; }
h1 { color:#374d2b;text-shadow:3px 3px 0 #a5d86d; }
h1 span { color:#8d5c31;text-shadow:3px 3px 0 #e2c86c; }
.name { color:#493c2b; }.name span:first-child { color:#477c37; }
.intro { color:#5b4a32; }
.primary-button { color:#fff8dd;background:#5b923e;border-color:#3d3323;box-shadow:5px 5px 0 #3d3323; }
.primary-button:hover { background:#71aa4c; }
.message { border-color:#5b923e;background:#f5e8bd;color:#342c20; }
.message h2 { color:#507f38; }
.message strong { color:#9a6838; }
.message .signoff { color:#527f3c; }
.again-button { color:#fff8dd;background:#7a5736;border-color:#3d3323;box-shadow:4px 4px 0 #3d3323; }
.open-rsvp { border-color:#5b923e;color:#477c37; }
.open-rsvp:hover,.back-button:hover { color:#fff8dd;background:#5b923e; }
.card-footer { border-color:#9a7a4c;color:#59452e; }
.card-footer span { color:#5b923e; }
.rsvp { border-color:#62452b;background:#f0dda7;box-shadow:4px 4px 0 #477c37;color:#342c20; }
.rsvp-heading { color:#477c37; }
.rsvp-caption { color:#5b4a32; }
.field-label { color:#5b7639; }
.choice span { border-color:#62452b;color:#473a28;background:#fff8df; }
.choice input:checked+span { color:#fff;background:#548b3e;box-shadow:inset 0 0 0 2px #fff; }
.rsvp-submit { border-color:#3d3323;color:#fff8dd;background:#5b923e;box-shadow:3px 3px 0 #3d3323; }
.rsvp-status { color:#477c37; }
.back-button { border-color:#62452b;color:#493c2b;background:#f5e8bd; }
.screen-bottom { color:#d9d3bd; }

@media (orientation:landscape) and (max-height:520px) {
  .fighter-portrait { height:clamp(26px,7vh,40px); }
}

/* Birthday reveal: a blocky chest that opens on first reveal and on every rematch tap. */
.message {
  display:grid;
  justify-items:center;
  align-content:center;
  gap:clamp(3px,.8vh,8px);
  padding:clamp(6px,1.2vh,14px);
  border:4px solid #5b923e;
  background:#f5e8bd;
  box-shadow:inset 0 0 0 3px #d7c48e,4px 4px 0 #62452b;
}
.birthday-chest { width:min(100%,150px);height:clamp(76px,18vh,112px);position:relative;display:grid;place-items:end center;perspective:360px; }
.birthday-chest::after { content:'';position:absolute;z-index:0;inset:20% 12% 0;border-radius:50%;background:#a9df6455;filter:blur(10px);opacity:0;transition:opacity .25s; }
.chest-loot { position:absolute;z-index:1;bottom:36px;left:50%;display:flex;align-items:flex-end;gap:5px;opacity:0;transform:translate(-50%,18px) scale(.7);font-size:clamp(18px,4vh,30px);line-height:1;filter:drop-shadow(2px 3px 0 #543b25); }
.chest-loot span:nth-child(2) { font-size:.75em; }
.chest-loot span:nth-child(3) { font-size:.85em; }
.chest-lid { position:absolute;z-index:3;bottom:37px;width:88px;height:29px;border:4px solid #513923;background:repeating-linear-gradient(90deg,#986137 0 13px,#a96f3d 13px 26px);box-shadow:inset 0 0 0 3px #bd8850,3px 4px 0 #3b2b1f;transform-origin:center bottom;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .3s; }
.chest-lid::before { content:'';position:absolute;left:-4px;right:-4px;bottom:-5px;height:7px;border:2px solid #513923;background:#e4bf5c; }
.chest-base { position:absolute;z-index:2;bottom:0;width:84px;height:42px;border:4px solid #513923;background:repeating-linear-gradient(90deg,#86572f 0 13px,#a36a39 13px 26px);box-shadow:inset 0 0 0 3px #bd8850,4px 5px 0 #3b2b1f; }
.chest-base::before { content:'';position:absolute;left:0;right:0;top:0;height:8px;border-bottom:3px solid #513923;background:#e4bf5c; }
.chest-lock { position:absolute;z-index:2;left:50%;top:7px;width:13px;height:16px;transform:translateX(-50%);border:3px solid #4d3824;background:#f0d26a;box-shadow:inset 0 0 0 2px #ffe89a; }
.chest-opening .birthday-chest::after { animation:chest-glow .45s ease-out both; }
.chest-opening .chest-lid { animation:chest-lid-open .45s steps(6,end) both; }
.chest-opening .chest-loot { animation:loot-pop .8s cubic-bezier(.2,.8,.2,1) .12s both; }
.message h2 { margin:0;color:#477c37;font-size:clamp(10px,1.7vw,16px);line-height:1.35; }
.message p { margin:0;color:#5b4a32;font-size:clamp(16px,2.2vw,24px);line-height:1.05; }
.again-button { min-width:0;padding:7px 9px;border-color:#3d3323;color:#fff8dd;background:#7a5736;box-shadow:4px 4px 0 #3d3323;font-size:clamp(6px,.85vw,8px); }
.again-button:hover { color:#fff8dd;background:#956943; }
.again-button:disabled { transform:translate(2px,2px);box-shadow:2px 2px 0 #3d3323;cursor:wait; }
.message.replaying { animation:chest-replay-burst .85s steps(6,end) both; }
@keyframes loot-pop { 0% { opacity:0;transform:translate(-50%,18px) scale(.65); } 55% { opacity:1;transform:translate(-50%,-18px) scale(1.12); } 100% { opacity:1;transform:translate(-50%,-10px) scale(1); } }
@keyframes chest-glow { from { opacity:0;transform:scale(.8); } to { opacity:1;transform:scale(1); } }
@keyframes chest-lid-open { 0% { transform:none;filter:brightness(1); } 55% { transform:rotateX(-22deg) translateY(-2px);filter:brightness(1.15); } 100% { transform:rotateX(-62deg) translateY(-7px);filter:brightness(1.2); } }
@keyframes chest-replay-burst { 0% { transform:scale(.97);background:#f5e8bd;box-shadow:0 0 0 0 #a9df6400; } 45% { transform:scale(1.015);background:#e3f2c6;box-shadow:0 0 0 7px #a9df6455; } 100% { transform:scale(1);background:#f5e8bd;box-shadow:inset 0 0 0 3px #d7c48e,4px 4px 0 #62452b; } }
@media (orientation:landscape) and (max-height:520px) {
  .message { gap:3px;padding:4px 7px; }
  .birthday-chest { width:110px;height:clamp(52px,10vh,66px); }
  .chest-base { width:68px;height:31px; }
  .chest-lid { width:72px;height:21px;bottom:27px; }
  .chest-loot { bottom:26px;gap:2px;font-size:20px; }
  .chest-lock { top:4px;width:11px;height:13px; }
  .message h2 { font-size:clamp(8px,1.7vw,12px); }
  .message p { font-size:clamp(13px,2vh,17px); }
  .again-button { padding:5px 6px;font-size:5px; }
}

/* Keep the Switch shell fixed; rearrange only the content shown on its screen. */
.birthday-hero,.birthday-copy,.birthday-actions { display:contents; }
.minecraft-illustration { display:none; }
.open-rsvp {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:8px 14px;
  border:3px solid #3d3323;
  color:#fff8dd;
  background:#a96c2c;
  box-shadow:4px 4px 0 #3d3323;
  font:clamp(7px,.9vw,10px)/1.4 'Press Start 2P',monospace;
  text-decoration:none;
  white-space:nowrap;
}
.open-rsvp:hover { color:#fff8dd;background:#bd803e; }
.open-rsvp:active { transform:translate(3px,3px);box-shadow:1px 1px 0 #3d3323; }
.open-rsvp:focus-visible { outline:3px dashed #477c37;outline-offset:3px; }
.rsvp-button-icon { width:1.6em;height:1.6em;display:grid;place-items:center;border:2px solid #563b24;color:#483621;background:#f1d66e;font:700 1.1em Arial,sans-serif; }
@media (orientation:landscape) and (max-height:520px) {
  .card { padding:6px 12px 4px; }
  #birthday-panel:not(.celebrating) {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"hero copy" "actions actions";
    align-content:stretch;
    align-items:center;
    justify-items:stretch;
    gap:5px 16px;
    padding:5px 12px;
  }
  #birthday-panel:not(.celebrating) .birthday-hero {
    grid-area:hero;
    min-width:0;
    min-height:0;
    height:100%;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    justify-items:center;
    align-items:center;
    gap:5px;
  }
  #birthday-panel:not(.celebrating) .badge { margin:0;padding:4px 7px;font-size:clamp(6px,.75vw,8px); }
  #birthday-panel:not(.celebrating) .minecraft-illustration {
    width:min(100%,300px);
    height:clamp(94px,25vh,164px);
    display:block;
    position:relative;
    align-self:center;
    overflow:hidden;
    border:3px solid #62452b;
    background:linear-gradient(#76cfff 0 68%,#76c94f 68% 73%,#8e5b35 73%);
    box-shadow:inset 0 0 0 3px #f2d890,4px 4px 0 #477c37;
    image-rendering:pixelated;
  }
  .illustration-sun { position:absolute;top:12%;right:12%;width:18px;height:18px;background:#ffe36b;box-shadow:3px 3px 0 #d4aa44; }
  .illustration-cloud { position:absolute;top:23%;left:15%;width:40px;height:9px;background:#f8ffff;box-shadow:8px -6px 0 -2px #f8ffff,20px 0 #f8ffff; }
  .illustration-hill { position:absolute;left:-4%;bottom:27%;width:58%;height:31%;background:#68b949;clip-path:polygon(0 100%,0 45%,22% 45%,22% 21%,48% 21%,48% 0,75% 0,75% 28%,100% 28%,100% 100%); }
  .illustration-ground { position:absolute;left:0;right:0;bottom:0;height:30%;background:repeating-linear-gradient(90deg,#80512f 0 16px,#99613a 16px 32px),repeating-linear-gradient(0deg,transparent 0 15px,#633e29 15px 18px); }
  .illustration-ground::before { content:'';position:absolute;left:0;right:0;top:-7px;height:9px;background:repeating-linear-gradient(90deg,#4c9f37 0 16px,#69bd48 16px 32px);border-bottom:2px solid #397c34; }
  .illustration-tree { position:absolute;left:17%;bottom:25%;width:9px;height:35px;background:#76502e; }
  .illustration-tree::before { content:'';position:absolute;left:50%;top:-22px;width:29px;height:25px;transform:translateX(-50%);background:#438d37;box-shadow:0 -5px 0 -2px #5ba747,0 7px 0 #397b34; }
  .illustration-player { position:absolute;z-index:2;left:50%;bottom:21%;width:27px;height:51px;transform:translateX(-50%);filter:drop-shadow(3px 3px 0 #31402c); }
  .illustration-player i { position:absolute;top:0;left:4px;width:19px;height:19px;background:#c79364;box-shadow:0 -4px 0 #493428; }
  .illustration-player i::before { content:'';position:absolute;left:4px;top:9px;width:3px;height:3px;background:#38291e;box-shadow:8px 0 #38291e; }
  .illustration-player b { position:absolute;top:19px;left:1px;width:25px;height:17px;background:#318084; }
  .illustration-player em { position:absolute;left:4px;bottom:0;width:8px;height:16px;background:#334f9e;box-shadow:10px 0 #334f9e; }
  .illustration-gem { position:absolute;z-index:2;right:13%;bottom:22%;color:#57efff;font:clamp(20px,4vh,34px)/1 Arial,sans-serif;text-shadow:3px 3px 0 #287fa4,0 0 9px #b3ffff; }
  #birthday-panel:not(.celebrating) .birthday-copy {
    grid-area:copy;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(5px,1.4vh,12px);
    text-align:center;
  }
  #birthday-panel:not(.celebrating) .birthday-copy h1 { margin:0;font-size:clamp(21px,3.8vw,39px);line-height:1.16;letter-spacing:-1px; }
  #birthday-panel:not(.celebrating) .birthday-copy .name { margin:0;font-size:clamp(18px,2.7vw,28px); }
  #birthday-panel:not(.celebrating) .birthday-copy .intro { display:block;margin:0;color:#477c37;font-size:clamp(14px,1.8vw,21px);line-height:1.1; }
  #birthday-panel:not(.celebrating) .birthday-actions {
    grid-area:actions;
    width:min(100%,760px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:clamp(8px,1.5vw,18px);
    margin:0 auto;
  }
  #birthday-panel:not(.celebrating) .birthday-actions .primary-button,
  #birthday-panel:not(.celebrating) .birthday-actions .open-rsvp {
    width:100%;
    min-width:0;
    min-height:42px;
    margin:0;
    padding:7px 8px;
    font-size:clamp(7px,.95vw,10px);
    line-height:1.3;
    white-space:normal;
  }
  #birthday-panel.celebrating {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"message message" "actions actions";
    align-items:center;
    justify-content:stretch;
    gap:4px;
    padding:3px 8px;
  }
  #birthday-panel.celebrating .birthday-hero,#birthday-panel.celebrating .birthday-copy { display:none!important; }
  #birthday-panel.celebrating .message { grid-area:message;padding:4px 8px;border-width:3px; }
  #birthday-panel.celebrating .birthday-actions {
    grid-area:actions;
    width:min(100%,640px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:clamp(8px,1.5vw,16px);
    margin:0 auto;
  }
  #birthday-panel.celebrating .birthday-actions .again-button,
  #birthday-panel.celebrating .birthday-actions .open-rsvp {
    width:100%;
    min-width:0;
    min-height:38px;
    margin:0;
    padding:5px 7px;
    font-size:clamp(6px,.8vw,9px);
    line-height:1.25;
    white-space:normal;
  }
}

/* Let the RSVP form use the phone's visible area while the software keyboard is open. */
body.rsvp-open { overflow:hidden; }
#rsvp-panel.rsvp-overlay {
  position:fixed!important;
  z-index:20;
  top:var(--visual-viewport-top,0px);
  left:0;
  right:0;
  width:100vw;
  height:var(--visual-viewport-height,100dvh);
  max-height:var(--visual-viewport-height,100dvh);
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:rgba(32,55,37,.98);
}
#rsvp-panel.rsvp-overlay .back-button { align-self:flex-start;flex:none; }
#rsvp-panel.rsvp-overlay .rsvp {
  width:min(100%,560px);
  max-height:calc(var(--visual-viewport-height,100dvh) - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  flex:none;
  margin:0 auto;
  padding:10px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#f0dda7;
}
#rsvp-panel.rsvp-overlay .rsvp-caption { margin:3px 0 8px; }
#rsvp-panel.rsvp-overlay .field-label { scroll-margin:12px; }
#rsvp-panel.rsvp-overlay input,#rsvp-panel.rsvp-overlay select { scroll-margin:14px; }
@media (orientation:landscape) and (max-height:520px) {
  #rsvp-panel.rsvp-overlay { gap:5px;padding:calc(5px + env(safe-area-inset-top)) 12px calc(5px + env(safe-area-inset-bottom)); }
  #rsvp-panel.rsvp-overlay .rsvp { padding:7px; }
  #rsvp-panel.rsvp-overlay .rsvp-caption { margin:0 0 3px; }
  #rsvp-panel.rsvp-overlay .field-label { margin:0;font-size:7px; }
  #rsvp-panel.rsvp-overlay input[type="text"],#rsvp-panel.rsvp-overlay select { min-height:30px;padding:3px 6px;font-size:18px; }
  #rsvp-panel.rsvp-overlay .rsvp-actions { margin-top:3px; }
  #rsvp-panel.rsvp-overlay .rsvp-submit { margin-top:4px;padding:7px; }
  #rsvp-panel.rsvp-overlay .rsvp-status { min-height:12px;margin:3px 0 0; }
}
@media (orientation:landscape) and (max-height:520px) {
  #rsvp-panel {
    grid-template-rows:auto minmax(0,1fr);
    align-content:start;
    gap:3px;
    padding:2px 7px 4px;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  #rsvp-panel .back-button { align-self:start;padding:4px 7px;font-size:6px; }
  #rsvp-panel .rsvp {
    min-height:0;
    max-height:100%;
    align-content:start;
    gap:2px 6px;
    margin:0;
    padding:5px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #rsvp-panel .rsvp-heading { gap:5px; }
  #rsvp-panel .rsvp-heading>span { font-size:17px; }
  #rsvp-panel .rsvp-heading h2 { font-size:8px; }
  #rsvp-panel .rsvp-caption { display:none; }
  #rsvp-panel #rsvp-form { grid-template-columns:minmax(64px,.38fr) minmax(0,1fr);align-items:center;gap:2px 6px; }
  #rsvp-panel .field-label { margin:0;font-size:6px; }
  #rsvp-panel input[type="text"],#rsvp-panel select { min-height:25px;padding:2px 5px;font-size:17px; }
  #rsvp-panel .rsvp-actions { gap:4px;margin:2px 0 0; }
  #rsvp-panel .choice span { min-height:24px;padding:2px;font-size:5px; }
  #rsvp-panel .rsvp-submit {
    position:sticky;
    bottom:0;
    z-index:3;
    min-height:30px;
    margin:2px 0 0;
    padding:5px;
    border-width:2px;
    background:#548b3e;
    box-shadow:0 -3px 0 #f0dda7,3px 3px 0 #3d3323;
    font-size:7px;
  }
  #rsvp-panel .rsvp-status { min-height:0;margin:0;font-size:13px;line-height:1.1; }
}

/* Short animated Minecraft world intro between power-on and avatar selection. */
.screen > #minecraft-intro { z-index:2; }
.minecraft-intro {
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  align-content:center;
  justify-items:center;
  gap:clamp(4px,1vh,10px);
  position:relative;
  overflow:hidden;
  padding:clamp(8px,2vh,18px) 16px;
  color:#fff8df;
  background:linear-gradient(180deg,#254e39c9,#163426eF);
  text-align:center;
}
.minecraft-intro-kicker { z-index:1;margin:0;color:#f4d86d;font:clamp(6px,1vw,9px)/1.4 'Press Start 2P',monospace;letter-spacing:.5px;animation:intro-text-in .35s steps(4,end) both; }
.minecraft-intro-stage {
  width:min(100%,680px);
  height:clamp(100px,28vh,190px);
  min-height:0;
  position:relative;
  align-self:center;
  overflow:hidden;
  border:3px solid #493923;
  background:linear-gradient(#78d0ff 0 70%,#68b94a 70% 75%,#875631 75%);
  box-shadow:inset 0 0 0 3px #ffe687,5px 5px 0 #273923;
  image-rendering:pixelated;
  animation:intro-world-light .7s steps(5,end) both;
}
.minecraft-intro-stage::before { content:'';position:absolute;left:0;right:0;bottom:0;height:26%;background:repeating-linear-gradient(90deg,#80512f 0 19px,#99613a 19px 38px),repeating-linear-gradient(0deg,transparent 0 14px,#68432b 14px 17px); }
.minecraft-intro-stage::after { content:'';position:absolute;z-index:1;left:0;right:0;bottom:24%;height:9px;background:repeating-linear-gradient(90deg,#4c9f37 0 20px,#69bd48 20px 40px);border-bottom:2px solid #397c34; }
.intro-sun { position:absolute;top:13%;right:12%;width:clamp(18px,3vw,34px);aspect-ratio:1;background:#ffe36b;box-shadow:4px 4px 0 #d4aa44,0 0 14px #ffe36b88;animation:intro-sunrise .75s steps(4,end) both; }
.intro-cloud { position:absolute;width:clamp(40px,7vw,74px);height:11px;background:#f8ffff;box-shadow:0 -7px 0 -2px #f8ffff,13px -3px 0 -1px #f8ffff,27px 2px 0 #f8ffff; }
.intro-cloud-one { top:24%;left:13%;animation:intro-cloud-in .7s ease-out .25s both,intro-cloud-drift 4s ease-in-out 1s infinite alternate; }
.intro-cloud-two { top:36%;right:28%;transform:scale(.65);opacity:.9;animation:intro-cloud-in .7s ease-out .45s both,intro-cloud-drift 5s ease-in-out 1.1s infinite alternate-reverse; }
.intro-hill { position:absolute;z-index:0;bottom:25%;width:37%;height:34%;background:#63ad45;clip-path:polygon(0 100%,0 43%,18% 43%,18% 24%,43% 24%,43% 0,72% 0,72% 25%,100% 25%,100% 100%); }
.intro-hill-one { left:-4%;animation:intro-hill-in .6s steps(4,end) .35s both; }
.intro-hill-two { right:-5%;width:43%;height:42%;background:#4c963e;transform:scaleX(-1);animation:intro-hill-in .6s steps(4,end) .5s both; }
.intro-tree { position:absolute;z-index:2;left:22%;bottom:24%;width:11px;height:45px;background:#75502e;box-shadow:inset 3px 0 #93643a;transform:scaleY(0);transform-origin:bottom;animation:intro-grow .5s steps(5,end) 1s forwards; }
.intro-tree::before { content:'';position:absolute;left:50%;top:-22px;width:35px;height:28px;transform:translateX(-50%);background:#438d37;box-shadow:0 -7px 0 -2px #59a747,0 7px 0 #397b34,-8px 7px 0 #4a9838,8px 7px 0 #367b32; }
.intro-house { position:absolute;z-index:2;right:22%;bottom:25%;width:clamp(38px,7vw,66px);height:clamp(35px,8vh,56px);border:3px solid #553a27;background:repeating-linear-gradient(90deg,#a26a3d 0 10px,#bb7b45 10px 20px);opacity:0;transform:translateY(20px) scale(.8);animation:intro-house-build .55s steps(5,end) 1.05s forwards; }
.intro-house::before { content:'';position:absolute;left:-8px;right:-8px;top:-13px;height:18px;background:#765035;clip-path:polygon(0 100%,18% 100%,18% 70%,34% 70%,34% 38%,50% 38%,50% 0,66% 38%,66% 70%,82% 70%,82% 100%,100% 100%,100% 100%); }
.intro-house i { position:absolute;left:50%;bottom:0;width:13px;height:22px;transform:translateX(-50%);background:#5d3b29;border:2px solid #4a3325; }
.intro-house b { position:absolute;left:8px;top:7px;width:9px;height:9px;background:#a6eaff;box-shadow:16px 0 #a6eaff;border:2px solid #715031; }
.intro-block { position:absolute;z-index:3;bottom:3px;width:clamp(20px,4vw,36px);aspect-ratio:1;border:2px solid #63462b;background:linear-gradient(#64b947 0 24%,#8e5b35 24% 100%);box-shadow:inset 3px 3px #ffffff1b;opacity:0;transform:translateY(-75px) scale(.6);animation:intro-block-place .42s steps(4,end) both; }
.intro-block-1 { left:6%;animation-delay:.2s; }.intro-block-2 { left:14%;animation-delay:.35s; }.intro-block-3 { left:22%;animation-delay:.5s; }
.intro-block-4 { left:30%;animation-delay:.65s; }.intro-block-5 { right:30%;animation-delay:.8s; }.intro-block-6 { right:22%;animation-delay:.95s; }
.intro-block-7 { right:14%;animation-delay:1.1s; }.intro-block-8 { right:6%;animation-delay:1.25s; }
.intro-player { position:absolute;z-index:4;left:50%;bottom:7%;width:clamp(20px,3.5vw,30px);height:clamp(48px,12vh,68px);transform:translateX(-50%);filter:drop-shadow(3px 3px 0 #30412c);animation:intro-player-enter .55s steps(5,end) 1.35s both; }
.intro-player i { position:absolute;left:16%;top:0;width:68%;height:34%;background:#c79364;box-shadow:0 -4px 0 #493428; }
.intro-player i::before { content:'';position:absolute;left:4px;top:9px;width:3px;height:3px;background:#38291e;box-shadow:8px 0 #38291e; }
.intro-player b { position:absolute;left:5%;top:32%;width:90%;height:31%;background:#318084; }
.intro-player em { position:absolute;left:15%;bottom:0;width:28%;height:38%;background:#334f9e;box-shadow:9px 0 #334f9e; }
.intro-spark { position:absolute;z-index:5;color:#fff0a1;font:clamp(12px,2vw,20px) 'Press Start 2P',monospace;text-shadow:0 0 8px #fff0a1;opacity:0;animation:intro-sparkle .65s steps(4,end) 1.65s both; }
.intro-spark-one { left:39%;top:36%; }.intro-spark-two { right:16%;top:28%;animation-delay:1.9s; }
.minecraft-intro h2 { z-index:1;margin:0;color:#fff8df;font:clamp(14px,2.6vw,25px)/1.25 'Press Start 2P',monospace;text-shadow:3px 3px 0 #477c37;opacity:0;animation:intro-title-pop .45s steps(5,end) 1.6s both; }
.minecraft-intro h2 span { color:#f4d86d;font-size:.62em;white-space:nowrap; }
.minecraft-intro .power-button { min-width:clamp(130px,24vw,220px);padding:8px 12px;font-size:clamp(7px,1vw,10px);animation:intro-button-in .35s steps(4,end) 2s both,power-pulse 1.8s steps(2,end) 2.35s infinite; }
.minecraft-intro .power-button:disabled { animation:intro-button-in .35s steps(4,end) 2s both;opacity:.7; }
@keyframes intro-text-in { from { opacity:0;transform:translateY(-6px); } to { opacity:1;transform:translateY(0); } }
@keyframes intro-world-light { from { filter:brightness(.35) saturate(.5); } to { filter:brightness(1) saturate(1); } }
@keyframes intro-sunrise { from { opacity:0;transform:translateY(12px) scale(.6); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes intro-cloud-in { from { opacity:0;translate:-24px 0; } to { opacity:.9;translate:0 0; } }
@keyframes intro-cloud-drift { to { margin-left:10px; } }
@keyframes intro-hill-in { from { clip-path:polygon(0 100%,0 100%,18% 100%,18% 100%,43% 100%,43% 100%,72% 100%,72% 100%,100% 100%,100% 100%); } to { clip-path:polygon(0 100%,0 43%,18% 43%,18% 24%,43% 24%,43% 0,72% 0,72% 25%,100% 25%,100% 100%); } }
@keyframes intro-grow { to { transform:scaleY(1); } }
@keyframes intro-house-build { to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes intro-block-place { 0% { opacity:0;transform:translateY(-75px) scale(.6); } 65% { opacity:1;transform:translateY(5px) scale(1); } 82% { transform:translateY(-3px) scale(1); } 100% { opacity:1;transform:translateY(0) scale(1); } }
@keyframes intro-player-enter { from { opacity:0;transform:translate(-50%,18px); } to { opacity:1;transform:translate(-50%,0); } }
@keyframes intro-sparkle { 0% { opacity:0;transform:scale(.2) rotate(-30deg); } 55% { opacity:1;transform:scale(1.35) rotate(12deg); } 100% { opacity:.75;transform:scale(1) rotate(0); } }
@keyframes intro-title-pop { 0% { opacity:0;transform:scale(.7) translateY(8px); } 70% { opacity:1;transform:scale(1.06) translateY(-2px); } 100% { opacity:1;transform:scale(1) translateY(0); } }
@keyframes intro-button-in { from { opacity:0;transform:translateY(6px); } to { opacity:1;transform:translateY(0); } }
@media (orientation:landscape) and (max-height:520px) {
  .minecraft-intro { grid-template-rows:auto minmax(0,1fr) auto auto;gap:2px;padding:4px 14px; }
  .minecraft-intro-kicker { font-size:6px; }
  .minecraft-intro-stage { width:min(100%,560px);height:clamp(68px,22vh,108px); }
  .intro-house { height:clamp(30px,8vh,40px); }
  .intro-player { height:clamp(38px,10vh,50px); }
  .minecraft-intro h2 { font-size:clamp(12px,2vw,17px); }
  .minecraft-intro .power-button { min-height:24px;padding:4px 10px;font-size:6px; }
}

/* Portrait phones use the full handheld view; the game screen reflows inside it. */
@media (max-width:700px) and (orientation:portrait) {
  .scene {
    min-height:100vh;
    min-height:100svh;
    padding:10px 8px calc(10px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
  }
  .console {
    display:grid;
    width:min(100%,540px);
    height:min(820px,calc(100vh - 20px));
    height:min(820px,calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    min-height:0;
    grid-template-columns:clamp(42px,13vw,58px) minmax(0,1fr) clamp(42px,13vw,58px);
    grid-template-rows:minmax(0,1fr);
    gap:5px;
    padding:7px;
    border-radius:34px;
  }
  .joy { min-height:0;border-width:3px; }
  .joy-left { border-radius:29px 9px 9px 29px; }
  .joy-right { border-radius:9px 29px 29px 9px; }
  .stick { width:clamp(25px,8vw,32px);height:clamp(25px,8vw,32px);border-width:4px; }
  .dpad { width:13px;height:13px; }
  .dpad-up { top:calc(59% - 12px); }
  .dpad-down { top:calc(59% + 1px); }
  .dpad-left { left:calc(50% - 12px); }
  .dpad-right { left:calc(50% + 1px); }
  .action { --action-diameter:17px;--action-offset:27px;font-size:9px; }
  .joy-minus,.joy-plus { font-size:15px; }
  .screen-shell { min-height:0;padding:5px 4px 4px;border-radius:12px;gap:4px; }
  .screen { min-height:0; }
  .screen-bottom { min-height:14px;font-size:6px;letter-spacing:0; }
  .card { padding:9px 8px 7px;box-shadow:4px 4px 0 #477c37,7px 7px 0 #263b26; }
  .rotate-prompt { display:none!important; }
  .boot-screen { padding:12px 7px; }
  .boot-icon { width:48px;height:48px;margin:4px 0 8px;font-size:27px; }
  .boot-kicker { font-size:clamp(5px,1.7vw,7px); }
  #boot-title { font-size:clamp(31px,10vw,48px); }
  .boot-copy { margin:8px 0 10px;font-size:7px;line-height:1.7; }
  .boot-hint { max-width:100%;font-size:5px;line-height:1.6; }
  .minecraft-intro { grid-template-rows:auto minmax(0,1fr) auto auto;padding:10px 8px;gap:7px; }
  .minecraft-intro-kicker { font-size:6px; }
  .minecraft-intro-stage { width:100%;height:clamp(110px,24vh,190px); }
  .minecraft-intro h2 { font-size:clamp(12px,3vw,18px); }
  .minecraft-intro .power-button { min-width:0;max-width:100%;padding:8px;font-size:7px; }
  .story-screen { overflow-y:auto;align-content:center;justify-items:center;padding:10px 7px;gap:clamp(5px,1vh,9px); }
  .story-screen .story-title { font-size:clamp(12px,3.3vw,17px); }
  .story-screen .story-copy { font-size:16px; }
  .fighter-select { grid-template-columns:repeat(4,minmax(0,1fr));gap:3px; }
  .fighter-choice { min-height:56px;padding:2px;font-size:5px; }
  .fighter-portrait { height:clamp(31px,6vh,46px); }
  .selected-fighter { font-size:15px; }
  .story-screen .power-button { min-width:0;max-width:100%;padding:7px;font-size:6px; }
  #birthday-panel:not(.celebrating) { gap:4px;padding:4px 3px; }
  #birthday-panel:not(.celebrating) .minecraft-illustration { display:none!important; }
  #birthday-panel:not(.celebrating) .badge { margin:0;padding:4px 6px;font-size:6px; }
  #birthday-panel:not(.celebrating) .hero-icon { width:40px;height:40px;margin:0 auto 2px;font-size:24px; }
  #birthday-panel:not(.celebrating) .eyebrow { margin:0;font-size:6px; }
  #birthday-panel:not(.celebrating) h1 { margin:0;font-size:clamp(16px,5.2vw,23px);line-height:1.15; }
  #birthday-panel:not(.celebrating) .name { margin:0;font-size:19px; }
  #birthday-panel:not(.celebrating) .intro { margin:0;font-size:16px; }
  #birthday-panel:not(.celebrating) .birthday-actions { width:100%;display:grid;grid-template-columns:1fr;gap:7px;margin:3px 0 0; }
  #birthday-panel:not(.celebrating) .birthday-actions .primary-button,
  #birthday-panel:not(.celebrating) .birthday-actions .open-rsvp { width:100%;min-height:40px;margin:0;padding:8px 6px;font-size:7px;white-space:normal; }
  #birthday-panel.celebrating { display:flex;flex-direction:column;justify-content:center;gap:7px;padding:6px 3px;overflow-y:auto; }
  #birthday-panel.celebrating .message { width:100%;max-height:none;padding:8px;border-width:3px; }
  #birthday-panel.celebrating .birthday-actions { width:100%;display:grid;grid-template-columns:1fr;gap:7px;margin:0; }
  #birthday-panel.celebrating .birthday-actions .again-button,
  #birthday-panel.celebrating .birthday-actions .open-rsvp { width:100%;min-height:38px;margin:0;padding:7px 5px;font-size:6px;white-space:normal; }
  #rsvp-panel:not(.rsvp-overlay) { overflow-y:auto;justify-content:flex-start;padding:8px 5px; }
  #rsvp-panel:not(.rsvp-overlay) .rsvp { width:100%;padding:8px; }
  #rsvp-panel:not(.rsvp-overlay) .rsvp-heading h2 { font-size:9px; }
  #rsvp-panel:not(.rsvp-overlay) .field-label { margin:5px 0 2px;font-size:6px; }
  #rsvp-panel:not(.rsvp-overlay) input[type="text"],
  #rsvp-panel:not(.rsvp-overlay) select { min-height:36px;font-size:18px; }
}
@media (max-width:380px) and (orientation:portrait) {
  .console { grid-template-columns:40px minmax(0,1fr) 40px;gap:4px;padding:6px; }
  .screen-shell { padding:4px 3px 3px; }
  .screen-bottom span:first-child { display:none; }
  .screen-bottom { justify-content:center; }
}