@font-face { font-family: Spleen; src: url('../assets/fonts/spleen.otf') format('opentype'); font-display: block; }

:root {
  --text: #d9e0eb; --text2: #7a8494; --text3: #4d5566; --accent: #5c99d9; --amber: #c9a15a;
  --good: #7fd39b; --bad: #e07a6a; --panel: rgba(13,15,23,.92); --line: rgba(92,153,217,.45);
  --glow: rgba(71,105,117,.5);
  --petrol: #476975; --moss: #537361; --mustard: #9e8d54; --rose: #825760; --plum: #745b78;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #030305; color: var(--text); overflow: hidden;
  font-family: Spleen, ui-monospace, monospace; -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; }
button { font-family: inherit; color: inherit; }
img { image-rendering: pixelated; }
canvas { image-rendering: pixelated; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

#wrap { position: absolute; }
#stage { position: absolute; left: 0; top: 0; overflow: hidden; background: #000; transform-origin: 0 0; }
#stage.desk { width: 1280px; height: 720px; }
#stage.port { width: 405px; height: 720px; }
#shake { position: absolute; inset: 0; }
#room { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; }
.port #room { width: 405px; }
#glow { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(520px 520px at var(--gx, 640px) var(--gy, 360px), var(--glow), transparent 70%); mix-blend-mode: screen; }
#scan { position: absolute; inset: 0; pointer-events: none; z-index: 300; opacity: .45;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }

/* ---------- title ---------- */
#logo { position: absolute; left: 0; top: 150px; width: 875px; text-align: center; pointer-events: none; z-index: 2; }
.line { display: block; height: 128px; white-space: nowrap; }
.ch { display: inline-block; transform-origin: 50% 100%; opacity: 0; }
.ci { display: inline-block; transform-origin: 50% 90%; font-size: 118px; line-height: 128px; margin: 0 11px; color: var(--text);
  text-shadow: -3px 0 0 rgba(71,105,117,.65), 3px 0 0 rgba(130,87,96,.65), 0 8px 0 #07080d, 0 0 38px var(--glow); }
#impact { position: absolute; left: 187px; top: 412px; width: 500px; height: 3px; background: var(--text); opacity: 0; transform: scaleX(0); filter: blur(1px); z-index: 2; }
#tagline { position: absolute; left: 0; top: 448px; width: 875px; text-align: center; font-size: 21px; color: var(--text2); letter-spacing: 1px; min-height: 26px; z-index: 2; }
.port #logo { width: 405px; top: 66px; z-index: 30; }
.port .line { height: 64px; }
.port .ci { font-size: 58px; line-height: 64px; margin: 0 5px; text-shadow: -2px 0 0 rgba(71,105,117,.65), 2px 0 0 rgba(130,87,96,.65), 0 4px 0 #07080d, 0 0 20px var(--glow); }
.port #impact { left: 70px; top: 200px; width: 265px; z-index: 30; }
.port #tagline { width: 405px; top: 206px; font-size: 14px; z-index: 30; }
#skiphint { position: absolute; left: 22px; bottom: 16px; font-size: 13px; color: #4a5160; letter-spacing: 2px; opacity: 0; transition: opacity .6s; z-index: 5; }
.port #skiphint { left: 0; right: 0; text-align: center; bottom: 26px; z-index: 40; }

/* ---------- phone ---------- */
#phone { position: absolute; left: 0; top: 0; width: 405px; height: 720px; z-index: 10; }
#pshake { position: absolute; inset: 0; }
#screen { position: absolute; left: 11px; top: 11px; width: 383px; height: 698px; overflow: hidden; background: #000; border-radius: 4px; }
#scr { position: absolute; inset: 0; width: 383px; height: 698px; }
#scrDim { position: absolute; inset: 0; background: rgba(5,5,12,.42); transition: background .6s; }
#frame { position: absolute; inset: 0; width: 405px; height: 720px; pointer-events: none; z-index: 120; }
#led { position: absolute; left: 199px; top: 3px; width: 7px; height: 7px; border-radius: 50%; z-index: 121; }
#led.on { background: #ff3b3b; box-shadow: 0 0 8px 3px rgba(255,59,59,.7); }
#backlight { position: absolute; inset: 0; background: #000; z-index: 100; pointer-events: none; }
#lcd { position: absolute; inset: 0; z-index: 99; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
#glass { position: absolute; inset: 0; z-index: 101; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.012) 30%, transparent 46%); }

#status { position: absolute; left: 0; top: 0; width: 100%; height: 30px; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 0; font-size: 13px; color: var(--text2); }
.sig { display: flex; gap: 2px; align-items: flex-end; height: 10px; width: 40px; }
.sig i { display: block; width: 3px; background: var(--text2); }
.bat { display: flex; align-items: center; gap: 6px; width: 60px; justify-content: flex-end; color: #5fb874; }
.batbox { width: 20px; height: 10px; border: 1px solid currentColor; position: relative; padding: 1px; }
.batbox::after { content: ''; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; background: currentColor; }
.batfill { height: 100%; width: 64%; background: currentColor; }

#lock, #home { position: absolute; inset: 0; z-index: 20; }
#clock { position: absolute; top: 46px; width: 100%; text-align: center; font-size: 100px; line-height: 110px; color: var(--text); letter-spacing: 2px;
  text-shadow: 0 0 22px var(--glow), 0 5px 0 rgba(0,0,0,.6); }
#clock .colon { display: inline-block; width: .42em; }
#day { position: absolute; top: 156px; width: 100%; text-align: center; font-size: 15px; letter-spacing: 4px; color: var(--text2); }
.port #clock { top: 258px; font-size: 64px; line-height: 70px; }
.port #day { top: 330px; }
.port #stackhead { top: 362px !important; }
.port #stack { top: 384px !important; }

.card { position: absolute; left: 21px; width: 341px; height: 66px; display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px;
  background: rgba(16,18,27,.93); border: 1px solid rgba(92,153,217,.28); border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.45); text-align: left; }
.card img { width: 44px; height: 44px; flex: none; margin-top: 2px; }
.card .meta { flex: 1; min-width: 0; }
.card .from { font-size: 13px; color: var(--accent); letter-spacing: 1px; display: flex; justify-content: space-between; height: 16px; text-transform: uppercase; }
.card .from span { color: var(--text3); text-transform: none; }
.card .txt { font-size: 14px; line-height: 16px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.patch { border-color: rgba(201,161,90,.55); cursor: pointer; }
.card.patch .from { color: var(--amber); }

#alarm { top: 196px; height: 74px; border-color: rgba(201,161,90,.6); opacity: 0; }
#alarm .from { color: var(--amber); }
#alarm .snz { position: absolute; right: 10px; bottom: 9px; font-size: 12px; letter-spacing: 2px; color: var(--amber); border: 1px solid rgba(201,161,90,.5); padding: 2px 6px; }
.port #alarm { top: 380px; }
#stackhead { position: absolute; top: 196px; left: 23px; right: 23px; font-size: 12px; letter-spacing: 3px; color: var(--text2); opacity: 0; display: flex; justify-content: space-between; }
#stackhead b { color: var(--accent); font-weight: normal; display: inline-block; }
#stack { position: absolute; left: 0; top: 218px; width: 100%; height: 360px; }
#stack .card .meta, #stack .card img { transition: opacity .25s; }
#stack .card.behind .meta, #stack .card.behind img { opacity: 0; }
#stack .card { top: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.2,.9,.3,1.15); }
#hint { position: absolute; bottom: 48px; width: 100%; text-align: center; font-size: 14px; letter-spacing: 5px; color: var(--text); opacity: 0; background: none; border: 0; cursor: pointer; padding: 8px 0; }
#homebar { position: absolute; bottom: 10px; left: 131px; width: 120px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); z-index: 90; }

/* ---------- home screen ---------- */
#home { display: none; }
.widget { position: absolute; left: 21px; width: 341px; padding: 13px 16px; border-radius: 10px; text-align: left; cursor: pointer;
  background: linear-gradient(160deg, rgba(28,33,46,.94), rgba(14,16,24,.94)); border: 1px solid rgba(92,153,217,.35);
  box-shadow: 0 14px 30px rgba(0,0,0,.5); transform-style: preserve-3d; color: var(--text); }
.widget:hover { border-color: rgba(217,224,235,.6); }
.widget .wt { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: 4px; }
.widget .wt img { width: 32px; height: 32px; }
.widget .ws { margin-top: 10px; font-size: 15px; color: var(--text2); line-height: 19px; }
.ph { display: flex; gap: 6px; margin-top: 11px; }
.ph i { flex: 1; height: 6px; background: #252a38; }
.ph i.done { background: var(--accent); }
.ph i.now { background: linear-gradient(90deg, var(--accent) 50%, #252a38 50%); animation: nowpulse 1.6s ease-in-out infinite; }
@keyframes nowpulse { 50% { filter: brightness(1.6); } }
.wl { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; color: var(--text3); letter-spacing: 1px; }
#wDemo { top: 52px; }
#wDemo .wake { margin-top: 12px; padding: 9px 0; text-align: center; font-size: 18px; letter-spacing: 8px; border: 2px solid var(--text); animation: wakepulse 2.2s infinite; }
@keyframes wakepulse { 50% { border-color: rgba(217,224,235,.35); } }
#wRoad { top: 212px; }
#apps { position: absolute; left: 21px; top: 352px; width: 341px; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; background: none; border: 0; padding: 0; position: relative; }
.app .ico { width: 64px; height: 64px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.app .ico img { width: 64px; height: 64px; display: block; }
.app .lbl { font-size: 12px; letter-spacing: 1px; color: var(--text); white-space: nowrap; }
.app .badge { position: absolute; right: 2px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #d9534a; color: #fff; font-size: 13px; line-height: 20px; text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,.5); }
#hfoot { position: absolute; bottom: 30px; width: 100%; text-align: center; font-size: 13px; color: var(--text2); line-height: 20px; }
#hfoot span { color: var(--text3); font-size: 11px; }

/* ---------- panels (apps): open out of the phone into the room ---------- */
#veil { position: absolute; inset: 0; z-index: 8; backdrop-filter: blur(3px); background: rgba(8,9,15,.55); opacity: 0; pointer-events: none; }
.panel { position: absolute; z-index: 9; display: none; overflow: hidden; background: rgba(13,15,23,.95); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.desk .panel { left: 24px; top: 26px; width: 827px; height: 668px; }
.port .panel { left: 11px; top: 11px; width: 383px; height: 698px; z-index: 110; border: 0; border-radius: 4px; background: #0d0f17; }
.panel .pbar { height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; letter-spacing: 2px; color: #eef1f5; position: relative; flex: none; }
.port .panel .pbar { height: 40px; padding-top: 12px; }
.panel .pbar .x { position: absolute; right: 6px; top: 0; bottom: 0; background: none; border: 0; cursor: pointer; font-size: 13px; letter-spacing: 1px; color: #eef1f5; padding: 0 10px; }
.port .panel .pbar .x { right: auto; left: 8px; top: 12px; }
.panel .pin { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; overflow-y: auto; padding: 26px 34px 40px; scrollbar-width: thin; scrollbar-color: #2b3242 transparent; }
.port .panel .pin { top: 40px; padding: 18px 18px 40px; }
.panel h2 { font-weight: normal; font-size: 30px; letter-spacing: 6px; margin: 0 0 6px; }
.port .panel h2 { font-size: 24px; letter-spacing: 4px; }
.panel .sub { color: var(--text2); font-size: 15px; margin: 0 0 24px; line-height: 21px; }
.panel p { font-size: 16px; line-height: 23px; color: #c4ccd8; margin: 0 0 14px; }
.port .panel p { font-size: 15px; line-height: 21px; }
.panel h3 { font-weight: normal; font-size: 13px; color: var(--text2); letter-spacing: 3px; margin: 30px 0 12px; }
.k { font-size: 10px; color: var(--text2); letter-spacing: 1px; }

/* updates */
.upd { border: 1px solid rgba(92,153,217,.28); background: rgba(16,18,27,.93); border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
.upd > button { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 12px 14px; }
.upd img { width: 44px; height: 44px; flex: none; }
.upd .from { font-size: 13px; color: var(--accent); letter-spacing: 1px; display: flex; }
.upd .from span + span { margin-left: auto; }
.upd .from span { color: var(--text3); }
.upd .t { font-size: 19px; margin-top: 4px; }
.upd .meta { flex: 1; }
.upd .body { display: none; padding: 0 18px 16px 70px; }
.port .upd .body { padding: 0 14px 14px; }
.upd.open { border-color: rgba(217,224,235,.4); }
.upd.open .body { display: block; }
.upd .body li { font-size: 15px; line-height: 21px; color: #c4ccd8; margin-bottom: 6px; }
.upd .body ul { margin: 6px 0 0; padding-left: 18px; }
.upd.new .from::after { content: 'NEW'; color: #0d0f17; background: var(--amber); padding: 0 5px; margin-left: 8px; font-size: 11px; }

/* roadmap */
.dayline { display: flex; gap: 6px; margin: 8px 0 6px; }
.dayline i { flex: 1; height: 10px; background: #252a38; }
.dayline i.done { background: var(--accent); }
.dayline i.now { background: linear-gradient(90deg, var(--accent) 50%, #252a38 50%); animation: nowpulse 1.6s ease-in-out infinite; }
.stop { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid #1e2330; }
.port .stop { grid-template-columns: 1fr; gap: 6px; }
.stop .when { font-size: 13px; color: var(--text2); letter-spacing: 2px; line-height: 20px; }
.stop .when b { display: block; font-weight: normal; font-size: 26px; color: var(--text); letter-spacing: 1px; }
.port .stop .when b { display: inline; font-size: 20px; margin-right: 8px; }
.stop .st { display: inline-block; font-size: 12px; letter-spacing: 2px; padding: 1px 6px; margin-bottom: 8px; }
.stop.done .st { color: var(--text3); border: 1px solid #2b3242; }
.stop.now .st { color: #0d0f17; background: var(--amber); }
.stop.later .st { color: var(--text2); border: 1px dashed #3a4152; }
.stop .what { font-size: 20px; margin-bottom: 6px; }
.stop.done .what { color: #9aa3b2; }
.stop ul { margin: 0; padding-left: 18px; }
.stop li { font-size: 15px; line-height: 21px; color: #b8c0cc; margin-bottom: 3px; }
.stop.done li { color: #7d8697; }

/* the game */
.bars3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10px 0 8px; }
.port .bars3 { grid-template-columns: 1fr; gap: 12px; }
.bars3 .b { border: 1px solid #262c3a; padding: 12px; background: rgba(8,9,14,.5); }
.bars3 .nm { font-size: 14px; letter-spacing: 2px; color: var(--text2); display: flex; justify-content: space-between; }
.bars3 .die { font-size: 13px; color: var(--bad); margin-top: 8px; line-height: 18px; }
.mini { height: 22px; border: 2px solid #6d7686; background: #1b1f2a; padding: 3px; display: flex; gap: 2px; margin-top: 8px; }
.mini .seg { flex: 1; position: relative; overflow: hidden; background: rgba(255,255,255,.03); }
.mini .seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.mini.an .seg i { background: linear-gradient(#f0a050, #d9772e); }
.mini.co { border-color: #3f78bf; } .mini.co .seg i { background: linear-gradient(#6aa6e6, #3f78bf); }
.mini.ba { border-color: #3d8a59; } .mini.ba .seg i { background: linear-gradient(#7fe0a0, #3fa765); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.port .facts { grid-template-columns: 1fr; }
.fact { border-left: 3px solid var(--c, var(--petrol)); padding: 2px 0 2px 14px; }
.fact .ft { font-size: 17px; margin-bottom: 4px; }
.fact p { font-size: 14px !important; line-height: 20px !important; margin: 0 !important; color: #aab3c1 !important; }
.strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.strip img { width: 44px; height: 44px; }
.timesofday { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 1px; color: var(--text3); margin-top: 6px; }
.port .timesofday span:nth-child(even) { display: none; }

/* items */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button { background: #11131a; border: 1px solid #2b2f3b; padding: 6px 10px; font-size: 13px; letter-spacing: 1px; cursor: pointer; color: #c4ccd8; }
.tabs button[aria-pressed="true"] { border-color: var(--text); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.it { aspect-ratio: 1; border: 1px solid #1f2533; background: #0f121a; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; position: relative; }
.it img { width: 44px; height: 44px; }
.it::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tc); opacity: .8; }
.it:hover, .it.sel { border-color: var(--text); }
.itemview { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
.port .itemview { grid-template-columns: 1fr; }
.rface { background: #10131c; border: 1px solid rgba(92,153,217,.45); padding: 12px; text-align: center; min-height: 270px; position: sticky; top: 0; }
.port .rface { position: relative; min-height: 0; }
.rface .bar { height: 3px; background: var(--tc, #6d7c8c); margin-bottom: 6px; }
.rface .tier { font-size: 10px; color: var(--text2); letter-spacing: 1px; text-transform: uppercase; }
.rface img { width: 88px; height: 88px; margin: 16px auto 10px; display: block; }
.rface .nm { font-size: 18px; margin-bottom: 14px; }
.rface .ds { font-size: 13px; line-height: 18px; color: #b8c0cc; }

/* connect */
.thread { border: 1px solid #262c3a; background: rgba(8,9,14,.5); padding: 18px; min-height: 260px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 78%; padding: 10px 13px; font-size: 15px; line-height: 21px; background: #1a2030; border: 1px solid #2a3245; align-self: flex-start; }
.bubble.sys { align-self: center; max-width: 100%; background: none; border: 0; color: var(--text3); font-size: 12px; letter-spacing: 2px; text-align: center; }
.typing { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; background: #1a2030; border: 1px solid #2a3245; }
.typing i { width: 6px; height: 6px; background: var(--text2); animation: dots 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 30% { transform: translateY(-4px); background: var(--text); } 60% { transform: none; } }
.compose { display: flex; gap: 8px; margin-top: 10px; }
.compose input { flex: 1; font-family: Spleen, monospace; font-size: 15px; padding: 10px; background: rgba(0,0,0,.35); border: 1px solid #2b2f3b; color: var(--text3); }
.compose button { border: 1px solid #2b2f3b; background: #11131a; padding: 0 16px; color: var(--text3); font-size: 14px; letter-spacing: 2px; }
.thread { max-height: 360px; overflow-y: auto; }
.bubble.me { align-self: flex-end; background: #232a3c; border-color: #3a4560; }
.compose.signup { flex-direction: column; }
.compose.signup .row { display: flex; gap: 8px; }
.compose.signup input { color: var(--text); }
.compose.signup button { color: var(--text); cursor: pointer; }
.compose.signup .chips { display: flex; gap: 8px; }
.compose.signup .chips button { padding: 6px 12px; color: var(--text2); }
.compose.signup .chips button[aria-pressed="true"] { color: #030305; background: var(--text); border-color: var(--text); }
.fine { color: var(--text3); font-size: 12px; margin-top: 10px; }

/* options */
.opt-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid #1e2330; font-size: 17px; gap: 12px; }
.opt-row small { display: block; font-size: 13px; color: var(--text2); margin-top: 3px; }
.tog { min-width: 84px; padding: 7px 0; text-align: center; background: #11131a; border: 1px solid #2b2f3b; cursor: pointer; letter-spacing: 2px; font-size: 14px; }
.tog[aria-pressed="true"] { border-color: var(--text); color: #fff; }
.btn { display: inline-block; background: #11131a; border: 1px solid var(--line); padding: 8px 14px; cursor: pointer; font-size: 15px; letter-spacing: 1px; }
.btn:hover { border-color: #fff; }

/* ---------- the demo ---------- */
#fade { position: absolute; inset: 0; background: #000; z-index: 250; opacity: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
#fade .big { font-size: 46px; letter-spacing: 10px; text-align: center; }
.port #fade .big { font-size: 26px; letter-spacing: 5px; }
#game { position: absolute; inset: 0; z-index: 200; display: none; background: #000; }
#scene { position: absolute; left: 0; top: 0; width: 875px; height: 720px; overflow: hidden; }
#photo { position: absolute; inset: 0; width: 875px; height: 720px; object-fit: cover; object-position: 50% 42%; }
#sceneDim { position: absolute; inset: 0; background: rgba(6,7,12,0); pointer-events: none; }
#vig { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(150,30,40,.55) 100%); z-index: 50; }
#where { position: absolute; left: 17px; top: 64px; font-size: 19px; line-height: 22px; color: #e8edf3; text-shadow: 0 2px 0 #000; z-index: 2; }
#invbar { position: absolute; left: 0; top: 0; width: 875px; height: 23px; background: var(--petrol); color: #e6ecf2; font-size: 13px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; z-index: 30; }
#invItems { position: absolute; left: 10px; top: 2px; display: flex; gap: 4px; }
#invItems img { width: 19px; height: 19px; }
#resbar { position: absolute; left: 0; top: 525px; width: 875px; height: 22px; background: var(--plum); color: #eee6f0; font-size: 13px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; z-index: 30; }
#quit { position: absolute; left: 12px; bottom: 12px; z-index: 60; font-size: 12px; letter-spacing: 2px; background: rgba(8,9,14,.8); border: 1px solid #2b2f3b; padding: 5px 9px; cursor: pointer; color: var(--text2); }
#quit:hover { color: #fff; border-color: #fff; }
#blur { position: absolute; inset: 0; backdrop-filter: blur(3px); background: rgba(8,9,15,.62); opacity: 0; pointer-events: none; z-index: 40; }

#gphone { position: absolute; left: 875px; top: 0; width: 405px; height: 720px; }
#gpshake { position: absolute; inset: 0; }
.port #scene { width: 383px; height: 190px; left: 11px; top: 11px; z-index: 1; }
.port #photo { width: 383px; height: 190px; }
.port #resbar, .port #where { display: none; }
.port #invbar { width: 383px; height: 18px; font-size: 10px; top: 172px; }
.port #invItems img { width: 14px; height: 14px; }
.port #invItems { top: 2px; }
.port #gphone { left: 0; }
.port #gscreen { background: transparent; }
.port #gscr { top: 190px; height: 508px; }
.port #quit { left: auto; right: 20px; top: 26px; bottom: auto; z-index: 130; }
#gscreen { position: absolute; left: 11px; top: 11px; width: 383px; height: 698px; overflow: hidden; background: #000; border-radius: 4px; }
#gscr { position: absolute; left: 0; top: 0; width: 383px; height: 698px; }
#gframe { position: absolute; inset: 0; width: 405px; height: 720px; pointer-events: none; z-index: 20; }
#gled { position: absolute; left: 199px; top: 3px; width: 7px; height: 7px; border-radius: 50%; z-index: 21; }
#gled.on { background: #ff3b3b; box-shadow: 0 0 8px 3px rgba(255,59,59,.7); }
#pstat { position: absolute; left: 0; top: 4px; width: 100%; height: 22px; display: flex; align-items: center; justify-content: flex-start; padding-left: 50px; font-size: 14px; color: var(--text2); z-index: 9; }
#gbat { position: absolute; right: 50px; top: 3px; display: flex; align-items: center; gap: 6px; font-size: 22px; color: #5fd38a; z-index: 9; }
#gbat .icon { width: 34px; height: 17px; border: 2px solid currentColor; padding: 2px; position: relative; }
#gbat .icon::after { content: ''; position: absolute; right: -5px; top: 3px; width: 3px; height: 7px; background: currentColor; }
#gbat .fill { height: 100%; background: currentColor; width: 100%; }
#gdrain { position: absolute; right: 8px; top: 8px; font-size: 14px; color: #e0a43a; z-index: 9; opacity: 0; }
#unreadB { position: absolute; left: 12px; top: 6px; display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--amber); z-index: 9; opacity: 0; }
#unreadB i { display: block; width: 16px; height: 11px; border: 1.5px solid currentColor; position: relative; overflow: hidden; }
#unreadB i::after { content: ''; position: absolute; left: -2px; right: -2px; top: -6px; height: 10px; border: 1.5px solid currentColor; transform: rotate(45deg) scale(.7); transform-origin: 50% 0; }
.vit { position: absolute; left: 6px; width: 371px; height: 30px; display: flex; align-items: center; z-index: 9; }
.vit .lbl { width: 92px; font-size: 14px; color: var(--text2); letter-spacing: 1px; }
.vit .bar { width: 240px; height: 30px; border: 2px solid #6d7686; background: #1b1f2a; padding: 3px; display: flex; gap: 2px; }
.vit .seg { flex: 1; height: 100%; background: rgba(255,255,255,.03); position: relative; overflow: hidden; }
.vit .seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.vit .pct { width: 36px; text-align: right; font-size: 13px; color: var(--text2); }
#vA { top: 38px; } #vC { top: 74px; }
#vA .seg i { background: linear-gradient(#f0a050, #d9772e); } #vC .seg i { background: linear-gradient(#6aa6e6, #3f78bf); }
#vA .bar { border-color: #7b8191; } #vC .bar { border-color: #3f78bf; }
.vit.zone .bar { box-shadow: inset 0 0 0 1px #e0a43a, 0 0 8px rgba(224,164,58,.4); }
.port .vit, .port #pstat, .port #gbat, .port #unreadB, .port #gdrain { z-index: 30; }
.port #pstat { top: 196px; } .port #gbat { top: 192px; } .port #gdrain { top: 198px; } .port #unreadB { top: 196px; }
.port #vA { top: 226px; } .port #vC { top: 260px; }
#content { position: absolute; left: 18px; top: 116px; width: 347px; bottom: 30px; z-index: 5; overflow-y: auto; scrollbar-width: none; }
.port #content { top: 300px; }
#etext { font-size: 18px; line-height: 25px; white-space: pre-wrap; min-height: 60px; }
.port #etext { font-size: 16px; line-height: 22px; }
.opt { position: relative; display: block; width: 100%; margin-top: 14px; padding: 12px 10px 8px; text-align: center; border: 1px solid rgba(92,153,217,.35); background: rgba(14,16,24,.78); font-size: 17px; line-height: 22px; cursor: pointer; opacity: 0; transform-origin: 50% 60%; }
.port .opt { font-size: 15px; line-height: 20px; }
.opt .h { font-size: 10px; color: var(--text2); margin-top: 6px; letter-spacing: 1px; }
.opt .h b { font-weight: normal; } .opt .h .bad { color: var(--bad); } .opt .h .good { color: var(--good); }
.opt:hover, .opt:focus-visible { border-color: rgba(217,224,235,.75); background: rgba(24,28,40,.85); }
#lockl { position: absolute; left: 0; right: 0; top: 110px; bottom: 0; z-index: 8; display: none; background: rgba(4,5,10,.6); }
.port #lockl { top: 294px; }
#lclock { position: absolute; top: 26px; width: 100%; text-align: center; font-size: 72px; white-space: nowrap; }
#lclock span { display: inline-block; transform-origin: 50% 100%; }
#lphase { position: absolute; top: 118px; width: 100%; text-align: center; font-size: 16px; letter-spacing: 6px; color: var(--text2); }
#lpile { position: absolute; top: 160px; left: 0; width: 100%; height: 200px; }
.pcard { position: absolute; left: 22px; width: 339px; height: 54px; background: rgba(16,18,27,.94); border: 1px solid rgba(201,161,90,.45); display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 13px; }
.pcard img { width: 32px; height: 32px; }
.pcard em { font-style: normal; color: var(--amber); margin-left: auto; font-size: 12px; }

.ncard { position: absolute; left: 88px; top: 44px; width: 700px; padding: 16px 18px; background: #0f121b; border: 1px solid rgba(92,153,217,.45); border-bottom: 3px solid var(--accent); z-index: 45; transform-origin: 50% 0; }
.port .ncard { left: 18px; top: 14px; width: 347px; z-index: 125; padding: 12px; }
.ncard .who { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text2); letter-spacing: 1px; text-transform: uppercase; }
.ncard .who img { width: 44px; height: 44px; }
.ncard .msg { font-size: 22px; margin: 14px 0 6px 2px; min-height: 30px; line-height: 28px; }
.port .ncard .msg { font-size: 16px; line-height: 21px; }
.ncard .after { font-size: 15px; color: var(--text2); margin: 8px 0 0 2px; }
.ncard .btns { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.nbtn { width: 210px; height: 70px; border: 1px solid rgba(92,153,217,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 18px; letter-spacing: 1px; cursor: pointer; background: #0f121b; transition: opacity .2s; }
.port .nbtn { height: 56px; font-size: 15px; }
.nbtn small { font-size: 10px; color: var(--text2); }
.nbtn small .bad { color: var(--bad); } .nbtn small .good { color: var(--good); }
.ncard.unarmed .nbtn { opacity: .35; pointer-events: none; }
.nbtn:hover, .nbtn:focus-visible { border-color: #fff; }

#reward { position: absolute; left: 18px; top: 108px; width: 838px; height: 424px; border: 1px solid var(--line); background: rgba(13,15,23,.9); z-index: 45; display: none; }
.port #reward { left: 11px; top: 11px; width: 383px; height: 698px; z-index: 126; background: rgba(13,15,23,.97); }
#reward .rt { position: absolute; top: 14px; width: 100%; text-align: center; font-size: 22px; letter-spacing: 2px; }
#reward .decline { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 38px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: 1px; cursor: pointer; background: none; }
#reward .decline:hover { border-color: #fff; }
.rcard { position: absolute; width: 196px; height: 250px; z-index: 46; cursor: pointer; transform-style: preserve-3d; background: none; border: 0; padding: 0; }
.port .rcard { width: 300px; height: 180px; z-index: 127; }
.rcard .face, .rcard .back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rcard .face { background: #10131c; border: 1px solid var(--line); padding: 12px; text-align: center; transform: rotateY(180deg); }
.rcard .face .bar { height: 3px; background: var(--tc, #6d7c8c); margin-bottom: 6px; }
.rcard .face .tier { font-size: 9px; color: var(--text2); letter-spacing: 1px; text-transform: uppercase; }
.rcard .face img { width: 44px; height: 44px; margin: 16px auto 10px; display: block; }
.port .rcard .face img { margin: 6px auto 4px; }
.rcard .face .nm { font-size: 17px; margin-bottom: 14px; }
.port .rcard .face .nm { margin-bottom: 6px; }
.rcard .face .ds { font-size: 11px; line-height: 15px; color: #b8c0cc; }
.rcard .back { border: 1px solid rgba(217,224,235,.35); background: repeating-linear-gradient(45deg, rgba(92,153,217,.10) 0 6px, transparent 6px 12px), linear-gradient(160deg, #1b2130, #0c0e15);
  display: flex; align-items: center; justify-content: center; font-size: 40px; color: rgba(217,224,235,.35); }
.rcard.shiny .face { border-color: rgba(201,161,90,.7); }
.rcard .shine { position: absolute; inset: 0; pointer-events: none; transform: rotateY(180deg); background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); background-size: 250% 100%; opacity: 0; }

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 260; }
.chip { position: absolute; height: 30px; padding: 0 9px; display: flex; align-items: center; font-size: 22px; background: rgba(8,9,14,.94); border: 1px solid currentColor; box-shadow: 0 4px 0 rgba(0,0,0,.6); white-space: nowrap; transform-origin: 0 50%; }
.chip small { font-size: 12px; margin-left: 6px; letter-spacing: 1px; }
.drop { position: absolute; font-size: 17px; color: #e0a43a; text-shadow: 0 2px 0 #000; }

/* end of the day */
#endday { position: absolute; inset: 0; z-index: 240; display: none; background: rgba(4,5,9,.97); overflow-y: auto; }
#endday .in { width: 620px; margin: 0 auto; padding: 60px 0 60px; text-align: center; }
.port #endday .in { width: 100%; padding: 50px 22px; }
#endday .head { font-size: 44px; letter-spacing: 8px; min-height: 56px; }
.port #endday .head { font-size: 28px; letter-spacing: 4px; }
#endday .head span { display: inline-block; opacity: 0; }
#endday .cause { color: var(--text2); font-size: 17px; margin-top: 10px; min-height: 22px; }
#endday .when { color: var(--amber); font-size: 15px; letter-spacing: 3px; margin-top: 26px; min-height: 20px; }
.score { margin: 34px auto 0; text-align: left; border-top: 1px solid #1e2330; }
.score .row { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid #1e2330; font-size: 16px; opacity: 0; }
.score .row small { display: block; color: var(--text3); font-size: 12px; margin-top: 2px; }
.score .row b { font-weight: normal; font-size: 20px; }
.score .row.total b { font-size: 24px; }
.score .row.neg b { color: var(--bad); }
.grade { margin-top: 34px; font-size: 30px; letter-spacing: 4px; min-height: 90px; }
.grade .letter { display: inline-block; font-size: 84px; margin-left: 16px; vertical-align: middle; opacity: 0; text-shadow: -3px 0 0 rgba(71,105,117,.65), 3px 0 0 rgba(130,87,96,.65), 0 6px 0 #07080d; }
#endday .note { color: var(--text2); font-size: 15px; line-height: 21px; margin-top: 26px; opacity: 0; }
#endday .btns { display: flex; gap: 12px; justify-content: center; margin-top: 26px; opacity: 0; }
#endday .btns button { min-width: 170px; padding: 12px 0; font-size: 17px; letter-spacing: 4px; background: none; border: 2px solid var(--text); cursor: pointer; }
#endday .btns button:hover { background: rgba(255,255,255,.08); }

/* gate (first visit only: audio needs a click) */
#gate { position: absolute; inset: 0; z-index: 400; background: #000; display: none; cursor: pointer; border: 0; width: 100%; }
#gate .dark { position: absolute; left: 50%; top: 50%; width: 405px; height: 720px; transform: translate(-50%, -50%) scale(.6); opacity: .18; }
.port #gate .dark { transform: translate(-50%, -50%) scale(.8); }
#gate .gled { position: absolute; left: 50%; top: calc(50% - 214px); width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px 3px rgba(255,59,59,.7); animation: gled 2.6s infinite; }
.port #gate .gled { top: calc(50% - 286px); }
@keyframes gled { 0%, 70%, 100% { opacity: 0; } 76%, 90% { opacity: 1; } }
#gate .t { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; font-size: 14px; letter-spacing: 5px; color: var(--text); animation: breathe 2.6s ease-in-out infinite; }
#gate .s { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font-size: 12px; letter-spacing: 2px; color: var(--text3); }
@keyframes breathe { 50% { opacity: .3; } }

#sound { position: fixed; right: 10px; bottom: 8px; z-index: 500; background: rgba(8,9,14,.7); border: 1px solid #22262f; color: var(--text3); font-size: 12px; letter-spacing: 2px; padding: 5px 9px; cursor: pointer; }
#sound:hover { color: var(--text); border-color: var(--text2); }

noscript .nos { position: fixed; inset: 0; overflow: auto; background: #0b0c12; padding: 40px; font-size: 16px; line-height: 24px; z-index: 1000; }

@media (prefers-reduced-motion: reduce) { .ph i.now, .dayline i.now, #wDemo .wake { animation: none; } }
.rm .ph i.now, .rm .dayline i.now, .rm #wDemo .wake, .rm #gate .t, .rm .typing i { animation: none !important; }

/* on a phone the sound switch lives in Options */
@media (max-aspect-ratio: 1/1) { #sound { display: none; } }