/* ============ VoiMe — retro win2k pixel skin ============ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --win-face: #c6c2ba;
  --win-face-2: #d8d4cb;
  --win-face-dark: #7d7a72;
  --win-face-light: #ffffff;
  --win-shadow: #38352f;
  --title-blue-1: #0a246a;
  --title-blue-2: #3f7fd1;
  --title-blue-3: #b7d6f7;
  --accent: #ff7a28;
  --accent-dark: #c85a12;
  --ink: #14120f;
  --panel: #d9d5cb;
  --mono: "VT323", "Courier New", monospace;
  --pixel: "Press Start 2P", "Courier New", monospace;
  color-scheme: light;
  font-size: 16px;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; width:100%; height:100%;
  background: #008080;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink);
  overflow: hidden;
  image-rendering: pixelated;
}

img{ image-rendering: pixelated; }

.hidden{ display:none !important; }

::selection{ background: var(--accent); color:#fff; }

/* thin retro scrollbars everywhere */
*{ scrollbar-width: thin; scrollbar-color: var(--win-face-dark) var(--win-face); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: rgba(0,0,0,.25); }
*::-webkit-scrollbar-thumb{
  background: var(--win-face-dark);
  border: 2px solid rgba(0,0,0,.4);
}

/* ---------- shared "window" bevel look ---------- */
.win{
  width: 400px;
  background: linear-gradient(180deg, var(--win-face-2), var(--win-face));
  border: 2px solid #fff;
  border-right-color: var(--win-shadow);
  border-bottom-color: var(--win-shadow);
  box-shadow:
    inset -1px -1px 0 var(--win-shadow),
    inset 1px 1px 0 var(--win-face-light),
    0 0 0 1px rgba(0,0,0,.5),
    10px 10px 0 rgba(0,0,0,.35);
  position: relative;
  animation: winPopIn .35s ease-out;
}
@keyframes winPopIn{
  from{ transform: scale(.94) translateY(6px); opacity:0; }
  to{ transform: scale(1) translateY(0); opacity:1; }
}

.win-title{
  background: linear-gradient(90deg, var(--title-blue-1) 0%, var(--title-blue-2) 55%, var(--title-blue-3) 100%);
  color:#fff;
  font-family: var(--pixel);
  font-weight:normal;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 7px 8px;
  display:flex; justify-content:space-between; align-items:center;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.win-buttons span{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:15px; margin-left:3px;
  background:var(--win-face); color:var(--ink);
  border:1px solid #fff; border-right-color:var(--win-shadow); border-bottom-color:var(--win-shadow);
  font-family: var(--mono); font-size:13px; line-height:1;
  cursor: default;
}
.win-buttons span:active{
  border-color: var(--win-shadow) #fff #fff var(--win-shadow);
}
.win-body{ padding: 20px 22px 22px; position:relative; }

/* ---------- AUTH SCREEN ---------- */
#authScreen{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  position: relative;
  overflow: hidden;
  background-color: #e8992e;
  background-image:
    linear-gradient(45deg,  #d9821f 25%, transparent 25%),
    linear-gradient(-45deg, #d9821f 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, #d9821f 75%),
    linear-gradient(-45deg, transparent 75%, #d9821f 75%);
  background-size: 64px 64px;
  background-position: 0 0, 0 32px, 32px -32px, -32px 0px;
  animation: checkerFlow 4.5s linear infinite;
}
/* second softer checker layer, offset speed -> subtle parallax "fancy" feel */
#authScreen::before{
  content:"";
  position:absolute; inset:-64px;
  background-image:
    linear-gradient(45deg,  rgba(255,214,120,.35) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,214,120,.35) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(255,214,120,.35) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,214,120,.35) 75%);
  background-size: 128px 128px;
  background-position: 0 0, 0 64px, 64px -64px, -64px 0px;
  animation: checkerFlow 9s linear infinite reverse;
  pointer-events: none;
}
/* faint vignette so the window pops against the busy pattern */
#authScreen::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.28) 100%);
  pointer-events:none;
}
@keyframes checkerFlow{
  from{ background-position: 0 0, 0 32px, 32px -32px, -32px 0px; }
  to{   background-position: 0 64px, 0 96px, 32px 32px, -32px 64px; }
}
@media (prefers-reduced-motion: reduce){
  #authScreen, #authScreen::before, .win{ animation: none; }
}

.logo{
  font-family: var(--pixel);
  font-size: 30px;
  letter-spacing: 3px;
  text-align:center;
  margin: 4px 0 2px;
  color: var(--title-blue-1);
  text-shadow: 3px 3px 0 var(--accent);
}
.tagline{
  text-align:center; margin: 4px 0 18px; font-size:14px; color:#4a4a4a;
  font-style: italic;
}

.tabs{ display:flex; margin-bottom: 16px; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.tab{
  flex:1; padding:8px 0; font-size:13px; font-family: var(--mono); cursor:pointer;
  background: var(--win-face-dark); color:#eee;
  border:none; border-top: 2px solid #fff; border-left:2px solid #fff;
  transition: background .1s;
}
.tab:hover{ background:#8f8c83; }
.tab.active{
  background: var(--panel); color:#000; font-weight:bold;
  border-bottom: 2px solid var(--panel);
}

.tab-panel{ display:none; flex-direction:column; gap:6px; }
.tab-panel.active{ display:flex; animation: fadeIn .18s ease-out; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(3px); } to{ opacity:1; transform:none; } }

label{ font-size:14px; margin-top:8px; color:#3a3a3a; }
input[type=text], input[type=password]{
  font-family: var(--mono); font-size:17px; padding:6px 8px;
  border: 2px solid var(--win-shadow);
  border-top-color:#404040; border-left-color:#404040;
  border-bottom-color:#fff; border-right-color:#fff;
  background:#fff; color:#000;
  outline:none;
}
input:focus{ outline: 2px dotted var(--title-blue-1); outline-offset:1px; }
input::placeholder{ color:#aaa; }

.btn-primary{
  margin-top:16px; padding:9px 0; font-size:14px; font-weight:bold; font-family: var(--mono);
  letter-spacing: .5px;
  background: linear-gradient(180deg, #e2ded4, var(--win-face));
  color:#000; cursor:pointer;
  border: 2px solid #fff; border-right-color:var(--win-shadow); border-bottom-color:var(--win-shadow);
  transition: transform .05s;
}
.btn-primary:hover{ background: linear-gradient(180deg, #ecE8dd, #d3cfc4); }
.btn-primary:active{
  border-color: var(--win-shadow) #fff #fff var(--win-shadow);
  transform: translateY(1px);
}
.error{ color:#b00000; font-size:13px; min-height:16px; margin:6px 0 0; font-family: var(--mono); }

.color-grid{
  display:grid; grid-template-columns: repeat(8, 1fr); gap:5px; margin-top:6px;
}
.color-swatch{
  width:100%; aspect-ratio:1; cursor:pointer;
  border: 2px solid rgba(0,0,0,.4);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.25), inset 2px 2px 0 rgba(255,255,255,.35);
  position: relative;
  transition: transform .06s;
}
.color-swatch:hover{ transform: translateY(-2px); }
.color-swatch.selected{
  border-color:#000;
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.color-swatch.selected::after{
  content:"✓";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; font-weight:bold;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.config-warning{
  background:#fff3cd; color:#7a5c00; border:1px solid #d1a300;
  font-size:12px; padding:7px 9px; margin: 0 0 10px;
  font-family: var(--mono);
}

.custom-color{
  margin-top:12px; padding:10px; background:rgba(0,0,0,.08);
  border: 2px solid var(--win-shadow);
  border-top-color:#404040; border-left-color:#404040;
  border-bottom-color:#fff; border-right-color:#fff;
}
.custom-color-row{ display:flex; align-items:center; gap:9px; }
.swatch-preview{
  width:32px; height:32px; flex:0 0 auto;
  border:2px solid #000; outline:1px solid #fff;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.25), inset 2px 2px 0 rgba(255,255,255,.3);
}
.hex-label{
  flex:1; display:flex; align-items:center; gap:6px; font-size:13px;
  margin-top:0;
}
.hex-label input{ flex:1; font-size:15px; padding:4px 6px; text-transform:uppercase; letter-spacing:1px; }
.rgb-row{ display:flex; gap:10px; margin-top:8px; }
.rgb-row label{
  flex:1; font-size:11px; font-family: var(--pixel); color:#555;
  display:flex; flex-direction:column; gap:4px; margin-top:0;
}

/* ---------- retro pixel range sliders (R/G/B) ---------- */
input[type=range]{
  -webkit-appearance: none; appearance: none;
  width:100%; height:14px; padding:0;
  background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:8px; background:#8a8a8a;
  border: 1px solid var(--win-shadow);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.4);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px; height:16px; margin-top:-5px;
  background: var(--win-face);
  border: 2px solid #fff; border-right-color:var(--win-shadow); border-bottom-color:var(--win-shadow);
}
input[type=range]::-moz-range-track{
  height:8px; background:#8a8a8a; border: 1px solid var(--win-shadow);
}
input[type=range]::-moz-range-thumb{
  width:12px; height:16px; border-radius:0;
  background: var(--win-face);
  border: 2px solid #fff; border-right-color:var(--win-shadow); border-bottom-color:var(--win-shadow);
}
#rInput::-webkit-slider-runnable-track{ background: linear-gradient(90deg,#3a1010,#e64545); }
#gInput::-webkit-slider-runnable-track{ background: linear-gradient(90deg,#0f2e12,#4bcf57); }
#bInput::-webkit-slider-runnable-track{ background: linear-gradient(90deg,#101a3a,#4d6bec); }

/* ---------- GAME SCREEN ---------- */
#gameScreen{ position:relative; width:100%; height:100%; background:#123; }
#gameCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.hud-top{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgba(10,36,106,.88), rgba(10,36,106,.5));
  color:#fff; font-size:16px; font-family: var(--mono);
  border-bottom: 2px solid #000;
}
.hud-user{ display:flex; gap:12px; align-items:center; }
.online-count{ font-size:13px; color:#a6caf0; }
.hud-btn{
  background: linear-gradient(180deg,#e2ded4,var(--win-face));
  border:2px solid #fff; border-right-color:var(--win-shadow); border-bottom-color:var(--win-shadow);
  font-size:13px; font-family: var(--mono); padding:4px 12px; cursor:pointer;
}
.hud-btn:active{ border-color: var(--win-shadow) #fff #fff var(--win-shadow); }

.voice-panel{
  position:absolute; bottom:16px; left:16px;
  display:flex; align-items:center; gap:9px;
  background: rgba(0,0,0,.5);
  padding:7px; border:2px solid #fff; border-right-color:#222; border-bottom-color:#222;
  box-shadow: 4px 4px 0 rgba(0,0,0,.3);
}
.mic-btn{
  width:48px; height:48px; padding:0;
  background:transparent; border:none; cursor:pointer;
  transition: transform .08s;
}
.mic-btn:hover{ transform: scale(1.06); }
.mic-btn img{ width:100%; height:100%; }
.mic-btn.speaking{
  filter: drop-shadow(0 0 6px #4dff88) drop-shadow(0 0 2px #4dff88);
}
.mic-select{
  font-size:13px; font-family: var(--mono); max-width:160px; padding:4px;
  background:#eee; border:2px solid #000;
}

.chat-panel{
  position:absolute; bottom:16px; right:16px; width:310px; max-height:270px;
  background: rgba(18,18,18,.6);
  border:2px solid #fff; border-right-color:#222; border-bottom-color:#222;
  box-shadow: 4px 4px 0 rgba(0,0,0,.3);
  display:flex; flex-direction:column;
}
.chat-messages{
  flex:1; overflow-y:auto; padding:8px 10px; font-size:15px; font-family: var(--mono); color:#f0f0f0;
  max-height:200px;
}
.chat-messages .msg{ margin-bottom:4px; word-wrap:break-word; line-height:1.25; }
.chat-messages .msg .who{ font-weight:bold; }
.chat-messages .msg.system{ color:#a6caf0; font-style:italic; }
.chat-form{ border-top:2px solid #444; }
.chat-form input{
  width:100%; border:none; padding:8px 10px; font-size:15px; font-family: var(--mono);
  background: rgba(255,255,255,.92);
}
.chat-form input:focus{ outline:none; background:#fff; }

.hint{
  position:absolute; top:42px; left:12px;
  font-size:13px; font-family: var(--mono); color:#dfffe8;
  background:rgba(0,0,0,.4); padding:4px 8px; border:1px solid rgba(255,255,255,.25);
}

@media (max-width: 480px){
  .win{ width: 94vw; }
  .chat-panel{ width: 70vw; }
}

/* speaking ring drawn on canvas, not css, but keep username label style available if needed */