@import url("https://fonts.googleapis.com/css2?family=PT+Mono&display=swap");

/* ==========================================================================
   HOTLINE CAFE // BUTTONS
   Page-specific skin. Load AFTER the shared hotline.css.
   Parent = Home layout and behaviour. This file only redecorates the room.
   ========================================================================== */

:root{
  --buttons-cyan:#00cdd4;
  --buttons-red:#ff0d50;
  --buttons-navy:#061f55;
  --buttons-deep:#04133d;
  --buttons-pale:#c8fbff;
  --buttons-mint:#77fff0;
}

/* --------------------------------------------------------------------------
   WALLPAPER
   Separate fixed layer deliberately wins over hotline.css's body background.
   -------------------------------------------------------------------------- */
html,body{
  background:#00cdd4!important;
  background-color:#00cdd4!important;
}

.template-gradient{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(270deg,#00cdd4,#ff0d50);
  background-size:400% 400%;
  -webkit-animation:buttonsGradient 15s ease infinite;
  animation:buttonsGradient 15s ease infinite;
}

@-webkit-keyframes buttonsGradient{
  0%{background-position:76% 0}
  50%{background-position:25% 100%}
  100%{background-position:76% 0}
}
@keyframes buttonsGradient{
  0%{background-position:76% 0}
  50%{background-position:25% 100%}
  100%{background-position:76% 0}
}

.signature-banner{z-index:1!important}
.page-shell{position:relative;z-index:2!important}

/* --------------------------------------------------------------------------
   HERO
   Keep Home's geometry. The dedicated Buttons artwork is fitted INSIDE the
   existing hero image box rather than changing header/menu flow.
   -------------------------------------------------------------------------- */
.hero.hero-free{
  /* Do not introduce page-specific margins/padding/min-height here.
     hotline.css remains authoritative for the menu's Y position. */
}

.hero-logo-link{
  /* Preserve the parent template's footprint. */
}

.hero-logo{
  object-fit:contain;
  object-position:center;
  max-height:100%;
}

.hero-sub{
  color:#d9ffff!important;
  text-shadow:1px 1px 0 #a60035,0 0 6px rgba(255,13,80,.68)!important;
}

/* --------------------------------------------------------------------------
   MAIN MENU + SUBMENUS
   Same machinery as Home, distinct Buttons-page skin.
   -------------------------------------------------------------------------- */
.main-menu{
  background:rgba(6,31,85,.68)!important;
  border-top:1px solid rgba(0,205,212,.62)!important;
  border-bottom:1px solid rgba(0,205,212,.62)!important;
  box-shadow:none!important;
}

.main-menu.stuck{
  background:rgba(6,31,85,.92)!important;
  box-shadow:0 2px 0 var(--buttons-red),0 0 12px rgba(255,13,80,.42)!important;
}

.main-menu .menu-main{
  color:var(--buttons-cyan)!important;
  text-shadow:1px 1px 0 #005f75,0 0 5px rgba(0,205,212,.78)!important;
}

.main-menu .menu-main:hover,
.main-menu .menu-main:focus-visible,
.main-menu .menu-main.active{
  color:#fff!important;
  background:rgba(255,13,80,.78)!important;
  text-shadow:1px 1px 0 #760027,0 0 7px rgba(255,255,255,.72)!important;
}

.main-menu .menu-main.active:not(:hover){
  animation:none!important;
}

.submenu{
  background:rgba(6,31,85,.94)!important;
  border-color:rgba(0,205,212,.65)!important;
  box-shadow:2px 2px 0 rgba(255,13,80,.8)!important;
}
.submenu a{
  color:var(--buttons-cyan)!important;
  text-shadow:0 0 5px rgba(0,205,212,.62)!important;
}
.submenu a:hover,
.submenu a:focus-visible{
  color:#fff!important;
  background:rgba(255,13,80,.62)!important;
}

/* --------------------------------------------------------------------------
   CONTENT PANELS
   -------------------------------------------------------------------------- */
.content section,
.reveal{
  border-color:rgba(0,205,212,.42)!important;
}

.section-title{
  color:var(--buttons-pale)!important;
  background:rgba(6,31,85,.72)!important;
  border-color:rgba(0,205,212,.62)!important;
  box-shadow:2px 2px 0 rgba(255,13,80,.72)!important;
  text-shadow:1px 1px 0 #8c002e,0 0 5px rgba(0,205,212,.45)!important;
}
.section-title small{color:var(--buttons-cyan)!important}

.button-intro{text-align:center}
.button-intro p{max-width:610px;margin:8px auto}
.cloud-instructions{font-size:10px;letter-spacing:.04em;color:#d0fcff}
.cloud-instructions strong{color:var(--buttons-mint)}

/* --------------------------------------------------------------------------
   THE 88x31 DISCOVERY FIELD
   Tall by design: intended to accommodate hundreds more buttons later.
   -------------------------------------------------------------------------- */
.button-cloud-shell{
  position:relative!important;
  width:100%!important;
  height:2000px!important;
  min-height:2000px!important;
  margin:10px auto 14px!important;
  overflow:hidden!important;
  contain:layout paint;
  isolation:isolate;
  cursor:crosshair;
  border:1px solid rgba(0,205,212,.82)!important;
  background:
    radial-gradient(circle at 50% 22%,rgba(0,205,212,.14),transparent 28%),
    radial-gradient(circle at 30% 68%,rgba(255,13,80,.08),transparent 32%),
    linear-gradient(rgba(4,19,61,.52),rgba(2,11,44,.68))!important;
  box-shadow:
    3px 3px 0 var(--buttons-red),
    0 0 14px rgba(0,205,212,.24),
    inset 0 0 65px rgba(0,0,35,.62)!important;
}

.button-cloud-shell:before{
  content:"88 × 31 DISCOVERY FIELD  //  MOVE CURSOR TO BLOW THROUGH THE CLOUD";
  position:absolute;
  left:9px;top:7px;
  z-index:1;
  color:rgba(200,251,255,.58);
  font:8px 'PT Mono',monospace;
  letter-spacing:.08em;
  pointer-events:none;
}

.button-cloud-shell:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,205,212,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,205,212,.035) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 92%);
  mask-image:radial-gradient(ellipse at center,#000 15%,transparent 92%);
}

#button-cloud{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:hidden!important;
  z-index:2;
}

#button-cloud > a.cloud-button{
  position:absolute!important;
  display:block!important;
  float:none!important;
  left:0!important;
  top:0!important;
  width:88px!important;
  height:31px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  line-height:0!important;
  transform-origin:50% 50%!important;
  will-change:transform,opacity;
  transition:none!important;
}

#button-cloud > a.cloud-button > img{
  display:block!important;
  width:88px!important;
  height:31px!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transition:filter .14s ease,box-shadow .14s ease!important;
}

#button-cloud > a.cloud-button:hover,
#button-cloud > a.cloud-button:focus-visible{
  z-index:1000!important;
}

#button-cloud > a.cloud-button:hover > img,
#button-cloud > a.cloud-button:focus-visible > img{
  filter:
    brightness(1.34)
    saturate(1.3)
    drop-shadow(0 0 4px var(--buttons-cyan))
    drop-shadow(0 0 9px rgba(255,13,80,.86))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.82)!important;
}

.cloud-cursor{
  position:absolute;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border:1px solid rgba(0,205,212,.76);
  border-radius:50%;
  box-shadow:0 0 12px rgba(0,205,212,.72),0 0 20px rgba(255,13,80,.26);
  pointer-events:none;
  z-index:2000;
  opacity:0;
  transition:opacity .15s ease;
}
.button-cloud-shell.pointer-active .cloud-cursor{opacity:.75}

/* --------------------------------------------------------------------------
   FIELD CONTROLS
   One obvious control above, one below. Big enough to feel like machinery.
   -------------------------------------------------------------------------- */
.cloud-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
  margin:13px auto;
  padding:9px 8px;
  box-sizing:border-box;
  background:rgba(6,31,85,.56);
  border-top:1px solid rgba(0,205,212,.42);
  border-bottom:1px solid rgba(255,13,80,.42);
}

.cloud-toolbar-top{margin-bottom:12px}
.cloud-toolbar-bottom{margin-top:12px}

.cloud-big-button{
  min-width:180px;
  min-height:38px;
  padding:8px 16px;
  cursor:pointer;
  font:900 12px 'PT Mono',monospace;
  letter-spacing:.07em;
  color:#eaffff;
  background:linear-gradient(180deg,rgba(0,205,212,.36),rgba(6,31,85,.94));
  border:1px solid var(--buttons-cyan);
  box-shadow:3px 3px 0 var(--buttons-red);
  text-shadow:1px 1px 0 #004d65,0 0 5px rgba(0,205,212,.8);
}

.cloud-big-button:hover,
.cloud-big-button:focus-visible{
  color:#fff;
  background:linear-gradient(180deg,rgba(255,13,80,.72),rgba(6,31,85,.94));
  border-color:#fff;
  box-shadow:4px 4px 0 var(--buttons-cyan),0 0 10px rgba(255,13,80,.62);
  transform:translate(-1px,-1px);
}

.cloud-big-button:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--buttons-cyan);
}

.cloud-toolbar-note{
  color:#aef9ff;
  font-size:9px;
  letter-spacing:.04em;
  opacity:.78;
}

#cloud-status{
  color:var(--buttons-mint);
  font-size:10px;
  font-weight:bold;
  text-shadow:0 0 5px rgba(0,205,212,.68);
}

/* --------------------------------------------------------------------------
   HOTLINE RADIO // BUTTONS SKIN
   -------------------------------------------------------------------------- */
#hotline-radio.radio{
  background:rgba(4,19,61,.94)!important;
  border-color:var(--buttons-cyan)!important;
  box-shadow:3px 3px 0 var(--buttons-red),0 0 12px rgba(0,205,212,.34)!important;
}

.radio-head{
  color:#fff!important;
  background:linear-gradient(90deg,#006f87,#ff0d50)!important;
  border-bottom-color:rgba(255,255,255,.42)!important;
  text-shadow:1px 1px 0 #4c0020!important;
}

.radio-titlebar-buttons button{
  color:#fff!important;
  background:#061f55!important;
  border-color:#00cdd4!important;
}

.radio-display{
  color:var(--buttons-mint)!important;
  background:#020b2c!important;
  border-color:rgba(0,205,212,.6)!important;
  text-shadow:0 0 5px rgba(0,205,212,.7)!important;
}

.radio-controls button{
  color:#d9ffff!important;
  background:#061f55!important;
  border-color:#00cdd4!important;
  box-shadow:1px 1px 0 rgba(255,13,80,.8)!important;
}
.radio-controls button:hover{
  color:#fff!important;
  background:#9d0b48!important;
  box-shadow:2px 2px 0 #00cdd4!important;
}

.radio-download{
  color:#00cdd4!important;
  background:#04133d!important;
  border-color:#008f9e!important;
}
.radio-download:hover{
  color:#fff!important;
  border-color:#ff0d50!important;
  box-shadow:0 0 7px rgba(255,13,80,.72)!important;
}

.radio-volume,
.radio-hint{color:#aef9ff!important}

/* --------------------------------------------------------------------------
   SITE DIRECTORY + FOOTER
   -------------------------------------------------------------------------- */
.directory{
  background:rgba(4,19,61,.66)!important;
}
.site-map a{
  color:var(--buttons-cyan)!important;
}
.site-map a:hover{
  color:#fff!important;
  text-shadow:0 0 6px var(--buttons-red)!important;
}

footer{
  color:#d4fdff!important;
  background:rgba(4,19,61,.82)!important;
  border-color:rgba(0,205,212,.52)!important;
  box-shadow:0 -2px 0 rgba(255,13,80,.48)!important;
}
footer a{color:var(--buttons-cyan)!important}
footer a:hover{color:#fff!important;text-shadow:0 0 6px var(--buttons-red)!important}

/* Mobile gets the full field too. It is intentionally a long exploration
   surface, not collapsed into a conventional grid. */
@media(max-width:660px){
  .button-cloud-shell{
    height:2000px!important;
    min-height:2000px!important;
  }
  .cloud-toolbar{
    flex-direction:column;
    gap:7px;
  }
  .cloud-big-button{
    width:min(280px,92%);
  }
  .cloud-toolbar-note{text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .template-gradient{animation:none}
}


/* ==========================================================================
   V4 // FIELD-FIRST LAYOUT
   Matrix is the first content section. Controls live together underneath it.
   ========================================================================== */

.cloud-toolbar-bottom{
  margin-top:12px!important;
  margin-bottom:0!important;
  justify-content:center!important;
  gap:18px!important;
  background:rgba(6,31,85,.62)!important;
  border:1px solid rgba(0,205,212,.46)!important;
  border-bottom:0!important;
  padding:12px 10px!important;
}

.cloud-statusbar{
  display:grid;
  grid-template-columns:1fr auto 18px;
  align-items:stretch;
  min-height:24px;
  margin:0 0 14px;
  padding:2px;
  box-sizing:border-box;
  color:#d8ffff;
  background:#c0c0c0;
  border-top:2px solid #fff;
  border-left:2px solid #fff;
  border-right:2px solid #404040;
  border-bottom:2px solid #404040;
  font:9px 'PT Mono',monospace;
  text-shadow:none;
}

.cloud-statusbar-panel{
  display:flex;
  align-items:center;
  min-height:18px;
  padding:1px 6px;
  color:#061f55!important;
  background:#c0c0c0;
  border-top:1px solid #808080;
  border-left:1px solid #808080;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  box-sizing:border-box;
}

.cloud-status-count{
  min-width:190px;
  color:#303030!important;
}

.cloud-statusbar-grip{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  overflow:hidden;
  color:#808080;
  font-family:monospace;
  font-size:9px;
  line-height:9px;
  letter-spacing:-3px;
}

.button-contact{
  text-align:center;
}

.button-contact p{
  margin:14px auto;
  font-size:12px;
}

.button-contact a{
  color:var(--buttons-cyan)!important;
  font-weight:bold;
  text-shadow:0 0 5px rgba(0,205,212,.72);
}

.button-contact a:hover,
.button-contact a:focus-visible{
  color:#fff!important;
  background:var(--buttons-red);
  text-shadow:0 0 6px rgba(255,255,255,.72);
}

@media(max-width:660px){
  .cloud-toolbar-bottom{
    gap:9px!important;
  }
  .cloud-statusbar{
    grid-template-columns:1fr 16px;
  }
  .cloud-status-count{
    display:none;
  }
}


/* ==========================================================================
   V5 // BUTTON FIELD TUNING
   ========================================================================== */

/* More vertical habitat for the growing 88x31 population. */
.button-cloud-shell{
  height:2400px!important;
  min-height:2400px!important;
}

/* Both field controls use the requested hot pink. */
.cloud-big-button{
  color:#fff!important;
  background:#fc0061!important;
  border-color:#fc0061!important;
  box-shadow:3px 3px 0 #061f55!important;
  text-shadow:1px 1px 0 #79002f!important;
}

.cloud-big-button:hover,
.cloud-big-button:focus-visible{
  color:#fff!important;
  background:#fc0061!important;
  border-color:#fff!important;
  box-shadow:4px 4px 0 #061f55,0 0 10px rgba(252,0,97,.72)!important;
}

.cloud-big-button:active{
  background:#fc0061!important;
  box-shadow:1px 1px 0 #061f55!important;
}

/* Radio: pull cyan back and let navy + hot pink do most of the work. */
#hotline-radio.radio{
  background:rgba(4,19,61,.96)!important;
  border-color:#fc0061!important;
  box-shadow:3px 3px 0 #fc0061,0 0 10px rgba(252,0,97,.30)!important;
}

.radio-head{
  color:#fff!important;
  background:linear-gradient(90deg,#061f55,#fc0061)!important;
  border-bottom-color:rgba(255,255,255,.28)!important;
  text-shadow:1px 1px 0 #4c0020!important;
}

.radio-titlebar-buttons button{
  color:#fff!important;
  background:#061f55!important;
  border-color:#fc0061!important;
}

.radio-display{
  color:#f4e9ff!important;
  background:#020b2c!important;
  border-color:rgba(252,0,97,.55)!important;
  text-shadow:0 0 5px rgba(252,0,97,.42)!important;
}

.radio-controls button{
  color:#f8efff!important;
  background:#061f55!important;
  border-color:#7f3158!important;
  box-shadow:1px 1px 0 rgba(252,0,97,.72)!important;
}

.radio-controls button:hover{
  color:#fff!important;
  background:#a10046!important;
  border-color:#fc0061!important;
  box-shadow:2px 2px 0 #3b174a!important;
}

.radio-download{
  color:#ffd8e8!important;
  background:#04133d!important;
  border-color:#a10046!important;
}

.radio-download:hover{
  color:#fff!important;
  border-color:#fc0061!important;
  box-shadow:0 0 7px rgba(252,0,97,.72)!important;
}

.radio-volume,
.radio-hint{
  color:#d9cce5!important;
}

/* Keep the full 2400px exploration field on narrow screens too. */
@media(max-width:660px){
  .button-cloud-shell{
    height:2400px!important;
    min-height:2400px!important;
  }
}


/* ==========================================================================
   V6 // ELECTRIC BLUE ACCENT
   ========================================================================== */

:root{
  --buttons-electric-blue:#0048ff;
}

/* Taller discovery field. */
.button-cloud-shell{
  height:3000px!important;
  min-height:3000px!important;
}

@media(max-width:660px){
  .button-cloud-shell{
    height:3000px!important;
    min-height:3000px!important;
  }
}

/* Calm / Reshuffle keep their hot-pink faces, now with electric-blue shadows. */
.cloud-big-button{
  box-shadow:3px 3px 0 #0048ff!important;
}

.cloud-big-button:hover,
.cloud-big-button:focus-visible{
  box-shadow:4px 4px 0 #0048ff,0 0 11px rgba(0,72,255,.72)!important;
}

.cloud-big-button:active{
  box-shadow:1px 1px 0 #0048ff!important;
}

/* Radio: electric blue is used as the shadow/accent rather than cyan. */
#hotline-radio.radio{
  box-shadow:3px 3px 0 #0048ff,0 0 11px rgba(0,72,255,.34)!important;
}

.radio-controls button{
  box-shadow:1px 1px 0 #0048ff!important;
}

.radio-controls button:hover{
  box-shadow:2px 2px 0 #0048ff!important;
}

.radio-download:hover{
  box-shadow:2px 2px 0 #0048ff,0 0 7px rgba(0,72,255,.48)!important;
}

/* Main-menu submenus: replace their previous cyan family with #0048ff. */
.submenu{
  border-color:#0048ff!important;
  box-shadow:2px 2px 0 #0048ff!important;
}

.submenu a{
  color:#00ffff!important;
  text-shadow:0 0 5px rgba(0,72,255,.62)!important;
}

.submenu a:hover,
.submenu a:focus-visible,
.submenu a.active{
  color:#fff!important;
  background:#0048ff!important;
  text-shadow:0 0 6px rgba(255,255,255,.68)!important;
}


/* ==========================================================================
   V7 // FONT RELIABILITY
   ========================================================================== */
html,body,
button,input,select,textarea,
.main-menu,.submenu,
.button-cloud-shell,.cloud-toolbar,
#hotline-radio,.directory,footer{
  font-family:"PT Mono",monospace!important;
}