@font-face {
  font-family: "iceland";
  src: url("/assets/fonts/IcelandWinterstorm.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "oldeng";
  src: url("/assets/fonts/OLDENGL.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "venice";
  src: url("/assets/fonts/VeniceClassic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* ← removed stray hyphen */
}

html, body {
  min-width: 800px;
  overflow-x: auto;
  margin: 0;
  padding: 0;
  height: 100vh;
  background-image: url(/assets/backgrounds/bg-blue-01.jpg);
  color: #0b2350;
  position: relative; 
  overflow: hidden;
}

.outer-lace {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1100px;    
  height: 785px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  overflow: visible;
  z-index: 0;
}

.border {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 935px;
  height: 460px;
  transform: translate(-50%, -50%);
  background-color: #222;
  border: 3px solid black;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: 80px 1fr;
  gap: 0 15px;
  z-index: 1;
  overflow: visible;
}
/*《 HEADER 》*/
header {
  position: relative;  
  grid-column: 1 / -1;
  background: #2c2c2c url("../assets/backgrounds/gingham-02.jpg") repeat;
  background-size: 600px;
  padding: 10px 20px 0 20px; 
  font-size: 3rem;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 0;
  z-index: 5;           
  color: white;           
}

.text {
  font-family: "iceland", monospace, sans-serif;
  font-size: 7rem;        
  margin-left: -25px;
  filter:
    drop-shadow(0 0 2px black)
    drop-shadow(0 -1px black)
    drop-shadow(0 1px black)
    drop-shadow(0 0 black)
    drop-shadow(0 1px black);
  z-index: 10;
}

header::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 40px; 
  background: url("../assets/lace/hrz-lace-01.png") repeat-x center;
  background-size: contain;
  pointer-events: none;
  z-index: 8;
}
/*《 HEADER DECO 》*/
.bow {
  position: absolute;  
  right: 670px;
  top: -70px;
  z-index: 10;
  width: 320px; 
  height: auto; 
  z-index: 10;
}

.warui {
  position: absolute;  
  right: 0;
  bottom: -5px;
  z-index: 10;
  width: 280px; 
  height: auto; 
}

/*《 SIDEBAR 》*/
.sidebar {
  position: relative;
  background-color: #415a7a;
  border: 5px solid #344058;
  padding: 15px;
  font-family: monospace;
  font-size: 0.85rem;
  color: #ddd;
  text-align: center;
  border-radius: 0;
  height: 334px;
}

#icon {
  background: url("/assets/site-jpgs/kafka.jpg") center / cover no-repeat;
  height: 45px;
  width: 45px;
  border: 15px solid transparent;
  border-image: url("/assets/borders/lace-bdr-05.png") 33 round;
  padding: 20px;
  margin: 20px auto;  
  bottom: 25px;
  position: relative;
  display: block;  
}

#nav-divider {
  position: absolute;
  bottom: 218px;
  left: 50%;          
  transform: translateX(-50%);  
  width: 120px;
  height: 20px;
  margin:  auto;     
  z-index: 900;
  background: url("/assets/dividers/dvr-02.png") center / 400% no-repeat;
  overflow: hidden;
}

/*《 BUTTONS 》*/
.button {
  position: relative;
  bottom: 24px;
  background-image: url("/assets/buttons/button-11.png");
  background-size: contain;      
  background-position: center;
  background-repeat: no-repeat;  
  color: #1b3955;
  font-size: 1.5rem;
  font-family: "venice", sans-serif;
  text-decoration: none;
  width: 140px;
  height: 30px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.errorbutton {
  position: relative;
  bottom: 24px;
  background-image: url("/assets/buttons/button-11.png");
  background-size: contain;      
  background-position: center;
  background-repeat: no-repeat;  
  color: #1b3955;
  font-size: 1.5rem;
  font-family: "venice", sans-serif;
  text-decoration: none;
  width: 140px;
  height: 30px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  filter: grayscale(100%);

}

.button:hover {
  color: #316291; /* change this to whatever color you want */
}
/*《 SIDE-BAR LACE 》*/
.sidebar-lace-edge {
  position: absolute;
  top: 0;
  left: 175px;      
  height: 369px;
  display: flex;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

.lace-part {
  height: 100%;
  background-repeat: repeat-y;
  background-position: center;
  background-size: contain;
}

.lace-part.first {
  width: 17px;
  background-image: url("/assets/lace/vert-lace-03.png");
  background-size: 18px auto;
  z-index: 4;
}

.lace-part.second {
  width: 40px;
  margin-left: -15px;
  background-image: url("/assets/lace/vert-lace-01.png");
  background-size: 35px auto;
}

.right-sidebar .sidebar-lace-edge {
  left: auto;
  right: 175px;
  transform: scaleX(-1);
}

/*《 MAIN CONTENT AREA 》*/
.main-content {
  background-color: #141414;
  padding: 20px;
  height: 100%;    
  width: 400px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden; 
}

.main-content h1 {
  font-family: "iceland", sans-serif;
  font-weight: normal;
  font-size: 2.3rem;
  filter:
    drop-shadow(0 0 1px black)
    drop-shadow(0 -1px black)
    drop-shadow(0 1px black)
    drop-shadow(0 0 black)
    drop-shadow(0 1px black);
  color: white;
  margin-bottom: -1%;
  margin-left: 20%;
  margin-right: 20%
}

.main-content p {
  margin-left: 9%;
  width: 299px;
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
  color: white;
}

.main-content p i {
  margin-left: -4px;
  font-size: 11.1px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 0.8;
  color: white;
}


.divider {
  display: block;
  width: 100%;        
  height: auto;
  margin: -3px auto;  
}

/*《 UPDATES 》*/
#updates {
  background: url("/assets/backgrounds/bg-blue-07.jpg") repeat;
  background-size: 35px;
  border: 3px solid #2d455b;
  border-radius: 2px;
  width: 143px;
  padding: 4px 0 0 0;        
  margin: 10px auto 0 auto; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.updates-lace {
  background: url("/assets/lace/hrz-lace-03.png") repeat-x;
  background-size: auto 100%;
  width: 100%;
  height: 16px;            
  margin: 0;
  padding: 0;
}

.updates-lace-top {
  margin-top: 0;
  position: relative;
  top: -4px;               
}

.updates-lace-low {
  margin-top: 0px;          
  transform: scaleY(-1);
}

#updates-text {
  font-family: "iceland", monospace, sans-serif;
  font-size: 2.4rem; 
  color: black;
  filter:
    drop-shadow(0 0 1px white)
    drop-shadow(0 -1px white)
    drop-shadow(0 1px white)
    drop-shadow(0 0 white)
    drop-shadow(0 1px white);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 0;
  line-height: 1.1;
  height: 2rem;             /* fix height */
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Updates box */
#updates-box {
  background: url("/assets/backgrounds/bg-blue-08.jpg") repeat;
  background-size: 21.2px;
  border: 3px solid #162635;
  border-radius: 2px;
  width: 143px;
  height: 256px;
  padding: 16px;
  margin: 1px auto 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
  box-sizing: border-box;
}

#box-text {
  height: 70px;
  padding: 3px 20px 0 20px;
  margin: -30px -30px;
  box-sizing: border-box;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

/*《 SITE BORDERS 》*/
#topborder {
  background-image: url("https://i.postimg.cc/4yymK17v/Bottom-Lace-01.png");
  background-repeat: repeat-x;
  height: 30px;
  width: 100%;
  position: fixed;
  right: 0;
  top: 28px;   
  z-index: 10;
  transform: scaleY(-1);
}

#bottomborder {
  background-image: url("https://i.postimg.cc/4yymK17v/Bottom-Lace-01.png");
  background-repeat: repeat-x;
  border-bottom: 18px solid black;
  height: 30px;
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10;
}

#bottomtext {
  position: fixed;
  bottom: 0px;      
  width: 100%;
  text-align: center;
  left: 1px;
  text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333;
  font-size: 15px;
  letter-spacing: 3px;
  color: white;
  pointer-events: none;
  z-index: 11;
}

/*《 SCROLLBAR SETTINGS 》*/
::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  background: black;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #142e67;
  border-radius: 10px;
  border: 1px solid #09204f;
}
::-webkit-scrollbar-track {
  border: 1px solid #09204f;
  border-radius: 10px;
}


/* ===== Music player (top, blue theme) — compact & centered with side gutters ===== */
#music-player{
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 30px;
  background:#000; color:#fff; border:0;
  display:flex; align-items:center; gap:12px;
  /* create centered content without extra markup */
  padding-block: 4px;
  /* responsive left/right padding: grow until ~1100px content width */
  padding-inline: clamp(8px, calc((100vw - 1280px) / 2), 24px);
  box-sizing:border-box; z-index:11;
}

/* Controls */
#music-player #controls{
  display:flex; align-items:center; gap:10px;
}
#music-player #controls button{
  width:24px; height:24px; position:relative;
  background:transparent; border:0; cursor:pointer; padding:0; line-height:0;
}

/* Prev (blue triangle + bar) */
#skip-back::before{
  content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-style:solid; border-width:6px 8px 6px 0;
  border-color:transparent #2c5ae6 transparent transparent;
}
#skip-back::after{
  content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:3px; height:12px; background:#2c5ae6;
}

/* Next (mirrored) */
#skip-forward::before{
  content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-style:solid; border-width:6px 0 6px 8px;
  border-color:transparent transparent transparent #2c5ae6;
}
#skip-forward::after{
  content:""; position:absolute; right:3px; top:50%; transform:translateY(-50%);
  width:3px; height:12px; background:#2c5ae6;
}

/* Play (blue circle) + white triangle / pause bars */
#play-pause{
  /* circle is 24px; tweak these if you resize it */
  --bar-w: 3px;          /* pause bar width */
  --bar-h: 12px;         /* pause bar height */
  --bar-gap: 5px;        /* space between bars (second bar via box-shadow) */
  --pause-nudge-x: 1px;  /* fine-tune centering (+ right / − left) */
}
#play-pause::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:24px; height:24px; border-radius:50%;
  background:#153a82; box-shadow:0 0 0 1px #0b2a66 inset, 0 0 0 1px #0b2a66;
}
/* ► triangle */
#play-pause::after{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-36%,-50%);
  width:0; height:0; border-style:solid;
  border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff;
}
/* ⏸ pause bars */
#play-pause.is-playing::after{
  border:none; width:var(--bar-w); height:var(--bar-h); background:#fff;
  left:50%; top:50%;
  transform:translate(calc(-1*((var(--bar-w)*2 + var(--bar-gap))/2) + var(--pause-nudge-x)), -50%);
  box-shadow:var(--bar-gap) 0 0 #fff;
}

/* Progress bar (slim, square, knob visible) */
#progress-bar{
  position:relative; flex:1 1 auto; height:4px; margin:0 8px;
  background:#0f2146; border:1px solid #244a9a; border-radius:0; overflow:visible;
}
#progress-fill{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background:linear-gradient(180deg,#2f58ff 0%, #2551e8 100%);
}
#progress-fill::after{
  content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:#cfd8ff; box-shadow:0 0 0 2px #244a9a;
}

/* Song info (right) */
#song-info{ display:flex; align-items:center; gap:8px; margin-left:auto; }
#song-name{ font-size:11px; }
#current-time,#total-duration{ font-size:10px; font-family:monospace; color:#e7efff; }

/* Volume (slim, square, with knob) */
#volume-slider{
  position:relative; width:120px; height:4px; background:#0f2146;
  border:1px solid #244a9a; border-radius:0; cursor:pointer; overflow:visible;
}
#volume-fill{
  position:absolute; top:0; left:0; height:100%; width:100%;
  background:linear-gradient(180deg,#2f58ff 0%, #2551e8 100%);
}
#volume-fill::after{
  content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:#cfd8ff; box-shadow:0 0 0 2px #244a9a;
}

/* Hover lift */
#music-player #controls button:hover::before,
#music-player #controls button:hover::after{ filter:brightness(1.12); }