/* TWELVESKY CLASSIC — Reborn. Visual layer only; game logic stays in the PHP pages. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --ts1-reborn-art: url('images/ts1-reborn-hero-20261021.png');
  --ts1-reborn-world: url('images/ts1-reborn-world-20261021.png');
  --ts1-bg: #080a0b;
  --ts1-panel: rgba(13, 16, 17, .9);
  --ts1-ivory: #f4eddf;
  --ts1-muted: #b5aea0;
  --ts1-gold: #d8b978;
  --ts1-gold-light: #f3dbaa;
  --ts1-border: rgba(214, 184, 122, .25);
  --ts1-ember: #b46a48;
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body, body[style*="background-image"] {
  color: var(--ts1-ivory);
  font-family: 'Manrope', sans-serif;
  background-color: var(--ts1-bg);
  background-image: linear-gradient(180deg, rgba(8, 10, 12, .48) 0, rgba(8, 10, 12, .83) 36rem, #080a0b 100%), radial-gradient(ellipse at 50% 0%, transparent 20%, rgba(3, 5, 6, .65) 85%), var(--ts1-reborn-world) !important;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto, 100% auto, max(100%, 1450px) auto;
  background-attachment: scroll;
}
::selection { color: #100c08; background: #e0c188; }

/* A restrained, solid masthead gives every existing page the same new frame. */
body > header, body > nav.glass {
  border-color: rgba(218, 187, 125, .25);
  background: linear-gradient(180deg, rgba(12, 14, 15, .98), rgba(9, 11, 12, .92));
  box-shadow: 0 15px 50px rgba(0, 0, 0, .32), inset 0 -1px rgba(255, 229, 175, .035);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
body > header nav a, body > header .glow-text, body > nav.glass a {
  color: #d9d0c0;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-decoration: none;
  text-shadow: none;
}
body > header nav a:hover, body > header .glow-text:hover, body > nav.glass a:hover {
  color: var(--ts1-gold-light);
  text-shadow: 0 0 20px rgba(221, 185, 120, .32);
}
body > header img { filter: drop-shadow(0 2px 12px rgba(217, 180, 111, .18)); }

h1, h2, h3, .main-title, .cool-font {
  font-family: 'Cinzel', Georgia, serif !important;
  font-weight: 700;
  letter-spacing: .045em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .8), 0 0 28px rgba(215, 178, 108, .12) !important;
}
h1, h2, h3 { color: #f4ecde; }
p, li, td, input, select, textarea { line-height: 1.65; }
.glow-text, .text-cyan-400, .text-cyan-300 { color: #e0c48f; }

/* Soft mineral glass, warm metallic edges, and inset light. */
.glass, .glass-box, .glass-panel, .neon-card {
  background: linear-gradient(145deg, rgba(32, 31, 27, .91), rgba(12, 15, 16, .95) 58%, rgba(8, 10, 11, .96));
  border: 1px solid var(--ts1-border);
  border-radius: 3px;
  box-shadow: 0 24px 68px rgba(0, 0, 0, .43), inset 0 1px rgba(255, 237, 202, .08), inset 0 0 42px rgba(211, 169, 93, .025);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.glass h4, .glass-box h4 { border-color: rgba(212, 179, 117, .2); }

/* No geometry changes here: the game wheel, cart, popups and JS keep control. */
.neon-button, .tab-btn, .about-button, .play-button-premium, .download-button-glow,
.neon-btn-page, .register-btn, .neon-pill, .filter-btn {
  color: #ead8b4;
  border-color: rgba(215, 182, 116, .53);
  background: linear-gradient(135deg, rgba(87, 64, 37, .92), rgba(27, 24, 21, .97) 52%, rgba(17, 19, 19, .98));
  box-shadow: inset 0 1px rgba(255, 236, 193, .13), 0 8px 22px rgba(0, 0, 0, .22);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: none;
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.neon-button:hover, .tab-btn:hover, .about-button:hover, .play-button-premium:hover,
.download-button-glow:hover, .neon-btn-page:hover, .register-btn:hover, .neon-pill:hover, .filter-btn:hover {
  color: #fff8eb;
  border-color: #f3dba6;
  background: linear-gradient(135deg, #8b6a3f, #453527 55%, #22211d);
  box-shadow: inset 0 1px rgba(255, 244, 213, .22), 0 10px 30px rgba(0, 0, 0, .4), 0 0 24px rgba(231, 180, 92, .18);
}
.neon-button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #f1d397;
  outline-offset: 3px;
}
.floating-arrow, #download-arrow { color: #f3d191; stroke: #f3d191; filter: drop-shadow(0 0 12px rgba(229, 174, 91, .45)); }

input[type='text'], input[type='password'], input[type='email'], input[type='number'],
input[type='search'], input[type='url'], input[type='date'], textarea, select {
  accent-color: #dcb87a;
  color: #f6eddd;
  border-color: rgba(206, 175, 120, .3);
  background-color: rgba(7, 10, 11, .77);
}
input::placeholder, textarea::placeholder { color: #a49d8e; opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: #e2bf7d; }

table { color: #e9e1d4; }
table th { color: #d7bb86; }
.glass-row, .tribe-row, table tbody tr { transition: background-color .2s ease, box-shadow .2s ease; }
.glass-row:hover, .tribe-row:hover, table tbody tr:hover { background-color: rgba(218, 179, 113, .075); }
.shop-item, .item-card { border-color: rgba(215, 182, 116, .28); }
.shop-item:hover, .item-card:hover { border-color: rgba(238, 206, 146, .7); }
#gif-overlay { opacity: .1; pointer-events: none; }

@media (max-width: 850px) {
  body, body[style*="background-image"] { background-size: 100% auto, 100% auto, auto 740px; background-position: center top; }
  body > header nav a, body > header .glow-text { font-size: .76rem; }
}
@media (max-width: 640px) {
  body > header { gap: .8rem; }
  .glass, .glass-box, .glass-panel, .neon-card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .neon-button, .tab-btn, .about-button, .play-button-premium, .download-button-glow,
  .neon-btn-page, .register-btn, .neon-pill, .filter-btn { transition: none; }
}
/* Narrow screens: keep existing account, currency and admin controls reachable. */
@media (max-width: 480px) {
  body:has(#usedSlotsDisplay) .glass-box:has(#usedSlotsDisplay) > div:first-child { flex-wrap: wrap; gap: .6rem; }
  body:has(#usedSlotsDisplay) .glass-box:has(#usedSlotsDisplay) > div:first-child > .flex.items-center.gap-6 { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: center; gap: .5rem; }
  body:has(#usedSlotsDisplay) .glass-box:has(#usedSlotsDisplay) > div:first-child > .flex.items-center.gap-6 > div { min-width: 0; }
  body:has(#usedSlotsDisplay) .glass-box:has(#usedSlotsDisplay) > div:last-child > div { width: 100%; max-width: 100%; }
  body:has(#usedSlotsDisplay) :is(#btnUTCash, #btnTribe) { flex: 1 1 0; min-width: 0; width: auto; }
  body:has(#usedSlotsDisplay) :is(#btnUTCash, #btnTribe) > span:first-child { white-space: normal; overflow-wrap: anywhere; text-align: center; font-size: .68rem; }
  .admin-container .glass-title { flex-wrap: wrap; gap: .65rem; }
  .admin-container .glass-title > .flex { flex-wrap: wrap; min-width: 0; max-width: 100%; gap: .5rem; }
  body > h1.main-title { font-size: clamp(1.8rem, 8vw, 4rem); overflow-wrap: anywhere; }
}


/* Gallery: the existing account controls and media viewer share the Reborn button treatment. */
body:has(#media-modal) > header > div:last-child {
  min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-end;
}
body:has(#media-modal) > header > div:last-child > a { min-width: 0; max-width: 100%; }
body:has(#media-modal) > header > div:last-child :is(a[href="user"], button) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; max-width: 100%; padding: .7rem .9rem;
  border: 1px solid rgba(207,169,108,.3); border-radius: 0;
  color: #f1dfbe; background: linear-gradient(145deg,#25201c,#181614);
  box-shadow: inset 0 1px rgba(255,255,255,.03),0 8px 16px rgba(0,0,0,.22);
  font: 700 .75rem/1.2 'Rajdhani',sans-serif; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; text-shadow: none;
  white-space: normal; overflow-wrap: anywhere; cursor: pointer;
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body:has(#media-modal) > header > div:last-child :is(a[href="user"], button):hover {
  color: #fff3df; border-color: #cda976; background: linear-gradient(145deg,#463524,#211c18);
  box-shadow: 0 9px 25px rgba(0,0,0,.35),0 0 18px rgba(204,157,92,.1);
}
body:has(#media-modal) #media-modal > button,
body:has(#media-modal) #media-modal :is(#prevBtn, #nextBtn) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid rgba(207,169,108,.55); border-radius: 0; color: #e9d1a5;
  background: linear-gradient(145deg,#25201c,#181614);
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.4);
  font: 600 1.5rem/1 'Rajdhani',sans-serif; text-shadow: none;
  clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body:has(#media-modal) #media-modal > button:hover,
body:has(#media-modal) #media-modal :is(#prevBtn, #nextBtn):hover {
  color: #fff3df; border-color: #e6c68c; background: linear-gradient(145deg,#463524,#211c18);
  box-shadow: 0 8px 26px rgba(0,0,0,.45),0 0 20px rgba(204,157,92,.18);
}
@media (max-width: 640px) {
  body:has(#media-modal) > header { flex-wrap: wrap; gap: .7rem; }
  body:has(#media-modal) > header > div:first-child { min-width: 0; max-width: 100%; }
  body:has(#media-modal) > header > div:last-child { gap: .5rem; }
  body:has(#media-modal) #media-modal > button,
  body:has(#media-modal) #media-modal :is(#prevBtn, #nextBtn) { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(#media-modal) > header > div:last-child :is(a[href="user"], button),
  body:has(#media-modal) #media-modal > button,
  body:has(#media-modal) #media-modal :is(#prevBtn, #nextBtn) { transition: none; }
}