/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
 
 :root{
  --bg:#d8e7ff;
  --panel:#e9f0ff;
  --accent:#8ba6ff;
  --dark:#0f2a5a;
  --glass:#c7d8ff;
  --control:#edf6ff;
  --shadow: rgba(0,0,0,0.25);
  font-family: "Press Start 2P", system-ui;
}

html,body{height:100%;background:radial-gradient(#1A3537,#9ECDD1);margin:0;padding:10px;}

/* Window frame */
.wmp-window{
  width: 100%;
  height: 100%;
  background:linear-gradient(#e6f0ff,#d7e8ff);
  border:4px solid #003152;
  border-radius:6px;
  box-shadow: 0 6px 18px var(--shadow);
  position:relative;
  overflow:hidden;
}

.titlebar{
  height:32px;
  background:radial-gradient(#3D87CF,#2377FF);
  color:white;
  display:flex;
  align-items:center;
  padding:0 10px;
  font-weight:bold;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}

.titlebar .title{flex:1}
.titlebar .controls{display:flex;gap:6px}
.titlebar .controls div{
  width:18px;height:18px;border-radius:3px;background:rgba(255,255,255,0.22);
  display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer
}

.main{
  display:flex;height:calc(100% - 32px);
}

.leftnav{
  width:170px;background:linear-gradient(#f6fbff,#e9f2ff);padding:10px;border-right:2px solid rgba(0,0,0,0.06);
  box-sizing:border-box;
}

.leftnav .btn{
  padding:10px;border-radius:6px;margin-bottom:8px;
  background:linear-gradient(#FFFFFF,#e6efff);
  cursor:pointer;border:1px solid rgba(0,0,0,0.06)
}

.leftnav .btn[aria-selected="true"]{
  background:linear-gradient(#cfe0ff,#9fb8ff);
  border-color:#6b8ff0
}

.content{
  flex:1;display:flex;flex-direction:column;padding:12px;box-sizing:border-box;
}

.text-area{
  background: linear-gradient(#000814, #001a4d);
  border: 6px solid #0b2b63;
  box-shadow: inset 0 -20px 40px rgba(0,0,0,0.35);
  color: #e6ecff;
  max-height: 600px;
  overflow-y: auto;
}

.text-container{
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
  overflow-y: auto;
}

.text-container h2{
  font-size: 18px;
  margin-bottom: 8px;
  color: #cfe0ff;
  text-shadow: 0 0 4px #5f7cff;
}

.text-container p{
  margin-bottom: 10px;
}

.player-top{display:flex;gap:12px;flex:1}
.video-area{
  background:#000;border-radius:4px;flex:1;display:flex;align-items:center;justify-content:center;
  position:relative;border:6px solid #0b2b63;
  box-shadow: inset 0 -20px 40px rgba(0,0,0,0.35);
}

.gif-column{
position: absolute;
top: 50px; 
right: 12px;
width: 160px;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: auto;
}

.gif-column img{
width: 100%;
height: auto;
border: 3px outset #ff99ff;
background: #000;
box-shadow: 0 0 6px #ff33ff;
}

.right-pane{
  width:200px;background:linear-gradient(#e8eefc,#dce8ff);
  border-left:2px solid rgba(0,0,0,0.06);padding:10px;box-sizing:border-box
}

.meta{margin-top:10px;font-size:13px}
.meta .title{font-weight:bold}
.meta .desc{margin-top:6px;color:#1a2b5a}

/* Controls */
.player-controls button{
  background: #001a4d;
  border: 2px outset #6f8dff;
  color: #e0e8ff;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.player-controls button:active{
  border: 2px inset #6f8dff;
  padding-top: 6px;
  padding-left: 12px;
}

.controls-bar{
  height:100px;background:linear-gradient(#f7fbff,#e9f4ff);
  border-top:2px solid rgba(0,0,0,0.06);
  display:flex;flex-direction:column;padding:10px;box-sizing:border-box
}

.controls-row{display:flex;align-items:center;gap:8px}
.big-btn{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(#fff,#dfe8ff);
  border:2px solid #6b8ff0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,0.15)
}

.small-btn{
  width:36px;height:36px;border-radius:6px;
  background:linear-gradient(#fff,#eef6ff);
  border:1px solid rgba(0,0,0,0.08);
  display:flex;align-items:center;justify-content:center;cursor:pointer
}

.status-text{
  font-size: 12px;
  margin-top: 6px;
  color: #cfd9ff;
}

.status-text.playing{
  color: #66ff99;
  text-shadow: 0 0 4px #33ff77;
}

.progress-bar{
  width: 100%;
  height: 14px;
  margin-top: 8px;
  background: #001133;
  border: 2px inset #6f8dff;
  overflow: hidden;
}

.progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(
    to right,
    #66ff99,
    #33cc66
  );
  box-shadow: inset 0 0 4px #99ffcc;
}

.now-info{font-size:13px;color:#0a234a;margin-top:6px}

.pixel{font-family:"Courier New", Courier, monospace;font-size:12px}
.editable{outline:2px dashed transparent;padding:3px}
.editable:focus{outline-color:#8bb0ff;background:#fbfeff}

.status{position:absolute;left:12px;bottom:8px;font-size:12px;color:#10204b}

@media (max-width:960px){
  .wmp-window{transform:scale(0.9);transform-origin:top left}
}

.text-container::-webkit-scrollbar{
  width: 10px;
}
.text-container::-webkit-scrollbar-track{
  background: #001133;
}
.text-container::-webkit-scrollbar-thumb{
  background: #6f8dff;
  border: 2px inset #cfe0ff;
}