/* ==========================================================================
   Imperial Lion Records — Internal Email Service
   Master stylesheet, shared by index.html and thread1.html–thread7.html
   ========================================================================== */



/* ---------- Fonts (local project assets) ---------- */

@font-face{
    font-display: swap;
    font-family: 'Y2K Brutalism';
    src: url('assets/Y2K Brutalism Typeface.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }

@font-face{
    font-display: swap;
    font-family: 'Thermochrome';
    src: url('assets/Thermochrome/MDThermochrome0.4-Light.otf') format('opentype');
    font-weight: 300;
  }

@font-face{
    font-display: swap;
    font-family: 'Thermochrome';
    src: url('assets/Thermochrome/MDThermochrome0.4-Regular.otf') format('opentype');
    font-weight: 400;
  }

@font-face{
    font-display: swap;
    font-family: 'Thermochrome';
    src: url('assets/Thermochrome/MDThermochrome0.4-Semibold.otf') format('opentype');
    font-weight: 600;
  }

@font-face{
    font-display: swap;
    font-family: 'Thermochrome';
    src: url('assets/Thermochrome/MDThermochrome0.4-Bold.otf') format('opentype');
    font-weight: 700;
  }

/* Juno's body text. This font only contains letters (A-Z, a-z) and the digit
   0 -- no punctuation and no digits 1-9 -- so it's always used with
   Thermochrome right behind it in the font stack, which quietly supplies
   any character this one is missing. */
@font-face{
    font-display: swap;
    font-family: 'Imperial Squaredots';
    src: url('assets/ImperialSquaredots.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }

@font-face{
    font-display: swap;
    font-family: 'Thermochrome Inclined';
    src: url('assets/Thermochrome/MDThermochrome0.4-Inclined.otf') format('opentype');
    font-weight: 400;
  }


/* ---------- Root variables (superset of what every page uses) ---------- */

:root{
    --bg: #000000;
    --panel: #05070a;
    --panel-2: #0a1018;
    --cyan: #8fd8ea;
    --cyan-bright: #c9f0fb;
    --cyan-dim: #4f7d8c;
    --border: #3d6f80;
    --border-dim: #274a55;
    --body-bg: #bfe9f2;
    --body-text: #0d2b33;
    --glow: 0 0 6px rgba(143, 216, 234, 0.55);
  }


/* ---------- Reset ---------- */

*{ box-sizing: border-box; }

html, body{
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--cyan);
    font-family: 'Thermochrome', 'Courier New', monospace;
  }


/* body bottom-padding differs slightly between the inbox page and the
   thread pages in the original designs; scoped with :has() so one shared
   stylesheet can serve both pages without changing either's padding value */

body:has(.email-card){
    padding: 48px 64px 80px;
  }

body:has(.inbox-grid){
    padding: 48px 64px 100px;
  }


/* ---------- Shared header / nav chrome ---------- */

.page{
    max-width: 1000px;
    margin: 0 auto;
  }

/* Desktop uses the same compact "phone" layout as mobile, just in a
   centered column. Every mobile rule block below also applies at widths
   above 640px (see their @media lines); this sets how wide that column is.
   To make the desktop view wider or narrower, change this one number. */
@media (min-width: 641px){
  .page{
      max-width: 560px;
    }
}

.masthead{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
  }

.masthead-block{
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: 2px;
    color: var(--cyan);
    text-shadow: var(--glow);
    font-weight: 400;
  }

.masthead-block.right{
    text-align: right;
  }

.logo-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
  }

.logo-ring{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 0px solid var(--cyan-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none;
  }

.logo-ring img {
      width: 100%;
    }

.divider-row{
    /* display: flex; */
    align-items: center;
    gap: 8px;
    margin: 10px 0 26px;
  }

.dashed-line{
    flex: 1;
    margin: 20px 0;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--cyan) 0, var(--cyan) 8px, transparent 4px, transparent 20px);
  }

.confidential-line{
    font-size: 20px;
    letter-spacing: 37px;
    color: var(--cyan);
    text-shadow: var(--glow);
    white-space: nowrap;
    font-weight: 400;
    text-align: center;
  }


/* index.html adds a max-width clamp on the confidential-line divider that
   the thread pages don't use — scoped the same way as the body padding above */

body:has(.inbox-grid) .confidential-line{
    max-width: 1270px;
  }


/* ---------- 80s cyberpunk shared animations ---------- */

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.18) 0px,
      rgba(0,0,0,0.18) 1px,
      transparent 1px,
      transparent 6px
    );
    background-size: 100% 6px;
    animation: scanlineDrift 10s linear infinite;
  }

  .body-box::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.08) 0px,
      rgba(0,0,0,0.08) 0px,
      transparent 1px,
      transparent 6px
    );
    background-size: 100% 6px;
    animation: scanlineDrift 10s linear infinite;

  }

@keyframes scanlineDrift{
    from{ background-position: 0 0; }
    to{ background-position: 0 400px; }
  }

.crt-flicker{
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: #8fd8ea;
    opacity: 0;
    animation: flicker 5.5s infinite;
  }

@keyframes flicker{
    0%, 92%, 100% { opacity: 0; }
    92.5% { opacity: 0.04; }
    93% { opacity: 0; }
    95% { opacity: 0.06; }
    95.4% { opacity: 0; }
  }

@keyframes glowPulse{
    0%, 100%{
      text-shadow: 0 0 4px rgba(143,216,234,0.35), 0 0 9px rgba(143,216,234,0.2);
    }
    50%{
      text-shadow: 0 0 9px rgba(143,216,234,0.85), 0 0 22px rgba(143,216,234,0.55);
    }
  }

.masthead-block.right{
    animation-delay: 0.4s;
  }

.confidential-line{
    animation-delay: 0.2s;
  }


/* ==========================================================================
   Thread pages (thread1.html – thread7.html)
   ========================================================================== */

.nav-row{
    display: flex;
    gap: 22px;
    margin-bottom: 40px;
  }

.nav-btn{
    text-decoration: none;
    flex: 1;
    text-align: center;
    padding: 13px 0;
    background: linear-gradient(180deg, #0c1620, #060b10);
    border: 3px solid var(--cyan);
    border-radius: 3px;
    cursor: pointer;
    box-shadow: inset 0 0 12px rgba(79,125,140,0.15);
    transition: box-shadow .2s ease, border-color .2s ease;
    font-size: 20px;
    font-family: 'Thermochrome', 'Thermochrome';
    letter-spacing: 2px;
    color: var(--cyan);
    margin-top: 4px;
    font-weight: 400;
  }

.nav-btn:hover{
    border-color: var(--cyan);
    box-shadow: 0 0 14px rgba(143,216,234,0.35), inset 0 0 12px rgba(79,125,140,0.25);
  }

.subject-line{
    font-family: 'Thermochrome', 'Thermochrome';
    font-size: 30px;
    font-weight: 400;
    color: var(--cyan);
    text-shadow: var(--glow);
    margin: 0 0 26px 4px;
    letter-spacing: 0.5px;
  }

.email-card{
    border: 1px solid var(--border);
    margin-bottom: 26px;
    background: var(--panel);
    box-shadow: 0 0 18px rgba(60,110,125,0.15);
  }

.email-card2 {
    display: flex;
    border: 2px solid var(--cyan);

  }

.email-card.reverse{
    flex-direction: row;
  }

.avatar-box{
    width: 190px;
    min-width: 223px;
    border-right: 1px solid var(--border);
    background: radial-gradient(circle at 50% 45%, #0d2530 0%, #050a0e 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

.email-card.reverse .avatar-box{
    border-right: none;
    border-left: 1px solid var(--border);
    order: 3;
  }

.avatar-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

.email-main{
    flex: 1;
    display: flex;
    flex-direction: column;
  }

.sender-bar{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-bottom: 2px solid var(--cyan);
    background: #151f24;

  }

.email-card .sender-bar {
    border-right: 4px solid #4a677d;
    border-top: 2px solid #26333f;
  }

.email-card.reverse .sender-bar {
    border-left: 4px solid #4a677d;
    border-top: 2px solid #26333f;
    border-right: 0;
  }

.email-card .meta-bar {
    border-right: 4px solid #4a677d;
    border-top: 2px solid #26333f;
    border-bottom: 2px solid #81b3d9;
  }

.email-card.reverse .meta-bar {
    border-left: 4px solid #4a677d;
    border-top: 2px solid #26333f;
    border-bottom: 2px solid #81b3d9;
    border-right: 0;
  }

.sender-mark{
    width: 50px;
    height: 50px;
    flex-shrink: 0;
  }

.sender-name{
    font-family: 'Y2K Brutalism', 'Thermochrome', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    color: #f2fbff;
    text-shadow: 0 0 8px rgba(200,240,250,0.5);
    line-height: 1;
    color: white;
  }

.sender-role{
    font-size: 20px;
    font-family: 'Thermochrome', 'Thermochrome';
    letter-spacing: 2px;
    color: var(--cyan);
    margin-top: 4px;
    font-weight: 400;
  }

.sender-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

.meta-bar{
    padding: 12px 22px;
    border-bottom: 1px solid var(--border-dim);
    font-size: 20px;
    line-height: 1.7;
    color: var(--cyan);
    letter-spacing: 0.5px;
    font-weight: 400;
  }

.meta-bar span.field{
    color: var(--cyan);
  }

.body-box{
    flex: 1;
    background: var(--body-bg);
    color: black;
    padding: 22px 26px;
    font-size: 22px;
    line-height: 1.85;
    letter-spacing: 0.2px;
    position: relative;
    font-family: 'Thermochrome', 'Thermochrome';
    z-index: 9999;
  }

.body-box p{
    margin: 0 0 16px;
    -webkit-text-stroke: .5px black;
  }

.body-box p:last-of-type{
    margin-bottom: 4px;
  }

.body-box .sign{
    margin-top: 4px;
  }

/* Messages from Juno: body text (and signature) in Imperial Squaredots.
   Its letters sit smaller than Thermochrome's, so the size is nudged up and
   the line-height pulled down by the same amount (24px x 1.7 = 22px x 1.85)
   -- every line keeps the same spacing as the other cards. The stroke is a
   touch heavier than the 0.5px used elsewhere so the thin dots stay visible. */
.email-card.from-juno .body-box{
    font-family: 'Imperial Squaredots', 'Thermochrome', sans-serif;
    font-size: 24px;
    line-height: 1.7;
  }

.email-card.from-juno .body-box p{
    -webkit-text-stroke: .8px black;
  }

.masthead-block,
  .confidential-line,
  .subject-line,
  .sender-name{
    animation: glowPulse 3.4s ease-in-out infinite;
  }

.sender-name{
    animation-name: glowPulseWhite;
  }

@keyframes glowPulseWhite{
    0%, 100%{
      text-shadow: 0 0 5px rgba(200,240,250,0.4);
    }
    50%{
      text-shadow: 0 0 12px rgba(200,240,250,0.9), 0 0 24px rgba(143,216,234,0.5);
    }
  }

.nav-btn{
    animation: navGlow 3.4s ease-in-out infinite;
  }

.nav-row .nav-btn:nth-child(1){ animation-delay: 0s; }

.nav-row .nav-btn:nth-child(2){ animation-delay: 0.35s; }

.nav-row .nav-btn:nth-child(3){ animation-delay: 0.7s; }

@keyframes navGlow{
    0%, 100%{
      box-shadow: inset 0 0 12px rgba(79,125,140,0.15), 0 0 4px rgba(143,216,234,0.15);
    }
    50%{
      box-shadow: inset 0 0 18px rgba(79,125,140,0.3), 0 0 14px rgba(143,216,234,0.6);
    }
  }

.subject-line span.decode-char.settled{
    animation: decodeSettle 0.4s ease-out;
  }

@keyframes decodeSettle{
    0%{
      color: #eafbff;
      text-shadow: 0 0 14px rgba(200,240,250,1);
    }
    100%{
      color: inherit;
      text-shadow: inherit;
    }
  }

.subject-line .decode-cursor{
    display: inline-block;
    width: 0.5ch;
    margin-left: 2px;
    background: var(--cyan-bright);
    animation: cursorBlink 0.8s step-end infinite;
  }

@keyframes cursorBlink{
    0%, 49%{ opacity: 1; }
    50%, 100%{ opacity: 0; }
  }


/* ==========================================================================
   Inbox page (index.html)
   ========================================================================== */

.inbox-wrap{
    margin-top: 56px;
  }

.inbox-grid{
    display: flex;
    gap: 64px;
    align-items: flex-start;
  }

.inbox-col{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 100px;
  }

.inbox-col.offset{
    margin-top: 96px;
  }

.msg-tile{
    border: 2px solid var(--cyan);

  }

  .msg-border:hover {
    cursor: pointer;
  }

.msg-border{
    display: flex;
    align-items: center;
    gap: 22px;
    /* min-height: 130px; */
    padding: 11px 15px;
    background: linear-gradient(150deg, #142732 0%, #0a141a 55%, #060a0d 100%);
    color: var(--cyan-bright);
    text-decoration: none;
    font-size: 22px;
    letter-spacing: 0.5px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor: default;
    border-right: 10px solid #8ec3ec;
    border-left: 10px solid #19232b;
    border-top: 10px solid #19232b;
    border-bottom: 10px solid #19232b;

  }

a.msg-tile{
    cursor: pointer;
    text-decoration: none;
  }

a.msg-tile:hover{
    border-color: var(--cyan-bright);
    transform: translate(-2px, -2px);
    box-shadow:
      9px 9px 0 rgba(59,95,110,0.7),
      0 0 24px rgba(143,216,234,0.4);
  }

.msg-icon{
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.msg-icon svg{
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px rgba(143,216,234,0.55));
  }

.msg-subject{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
  }

.masthead-block,
  .confidential-line,
  .msg-subject{
    animation: glowPulse 3.4s ease-in-out infinite;
  }

.inbox-col:nth-child(1) .msg-tile:nth-child(1){ animation-delay: 0s; }

.inbox-col:nth-child(1) .msg-tile:nth-child(2){ animation-delay: 0.3s; }

.inbox-col:nth-child(1) .msg-tile:nth-child(3){ animation-delay: 0.6s; }

.inbox-col:nth-child(1) .msg-tile:nth-child(4){ animation-delay: 0.9s; }

.inbox-col:nth-child(2) .msg-tile:nth-child(1){ animation-delay: 0.15s; }

.inbox-col:nth-child(2) .msg-tile:nth-child(2){ animation-delay: 0.45s; }

.inbox-col:nth-child(2) .msg-tile:nth-child(3){ animation-delay: 0.75s; }


/* ---------- Responsive: shared breakpoint ---------- */

@media (max-width: 1400px){
    .confidential-line {
      letter-spacing: 27.5px;
    }
  }


/* ---------- Responsive: tablet / narrow desktop ---------- */
@media (max-width: 900px){
  body:has(.email-card){
      padding: 32px 28px 56px;
    }

  body:has(.inbox-grid){
      padding: 32px 28px 72px;
    }

  .avatar-box{
      width: 150px;
      min-width: 223px;
    }

  .confidential-line {
      letter-spacing: 19px;
    }

  .inbox-grid{
      gap: 36px;
    }

  .msg-tile{
      /* min-height: 110px;
      padding: 18px 22px;
      font-size: 18px; */
    }

  .msg-icon{
      width: 42px;
      height: 42px;
    }

  .inbox-col.offset{
      margin-top: 64px;
    }
}


/* ---------- Responsive: phone (two-column layout kept) ---------- */
@media (max-width: 640px), (min-width: 641px){
  body:has(.email-card){
      padding: 22px 16px 48px;
    }

  body:has(.inbox-grid){
      padding: 22px 16px 64px;
    }

  .masthead-block{
      font-size: 12px;
      line-height: 1.6;
      letter-spacing: 1px;
    }

  .logo-ring{
      width: 46px;
      height: 46px;
    }

  .confidential-line{
      font-size: 11px;
      letter-spacing: 8px;
    }

  .dashed-line{
      margin: 12px 0;
    }

  /* thread pages only */

  .nav-row{
      gap: 8px;
      margin-bottom: 26px;
    }

  .nav-btn{
      font-size: 11px;
      letter-spacing: 1px;
      padding: 9px 0;
      border-width: 2px;
    }

  .subject-line{
      font-size: 16px;
      margin: 0 0 16px 2px;
    }

  .avatar-box{
      width: 117px;
      min-width: 143px;
    }

  .sender-mark{
      width: 28px;
      height: 28px;
    }

  .sender-bar{
      padding: 10px 12px;
      gap: 8px;
      border-right-width: 2px;
    }

  .email-card.reverse .sender-bar{
      border-left-width: 2px;
    }

  .sender-name{
      font-size: 15px;
    }

  .sender-role{
      font-size: 10px;
      letter-spacing: 1px;
    }

  .meta-bar{
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.5;
      border-right-width: 2px;
    }

  .email-card.reverse .meta-bar{
      border-left-width: 2px;
    }

  .body-box{
      padding: 16px 14px;
      font-size: 15px;
      line-height: 1.6;
    }

  .body-box p{
      margin: 0 0 12px;
    }

  /* Juno's font runs smaller, so bump it; 17px x 1.41 keeps the same 24px
     line spacing as the other cards (15px x 1.6). */
  .email-card.from-juno .body-box{
      font-size: 17px;
      line-height: 1.41;
    }

  /* inbox page only */

  .inbox-col {
      display: inherit;
    }

  .inbox-wrap{
      margin-top: 32px;
    }

  .msg-tile{
      /* min-height: 88px;
      padding: 14px 18px;
      font-size: 14px;
      gap: 14px; */
    }

  .msg-icon{
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
}


/* ---------- Responsive: small phone (inbox page stacks to one column) ---------- */

@media (max-width: 560px), (min-width: 641px){
    .inbox-grid{
      flex-direction: row;
      gap: 16px;
    }

    .msg-border {
      display: inline-block;
      width: 100%;
      padding: 0px 0px;
      font-size: 12px;
      border-right: 5px solid #8ec3ec;
      border-left: 5px solid #19232b;
      border-top: 5px solid #19232b;
      border-bottom: 5px solid #19232b;
    }

    .msg-icon {
      display: inline-block;
      vertical-align: middle;
    }

    .inbox-col{
      gap: 38px;
    }

    .inbox-col.offset {
      gap: 0;
      margin-top: 0;

    }

    .inbox-col.offset .msg-tile {
      margin-top: 44px;

    }

    /* .inbox-col.offset{
      margin-top: 0;
    } */
  }


/* ==========================================================================
   Login page
   ========================================================================== */

.login-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 80px;
  }

.login-panel{
    width: 100%;
    max-width: 420px;
    border: 2px solid var(--cyan);
    background: var(--panel);
    padding: 32px 30px;
    box-shadow: 0 0 18px rgba(60,110,125,0.25);
  }

.login-title{
    margin: 0 0 22px;
  }

.login-form{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

.login-field{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

.login-label{
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--cyan-dim);
    font-weight: 400;
  }

.login-input{
    background: #0a1018;
    border: 2px solid var(--border);
    color: var(--cyan-bright);
    font-family: 'Thermochrome', 'Courier New', monospace;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 10px 12px;
    outline: none;
  }

.login-input:focus{
    border-color: var(--cyan);
    box-shadow: 0 0 8px rgba(143,216,234,0.35);
  }

.login-input:disabled{
    border-color: var(--border-dim);
    color: var(--cyan-dim);
    cursor: not-allowed;
    opacity: 0.6;
  }

.login-lock-hint{
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--cyan-dim);
    font-style: italic;
  }

.login-lock-hint[hidden]{
    display: none;
  }

.login-submit{
    margin-top: 6px;
    text-decoration: none;
    text-align: center;
    padding: 13px 0;
    background: linear-gradient(180deg, #0c1620, #060b10);
    border: 3px solid var(--cyan);
    border-radius: 3px;
    cursor: pointer;
    box-shadow: inset 0 0 12px rgba(79,125,140,0.15);
    transition: box-shadow .2s ease, border-color .2s ease;
    font-size: 18px;
    font-family: 'Thermochrome', 'Thermochrome';
    letter-spacing: 2px;
    color: var(--cyan);
    font-weight: 400;
  }

.login-submit:hover{
    box-shadow: 0 0 14px rgba(143,216,234,0.35), inset 0 0 12px rgba(79,125,140,0.25);
  }

.login-error{
    display: none;
    color: #ff6b6b;
    font-size: 14px;
    letter-spacing: 0.5px;
  }

.login-error.visible{
    display: block;
  }

@media (max-width: 640px), (min-width: 641px){
  .login-wrap{
      margin-top: 40px;
    }

  .login-panel{
      padding: 24px 20px;
    }
}


/* ==========================================================================
   Login page: identity puzzle
   ========================================================================== */

.puzzle-hint{
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--cyan-dim);
    margin: 0 0 20px;
  }

.puzzle-icons{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
  }

.puzzle-icon-btn{
    flex: 1;
    aspect-ratio: 1;
    background: linear-gradient(180deg, #0c1620, #060b10);
    border: 2px solid var(--border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .1s ease;
  }

.puzzle-icon-btn:hover{
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(143,216,234,0.3);
  }

.puzzle-icon-btn:active{
    transform: scale(0.94);
  }

.puzzle-icon-btn:disabled{
    cursor: default;
  }

.puzzle-icon-shape{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(143,216,234,0.35));
    transition: filter .25s ease;
  }

.puzzle-icon-btn.is-lit{
    border-color: var(--cyan-bright);
    box-shadow: 0 0 14px rgba(143,216,234,0.5);
  }

.puzzle-icon-btn.is-lit .puzzle-icon-shape{
    filter: drop-shadow(0 0 8px rgba(143,216,234,0.9)) brightness(1.25);
  }

.puzzle-icon-btn.is-wrong{
    border-color: #ff6b6b;
    box-shadow: 0 0 14px rgba(255,107,107,0.45);
    animation: puzzleShake .4s ease;
  }

.puzzle-icon-btn.is-wrong .puzzle-icon-shape{
    filter: sepia(1) saturate(6) hue-rotate(-58deg) brightness(1.05) drop-shadow(0 0 8px rgba(255,107,107,0.7));
  }

@keyframes puzzleShake{
    0%, 100%{ transform: translateX(0); }
    25%{ transform: translateX(-4px); }
    75%{ transform: translateX(4px); }
  }

.puzzle-readout{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0a1018;
    border: 2px solid var(--border);
    padding: 12px 14px;
  }

.puzzle-code{
    flex: 1;
    text-align: center;
    font-family: 'Thermochrome', 'Courier New', monospace;
    font-size: 17px;
    letter-spacing: 3px;
    color: var(--cyan-dim);
    word-break: break-all;
  }

.puzzle-code.is-solved{
    color: var(--cyan-bright);
  }

.puzzle-reset{
    display: block;
    text-align: center;
    margin: 14px auto 0;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--cyan-dim);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
  }

.puzzle-reset[hidden]{
    display: none;
  }

/* Separates the puzzle from the password field beneath it, now that
   they live in one combined panel. */
.login-form{
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border-dim);
  }

@media (max-width: 640px), (min-width: 641px){
  .puzzle-icons{
      gap: 8px;
    }

  .puzzle-icon-btn{
      padding: 10px;
    }

  .puzzle-code{
      font-size: 15px;
    }
}