/* pinknblue.css - تعديل خفيف لمحاذاة عمود اللينكات لأعلى على سطح المكتب */

/* ================= Globals ================= */
:root{
  --accent-1: #efaea5;
  --accent-2: #8caac5;
  --text-1: #80a2c6;
  --panel-bg: #e9dac0;
  --panel-inner: #d8d2c2;
  --link-grad-from: #efaea5;
  --link-grad-to: #bc8d9b;
}

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

/* font_face */
@font-face {
    font-family: "FiraMono";
    src: url("https://willdotjpg.gay/fonts/FiraMonoNerdFont-Regular.otf");
}
body{
  background-image: url("https://willdotjpg.gay/images/backgrounds/dither_it_thumb-1920-1327980.png");
  font-family: "FiraMono", monospace;
  color: var(--text-1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

/* صور مرنة */
img{ max-width:100%; height:auto; display:block; }

/* container centering */
.page-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* main panel */
/* FORCE desktop width to 700px max so desktop layout replicates القديم */
.main{
  width:100%;
  max-width:700px; /* <-- مهم لسطح المكتب */
  background-color: var(--panel-bg);
  padding:18px;
  border-radius:6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  position:relative;
}

/* controls (min/close) */
.controls{
  position:absolute;
  top:12px;
  right:16px;
  display:flex;
  gap:8px;
  z-index:20;
}
.controls img{ width:18px; height:auto; }

/* ========== LAYOUT GRID ========== */
/* desktop: left column 220px, right column 450px (matches التصميم القديم) */
.layout{
  display:grid;
  grid-template-columns: 220px 450px; /* <-- ثابت على الديسكتوب */
  grid-template-rows: auto auto;       /* <- تأكد صفين: الآيكون/المحتوى */
  grid-template-areas:
    "icon right"
    "box2 right";
  gap:10px; /* خففت المسافة شوية */
  align-items:start;
}

/* grid areas mapping */
.icon{ grid-area: icon; justify-self:center; }
.right-col{ grid-area: right; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
/* مهم: خليت box2 في أعلى العمود الأيسر */
.box2{ grid-area: box2; justify-self:start; align-self:start; }

/* profile circle (desktop size preserved) */
.icon{
  width:200px;
  height:200px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid rgba(239,174,165,0.6);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.icon img{ width:100%; height:100%; object-fit:cover; }

/* box2 (links) */
.box2{
  width:220px; /* match left column width */
  background-color: #a4bac3;
  border:2px solid var(--accent-2);
  padding:12px;
  border-radius:6px;
  color: var(--text-1);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.box2 h1{
  font-size:20px;
  text-decoration:underline;
  margin-bottom:6px;
  color: var(--text-1);
}
.box2 .links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* link button */
.link-btn{
  display:block;
  text-align:center;
  padding:12px 8px;
  font-size:15px;
  font-weight:700;
  background: linear-gradient(90deg,var(--link-grad-from),var(--link-grad-to));
  color:#ffffff;
  border-radius:8px;
  border:2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.link-btn:hover{ transform:translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.12); }

/* thin horizontal inside box2 */
.horizontal2{
  width:85%;
  border:2px solid var(--accent-2);
  margin:6px auto 0;
}

/* RIGHT COLUMN CONTENT (set widths to 450px to match desktop look) */
.right-col > .head,
.right-col > .box1,
.right-col > .box4,
.right-col > .box5,
.right-col > .box6{
  width:450px; /* <-- important to keep desktop layout identical */
}

/* header name */
.head{
  font-size:25px;
  color: var(--accent-1);
  padding:6px 10px;
  border-bottom:2px solid var(--accent-1);
}

/* top horizontal line (decor) */
.horizontal{
  width:100%;
  border:2px solid var(--accent-2);
}

/* welcome box */
.box1{
  background-color: var(--panel-inner);
  border:2px solid var(--accent-2);
  padding:12px;
  border-radius:6px;
  color:#2b2b2b;
  font-weight:600;
}

/* big rectangular image box */
.box4{
  width:100%;
  height:300px;
  border:2px solid var(--accent-2);
  border-radius:6px;
  background-color:#b8b9a5;
  background-image: url("https://media.discordapp.net/attachments/1172406302161506327/1432659126474768384/Background.jpg?ex=6901db49&is=690089c9&hm=a80ced4517aab551546d00d45e9fd0facb967182049d5c69f4950dcefbeabeee&=&format=webp&width=628&height=420");
  background-size:cover;
  background-position:center;
}

/* SCROLLER wrapper */
.box5{
  width:100%;
  border:2px solid var(--accent-2);
  border-radius:6px;
  background-color: var(--panel-inner);
  padding:10px;
  overflow:hidden;
  height:68px;
  display:flex;
  align-items:center;
}

/* scroller content */
.scroller{ width:100%; height:48px; overflow:hidden; position:relative; display:flex; align-items:center; }
.scroller-track{
  display:flex;
  gap:12px;
  align-items:center;
  animation: scroll-left 16s linear infinite;
  will-change:transform;
}
.scroller-track img{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* content box under the image */
.box6{
  width:100%;
  border:2px solid var(--accent-2);
  border-radius:6px;
  background-color: #a4bac3;
  color: #fbe2be;
  padding:12px;
}

/* small defaults text */
a{ text-decoration:none; color:inherit; }
h1{ font-size:25px; text-decoration:underline; padding-bottom:5px; color:var(--text-1); }
p{ margin-bottom:8px; line-height:1.35; }

/* ============ Responsive adjustments ============ */

/* collapse to single column for narrow screens (mobile)
   grid areas get redefined so order becomes: icon -> right -> box2 (links last)
*/
@media (max-width:760px){
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "right"
      "box2";
    gap:12px;
  }

  .icon{ justify-self:center; width:160px; height:160px; }
  .box2{ width:100%; } /* links take full width on mobile */
  .right-col > .head,
  .right-col > .box1,
  .right-col > .box4,
  .right-col > .box5,
  .right-col > .box6{
    width:100%; /* override desktop 450px to be 100% on mobile */
  }

  .box4{ height:200px; }
  .controls{ top:10px; right:12px; }
  .head{ text-align:center; padding-left:0; }
  .box6{ font-size:15px; }
  .box5{ height:64px; }
  .scroller-track{ animation-duration:12s; } /* a bit faster on mobile */
  .main{ padding:14px; }
}

/* extra small screens */
@media (max-width:400px){
  .icon{ width:140px; height:140px; }
  .box4{ height:160px; }
  .controls img{ width:16px; }
  .link-btn{ font-size:14px; padding:10px 6px; }
}