/* ---- nullPhone: a second device. Base state is VISIBLE-when-open; we animate FROM
     hidden, never TO visible, so "reduce motion" can never strand it (see CLAUDE.md CSS rule). ---- */
  #phone{position:fixed;right:22px;bottom:96px;z-index:300;
    opacity:0;transform:translateY(22px) scale(.97);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease}
  #phone.on{opacity:1;transform:none;pointer-events:auto}
  body.reduce-motion #phone{transition:none}
  .ph-body{width:286px;height:588px;border-radius:44px;background:#05070c;
    border:1px solid #2b3646;padding:10px;position:relative;display:flex;flex-direction:column;
    box-shadow:0 26px 70px rgba(0,0,0,.62),0 0 0 3px rgba(255,255,255,.03)}
  .ph-island{position:absolute;top:16px;left:50%;transform:translateX(-50%);
    width:82px;height:22px;border-radius:14px;background:#000;z-index:4}
  .ph-status{display:flex;justify-content:space-between;align-items:center;
    font-family:var(--mono);font-size:10.5px;color:#e6eefc;padding:6px 14px 4px;flex:none}
  .ph-sig{letter-spacing:-1px;font-size:9px}
  .ph-screen{flex:1;min-height:0;position:relative;border-radius:34px;overflow:hidden;
    background:linear-gradient(165deg,#16233a 0%,#0d1524 45%,#131d2e 100%)}
  .ph-view{position:absolute;inset:0;display:none;flex-direction:column}
  .ph-view.on{display:flex}
  .ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;padding:26px 12px}
  .ph-app{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;
    align-items:center;gap:5px;font:inherit;padding:0}
  .ph-app span:last-child{font-size:9px;color:#dbe5f5;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .ph-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
    position:relative;box-shadow:0 2px 7px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18)}
  .ph-ic .pg{width:27px;height:27px;display:block}
  .ph-app:active .ph-ic{transform:scale(.93)}
  .ic-msg{background:linear-gradient(160deg,#5ef07f,#1fa94b);color:#fff}   /* WhatsUp  */
  /* Teal, not navy. Dark grey was fine in a grid of eight tiles; in a dock of four next to a blue
     Skypo and a green WhatsUp it read as DISABLED — the one app the rent mechanic needs you to
     open. Money is green in this game's palette, so the bank may as well say so. */
  .ic-bank{background:linear-gradient(160deg,#3fd9a3,#0e7a5c);color:#fff}   /* Revolve */
  .ic-call{background:linear-gradient(160deg,#4fc3f7,#0277bd);color:#fff}  /* Skypo */
  /* ic-pho / ic-map / ic-note / ic-cam / ic-set / ic-mus / ic-str / ic-web belonged to the five
     decorative apps removed on 2026-08-20. Left in place deliberately: they cost nothing, and the
     phone is the most likely place to gain a real app next (Notes is the obvious one). */
  .ic-pho{background:linear-gradient(150deg,#feda75,#d62976 55%,#4f5bd5);color:#fff} /* Instagrim */
  .ic-map{background:linear-gradient(160deg,#8fd6ff,#3b7ddb);color:#fff}
  .ic-note{background:linear-gradient(160deg,#ffe89a,#e8b53c)}
  .ic-cam{background:linear-gradient(160deg,#fffc00,#ffe600);color:#222}   /* Snapchap */
  .ic-set{background:linear-gradient(160deg,#9fb0c4,#5a6b85);color:#1b2431}
  .ic-mus{background:linear-gradient(160deg,#ff7a9c,#e0245c);color:#fff}   /* iToons  */
  .ic-str{background:linear-gradient(160deg,#ff5f52,#c62828);color:#fff}   /* YouTubby */
  .ic-wea{background:linear-gradient(160deg,#8fd6ff,#2f7cf6);color:#fff}
  .ic-web{background:linear-gradient(160deg,#5ec8ff,#0a63c9);color:#fff}   /* Safarai */
  .ph-home{justify-content:space-between}
  /* The clock, where a phone puts it. Light weight and tabular figures so the digits do not shuffle
     sideways every minute, and the date is dimmed because it is context, not information. */
  .ph-lock{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:34px 12px 0}
  .ph-lt{font-size:52px;font-weight:200;line-height:1;color:#fff;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .ph-ld{font-size:12.5px;color:#c3d2e6;text-shadow:0 1px 6px rgba(0,0,0,.5)}
  /* margin-top:auto keeps the dock at the BOTTOM. It was the only child for one commit and
     `space-between` had put it at the top; the auto margin survives either way. */
  .ph-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:auto 9px 12px;padding:10px 4px;
    border-radius:24px;background:rgba(255,255,255,.09);backdrop-filter:blur(14px)}
  /* Labels stay VISIBLE here. Hiding them was right when the dock was an overflow tray under a
     labelled grid; now it is the whole home screen, and "which one is the bank" is a question the
     rent mechanic cannot afford. Four icons leave room for four words. */
  .ph-dock .ph-app span:last-child{display:block;font-size:8.5px}
  .ph-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;
    background:#ff453a;color:#fff;font-family:var(--sans);font-size:10px;font-weight:600;
    display:none;place-items:center;padding:0 4px;border:1.5px solid #0d1524}
  .ph-badge.on{display:grid}
  .ph-nav{flex:none;display:flex;align-items:center;gap:6px;padding:14px 14px 9px;
    border-bottom:1px solid rgba(255,255,255,.09);background:rgba(10,16,26,.7);
    backdrop-filter:blur(12px)}
  .ph-nav b{font-size:15px;color:#fff;font-weight:600}
  .ph-back{background:none;border:none;color:#4da3ff;font-size:22px;cursor:pointer;
    line-height:1;padding:0 2px;font-family:var(--sans)}
  .ph-bank-top{flex:none;padding:16px 16px 13px;display:flex;flex-direction:column;gap:3px;
    background:linear-gradient(150deg,#123528,#0d1a24);border-bottom:1px solid rgba(255,255,255,.08)}
  .ph-bank-top .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:#7fa895}
  .ph-bank-top .bal{font-family:var(--mono);font-size:27px;color:#fff;font-variant-numeric:tabular-nums}
  .ph-bank-top .due{font-size:11px;color:#ff8f8f;margin-top:3px}
  .ph-pay{margin-top:11px;width:100%;border:none;border-radius:9px;padding:10px;cursor:pointer;
    font:inherit;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.1);color:#8b99ad}
  .ph-pay.ready{background:#5ce6a0;color:#05231a}
  .ph-pay.ready:hover{background:#7af0b4}
  .ph-pay:disabled{cursor:default}
  .ph-tx{flex:1;overflow-y:auto}
  .ph-txr{display:flex;gap:9px;align-items:baseline;padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,.055)}
  .ph-txr .d{flex:1;min-width:0;font-size:12.5px;color:#e2e9f4;line-height:1.35}
  .ph-txr .d small{display:block;font-family:var(--mono);font-size:9.5px;color:#7b8aa3;margin-top:2px}
  .ph-txr .a{font-family:var(--mono);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .ph-txr .a.in{color:#5ce6a0}
  .ph-txr .a.out{color:#c3cfe0}
  .ph-txr .a.fail{color:#ff8f8f;text-decoration:line-through}
  .ph-wx{background:linear-gradient(180deg,#2b4a72,#101d2e 60%,#0b131d)}
  .ph-wx-top{flex:none;display:flex;flex-direction:column;align-items:center;padding:30px 16px 18px;gap:2px}
  .ph-wx-top .city{font-size:17px;color:#fff}
  .ph-wx-top .temp{font-size:56px;color:#fff;font-weight:200;line-height:1.05}
  .ph-wx-top .cond{font-size:13px;color:#cdd9e8}
  .ph-wx-top .hilo{font-size:12px;color:#93a7bd;font-family:var(--mono)}
  .ph-wx-days{flex:1;overflow-y:auto;padding:4px 14px}
  .ph-wx-row{display:flex;align-items:center;gap:10px;padding:8px 2px;
    border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;color:#dbe5f5}
  .ph-wx-row .d{width:34px;font-family:var(--mono);color:#a9bccf}
  .ph-wx-row .i{width:20px;text-align:center}
  .ph-wx-row .b{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);position:relative}
  .ph-wx-row .b i{position:absolute;top:0;bottom:0;border-radius:2px;
    background:linear-gradient(90deg,#5aa9e6,#e8c15a)}
  .ph-wx-row .t{width:56px;text-align:right;font-family:var(--mono);color:#cdd9e8}
  .ph-wx-note{flex:none;padding:10px 16px 14px;font-size:11px;color:#7b8ea3;line-height:1.5;
    border-top:1px solid rgba(255,255,255,.09)}
  .ph-callbtn{margin-left:auto;background:none;border:none;cursor:pointer;color:#4da3ff;
    width:26px;height:26px;padding:0;display:grid;place-items:center}
  .ph-callbtn svg{width:17px;height:17px}
  .ph-callbtn:hover{color:#7ec0ff}
  .ph-call{align-items:center;padding:34px 18px 20px;gap:0;
    background:linear-gradient(180deg,#16233a,#0a1119)}
  .ph-cav{width:78px;height:78px;border-radius:50%;background:#3a4a63;color:#dbe5f5;
    display:grid;place-items:center;font-family:var(--mono);font-size:24px;flex:none}
  .ph-cwho{margin-top:14px;font-size:18px;color:#fff;font-weight:600}
  .ph-cstate{margin-top:4px;font-family:var(--mono);font-size:11.5px;color:#8b99ad;
    letter-spacing:.08em}
  .ph-cline{margin-top:22px;font-size:13.5px;line-height:1.55;color:#e2e9f4;text-align:center;
    min-height:58px;flex:1;overflow-y:auto;width:100%}
  .ph-creps{display:flex;flex-direction:column;gap:6px;width:100%;margin-bottom:12px}
  .ph-creps:empty{display:none}
  .ph-cend{flex:none;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
    background:#e5484d;color:#fff;font-size:12.5px;font-weight:600}
  .ph-cend:hover{background:#f05a5f}
  .ph-threads{flex:1;overflow-y:auto}
  .ph-th{display:flex;gap:10px;padding:11px 13px;cursor:pointer;align-items:flex-start;
    border-bottom:1px solid rgba(255,255,255,.055)}
  .ph-th:active{background:rgba(255,255,255,.06)}
  .ph-th .av{width:38px;height:38px;border-radius:50%;flex:none;background:#3a4a63;color:#dbe5f5;
    display:grid;place-items:center;font-family:var(--mono);font-size:12px}
  .ph-th .tx{flex:1;min-width:0}
  .ph-th .nm{font-size:13.5px;color:#fff;font-weight:600;display:flex;align-items:baseline;gap:6px}
  .ph-th .nm em{margin-left:auto;font-style:normal;font-size:10px;color:#8b99ad;font-family:var(--mono)}
  .ph-th .pv{font-size:12px;color:#93a2b8;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ph-th .un{width:8px;height:8px;border-radius:50%;background:#4da3ff;flex:none;margin-top:14px}
  .ph-log{flex:1;overflow-y:auto;padding:14px 11px;display:flex;flex-direction:column;gap:5px}
  .ph-b{max-width:78%;padding:7px 12px;border-radius:17px;font-size:13px;line-height:1.42;
    word-break:break-word}
  .ph-b.them{align-self:flex-start;background:#2b3442;color:#e9eff8;border-bottom-left-radius:5px}
  .ph-b.you{align-self:flex-end;background:#2f7cf6;color:#fff;border-bottom-right-radius:5px}
  .ph-b.sys{align-self:center;background:none;color:#6b7a90;font-size:10.5px;
    font-family:var(--mono);padding:3px 0}
  .ph-replies{flex:none;display:flex;flex-direction:column;gap:6px;padding:9px 11px 12px;
    border-top:1px solid rgba(255,255,255,.09)}
  .ph-replies:empty{display:none}
  .ph-rep{background:rgba(47,124,246,.14);border:1px solid rgba(77,163,255,.5);color:#bcd8ff;
    border-radius:16px;padding:7px 13px;font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
  .ph-rep:hover{background:rgba(47,124,246,.26)}
  .ph-bar{flex:none;height:5px;width:104px;border-radius:3px;background:#3a4658;
    margin:8px auto 2px;border:none;padding:0;cursor:pointer;transition:background .15s,width .15s}
  .ph-bar:hover{background:#6d7d94;width:118px}
  .ph-bar:active{background:#8ea0b8}
  .ph-bar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  body.reduce-motion .ph-bar{transition:none}
  .ph-soon{padding:30px 20px;text-align:center;color:#8b99ad;font-size:12.5px;line-height:1.6}
  @keyframes phBuzz{0%,100%{transform:none}20%{transform:translateX(-3px)}
    40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
  #phone.buzz .ph-body{animation:phBuzz .4s}