:root{
  --black: #0a0a0a;
  --white: #f2f2f2;
  --red:   #e30613;
}

.desktop {
  width: 100%;
  height: 100vh;
  background: black;
  position: fixed;
  inset: 0;
  z-index: -1;
}

.card.hidden{
  display: none;
}

/* FIX C: topbar is now a COLUMN (title on top, nav row underneath)
   instead of one row with everything side by side */
.topbar{
    background: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 30px;
    color: rgb(255, 255, 255);
    backdrop-filter: blur(12px);
    border-bottom: 3px solid var(--red);
}

.topbar h1{
  font-family: 'Silkscreen', monospace;
  font-size: 26px;
  letter-spacing: 2px;
  margin: 0 0 16px 0;
  text-shadow: 3px 3px 0 var(--red);
}

/* The row holding buttons + clock, sits below the h1 */
.nav-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

button{
  background: var(--black);
  color: var(--white);
  border: 2px solid var(--white);
  padding: 12px 26px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: .1s;

  /* Cuts the top-left and bottom-right corners off at an angle,
     instead of a plain rectangle — gives it that HUD/stencil look */
  clip-path: polygon(
    12px 0, 100% 0,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    0 100%, 0 12px
  );
}

button:hover{
  background: var(--red);
  color: var(--black);
  border-color: var(--red);
  box-shadow: 0 0 18px var(--red), 0 0 4px var(--white) inset;
}

button:active{
  transform: scale(0.96);
}

button.active{
  background: var(--red);
  color: var(--black);
}

#timeElement{
  font-family: 'Silkscreen', monospace;
  font-size: 40px;
  color: var(--white);
  letter-spacing: 1px;
  margin-left: auto;
}


/* FIX B: card now sits fixed in the middle of the screen (top/left 50%
   + transform pulls it back by half its own size, which is what
   actually centers it), styled blocky/pixel instead of a soft white box,
   and cursor:grab hints that it can be picked up */
.card{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 500px;
    max-width: calc(100% - 40px);
    background: var(--black);
    padding: 25px;

    border: 4px solid var(--white);
    outline: 4px solid var(--red);
    outline-offset: -12px;   /* gives a double-border "pixel frame" look */
    border-radius: 0;        /* sharp corners, no rounding — blocky look */

    box-shadow: 10px 10px 0 var(--red);  /* hard offset shadow, no blur */
    cursor: grab;
    user-select: none;   /* stops text getting highlighted while dragging */
}

.card.dragging{
  cursor: grabbing;
  box-shadow: 14px 14px 0 var(--red);
}

/* Close (×) button — sits in the top-right corner of each card */
.close-btn{
  position: absolute;
  top: -4px;
  right: -4px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--black);
  color: var(--white);
  border: 2px solid var(--white);
  clip-path: none;      /* override the default angled button shape */
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.close-btn:hover{
  background: var(--red);
  color: var(--black);
  border-color: var(--red);
}

h2 {
  font-family: 'Silkscreen', monospace;
  color: var(--white);
  text-align: left;
  font-size: 20px;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
}

ul {
  color: #c9c9c9;
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
  font-family: 'VT323', monospace;
  text-align: left;
}

body {
  background-color: #000000;
  font-family: 'VT323', monospace;
  margin: 0px;
  height: 100vh;
  text-align: left;
}