:root {
  --body: #17191c;
  --body-hi: #2a2d32;
  --edge: #060708;
  --key: #26292e;
  --key-hi: #3a3e45;
  --key-text: #f2f4f6;
  --screen-top: #eaf1f9;
  --screen-bottom: #c4d6ea;
  --ink: #0d2440;
  --ink-dim: #4a6584;
  --accent: #4484c6;
  --accent-hi: #5e98d3;
  --bar: #4484c6;
  --red: #b3261e;
  --green: #36c25a;
  --amber: #4484c6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
  user-select: none;
  font-family: "Segoe UI", system-ui, sans-serif;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

button:focus { outline: none; }

/* Handheld body: black housing with a rubber edge, like a portable public-safety radio. */
.radio {
  position: absolute;
  left: 10px;
  top: 26px;
  width: 212px;
  height: 618px;
  border-radius: 22px 22px 26px 26px;
  background: linear-gradient(90deg, var(--edge) 0, var(--body-hi) 5%, var(--body) 50%, var(--body-hi) 95%, var(--edge) 100%);
  box-shadow: inset 0 0 0 2px #000, inset 0 2px 0 3px #33373d;
  -webkit-app-region: drag;
  padding: 10px 12px;
}

.antenna {
  position: absolute;
  right: 18px;
  top: -24px;
  width: 18px;
  height: 40px;
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(90deg, #08090a, #2e3237 50%, #08090a);
  box-shadow: inset 0 0 0 1px #000;
}

/* Top controls: volume knob, taller channel knob, emergency button. */
.top {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 2px;
  height: 58px;
}

.knob-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 8px;
  letter-spacing: 1px;
  color: #aeb4bb;
}

.knob-wrap:has(#ch) span { cursor: pointer; -webkit-app-region: no-drag; }

.knob {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #2b2f35 0 6deg, #15171a 6deg 12deg);
  box-shadow: 0 0 0 3px #0a0b0c, inset 0 0 0 6px #202328, 0 3px 6px rgba(0, 0, 0, .6);
  position: relative;
  margin-bottom: 3px;
  cursor: ns-resize;
  -webkit-app-region: no-drag;
}


.knob i {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 3px;
  height: 11px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #e9ecef;
}

.emer {
  margin-left: auto;
  margin-right: 30px;
  width: 26px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: 0 0 0 2px #0a0b0c, 0 2px 4px rgba(0, 0, 0, .6);
  position: relative;
  margin-bottom: 18px;
}

.emer span {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  letter-spacing: 1px;
  color: #aeb4bb;
}

.emer:active { filter: brightness(.85); }

.brand {
  margin: 6px 0 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #c8cdd3;
  text-shadow: 0 1px 0 #000;
}

/* Side buttons: long PTT bar, small deafen button under it. */
.body-row { position: relative; }

.side-ptt {
  position: absolute;
  left: -15px;
  top: 6px;
  width: 11px;
  height: 104px;
  border-radius: 4px;
  background: repeating-linear-gradient(0deg, #121416 0 3px, #2a2d32 3px 6px);
  box-shadow: inset 0 0 0 1px #000;
}

.side-ptt span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 7px;
  letter-spacing: 1px;
  color: #8d939b;
}

.side-ptt.active { background: repeating-linear-gradient(0deg, #3a1210 0 3px, #6e1e18 3px 6px); }

.deaf {
  position: absolute;
  left: -15px;
  top: 118px;
  width: 11px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(90deg, #7d1a14, #c8392d);
  box-shadow: inset 0 0 0 1px #000;
  display: grid;
  place-items: center;
}

.deaf svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: #ffd2cc;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.deaf svg line { opacity: .35; }
.deaf.on { background: linear-gradient(90deg, #c0261b, #ff5a48); box-shadow: inset 0 0 0 1px #000, 0 0 8px #ff4d3d; }
.deaf.on svg { stroke: #fff; }
.deaf.on svg line { opacity: 1; }

/* Color display */
.lcd {
  height: 186px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--screen-top), var(--screen-bottom));
  box-shadow: 0 0 0 5px #050607, 0 0 0 6px #2c3036;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  -webkit-app-region: no-drag;
}

.lcd-status {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 15px;
  padding: 0 5px;
  background: #0b1a2c;
  color: #e9f1fb;
  font-size: 8px;
  letter-spacing: .5px;
}

.lcd-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lcd-flag { white-space: nowrap; color: #9cc6f3; font-weight: 600; }

.sig { display: inline-flex; align-items: flex-end; gap: 1px; height: 9px; }
.sig i { width: 2px; background: #e9f1fb; opacity: .25; }
.sig i:nth-child(1) { height: 3px; }
.sig i:nth-child(2) { height: 5px; }
.sig i:nth-child(3) { height: 7px; }
.sig i:nth-child(4) { height: 9px; }
.sig.on i { opacity: 1; }
.sig.weak i:nth-child(-n+2) { opacity: 1; }

.bat {
  width: 13px;
  height: 7px;
  border: 1px solid #e9f1fb;
  border-radius: 1px;
  position: relative;
  padding: 1px;
}
.bat::after { content: ""; position: absolute; right: -3px; top: 1px; width: 2px; height: 3px; background: #e9f1fb; }
.bat i { display: block; height: 100%; width: 80%; background: #e9f1fb; }

.lcd-date {
  display: flex;
  justify-content: space-between;
  padding: 2px 6px 0;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink);
}

.lcd-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 2px 5px;
}

.lcd-body::-webkit-scrollbar { display: none; }
.lcd-body:has(.list) { justify-content: flex-start; }

.lcd-foot {
  display: flex;
  height: 16px;
  background: linear-gradient(180deg, var(--accent-hi), var(--bar));
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .5px;
}

.lcd-foot span { flex: 1; text-align: center; line-height: 16px; }
.lcd-foot span + span { border-left: 1px solid rgba(255, 255, 255, .45); }

.lcd .big { font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: 1px; }
.lcd .mid { font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.lcd .small { font-size: 9px; letter-spacing: .5px; color: var(--ink-dim); max-width: 100%; word-break: break-word; }
.lcd .dim { color: var(--ink-dim); opacity: .8; }

/* Home screen cards: zone + channel, then status or the latest message. */
.lcd .card {
  align-self: stretch;
  background: rgba(255, 255, 255, .85);
  border: 1px solid #a9c1dc;
  border-radius: 3px;
  text-align: left;
  padding: 4px 6px;
}

.lcd .card + .card { margin-top: 4px; }
.lcd .card { flex: none; }
.lcd .card .zone { font-size: 9px; color: var(--ink-dim); }
.lcd .card .zone .dispatch { float: right; font-weight: 700; }
.lcd .card .zone .dispatch.on { color: #138a3a; }
.lcd .card .zone .dispatch.off { color: #c0261b; }
.lcd .card .chan { font-size: 13px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.lcd .card .state { font-size: 9px; font-weight: 700; color: var(--accent); margin-top: 1px; }
.lcd .card.tx .state { color: #c0261b; }
.lcd .card .last { font-size: 8px; color: var(--ink-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcd .card .last.game { color: var(--ink); font-weight: 700; }
.lcd .card .end-whisper { display: block; width: 100%; margin-top: 3px; padding: 2px 4px; font: inherit; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: #e9f1fb; background: var(--ink); border: 0; border-radius: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcd .card .last.weather { color: #a5520c; font-weight: 700; }
.lcd .card.rx .state { color: #138a3a; }

.lcd .card.units { font-size: 9px; max-height: 58px; overflow: hidden; }
.lcd .card.units .zone { margin-bottom: 1px; }
.lcd .card.units .unit { display: flex; justify-content: space-between; gap: 4px; font-weight: 700; line-height: 11px; }
.lcd .card.units .unit span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcd .card.units .unit .where { font-size: 8px; font-weight: 400; color: var(--ink-dim); }
.lcd .card.units .unit.dim { color: var(--ink-dim); font-weight: 400; }
.lcd .card.units .unit.talking span:first-child { color: #12963a; }

.lcd .list {
  align-self: stretch;
  text-align: left;
  font-size: 10px;
  line-height: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lcd .list li {
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 0 3px;
  border-bottom: 1px solid rgba(68, 132, 198, .15);
}

.lcd .list li.sel {
  background: var(--accent);
  color: #fff;
}

.lcd .list li .meta { display: block; font-size: 8px; opacity: .75; }
.lcd .list.users li { display: flex; justify-content: space-between; gap: 4px; }
.lcd .list.users li.hdr { justify-content: flex-start; font-weight: 700; color: var(--accent); background: rgba(68, 132, 198, .1); margin-top: 2px; }
.lcd .list.users li.hdr.cur::before { content: '\25B8 '; }
.lcd .list.users li.dim { opacity: .55; }
.lcd .list.users li.talking { color: #12963a; font-weight: 700; }
.lcd .list.users li .where { font-size: 8px; opacity: .8; white-space: nowrap; }
.lcd .list.users li.sel, .lcd .list.users li.hdr.sel { background: var(--accent); color: #fff; }

.lcd .meter {
  width: 100%;
  height: 8px;
  margin-top: 8px;
  border: 1px solid var(--accent);
  background: #fff;
}

.lcd .meter b {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

/* Programmable keys around the navigation ring. */
.nav {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  grid-template-rows: 30px 30px;
  align-items: center;
  justify-items: center;
  margin: 16px 2px 14px;
}

.pkey {
  width: 40px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--key-hi), var(--key));
  box-shadow: 0 0 0 2px #0a0b0c, 0 2px 0 #0a0b0c;
  color: var(--key-text);
  font-size: 10px;
  font-weight: 700;
}

#softL { grid-column: 1; grid-row: 1; }
#softR { grid-column: 3; grid-row: 1; }
.okkey { grid-column: 1; grid-row: 2; }
.backkey { grid-column: 3; grid-row: 2; display: grid; place-items: center; }
.gearkey, .homekey { display: grid; place-items: center; }
.gearkey svg, .homekey svg { width: 15px; height: 15px; fill: none; stroke: var(--key-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.backkey svg { width: 14px; height: 14px; fill: none; stroke: var(--key-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.dpad {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, #0d0f11 30%, #2a2d32 32%, #1a1c20 70%);
  box-shadow: 0 0 0 2px #0a0b0c;
}

.dir {
  position: absolute;
  width: 0;
  height: 0;
  background: none;
  border: 6px solid transparent;
}

.dir::after { content: ""; position: absolute; inset: -12px; }
.dir.up { top: 5px; left: 23px; border-bottom: 7px solid #d6dade; border-top: 0; }
.dir.down { bottom: 5px; left: 23px; border-top: 7px solid #d6dade; border-bottom: 0; }
.dir.left { left: 5px; top: 23px; border-right: 7px solid #d6dade; border-left: 0; }
.dir.right { right: 5px; top: 23px; border-left: 7px solid #d6dade; border-right: 0; }

/* Keypad with letters, like a handheld's 3x4 pad. */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px 9px;
  padding: 0 2px;
}

.keypad button {
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--key-hi), var(--key));
  box-shadow: 0 0 0 2px #0a0b0c, 0 2px 0 #0a0b0c;
  color: var(--key-text);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

.keypad button small { font-size: 7px; font-weight: 600; letter-spacing: .5px; color: #b9bfc6; }
.keypad button.fn { color: var(--amber); }
.keypad button:active, .pkey:active, .deaf:active { transform: translateY(2px); box-shadow: 0 0 0 2px #0a0b0c; }

/* Bottom: QUIT and status lamps */
.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 2px;
}

.quit {
  width: 52px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #c62d22, #8f1c15);
  box-shadow: 0 0 0 2px #0a0b0c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

.lamps {
  display: flex;
  gap: 12px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #5d636b;
}

.lamp.dot::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3b3f45;
  margin-right: 3px;
  vertical-align: 1px;
}

#lampTx.on { color: #ff4d3d; text-shadow: 0 0 6px #ff4d3d; }
#lampRx.on { color: var(--green); text-shadow: 0 0 6px var(--green); }
#lampMic.on { color: #e9ecef; }
#lampMic.on::before { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
#lampMic.hot::before { background: var(--green); box-shadow: 0 0 6px var(--green); }

/* MENU / SETUP rows: name column, value column, ">" on the selected row. */
.lcd .rows li { display: flex; align-items: flex-start; padding: 1px 2px; line-height: 12px; }
.lcd .rows .caret { width: 8px; flex: none; }
.lcd .rows .name { width: 54px; flex: none; font-weight: 600; }
.lcd .rows .val { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* In-game panic: the display and body flash red for 10 seconds. */
.radio.panic .lcd { animation: panic-lcd .5s steps(1) infinite; }
.radio.panic .lcd .small, .radio.panic .lcd-date { color: inherit; opacity: 1; }
.radio.panic { animation: panic-body .5s steps(1) infinite; }
@keyframes panic-lcd {
  0% { background: #3a0604; color: #ff5a4f; }
  50% { background: #b3261e; color: #fff; }
}
@keyframes panic-body {
  0% { box-shadow: inset 0 0 0 2px #000, inset 0 2px 0 3px #33373d, 0 0 0 3px #b3261e, 0 0 16px #b3261e; }
  50% { box-shadow: inset 0 0 0 2px #000, inset 0 2px 0 3px #33373d; }
}

/* Clickable screen: rows, value arrows and the soft-key labels. */
.lcd .list li[data-row] { cursor: pointer; }
.lcd .list li[data-row]:not(.sel):hover { background: rgba(68, 132, 198, .12); }
.lcd .rows .adj { display: inline-block; padding: 0 3px; font-size: 8px; cursor: pointer; }
.lcd-foot span { cursor: pointer; }
.lcd-foot span:hover { background: rgba(255, 255, 255, .15); }

/* Signal and battery animations (just for looks). */
.sig i, .bat i { transition: opacity .3s, width .6s; }
.sig.scan i { animation: sig-scan 1.2s infinite; }
.sig.scan i:nth-child(2) { animation-delay: .15s; }
.sig.scan i:nth-child(3) { animation-delay: .3s; }
.sig.scan i:nth-child(4) { animation-delay: .45s; }
@keyframes sig-scan { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
.sig.rx i, .sig.tx i { animation: sig-live .6s infinite alternate; }
.sig.rx i:nth-child(odd), .sig.tx i:nth-child(odd) { animation-delay: .2s; }
@keyframes sig-live { from { opacity: 1; } to { opacity: .55; } }
/* BAR ANIM: the bars bob up and down, faster while a voice is on. */
.sig.anim:not(.scan) i { transform-origin: bottom; animation: sig-bob 1.6s ease-in-out infinite; }
.sig.anim:not(.scan) i:nth-child(2) { animation-delay: .2s; }
.sig.anim:not(.scan) i:nth-child(3) { animation-delay: .4s; }
.sig.anim:not(.scan) i:nth-child(4) { animation-delay: .6s; }
.sig.anim.rx:not(.scan) i, .sig.anim.tx:not(.scan) i { animation-duration: .5s; }
@keyframes sig-bob { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
.bat i { background: linear-gradient(90deg, #e9f1fb 0 70%, #fff 80%, #e9f1fb 90%); background-size: 300% 100%; animation: bat-shine 5s linear infinite; }
@keyframes bat-shine { from { background-position: 100% 0; } to { background-position: -200% 0; } }
body.low-power .bat i { animation: none; }


/* 911 calls waiting. */
.lcd .card.calls { border-color: #d9822b; background: rgba(255, 244, 230, .92); }
.lcd .card.calls .zone { color: #b4560f; font-weight: 700; }
.lcd .card.calls .unit { display: flex; justify-content: space-between; gap: 4px; font-size: 9px; font-weight: 700; line-height: 11px; }
.lcd .card.calls .unit span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcd .card.calls .unit .where { font-weight: 400; color: #b4560f; }
.lcd .card.calls .call-detail { font-size: 8px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }

/* Panic mini map: the postal sits under the marker in the middle. */
.lcd .pmap { position: relative; align-self: stretch; height: 72px; margin: 2px 0; border-radius: 3px; background-color: #0b1a2c; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.lcd .pmap i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ff2a1a; box-shadow: 0 0 0 2px #fff, 0 0 8px 3px rgba(255, 42, 26, .8); animation: pin-pulse .8s infinite alternate; }
@keyframes pin-pulse { from { transform: scale(1); } to { transform: scale(1.35); } }
.lcd .postal { font-size: 17px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; }

/* Tutorial text. */
.lcd .small.tour { font-size: 10px; line-height: 1.35; margin-top: 4px; color: var(--ink); }

/* SIZE dial (60-130%): drag, click or scroll it, or use the arrows. */
.lcd .size-dial { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; }
.lcd .size-dial .adj { padding: 6px 4px; font-size: 11px; cursor: pointer; user-select: none; }
.lcd .dial { width: 132px; height: 101px; cursor: grab; touch-action: none; }
.lcd .dial:active { cursor: grabbing; }
.lcd .dial .track { fill: none; stroke: var(--ink-dim); stroke-opacity: .3; stroke-width: 7; stroke-linecap: round; }
.lcd .dial .fill { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.lcd .dial .tick { stroke: var(--ink-dim); stroke-width: 1.5; }
.lcd .dial .tick.full { stroke: var(--ink); stroke-width: 2.5; }
.lcd .dial .needle { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.lcd .dial .hub, .lcd .dial .knob-dot { fill: var(--ink); }
.lcd .dial .knob-dot { stroke: var(--screen-top, #fff); stroke-width: 1.5; }
.lcd .dial text { fill: var(--ink); font-size: 15px; font-weight: 800; font-family: inherit; }
.lcd .dial text.end { fill: var(--ink-dim); font-size: 8px; font-weight: 700; }

/* Signal bars follow this radio's own signal from the staff coverage map (b4 = clear). */
.sig.on.b3 i:nth-child(4),
.sig.on.b2 i:nth-child(n+3),
.sig.on.b1 i:nth-child(n+2) { opacity: .25; animation: none; }

/* Startup screen: the Clearwater logo while the radio turns on. */
.lcd .boot {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: linear-gradient(180deg, var(--screen-top), var(--screen-bottom));
  color: var(--ink);
  transition: opacity .5s ease;
}
.lcd .boot img { width: 64px; height: 64px; animation: boot-logo 1.2s ease-out both; }
.lcd .boot b { font-size: 13px; letter-spacing: 3px; margin-top: 4px; animation: boot-text .9s .5s ease-out both; }
.lcd .boot span { font-size: 9px; letter-spacing: 4px; color: var(--ink-dim); animation: boot-text .9s .7s ease-out both; }
.lcd .boot .boot-bar { width: 90px; height: 3px; margin-top: 8px; border-radius: 2px; background: rgba(13, 36, 64, .15); overflow: hidden; position: relative; }
.lcd .boot .boot-bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: boot-bar 1.7s .2s ease-in-out both; }
.lcd .boot em { font-style: normal; font-size: 8px; color: var(--ink-dim); margin-top: 3px; }
.lcd .boot.done { opacity: 0; }
.lcd .boot[hidden] { display: none; }
@keyframes boot-logo { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes boot-text { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes boot-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.low-power .lcd .boot * { animation: none !important; }

/* Radio damage (downed in game): a cracked screen for 20 seconds. */
.lcd .crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.lcd .crack[hidden] { display: none; }
.lcd .crack path { fill: none; stroke: rgba(20, 28, 38, .85); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, .7)); }
.lcd .crack path.thin { stroke-width: .9; stroke: rgba(20, 28, 38, .6); }
.lcd .crack circle { fill: rgba(255, 255, 255, .35); stroke: rgba(20, 28, 38, .7); stroke-width: 1; }
body.damaged .lcd { animation: damage-flicker 2.4s steps(1) infinite; }
@keyframes damage-flicker { 0%, 100% { filter: none; } 46% { filter: brightness(.82) contrast(1.15); } 48% { filter: none; } 81% { filter: brightness(.9); } 82% { filter: none; } }
.low-power.damaged .lcd { animation: none; }

/* Staff warning / recorded notice pop-up. */
.lcd .modal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 4px; text-align: center; }
.lcd .modal.warning { background: rgba(192, 38, 27, .12); border: 1px solid #c0261b; }
.lcd .modal.warning .mid { color: #c0261b; }
.lcd .modal.notice { background: rgba(68, 132, 198, .1); border: 1px solid #4484c6; }

/* SWITCH RADIO: swaps between the handheld and the car radio. */
.switch-radio {
  display: block;
  width: 100%;
  height: 20px;
  margin-top: 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3a3e45, #23262b);
  box-shadow: 0 0 0 2px #0a0b0c, 0 2px 0 #0a0b0c;
  color: #e8ebef;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.switch-radio:active { transform: translateY(2px); box-shadow: 0 0 0 2px #0a0b0c; }

/* Car radio: a dash-mounted mobile radio (wide faceplate, finned top) with the same screen and keys. */
.car .radio {
  left: 8px;
  top: 8px;
  width: 584px;
  height: 252px;
  padding: 0;
  border-radius: 10px 10px 14px 14px;
  background: linear-gradient(180deg, #24272c 0, #1a1c20 46px, #16181b 47px, #111316 100%);
  box-shadow: inset 0 0 0 2px #000, inset 0 48px 0 0 rgba(0, 0, 0, 0), 0 6px 14px rgba(0, 0, 0, .45);
}
/* Finned top of the radio, with a round badge in the middle. */
.car .radio::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 4px;
  height: 38px;
  border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(90deg, #2b2f35 0 10px, #15171a 10px 14px);
  box-shadow: inset 0 -2px 0 #000;
}
.car .radio::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 64px;
  height: 22px;
  margin-left: -32px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #3a3e45, #16181b 70%);
  box-shadow: 0 0 0 2px #0a0b0c;
}
.car .antenna { display: none; }
.car .top, .car .body-row, .car .nav, .car .bottom { display: contents; }
.car .brand { position: absolute; left: 92px; top: 52px; margin: 0; font-size: 9px; letter-spacing: 3px; }

/* Left: power (QUIT), deafen, and the round mic socket as the PTT. */
.car .quit { position: absolute; left: 22px; top: 60px; width: 38px; height: 38px; border-radius: 50%; font-size: 8px; }
.car .deaf { left: 27px; top: 110px; width: 28px; height: 16px; border-radius: 4px; }
.car .deaf svg { width: 11px; height: 11px; }
.car .side-ptt {
  left: 17px;
  top: 140px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1c20 0 30%, #3a3e45 32% 46%, #121416 48% 62%, #2a2d32 64%);
  box-shadow: 0 0 0 2px #000, 0 2px 4px rgba(0, 0, 0, .6);
}
.car .side-ptt span { transform: translate(-50%, -50%); font-size: 8px; color: #c8cdd3; }
.car .side-ptt.active { background: radial-gradient(circle, #6e1e18 0 30%, #c0261b 32% 46%, #3a1210 48% 62%, #6e1e18 64%); }

/* Middle: the screen with its four keys under it, like the soft keys on a mobile radio. */
.car .lcd { position: absolute; left: 90px; top: 68px; width: 214px; height: 148px; }
.car .pkey { position: absolute; top: 226px; width: 50px; height: 18px; }
.car #softL { left: 90px; }
.car .okkey { left: 144px; }
.car .backkey { left: 198px; }
.car #softR { left: 254px; }

/* Right of the screen: volume and channel knobs over the navigation ring, then SWITCH RADIO and the lamps. */
.car .knob-wrap { position: absolute; top: 62px; }
.car .vol-wrap { left: 322px; }
.car .ch-wrap { left: 370px; }
.car .dpad { position: absolute; left: 331px; top: 122px; }
.car .switch-radio { position: absolute; left: 318px; top: 194px; width: 88px; margin: 0; }
.car .lamps { position: absolute; left: 324px; top: 228px; gap: 9px; }

/* Keypad, then the orange emergency button on the far right. */
.car .keypad { position: absolute; left: 420px; top: 62px; width: 120px; gap: 6px; padding: 0; }
.car .keypad button { height: 34px; font-size: 13px; flex-direction: column; gap: 0; }
.car .keypad button small { font-size: 6px; }
.car .emer {
  position: absolute;
  left: 550px;
  top: 64px;
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff8a3d, #e2560f);
}
.car .emer span { top: 30px; }

/* RTO: drag me into this channel's Discord voice channel. */
.rto {
  width: 38px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--key-hi), var(--key));
  box-shadow: 0 0 0 2px #0a0b0c;
  color: var(--key-text);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}
.rto:active { transform: translateY(2px); }
.car .rto { position: absolute; left: 22px; top: 204px; width: 38px; height: 18px; }

/* Fire radio: a lime-green fire handheld (black top and bottom, speaker grille), shown on a fire team in game. */
.fire .radio {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 7%, rgba(255, 255, 255, .12) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%),
    linear-gradient(180deg, #17191c 0, #202327 66px, #8fc414 66px, #b4e626 30%, #a9dc1f 80%, #8fc414 calc(100% - 30px), #17191c calc(100% - 30px));
  box-shadow: inset 0 0 0 2px #0b0d06, inset 0 2px 0 3px #2b3012;
}
.fire .antenna { width: 10px; right: 46px; border-radius: 5px 5px 2px 2px; background: linear-gradient(90deg, #050505, #2a2a2a 50%, #050505); }
.fire .emer { background: linear-gradient(180deg, #ff8a3d, #e2560f); }
.fire .brand {
  position: relative;
  margin: 4px 0 4px;
  padding-top: 30px;
  color: #12160a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* Speaker grille dots above the name. */
.fire .brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 116px;
  height: 26px;
  margin-left: -58px;
  border-radius: 8px;
  background: radial-gradient(circle, #1f2a06 0 2.4px, transparent 2.9px) 0 0 / 12.9px 9px;
}
.fire .brand::after { content: " FIRE"; color: #b3261e; text-shadow: none; }
.fire .bottom .lamps, .fire .lamps { color: #33410c; }
.fire .lamp.dot::before { background: #33410c; }
.fire .nav { margin: 10px 2px 10px; }
.fire .keypad { gap: 6px 9px; }
.fire .keypad button { height: 28px; }
.fire .switch-row { margin-top: 8px; }

/* ---------- Civilian team: the phone (body.on-phone) ---------- */
.phone { display: none; }
body.on-phone .radio { display: none; }
body.on-phone .phone {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 8px;
  top: 8px;
  width: 300px;
  height: 620px;
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(135deg, #3b3e44, #17181b 40%, #2b2d31 70%, #0d0e10);
  box-shadow: inset 0 0 0 1.5px #5d6168, inset 0 0 0 4px #0b0c0e, 0 6px 18px rgba(0, 0, 0, 0.55);
  -webkit-app-region: drag;
  color: #f4f5f7;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}
.phone::before, .phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #3a3d42;
}
.phone::before { left: -2px; top: 120px; height: 56px; box-shadow: 0 70px 0 #3a3d42; }
.phone::after { right: -2px; top: 150px; height: 80px; }
.phone-status, .phone-screen, .phone-home, .phone-banner { -webkit-app-region: no-drag; }
.phone-status {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 11px;
  height: 44px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px 0 30px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 36px 36px 0 0;
  -webkit-app-region: drag;
}
.phone-island {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 84px;
  height: 24px;
  margin-left: -42px;
  border-radius: 14px;
  background: #000;
}
.phone-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.phone-bars i { width: 3px; background: #f4f5f7; border-radius: 1px; }
.phone-bars i:nth-child(1) { height: 4px; }
.phone-bars i:nth-child(2) { height: 6px; }
.phone-bars i:nth-child(3) { height: 8px; }
.phone-bars i:nth-child(4) { height: 10px; }
.phone-bars b { width: 20px; height: 10px; margin-left: 5px; border-radius: 3px; border: 1.5px solid #f4f5f7; box-shadow: inset 0 0 0 1.5px #000, inset 14px 0 0 #f4f5f7; }
.phone-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 36px;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 46px;
}
.phone-home {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 11px;
  height: 22px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.phone-home i { width: 104px; height: 4px; border-radius: 3px; background: #f4f5f7; opacity: 0.85; }
.phone-banner {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 52px;
  z-index: 4;
  padding: 8px 12px;
  border-radius: 16px;
  background: #2c2e34;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  font-size: 11.5px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  animation: phone-drop 0.25s ease-out;
}
.phone-banner[hidden] { display: none; }
.phone-banner b { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: #4fa3ff; }
.phone-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes phone-drop { from { transform: translateY(-14px); opacity: 0; } }

/* Home screen: dark wallpaper with a glowing planet edge, app grid and dock. */
.phone-screen.on-home { padding-top: 0; }
.phone-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 120% 125%, #0c0f15 46%, #c79a5a 47.2%, #43301c 49%, transparent 58%),
    radial-gradient(circle at -40% -10%, #0e1420 50%, #6e86b5 51%, #1b2638 53%, transparent 62%),
    linear-gradient(180deg, #0b0f19, #05070b);
}
.phone-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 6px;
  padding: 62px 14px 0;
}
.phone-app { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; }
.phone-app i {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
}
.phone-app svg { width: 30px; height: 30px; fill: #fff; stroke: none; }
.phone-app svg .ln { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.phone-app span { font-size: 10px; color: #f4f5f7; text-shadow: 0 1px 2px #000; }
.phone-app:active i { filter: brightness(0.75); }
.app-internet i { background: linear-gradient(160deg, #3b8beb, #17457d); overflow: hidden; }
/* The embedded logo is dark (made for the radio's light screen): drawn white on the phone. */
.phone-app .phone-logo { width: 40px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); }
.app-market i { background: linear-gradient(160deg, #f0473a, #b81d1d); }
.app-market svg .ln { stroke: #fff; }
.app-dark i { background: radial-gradient(circle at 50% 30%, #1b2a1c, #050806 72%); }
/* Dark Web: a hooded figure with glowing green eyes */
.app-dark svg { width: 34px; height: 34px; }
.app-dark svg .hood { fill: #2a2f2b; }
.app-dark svg .face { fill: #050605; }
.app-dark svg .eye { fill: #39ff7a; filter: drop-shadow(0 0 1.5px #39ff7a); }
.app-notes i { background: linear-gradient(180deg, #ffd84a 0 28%, #fffdf3 28%); }
.app-notes svg { fill: none; }
.app-notes svg .ln { stroke: #b9b3a2; }
.app-clock i { background: #fff; }
.app-clock svg { fill: #fff; stroke: #111; stroke-width: 1.2; }
.app-clock svg .ln { stroke: #e8361c; }
.app-radio i { background: linear-gradient(160deg, #3b4352, #12151b); }
.app-radio svg .ln { stroke: #fff; }
.app-radio svg .hole { fill: #4aa3ff; }
.app-settings i { background: linear-gradient(160deg, #a5a9b1, #61656d); }
.app-settings svg { fill: #2f3238; }
.app-settings svg .hole { fill: #a5a9b1; }
.app-settings svg .ln { stroke: #2f3238; stroke-width: 2.4; }
.phone-dock {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 30px;
  height: 70px;
  border-radius: 26px;
  background: rgba(70, 74, 84, 0.45);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 18px;
}

/* App screens */
.phone-bar {
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  padding: 2px 10px 8px;
  border-bottom: 1px solid #1f2125;
  font-size: 15px;
}
.phone-bar b { text-align: center; }
.phone-bar button { background: none; font-size: 15px; color: #4fa3ff; justify-self: start; padding: 2px 4px; }
.phone-bar .phone-new, .phone-bar .phone-del-note { justify-self: end; }
.phone-bar .phone-new { width: 26px; height: 26px; border-radius: 50%; background: #267bd7; color: #fff; font-size: 19px; line-height: 24px; text-align: center; padding: 0; }
.phone-bar .phone-back { font-size: 22px; line-height: 18px; }
.phone-bar .phone-back[data-app="notes"] { font-size: 14px; color: #ffcc33; }
.phone-bar .phone-del-note { color: #ff453a; font-size: 13px; }
.phone-scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 28px;
  user-select: text;
}
.phone-scroll::-webkit-scrollbar { width: 0; }
.phone-empty { padding: 40px 22px; text-align: center; color: #8b8f97; font-size: 12.5px; line-height: 1.5; }
.phone-post { display: flex; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #1a1c20; }
.phone-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3b8beb, #17457d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.phone-post-main { flex: 1; min-width: 0; }
.phone-post-head { font-size: 12.5px; display: flex; gap: 4px; }
.phone-post-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-post-head span { color: #7e828a; flex: none; }
.phone-post p { margin: 3px 0 6px; font-size: 12.5px; line-height: 1.38; white-space: pre-wrap; overflow-wrap: anywhere; }
.phone-listing { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 7px 9px; border-radius: 10px; background: #17191d; font-size: 13px; }
.phone-listing em { font-style: normal; color: #4cd964; font-weight: 700; }
.phone-post-actions { display: flex; gap: 16px; }
.phone-post-actions button { background: none; font-size: 11.5px; color: #7e828a; }
.phone-like.on { color: #ff375f; }
.phone-del { color: #ff453a !important; }
.phone-compose { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.phone-compose-who { font-size: 11.5px; color: #8b8f97; }
.phone-input {
  width: 100%;
  border: 1px solid #2a2d33;
  border-radius: 10px;
  background: #121417;
  color: #f4f5f7;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  user-select: text;
  -webkit-app-region: no-drag;
}
.phone-input:focus { border-color: #4fa3ff; }
textarea.phone-input { min-height: 120px; resize: none; }
.phone-error { color: #ff6b5e; font-size: 11.5px; }
.phone-compose-row { display: flex; justify-content: space-between; }
.phone-cancel { background: none; color: #c9ccd2; font-size: 13px; }
.phone-send { background: #267bd7; color: #fff; font-weight: 700; font-size: 13px; padding: 7px 18px; border-radius: 16px; }
.phone-send[disabled] { opacity: 0.55; }
/* Dark Web: green on black, no names */
.on-dark .phone-bar button, .on-dark .phone-input:focus { color: #39d870; border-color: #1c8f45; }
.on-dark .phone-bar .phone-new, .on-dark .phone-send { background: #1c8f45; color: #fff; }
.on-dark .phone-avatar { background: #0f2416; color: #39d870; }
.phone-dark-intro { padding: 16px 14px 12px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid #1a1c20; }
.phone-dark-intro b { font-size: 17px; }
.phone-dark-intro span { font-size: 11.5px; color: #8b8f97; }
/* Market: green prices, red buttons */
.on-market .phone-bar button { color: #ff5a4e; }
.on-market .phone-bar .phone-new, .on-market .phone-send { background: #e0332b; color: #fff; }
/* Notes */
.phone-note { display: flex; flex-direction: column; align-items: flex-start; width: calc(100% - 24px); margin: 8px 12px 0; padding: 10px 12px; border-radius: 12px; background: #1b1c1f; text-align: left; }
.phone-note b { font-size: 13px; }
.phone-note span { font-size: 11px; color: #8b8f97; }
.on-notes .phone-bar .phone-new { background: #ffcc33; color: #000; }
.on-notes .phone-bar button, .on-note .phone-bar button { color: #ffcc33; }
.phone-note-text { flex: 1; margin: 6px 0 28px; padding: 8px 14px; background: #000; border: 0; color: #f4f5f7; font: inherit; font-size: 13.5px; line-height: 1.45; resize: none; outline: none; user-select: text; }
/* Clock */
.phone-clock-big { padding: 18px 16px 14px; font-size: 54px; font-weight: 200; display: flex; flex-direction: column; }
.phone-clock-big span { font-size: 12.5px; font-weight: 400; color: #8b8f97; }
.phone-clock-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border-top: 1px solid #1a1c20; }
.phone-clock-row span { font-size: 14px; }
.phone-clock-row b { font-size: 28px; font-weight: 300; }
/* Settings */
.phone-group-label { padding: 14px 18px 5px; font-size: 10.5px; text-transform: uppercase; color: #8b8f97; letter-spacing: 0.4px; }
.phone-group { margin: 0 12px; border-radius: 12px; background: #1b1c1f; overflow: hidden; }
.phone-group + .phone-group { margin-top: 14px; }
.phone-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 14px; background: none; font-size: 13px; color: #f4f5f7; text-align: left; border-bottom: 1px solid #26282c; }
.phone-row:last-child { border-bottom: 0; }
.phone-row em { font-style: normal; color: #4fa3ff; font-size: 12px; }
.phone-vol button { width: 30px; height: 26px; border-radius: 8px; background: #2c2e33; font-size: 16px; }
.phone-danger { color: #ff453a; }

/* Clearwater Internet: logo and name in the header, blue accents */
.phone-brand { display: flex; align-items: center; justify-content: center; gap: 6px; }
.phone-brand-logo { width: 28px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); }
.phone-brand span { display: flex; flex-direction: column; line-height: 1; text-align: left; font-size: 14px; }
.phone-brand small { font-size: 8.5px; letter-spacing: 2.2px; color: #4fa3ff; font-weight: 700; margin-top: 2px; }
.on-internet .phone-bar { background: linear-gradient(180deg, #0a1a2e, #000); border-bottom-color: #13304f; }
.phone-avatar { overflow: hidden; }
.phone-avatar img { width: 100%; height: 100%; object-fit: cover; }
.phone-check { font-style: normal; flex: none; width: 13px; height: 13px; margin-top: 2px; border-radius: 50%; background: #267bd7; color: #fff; font-size: 8.5px; line-height: 13px; text-align: center; }
.phone-post-head i { font-style: normal; color: #7e828a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.phone-replies { font-size: 11.5px; color: #7e828a; }

/* Tucked away: a slim arrow tab on the right edge of the screen; the phone slides out of it. */
.phone-bubble { display: none; }
body.on-bubble .radio, body.on-bubble .phone { display: none; }
body.on-bubble .phone-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 0;
  top: 50%;
  width: 30px;
  height: 84px;
  margin-top: -42px;
  border-radius: 14px 0 0 14px;
  background: rgba(18, 20, 24, 0.86);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: phone-tab-in 0.2s ease-out;
}
.phone-bubble svg { width: 20px; height: 20px; fill: none; stroke: #f4f5f7; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.phone-bubble:hover { background: rgba(38, 123, 215, 0.92); }
.phone-bubble:hover svg { transform: translateX(-2px); }
.phone-bubble:active { filter: brightness(0.85); }
@keyframes phone-tab-in { from { transform: translateX(100%); } }
.phone.slide-in { animation: phone-slide-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1); }
.phone.slide-out { animation: phone-slide-out 0.26s ease-in forwards; }
@keyframes phone-slide-in { from { transform: translateX(105%); } }
@keyframes phone-slide-out { to { transform: translateX(105%); opacity: 0; } }

/* ---------- phone: Clearwater Internet, laid out like X ---------- */
.on-internet { --x-text: #e7e9ea; --x-dim: #71767b; --x-line: #2f3336; --x-blue: #1d9bf0; color: var(--x-text); }
.on-internet.phone-screen { padding-top: 40px; }
.x-top { flex: none; background: rgba(0, 0, 0, 0.92); border-bottom: 1px solid var(--x-line); }
.x-top-row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; height: 34px; padding: 0 12px; }
.x-top-me { background: none; justify-self: start; }
.x-top-close { background: none; justify-self: end; color: var(--x-dim); font-size: 13px; }
.x-logo { justify-self: center; width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.x-tabs { display: flex; }
.x-tabs button { flex: 1; background: none; color: var(--x-dim); font-size: 13px; font-weight: 500; height: 36px; position: relative; }
.x-tabs button.on { color: var(--x-text); font-weight: 700; }
.x-tabs button.on span { position: relative; display: inline-block; height: 100%; line-height: 36px; }
.x-tabs button.on span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--x-blue); }
.x-tabs-flat { border-bottom: 1px solid var(--x-line); }
.x-scroll { flex: 1; overflow-y: auto; padding-bottom: 60px; user-select: text; }
.x-empty { padding: 36px 24px; text-align: center; color: var(--x-dim); font-size: 13px; line-height: 1.45; }
.x-spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #1d3a55; border-top-color: var(--x-blue); animation: x-spin 0.8s linear infinite; }
@keyframes x-spin { to { transform: rotate(360deg); } }
.x-error { margin: 6px 12px; padding: 7px 10px; border-radius: 8px; background: #2a1215; color: #ff7b72; font-size: 12px; }

/* Avatars */
.x-av { flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, #3b8beb, #17457d); color: #fff; font-weight: 700; cursor: pointer; }
.x-av img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.x-av-xs { width: 16px; height: 16px; font-size: 8px; }
.x-av-sm { width: 26px; height: 26px; font-size: 11px; }
.x-av-md { width: 38px; height: 38px; font-size: 15px; }
.x-av-lg { width: 64px; height: 64px; font-size: 24px; border: 3px solid #000; }
.x-check { display: inline-flex; width: 14px; height: 14px; margin: 0 1px 0 2px; flex: none; vertical-align: -2px; }
.x-check svg { width: 14px; height: 14px; fill: var(--x-blue); }

/* Posts */
.x-post { padding: 9px 12px 4px; border-bottom: 1px solid var(--x-line); cursor: pointer; }
.x-post:hover { background: #080808; }
.x-rt-line { display: flex; align-items: center; gap: 6px; margin: 0 0 3px 26px; color: var(--x-dim); font-size: 11.5px; font-weight: 700; }
.x-rt-line svg { width: 13px; height: 13px; fill: var(--x-dim); }
.x-row { display: flex; gap: 9px; }
.x-body { flex: 1; min-width: 0; }
.x-head { display: flex; align-items: center; gap: 3px; font-size: 13px; white-space: nowrap; min-width: 0; }
.x-head b { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.x-head b:hover { text-decoration: underline; }
.x-head span { color: var(--x-dim); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; margin-left: 2px; }
.x-head em { color: var(--x-dim); font-style: normal; flex: none; }
.x-replying { color: var(--x-dim); font-size: 12px; margin-top: 1px; }
.x-replying b { color: var(--x-blue); font-weight: 400; }
.x-text { margin: 2px 0 0; font-size: 13.5px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.x-media { margin-top: 8px; border-radius: 14px; border: 1px solid var(--x-line); overflow: hidden; max-height: 230px; display: flex; align-items: center; justify-content: center; background: #0d0d0d; }
.x-media img { width: 100%; max-height: 230px; object-fit: cover; display: block; }
.x-media span { padding: 30px; color: var(--x-dim); font-size: 12px; }
.x-quote { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--x-line); border-radius: 14px; }
.x-quote-head { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.x-quote-head span { color: var(--x-dim); overflow: hidden; text-overflow: ellipsis; }
.x-quote p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; }
.x-poll { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.x-poll-row { position: relative; display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 6px; font-size: 12.5px; overflow: hidden; }
.x-poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #1e2a36; border-radius: 6px; }
.x-poll-row span, .x-poll-row b { position: relative; }
.x-poll small { color: var(--x-dim); font-size: 11.5px; }
.x-actions { display: flex; justify-content: space-between; margin: 5px -6px 0 -6px; padding-right: 20px; }
.x-act { display: flex; align-items: center; gap: 4px; background: none; color: var(--x-dim); font-size: 11.5px; padding: 4px 6px; border-radius: 16px; min-width: 40px; }
.x-act svg { width: 16px; height: 16px; fill: currentColor; }
.x-act svg .x-outline { fill: none; stroke: currentColor; stroke-width: 1.9; }
.x-reply:hover { color: var(--x-blue); }
.x-rt:hover, .x-rt.on { color: #00ba7c; }
.x-like:hover, .x-like.on { color: #f91880; }
.x-del { min-width: 0; }
.x-del:hover { color: #f4212e; }
/* A post opened on its own */
.x-main { cursor: default; padding-top: 10px; }
.x-main:hover { background: none; }
.x-main-head { display: flex; gap: 9px; align-items: center; }
.x-who { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.x-who b { font-size: 13.5px; display: flex; align-items: center; }
.x-who span { font-size: 12.5px; color: var(--x-dim); }
.x-main .x-text { font-size: 15px; margin-top: 9px; }
.x-time { margin: 10px 0 0; color: var(--x-dim); font-size: 12.5px; padding-bottom: 9px; border-bottom: 1px solid var(--x-line); }
.x-stats { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--x-line); font-size: 12.5px; color: var(--x-dim); }
.x-stats b { color: var(--x-text); }
.x-main .x-actions { padding: 2px 6px 4px 0; margin: 0; }
.x-reply-box { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--x-line); }
.x-reply-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--x-text); font: inherit; font-size: 13.5px; user-select: text; -webkit-app-region: no-drag; }
.x-pill { background: var(--x-blue); color: #fff; font-weight: 700; font-size: 12.5px; padding: 6px 14px; border-radius: 16px; }
.x-pill[disabled] { opacity: 0.5; cursor: default; }
/* Header with a back arrow */
.x-bar { flex: none; display: flex; align-items: center; gap: 18px; padding: 4px 12px 6px; border-bottom: 1px solid var(--x-line); background: rgba(0, 0, 0, 0.92); }
.x-bar div { display: flex; flex-direction: column; min-width: 0; }
.x-bar b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-bar span { font-size: 11px; color: var(--x-dim); }
.x-back { background: none; display: flex; padding: 4px; border-radius: 50%; }
.x-back svg { width: 18px; height: 18px; fill: var(--x-text); }
/* Profiles */
.x-banner { height: 82px; background: linear-gradient(135deg, #17457d, #0a1a2e 70%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.x-banner img { width: 100%; height: 100%; object-fit: cover; }
.x-banner img.x-banner-logo { width: 54px; height: 54px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.35; }
.x-prof { padding: 0 12px 10px; display: flex; flex-direction: column; }
.x-prof-top { display: flex; justify-content: space-between; align-items: flex-end; margin-top: -32px; min-height: 64px; }
.x-follow { background: #eff3f4; color: #0f1419; font-weight: 700; font-size: 12.5px; padding: 6px 16px; border-radius: 16px; margin-bottom: 2px; }
.x-follow.on { background: none; color: var(--x-text); border: 1px solid #536471; }
.x-follow.on:hover { border-color: #67070f; color: #f4212e; }
.x-follow.on:hover span { font-size: 0; }
.x-follow.on:hover span::after { content: "Unfollow"; font-size: 12.5px; }
.x-prof-name { margin-top: 8px; font-size: 17px; display: flex; align-items: center; }
.x-prof-handle { color: var(--x-dim); font-size: 12.5px; }
.x-prof-bio { margin: 8px 0 0; font-size: 13px; line-height: 1.35; white-space: pre-wrap; }
.x-prof-meta { margin-top: 7px; color: var(--x-dim); font-size: 12px; }
.x-prof-counts { display: flex; gap: 14px; margin-top: 7px; font-size: 12.5px; color: var(--x-dim); }
.x-prof-counts b { color: var(--x-text); }
/* Search */
.x-search-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px; border-bottom: 1px solid var(--x-line); }
.x-search-box { flex: 1; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; background: #202327; }
.x-search-box svg { width: 14px; height: 14px; fill: var(--x-dim); flex: none; }
.x-search-box input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--x-text); font: inherit; font-size: 13px; user-select: text; -webkit-app-region: no-drag; }
.x-person { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; background: none; border-bottom: 1px solid var(--x-line); text-align: left; }
.x-person span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.x-person b { display: flex; align-items: center; }
.x-person i { font-style: normal; color: var(--x-dim); font-size: 12px; }
/* Compose */
.x-compose-top { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 4px 12px 8px; }
.x-cancel { background: none; color: var(--x-text); font-size: 13.5px; }
.x-compose { display: flex; gap: 9px; padding: 6px 12px; }
.x-compose textarea { flex: 1; min-height: 150px; background: none; border: 0; outline: none; resize: none; color: var(--x-text); font: inherit; font-size: 15px; line-height: 1.35; user-select: text; -webkit-app-region: no-drag; }
.x-compose-replying { padding: 0 12px 0 59px; }
.x-compose-foot { margin-top: auto; display: flex; justify-content: space-between; padding: 8px 14px 34px; border-top: 1px solid var(--x-line); color: var(--x-blue); font-size: 12px; font-weight: 700; }
.x-compose-foot em { font-style: normal; color: var(--x-dim); font-weight: 400; }
.x-compose-foot em.low { color: #ffd400; }
/* Floating post button and the bottom bar */
.x-fab { position: absolute; right: 14px; bottom: 76px; width: 46px; height: 46px; border-radius: 50%; background: var(--x-blue); box-shadow: 0 2px 10px rgba(29, 155, 240, 0.45); display: flex; align-items: center; justify-content: center; }
.x-fab svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; pointer-events: none; }
.x-fab { z-index: 3; cursor: pointer; transition: transform .15s ease; }
.x-fab:active { transform: scale(.92); }
.x-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; padding-bottom: 18px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid var(--x-line); background: #000; }
.x-nav-btn { background: none; padding: 6px 14px; }
.x-nav-btn svg { width: 20px; height: 20px; fill: var(--x-text); opacity: 0.75; }
.x-nav-btn.on svg { opacity: 1; filter: drop-shadow(0 0 0.6px #fff); }

/* ---------- phone: its own apps ---------- */
.phone-grid { padding-top: 8px; gap: 12px 6px; }
.phone-pills { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 50px 12px 0; min-height: 50px; }
.phone-pill { padding: 4px 10px; border-radius: 12px; background: rgba(70, 74, 84, 0.7); color: #fff; font-size: 11px; font-weight: 600; }
.phone-pill.red { background: #c62828; }
.phone-pill.amber { background: #b7791f; }
.phone-pill.dim { background: rgba(70, 74, 84, 0.4); color: #c9ccd2; font-weight: 500; }
.phone-app i { position: relative; }
.phone-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-style: normal; }
.phone-thread-row .phone-dot { position: static; display: inline-block; margin-left: 4px; }
.phone-badge { position: absolute; top: 4px; left: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff3b30; color: #fff; font: 700 10.5px/17px -apple-system, "Segoe UI", sans-serif; text-align: center; }
.phone-badge[hidden] { display: none; }
body.on-bubble .phone-bubble.nudge { animation: phone-tab-nudge 0.9s ease-in-out 3; }
body.on-bubble .phone-bubble.ring { animation: phone-tab-nudge 0.8s ease-in-out infinite; background: #1f9d3a; }
@keyframes phone-tab-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes phone-nudge { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }

/* App icons */
.app-phone i { background: linear-gradient(160deg, #5bf675, #1fb83a); }
.app-texts i { background: linear-gradient(160deg, #5bf675, #1fb83a); }
.app-bank i { background: linear-gradient(160deg, #2e7d5b, #114232); }
.app-maps i { background: linear-gradient(160deg, #e8f3ea 0 50%, #a8d5ff 50%); }
.app-maps svg { fill: #e53935; }
.app-rides i { background: linear-gradient(160deg, #222, #000); }
.app-rides svg { fill: #ffd60a; }
.app-tow i { background: linear-gradient(160deg, #ffb340, #e07800); }
.app-sos i { background: linear-gradient(160deg, #ff5a4e, #b3150e); }
.app-sos svg text { fill: #fff; }
.app-wallet i { background: linear-gradient(160deg, #1c1c1e, #000); }
.app-wallet svg { fill: #f2c94c; }
.app-wallet svg .hole { fill: #1c1c1e; }
.app-wallet svg .ln { stroke: #1c1c1e; }
.app-weather i { background: linear-gradient(160deg, #4aa3ff, #1a5fb4); }
.app-weather svg .sun { fill: #ffd60a; }
.app-shop i { background: linear-gradient(160deg, #bf5af2, #7d2ab1); }
.app-scanner i { background: linear-gradient(160deg, #3b3b3b, #111); }
.app-scanner svg { fill: #39d870; }
.app-scanner svg .ln { stroke: #39d870; }

/* Wallpapers (Shop) */
.phone-wall.wall-sunset { background: linear-gradient(180deg, #2b1055 0%, #d53369 55%, #f8a45a 100%); }
.phone-wall.wall-ocean { background: radial-gradient(circle at 70% 120%, #3ad1c9 0 30%, transparent 31%), linear-gradient(180deg, #0a2a4a, #0b5c7e 60%, #18a3a8); }
.phone-wall.wall-night { background: radial-gradient(circle at 80% 15%, #fff7c2 0 3%, transparent 3.5%), linear-gradient(180deg, #050816, #1b1f4b 70%, #3b1e54); }
.phone-wall.wall-neon { background: linear-gradient(135deg, #ff00a8 0%, #120032 40%, #00e5ff 100%); }
.phone-wall.wall-gold { background: linear-gradient(160deg, #3a2a00, #b8860b 45%, #ffd75e 60%, #6b4b00); }
/* Cases (Shop) */
.phone.case-white { background: linear-gradient(135deg, #f4f4f6, #c9cbd1 45%, #eceef2 75%, #a9abb2); }
.phone.case-red { background: linear-gradient(135deg, #e53935, #8e1512 45%, #c62828 75%, #5e0b09); }
.phone.case-blue { background: linear-gradient(135deg, #2f80ed, #123d7a 45%, #1f63c4 75%, #0b2550); }
.phone.case-pink { background: linear-gradient(135deg, #ff8fc4, #c2427e 45%, #f06aa8 75%, #85244f); }
.phone.case-gold { background: linear-gradient(135deg, #ffe08a, #a6781c 45%, #e8b94a 75%, #6a4a0c); }
.phone-swatch { flex: none; width: 22px; height: 22px; border-radius: 6px; margin-right: 10px; background: #333; }
.phone-swatch.wall-default { background: linear-gradient(180deg, #0b0f19, #6e86b5); }
.phone-swatch.wall-sunset { background: linear-gradient(180deg, #2b1055, #d53369, #f8a45a); }
.phone-swatch.wall-ocean { background: linear-gradient(180deg, #0a2a4a, #18a3a8); }
.phone-swatch.wall-night { background: linear-gradient(180deg, #050816, #3b1e54); }
.phone-swatch.wall-neon { background: linear-gradient(135deg, #ff00a8, #120032, #00e5ff); }
.phone-swatch.wall-gold { background: linear-gradient(160deg, #b8860b, #ffd75e); }
.phone-swatch.case-black { background: #17181b; box-shadow: inset 0 0 0 1px #444; }
.phone-swatch.case-white { background: #eceef2; }
.phone-swatch.case-red { background: #c62828; }
.phone-swatch.case-blue { background: #1f63c4; }
.phone-swatch.case-pink { background: #f06aa8; }
.phone-swatch.case-gold { background: #e8b94a; }
.phone-play { flex: none; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: #2c2e33; color: #4fa3ff; font-size: 10px; }
.phone-row .grow { flex: 1; }
.phone-row span { display: flex; flex-direction: column; min-width: 0; }
.phone-row span i { font-style: normal; font-size: 10.5px; color: #8b8f97; }

/* Shared pieces */
.phone-form { padding: 10px 12px 28px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.phone-form textarea.phone-input { min-height: 90px; }
.phone-small { padding: 4px 14px; font-size: 11px; line-height: 1.4; color: #8b8f97; }
.phone-form .phone-small { padding: 0 2px; }
.phone-small.dim { color: #5d6168; }
.phone-actions { display: flex; justify-content: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.phone-actions.left { justify-content: flex-start; padding: 6px 0 0; }
.phone-btn { padding: 8px 16px; border-radius: 16px; background: #2c2e33; color: #f4f5f7; font-size: 13px; font-weight: 600; }
.phone-btn.small { padding: 5px 11px; font-size: 11.5px; border-radius: 13px; }
.phone-btn.blue { background: #267bd7; }
.phone-btn.green { background: #2fb34a; }
.phone-btn.red { background: #e0332b; }
.phone-btn.amber { background: #e08a00; }
.phone-btn.plain { background: none; color: #4fa3ff; }
.phone-btn.red.plain { color: #ff453a; }
.phone-btn[disabled] { opacity: 0.55; }
.phone-link { background: none; color: #4fa3ff; font-size: 12px; justify-self: end; }
.phone-error { padding: 0 2px; }
.phone-scroll > .phone-error { padding: 6px 14px; }
.phone-tabs { display: flex; margin: 8px 12px 4px; padding: 2px; border-radius: 9px; background: #1b1c1f; }
.phone-tabs button { flex: 1; padding: 5px; border-radius: 7px; background: none; color: #c9ccd2; font-size: 12px; }
.phone-tabs button.on { background: #3a3c42; color: #fff; font-weight: 600; }
.phone-card-big { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 10px; text-align: center; }
.phone-card-big b { font-size: 17px; }
.phone-card-big em { font-style: normal; color: #4cd964; font-size: 15px; font-weight: 700; }
.phone-card-big span { font-size: 12px; color: #8b8f97; }
.phone-big-icon { font-size: 40px; line-height: 1.1; }
.phone-avatar.big { width: 56px; height: 56px; font-size: 24px; }
.phone-avatar.huge { width: 84px; height: 84px; font-size: 36px; }

/* Phone (keypad) */
.phone-dialer { display: flex; flex-direction: column; align-items: center; }
.phone-mine { padding: 6px 0 2px; font-size: 11.5px; color: #8b8f97; }
.phone-mine b { color: #f4f5f7; }
.phone-dial { min-height: 40px; padding-top: 6px; font-size: 30px; font-weight: 300; letter-spacing: 1px; }
.phone-dial span { font-size: 14px; color: #5d6168; }
.phone-dial-name { min-height: 16px; font-size: 12px; color: #4cd964; }
.phone-keys { display: grid; grid-template-columns: repeat(3, 58px); gap: 10px 18px; padding: 8px 0; }
.phone-key { width: 58px; height: 58px; border-radius: 50%; background: #2c2e33; color: #fff; font-size: 24px; }
.phone-key:active { background: #55585f; }

/* Messages */
.phone-thread-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; text-align: left; border-bottom: 1px solid #1a1c20; color: #f4f5f7; }
.phone-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.phone-thread-main b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-thread-main span { font-size: 11.5px; color: #8b8f97; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-thread-row em { font-style: normal; font-size: 10.5px; color: #8b8f97; flex: none; }
.phone-thread { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 12px; }
.phone-msg { max-width: 78%; align-self: flex-start; display: flex; flex-direction: column; }
.phone-msg p { margin: 0; padding: 7px 11px; border-radius: 16px; background: #26272b; font-size: 12.5px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.phone-msg.mine { align-self: flex-end; align-items: flex-end; }
.phone-msg.mine p { background: #1d7cf2; }
.phone-msg.sys { align-self: center; max-width: 90%; }
.phone-msg.sys p { background: #1b1c1f; color: #c9ccd2; font-size: 11.5px; }
.phone-msg i { font-style: normal; font-size: 10px; color: #8b8f97; margin: 0 8px 2px; }
.phone-msg span { font-size: 9.5px; color: #5d6168; margin: 2px 8px 0; }
.phone-reply { display: flex; gap: 6px; padding: 6px 10px 30px; border-top: 1px solid #1a1c20; }
.phone-reply .phone-input { border-radius: 18px; }
.phone-reply .phone-send { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 16px; flex: none; }
.phone-send.red { background: #e0332b; }

/* Bank */
.phone-balance { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 6px; }
.phone-balance span { font-size: 11.5px; color: #8b8f97; }
.phone-balance b { font-size: 32px; font-weight: 600; color: #4cd964; }
.phone-bill { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #26282c; }
.phone-bill:last-child { border-bottom: 0; }
.phone-bill span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.phone-bill i { font-style: normal; font-size: 10.5px; color: #8b8f97; }

/* Marketplace extras */
.phone-chips { display: flex; gap: 5px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid #1a1c20; }
.phone-chips::-webkit-scrollbar { height: 0; }
.phone-chips button { flex: none; padding: 4px 10px; border-radius: 12px; background: #1b1c1f; color: #c9ccd2; font-size: 11.5px; }
.phone-chips button.on { background: #e0332b; color: #fff; }
.phone-deals { padding: 4px 0 6px; border-bottom: 1px solid #1a1c20; }
.phone-deal { margin: 6px 10px 0; padding: 9px 11px; border-radius: 12px; background: #17191d; display: flex; flex-direction: column; gap: 2px; }
.phone-deal b { font-size: 12.5px; }
.phone-deal span { font-size: 11px; color: #8b8f97; }
.phone-tags { display: flex; gap: 4px; margin-top: 4px; }
.phone-tag { padding: 1px 7px; border-radius: 8px; background: #26282c; color: #c9ccd2; font-size: 10px; }
.phone-tag.amber { background: #5a3c00; color: #ffcf6e; }
.phone-photo-wrap { position: relative; margin-top: 6px; border-radius: 10px; overflow: hidden; }
.phone-photo-wrap.small { width: 120px; margin: 0; }
.phone-photo { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.phone-photo.empty { height: 60px; display: flex; align-items: center; justify-content: center; background: #17191d; color: #5d6168; font-size: 11px; }
.phone-photo-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 11px; }
.phone-sold { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 3px 14px; border: 3px solid #ff3b30; border-radius: 6px; color: #ff3b30; font-size: 22px; font-weight: 900; letter-spacing: 2px; background: rgba(0, 0, 0, 0.45); }
.phone-sold.inline { position: static; display: inline-block; transform: rotate(-6deg); margin-top: 6px; font-size: 14px; padding: 1px 10px; border-width: 2px; }
.phone-listing.sold em { text-decoration: line-through; color: #8b8f97; }
.phone-post.is-sold { opacity: 0.75; }
.phone-meet { font-size: 11.5px; color: #c9ccd2; margin-bottom: 4px; }
.phone-meet button { background: none; color: #4fa3ff; font-size: 11.5px; margin-left: 4px; }
.phone-compose-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phone-check-row { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #c9ccd2; }
select.phone-input { appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238b8f97' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 16px 16px; }
select.phone-input option { background: #121417; color: #f4f5f7; }
.phone-dark-shop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 10px; padding: 10px 12px; border-radius: 12px; background: #0f2416; }
.phone-dark-shop span { display: flex; flex-direction: column; font-size: 12.5px; }
.phone-dark-shop i { font-style: normal; font-size: 10.5px; color: #7bbf8e; }
.phone-dark-shop em { font-style: normal; color: #39d870; font-size: 12px; }
.on-dark .phone-btn { background: #1c8f45; }
.phone-blocked { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 80px 24px; text-align: center; }
.phone-blocked b { font-size: 18px; color: #39d870; font-family: Consolas, monospace; }
.phone-blocked span { font-size: 12px; color: #7e828a; }

/* Maps */
.phone-map { position: relative; width: calc(100% - 20px); aspect-ratio: 1; margin: 10px; border-radius: 14px; overflow: hidden; background-color: #1b2a1c; background-repeat: no-repeat; }
.map-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; }
.map-dot[hidden] { display: none; }
.map-dot.me { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #1d7cf2; box-shadow: 0 0 0 3px #fff, 0 0 10px #1d7cf2; z-index: 2; }
.map-dot.pin { background: #ff3b30; box-shadow: 0 0 0 2px #fff; }
.map-dot.target { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #ffcc00; box-shadow: 0 0 0 3px #000, 0 0 12px #ffcc00; z-index: 1; }

/* Wallet */
.phone-idcard { margin: 12px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #e9f1fb, #b9cde6); color: #10213a; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.phone-idcard-top { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 12px; background: #17457d; color: #fff; }
.phone-idcard-top b { font-size: 13px; letter-spacing: 2px; }
.phone-idcard-top span { font-size: 9px; letter-spacing: 1px; }
.phone-idcard-body { display: flex; gap: 12px; padding: 10px 12px; }
.phone-idcard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 11.5px; }
.phone-idcard dt { color: #4b5d78; font-size: 9.5px; text-transform: uppercase; align-self: center; }
.phone-idcard dd { margin: 0; font-weight: 700; }
.phone-idcard dd.bad { color: #c62828; }
.phone-idcard-foot { padding: 4px 12px 8px; font-size: 10.5px; color: #4b5d78; }
.phone-wanted-box { margin: 12px 12px 0; padding: 10px 12px; border-radius: 12px; background: #4a0d0d; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.phone-wanted-box b { color: #ffcc00; font-size: 14px; }
.phone-wanted-box span { font-size: 11.5px; color: #ffb4ab; }

/* Weather */
.phone-weather { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px; padding: 22px 12px; border-radius: 18px; background: linear-gradient(180deg, #3d8be0, #1a5fb4); }
.phone-weather.w-rain, .phone-weather.w-fog { background: linear-gradient(180deg, #5b6878, #2c3440); }
.phone-weather.w-thunderstorm { background: linear-gradient(180deg, #3a3550, #14121e); }
.phone-weather i { font-style: normal; font-size: 54px; }
.phone-weather b { font-size: 22px; }
.phone-weather span { font-size: 12px; opacity: 0.85; }
.phone-weather em { font-style: normal; font-size: 11.5px; opacity: 0.85; margin-top: 4px; }
.phone-alert-box { margin: 0 12px; padding: 10px 12px; border-radius: 12px; background: #5a1a12; display: flex; flex-direction: column; gap: 3px; }
.phone-alert-box b { font-size: 13px; color: #ffcf6e; }
.phone-alert-box span { font-size: 12px; }
.phone-alert-box em { font-style: normal; font-size: 10.5px; color: #c9ccd2; }

/* Scanner */
.phone-scanner { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px; padding: 22px 12px; border-radius: 16px; background: #111; font-family: Consolas, monospace; }
.phone-scanner b { font-size: 16px; color: #7e828a; }
.phone-scanner.on b { color: #39d870; }
.phone-scanner b.live { color: #ffcc00; }
.phone-scanner b.enc { color: #ff453a; }
.phone-scanner span { font-size: 11px; color: #7e828a; }

/* Notifications */
.phone-note-row { display: flex; flex-direction: column; align-items: flex-start; width: calc(100% - 20px); margin: 6px 10px 0; padding: 8px 12px; border-radius: 12px; background: #1b1c1f; text-align: left; color: #f4f5f7; }
.phone-note-row b { font-size: 10.5px; text-transform: uppercase; color: #4fa3ff; letter-spacing: 0.4px; }
.phone-note-row span { font-size: 12px; line-height: 1.35; }
.phone-note-row i { font-style: normal; font-size: 10px; color: #5d6168; }

/* Calls */
.phone-screen.on-call { padding-top: 0; background: linear-gradient(180deg, #2b3a4f, #0b0f16); }
.phone-call { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 90px; }
.phone-call > b { font-size: 24px; font-weight: 500; margin-top: 10px; }
.phone-call > span { font-size: 13px; color: #c9ccd2; }
.phone-call > em { font-style: normal; font-size: 12px; color: #8b8f97; }
.call-buttons { margin-top: auto; margin-bottom: 70px; display: flex; gap: 46px; align-items: center; }
.phone-call.live .call-buttons { gap: 24px; }
.phone-call.audio-open { padding-top: 40px; }
.phone-call.audio-open > .phone-avatar { display: none; }
.phone-call.audio-open .call-buttons { margin-bottom: 40px; }
.call-audio { width: calc(100% - 32px); margin-top: 12px; max-height: 300px; overflow-y: auto; background: rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 6px 0; }
.call-dev-head { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa0a8; padding: 8px 14px 4px; }
.call-dev { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; color: #fff; font-size: 12px; text-align: left; background: none; }
.call-dev span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-dev i { font-style: normal; color: #34c759; }
.call-dev.on { background: rgba(52, 199, 89, 0.14); }
.call-btn { width: 64px; height: 64px; border-radius: 50%; color: #fff; font-size: 24px; }
.call-btn.answer { background: #34c759; animation: phone-nudge 1s ease-in-out infinite; }
.call-btn.decline { background: #ff3b30; }
.call-btn.mute { background: #3a3c42; font-size: 12px; }
.call-btn.mute.on { background: #f4f5f7; color: #000; }
.phone-screen.on-dropped { padding-top: 0; background: #000; }
.phone-dropped { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8b8f97; }
.phone-dropped b { font-size: 46px; }
.phone-dropped span { font-size: 14px; color: #f4f5f7; }
.phone-dropped em { font-style: normal; font-size: 12px; }

/* Fire truck radio: the car radio's layout with the fire handheld's lime face, on a fire team with the car radio picked. */
.fire-car .radio {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 4%, rgba(255, 255, 255, .1) 45%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(180deg, #17191c 0, #202327 46px, #0b0d06 46px, #0b0d06 48px, #8fc414 48px, #b4e626 40%, #a9dc1f 85%, #8fc414 100%);
  box-shadow: inset 0 0 0 2px #0b0d06, inset 0 2px 0 3px #2b3012, 0 6px 14px rgba(0, 0, 0, .45);
}
/* Red badge on the finned top, like a fire engine light. */
.fire-car .radio::after { background: radial-gradient(ellipse at 50% 35%, #ff5a4a, #8f1a12 70%); box-shadow: 0 0 0 2px #0a0b0c, 0 0 10px rgba(255, 60, 40, .45); }
.fire-car .brand { color: #12160a; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.fire-car .brand::after { content: " FIRE"; color: #b3261e; text-shadow: none; }
.fire-car .lamps { color: #33410c; }
.fire-car .lamp.dot::before { background: #33410c; }
.fire-car .emer { background: radial-gradient(circle at 40% 35%, #ff8a3d, #e2560f); }
.fire-car .emer span, .fire-car .knob-wrap span { color: #12160a; }

/* ---------- radio: team faces ---------- */
/* Sheriff green and tan, Police blue, DOT orange: the handheld uses the body colors, the car radio its faceplate. */
.skin-sheriff { --body: #2f3b26; --body-hi: #475a38; --edge: #11160c; --key: #3a3226; --key-hi: #5a4c38; --accent: #6b7f3a; --accent-hi: #829a48; --bar: #6b7f3a; }
.skin-police { --body: #14284a; --body-hi: #22406f; --edge: #060d1a; --key: #1c2c48; --key-hi: #2c4470; }
.skin-dot { --body: #c75c0a; --body-hi: #ee7a1c; --edge: #4a2003; --key: #2a2420; --key-hi: #463b33; --accent: #c75c0a; --accent-hi: #e0731b; --bar: #c75c0a; }
.skin-sheriff .brand { color: #d8c08a; }
.skin-sheriff .brand::after { content: " SHERIFF"; color: #d8c08a; font-size: 7px; letter-spacing: 1px; }
.skin-police .brand::after { content: " POLICE"; color: #8fb6ff; font-size: 7px; letter-spacing: 1px; }
.skin-dot .brand { color: #1d1206; }
.skin-dot .brand::after { content: " DOT"; color: #fff3df; font-size: 7px; letter-spacing: 1px; }
.skin-dot .lamps { color: #2a1503; }
.skin-sheriff.car .radio { background: linear-gradient(180deg, #2b3524 0, #232b1d 46px, #c9b07a 47px, #b49a64 49px, #26301f 50px, #1b2216 100%); }
.skin-sheriff.car .radio::before { background: repeating-linear-gradient(90deg, #3c4a31 0 10px, #1b2216 10px 14px); }
.skin-police.car .radio { background: linear-gradient(180deg, #1b2c4a 0, #132341 46px, #3c7bd9 47px, #2f66b8 49px, #11203c 50px, #0b1528 100%); }
.skin-police.car .radio::before { background: repeating-linear-gradient(90deg, #233a62 0 10px, #0b1528 10px 14px); }
.skin-dot.car .radio { background: linear-gradient(180deg, #3a2a1c 0, #2b1f15 46px, #ff8a1f 47px, #e06d0a 50px, #c75c0a 51px, #a94b06 100%); }
.skin-dot.car .radio::before { background: repeating-linear-gradient(90deg, #4a3624 0 10px, #241a10 10px 14px); }
.skin-dot.car .brand, .skin-dot.car .knob-wrap span { color: #1d1206; }

/* Car radio: a dash line with postal, street and speed, and your car. */
.lcd .dash { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; padding: 2px 3px; border-radius: 2px; background: rgba(13, 36, 64, .08); color: var(--ink); white-space: nowrap; overflow: hidden; }
.lcd .dash b { font-size: 12px; font-weight: 800; }
.lcd .dash span { flex: 1; min-width: 0; font-size: 9px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.lcd .dash em { font-style: normal; font-size: 12px; font-weight: 800; }
.lcd .card .last.car-line { color: var(--ink); }
.car-swatch { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.3em; border-radius: 50%; vertical-align: -0.05em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.lcd .card .last.panic-line { color: #c0261b; font-weight: 800; animation: panic-blink 1s steps(1) infinite; }
@keyframes panic-blink { 50% { opacity: .45; } }
.low-power .lcd .card .last.panic-line { animation: none; }

/* Units: an in-game dot and department headings. */
.lcd .ig { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--ink-dim); vertical-align: middle; }
.lcd .ig.on { background: #12963a; box-shadow: none; }
.lcd .card.units .unit.dept { display: block; margin-top: 1px; font-size: 7.5px; letter-spacing: 1px; color: var(--accent); }

/* Typing on the radio screen (fine, medical record, tow ETA…). */
.lcd .lcd-form { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.lcd .lcd-input { width: 100%; padding: 3px 4px; border: 1px solid var(--ink-dim); border-radius: 2px; background: rgba(255, 255, 255, .6); color: var(--ink); font: inherit; font-size: 10px; -webkit-app-region: no-drag; }
.lcd .lcd-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.lcd .lcd-send { padding: 3px; border-radius: 2px; background: var(--ink); color: #e9f1fb; font: inherit; font-size: 9px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }

/* SWITCH RADIO with the PHONE button next to it. */
.switch-row { display: flex; gap: 6px; margin-top: 10px; }
.switch-row .switch-radio { flex: 1; margin-top: 0; }
.radio-phone {
  width: 54px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2d6fd0, #1c4f9c);
  box-shadow: 0 0 0 2px #0a0b0c, 0 2px 0 #0a0b0c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}
.radio-phone:active { transform: translateY(2px); box-shadow: 0 0 0 2px #0a0b0c; }
.car .switch-row { display: contents; }
.car .radio-phone { position: absolute; left: 22px; top: 228px; width: 38px; height: 18px; font-size: 7px; letter-spacing: .5px; }

/* ---------- phone: more apps ---------- */
.phone-screen.on-home .phone-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; margin-bottom: 106px; padding-bottom: 8px; scrollbar-width: none; }
.phone-screen.on-home .phone-grid::-webkit-scrollbar { width: 0; }
.phone-app .emo { font-size: 27px; line-height: 1; font-style: normal; font-weight: 400; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.app-mail i { background: linear-gradient(160deg, #4aa3ff, #1565c0); }
.app-calendar i { background: linear-gradient(160deg, #fff, #e6e6ea); }
.app-garage i { background: linear-gradient(160deg, #5f6772, #2b3038); }
.app-health i { background: linear-gradient(160deg, #fff, #ffe3e3); }
.app-biz i { background: linear-gradient(160deg, #ffcf3f, #e09b00); }
.app-food i { background: linear-gradient(160deg, #ff7a45, #d9480f); }
.app-houses i { background: linear-gradient(160deg, #63c96b, #2a8a33); }
.app-rentals i { background: linear-gradient(160deg, #ffd166, #f4a100); }
.app-crew i { background: linear-gradient(160deg, #3a1d1d, #120808); }
.app-mechanic i { background: linear-gradient(160deg, #8e9aa8, #4b5563); }
.app-casino i { background: linear-gradient(160deg, #b0124b, #5a0626); }
.app-bus i { background: linear-gradient(160deg, #ffe066, #f2b600); }
.app-meets i { background: linear-gradient(160deg, #2b2b2b, #000); }
.app-gallery i { background: linear-gradient(160deg, #ff9a9e, #a18cd1); }
.app-lost i { background: linear-gradient(160deg, #a47148, #6b4423); }
.app-fm i { background: linear-gradient(160deg, #e53935, #8e0000); }
.app-lawyers i { background: linear-gradient(160deg, #3d4f7c, #1b2541); }

.phone-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.phone-tag.red { background: #5a1210; color: #ff9b94; }
.phone-thread-tools { display: flex; align-items: center; gap: 4px; padding: 0 10px 6px; border-bottom: 1px solid #1a1c20; }
.phone-bill-acts { display: flex; gap: 4px; flex: none; }
.phone-row.missed, .phone-row.missed span { color: #ff453a; }
.phone-row.on { background: rgba(79, 163, 255, .12); }
.phone-link { background: none; color: #4fa3ff; font-size: inherit; padding: 0 2px; }
.phone-check-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c9ccd2; }
.phone-compose-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.phone-gallery-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.phone-gallery-strip .phone-thumb { flex: none; width: 64px; height: 64px; padding: 0; border-radius: 8px; overflow: hidden; background: #1b1c1f; }
.phone-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 10px; }
.phone-gallery .phone-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #1b1c1f; }
.phone-thumb .phone-photo { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.phone-thumb .phone-photo-x { position: absolute; top: 3px; right: 3px; }
.phone-msg .phone-photo { max-width: 180px; border-radius: 14px; margin-bottom: 3px; }
.phone-emergency { margin: 8px 10px; padding: 12px; border-radius: 14px; background: #7a0f0a; border: 1px solid #ff453a; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.phone-emergency b { font-size: 14px; color: #fff; }
.phone-emergency span { font-size: 12.5px; line-height: 1.4; color: #ffe1de; }
.phone-emergency em { font-style: normal; font-size: 10px; color: #ffb3ad; }
.phone-idcard { position: relative; }
.phone-idcard dl { grid-template-columns: auto 1fr; }
.phone-warrant { position: absolute; right: 14px; bottom: 26px; padding: 2px 8px; border: 3px solid #e0332b; border-radius: 4px; color: #e0332b; font-size: 16px; font-weight: 900; letter-spacing: 2px; transform: rotate(-14deg); opacity: .9; }
.phone-mail-head { display: flex; justify-content: space-between; gap: 8px; padding: 6px 14px; border-bottom: 1px solid #1a1c20; font-size: 12px; }
.phone-mail-head span { color: #8b8f97; font-size: 11px; }
.phone-mail-body { padding: 12px 14px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.phone-thread-row.unread b { color: #4fa3ff; }
.phone-record { margin: 4px 0 0; font-size: 12px; line-height: 1.4; white-space: pre-wrap; }
.phone-stars { display: flex; justify-content: center; gap: 6px; padding: 4px 0; }
.phone-star { background: none; font-size: 26px; color: #ffcc33; padding: 0 2px; }
.phone-star:hover ~ .phone-star { color: #5d6168; }
.phone-rank { display: inline-block; width: 18px; color: #ffcc33; }
.phone-on { color: #4cd964; font-weight: 700; }
.phone-online { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #4cd964; vertical-align: middle; }
.phone-qty { display: flex; flex-direction: row !important; align-items: center; gap: 6px; flex: none; }
.phone-qty b { min-width: 14px; text-align: center; }
.phone-reels { display: flex; justify-content: center; gap: 8px; padding: 8px 0; }
.phone-reels i { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; font-size: 30px; font-style: normal; box-shadow: inset 0 -4px 0 #d6d6dc; }
.phone-hand { display: flex; flex-direction: column; gap: 4px; padding: 4px 14px; font-size: 11px; color: #8b8f97; }
.phone-hand div { display: flex; gap: 4px; }
.phone-card { width: 34px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #fff; color: #111; font-size: 13px; font-weight: 700; font-style: normal; }
.phone-card.red { color: #d00; }
.phone-fm.live .phone-big-icon { animation: phone-nudge 1.2s ease-in-out infinite; }
.phone-fm.live b { color: #ff453a; }
.phone-deal .phone-reply { padding: 6px 0 0; border: 0; }
.phone-deal .phone-photo { max-width: 100%; margin-top: 4px; border-radius: 8px; }

/* Light look: Settings > Dark mode off (home screen, Internet and calls keep their own colors). */
.phone-light .phone-screen:not(.on-home):not(.on-internet):not(.on-call):not(.on-dropped) { background: #f2f2f7; color: #111; }
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-group,
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-deal,
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-note-row { background: #fff; color: #111; }
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-row,
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-thread-row,
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-note-row span { color: #111; border-color: #e5e5ea; }
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-input { background: #fff; color: #111; border-color: #d1d1d6; }
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-btn:not(.blue):not(.green):not(.red):not(.amber):not(.plain) { background: #e5e5ea; color: #111; }
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-msg:not(.mine) p { background: #e5e5ea; color: #111; }
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-tag { background: #e5e5ea; color: #333; }
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-reply,
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-thread-tools { border-color: #e5e5ea; }
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-card-big b,
.phone-light .phone-screen:not(.on-home):not(.on-internet) .phone-bar b { color: #111; }
.phone-scroll > .phone-actions.left { padding: 6px 14px 0; }
.phone-scroll > .phone-input { margin: 0 12px; width: calc(100% - 24px); }
.phone-scroll > .phone-reply { padding-bottom: 6px; border-top: 0; }
.x-compose-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px; }
.x-tool { padding: 4px 10px; border-radius: 14px; border: 1px solid var(--x-line); background: none; color: var(--x-blue); font-size: 11.5px; font-weight: 700; }
.x-tool.on { background: var(--x-blue); color: #fff; border-color: var(--x-blue); }
.x-gallery { padding: 4px 12px; }
.x-gallery span, .x-compose-photo span { color: var(--x-dim); font-size: 12px; }
.x-compose-photo { position: relative; margin: 4px 12px 4px 54px; max-width: 200px; }
.x-compose-photo .phone-photo { width: 100%; border-radius: 14px; }
.x-compose-photo .phone-photo-x { position: absolute; top: 4px; right: 4px; }
.x-prof-buttons { display: flex; gap: 6px; }
.x-follow.x-text { background: none; color: var(--x-text); border: 1px solid var(--x-line); }

/* Weather app, laid out like the iPhone Weather app */
.phone-screen.on-weather { padding: 0; }
.wx { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; background: linear-gradient(180deg, #3f7fd0 0%, #5b97dc 55%, #7aaee4 100%); overflow: hidden; }
.wx.night { background: linear-gradient(180deg, #0b1630 0%, #1c2c52 60%, #2b3d66 100%); }
.wx.w-rain, .wx.w-fog { background: linear-gradient(180deg, #4e5d70 0%, #6b7a8c 60%, #8592a2 100%); }
.wx.w-thunderstorm { background: linear-gradient(180deg, #24203a 0%, #3b3557 60%, #514a70 100%); }
.wx.night.w-rain, .wx.night.w-fog { background: linear-gradient(180deg, #1a222e 0%, #2c3644 100%); }
.wx-back { position: absolute; top: 30px; left: 8px; z-index: 2; color: #fff; background: rgba(0, 0, 0, 0.18); border-radius: 999px; width: 28px; height: 28px; }
.wx-scroll { flex: 1; overflow-y: auto; padding: 34px 12px 14px; scrollbar-width: none; }
.wx-scroll::-webkit-scrollbar { display: none; }
.wx-top { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 6px 0 14px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); }
.wx-top span { font-size: 22px; font-weight: 500; }
.wx-top b { font-size: 64px; font-weight: 200; line-height: 1; margin: 2px 0 0 14px; }
.wx-top b.wx-icon-big { font-size: 54px; margin: 8px 0; }
.wx-top em { font-style: normal; font-size: 15px; font-weight: 500; margin-top: 2px; }
.wx-top small { font-size: 14px; font-weight: 500; margin-top: 2px; }
.wx-card { background: rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; backdrop-filter: blur(6px); }
.wx-card p { margin: 0 0 8px; padding-bottom: 8px; font-size: 12px; line-height: 1.35; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.wx-card h4 { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.7; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.wx-hours { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.wx-hours::-webkit-scrollbar { display: none; }
.wx-hour { flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.wx-hour span { font-weight: 600; }
.wx-hour i { font-style: normal; font-size: 18px; }
.wx-hour b { font-size: 14px; font-weight: 500; }
.wx-day { display: grid; grid-template-columns: 44px 26px 32px 1fr 32px; align-items: center; gap: 6px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 14px; }
.wx-card h4 + .wx-day { border-top: 0; }
.wx-day b { font-weight: 500; }
.wx-day i { font-style: normal; font-size: 16px; text-align: center; }
.wx-day .wx-low { opacity: 0.6; text-align: right; }
.wx-day span:last-child { text-align: right; }
.wx-bar { position: relative; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.18); }
.wx-bar em { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #8fd3a8, #f3c74f, #f39a3c); }
.wx-dot { position: absolute; top: -2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(0, 0, 0, 0.25); }
.wx-alert { display: flex; flex-direction: column; gap: 3px; font-size: 12px; background: rgba(120, 20, 20, 0.45); }
.wx-alert em { font-style: normal; opacity: 0.8; font-size: 11px; }
.wx-note { text-align: center; font-size: 10.5px; opacity: 0.7; margin-top: 4px; }

/* Maps: zoom buttons, dragging, contacts */
.phone-map { touch-action: none; cursor: grab; }
.phone-map.dragging { cursor: grabbing; }
.map-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.map-zoom button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: rgba(28, 28, 30, 0.85); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.map-dot.friend { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #34c759; box-shadow: 0 0 0 2px #fff, 0 0 8px #34c759; z-index: 2; }
.map-dot.friend b { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); white-space: nowrap; font-size: 9.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.65); padding: 1px 5px; border-radius: 6px; }
.map-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex: 0 0 auto; }
.map-key.friend { background: #34c759; }
.map-key.off { background: #8e8e93; }
.phone-light .map-zoom button { background: rgba(255, 255, 255, 0.92); color: #111; }

/* Drawn icons for the newer apps */
.phone-app svg .cut { fill: none; stroke: rgba(0, 0, 0, 0.28); stroke-width: 1.6; stroke-linejoin: round; }
.phone-app svg .hole-ln { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 2; stroke-linecap: round; }
.app-calendar svg .cal-top { fill: #ff3b30; }
.app-calendar svg .cal-body { fill: #fff; stroke: #d6d6db; stroke-width: 0.6; }
.app-calendar svg .cal-num { fill: #1c1c1e; }
.app-health svg .red { fill: #e5383b; }
.app-meets svg .chk { fill: #fff; }
.app-meets svg .hole { fill: #111; }
:where(.phone-app) svg .hole { fill: rgba(0, 0, 0, 0.32); }

/* ===== V2.2: Photos and Casino icons, Casino, Photos, home widgets, smoother motion ===== */
.app-gallery i { background: #fff; }
.app-gallery svg { width: 36px; height: 36px; }
.app-gallery .petals ellipse { mix-blend-mode: multiply; opacity: 0.9; }
.app-casino i { background: radial-gradient(circle at 50% 40%, #1f8a4c, #0b4a26); }
.app-casino svg { width: 34px; height: 34px; fill: #e5383b; }
.app-casino svg .chip-ring { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 2.2 1.8; }
.app-casino svg .chip-dash { fill: none; stroke: #fff; stroke-width: 2.2; }
.app-casino svg .chip-seven { fill: #fff; }

/* Casino */
.cz { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; padding-top: 40px; background: radial-gradient(circle at 50% 0%, #2a1a3e, #0c0814 70%); }
.cz .phone-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 40px; scrollbar-width: none; }
.cz .phone-scroll::-webkit-scrollbar { display: none; }
.cz-bar { background: transparent; }
.cz-bar b { font-size: 17px; letter-spacing: 0.02em; background: linear-gradient(90deg, #ffd56b, #ff9f43); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.cz-stats div { background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 7px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cz-stats span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; }
.cz-stats b { font-size: 13px; font-weight: 600; }
.cz-tabs { display: flex; background: rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 2px; margin-bottom: 12px; }
.cz-tabs button { flex: 1; padding: 6px 0; border-radius: 8px; color: #fff; font-size: 12.5px; font-weight: 600; background: transparent; transition: background 0.2s; }
.cz-tabs button.on { background: rgba(255, 255, 255, 0.22); }
.cz-machine { position: relative; border-radius: 20px; padding: 16px 12px 12px; background: linear-gradient(180deg, #d9342b, #8e1610); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 8px 20px rgba(0, 0, 0, 0.45); text-align: center; }
.cz-lights { position: absolute; top: 5px; left: 18px; right: 18px; height: 5px; border-radius: 5px; background: repeating-linear-gradient(90deg, #ffe27a 0 6px, transparent 6px 12px); opacity: 0.9; animation: cz-blink 1.2s steps(2) infinite; }
@keyframes cz-blink { 50% { opacity: 0.35; } }
.cz-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 12px; background: #1b0b08; }
.cz-reels i { font-style: normal; font-size: 34px; line-height: 64px; border-radius: 8px; background: linear-gradient(180deg, #d8d8d8, #fff 30%, #fff 70%, #d8d8d8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35); }
.cz-win, .cz-lose { margin-top: 10px; font-size: 13px; font-weight: 700; text-align: center; }
.cz-win { color: #ffe27a; text-shadow: 0 0 10px rgba(255, 210, 80, 0.7); }
.cz-lose { opacity: 0.75; font-weight: 500; }
.cz-chips { display: flex; justify-content: center; gap: 7px; margin: 14px 0 10px; flex-wrap: wrap; }
.cz-chip { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 3px dashed rgba(255, 255, 255, 0.85); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); transition: transform 0.15s; }
.cz-chip b { font-size: 10.5px; font-weight: 800; }
.cz-chip.c0 { background: #6c757d; } .cz-chip.c1 { background: #e5383b; } .cz-chip.c2 { background: #2d6cdf; }
.cz-chip.c3 { background: #1f8a4c; } .cz-chip.c4 { background: #111; } .cz-chip.c5 { background: #8e44ad; }
.cz-chip.on { transform: translateY(-5px) scale(1.08); box-shadow: 0 0 0 2px #ffd56b, 0 6px 10px rgba(0, 0, 0, 0.5); }
.cz-spin { width: 100%; padding: 12px 0; border-radius: 14px; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: #2a1600; background: linear-gradient(180deg, #ffe08a, #f5a623); box-shadow: 0 4px 0 #a86a00; }
.cz-spin:active { transform: translateY(3px); box-shadow: 0 1px 0 #a86a00; }
.cz-spin:disabled { opacity: 0.6; }
.cz-pay { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; font-size: 10.5px; opacity: 0.6; }
.cz-felt { border-radius: 90px 90px 18px 18px; padding: 22px 12px 14px; background: radial-gradient(ellipse at 50% 30%, #1e8a4e, #0b4a26 75%); box-shadow: inset 0 0 0 4px #6b3f1d, inset 0 0 0 6px #a8743f, 0 8px 18px rgba(0, 0, 0, 0.45); }
.cz-side { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 12px; }
.cz-side span { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.85; }
.cz-cards { display: flex; justify-content: center; min-height: 58px; }
.cz-card { font-style: normal; width: 40px; height: 58px; margin-left: -10px; border-radius: 6px; background: #fff; color: #111; font-size: 14px; font-weight: 700; display: flex; align-items: flex-start; padding: 4px; box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.35); animation: cz-deal 0.25s ease-out; }
.cz-card:first-child { margin-left: 0; }
.cz-card.red { color: #d0021b; }
.cz-card.back { background: repeating-linear-gradient(45deg, #b3261e 0 4px, #8e1610 4px 8px); border: 2px solid #fff; }
@keyframes cz-deal { from { transform: translateY(-20px) rotate(-8deg); opacity: 0; } }
.cz-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.cz-move { padding: 12px 0; border-radius: 14px; font-weight: 800; font-size: 14px; color: #fff; background: #2d6cdf; }
.cz-move.stand { background: #e5383b; }
.cz-note { text-align: center; margin-top: 12px; opacity: 0.55; }

/* Photos */
.ph, .ph-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; color: #fff; }
.ph { padding-top: 40px; }
.ph-top { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 0 8px 6px; }
.ph-top b { font-size: 22px; font-weight: 700; }
.ph-top .phone-back { color: #0a84ff; }
.ph-add { font-size: 24px; line-height: 1; color: #0a84ff; background: none; }
.ph-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: 36px; }
.ph-scroll::-webkit-scrollbar { display: none; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ph-tile { aspect-ratio: 1; padding: 0; overflow: hidden; background: #1c1c1e; border-radius: 0; }
.ph-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.ph-tile:active img { transform: scale(0.94); }
.ph-count { text-align: center; padding: 12px 0; font-size: 12px; font-weight: 600; opacity: 0.6; }
.ph-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 60px 26px 0; }
.ph-empty-icon { width: 64px; height: 64px; border-radius: 16px; background: #fff; display: grid; place-items: center; margin-bottom: 8px; }
.ph-empty-icon svg { width: 44px; height: 44px; }
.ph-empty b { font-size: 18px; }
.ph-empty span { font-size: 12px; opacity: 0.6; line-height: 1.4; }
.ph-view { padding-top: 40px; animation: ph-zoom 0.22s ease-out; }
@keyframes ph-zoom { from { transform: scale(0.9); opacity: 0; } }
.ph-view-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 0 10px 6px; font-size: 12px; }
.ph-view-top .phone-back { color: #0a84ff; font-size: 14px; width: auto; }
.ph-view-top span { text-align: center; font-weight: 600; }
.ph-view-img { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ph-view-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 20px; }
.ph-nav.prev { left: 6px; } .ph-nav.next { right: 6px; }
.ph-view-bar { display: flex; justify-content: space-between; padding: 10px 28px 40px; }
.ph-view-bar button { background: none; color: #0a84ff; width: 30px; height: 30px; }
.ph-view-bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Home screen widgets */
.ph-widgets { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 54px 14px 0; }
.ph-widgets + .phone-grid { padding-top: 14px; }
.ph-widgets button { height: 104px; border-radius: 20px; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.ph-widgets button:active { transform: scale(0.95); }
.w-clock { background: rgba(40, 44, 54, 0.72); backdrop-filter: blur(14px); }
.w-clock b { font-size: 30px; font-weight: 300; line-height: 1.1; }
.w-clock span { margin-top: auto; font-size: 11px; font-weight: 700; color: #ff453a; text-transform: uppercase; letter-spacing: 0.04em; }
.w-clock em { font-style: normal; font-size: 13px; font-weight: 600; }
.w-weather { background: linear-gradient(180deg, #3f7fd0, #7aaee4); }
.w-weather.w-rain, .w-weather.w-fog { background: linear-gradient(180deg, #4e5d70, #8592a2); }
.w-weather.w-thunderstorm { background: linear-gradient(180deg, #24203a, #514a70); }
.w-weather span { font-size: 11px; font-weight: 600; }
.w-weather b { font-size: 30px; font-weight: 300; line-height: 1.1; }
.w-weather i { font-style: normal; font-size: 16px; margin-top: auto; }
.w-weather em { font-style: normal; font-size: 10.5px; font-weight: 600; }

/* Apps zoom up from the home screen and back down, like iOS. */
.phone-screen.app-in > * { animation: app-zoom-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.phone-screen.app-out > :not(.phone-wall) { animation: app-zoom-out 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes app-zoom-in { from { transform: scale(0.86); opacity: 0; border-radius: 30px; } }
@keyframes app-zoom-out { from { transform: scale(1.08); opacity: 0; } }
.phone-screen { transition: transform 0.12s ease-out; }
.phone-home i { transition: width 0.15s, opacity 0.15s; }
.phone-home:hover i { width: 120px; opacity: 1; }

/* The 4-day hourly row: day labels between days, and it scrolls with the mouse wheel or a drag. */
.wx-hours { cursor: grab; scroll-behavior: smooth; padding-bottom: 2px; }
.wx-hours.dragging { cursor: grabbing; scroll-behavior: auto; }
.wx-daymark { flex: 0 0 34px; opacity: 0.85; }
.wx-daymark span { font-size: 11px; text-transform: uppercase; color: #ffe27a; }
.wx-daymark i { font-size: 22px; opacity: 0.35; font-weight: 200; }
.wx-day[data-day]:not([data-day=""]) { cursor: pointer; }
.wx-day[data-day]:not([data-day=""]):active { background: rgba(255, 255, 255, 0.1); }
button.wx-day { width: 100%; color: inherit; background: none; text-align: left; border-radius: 0; }
.ph-top .phone-back, .ph-view-top .phone-back { background: none; border: 0; width: auto; height: auto; padding: 0; text-align: left; font-size: 22px; }
.ph-view-top .phone-back { font-size: 14px; }
.cz-bar .phone-back { background: none; border: 0; }
/* The widgets sit inside the app grid (spanning all 4 columns), so they scroll with the apps and never cover them. */
.phone-grid > .ph-widgets { grid-column: 1 / -1; padding: 0; margin: 26px 0 4px; }
.phone-grid > .ph-widgets button { height: 96px; min-width: 0; overflow: hidden; }

/* iOS notification banners: frosted glass, app icon, name, "now", message. */
.phone-banner {
  left: 14px; right: 14px; top: 50px;
  padding: 10px 12px; border-radius: 22px;
  flex-direction: row; align-items: center; gap: 10px;
  background: rgba(38, 38, 42, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  animation: nb-drop 0.42s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.phone-banner.nb-in { animation: nb-drop 0.42s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes nb-drop { from { transform: translateY(-70px) scale(0.96); opacity: 0; } }
.phone-banner .nb-icon { flex: 0 0 auto; display: block; }
.phone-banner .nb-icon > i { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.phone-banner .nb-icon svg { width: 21px; height: 21px; }
.phone-banner .nb-icon.app-note > i { background: linear-gradient(160deg, #ff5a4e, #d4251a); }
.phone-banner .nb-icon.app-internet > i { background: linear-gradient(160deg, #3b8beb, #17457d); }
.phone-banner .nb-icon .phone-logo { width: 28px; height: 28px; }
.phone-banner .nb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.phone-banner .nb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.phone-banner .nb-head b { font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-banner .nb-head em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.55); flex: 0 0 auto; }
.phone-banner .nb-body span { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* iPhone emergency alert: dimmed screen and a frosted alert box over every app. */
.ea-wrap { position: absolute; inset: 11px; z-index: 6; border-radius: 36px; display: flex; align-items: center; justify-content: center; padding: 0 22px; background: rgba(0, 0, 0, 0.45); -webkit-app-region: no-drag; animation: ea-fade 0.2s ease-out; }
@keyframes ea-fade { from { opacity: 0; } }
.ea-box { width: 100%; border-radius: 16px; overflow: hidden; background: rgba(44, 44, 48, 0.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: #fff; text-align: center; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); animation: ea-pop 0.28s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes ea-pop { from { transform: scale(1.15); opacity: 0; } }
.ea-top { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 14px 6px; }
.ea-top i svg { width: 30px; height: 30px; }
.ea-top b { font-size: 15px; font-weight: 700; }
.ea-top em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.ea-text { padding: 2px 16px 8px; font-size: 12.5px; line-height: 1.4; max-height: 220px; overflow-y: auto; }
.ea-text b { display: block; font-size: 12px; margin-bottom: 3px; color: rgba(255, 255, 255, 0.7); }
.ea-from { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); padding: 0 12px 12px; }
.ea-ok { display: block; width: 100%; padding: 11px 0; border-top: 0.5px solid rgba(255, 255, 255, 0.2); background: none; color: #0a84ff; font-size: 15px; font-weight: 600; }
.ea-ok:active { background: rgba(255, 255, 255, 0.08); }

/* Drawn line icons used instead of standard emojis (ui-icons.js). */
svg.ui-ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.phone-big-icon svg.ui-ico, .phone-dropped b svg.ui-ico, .wx-icon-big svg.ui-ico { stroke-width: 1.6; }
svg.ui-ico.wx-sun { stroke: #ffd60a; }
svg.ui-ico.wx-moon { stroke: #f4f1d0; }
svg.ui-ico.slot-cherry { stroke: #d62839; }
svg.ui-ico.slot-lemon { stroke: #d9a400; }
svg.ui-ico.slot-bell { stroke: #c98a00; }
svg.ui-ico.slot-star { stroke: #e0a100; fill: #ffd84d; }
.slot-seven { color: #d62839; font-weight: 900; font-family: Georgia, 'Times New Roman', serif; font-style: italic; line-height: 1; }
.phone-card-big .phone-big-icon { font-size: 40px; line-height: 1.1; color: #f2f2f7; }
.phone-light .phone-screen:not(.on-home) .phone-card-big .phone-big-icon { color: #1c1c1e; }
/* ===== V2.3 ===== */
/* Home: no big gap at the top, slightly smaller icons, so the widgets and every app fit without scrolling. */
.phone-screen.on-home .phone-pills { padding-top: 44px; min-height: 44px; }
.phone-screen.on-home .phone-pills:empty { min-height: 40px; padding-top: 40px; }
.phone-screen.on-home .phone-grid { padding: 0 12px 4px; gap: 9px 4px; margin-bottom: 104px; }
.phone-grid > .ph-widgets { margin: 0 0 2px; gap: 9px; }
.phone-grid > .ph-widgets button { height: 78px; border-radius: 18px; padding: 8px 10px; }
.phone-grid > .ph-widgets .w-clock b, .phone-grid > .ph-widgets .w-weather b { font-size: 24px; }
.phone-screen.on-home .phone-grid .phone-app i { width: 46px; height: 46px; border-radius: 12px; }
.phone-screen.on-home .phone-grid .phone-app svg { width: 28px; height: 28px; }
.phone-screen.on-home .phone-grid .phone-app span { font-size: 9.5px; }
.app-internet i { background: linear-gradient(160deg, #5ac8fa, #1d7cf2); }
.app-internet svg, .app-camera svg { width: 34px; height: 34px; }
.app-camera i { background: linear-gradient(160deg, #e5e5ea, #a1a1a6); }

/* Drawn icons in place of emoji: as big as the text around them. */
svg.ei { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; flex: 0 0 auto; }
.wx-hour svg.ei { width: 22px; height: 22px; }
.wx-day svg.ei { width: 20px; height: 20px; }
.wx-top .wx-icon-big svg.ei { width: 60px; height: 60px; }
.w-weather svg.ei { width: 18px; height: 18px; }
.phone-big-icon svg.ei, .phone-dropped b svg.ei { width: 44px; height: 44px; }
.cz-reels svg.ei { width: 42px; height: 42px; vertical-align: middle; }
.phone-pill svg.ei { width: 12px; height: 12px; }

/* Camera */
.cam { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; color: #fff; padding-top: 40px; }
.cam.flash .cam-view { animation: cam-flash 0.3s ease-out; }
@keyframes cam-flash { from { background: #fff; } }
.cam-top { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 0 8px 6px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #ffcc00; }
.cam-top .phone-back { background: none; border: 0; color: #fff; font-size: 22px; text-align: left; padding: 0; }
.cam-view { position: relative; flex: 1; margin: 0 0 8px; background: radial-gradient(circle at 50% 40%, #1f2a36, #05070a 75%); display: flex; align-items: flex-end; justify-content: center; }
.cam-grid { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent 33%, rgba(255,255,255,.18) 33%, rgba(255,255,255,.18) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(255,255,255,.18) 66%, rgba(255,255,255,.18) calc(66% + 1px), transparent calc(66% + 1px)),
  linear-gradient(180deg, transparent 33%, rgba(255,255,255,.18) 33%, rgba(255,255,255,.18) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(255,255,255,.18) 66%, rgba(255,255,255,.18) calc(66% + 1px), transparent calc(66% + 1px)); }
.cam-hint { position: relative; margin-bottom: 12px; font-size: 11px; padding: 4px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); }
.cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 26px 44px; }
.cam-thumb { width: 42px; height: 42px; border-radius: 8px; overflow: hidden; background: #1c1c1e; padding: 0; border: 1.5px solid rgba(255,255,255,.6); }
.cam-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cam-thumb .phone-photo-wait, .cam-thumb span { font-size: 0; }
.cam-shutter { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: none; padding: 3px; }
.cam-shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform 0.1s; }
.cam-shutter:active i { transform: scale(0.88); }
.cam-shutter:disabled { opacity: 0.5; }

/* Balance on the Dark Web and Shop */
.dw-balance { display: flex; justify-content: center; gap: 18px; padding: 7px 10px; margin: 0 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; color: #c7c7cc; }
.dw-balance b { color: #fff; font-weight: 700; margin-left: 4px; }
.dw-balance.dark { background: rgba(48, 209, 88, 0.1); color: #8fdca5; border: 1px solid rgba(48, 209, 88, 0.25); }
.dw-balance.dark b { color: #30d158; }

/* Casino Versus */
.cz-tabs.small { margin: 8px 0 0; }
.cz-tabs.small button { padding: 5px 0; font-size: 11.5px; }
.vs-felt { border-radius: 18px; padding: 14px 12px; text-align: center; }
.vs-title { font-size: 15px; font-weight: 800; }
.vs-sub { font-size: 11px; opacity: 0.8; margin: 2px 0 10px; }
.vs-felt .phone-input { width: 100%; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; border-radius: 10px; padding: 8px; }
.vs-felt select option { color: #000; }
.vs-list { display: flex; flex-direction: column; gap: 6px; }
.vs-row { background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 8px 10px; font-size: 11.5px; }
.vs-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.vs-act { display: flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.vs-act em { font-style: normal; opacity: 0.6; }
.cz-move.small { padding: 5px 10px; font-size: 11.5px; border-radius: 9px; }
.vs-won { color: #30d158; } .vs-lost { color: #ff453a; }
.vs-draws { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.vs-draws > span { font-size: 10px; opacity: 0.6; }
.vs-cards .cz-card { width: 26px; height: 36px; font-size: 11px; margin-left: 0; }
.vs-dice { display: flex; gap: 3px; }
.vs-dice i { font-style: normal; width: 20px; height: 20px; border-radius: 5px; background: #fff; color: #111; font-weight: 800; font-size: 11px; display: grid; place-items: center; }

/* Maps like Google Maps */
.gm { position: absolute; inset: 0; background: #1b2a1c; }
.gm .gm-map { position: absolute; inset: 0; width: auto; aspect-ratio: auto; margin: 0; border-radius: 0; }
.gm-search { position: absolute; left: 10px; right: 10px; top: 44px; z-index: 3; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 19px; background: rgba(28, 28, 30, 0.92); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); font-size: 13px; }
.gm-search .phone-back { background: none; border: 0; color: #fff; font-size: 20px; padding: 0 4px 0 0; }
.gm-search > span { flex: 1; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #e5e5ea; }
.gm-x { background: none; border: 0; color: #aeaeb2; font-size: 18px; }
.gm-buttons { position: absolute; right: 10px; top: 92px; z-index: 3; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }
.gm-buttons button { width: 36px; height: 36px; border: 0; background: rgba(28, 28, 30, 0.92); color: #fff; font-size: 20px; }
.gm-buttons button + button { border-top: 0.5px solid rgba(255, 255, 255, 0.15); }
.gm-locate { position: absolute; right: 10px; bottom: 178px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(28, 28, 30, 0.95); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); display: grid; place-items: center; }
.gm-locate svg { width: 20px; height: 20px; }
.gm-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 6px 12px 40px; border-radius: 20px 20px 0 0; background: rgba(28, 28, 30, 0.97); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45); }
.gm-handle { display: block; width: 36px; height: 4px; border-radius: 2px; background: #48484a; margin: 0 auto 8px; }
.gm-here { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.gm-here b { font-size: 15px; }
.gm-here span { font-size: 11.5px; color: #aeaeb2; }
.gm-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.gm-chips::-webkit-scrollbar { display: none; }
.gm-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 18px; background: #2c2c2e; color: #fff; border: 0; text-align: left; }
.gm-chip i { width: 26px; height: 26px; border-radius: 50%; background: #34c759; color: #fff; font-style: normal; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.gm-chip.off i { background: #636366; }
.gm-chip.add i { background: #1d7cf2; font-size: 16px; }
.gm-chip span { display: flex; flex-direction: column; font-size: 11.5px; font-weight: 600; }
.gm-chip small { font-size: 9.5px; font-weight: 400; color: #aeaeb2; }
.gm-none { font-size: 11px; color: #8e8e93; align-self: center; }
.gm-key { display: flex; gap: 12px; margin-top: 6px; font-size: 10px; color: #8e8e93; }
.gm-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.k-me { background: #1d7cf2; } .k-friend { background: #34c759; } .k-pin { background: #ff3b30; }
.phone-screen.on-maps { padding-top: 0; }

/* Drag the phone by its top bar */
.phone-status { cursor: grab; }
.phone-status.dragging { cursor: grabbing; }
.phone-grid > .ph-widgets .w-weather span { font-size: 9.5px; }
.phone-grid > .ph-widgets .w-weather em, .phone-grid > .ph-widgets .w-clock em { font-size: 10px; }
.phone-grid > .ph-widgets .w-clock span { font-size: 9.5px; }
.phone-grid > .ph-widgets .w-weather i { margin-top: 0; line-height: 1; }
.phone-grid > .ph-widgets b { line-height: 1.05; }

/* ----- Clearbet: the Casino app, styled like a crypto casino app ----- */
.cz2 { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 38px; color: #e8ecf8; background: #0d1020; font-size: 12px; }
.cz2-top { flex: none; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 6px; padding: 4px 10px 8px; border-bottom: 1px solid #1d2238; }
.cz2-back { background: none; color: #9aa3c7; font-size: 22px; padding: 0; }
.cz2-logo { display: flex; align-items: center; gap: 5px; }
.cz2-logo i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(150deg, #39e48e, #13a35d); display: grid; place-items: center; }
.cz2-logo i .cz-svg { width: 14px; height: 14px; fill: #fff; stroke: none; }
.cz2-logo b { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.cz2-logo b span { color: #39e48e; }
.cz2-wallet { display: flex; align-items: center; background: #171b30; border: 1px solid #252b48; border-radius: 9px; padding: 0 0 0 9px; height: 28px; color: #fff; overflow: hidden; }
.cz2-wallet b { font-size: 12px; font-weight: 700; padding-right: 8px; font-variant-numeric: tabular-nums; }
.cz2-wallet i { font-style: normal; width: 26px; height: 100%; display: grid; place-items: center; background: #26c26f; font-size: 16px; font-weight: 700; }
.cz2-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; scrollbar-width: none; }
.cz2-scroll::-webkit-scrollbar { display: none; }
.cz-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cz2-nav { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); background: #0a0d1a; border-top: 1px solid #1d2238; padding: 5px 4px 18px; }
.cz2-nav button { background: none; color: #6f789c; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 600; padding: 3px 0; }
.cz2-nav button.on { color: #39e48e; }
.cz2-promo { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 12px 12px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, #1b7a4c, #19a361 55%, #3fe091); margin-bottom: 12px; box-shadow: 0 6px 18px rgba(38, 194, 111, 0.25); }
.cz2-promo.race { background: linear-gradient(120deg, #2a2f8f, #4a52e0 60%, #7a83ff); box-shadow: 0 6px 18px rgba(74, 82, 224, 0.3); }
.cz2-promo div { display: flex; flex-direction: column; gap: 1px; }
.cz2-promo small { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.85; }
.cz2-promo b { font-size: 16px; font-weight: 800; }
.cz2-promo span { font-size: 10.5px; opacity: 0.9; }
.cz2-promo .cz-svg.big { width: 38px; height: 38px; stroke-width: 1.5; opacity: 0.9; }
.cz2-h { font-size: 12.5px; font-weight: 800; color: #fff; margin: 4px 2px 8px; }
.cz2-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 14px; }
.cz2-tile { aspect-ratio: 3 / 4; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; padding: 6px 2px 7px; color: #fff; position: relative; overflow: hidden; }
.cz2-tile i { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; }
.cz2-tile i .cz-svg { width: 20px; height: 20px; stroke-width: 2; }
.cz2-tile b { font-size: 10.5px; font-weight: 800; }
.cz2-tile small { font-size: 8px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.05em; }
.g-crash { background: linear-gradient(160deg, #ff7a45, #c2300f); }
.g-plinko { background: linear-gradient(160deg, #ff4fa3, #9b1a6b); }
.g-mines { background: linear-gradient(160deg, #3fd7ff, #1366c4); }
.g-dice { background: linear-gradient(160deg, #7c6bff, #3a24b8); }
.g-limbo { background: linear-gradient(160deg, #ffc93f, #d97a06); }
.g-bj { background: linear-gradient(160deg, #2fbf71, #0d6b3c); }
.g-slots { background: linear-gradient(160deg, #e45cff, #7417b5); }
.g-vs { background: linear-gradient(160deg, #5aa2ff, #2343a8); }
.cz2-table { background: #12162a; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.cz2-tr { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr 0.9fr; align-items: center; gap: 4px; padding: 7px 9px; border-top: 1px solid #1a1f36; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.cz2-tr.head { border-top: 0; color: #6f789c; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.cz2-tr span:nth-child(n+3) { text-align: right; }
.cz2-g { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.cz2-g i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; flex: none; }
.cz2-g .cz-svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.2; }
.cz2-who { color: #9aa3c7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz2 .up { color: #39e48e; }
.cz2 .down { color: #ff5a6a; }
.cz2-empty { text-align: center; color: #6f789c; padding: 18px 8px; background: #12162a; border-radius: 12px; margin-bottom: 12px; }
.cz2-foot { color: #59618a; font-size: 9.5px; text-align: center; line-height: 1.4; padding: 2px 8px; }
.cz2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.cz2-stats div { background: #12162a; border-radius: 11px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cz2-stats span { color: #6f789c; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.cz2-stats b { font-size: 13px; font-variant-numeric: tabular-nums; }
.cz2-race { border-radius: 14px; padding: 13px; margin-bottom: 12px; color: #fff; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(120deg, #2a2f8f, #4a52e0 60%, #7a83ff); }
.cz2-race small { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.85; }
.cz2-race b { font-size: 17px; font-weight: 800; }
.cz2-race span { font-size: 10.5px; opacity: 0.9; }
.cz2-board { background: #12162a; border-radius: 12px; overflow: hidden; }
.cz2-place { display: grid; grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid #1a1f36; }
.cz2-place:first-child { border-top: 0; }
.cz2-place.me { background: rgba(57, 228, 142, 0.08); }
.cz2-place span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz2-place b { font-variant-numeric: tabular-nums; }
.cz2-place em { grid-column: 2 / 4; font-style: normal; color: #6f789c; font-size: 9.5px; }
.cz2-medal { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 10.5px; background: #1d2238; color: #9aa3c7; }
.cz2-medal.m1 { background: linear-gradient(150deg, #ffe17a, #e3a312); color: #4a3200; }
.cz2-medal.m2 { background: linear-gradient(150deg, #eef1f7, #a9b2c4); color: #2f3646; }
.cz2-medal.m3 { background: linear-gradient(150deg, #f3b07c, #b86a2f); color: #3d1f06; }
.cz2-vip { border-radius: 14px; padding: 13px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; color: #fff; background: linear-gradient(130deg, #6b3f1d, #b06a32); }
.cz2-vip.lv1 { background: linear-gradient(130deg, #545b6e, #9aa3b8); }
.cz2-vip.lv2 { background: linear-gradient(130deg, #8a6407, #e0b02a); }
.cz2-vip.lv3 { background: linear-gradient(130deg, #2c6f83, #6cc6d9); }
.cz2-vip.lv4 { background: linear-gradient(130deg, #3346b8, #7fa1ff); }
.cz2-vip.lv5 { background: linear-gradient(130deg, #1b1426, #5b3f86); }
.cz2-vip small { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.85; }
.cz2-vip b { font-size: 19px; font-weight: 800; }
.cz2-vip span { font-size: 10.5px; opacity: 0.9; }
.cz2-bar { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.28); overflow: hidden; }
.cz2-bar em { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.cz2-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #12162a; border-radius: 12px; padding: 10px 11px; margin-bottom: 8px; }
.cz2-card div { display: flex; flex-direction: column; gap: 2px; }
.cz2-card b { font-size: 12.5px; }
.cz2-card span { color: #8790b4; font-size: 10px; }
.cz2-claim { background: #26c26f; color: #fff; font-weight: 800; font-size: 11px; border-radius: 9px; padding: 8px 11px; white-space: nowrap; }
.cz2-claim:disabled { background: #1d2238; color: #59618a; }
.cz2-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cz2-levels span { text-align: center; padding: 7px 4px; border-radius: 9px; background: #12162a; color: #8790b4; font-weight: 700; font-size: 10.5px; border: 1px solid transparent; }
.cz2-levels span.on { color: #fff; border-color: #39e48e; }
.cz2-gamehead { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; color: #fff; }
.cz2-gamehead i { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.18); display: grid; place-items: center; }
.cz2-gamehead b { font-size: 14px; font-weight: 800; }
.cz2-gamehead small { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.cz2-recent { display: flex; gap: 4px; overflow: hidden; margin-bottom: 8px; }
.cz2-recent span { flex: none; padding: 3px 7px; border-radius: 7px; background: #12162a; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cz2-stage { position: relative; background: #12162a; border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.cz2-big { font-size: 34px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #fff; }
.cz2-note { text-align: center; color: #8790b4; font-size: 10.5px; padding: 0 8px 10px; }
.cz2-stage.crash { height: 168px; }
.cz2-stage.crash svg { position: absolute; inset: 10px 0 0; width: 100%; height: calc(100% - 10px); }
.cz2-stage.crash .line { fill: none; stroke: #39e48e; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cz2-stage.crash .line.dead { stroke: #ff5a6a; }
.cz2-stage.crash .area { fill: rgba(57, 228, 142, 0.12); stroke: none; }
.cz2-stage.crash circle { fill: #fff; stroke: #39e48e; stroke-width: 2; }
.cz2-stage.crash circle.dead { fill: #ff5a6a; stroke: #ff5a6a; }
.cz2-stage.crash .cz2-big { position: absolute; top: 32px; left: 0; right: 0; }
.cz2-stage.crash .cz2-note { position: absolute; top: 76px; left: 0; right: 0; }
.cz2-stage.limbo { padding: 28px 0 6px; }
.cz2-stage.limbo .cz2-big { font-size: 42px; margin-bottom: 4px; }
.cz2-stage.dice { padding: 14px 12px 12px; }
.cz2-stage.dice .cz2-big { margin-bottom: 10px; }
.cz2-track { position: relative; height: 10px; border-radius: 5px; background: #ff5a6a; margin: 0 2px 6px; }
.cz2-track em { position: absolute; top: 0; bottom: 0; right: 0; left: 50%; background: #39e48e; border-radius: 0 5px 5px 0; }
.cz2-track.under { background: #39e48e; }
.cz2-track.under em { background: #ff5a6a; }
.cz2-track i { position: absolute; top: -7px; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: #fff; opacity: 0; box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); }
.cz2-track i.show { opacity: 1; }
.cz2-range { width: 100%; accent-color: #39e48e; margin: 0 0 8px; }
.cz2-dice-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.cz2-dice-row div { display: flex; flex-direction: column; align-items: center; gap: 1px; background: #0d1020; border-radius: 9px; padding: 5px; }
.cz2-dice-row span { color: #6f789c; font-size: 8.5px; font-weight: 700; text-transform: uppercase; }
.cz2-dice-row b { font-size: 12px; font-variant-numeric: tabular-nums; }
.cz2-flip { background: #1d2238; color: #fff; border-radius: 9px; padding: 8px 9px; font-size: 10.5px; font-weight: 700; }
.cz2-stage.mines { padding: 10px 10px 0; }
.cz2-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.cz2-tile-m { aspect-ratio: 1; border-radius: 9px; background: #262c4a; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35); display: grid; place-items: center; color: #fff; transition: transform 0.12s ease, background 0.15s ease; }
.cz2-tile-m:not(:disabled):active { transform: scale(0.92); }
.cz2-tile-m:not(:disabled):hover { background: #313863; }
.cz2-tile-m:disabled { cursor: default; }
.cz2-tile-m.gem { background: #0f2d22; color: #39e48e; box-shadow: none; }
.cz2-tile-m.bomb { background: #2d1218; color: #ff5a6a; box-shadow: none; opacity: 0.75; }
.cz2-tile-m.bomb.hit { background: #ff5a6a; color: #fff; opacity: 1; }
.cz2-tile-m .cz-svg { width: 20px; height: 20px; stroke-width: 2; }
.cz2-stage.plinko { padding: 8px 6px 8px; }
.cz2-pegs { display: block; width: 100%; height: auto; }
.cz2-pegs circle { fill: #c9d0ee; }
.cz2-pegs #czBall { fill: #ff4fa3; filter: drop-shadow(0 0 4px rgba(255, 79, 163, 0.8)); }
.cz2-buckets { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; padding: 0 2px; }
.cz2-buckets span { text-align: center; font-size: 7px; font-weight: 800; color: #1a0f00; padding: 4px 0; border-radius: 4px; transition: transform 0.15s ease; }
.cz2-buckets .b0 { background: #ffc93f; }
.cz2-buckets .b1 { background: #ffab3f; }
.cz2-buckets .b2 { background: #ff8a3f; }
.cz2-buckets .b3 { background: #ff5e3f; color: #fff; }
.cz2-buckets .b4 { background: #ff2f5b; color: #fff; }
.cz2-buckets span.hit { transform: translateY(3px) scale(1.12); box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
.cz2-field { margin-bottom: 9px; }
.cz2-field label { display: block; color: #8790b4; font-size: 10px; font-weight: 700; margin: 0 2px 4px; }
.cz2-field small { display: block; color: #59618a; font-size: 9.5px; margin: 4px 2px 0; }
.cz2-amount { display: flex; align-items: center; background: #171b30; border: 1px solid #252b48; border-radius: 10px; height: 36px; padding-left: 10px; overflow: hidden; }
.cz2-amount > span { color: #6f789c; font-weight: 700; padding-right: 4px; }
.cz2-amount input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cz2-amount button { height: 100%; padding: 0 9px; background: #1f2440; color: #c9d0ee; font-weight: 700; font-size: 11px; border-left: 1px solid #2a3052; }
.cz2-amount input + span { padding: 0 10px; }
.cz2-select { width: 100%; height: 36px; border-radius: 10px; background: #171b30; border: 1px solid #252b48; color: #fff; font-weight: 700; padding: 0 8px; }
.cz2-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: #171b30; border: 1px solid #252b48; border-radius: 10px; padding: 3px; gap: 3px; }
.cz2-seg button { background: none; color: #8790b4; font-weight: 700; font-size: 11px; border-radius: 7px; padding: 7px 0; }
.cz2-seg button.on { background: #262c4a; color: #fff; }
.cz2-bet { width: 100%; height: 42px; border-radius: 11px; background: linear-gradient(180deg, #3fe091, #22b465); color: #04210f; font-size: 14px; font-weight: 800; box-shadow: 0 4px 14px rgba(38, 194, 111, 0.3); margin-top: 2px; }
.cz2-bet.cash { background: linear-gradient(180deg, #ffd25a, #f0a51a); color: #3a2400; box-shadow: 0 4px 14px rgba(240, 165, 26, 0.3); }
.cz2-bet:disabled { opacity: 0.55; }
.cz2-classic .cz-felt { margin-bottom: 10px; }
.cz2-classic .cz-spin { width: 100%; height: 42px; border-radius: 11px; background: linear-gradient(180deg, #3fe091, #22b465); color: #04210f; font-weight: 800; box-shadow: none; }
.cz2 .phone-error { margin-bottom: 8px; }
.cz2-tile-m .cz-svg .fill { fill: currentColor; stroke: none; }
.app-radio.team-police i { background: linear-gradient(160deg, #3a7bd5, #12346e); }
.app-radio.team-sheriff i { background: linear-gradient(160deg, #a07a3c, #4b3412); }
.app-radio.team-dot i { background: linear-gradient(160deg, #ff9f2e, #b35a00); }
.app-radio.team-fire i { background: linear-gradient(160deg, #e5483b, #7d1209); }
.phone-pill.radio-back { background: rgba(58, 123, 213, 0.9); color: #fff; font-weight: 700; }
.phone-pill.radio-back.team-sheriff { background: rgba(160, 122, 60, 0.92); }
.phone-pill.radio-back.team-dot { background: rgba(230, 130, 20, 0.92); }
.phone-pill.radio-back.team-fire { background: rgba(212, 58, 45, 0.92); }
.app-casino i { background: linear-gradient(150deg, #39e48e, #0f8f4f); }
.app-casino svg .cb-drop { fill: #fff; }
.app-casino svg .cb-shine { fill: none; stroke: #13a35d; stroke-width: 1.6; stroke-linecap: round; }
.phone-banner .nb-icon.app-casino > i { background: linear-gradient(150deg, #39e48e, #0f8f4f); }
.cam-view .cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam-view .cam-grid, .cam-view .cam-hint { z-index: 1; }