/* ===========================================================
   aafia.mobile — phone shell (y2k / '98 cute)
   only active under body.mobile-mode. desktop unaffected.
   =========================================================== */

body.mobile-mode {
  cursor: auto;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* readme: hide the alternate-platform section */
.readme-mobile { display: none; }
body.mobile-mode .readme-desktop { display: none; }
body.mobile-mode .readme-mobile { display: block; }

/* msn chat: make the page body padding-free so the chat fills the screen */
body.mobile-mode .m-page-body:has(#msn-mount) {
  padding: 0;
  background: #fffefb;
}
body.mobile-mode .m-page-body #msn-mount { height: 100%; display: flex; }
body.mobile-mode .m-page-body .msn-shell { margin: 0; }

/* hide every desktop chrome element */
body.mobile-mode #desktop,
body.mobile-mode #windows,
body.mobile-mode #taskbar,
body.mobile-mode #start-menu,
body.mobile-mode .too-small,
body.mobile-mode #pet,
body.mobile-mode #pet-speech {
  display: none !important;
}

/* wallpaper kept — same gradients as desktop, just visible */
body.mobile-mode #wallpaper { z-index: 0; }

/* ==== shell ==== */
.m-shell {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
  z-index: 50;
  font-family: var(--font-ui);
  color: var(--ink);
}

/* on wider 'mobile' viewports (tablet portrait), letterbox the shell on a soft bg */
@media (min-width: 500px) {
  body.mobile-mode { background: #2a2438; }
  body.mobile-mode #wallpaper { width: 480px; left: 50%; right: auto; transform: translateX(-50%); }
  .m-shell {
    width: 480px;
    left: 50%; right: auto;
    transform: translateX(-50%);
    box-shadow: 0 0 0 2px var(--ink), 0 20px 60px rgba(0,0,0,.35);
  }
}

/* ==== status bar (top) ==== */
.m-status {
  flex: 0 0 32px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: linear-gradient(180deg, #2a2438 0%, #3a3050 100%);
  color: #fffefb;
  font-family: 'Pixelify Sans', monospace;
  font-size: 12px;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  position: relative;
  z-index: 3;
}
.m-status .ms-logo {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700;
  text-shadow: 0 1px 0 #00000055;
}
.m-status .ms-logo .ms-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-pink);
  box-shadow: 0 0 6px var(--accent-pink);
  animation: ms-pulse 2s ease-in-out infinite;
}
@keyframes ms-pulse { 50% { opacity: .4; } }
.m-status .ms-spacer { flex: 1; }
.m-status .ms-clock { font-weight: 700; }
.m-status .ms-battery {
  display: inline-flex; align-items: center; gap: 3px;
}
.m-status .ms-bars {
  display: inline-flex; align-items: end; gap: 2px;
  height: 12px;
}
.m-status .ms-bars span {
  width: 3px; background: #fffefb; border-radius: 1px;
}
.m-status .ms-bars span:nth-child(1) { height: 4px; }
.m-status .ms-bars span:nth-child(2) { height: 7px; }
.m-status .ms-bars span:nth-child(3) { height: 10px; }
.m-status .ms-bars span:nth-child(4) { height: 12px; opacity: .3; }

/* ==== now-playing ribbon ==== */
.m-np {
  flex: 0 0 26px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: var(--accent-mint);
  border-bottom: 1.5px solid var(--ink);
  font-size: 11px;
  font-family: var(--font-ui);
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.m-np .m-np-icon { font-size: 14px; }
.m-np .m-np-title {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
}
.m-np .m-np-next {
  font-size: 10px; opacity: .7;
  padding: 2px 6px; border: 1px solid var(--ink); border-radius: 3px;
  background: var(--paper);
  cursor: pointer;
}

/* ==== main content area ==== */
.m-main {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ==== home screen (icon grid) ==== */
.m-home {
  position: absolute; inset: 0;
  padding: 22px 18px 90px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.m-home-greet {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 4px;
  text-shadow: 2px 2px 0 #fffefb88;
}
.m-home-greet .h-wave { display: inline-block; animation: wave 2.5s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.m-home-sub {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: #5a4a6a;
  margin: 0 0 16px;
}

.m-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 12px;
  padding: 8px;
  background: rgba(255,254,251,.55);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink), inset 0 0 0 2px rgba(255,255,255,.6);
  position: relative;
}
.m-icon-grid::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px dashed #2a243866;
  border-radius: 10px;
  pointer-events: none;
}
.m-app {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .12s ease;
  position: relative;
}
.m-app:active { transform: scale(.9); }
.m-app .m-app-glyph {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--ink);
  position: relative;
  overflow: hidden;
}
.m-app .m-app-glyph svg { width: 38px; height: 38px; }
.m-app .m-app-glyph::after {
  content: ''; position: absolute; top: 4px; left: 6px; right: 30%; height: 6px;
  background: linear-gradient(180deg, #ffffff90, #ffffff00);
  border-radius: 4px;
  pointer-events: none;
}
.m-app .m-app-name {
  font-size: 11px;
  font-family: 'Pixelify Sans', monospace;
  text-align: center;
  line-height: 1.1;
  color: var(--ink);
  text-shadow: 0 1px 0 #fffefbaa;
  white-space: nowrap;
}
.m-app .m-app-badge {
  position: absolute; top: 2px; right: 6px;
  font-size: 9px;
  font-family: 'Pixelify Sans', monospace;
  background: var(--accent-coral);
  color: var(--ink);
  padding: 1px 5px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  font-weight: 700;
}

/* ==== page (app view) stack ==== */
.m-page {
  position: absolute; inset: 0;
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,.0,.2,1);
  z-index: 5;
  border-left: 2px solid var(--ink);
  box-shadow: -4px 0 0 rgba(0,0,0,.08);
}
.m-page.show { transform: translateX(0); }
.m-page .m-page-bar {
  flex: 0 0 42px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  background: var(--accent-pink);
  border-bottom: 2px solid var(--ink);
}
.m-page.tint-blue .m-page-bar { background: #c9deea; }
.m-page.tint-pink .m-page-bar { background: var(--accent-pink); }
.m-page.tint-yellow .m-page-bar { background: var(--accent-yellow); }
.m-page.tint-lav .m-page-bar { background: var(--accent-lav); }
.m-page.tint-mint .m-page-bar { background: var(--accent-mint); }
.m-page.tint-coral .m-page-bar { background: var(--accent-coral); }
.m-back {
  border: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 8px;
  padding: 4px 10px 4px 8px;
  font-family: 'Pixelify Sans', monospace;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 2px 2px 0 var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.m-back:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.m-page-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.m-page-icon { width: 22px; height: 22px; display: grid; place-items: center; }
.m-page-icon svg { width: 22px; height: 22px; }
.m-page-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 120px;
  background:
    radial-gradient(circle at 12px 12px, #2a243812 1.2px, transparent 1.6px) 0 0/22px 22px,
    var(--paper);
}

/* contact links always single column on mobile (override desktop 2-col grid) */
.m-page-body .contact-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* hide pet when any page is open */
.m-shell:has(.m-page) .m-pet,
.m-shell:has(.m-page) .m-pet-speech { display: none; }

/* the same h1/.meta/etc as desktop body content */
.m-page-body h1 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 6px;
}
.m-page-body h2 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 16px 0 4px;
}
.m-page-body p { line-height: 1.5; margin: 6px 0; font-size: 14px; }
.m-page-body .meta {
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: #5a4a6a;
  margin: 0 0 12px;
}
.m-page-body a { color: var(--accent-coral); }
.m-page-body ul { padding-left: 18px; line-height: 1.6; }

/* card grids inside pages (projects/photos/writing/things) */
.m-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.m-card {
  border: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
.m-card:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.m-card .m-card-thumb {
  aspect-ratio: 1/1;
  background:
    repeating-linear-gradient(45deg, #00000010 0 6px, transparent 6px 12px),
    var(--accent-lav);
  display: grid; place-items: center;
  font-size: 28px;
  border-bottom: 1.5px solid var(--ink);
  overflow: hidden;
  position: relative;
}
.m-card .m-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.m-card .m-card-body {
  padding: 6px 8px 8px;
}
.m-card .m-card-title {
  font-family: 'Pixelify Sans', monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.m-card .m-card-sub {
  font-size: 10px;
  color: #5a4a6a;
  margin-top: 2px;
}

/* detail page styling: hero + story */
.m-detail-hero {
  width: 100%;
  aspect-ratio: 16/10;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, #00000010 0 8px, transparent 8px 16px),
    var(--accent-lav);
  overflow: hidden;
  margin-bottom: 12px;
  display: grid; place-items: center;
  font-size: 48px;
}
.m-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.m-detail-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 8px 0;
}
.m-detail-tags span {
  font-size: 10px;
  padding: 2px 8px;
  border: 1.5px solid var(--ink);
  background: var(--accent-yellow);
  border-radius: 10px;
  font-family: 'Pixelify Sans', monospace;
}
.m-detail-kv {
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: var(--accent-mint);
  padding: 8px 10px;
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.7;
}
.m-detail-kv b { font-family: 'Pixelify Sans', monospace; margin-right: 4px; }
.m-detail-links {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0;
}
.m-detail-links a {
  font-family: 'Pixelify Sans', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

/* settings/contact/guestbook reuses desktop body innerHTML - keep its styles working */
.m-page-body .contact-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink);
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
}
.m-page-body .contact-link .ic { font-size: 22px; }
.m-page-body #guestbook-list { margin-top: 12px; }
.m-page-body .guestbook-entry {
  border: 1.5px solid var(--ink);
  background: var(--accent-lav);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-family: var(--font-ui);
}
.m-page-body .gb-name {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-family: 'Caveat', cursive;
  color: #5a4a6a;
}
.m-page-body #guestbook-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
.m-page-body #guestbook-form input,
.m-page-body #guestbook-form textarea {
  font-family: var(--font-ui);
  font-size: 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--paper);
  resize: none;
}
.m-page-body #guestbook-form button {
  font-family: 'Pixelify Sans', monospace;
  font-size: 14px;
  font-weight: 700;
  background: var(--accent-pink);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}

/* ==== bottom dock (home button) ==== */
.m-dock {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 72px;
  background: linear-gradient(180deg, #2a243800 0%, #2a243822 100%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 6;
}
.m-home-btn {
  pointer-events: auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent-pink);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink), inset 0 0 0 3px rgba(255,255,255,.4);
  display: grid; place-items: center;
  font-size: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
  position: relative;
}
.m-home-btn::before {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1.5px dashed #2a243866;
  pointer-events: none;
}
.m-home-btn:active { transform: scale(.92) translate(1px,1px); box-shadow: 1.5px 1.5px 0 var(--ink), inset 0 0 0 3px rgba(255,255,255,.4); }

/* ==== mobile pet (smaller, corner) ==== */
.m-pet {
  position: absolute;
  right: 12px;
  bottom: 84px;
  width: 56px; height: 56px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: petbob 2.6s ease-in-out infinite;
  z-index: 4;
}
.m-pet svg { width: 100%; height: 100%; }
.m-pet-speech {
  position: absolute;
  right: 12px;
  bottom: 144px;
  max-width: 220px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 5;
}
.m-pet-speech.show { opacity: 1; }
.m-pet-speech::after {
  content: '';
  position: absolute; right: 22px; bottom: -9px;
  width: 12px; height: 12px;
  background: var(--paper);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

/* ==== boot splash on mobile (smaller logo) ==== */
body.mobile-mode #boot .logo { font-size: 38px; }
body.mobile-mode #boot .tagline { font-size: 13px; }
body.mobile-mode #boot .bar { width: 220px; }

/* ==== orientation: very-tiny screens still get a polite message ==== */
@media (max-width: 280px) {
  body.mobile-mode .m-shell { display: none; }
  body.mobile-mode .too-small { display: flex !important; }
}