/* ============================================================
   XYRIOS: SHORES OF XYLARA — stylesheet
   Same design tokens as the Xilios site for brand consistency.
   ============================================================ */
:root{
  --ink:    #050208;
  --star:   #efe9ff;
  --dim:    #9d92c4;
  --amber:  #ffb45c;
  --violet: #7a63ff;
  --teal:   #3fd0b0;
  --danger: #ff3b3b;
  --line:   rgba(154, 134, 255, .18);
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  height:100%;
  overflow:hidden;
  background:var(--ink);
  color:var(--star);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;
}

#game-canvas{ position:fixed; inset:0; display:block; }

/* damage vignette */
#flash{
  position:fixed; inset:0; pointer-events:none; z-index:5;
  opacity:0; transition:opacity .12s ease-out;
  background:radial-gradient(ellipse at center,
              transparent 40%, rgba(255,59,59,.55) 100%);
}
#flash.active{ opacity:1; }
@media (prefers-reduced-motion: reduce){ #flash{ transition:none; } }

/* crosshair */
#crosshair{
  position:fixed; left:50%; top:50%; z-index:6;
  width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(239,233,255,.85);
  box-shadow:0 0 6px rgba(239,233,255,.6);
  pointer-events:none;
}

/* ==========================================================
   HUD
   ========================================================== */
#hud{ position:fixed; inset:0; z-index:10; pointer-events:none; }

#hud-top{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:18px 24px; gap:16px;
}
.hud-box{ display:flex; flex-direction:column; gap:4px; }
.hud-label{
  font-size:.6rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--dim);
}

#health-bar{
  width:220px; height:10px; border:1px solid var(--line);
  border-radius:5px; background:rgba(10,5,20,.6); overflow:hidden;
}
#health-fill{
  height:100%; width:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--amber), #ff7a3a);
  transition:width .2s ease-out;
}

#clock-box{ flex-direction:row; align-items:center; gap:10px; }
#clock-icon{ font-size:1.3rem; }
#clock-text{
  font-family:var(--font-display); font-weight:500; font-size:.85rem;
  letter-spacing:.2em; text-transform:uppercase;
}

#res-box{ text-align:right; gap:2px; }
.res{ font-size:.85rem; color:var(--dim); }
.res b{ color:var(--star); font-weight:500; }
.dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:4px;
}
.dot.wood { background:#3fd0b0; }
.dot.stone{ background:#8d86a8; }
.dot.ore  { background:#5ce8ff; box-shadow:0 0 6px rgba(92,232,255,.8); }

/* message feed */
#messages{
  position:absolute; left:50%; bottom:110px; transform:translateX(-50%);
  display:flex; flex-direction:column-reverse; align-items:center; gap:6px;
  width:min(90vw, 640px); text-align:center;
}
.msg{
  font-size:.9rem; color:var(--star);
  background:rgba(5,2,8,.55); border:1px solid var(--line);
  border-radius:4px; padding:.35rem 1rem;
  opacity:1; transition:opacity .8s;
}
.msg.warn{ color:var(--amber); }
.msg.fade{ opacity:0; }

/* bottom bar */
#hud-bottom{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px;
  font-size:.72rem; letter-spacing:.12em; color:var(--dim);
}
#build-hint b{ color:var(--star); font-weight:500; }
#build-sel{
  font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--amber);
}

/* ==========================================================
   Overlays
   ========================================================== */
.overlay{
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 8vw;
  background:rgba(5,2,8,.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.overlay.hidden{ display:none; }

.sector-tag{
  font-size:.68rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.2rem;
}
.overlay h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem, 5.5vw, 4rem);
  letter-spacing:.12em; line-height:1.15; margin-bottom:1.4rem;
  background:linear-gradient(100deg, var(--amber) 0%, var(--star) 45%, var(--violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.overlay-copy{
  color:var(--dim); font-size:clamp(.9rem, 1.5vw, 1.05rem);
  line-height:1.75; max-width:52ch;
}
.overlay-copy.dim{ font-size:.85rem; margin-top:.8rem; }
.overlay-copy.small{ font-size:.72rem; letter-spacing:.1em; }

.help{
  list-style:none; margin:1.6rem 0 0; color:var(--dim);
  font-size:.85rem; line-height:2;
}
.help b{ color:var(--star); font-weight:500; }

.btn{
  margin-top:2.2rem; padding:.9rem 3.2rem;
  font-family:var(--font-display); font-weight:500; font-size:.9rem;
  letter-spacing:.25em; text-transform:uppercase;
  color:var(--star); background:transparent;
  border:1px solid var(--amber); border-radius:4px; cursor:pointer;
  transition:background .25s, box-shadow .25s, transform .15s;
}
.btn:hover{
  background:rgba(255,180,92,.12);
  box-shadow:0 0 24px rgba(255,180,92,.35);
}
.btn:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){ .btn:active{ transform:none; } }

/* ==========================================================
   Touch controls — hidden unless body.touch (set by touch.js)
   ========================================================== */
#touch-ui{ display:none; }
.help-touch{ display:none; }

body.touch #touch-ui{
  display:block; position:fixed; inset:0; z-index:12;
  pointer-events:none;
}
body.touch #build-hint{ display:none; }
body.touch .help-key{ display:none; }
body.touch .help-touch{ display:block; }

/* full-screen look pad: bare drags turn the camera; the
   joystick and buttons come later in the DOM so they win */
#look-pad{
  position:absolute; inset:0;
  pointer-events:auto; touch-action:none;
}

#joystick{
  position:absolute; left:26px; bottom:30px;
  width:120px; height:120px; border-radius:50%;
  border:1px solid var(--line); background:rgba(10,5,20,.35);
  pointer-events:auto; touch-action:none;
}
#joy-knob{
  position:absolute; left:50%; top:50%;
  width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
  background:rgba(255,180,92,.22); border:1px solid var(--amber);
  box-shadow:0 0 14px rgba(255,180,92,.25);
}

.tbtn{
  pointer-events:auto; touch-action:none;
  width:58px; height:58px; border-radius:50%;
  border:1px solid var(--line); background:rgba(10,5,20,.55);
  color:var(--star); font-family:var(--font-display); font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.tbtn:active{
  background:rgba(255,180,92,.25);
  border-color:var(--amber);
}

#touch-actions{
  position:absolute; right:22px; bottom:28px;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  pointer-events:none;
}
#touch-actions .row{ display:flex; gap:12px; }
#tb-atk{ width:76px; height:76px; font-size:1.5rem; border-color:var(--amber); }

#touch-side{
  position:absolute; right:22px; top:96px;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
#touch-side .tbtn{ width:46px; height:46px; font-size:.75rem; }

#touch-build-row{
  position:absolute; left:50%; bottom:160px; transform:translateX(-50%);
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  max-width:94vw; pointer-events:none;
}
#touch-build-row.hidden{ display:none; }
#touch-build-row button{
  pointer-events:auto; touch-action:none;
  padding:.55rem .85rem; border-radius:4px;
  border:1px solid var(--line); background:rgba(10,5,20,.75);
  color:var(--star); font-family:var(--font-body); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
}
#touch-build-row button:active{
  border-color:var(--amber); background:rgba(255,180,92,.25);
}

/* keep the message feed clear of the touch buttons */
body.touch #messages{ bottom:180px; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 700px){
  #health-bar{ width:140px; }
  #hud-top{ padding:12px 14px; }
  #hud-bottom{ font-size:.6rem; padding:10px 14px; }
  .help{ font-size:.78rem; }
}