:root {
   --screen: #ffe8f3;
   --panel: #ffd3e7;
   --bezel: #ff9cc8;
   --ink: #703a5a;

   --shadow-deep: #d38bb0;
   --shadow-panel: #f6a9cb;
}

html,
body {
   height: 100%;
}

body {
   margin: 0;
   background-image: url(../images/polka.png);
   background-position: cover;
   color: var(--ink);
   font: 12px/1.35 "Press Start 2P", monospace;
}

a {
   color: var(--ink);
   font-style: italic;
}

.wrap {
   max-width: 720px;
   margin: 24px auto;
   padding: 0 16px;
}

.app-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
   padding-top: 30px;
   gap: 16px;
}

.brand {
   font-size: 30px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--ink);
   text-shadow: 0 2px 0 #fff, 0 6px 0 rgba(255, 255, 255, 0.6),
      0 10px 18px rgba(243, 169, 203, 0.35);
}

#city-select {
   font: inherit;
   color: var(--ink);
   background: linear-gradient(180deg, #ffe5f2, #ffd6e9);
   border: 6px solid var(--bezel);
   border-radius: 8px;
   padding: 8px 10px;
   box-shadow: 0 6px 0 var(--shadow-panel);
   image-rendering: pixelated;
}
#city-select:focus {
   outline: 3px solid rgba(255, 156, 200, 0.5);
   outline-offset: 2px;
}

.row {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 20px;
   align-items: center;
   background: linear-gradient(180deg, #ffe5f2, #ffd6e9);
   border: 8px solid var(--bezel);
   border-radius: 8px;
   padding: 16px;
   margin: 16px 0;
   box-shadow: 0 10px 0 var(--shadow-deep), inset 0 2px 0 #fff;
   position: relative;
}

.row::after {
   content: "";
   position: absolute;
   inset: -8px;
   border-radius: 12px;
   pointer-events: none;
   border: 3px dashed rgba(243, 169, 203, 0.35);
   transform: translate(6px, 6px);
}

.row:hover {
   transform: translateY(-2px);
   transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.city {
   font-size: 14px;
   display: flex;
   gap: 8px;
   align-items: center;
   text-shadow: 0 1px 0 #fff;
}

.city span[aria-hidden="true"] {
   filter: drop-shadow(0 1px 0 #fff);
}

.date {
   margin-top: 8px;
   font-size: 10px;
   opacity: 0.9;
   color: #8c5a74;
   text-shadow: 0 1px 0 #fff;
}

.time {
   font-size: 22px;
   color: var(--ink);
   text-shadow: 0 1px 0 #fff, 0 2px 0 #ffe2ef, 2px 2px 0 #f2b5cf;
}

.ampm {
   display: inline-block;
   margin-left: 8px;
   padding: 4px 8px;
   font-size: 12px;
   border-radius: 999px;
   color: #703a5a;
   background: linear-gradient(180deg, #ffeef7, #ffd7e9);
   border: 2px solid #ffb3d1;
   box-shadow: inset 0 1px 0 #fff;
}

.footer {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;

   width: 100%;
   max-width: 720px;
   margin: 0 auto;
   padding: 30px 16px;

   opacity: 0.85;
   font-size: 10px;
   margin-top: auto;
}

@media (max-width: 700px) {
   .time {
      font-variant-numeric: tabular-nums; /* equal digit widths if the font supports it */
      letter-spacing: 0.06em; /* tiny breathing room for pixel fonts */
   }
   .brand {
      font-size: 20px;
   }
}