/* home3d.css v2 - Karl 2026-10-25 12:58 ("3-D not enough, do more ... very small edges ... lightly").
   Raised-key look for every button on the app home screen: thin outline edge, top light line, darker bottom ledge,
   soft glass shine (::before overlay), layered drop shadow, press-in on tap. Colours, sizes, text, layout unchanged.
   Loaded last from index.html. Rollback = remove the <link> (backup backup\b13-before-20261025). */

/* ---------- coloured buttons (dark background, white text) ---------- */
#s-home .tile, #s-home .h3-life, #s-home .emg, #s-home .h3-trv-b,
#s-home .aimee-banner, #s-home .a5-gm, #s-home .lg-btn.pri, #s-home .h3-mov-b {
  position: relative; isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),          /* very small edge */
    inset 0 2px 0 rgba(255,255,255,.32),      /* top light line */
    inset 0 -4px 0 rgba(0,0,0,.20),           /* bottom ledge (same colour, darker) */
    0 2px 0 rgba(15,30,60,.14),               /* thin outer ledge */
    0 6px 14px rgba(15,30,60,.20) !important; /* soft lift shadow */
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* ---------- light buttons (white / pale background) ---------- */
#s-home .wn-tile, #s-home .a5-tile, #s-home .dy-homebtn, #s-home .lvc-homebtn,
#s-home .lvm-homebtn, #s-home .lg-btn:not(.pri), #s-home .sf-pin,
#hdr-home .chip, .hdr-right button, .nk3 a, .a5-gear, .appver-btn {
  position: relative; isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(23,43,77,.06),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -3px 0 rgba(23,43,77,.09),
    0 2px 0 rgba(15,30,60,.08),
    0 5px 12px rgba(15,30,60,.13) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* ---------- glass shine on the upper half (all home buttons) ---------- */
#s-home .tile::before, #s-home .h3-life::before, #s-home .emg::before, #s-home .h3-trv-b::before,
#s-home .aimee-banner::before, #s-home .a5-gm::before, #s-home .lg-btn::before, #s-home .h3-mov-b::before,
#s-home .wn-tile::before, #s-home .a5-tile::before, #s-home .dy-homebtn::before, #s-home .lvc-homebtn::before,
#s-home .lvm-homebtn::before, #s-home .sf-pin::before, .nk3 a::before, #hdr-home .chip::before, .hdr-right button::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;                      /* behind the text/icons, above the button colour */
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 46%,
    rgba(255,255,255,0) 54%, rgba(0,0,0,.07) 100%);
}
/* light buttons: gentler shine so the pastel colours stay clean */
#s-home .wn-tile::before, #s-home .a5-tile::before, #s-home .dy-homebtn::before, #s-home .lvc-homebtn::before,
#s-home .lvm-homebtn::before, #s-home .sf-pin::before, #s-home .lg-btn:not(.pri)::before,
.nk3 a::before, #hdr-home .chip::before, .hdr-right button::before {
  background: linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 55%, rgba(23,43,77,.04) 100%);
}

/* ---------- mouse: tiny lift;  tap: press in ---------- */
@media (hover:hover) {
  #s-home .tile:hover, #s-home .h3-life:hover, #s-home .emg:hover, #s-home .h3-trv-b:hover,
  #s-home .aimee-banner:hover, #s-home .a5-gm:hover, #s-home .wn-tile:hover, #s-home .a5-tile:hover,
  #s-home .dy-homebtn:hover, #s-home .lvc-homebtn:hover, #s-home .lvm-homebtn:hover,
  #s-home .lg-btn:hover, #s-home .sf-pin:hover, #s-home .h3-mov-b:hover { transform: translateY(-1px); filter: brightness(1.04); }
}
#s-home .tile:active, #s-home .h3-life:active, #s-home .emg:active, #s-home .h3-trv-b:active,
#s-home .aimee-banner:active, #s-home .a5-gm:active, #s-home .wn-tile:active, #s-home .a5-tile:active,
#s-home .dy-homebtn:active, #s-home .lvc-homebtn:active, #s-home .lvm-homebtn:active,
#s-home .lg-btn:active, #s-home .sf-pin:active, #s-home .h3-mov-b:active,
#hdr-home .chip:active, .hdr-right button:active, .nk3 a:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), inset 0 3px 5px rgba(0,0,0,.18), 0 1px 2px rgba(15,30,60,.12) !important;
}
@media (prefers-reduced-motion: reduce) {
  #s-home *, #hdr-home *, .nk3 a { transition: none !important; }
}
