:root {
  --desktop: #5b7f86;
  --platinum: #c9c9c9;
  --light: #ffffff;
  --mid: #a5a5a5;
  --dark: #555555;
  --black: #111111;
  --blue: #3158a6;
  --blue-dark: #17346d;
  --selection: #224fa0;
  --window-shadow: 5px 5px 0 rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--black);
  font-family: Geneva, Chicago, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  background-color: var(--desktop);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.04) 75%, transparent 75%);
  background-size: 4px 4px, 8px 8px;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.menu-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  background: #f7f7f7;
  border-bottom: 1px solid #111;
  box-shadow: 0 1px 0 #fff inset;
  white-space: nowrap;
}
.menu-bar button { border: 0; background: transparent; padding: 4px 7px; font-weight: 600; }
.menu-bar button:hover { background: var(--selection); color: white; }
.apple-menu { font-size: 15px; padding-inline: 5px !important; }
.menu-spacer { flex: 1; }
.menu-status { color: #333; overflow: hidden; text-overflow: ellipsis; }
.menu-clock { margin-left: 12px; font-weight: 600; }

.desktop { width: min(1500px, calc(100% - 24px)); margin: 12px auto 18px; position: relative; }
.window {
  background: var(--platinum);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777, var(--window-shadow);
  min-width: 0;
}
.title-bar {
  height: 24px;
  display: grid;
  grid-template-columns: 17px minmax(16px,1fr) auto minmax(16px,1fr) 17px;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-bottom: 1px solid #222;
  background: #d5d5d5;
}
.title-bar h1, .title-bar h2 { margin: 0; font-size: 12px; line-height: 1; white-space: nowrap; font-weight: 700; }
.title-stripes {
  height: 11px;
  background: repeating-linear-gradient(to bottom, #666 0 1px, transparent 1px 3px);
}
.active-title { background: #efefef; }
.close-box, .zoom-box {
  width: 13px; height: 13px; padding: 0; background: #d0d0d0;
  border: 1px solid #111; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777;
}
.zoom-box::after { content: ""; display:block; margin: 2px; height: 4px; border-top: 2px solid #555; border-bottom: 1px solid #777; }
.window-content { padding: 12px; }
.window-toolbar, .status-bar {
  display:flex; align-items:center; gap:8px; min-height:27px; padding:4px 7px;
  border-bottom:1px solid #777; box-shadow: inset 0 1px #fff; background:#d7d7d7; color:#333; font-size:11px;
}
.status-bar { border-top:1px solid #777; border-bottom:0; justify-content:space-between; }
.toolbar-spacer { flex:1; }
.resize-grip { font-size: 16px; color:#666; line-height:1; }

.welcome-window { margin-bottom: 12px; }
.welcome-content { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; background:#e4e4e4; }
.welcome-copy { display:flex; gap:18px; align-items:center; }
.welcome-copy h2 { margin:2px 0 8px; font-family: Georgia, serif; font-size:clamp(24px,4vw,46px); line-height:1; letter-spacing:-1px; }
.welcome-copy p { max-width:760px; line-height:1.45; margin:0; }
.kicker { font-size:10px; letter-spacing:1px; font-weight:bold; color:#333; }
.app-icon { width:100px; height:100px; flex:0 0 auto; position:relative; display:grid; place-items:center; font-size:27px; font-family:Chicago, Geneva, sans-serif; color:#fff; background:linear-gradient(135deg,#252b5d 50%,#5c8cc2 50%); border:2px solid #111; box-shadow:inset 3px 3px 0 rgba(255,255,255,.45), inset -3px -3px 0 rgba(0,0,0,.35), 3px 3px 0 #777; }
.pixel-person { position:absolute; font-size:18px; color:#f0cf53; text-shadow:1px 1px #000; }
.p1 { top:7px; left:10px; }.p2{top:8px;right:12px;color:#e58a9e}.p3{bottom:8px;right:15px;color:#73c37a}
.group-box, fieldset { position:relative; border:1px solid #777; box-shadow:inset 1px 1px #fff; padding:15px 12px 11px; }
.group-label, legend { position:absolute; top:-8px; left:9px; padding:0 5px; background:var(--platinum); font-weight:bold; }
.setup-box { display:grid; grid-template-columns:auto auto; gap:9px; min-width:330px; }
.setup-box label { display:grid; gap:3px; font-size:11px; font-weight:bold; }
select { min-height:25px; background:#fff; border:1px solid #111; box-shadow:inset 1px 1px 0 #777; padding:3px 28px 3px 6px; }

.mac-button, .chip {
  min-height:25px; padding:3px 12px; background:var(--platinum); border:1px solid #111;
  box-shadow:inset 1px 1px 0 #fff, inset -2px -2px 0 #777; border-radius:3px; font-weight:600;
}
.mac-button:active, .chip:active { box-shadow:inset 2px 2px 0 #777; transform:translate(1px,1px); }
.default-button { outline:2px solid #111; outline-offset:2px; margin:3px; }
.mac-button.square { width:42px; padding:3px; }.mac-button.small{min-height:20px;padding:1px 8px;font-size:11px}

.desktop-grid { display:grid; grid-template-columns:250px minmax(400px,1fr) 285px; grid-template-areas:"control lives ranks" "feed feed spotlight"; gap:12px; align-items:start; }
.control-window{grid-area:control}.lives-window{grid-area:lives}.leaderboard-window{grid-area:ranks}.feed-window{grid-area:feed}.spotlight-window{grid-area:spotlight}
.age-display { text-align:center; padding:10px; margin-bottom:10px; background:#111; color:#82f18d; border:3px inset #bbb; font-family:"Courier New", monospace; }
.age-display span,.age-display small{display:block}.age-display strong{display:block;font-size:38px;line-height:1}
.transport{display:flex;gap:7px;justify-content:center;margin:10px 0}.range-label{display:flex;justify-content:space-between;font-size:11px;margin-top:10px}input[type=range]{width:100%;accent-color:#555}
.inset-box { background:#fff; border:2px inset #bbb; padding:6px; }
.stats-box { margin-top:12px; font-family:"Courier New",monospace; }
.stats-box div { display:flex;justify-content:space-between;padding:3px 1px;border-bottom:1px dotted #aaa }.stats-box div:last-child{border-bottom:0}
.filter-block{margin-top:16px;padding-top:16px}.filter-row{display:flex;flex-wrap:wrap;gap:4px}.chip{min-height:21px;padding:1px 7px;font-size:11px}.chip.active{background:#111;color:#fff;box-shadow:inset 1px 1px #777}

.life-scroll { padding:8px; height:520px; overflow:auto; background:#fff; border:2px inset #aaa; margin:6px; }
.life-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; align-content:start; }
.empty-state { min-height:300px; display:grid; place-items:center; color:#666; }
.life-card { position:relative; min-height:150px; text-align:center; background:transparent; border:1px solid transparent; padding:8px 5px; }
.life-card:hover { border:1px dotted #555; }.life-card.selected{background:var(--selection);color:#fff;border:1px dotted #fff}.life-card.deceased{filter:grayscale(1);opacity:.55}
.life-card.flash{animation:macFlash .7s steps(2,end)}@keyframes macFlash{50%{filter:invert(1)}}
.avatar { width:48px;height:48px;margin:0 auto 5px;display:grid;place-items:center;border:1px solid #111;box-shadow:inset 2px 2px rgba(255,255,255,.55), inset -2px -2px rgba(0,0,0,.35);font-weight:bold;color:#111;font-size:13px;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%)}
.life-card h4{margin:2px 0;font-size:12px}.life-meta{font-size:10px;margin:0 0 5px}.life-score{position:absolute;top:2px;right:3px;padding:1px 3px;background:#fff;color:#111;border:1px solid #111;font-size:10px}
.life-stats{display:grid;gap:3px}.stat-row{display:grid;grid-template-columns:1fr auto;gap:3px;font-size:9px;text-align:left}.mini-track{grid-column:1/-1;height:6px;border:1px solid #111;background:#fff}.mini-track i{display:block;height:100%;background:repeating-linear-gradient(90deg,#111 0 3px,#888 3px 5px)}

.list-header { display:grid;grid-template-columns:1fr auto;padding:3px 6px;background:#777;color:#fff;border:1px solid #111;font-size:10px }
.leaderboard{list-style:none;padding:0;margin:0;border:2px inset #bbb;background:#fff}.leaderboard li{display:grid;grid-template-columns:25px 1fr auto;gap:6px;align-items:center;padding:7px 6px;border-bottom:1px solid #aaa;cursor:pointer}.leaderboard li:last-child{border-bottom:0}.leaderboard li:hover{background:#eee}.leaderboard .rank{font-weight:bold}.leaderboard small{display:block;color:#555;font-size:10px}.placeholder{display:block!important;color:#666}

.event-feed { height:360px; overflow:auto; background:#fff; border:2px inset #aaa; margin:6px; padding:8px; font-family:"Courier New",monospace; }
.feed-empty{color:#666}.feed-item{padding:7px 7px 9px;border-bottom:1px dotted #777}.feed-item header{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}.feed-item strong{font-size:12px}.feed-item time{font-size:10px}.feed-item p{font-size:11px;line-height:1.35;margin:0}.feed-item[data-type=career] header strong::before{content:"▤ "}.feed-item[data-type=love] header strong::before{content:"♥ "}.feed-item[data-type=health] header strong::before{content:"✚ "}.feed-item[data-type=money] header strong::before{content:"$ "}

.spotlight-body{min-height:390px}.info-header{display:flex;gap:10px;align-items:center;padding-bottom:9px;border-bottom:1px solid #777;margin-bottom:9px}.generic-person-icon{width:44px;height:44px;display:grid;place-items:center;font-size:30px;background:#fff;border:2px inset #bbb}.info-header small{display:block;color:#555}.spotlight-empty{color:#555;line-height:1.4}.spotlight-profile{display:grid;gap:10px}.trait-grid{display:grid;grid-template-columns:1fr 1fr;border:2px inset #bbb;background:#fff}.trait{padding:5px;border-right:1px solid #aaa;border-bottom:1px solid #aaa}.trait:nth-child(even){border-right:0}.trait span{display:block;font-size:9px;color:#555}.trait strong{font-size:12px}.defining-choice{padding:8px;border:1px solid #777;background:#eee;box-shadow:inset 1px 1px #fff}.defining-choice p{font-size:11px;line-height:1.4;margin:5px 0 0}

.ceremony{margin-top:12px}.ceremony-content{background:#e7e7e7}.ceremony-header{display:flex;align-items:center;gap:14px;margin-bottom:12px}.ceremony-header h2{margin:0 0 3px;font-family:Georgia,serif;font-size:26px}.ceremony-header p{margin:0}.trophy-icon{width:64px;height:64px;display:grid;place-items:center;font-size:42px;background:#fff;border:2px inset #bbb}.podium{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.winner-card{background:#fff;border:2px inset #bbb;padding:10px;text-align:center}.winner-card:first-child{outline:3px double #111}.winner-card h4{margin:5px 0}.winner-card>strong{font-size:20px}.winner-card p{font-size:10px;line-height:1.35}.winner-medal{font-size:25px}.dialog-actions{text-align:right;margin-top:14px}.hidden{display:none!important}

.desktop-icons { position:fixed;right:18px;bottom:35px;display:grid;gap:16px;color:#fff;text-align:center;text-shadow:1px 1px #000;pointer-events:none }.desktop-icons>div{width:72px}.desktop-icons span{display:block;font-size:42px;line-height:1}.desktop-icons small{display:block;background:rgba(0,0,0,.45);padding:1px}
.system-footer{height:22px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;background:#d7d7d7;border-top:1px solid #fff;box-shadow:0 -1px 0 #111;font-size:10px}

@media(max-width:1050px){.desktop-grid{grid-template-columns:240px 1fr;grid-template-areas:"control lives" "ranks spotlight" "feed feed"}.welcome-content{grid-template-columns:1fr}.setup-box{min-width:0}.desktop-icons{display:none}.podium{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.menu-bar button:not(.apple-menu),.menu-status{display:none}.desktop{width:calc(100% - 10px);margin-top:5px}.welcome-copy{align-items:flex-start}.app-icon{width:72px;height:72px}.desktop-grid{display:block}.desktop-grid>.window{margin-bottom:9px}.welcome-content{padding:10px}.setup-box{grid-template-columns:1fr}.life-scroll{height:430px}.podium{grid-template-columns:1fr}.system-footer{position:static}.welcome-copy h2{font-size:28px}.window{box-shadow:3px 3px 0 rgba(0,0,0,.35)}}
@media(max-width:470px){.welcome-copy{display:block}.app-icon{margin-bottom:12px}.life-grid{grid-template-columns:repeat(2,1fr)}.menu-clock{margin-left:auto}.desktop-grid{gap:0}}


.stat-help { margin-top: 10px; border: 1px solid #777; background: #efefef; box-shadow: inset 1px 1px #fff; }
.stat-help summary { cursor: pointer; padding: 5px 7px; font-weight: bold; font-size: 11px; }
.stat-help p { margin: 0; padding: 0 7px 7px; font-size: 10px; line-height: 1.4; }
.window-hidden { display: none !important; }
.window-zoomed { position: relative; z-index: 20; grid-column: 1 / -1 !important; grid-area: auto !important; width: 100%; }
.window-zoomed .life-scroll, .window-zoomed .event-feed { height: 65vh; }


/* LifeRun v1.3 menu and dialog system */
.menu-root { position: relative; align-self: stretch; display: flex; align-items: center; }
.app-menu-name { margin: 0 3px 0 1px; }
.pull-down {
  position: absolute; top: 27px; left: 0; z-index: 120; min-width: 190px;
  padding: 3px 0; background: #f3f3f3; color: #111; border: 1px solid #111;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #777, 3px 3px 0 rgba(0,0,0,.35);
}
.pull-down.align-right { left: auto; right: 0; }
.pull-down button, .pull-down a {
  display: block; width: 100%; min-height: 24px; padding: 4px 22px 4px 17px;
  border: 0; background: transparent; color: inherit; text-align: left; text-decoration: none;
  font-weight: normal; white-space: nowrap;
}
.pull-down button:hover, .pull-down button:focus, .pull-down a:hover, .pull-down a:focus { background: var(--selection); color: #fff; outline: none; }
.pull-down hr { margin: 3px 0; border: 0; border-top: 1px solid #777; border-bottom: 1px solid #fff; }
.menu-trigger.menu-open { background: var(--selection); color: #fff; }

.dialog-layer {
  position: fixed; inset: 28px 0 22px; z-index: 200; display: grid; place-items: center;
  padding: 16px; background: rgba(0,0,0,.18);
}
.dialog-window { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 82px); overflow: auto; }
.about-content, .help-content { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: start; background: #e5e5e5; }
.about-content h2, .help-content h2 { margin: 0 0 2px; font-family: Georgia, serif; font-size: 27px; }
.about-icon { width: 96px; height: 96px; }
.working-title { margin: 0 0 12px; font-size: 11px; font-style: italic; color: #555; }
.about-links { display: grid; gap: 5px; margin: 12px 0; }
.about-links a, .system-footer a { color: #111; }
.about-links a:hover, .system-footer a:hover { background: var(--selection); color: #fff; }
.dialog-version { font-family: "Courier New", monospace; font-size: 11px; }
.help-icon { width: 72px; height: 72px; display: grid; place-items: center; border: 2px inset #bbb; background: #fff; font: bold 48px Georgia, serif; }
.stats-dialog-content { display: grid; gap: 8px; background: #e5e5e5; }
.stat-definition { display: grid; grid-template-columns: 105px 1fr; gap: 10px; line-height: 1.35; }
.padded-actions { padding: 7px 12px 10px; border-top: 1px solid #777; box-shadow: inset 0 1px #fff; }
.dialog-layer .window-zoomed { width: min(900px, calc(100vw - 24px)); }

@media(max-width:720px){
  .menu-bar { overflow: visible; }
  .menu-bar .menu-root:not(:first-child):not(:nth-of-type(6)):not(:last-of-type) { display:none; }
  .menu-bar .menu-root:nth-of-type(6) { display:flex; }
  .app-menu-name { display:none; }
  .pull-down { position: fixed; top: 28px; left: 4px; right: auto; max-width: calc(100vw - 8px); }
  .pull-down.align-right { left: auto; right: 4px; }
  .about-content, .help-content { grid-template-columns: 1fr; }
  .about-icon, .help-icon { margin: 0 auto; }
  .stat-definition { grid-template-columns: 1fr; gap: 3px; }
  .system-footer { height:auto; min-height:22px; gap:8px; flex-wrap:wrap; padding-block:4px; }
}


/* LifeRun v1.5 LifeCam player */
.world-window{grid-column:auto}.welcome-content{grid-template-columns:minmax(0,1fr) 330px 330px;align-items:center}.lifecam-window{width:330px;max-width:100%;justify-self:center}.lifecam-content{padding:6px;background:#bdbdbd}.lifecam-screen{position:relative;width:240px;aspect-ratio:4/3;margin:auto;padding:3px;background:#050505;border:2px inset #888;overflow:hidden}.lifecam-screen img{width:100%;height:100%;display:block;object-fit:cover;image-rendering:auto;filter:saturate(.88) contrast(.95)}.lifecam-count{position:absolute;left:7px;bottom:5px;color:#fff;font:9px Monaco,"Courier New",monospace;text-shadow:1px 1px #000}.lifecam-caption{min-height:22px;padding:4px 3px 2px;text-align:center;font-size:11px;font-weight:bold}.lifecam-controls{display:flex;align-items:center;justify-content:center;gap:4px;padding:2px 5px 4px}.lifecam-controls .square{width:30px;min-height:22px}.lifecam-track{height:7px;flex:1;max-width:105px;border:1px solid #111;background:#eee;box-shadow:inset 1px 1px #777}.lifecam-track span{display:block;height:100%;width:0;background:#111}.lifecam-window .status-bar{font-size:9px}.life-card{min-height:196px}.stat-row b{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trait-grid .trait strong{overflow-wrap:anywhere}@media(max-width:1180px){.welcome-content{grid-template-columns:1fr 330px}.welcome-copy{grid-column:1/-1}.lifecam-window{grid-column:1}.setup-box{grid-column:2}}@media(max-width:780px){.welcome-content{grid-template-columns:1fr}.welcome-copy,.lifecam-window,.setup-box{grid-column:1}.lifecam-window{width:min(330px,100%)}}@media(max-width:520px){.lifecam-content{padding:5px}.lifecam-controls{padding-inline:0}.lifecam-screen{width:min(240px,100%)}}