/* Detaillierter Nachbau eines Nokia 6230i (Candybar, 2005) in reinem CSS.
   Merkmale des Originals, die hier abgebildet sind:
     - Proportionen 103 x 44 mm (Verhältnis ~2,34:1), 20 mm dicke Anmutung
     - gebürstetes Silbergehäuse mit dunklen Seitenschienen und Chromkante
     - Hörergrill oben, Wortmarke über dem Display
     - quadratisches Display (208x208) auf schwarzer Blende, sichtbar versenkt
     - zwei nach außen angeschnittene Softkeys neben dem eckigen Navi-Pad
     - darunter grüne Anruftaste, mittige C-Taste, rote Endtaste
     - 3x4 Ziffernblock in hellem Silber mit dunkler Beschriftung, leicht gewölbt
   Alles gezeichnet, kein Produktfoto. Der Schriftzug ist bewusst NUMBER 1. */

.nokia {
  --si-hell:  #f4f6f7;
  --si-mid:   #d2d7db;
  --si-dun:   #a7aeb5;
  --si-kante: #6f767d;
  --schiene:  #4a5057;
  --taste-h:  #f1f3f5;
  --taste-d:  #c6ccd1;
  --taste-tx: #202428;
  --taste-tx2:#5b636b;
  --navi1:    #454b52;
  --navi2:    #262a2f;

  width: 100%;
  max-width: 286px;
  margin: 0 auto;
  padding: 10px 9px 13px;
  border-radius: 26px / 34px;
  background:
    /* feine Bürstung */
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,.035) 1px 3px),
    /* Glanzkante oben */
    linear-gradient(180deg, rgba(255,255,255,.7) 0, rgba(255,255,255,0) 9%),
    /* Grundverlauf quer */
    linear-gradient(100deg, var(--si-hell) 0%, var(--si-mid) 34%, var(--si-dun) 74%, var(--si-kante) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.75) inset,
    0 0 0 2px rgba(96,104,112,.55),
    0 0 0 3px rgba(220,226,231,.55),
    0 22px 46px rgba(18,17,16,.4);
  user-select: none;
}

/* dunkle Seitenschienen wie beim Original */
.nk-body {
  position: relative;
  border-radius: 20px / 26px;
  padding: 0 4px;
}
.nk-body::before, .nk-body::after {
  content: ''; position: absolute; top: 14px; bottom: 14px; width: 3px;
  background: linear-gradient(180deg, #8e959c, var(--schiene), #8e959c);
  border-radius: 3px;
}
.nk-body::before { left: -6px }
.nk-body::after  { right: -6px }

/* ---------- Kopf: Hörergrill + Wortmarke ---------- */
.nk-top { text-align: center; padding: 3px 0 7px }
.nk-speaker {
  width: 52px; height: 6px; margin: 0 auto 6px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, #3f454b 0 2px, #7d858d 2px 4px);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.35) inset;
}
.nk-brand {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .26em;
  text-indent: .26em;
  color: #394047;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* ---------- Display auf schwarzer Blende ---------- */
.nk-screen-frame {
  background: linear-gradient(180deg, #15181b 0%, #090b0d 100%);
  border-radius: 6px;
  padding: 10px 9px;
  box-shadow:
    0 2px 7px rgba(0,0,0,.55) inset,
    0 1px 0 rgba(255,255,255,.6),
    0 0 0 1px rgba(60,66,72,.9);
}
.nk-screen {
  position: relative;
  background: #121110;
  border-radius: 1px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #000, 0 0 10px rgba(0,0,0,.7) inset;
}
.nk-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px;
  background: #1b1a17;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .5rem; letter-spacing: .04em;
  color: #b9ad86;
}
.nk-status b { color: #e0bf4f; font-weight: 700; letter-spacing: .1em }
.nk-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 7px }
.nk-bars i { width: 2px; background: #e0bf4f; display: block }
.nk-bars i:nth-child(1){height:2px} .nk-bars i:nth-child(2){height:4px}
.nk-bars i:nth-child(3){height:5px} .nk-bars i:nth-child(4){height:7px}
.nk-batt { width: 12px; height: 6px; border: 1px solid #b9ad86; border-radius: 1px; position: relative; padding: 1px }
.nk-batt::after { content:''; position:absolute; right:-3px; top:1.5px; width:2px; height:3px; background:#b9ad86 }
.nk-batt span { display: block; height: 100%; width: 70%; background: #e0bf4f }

/* Punktezeile im Display */
.nk-punkte {
  display: flex; justify-content: space-between;
  padding: 3px 5px;
  background: #16150f;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .54rem; color: #9a917a;
}
.nk-punkte b { color: #e0bf4f; font-weight: 700 }

/* Softkey-Beschriftung unten im Display -- wie beim echten Gerät */
.nk-soft {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 6px;
  background: #1b1a17;
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .54rem; font-weight: 700; color: #e0bf4f;
}

/* ---------- Tastenbereich ---------- */
.nk-keys { margin-top: 9px }

.nk-key {
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  transition: transform .05s ease, box-shadow .05s ease, filter .05s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.nk-key:active { transform: translateY(1.5px); filter: brightness(1.06) }

/* Reihe 1: Softkeys + Navi-Pad */
.nk-oben {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 5px; margin-bottom: 6px;
}
.nk-key.soft {
  height: 25px; width: 100%;
  background: linear-gradient(180deg, var(--taste-h), var(--taste-d));
  color: var(--taste-tx);
  font-size: .56rem; font-weight: 700;
  border-radius: 3px;
  box-shadow: 0 1.5px 0 #9aa1a8, 0 2px 4px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.8) inset;
}
.nk-key.soft.links  { clip-path: polygon(0 0, 100% 26%, 100% 100%, 0 100%) }
.nk-key.soft.rechts { clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%) }

/* Navi-Pad: beim 6230i ein eckiges Pad mit runden Ecken, nicht rund */
.nk-navi {
  position: relative;
  width: 66px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--navi1), var(--navi2));
  box-shadow: 0 2px 0 #14171a, 0 3px 6px rgba(0,0,0,.34),
              0 1px 0 rgba(255,255,255,.14) inset;
}
.nk-navi button {
  position: absolute; border: none; background: transparent;
  color: #dfe3e7; font-size: .6rem; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.nk-navi .oben    { top: 1px; left: 50%; transform: translateX(-50%); width: 26px; height: 14px }
.nk-navi .unten   { bottom: 1px; left: 50%; transform: translateX(-50%); width: 26px; height: 14px }
.nk-navi .links2  { left: 1px; top: 50%; transform: translateY(-50%); width: 16px; height: 24px }
.nk-navi .rechts2 { right: 1px; top: 50%; transform: translateY(-50%); width: 16px; height: 24px }
.nk-navi button:active { color: #f0d27a }
.nk-navi .mitte {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 26px; height: 20px; border-radius: 5px;
  background: linear-gradient(180deg, #636a73, #434951);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 1px 3px rgba(0,0,0,.35);
  font-size: .46rem; font-weight: 700; letter-spacing: .04em; color: #eef1f4;
}
.nk-navi .mitte:active { transform: translate(-50%,-50%) scale(.94) }

/* Reihe 2: grün / C / rot */
.nk-hoerer { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 5px; margin-bottom: 7px }
.nk-key.gruen, .nk-key.rot, .nk-key.cclear {
  height: 22px; border-radius: 3px; font-size: .66rem; font-weight: 700;
  box-shadow: 0 1.5px 0 rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.25);
}
.nk-key.gruen  { background: linear-gradient(180deg, #6aa872, #3f7748); color: #f2fff4 }
.nk-key.rot    { background: linear-gradient(180deg, #c06a60, #8e423b); color: #fff2f0 }
.nk-key.cclear { background: linear-gradient(180deg, #4d545c, #2c3136); color: #e6eaee; font-size: .6rem }

/* Ziffernblock: helle Silbertasten, dunkle Beschriftung, leicht gewölbt */
.nk-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px }
.nk-key.num {
  height: 27px; border-radius: 3px;
  background: linear-gradient(180deg, var(--taste-h) 0%, #e2e6ea 55%, var(--taste-d) 100%);
  color: var(--taste-tx);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  line-height: 1;
  box-shadow: 0 1.5px 0 #9aa1a8, 0 2px 3px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.9) inset;
}
.nk-key.num b { font-size: .78rem; font-weight: 700 }
.nk-key.num small { font-size: .42rem; color: var(--taste-tx2); letter-spacing: .03em }
.nk-key.num.aktiv { background: linear-gradient(180deg, #fdf6e0 0%, #f0e3bd 55%, #dfcf9a 100%) }
.nk-key.num.aktiv b { color: #6b5410 }

/* ---------- Overlay im Display ---------- */
.nk-overlay {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(18,17,16,.93);
  text-align: center; padding: 10px;
}
.nk-overlay.sichtbar { display: flex }
.nk-ov-title { font-family: var(--disp); font-size: 1.3rem; color: #fff; margin-bottom: 3px }
.nk-ov-text { color: rgba(255,255,255,.72); font-size: .68rem; line-height: 1.45; margin-bottom: 9px }
.nk-ov-btn {
  background: var(--gold); color: var(--ink); border: none; border-radius: 3px;
  padding: 7px 15px; font-weight: 700; font-size: .72rem; font-family: inherit; cursor: pointer;
}
.nk-name {
  width: 100%; max-width: 135px; margin: 0 auto 7px; display: block;
  background: #1b1a17; border: 1px solid var(--gold-soft); border-radius: 2px;
  color: #f0e0b4; padding: 5px 7px; font-size: .74rem; font-family: inherit; text-align: center;
}
.nk-name::placeholder { color: #7a7264 }
.nk-hinweis { font-size: .6rem; color: rgba(255,255,255,.5); margin-top: 6px }

/* ---------- Bestenliste unter dem Gerät ---------- */
.rang { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .88rem }
.rang:last-child { border-bottom: none }
.rang-nr { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; background: var(--paper); color: var(--muted) }
.rang:nth-child(1) .rang-nr { background: var(--gold); color: #fff }
.rang:nth-child(2) .rang-nr { background: #c0c4c8; color: #fff }
.rang:nth-child(3) .rang-nr { background: #b08d57; color: #fff }
.rang-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rang-punkte { font-weight: 700; color: var(--gold-soft) }

@media (max-width: 340px) {
  .nokia { max-width: 100%; padding: 8px 7px 11px }
  .nk-navi { width: 58px; height: 42px }
  .nk-key.num { height: 25px }
}