/* The transport is shared; handset selection only changes its shell. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.handset-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  width: min(100%, 320px);
  border: 0;
  padding: 0;
  margin: 0;
}
.handset-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.handset-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.handset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 3px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #657057;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.handset-card > span:not(.mini-phone) {
  font-size: 10px;
  font-weight: 600;
}
.handset-card small {
  font-size: 8px;
  color: #858c79;
  white-space: nowrap;
}
.handset-option:hover .handset-card {
  background: #e9ecdf;
}
.handset-option input:checked + .handset-card {
  border-color: #bdc7ad;
  background: #e5eadb;
}
.handset-option input:focus-visible + .handset-card {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.handset-caption {
  font-size: 9px;
  color: #919780;
  margin: 12px 0 5px;
  text-align: center;
}
.mini-phone {
  display: block;
  position: relative;
  width: 15px;
  height: 29px;
  margin-bottom: 3px;
  background: #4b5864;
  border: 1px solid #33434f;
  border-radius: 4px 4px 6px 6px;
  box-shadow:
    inset 1px 1px 0 #d2dcc14d,
    1px 2px 2px #34402920;
}
.mini-phone:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 2px;
  right: 2px;
  height: 10px;
  border: 1px solid #909d89;
  background: #b7c994;
  border-radius: 1px;
}
.mini-phone:after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 18px;
  height: 5px;
  background: repeating-linear-gradient(
    to bottom,
    #d3d9c5 0 1px,
    transparent 1px 2px
  );
}
.mini-pocket {
  width: 14px;
  background: #bfc8b8;
  border-color: #899881;
  border-radius: 5px;
}
.mini-pocket:before {
  border: 2px solid #697663;
}
.mini-pocket:after {
  background: repeating-linear-gradient(
    to bottom,
    #737f68 0 1px,
    transparent 1px 2px
  );
}
.mini-flip {
  background: linear-gradient(#353c3d 0 46%, #a5b1b0 46% 54%, #d1d8d5 54%);
  border-color: #8e9a97;
  border-radius: 3px;
}
.mini-flip:before {
  top: 3px;
  height: 8px;
  background: #9cbfc0;
}
.mini-flip:after {
  top: 20px;
  height: 5px;
  background: repeating-linear-gradient(
    to bottom,
    #788e97 0 1px,
    transparent 1px 2px
  );
}
.mini-walkman {
  background: #edece0;
  border-color: #d17b44;
  border-width: 1px 2px;
  border-radius: 3px;
}
.mini-walkman:before {
  left: 1px;
  right: 1px;
  border-color: #686e64;
  background: #b5c49c;
}
.mini-walkman:after {
  background: repeating-linear-gradient(
    to bottom,
    #d88648 0 1px,
    transparent 1px 2px
  );
}
.phone-hinge {
  display: none;
}

/* Nokia 1100: compact casing and a connected rubber keypad. */
.phone[data-handset='pocket'] {
  width: 244px;
  height: 526px;
  padding: 18px 14px 20px;
  background: linear-gradient(
    100deg,
    #aab4a6,
    #d5dacd 12%,
    #c7cdbf 52%,
    #abb8a5 91%,
    #82917d
  );
  border-color: #758370;
  border-radius: 38px 38px 53px 53px;
  box-shadow:
    inset 2px 2px 3px #f5f7e8bd,
    inset -3px -3px 4px #43573f80,
    0 5px 0 #63755c,
    8px 21px 24px -12px #23301d55,
    18px 35px 38px -20px #1825213d;
}
.phone[data-handset='pocket']:before {
  border-color: #ecf0de66;
  border-radius: 32px 32px 47px 47px;
  inset: 6px;
}
.phone[data-handset='pocket']:after {
  top: 106px;
  height: 167px;
  width: 5px;
  left: -4px;
  background: repeating-linear-gradient(#697d64 0 4px, #9cae94 4px 8px);
  box-shadow: none;
  border-radius: 3px;
}
.phone[data-handset='pocket'] .phone-top {
  height: 36px;
  gap: 10px;
}
.phone[data-handset='pocket'] .phone-brand {
  color: #4e6149;
  text-shadow: 0 1px #f1f6df;
  font-size: 13px;
}
.phone[data-handset='pocket'] .speaker i {
  background: #606d59;
  box-shadow:
    inset 0 1px 1px #283823,
    0 1px #f7fde8;
}
.phone[data-handset='pocket'] .faceplate {
  height: 287px;
  padding: 10px 7px 0;
  border-radius: 16px 16px 21px 21px;
  background: linear-gradient(110deg, #dfe4d5, #b6c3ab);
  border-color: #a5b497;
}
.phone[data-handset='pocket'] .screen-rim {
  padding: 7px 5px;
  background: #3c4b35;
  border-radius: 5px;
  box-shadow:
    inset 1px 1px 3px #182710,
    0 1px #f0f8dd;
}
.phone[data-handset='pocket'] .lcd {
  height: 182px;
  border-radius: 2px;
  padding-left: 6px;
  padding-right: 6px;
}
.phone[data-handset='pocket'] .lcd-main {
  height: 129px;
}
.phone[data-handset='pocket'] .pixel-art {
  height: 31px;
}
.phone[data-handset='pocket'] .lcd-title {
  font-size: 22px;
}
.phone[data-handset='pocket'] .soft-buttons {
  padding: 7px 2px 0;
}
.phone[data-handset='pocket'] .soft-buttons button {
  border-radius: 6px;
  transform: none;
  width: 43px;
  height: 17px;
  background: #e4e8d8;
}
.phone[data-handset='pocket'] .phone-navigation {
  bottom: 3px;
  left: 8px;
  right: 8px;
  height: 62px;
}
.phone[data-handset='pocket'] .phone-skip {
  width: 40px;
  height: 25px;
  transform: none;
  border-radius: 6px;
  background: linear-gradient(#f4f4e5, #c9d1b9);
}
.phone[data-handset='pocket'] .dpad {
  width: 62px;
  height: 57px;
  border-radius: 10px;
  background: linear-gradient(#e3e9d2, #c0ceb0);
}
.phone[data-handset='pocket'] .dpad-play {
  width: 42px;
  height: 29px;
  top: 13px;
  left: 9px;
  border-radius: 6px;
}
.phone[data-handset='pocket'] .dpad-up,
.phone[data-handset='pocket'] .dpad-down {
  left: 9px;
}
.phone[data-handset='pocket'] .keypad {
  margin: 11px 4px 0;
  padding: 7px;
  gap: 5px 4px;
  border-radius: 17px 17px 26px 26px;
  background: #819172;
  box-shadow:
    inset 0 1px 3px #40563488,
    0 1px #ecf3d7;
}
.phone[data-handset='pocket'] .keypad button {
  height: 29px;
  transform: none;
  border-radius: 6px;
  color: #4a5a3e;
  background: linear-gradient(#e9ecda, #ccd4ba);
  border-color: #a7b591;
  box-shadow:
    0 1px 1px #42513280,
    inset 0 1px #fffdf3;
}
.phone[data-handset='pocket'] .keypad button b {
  font-size: 17px;
}
.phone[data-handset='pocket'] .phone-bottom {
  color: #4c6543;
}

/* Motorola RAZR V3: separate clamshell halves, hinge, and etched metal keys. */
.phone[data-handset='flip'] {
  width: 250px;
  height: 574px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.phone[data-handset='flip']:before {
  inset: 0 0 auto;
  height: 295px;
  border: 6px solid #aeb7b5;
  border-top-color: #e0e5e0;
  border-left-color: #d6ddd6;
  border-radius: 26px 26px 18px 18px;
  background: linear-gradient(
    105deg,
    #282f32,
    #464b4a 15%,
    #242b2c 52%,
    #151c20
  );
  box-shadow:
    inset 0 0 0 2px #151d20,
    0 1px 0 #4c5c59,
    5px 10px 18px -7px #17241f55;
  z-index: -1;
}
.phone[data-handset='flip']:after {
  inset: 309px 0 0;
  width: auto;
  height: auto;
  border: 5px solid #485151;
  border-top-color: #a5b1ac;
  border-left-color: #b8c2bb;
  border-radius: 13px 13px 28px 28px;
  background: linear-gradient(
    112deg,
    #c7cfcc,
    #e9eeea 13%,
    #c6cfcd 53%,
    #aab7b5
  );
  box-shadow:
    inset 0 0 0 1px #e4ebe6,
    0 4px 0 #4e5c59,
    8px 21px 24px -12px #23301d55,
    18px 35px 38px -20px #1825213d;
}
.phone[data-handset='flip'] .phone-top {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 36px;
  gap: 10px;
}
.phone[data-handset='flip'] .speaker {
  gap: 2px;
  width: 61px;
}
.phone[data-handset='flip'] .speaker i {
  width: 10px;
  height: 3px;
  background: #101c1c;
  box-shadow: 0 1px #6a777065;
}
.phone[data-handset='flip'] .phone-brand {
  font-size: 10px;
  letter-spacing: 2px;
  color: #b9c7bf;
}
.phone[data-handset='flip'] .faceplate {
  display: contents;
}
.phone[data-handset='flip'] .screen-rim {
  position: absolute;
  top: 66px;
  left: 17px;
  right: 17px;
  padding: 7px;
  background: #080f12;
  border: 1px solid #626f6a;
  border-radius: 4px;
  box-shadow:
    0 0 0 2px #142124,
    0 2px 1px #626e66;
}
.phone[data-handset='flip'] .lcd {
  border-radius: 0;
  height: 195px;
}
.phone[data-handset='flip'] .lcd-main {
  height: 142px;
}
.phone[data-handset='flip'] .phone-hinge {
  display: block;
  position: absolute;
  top: 294px;
  left: -2px;
  right: -2px;
  height: 21px;
  border: 1px solid #889790;
  border-radius: 6px;
  background: linear-gradient(
    #6e807a,
    #dbe5df 24%,
    #f8fff9 35%,
    #a9b8b0 58%,
    #5e746b 85%,
    #9dad9f
  );
  box-shadow: 0 2px 2px #23382c77;
}
.phone[data-handset='flip'] .phone-hinge:before,
.phone[data-handset='flip'] .phone-hinge:after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 29px;
  border: 1px solid #85998e;
  border-radius: 4px;
  background: linear-gradient(#96aaa0, #e2f1e6 35%, #90a69b 70%, #5d776c);
}
.phone[data-handset='flip'] .phone-hinge:before {
  left: 8px;
}
.phone[data-handset='flip'] .phone-hinge:after {
  right: 8px;
}
.phone[data-handset='flip'] .phone-hinge span {
  display: block;
  width: 40px;
  height: 8px;
  margin: 6px auto;
  border: 1px solid #6d857955;
  border-radius: 5px;
}
.phone[data-handset='flip'] .soft-buttons {
  position: absolute;
  top: 330px;
  left: 18px;
  right: 18px;
  padding: 0;
}
.phone[data-handset='flip'] .soft-buttons button {
  transform: none;
  width: 48px;
  height: 22px;
  border: 0;
  border-bottom: 1px solid #718986;
  background: #e4eee930;
  border-radius: 2px;
  box-shadow: 0 1px #fafff8;
}
.phone[data-handset='flip'] .soft-buttons span {
  background: #698990;
}
.phone[data-handset='flip'] .phone-navigation {
  top: 353px;
  bottom: auto;
  left: 21px;
  right: 21px;
  height: 66px;
}
.phone[data-handset='flip'] .phone-skip {
  transform: none;
  height: 42px;
  width: 43px;
  color: #5f8490;
  border-radius: 5px;
  border: 0;
  border-bottom: 1px solid #849893;
  background: transparent;
  box-shadow: 0 1px #eef8ec;
}
.phone[data-handset='flip'] .dpad {
  width: 69px;
  height: 65px;
  border-radius: 50%;
  border-color: #7c9390;
  background: linear-gradient(
    135deg,
    #f9fff8,
    #99aba4 37%,
    #e8f2e8 65%,
    #8b9d98
  );
  box-shadow:
    0 1px 2px #435e5280,
    inset 0 1px #ffffff;
}
.phone[data-handset='flip'] .dpad-play {
  border-radius: 50%;
  width: 39px;
  height: 35px;
  top: 14px;
  left: 14px;
  background: linear-gradient(#c0d1c9, #e4f2e6);
  color: #658389;
  border-color: #819892;
}
.phone[data-handset='flip'] .dpad-up,
.phone[data-handset='flip'] .dpad-down {
  color: #4d7380;
}
.phone[data-handset='flip'] .keypad {
  position: absolute;
  top: 430px;
  left: 16px;
  right: 16px;
  padding: 0;
  gap: 0;
  border: 1px solid #9bafaa;
  border-radius: 7px 7px 17px 17px;
  overflow: hidden;
  box-shadow: inset 0 1px #fafff3;
}
.phone[data-handset='flip'] .keypad button {
  transform: none;
  height: 31px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #8caaa7;
  border-right: 1px solid #9db4af;
  box-shadow: inset 0 -1px #f2fbefb3;
  color: #56808d;
  text-shadow: 0 1px #fafff4;
}
.phone[data-handset='flip'] .keypad button:nth-child(3n) {
  border-right: 0;
}
.phone[data-handset='flip'] .keypad button:nth-last-child(-n + 3) {
  border-bottom: 0;
  box-shadow: none;
}
.phone[data-handset='flip'] .keypad button b {
  font-size: 17px;
}
.phone[data-handset='flip'] .keypad button span {
  font-size: 8px;
}
.phone[data-handset='flip'] .phone-bottom {
  color: #5c7469;
  bottom: 3px;
}

/* Sony Ericsson W800i: warm white face, orange frame, and music controls. */
.phone[data-handset='walkman'] {
  width: 252px;
  height: 550px;
  padding: 18px 12px 23px;
  border: 5px solid #d4773c;
  border-top-color: #f7b272;
  border-left-color: #f49b5c;
  border-radius: 25px 25px 34px 34px;
  background: linear-gradient(
    102deg,
    #d8dbd0,
    #fffdf0 15%,
    #eceee1 65%,
    #cbd1c0
  );
  box-shadow:
    inset 0 0 0 2px #f8f6e7,
    0 4px 0 #9f502b,
    8px 21px 24px -12px #23301d55,
    18px 35px 38px -20px #1825213d;
}
.phone[data-handset='walkman']:before {
  inset: 4px;
  border-color: #a0aa9640;
  border-bottom-color: #afba9e;
  border-radius: 17px 17px 24px 24px;
}
.phone[data-handset='walkman']:after {
  left: -8px;
  top: 107px;
  width: 5px;
  height: 37px;
  background: linear-gradient(90deg, #d37132, #ffa365);
  box-shadow: 0 113px 0 #dc803c;
  border-radius: 3px;
}
.phone[data-handset='walkman'] .phone-top {
  height: 39px;
  gap: 10px;
}
.phone[data-handset='walkman'] .phone-brand {
  font-size: 11px;
  letter-spacing: 1.1px;
  color: #707968;
  text-shadow: 0 1px #fffef3;
}
.phone[data-handset='walkman'] .speaker i {
  background: #848f76;
  box-shadow: inset 0 1px 1px #32402c;
}
.phone[data-handset='walkman'] .faceplate {
  margin-top: 6px;
  height: 297px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.phone[data-handset='walkman'] .screen-rim {
  padding: 8px 7px;
  background: linear-gradient(115deg, #3e493a, #232e21);
  border-radius: 6px;
  box-shadow:
    inset 1px 1px 2px #0c1908,
    0 1px #faf9e8;
}
.phone[data-handset='walkman'] .lcd {
  border-radius: 1px;
}
.phone[data-handset='walkman'] .soft-buttons {
  padding: 9px 1px 0;
}
.phone[data-handset='walkman'] .soft-buttons button {
  transform: none;
  width: 48px;
  height: 18px;
  border-radius: 5px;
  border-color: #b2b9a4;
  background: linear-gradient(#fffcee, #d7ddc9);
}
.phone[data-handset='walkman'] .soft-buttons span {
  background: #bc713e;
}
.phone[data-handset='walkman'] .phone-navigation {
  left: 7px;
  right: 7px;
  bottom: 0;
  height: 62px;
}
.phone[data-handset='walkman'] .phone-skip {
  transform: none;
  border-radius: 6px;
  width: 37px;
  height: 32px;
  color: #c6763a;
  border-color: #b9bda8;
  background: linear-gradient(#fffbed, #d3d9c5);
}
.phone[data-handset='walkman'] .dpad {
  width: 65px;
  height: 61px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffbf76, #e38a40 44%, #bc5f23);
  border-color: #b8672b;
  box-shadow:
    0 2px 2px #56634677,
    inset 0 1px #ffe0ac;
}
.phone[data-handset='walkman'] .dpad-play {
  width: 37px;
  height: 33px;
  left: 13px;
  top: 13px;
  border-radius: 50%;
  background: linear-gradient(#fffaf0, #e7e7d6);
  border-color: #9e713e;
  color: #ce772f;
}
.phone[data-handset='walkman'] .dpad-up,
.phone[data-handset='walkman'] .dpad-down {
  left: 11px;
  color: #874513;
}
.phone[data-handset='walkman'] .keypad {
  padding: 13px 3px 0;
  gap: 5px 5px;
}
.phone[data-handset='walkman'] .keypad button {
  transform: none;
  height: 31px;
  border-radius: 6px;
  border-color: #bbc2ae;
  background: linear-gradient(#fffef2, #e0e4d2);
  box-shadow:
    0 1px 2px #57644966,
    inset 0 1px white;
  color: #727b62;
}
.phone[data-handset='walkman'] .keypad button b {
  font-size: 17px;
}
.phone[data-handset='walkman'] .keypad button span {
  color: #c08346;
}
.phone[data-handset='walkman'] .phone-bottom {
  font-size: 0;
  bottom: 8px;
  text-shadow: none;
}
.phone[data-handset='walkman'] .phone-bottom:after {
  content: 'W A L K M A N';
  font: 7px var(--sans);
  color: #c77135;
  letter-spacing: 1px;
}

.phone[data-handset]:not([data-handset='classic']) .keypad button:active {
  background: #bac7ad;
  box-shadow: inset 0 1px 3px #30402055;
}
.phone[data-handset] .lcd-main.show-lyrics .lcd-title {
  font-size: 17px;
}

@media (max-width: 850px) and (min-width: 701px) {
  .handset-picker {
    gap: 3px;
  }
  .handset-card small {
    font-size: 7px;
  }
}
@media (max-width: 700px) {
  .handset-picker {
    width: min(100%, 310px);
    margin-top: 1px;
  }
  .handset-caption {
    margin-bottom: 7px;
  }
}
@media (max-width: 360px) {
  .handset-picker {
    gap: 4px;
  }
  .handset-card small {
    font-size: 7px;
  }
}