/* Visible key boundaries are also their touch hit areas. */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
[hidden] { display:none !important; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
.navigation-console { padding:9px 32px;background:#030e29a8; }
.menu-side .navigation-console { background:transparent;padding:18px 0 0 29px; }
.game-controls { display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
.game-key { display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:30px;height:30px;border:1px solid #8decff;border-bottom:3px solid #063591;border-right:2px solid #064595;border-radius:4px;padding:3px 6px;background:linear-gradient(145deg,#1376d6,#0750b0);color:#f2fdff;font:700 13px Barlow,sans-serif;cursor:pointer;box-shadow:1px 2px 0 #00102f;transition:background .15s,transform .15s; }
.game-key svg { width:17px;height:17px; }
.game-key--open { min-width:60px;background:linear-gradient(145deg,#eaffff,#53d9ef);color:#031c48;border-color:#fff;border-bottom-color:#1484b7;border-right-color:#218bb2; }
.game-key--back { min-width:38px;background:linear-gradient(145deg,#213f67,#071c3d); }
.keycap-label { font:700 13px Barlow,sans-serif;letter-spacing:.3px; }
.game-key:hover,.game-key:focus-visible { background:#e7fcff;color:#03275b; }
.game-key:focus-visible { outline:2px solid #fff;outline-offset:4px; }
.game-key:active { transform:translateY(2px);box-shadow:none; }
.key-action-label { color:#cceafb;font-size:14px;margin-left:-4px;margin-right:6px; }
.chapter-nav a.is-game-selected:not([aria-current]) { background:#075ca9;color:white;box-shadow:inset 0 -3px #62eaff; }
.scene-view .navigation-console { visibility:hidden;pointer-events:none; }

/* An extruded CSS 3D chassis houses a live, accessible HTML app interface. */
#contactWrap .page-body { display:grid;grid-template-columns:minmax(240px,1fr) minmax(300px,440px);align-items:center;gap:40px;width:100%;max-width:1120px;margin-inline:auto;padding:28px 44px 112px; }
.contact-page .contact-intro { margin:0;max-width:460px;background:#03122bd9;padding:26px;border-left:3px solid #4ae6ff; }
.contact-page .contact-intro-title { font-size:clamp(30px,4vw,52px);letter-spacing:1px;border:0;padding:0;line-height:1.05;color:#ebfcff;text-shadow:4px 4px #0652a8; }
.contact-page .contact-intro-text { padding:0;margin-top:18px;font-size:18px; }
.phone-stage { min-width:0;perspective:1200px;display:flex;flex-direction:column;align-items:center;padding:16px 10px; }
.contact-phone { width:min(100%,330px);position:relative;transform-style:preserve-3d;transform:rotateY(-9deg);animation:phoneIdle 7s ease-in-out infinite; }
@keyframes phoneIdle { 0%,100% { transform:translateY(3px) rotateY(-9deg) rotateZ(-1deg); } 50% { transform:translateY(-5px) rotateY(-6deg) rotateZ(0deg); } }
.contact-phone:focus-within,.contact-phone:hover { animation-play-state:paused; }
.phone-depth { position:absolute;inset:-4px;border-radius:46px;background:linear-gradient(110deg,#172839,#47607a 35%,#091423 60%,#9daabb);transform:translateZ(-17px);box-shadow:20px 28px 50px #000a;pointer-events:none; }
.phone-edge { position:absolute;top:36px;bottom:36px;width:18px;background:linear-gradient(90deg,#182a3e,#b3cedd 30%,#3a5269 60%,#101d2c);pointer-events:none; }
.phone-edge--left { left:-9px;transform:translateZ(-8px) rotateY(90deg); }
.phone-edge--right { right:-9px;transform:translateZ(-8px) rotateY(90deg); }
.phone-face { position:relative;border:2px solid #b0c8db;border-radius:43px;padding:9px;background:linear-gradient(115deg,#91a5b7,#192737 28%,#07111c 65%,#67859c);box-shadow:inset 0 0 0 2px #14212e; }
.phone-screen { position:relative;min-height:552px;border-radius:32px;overflow:hidden;padding:16px 19px 25px;background:linear-gradient(156deg,#3cf0f4 0%,#126cee 25%,#0733ad 48%,#020c2e 85%);border:2px solid #030a16;color:white; }
.phone-screen::before { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(133deg,transparent 31%,#57f7ff33 31% 32%,transparent 32% 49%,#05246666 49% 67%,transparent 67%); }
.phone-screen > * { position:relative; }
.phone-status { display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;height:22px;color:#04225c; }
.phone-island { width:86px;height:23px;background:#030914;border-radius:30px;box-shadow:inset -5px 0 5px #111c30; }
.phone-apps { display:flex;justify-content:center;gap:28px;padding-top:115px; }
.phone-apps button { display:flex;flex-direction:column;align-items:center;gap:9px;width:70px;padding:0;border:0;background:none;color:white;font:600 15px Barlow,sans-serif;cursor:pointer; }
.phone-app-icon { display:grid;place-items:center;width:64px;height:64px;border-radius:16px;border:1px solid #ffffff70;box-shadow:0 5px 12px #04183a55;transition:transform .15s; }
.phone-app-icon--mail { background:#fff; }
.phone-app-icon--linkedin { background:linear-gradient(150deg,#198fe4,#054398);font:900 40px Arial,sans-serif; }
.phone-apps button:hover .phone-app-icon { transform:translateY(-2px); }
.phone-apps button:focus-visible { outline:2px solid white;outline-offset:5px;border-radius:16px; }
.phone-panels { margin-top:22px; }
.contact-phone:not(.phone-ready) .phone-panels { background:#edf3f9;color:#10263f;padding:16px;border-radius:12px; }
.phone-ready .phone-screen[data-app=home] .phone-panels { display:none; }
.phone-panel { padding:0 0 16px; }
.phone-ready .phone-panel { animation:phoneAppOpen .22s ease-out; }
@keyframes phoneAppOpen { from { opacity:0;transform:translateY(8px) scale(.98); } to { opacity:1;transform:none; } }
.phone-screen[data-app=email] { background:#f6f8fc;color:#15223b; }
.phone-screen[data-app=linkedin] { background:#edf3f9;color:#10263f; }
.phone-screen[data-app=email]::before,.phone-screen[data-app=linkedin]::before { display:none; }
.phone-app-header { display:flex;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid #d2dce8; }
.phone-app-back { display:grid;place-items:center;width:44px;height:44px;background:white;border:1px solid #a2b6cc;border-bottom:3px solid #839ab4;border-radius:6px;font:700 14px Barlow,sans-serif;color:#172c4a;cursor:pointer; }
.phone-app-back:hover { background:#dfeefa; }
.phone-app-header h3 { color:#293e59;font-size:23px;font-weight:700;margin:0; }
#emailPanel .phone-app-header h3 { color:#b32722; }
#linkedinPanel .phone-app-header h3 { color:#0967a4; }
.phone-contact-avatar { display:grid;place-items:center;width:62px;height:62px;border-radius:50%;margin:30px 0 18px;background:#cee4fc;color:#153b6d;font-size:22px;font-weight:700; }
#emailPanel .phone-contact-avatar { background:#ffdfd8;color:#942416; }
.phone-contact-name { font-weight:700;font-size:21px;line-height:1.2;margin-bottom:12px; }
.phone-address { font-size:16px;line-height:1.45;overflow-wrap:anywhere;user-select:text;color:inherit; }
.phone-action { display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px;color:white;background:#105caa;font-size:16px;font-weight:700;text-decoration:none;margin-top:24px;border-radius:7px; }
.phone-action:hover { background:#073971; }
#emailPanel .phone-action { background:#184faa; }
.phone-copy { display:block;min-height:44px;background:transparent;color:#14518c;border:1px solid #b0c4d8;border-radius:7px;font:600 14px Barlow,sans-serif;padding:8px 12px;cursor:pointer;margin-top:10px; }
.phone-copy:hover { color:#072b56;background:#dceaf8; }
.phone-copy-status { font-size:14px;line-height:1.4;min-height:20px;margin-top:8px;color:#14518c; }
.phone-home-bar { width:95px;height:4px;border-radius:4px;background:#deefff;margin:20px auto 0;pointer-events:none; }
.phone-ready .phone-home-bar { position:absolute;bottom:13px;left:50%;transform:translateX(-50%);margin:0; }
.phone-screen[data-app=email] .phone-home-bar,.phone-screen[data-app=linkedin] .phone-home-bar { background:#293b50; }

/* Keep the supplied layout intact; only reflow the added controls and phone. */
@media(max-width:768px) {
  .navigation-console { padding:8px 16px; }
  .menu-side .navigation-console { padding:18px 0 0 16px; }
  #contactWrap .page-body { display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:20px 16px calc(110px + env(safe-area-inset-bottom)); }
  .contact-page .contact-intro { max-width:none;padding:18px;margin-bottom:6px; }
  .contact-page .contact-intro-title { font-size:30px; }
  .contact-page .contact-intro-text { font-size:16px;line-height:1.55;margin-top:12px; }
  .phone-stage { padding:16px 10px 0;perspective:1600px; }
  .phone-screen { padding:14px 16px 24px; }
}
@media(pointer:coarse) {
  .game-key { min-width:36px;height:36px; }
  .game-key--open { min-width:64px; }
  .game-key--back { min-width:40px; }
  .game-controls { gap:9px; }
}
@media(max-width:480px) { .key-action-label { display:none; } }
@media(prefers-reduced-motion:reduce) {
  .contact-phone { animation:none; }
  .phone-ready .phone-panel { animation:none; }
}
html[data-motion=reduced] .contact-phone,html[data-motion=reduced] .phone-panel { animation:none; }