/* Every faceplate uses its supplied, registered normal and pressed artwork. */
.phone { --normal-art: url("./assets/phone-cutout.webp"); --pressed-art: url("./assets/phone-pressed-keys.png"); }
.phone-image-previous { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 1; transition: opacity 220ms cubic-bezier(.2,0,0,1); }
.phone-image-previous[hidden] { display: none; }
.phone-image-previous.is-fading { opacity: 0; }
.phone-press-art { z-index: 2; background-image: var(--pressed-art); opacity: 0; transform: translateY(-.08%) scale(1.001); transition: opacity 120ms ease-out, transform 120ms cubic-bezier(.2,0,0,1); }
.phone-press-art-select { --press-mask: radial-gradient(ellipse 13% 3.2% at 49.8% 50.5%, #000 72%, transparent 100%); }
.phone-press-art-up { --press-mask: radial-gradient(ellipse 8.8% 3.8% at 49.8% 65%, #000 68%, transparent 100%); }
.phone-press-art-left { --press-mask: radial-gradient(ellipse 8.8% 4% at 32.4% 70.2%, #000 68%, transparent 100%); }
.phone-press-art-right { --press-mask: radial-gradient(ellipse 8.8% 4% at 67% 70.2%, #000 68%, transparent 100%); }
.phone-press-art-five { --press-mask: radial-gradient(ellipse 8.8% 3.8% at 49.8% 71.9%, #000 68%, transparent 100%); }
.phone-press-art-down { --press-mask: radial-gradient(ellipse 8.8% 3.8% at 49.8% 78.9%, #000 68%, transparent 100%); }
.phone-press-art-covers { --press-mask: radial-gradient(ellipse 8.8% 3.8% at 49.8% 85.9%, #000 68%, transparent 100%); }
.phone-press-art-c { --press-mask: radial-gradient(ellipse 8% 4.6% at 34.2% 54.2%, #000 66%, transparent 100%); }
.phone-press-art-turn-left { --press-mask: radial-gradient(ellipse 8.8% 4% at 33.5% 84.8%, #000 68%, transparent 100%); }
.phone-press-art-turn-right { --press-mask: radial-gradient(ellipse 8.8% 4% at 66.5% 84.8%, #000 68%, transparent 100%); }
.phone-press-art { -webkit-mask-image: var(--press-mask); mask-image: var(--press-mask); }
.phone-press-art:is(.phone-press-art-down, .phone-press-art-covers, .phone-press-art-c, .phone-press-art-turn-left, .phone-press-art-turn-right),
.phone[data-cover="ivory"] .phone-press-art-select { background-image: var(--normal-art); filter: brightness(.8); }
.phone:has(.key-select.pressed) .phone-press-art-select,
.phone:has(.key-up.pressed) .phone-press-art-up,
.phone:has(.key-left.pressed) .phone-press-art-left,
.phone:has(.key-right.pressed) .phone-press-art-right,
.phone:has(.key-five.pressed) .phone-press-art-five,
.phone:has(.key-down.pressed) .phone-press-art-down,
.phone:has(.key-covers.pressed) .phone-press-art-covers,
.phone:has(.key-c.pressed) .phone-press-art-c,
.phone:has(.key-turn-left.pressed) .phone-press-art-turn-left,
.phone:has(.key-turn-right.pressed) .phone-press-art-turn-right { opacity: 1; transform: translateY(.08%) scale(1); transition-duration: 70ms; }
.lcd-glass { z-index: 3; }
.phone-key, .phone-logo { z-index: 4; }
.phone-key.pressed::after, .phone-key:hover::after { opacity: 0 !important; }
/* Center targets on the photographed keys, including when their hit area grows. */
.phone-key { transform: translate(-50%, -50%) rotate(var(--key-angle, 0deg)); }
.key-select { left: 49.8%; top: 50.4%; width: 24%; height: 4.2%; }
.key-c { left: 34.2%; top: 54.2%; width: 11.5%; height: 7%; --key-angle: -28deg; }
.key-up { left: 49.8%; top: 65%; width: 14%; height: 5.2%; }
.key-left { left: 32.4%; top: 70.2%; width: 14%; height: 5.2%; --key-angle: 19deg; }
.key-five { left: 49.8%; top: 71.9%; width: 14%; height: 5.2%; }
.key-right { left: 67%; top: 70.2%; width: 14%; height: 5.2%; --key-angle: -19deg; }
.key-down { left: 49.8%; top: 78.9%; width: 14%; height: 5.2%; }
.key-covers { left: 49.8%; top: 85.9%; width: 14%; height: 5.2%; }
.key-turn-left { left: 33.5%; top: 84.8%; width: 14%; height: 5.8%; --key-angle: 17deg; }
.key-turn-right { left: 66.5%; top: 84.8%; width: 14%; height: 5.8%; --key-angle: -17deg; }
.phone-logo { left: 49.8%; top: 19.2%; width: 20%; height: 3.4%; transform: translate(-50%, -50%); }

html[data-theme] .cover-setting { display: grid; gap: 10px; color: var(--ui-muted); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
html[data-theme] #cover-settings-open {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--ui-line); border-radius: 10px;
  background: var(--ui-surface); color: var(--ui-ink);
  font: 600 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left; letter-spacing: 0; text-transform: none; cursor: pointer;
}
html[data-theme] #cover-settings-open:hover { border-color: var(--ui-accent); }
html[data-theme] #cover-settings-open:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

html[data-theme] .cover-dialog { border: 1px solid var(--ui-line); background: var(--ui-bg); color: var(--ui-ink); box-shadow: 0 30px 90px rgba(0,0,0,.42); }
html[data-theme] .cover-dialog::backdrop { background: rgba(0,0,0,.65); }
@media (min-width: 701px) {
  html[data-theme] .cover-dialog { position: fixed; inset: 0; width: min(620px, calc(100vw - 40px)); max-height: min(86dvh, 780px); margin: auto; padding: 0; border-radius: 20px; overflow-y: auto; }
}
html[data-theme] .cover-dialog-top {
  position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between;
  min-height: 66px; padding: 12px 20px 8px 26px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-line);
}
.cover-kicker { color: var(--ui-muted); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
html[data-theme] .cover-dialog-top button {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--ui-line);
  border-radius: 12px; background: var(--ui-surface); color: var(--ui-ink); font: 400 24px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer;
}
html[data-theme] .cover-dialog-top button:hover { border-color: var(--ui-accent); }
.cover-dialog-body { padding: 20px 26px; }
html[data-theme] .cover-dialog h2 { margin: 0; color: var(--ui-ink); font-size: clamp(28px, 5vw, 40px); font-weight: 650; letter-spacing: -.055em; line-height: 1.05; }
html[data-theme] #cover-dialog-description { max-width: 480px; margin: 10px 0 16px; color: var(--ui-muted); font-size: 14px; line-height: 1.5; }
.cover-progress { margin-bottom: 14px; }
.cover-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--ui-muted); font-size: 12px; }
.cover-progress-copy strong { color: var(--ui-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.cover-progress-track { height: 6px; overflow: hidden; border-radius: 99px; background: var(--ui-line); }
.cover-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ui-accent); transition: width 380ms cubic-bezier(.2,0,0,1); }
.cover-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-theme] .cover-card {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 96px;
  padding: 7px 13px 7px 5px; border: 1px solid var(--ui-line); border-radius: 14px;
  background: var(--ui-surface); color: var(--ui-ink); font-family: inherit; text-align: left; cursor: pointer;
  transition: transform 180ms cubic-bezier(.2,0,0,1), border-color 180ms ease, background-color 180ms ease;
}
html[data-theme] .cover-card:hover { transform: translateY(-2px); border-color: var(--ui-accent); }
html[data-theme] .cover-card:active { transform: scale(.96); }
html[data-theme] .cover-card:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
html[data-theme] .cover-card[aria-pressed="true"] { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-surface)); }
.cover-preview { position: relative; display: block; flex: 0 0 58px; width: 58px; height: 82px; overflow: hidden; }
.cover-preview img { position: absolute; width: 100%; height: 100%; object-fit: contain; }

.cover-card-copy { display: grid; gap: 5px; min-width: 0; padding-right: 13px; }
.cover-card-copy strong { color: var(--ui-ink); font-size: 14px; font-weight: 700; line-height: 1.15; }
.cover-card-copy small { color: var(--ui-muted); font-size: 11px; line-height: 1.35; }
.cover-card-copy em { color: var(--ui-accent); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.2; }
.cover-card[data-locked="true"] .cover-preview { filter: saturate(.55) brightness(.8); }
.cover-card[data-locked="true"] .cover-card-copy em { color: var(--ui-muted); }
.cover-card-indicator { position: absolute; top: 12px; right: 12px; color: var(--ui-accent); font-size: 15px; }
.cover-card[data-locked="true"] .cover-card-indicator { color: var(--ui-muted); }
.cover-dialog-footnote { margin: 14px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 1.4; }
.cover-card.needs-points { animation: cover-nudge 260ms cubic-bezier(.2,0,0,1); }
@keyframes cover-nudge { 35% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }
.cover-dialog-footnote strong { color: var(--ui-ink); }
html[data-theme] .mobile-new-cover {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px;
  margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--ui-accent); border-radius: 12px;
  background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-bg)); color: var(--ui-ink);
  font: 700 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer;
}
.mobile-new-cover[hidden] { display: none !important; }
@media (max-width: 700px) {
  html[data-theme] .cover-dialog-top { padding: 18px 16px 0 24px; border-bottom: 0; }
  .cover-dialog-body { padding: 12px 18px max(24px, env(safe-area-inset-bottom)); }
  .cover-list { grid-template-columns: 1fr; gap: 8px; }
  html[data-theme] .cover-card { min-height: 104px; padding-block: 7px; }
  .cover-preview { flex-basis: 66px; width: 66px; height: 90px; }
  .cover-dialog-footnote { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-image-previous, .phone-press-art, .cover-progress-track span, html[data-theme] .cover-card { transition: none; animation: none; }
}

.cover-fitting { margin: 12px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 1.45; }
.cover-fitting[hidden] { display: none; }
.cover-card[aria-busy="true"] .cover-card-indicator { opacity: .4; }
html[data-theme] .cover-dialog h2 { text-wrap: balance; }
.cover-card-copy small { text-wrap: pretty; }