/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  height: 100vh;
  background: url(scan-lines.png) repeat;
  filter: blur(1px);
}

/* Main container */
.menu-container {
  height: 75vh;              /* Top 3/4 of screen */
  padding: 60px 150px 40px 150px; /* 60px top, 80px left/right */
}

/* 3x4 Grid */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  height: 100%;
}

/* Individual Channel Tiles */
.channel {
  background: url(STATIC.gif) center/cover;
  opacity: 0.9;
  background-size: 120%;
  overflow: hidden;
  border-radius: 18px;
  border: 2px solid #d0d6dc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease-in-out;

  /* Wii-style soft shadow */
  filter:blur(0.2px);
  box-shadow:
    inset 0 2px 4px rgba(170, 170, 170, 0.9),
    0 12px 12px rgba(0, 0, 0, 0.24);
}

/* Hover Effect */
.channel:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.6),
     0 8px 14px rgb(25, 228, 255);
}

/* Dashboard (Bottom 1/4) */
.dashboard {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 25vh;
  background: linear-gradient(to bottom, #8e96a1c2, #c2c6cabd);
  border: 0px solid #c7ccd3;
  clip-path: polygon(0 100%, 0 0, 13% 0, 19% 1%, 21% 3%, 23% 7%, 24% 10%, 29% 29%, 31% 34%, 32% 37%, 34% 39%, 35% 40%, 65% 40%, 66% 39%, 68% 37%, 69% 34%, 71% 29%, 76% 10%, 77% 7%, 79% 3%, 81% 1%, 87% 0, 100% 0, 100% 100%);
}

/* Cyan under-glow as a separate element */
.dashboard-underlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25vh;
  z-index: 0;
  background: rgb(25, 228, 255);
  filter: blur(200px);
  pointer-events: none;
  clip-path: polygon(
    0 calc(100% - 10px),
    0 -10px,
    13% -10px,
    19% calc(1% - 10px),
    21% calc(3% - 10px),
    23% calc(7% - 10px),
    24% calc(10% - 10px),
    29% calc(29% - 10px),
    31% calc(34% - 10px),
    32% calc(37% - 10px),
    34% calc(39% - 10px),
    35% calc(40% - 10px),
    65% calc(40% - 10px),
    66% calc(39% - 10px),
    68% calc(37% - 10px),
    69% calc(34% - 10px),
    71% calc(29% - 10px),
    76% calc(10% - 10px),
    77% calc(7% - 10px),
    79% calc(3% - 10px),
    81% calc(1% - 10px),
    87% calc(0% - 10px),
    100% calc(0% - 10px),
    100% calc(100% - 10px)
  );
}

.dashboard {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 25vh;
  background: linear-gradient(to bottom, #f4f7fa, #d6dbe1);
  border: 0px solid #c7ccd3;
  clip-path: polygon(0 100%, 0 0, 13% 0, 19% 1%, 21% 3%, 23% 7%, 24% 10%, 29% 29%, 31% 34%, 32% 37%, 34% 39%, 35% 40%, 65% 40%, 66% 39%, 68% 37%, 69% 34%, 71% 29%, 76% 10%, 77% 7%, 79% 3%, 81% 1%, 87% 0, 100% 0, 100% 100%);
  z-index: 1;
}

/* Inner Layout */
.dashboard-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
}

/* Left & Right Buttons */
.wii-button,
.mail-button {
  width: 180px;
  height: 180px;
  background: linear-gradient(to bottom, #ffffff, #e8edf2);
  border-radius: 50%;
  border: 5px solid rgb(25, 228, 255);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 74px;
  font-weight: normal;
  color: #6b7a89;
  cursor: pointer;

  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.9),
    0 5px 10px rgba(0,0,0,0.12);

  transition: all 0.15s ease;
}

.wii-button:hover,
.mail-button:hover {
  transform: scale(1.1);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,1),
    0 8px 16px rgba(0,0,0,0.2);
}

/* Center Time */
.dash-center {
  text-align: center;
}

.time {
  font-family: "Seven Segment", monospace;
  font-size: 76px;
  font-weight: bold;
  color: #b5b9bd;
  text-align:center;
}

.date {
  font-size: 56px;
  color: #84909c;
  margin-top: 24px;
}