/* The Nokia 6600 around the game. Sizes come from layout.js as CSS variables:
   --s screen scale, --sw/--sh screen size, --pw/--ph phone size, --kp keypad
   height, --navi navi key diameter. Theme colours (--t-*) come from theme.js. */

@font-face {
  font-family: "Patrick Hand";
  src: url("../../assets/shell/fonts/patrick-hand-latin.woff2") format("woff2");
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(90% 60% at 50% 40%, #2a2d35 0%, #16181d 70%, #0e0f12 100%);
  font-family: var(--t-font);
  color: #111;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- body --- */

.phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--pw);
  height: var(--ph);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: calc(var(--pw) * 0.2) calc(var(--pw) * 0.2) calc(var(--pw) * 0.18) calc(var(--pw) * 0.18) /
                 calc(var(--pw) * 0.13) calc(var(--pw) * 0.13) calc(var(--pw) * 0.16) calc(var(--pw) * 0.16);
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%),
    linear-gradient(90deg, #9da4ae 0%, #d3d8de 12%, #e9ecf0 30%, #dfe3e8 55%, #c6ccd4 82%, #979ea8 100%);
  box-shadow:
    inset 0 0 0 1.5px #7f8791,
    inset 0 2px 3px rgba(255,255,255,0.9),
    inset 0 -8px 14px rgba(40,45,55,0.35),
    0 12px 30px rgba(0,0,0,0.55);
}

.phone-top {
  height: var(--top);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 calc(var(--side) + var(--bezel) + 2px);
}

.top-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--top) * 0.08);
}

.earpiece {
  width: calc(var(--pw) * 0.17);
  height: calc(var(--top) * 0.13);
  border-radius: 999px;
  background: linear-gradient(#3b4048, #6b727c);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8), inset 0 1px 2px rgba(0,0,0,0.6);
}

.brand {
  font: 700 calc(var(--top) * 0.25) / 1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.18em;
  color: #3d4f7a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  padding-left: 0.18em;
}

.top-right { display: flex; justify-content: flex-end; }
.top-left { display: flex; justify-content: flex-start; }

.mute, .test-toggle {
  width: calc(var(--top) * 0.66);
  height: calc(var(--top) * 0.66);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #2a3346;
  background: radial-gradient(circle at 35% 30%, #fbfcfd, #c3c9d1 70%, #a2a9b3);
  box-shadow: inset 0 0 0 1px #8a919b, 0 1px 1px rgba(0,0,0,0.25);
  cursor: pointer;
}
.mute svg { width: 58%; height: auto; }
.mute.muted { color: #b3263f; }
.mute:active, .test-toggle:active { filter: brightness(0.9); }
.test-toggle { font-size: calc(var(--top) * 0.34); line-height: 1; color: #555; }

.bezel {
  padding: var(--bezel);
  border-radius: calc(var(--bezel) * 1.6);
  background: linear-gradient(160deg, #3a3f47, #121418 45%, #1c1f25);
  box-shadow: 0 0 0 1.5px #6f7680, inset 0 1px 1px rgba(255,255,255,0.18), 0 1px 1px rgba(255,255,255,0.8);
}

.screen {
  position: relative;
  width: var(--sw);
  height: var(--sh);
  overflow: hidden;
  background: #000;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 176px;
  height: 208px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  overflow: hidden;
}

/* -------------------------------------------------------------- keypad --- */

.keypad {
  margin-top: var(--gap);
  width: calc(var(--pw) - 2 * var(--side) + 6px);
  height: var(--kp);
  display: flex;
  flex-direction: column;
  gap: calc(var(--kp) * 0.035);
  touch-action: none;
}

.key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1d2533;
  background: linear-gradient(#fdfdfe, #d9dee5 55%, #b9c0ca);
  box-shadow:
    inset 0 0 0 1px rgba(90,98,110,0.55),
    inset 0 1px 1px #fff,
    0 1.5px 1.5px rgba(0,0,0,0.3);
  transition: transform 40ms, filter 40ms;
}
.key.down {
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.86);
  box-shadow: inset 0 0 0 1px rgba(90,98,110,0.7), inset 0 2px 3px rgba(0,0,0,0.25);
}

.kp-top {
  height: var(--navi);
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr var(--navi) 1fr;
  gap: calc(var(--pw) * 0.03);
  align-items: stretch;
}

.kp-side {
  display: grid;
  grid-template-rows: 1.15fr 1fr 0.8fr;
  gap: calc(var(--navi) * 0.07);
}
.kp-side .key { border-radius: 999px; }
.kp-left .key { border-radius: 50% 26% 26% 50% / 50% 42% 42% 50%; }
.kp-right .key { border-radius: 26% 50% 50% 26% / 42% 50% 50% 42%; }
.kp-side .small { width: 72%; justify-self: center; font: 700 calc(var(--navi) * 0.12) / 1 Arial, sans-serif; color: #3a4252; }

.soft-bar {
  width: 38%;
  height: calc(var(--navi) * 0.03);
  min-height: 2px;
  border-radius: 2px;
  background: #4a5364;
}

.icon-call, .icon-end, .icon-menu {
  width: calc(var(--navi) * 0.2);
  height: calc(var(--navi) * 0.2);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-call, .icon-end {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10.5C2 6.5 22 6.5 22 10.5V13a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2c-2.4-.9-5.6-.9-8 0v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.icon-call { background: #1f9a3b; transform: rotate(-30deg); }
.icon-end { background: #d42a2a; transform: rotate(0deg) translateY(12%); }
.icon-menu {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E");
  background: #3a4252;
  width: calc(var(--navi) * 0.14);
  height: calc(var(--navi) * 0.14);
}

/* The navi key: a dark ring with four arrows around a silver centre button. */
.navi {
  position: relative;
  width: var(--navi);
  height: var(--navi);
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle, #1a1d22 60%, #5d646e 70%, #aab1bb 72%);
  box-shadow: 0 0 0 1.5px #7b838e, 0 2px 4px rgba(0,0,0,0.35);
}
.navi-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #eef1f4, #c3c9d1 55%, #8f97a2);
  box-shadow: inset 0 0 0 1px #6c7480, inset 0 2px 2px rgba(255,255,255,0.9);
  transition: transform 50ms;
}
.navi-center {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, #ffffff, #d4d9e0 60%, #a8b0ba);
  box-shadow: 0 0 0 1.5px #5c6470, 0 0 0 4px rgba(20,24,30,0.35), inset 0 -2px 3px rgba(0,0,0,0.2);
  transition: transform 50ms;
}
.arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: calc(var(--navi) * 0.055) solid transparent;
}
.arrow.up    { left: 50%; top: 6%;    transform: translateX(-50%); border-bottom: calc(var(--navi) * 0.075) solid #384154; border-top-width: 0; }
.arrow.down  { left: 50%; bottom: 6%; transform: translateX(-50%); border-top: calc(var(--navi) * 0.075) solid #384154; border-bottom-width: 0; }
.arrow.left  { top: 50%; left: 6%;    transform: translateY(-50%); border-right: calc(var(--navi) * 0.075) solid #384154; border-left-width: 0; }
.arrow.right { top: 50%; right: 6%;   transform: translateY(-50%); border-left: calc(var(--navi) * 0.075) solid #384154; border-right-width: 0; }

.navi[data-dir="up"] .navi-ring    { transform: perspective(400px) rotateX(9deg); }
.navi[data-dir="down"] .navi-ring  { transform: perspective(400px) rotateX(-9deg); }
.navi[data-dir="left"] .navi-ring  { transform: perspective(400px) rotateY(-9deg); }
.navi[data-dir="right"] .navi-ring { transform: perspective(400px) rotateY(9deg); }
.navi[data-dir="up"] .arrow.up { border-bottom-color: #1f5fc9; }
.navi[data-dir="down"] .arrow.down { border-top-color: #1f5fc9; }
.navi[data-dir="left"] .arrow.left { border-right-color: #1f5fc9; }
.navi[data-dir="right"] .arrow.right { border-left-color: #1f5fc9; }
.navi[data-dir="select"] .navi-center { transform: scale(0.94); filter: brightness(0.88); }

/* Number keys: three columns, the middle one wider; 5 is the biggest. */
.kp-num {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.22fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: calc(var(--kp) * 0.028) calc(var(--pw) * 0.03);
  padding: 0 calc(var(--pw) * 0.01);
}
.key.num {
  border-radius: 46% / 50%;
  gap: 0.35em;
  font-size: calc(var(--kp) * 0.052);
}
.key.num b { font: 700 1.05em / 1 Arial, sans-serif; }
.key.num i { font: 400 0.62em / 1 Arial, sans-serif; font-style: normal; color: #5a6477; letter-spacing: 0.02em; }
.kp-num .key:nth-child(3n + 1) { border-top-left-radius: 60% 70%; border-bottom-left-radius: 60% 70%; }
.kp-num .key:nth-child(3n) { border-top-right-radius: 60% 70%; border-bottom-right-radius: 60% 70%; }
.key.five {
  z-index: 1;
  margin: calc(var(--kp) * -0.012) calc(var(--pw) * -0.012);
  font-size: calc(var(--kp) * 0.064);
  background: linear-gradient(#ffffff, #e2e6ec 55%, #c1c8d1);
  box-shadow:
    inset 0 0 0 1.5px rgba(60,70,85,0.6),
    inset 0 1px 1px #fff,
    0 2px 3px rgba(0,0,0,0.35);
}
.key.five::after {
  /* the little tactile bump on the 5 */
  content: "";
  position: absolute;
  bottom: 14%;
  left: 50%;
  width: 8%;
  height: 5%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #7b8494;
}

/* ------------------------------------------------------ Series 60 views --- */

.s60 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--t-font);
  font-size: var(--t-fs-medium);
  line-height: var(--t-lh);
  color: var(--t-body-text);
  background: linear-gradient(var(--t-body-bg) 35%, var(--t-body-to));
  -webkit-font-smoothing: antialiased;
}

.s60 .px { display: block; flex: none; }

.s60-title {
  flex: 0 0 var(--t-title-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
  background: linear-gradient(var(--t-title-from), var(--t-title-to));
  border-bottom: 1px solid var(--t-title-line);
  color: var(--t-title-text);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.s60-title .t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.s60-title .tr { font-size: var(--t-fs-small); font-weight: 400; }
.s60-title .title-icon { color: #fff; }

.s60-main {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.s60-soft {
  flex: 0 0 var(--t-soft-h);
  display: flex;
  justify-content: space-between;
  background: linear-gradient(var(--t-soft-from), var(--t-soft-to));
  border-top: 1px solid var(--t-soft-line);
  color: var(--t-soft-text);
  font-weight: 700;
}
.s60-soft .sk {
  display: flex;
  align-items: center;
  padding: 0 7px;
  min-width: 64px;
  cursor: pointer;
}
.s60-soft .sk.r { justify-content: flex-end; }
.s60-soft .sk:empty { cursor: default; }

.heart-glyph { display: inline-block; vertical-align: -0.05em; }
.heart-glyph .px { width: 0.62em; height: auto; display: inline-block; }
.unrevealed { visibility: hidden; }

/* Standby with the new message note. */
.standby {
  background: linear-gradient(170deg, #cfe3ff 0%, #f3d9ef 55%, #ffd9e4 100%);
}
.wallpaper { position: absolute; inset: 0; }
.wall-heart { position: absolute; opacity: 0.45; transform: scale(1.3); }
.status-row {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  color: #1c2b4a;
  font-size: var(--t-fs-small);
  font-weight: 700;
}
.note {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 52px;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--t-popup-bg);
  border: 1px solid var(--t-popup-border);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--t-popup-shadow);
  cursor: pointer;
}
.note-icon, .messages-icon { position: relative; }
.note-heart { position: absolute; right: -4px; top: -4px; transform: scale(1.4); }
.note-text { font-weight: 700; font-size: var(--t-fs-medium); }
.sound-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: #3b4a6b;
  font-size: var(--t-fs-small);
}

/* Message viewer. */
.msg-main { padding: 6px 7px 4px; }
.msg-body {
  height: 100%;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-family: "Patrick Hand", var(--t-font);
  font-size: 15px;
  line-height: 1.18;
  color: #1b2340;
  cursor: pointer;
}

/* Menu grid. */
.home-main { padding: 8px 4px; }
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.cell {
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: var(--t-hl-radius);
  cursor: pointer;
}
.cell.selected, .row.selected {
  background: linear-gradient(var(--t-hl-from), var(--t-hl-to));
  border-color: var(--t-hl-border);
  color: var(--t-hl-text);
}
.cell-icon { height: 36px; display: grid; place-items: center; }
.cell-label { font-size: var(--t-fs-small); white-space: nowrap; }
.logo-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20,40,80,0.35);
}

/* Inbox list. */
.inbox-main { padding: 2px 2px; }
.row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: var(--t-hl-radius);
  cursor: pointer;
}
.row-text { min-width: 0; flex: 1; }
.row-1 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-2 { font-size: var(--t-fs-small); color: var(--t-body-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.selected .row-2 { color: #3d2b05; }

/* Install hint. */
.install-main {
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.install-icon { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.install-head { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--t-fs-medium); }
.install-text { font-size: var(--t-fs-small); color: #26324d; }
.install-small { margin-top: 5px; font-size: 10px; color: var(--t-body-muted); }

/* Text query over the game. */
.query-view { background: transparent; }
.query-main { background: rgba(0,0,0,0.25); }
.query {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 5px 6px 4px;
  background: var(--t-popup-bg);
  border: 1px solid var(--t-popup-border);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--t-popup-shadow);
}
.query-title { font-weight: 700; margin-bottom: 4px; }
.query-field {
  border: 1px solid #7f93b8;
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.15);
}
.query-input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 2px 3px;
  background: transparent;
  font: inherit;
  font-size: var(--t-fs-medium);
  color: var(--t-body-text);
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
  caret-color: #123f8f;
}
.query-count { text-align: right; font-size: 9px; color: var(--t-body-muted); margin-top: 1px; }

/* ----------------------------------------------------------- landscape --- */

.landscape {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: #16181d;
}
.landscape-box {
  position: relative;
  inset: auto;
  width: 176px;
  height: 124px;
  border-radius: 3px;
  transform: scale(var(--ls, 2));
  box-shadow: 0 0 0 1px #000;
}
.landscape-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.rot { display: flex; align-items: center; gap: 8px; color: #123f8f; }
.landscape-text { font-weight: 700; font-size: var(--t-fs-small); text-align: center; padding: 0 8px; }

/* ----------------------------------------------------------- test mode --- */

.test-panel {
  position: fixed;
  left: 6px;
  top: 6px;
  z-index: 20;
  width: 220px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 10px;
  background: rgba(10, 12, 16, 0.92);
  color: #eef;
  font: 14px/1.3 system-ui, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.test-panel h2 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; }
.test-panel button {
  font: inherit;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: #2c3f66;
  color: #fff;
  text-align: left;
  touch-action: manipulation;
}
.test-panel button.danger { background: #7a2331; }
.test-panel .level { opacity: 0.85; }