/* TwelveSky Classic cinematic theme. Existing page behaviour remains in its own scripts. */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@500;600;700;900&display=swap');

:root {
  --ts-ink: #070d13;
  --ts-glass: rgba(8, 17, 24, .86);
  --ts-line: rgba(110, 210, 215, .25);
  --ts-cyan: #9ce9e7;
  --ts-gold: #dfbb72;
  --ts-text: #e7edeb;
}
html { scroll-behavior: smooth; }
body {
  color: var(--ts-text);
  font-family: 'Rajdhani', sans-serif;
  background-color: #060c12;
  background-image: linear-gradient(180deg, rgba(4, 9, 14, .36) 0%, rgba(4, 10, 15, .72) 58%, #060c12 100%), radial-gradient(ellipse at center, rgba(10, 22, 30, .12), rgba(2, 5, 9, .82)), url('images/background1.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body[style*="background-image"] {
  background-image: linear-gradient(180deg, rgba(4, 9, 14, .36) 0%, rgba(4, 10, 15, .72) 58%, #060c12 100%), radial-gradient(ellipse at center, rgba(10, 22, 30, .12), rgba(2, 5, 9, .82)), url('images/background1.jpg') !important;
}
body > header {
  min-height: 76px;
  padding: 1rem clamp(1rem, 4vw, 4rem);
  background: rgba(5, 12, 18, .87);
  border-bottom: 1px solid rgba(157, 221, 216, .19);
  box-shadow: 0 12px 45px rgba(0, 0, 0, .35), inset 0 -1px rgba(221, 185, 113, .08);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
body > header nav a, body > header .glow-text {
  color: #c5d5d4;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .87rem;
  letter-spacing: .14em;
  text-shadow: none;
  transition: color .2s ease, text-shadow .2s ease;
}
body > header a:hover { color: #f1d49a; text-shadow: 0 0 18px rgba(222, 187, 114, .65); }
h1, h2, h3, .cool-font {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .06em;
  text-shadow: 0 2px 22px rgba(117, 219, 218, .18);
}
p, li, td, input, select, textarea { line-height: 1.55; }
.glass, .glass-box {
  background: linear-gradient(145deg, rgba(19, 35, 42, .89), rgba(5, 12, 19, .91));
  border: 1px solid var(--ts-line);
  border-radius: 3px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .42), 0 0 26px rgba(84, 186, 189, .05), inset 0 1px rgba(227, 251, 243, .08), inset 0 0 32px rgba(101, 187, 191, .035);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.glass h4 { border-color: rgba(162, 220, 217, .16); }
.neon-button, .tab-btn, .about-button, .play-button-premium, .download-button-glow {
  border: 1px solid rgba(128, 220, 217, .52);
  border-radius: 0;
  color: #d7f2ef;
  background: linear-gradient(135deg, rgba(28, 57, 63, .94), rgba(6, 16, 23, .97));
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 1px rgba(210, 255, 248, .1), 0 0 18px rgba(76, 197, 196, .08);
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.neon-button:hover, .tab-btn:hover, .about-button:hover, .play-button-premium:hover, .download-button-glow:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(50, 102, 104, .96), rgba(12, 34, 40, .98));
  border-color: #c1f7ef;
  box-shadow: inset 0 1px rgba(238, 255, 251, .2), 0 0 24px rgba(92, 222, 217, .25);
  transform: translateY(-2px);
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #e9c982;
  outline-offset: 3px;
}
.play-button-premium, .download-button-glow {
  color: #f5deb0;
  border-color: rgba(229, 193, 116, .8);
  background: linear-gradient(135deg, #493b25, #171a19 60%, #101b20);
  box-shadow: inset 0 1px rgba(255, 235, 181, .24), 0 10px 30px rgba(0, 0, 0, .45), 0 0 25px rgba(221, 178, 95, .12);
}
.play-button-premium:hover, .download-button-glow:hover {
  border-color: #ffe4a5;
  background: linear-gradient(135deg, #715733, #26302d 70%, #14252a);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .5), 0 0 35px rgba(230, 186, 103, .28);
}
.floating-arrow, #download-arrow { color: #e6c681; stroke: #e6c681; filter: drop-shadow(0 0 10px rgba(232, 191, 105, .55)); }
.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(113, 213, 207, .1); }
.neon-select, input:not([type='checkbox']):not([type='radio']):not([type='hidden']), textarea, select {
  accent-color: #a4e5df;
}
#gif-overlay { opacity: .12; pointer-events: none; }

/* The home page keeps its original controls and dynamic panels. */
body:has(#download-wrapper) > main {
  margin-top: clamp(5rem, 15vh, 10rem);
  padding: 0 clamp(1rem, 4vw, 3rem);
}
body:has(#download-wrapper) > main > h1 {
  max-width: 1100px;
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  line-height: 1.12;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 5px 30px #000, 0 0 35px rgba(149, 229, 222, .3);
}
body:has(#download-wrapper) > main > h1::before {
  content: 'THE WORLD OF TWELVESKY';
  display: block;
  margin-bottom: 1.5rem;
  color: #e7c88f;
  font-family: 'Rajdhani', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .4em;
}
body:has(#download-wrapper) > main > p { max-width: 42rem; color: #d2dddd; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.multi-button-container { max-width: 100%; }
.button-row { flex-wrap: wrap; }
.multi-worm-path { stroke: #83c9c4; opacity: .35; }
#download-wrapper { position: static; margin: .25rem auto 2rem; width: fit-content; }
.download-button-glow { padding: 1.2rem 2.5rem; font-size: 1rem; }
#about-wrapper { position: static; width: fit-content; margin: 0 auto 3rem; }
.carousel-wrapper { border: 1px solid rgba(151, 219, 214, .24); box-shadow: 0 20px 55px rgba(0, 0, 0, .5); }

@media (max-width: 850px) {
  body { background-attachment: scroll; }
  body > header { gap: .8rem; padding: .9rem 1rem; }
  body > header > div, body > header nav { flex-wrap: wrap; justify-content: center; gap: .7rem; }
  body > header > .absolute { position: static; transform: none; }
  body > header nav { margin-left: 0; }
  body > header nav a, body > header .glow-text { font-size: .75rem; }
  .multi-button-container { padding: 1rem; }
  .button-row { gap: .7rem; }
  body:has(#download-wrapper) > main { margin-top: 5rem; }
  body:has(#download-wrapper) > main > h1 { font-size: clamp(2rem, 8vw, 3.5rem); }
  .play-button-premium { max-width: 100%; padding: 1.2rem; font-size: 1rem; }
  main section.glass.p-16 { padding: 2rem 1.2rem; }
  #download-wrapper { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .floating-arrow, #download-arrow, .multi-worm-path { animation: none; }
  .neon-button, .tab-btn, .about-button, .play-button-premium, .download-button-glow { transition: none; }
}

/* Responsive refinements for the existing game and community interfaces. */
body > header > div, body > header nav, main, .container-main { min-width: 0; }
body > header nav a, body > header .glow-text { overflow-wrap: anywhere; }
.multi-button-container .neon-button {
  /* Some buttons have badges that deliberately extend beyond their edge. */
  clip-path: none;
  border-radius: 2px 10px 2px 10px;
}
.multi-button-container .neon-button:has(.new-badge) { margin-top: .65rem; }
textarea#content { min-width: 0 !important; width: 100%; max-width: 100%; }
.cart-sidebar { width: min(400px, 100vw); max-width: 100%; overflow-y: auto; }

/* Keep the cart in the document flow instead of covering the shop at XL sizes. */
#cart-wrapper { position: static; width: min(100%, 45rem); max-width: 100%; margin: 2.5rem auto 0; }
.container-main > div { min-width: 0; max-width: 100%; }
.wallet-box { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.inventory-grid { min-width: max-content; }

/* The wheel's geometry remains proportional to its original circular layout. */
.wheel-wrapper {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  box-sizing: border-box;
  container-type: inline-size;
}
@supports (width: 1cqw) {
  .wheel-wrapper .wheel-item { width: 12cqw; margin-left: -6cqw; padding-top: 3cqw; }
  .wheel-wrapper .wheel-item img { width: min(38px, 4.75cqw); height: min(38px, 4.75cqw); left: .6cqw; }
  .wheel-wrapper .wheel-item span { font-size: clamp(7px, 1.625cqw, 13px); margin-top: min(14px, 1.75cqw); letter-spacing: min(2px, .25cqw); }
  .wheel-wrapper .wheel-inner-circle { width: min(108px, 13.5cqw); height: min(108px, 13.5cqw); margin: 0; transform: translate(-50%, -50%); }
}
.premium-play-btn { max-width: 100%; }

/* Descriptions that otherwise appear only on mouse hover remain visible on touch. */
@media (hover: none) {
  .shop-item[data-tooltip-desc]::after {
    content: attr(data-tooltip-desc);
    display: block;
    margin-top: .75rem;
    color: #c4d7d5;
    font-family: 'Rajdhani', sans-serif;
    font-size: .85rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 850px) {
  body > header { position: relative; flex-wrap: wrap; }
  body > header > div { max-width: 100%; }
  #chat-tabs { flex-wrap: wrap; gap: .6rem; }
  #chat-tabs > :not([hidden]) ~ :not([hidden]) { margin-left: 0; }
  #chat-tabs > button { flex: 1 1 9rem; min-width: 0; }
  #chat-form, #chat-form > .flex { flex-wrap: wrap; }
  #chat-form input { min-width: 0; max-width: 100%; flex: 1 1 10rem; }
  #chat-form button { flex: 0 1 auto; }
  body > nav.glass { position: relative; flex-wrap: wrap; gap: .75rem; }
  body > nav.glass > div { flex-wrap: wrap; gap: .6rem; }
  #info-modal { padding: 1rem; }
  #info-modal > .glass { max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.5rem; }
  #info-modal .custom-scroll { max-height: 60vh; }
  .admin-container { padding: 1rem; }
  .admin-container .main-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .admin-container .main-grid > .glass { grid-column: auto !important; min-width: 0; }
  main:has(#chat-list) { flex-direction: column; width: 100%; margin-top: 2rem; }
  main:has(#chat-list) > section { width: 100%; }
}
@media (max-width: 640px) {
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea { font-size: 16px; }
  main h1.text-5xl, main h1.text-4xl { font-size: clamp(1.55rem, 7vw, 2.2rem) !important; line-height: 1.2; letter-spacing: .035em; overflow-wrap: anywhere; }
  main h2.text-5xl, main h2.text-4xl { font-size: clamp(1.35rem, 6vw, 1.9rem) !important; line-height: 1.2; letter-spacing: .035em; overflow-wrap: anywhere; }
  main h2.text-3xl { font-size: clamp(1.3rem, 5.5vw, 1.75rem); letter-spacing: .05em; overflow-wrap: anywhere; }
  .multi-button-container button { padding: .8rem 1rem !important; }
  .play-button-premium, .download-button-glow { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
  #download-wrapper { width: min(100% - 2rem, 26rem); }
  .premium-play-btn { font-size: clamp(1rem, 5vw, 1.4rem); padding: .9rem 1rem; letter-spacing: .08em; }
  .wheel-wrapper { margin: 1.5rem auto; }
  .wheel-wrapper .wheel-pointer { border-left-width: 14px; border-right-width: 14px; border-top-width: 32px; margin-left: -14px; top: -18px; }
  .carousel-section { padding: 0; }
  .carousel-wrapper { height: clamp(190px, 56vw, 300px); }
  .carousel-nav-btn { width: 38px; height: 38px; }
  .admin-container .glass { padding: 1rem; }
  #live-chat { padding: 1rem; }
  .section-separator span { padding: 0 .5rem; letter-spacing: .15em; }
}
@media (max-width: 400px) {
  .shop-item { padding: .65rem; }
  .shop-item[data-tooltip-desc]::after { font-size: .8rem; }
  #chat-form button { width: 100%; }
}

/* Decorative depth effects are isolated from the existing game animations. */
body:has(#download-wrapper)::before {
  content: '';
  position: fixed;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 20% 35%, rgba(81, 210, 207, .11), transparent 30%),
              radial-gradient(ellipse at 78% 18%, rgba(226, 171, 87, .09), transparent 29%);
  opacity: .55;
}
#download-wrapper { position: relative; isolation: isolate; }
#download-wrapper::before, #download-wrapper::after {
  content: '';
  position: absolute;
  pointer-events: none;
  top: -15px;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  border: 1px solid rgba(245, 205, 130, .56);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(231, 189, 112, .2), inset 0 0 8px rgba(231, 189, 112, .12);
  transform: perspective(400px) rotateX(68deg);
}
#download-wrapper::after { border-color: transparent rgba(145, 228, 220, .45) rgba(145, 228, 220, .45) transparent; transform: perspective(400px) rotateX(68deg) rotateY(25deg); }
.download-button-glow::before, .play-button-premium::before {
  content: '';
  position: absolute;
  pointer-events: none;
  top: 0;
  left: -45%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 237, 190, .2), transparent);
  transform: skewX(-22deg);
}
@keyframes ts-depth-ambient {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.07); }
}
@keyframes ts-depth-orbit {
  from { transform: perspective(400px) rotateX(68deg) rotateZ(0deg); }
  to { transform: perspective(400px) rotateX(68deg) rotateZ(360deg); }
}
@keyframes ts-depth-orbit-reverse {
  from { transform: perspective(400px) rotateX(68deg) rotateY(25deg) rotateZ(360deg); }
  to { transform: perspective(400px) rotateX(68deg) rotateY(25deg) rotateZ(0deg); }
}
@keyframes ts-depth-shine {
  0%, 58% { left: -45%; }
  85%, 100% { left: 120%; }
}
@media (prefers-reduced-motion: no-preference) {
  body:has(#download-wrapper)::before { animation: ts-depth-ambient 16s ease-in-out infinite alternate; }
  #download-wrapper::before { animation: ts-depth-orbit 9s linear infinite; }
  #download-wrapper::after { animation: ts-depth-orbit-reverse 13s linear infinite; }
  .download-button-glow::before, .play-button-premium::before { animation: ts-depth-shine 6s ease-in-out infinite; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .multi-button-container .neon-button:hover,
  .download-button-glow:hover, .play-button-premium:hover {
    transform: perspective(800px) translateY(-4px) rotateX(5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  body:has(#download-wrapper)::before, #download-wrapper::before, #download-wrapper::after,
  .download-button-glow::before, .play-button-premium::before { animation: none; }
  .neon-button:hover, .download-button-glow:hover, .play-button-premium:hover { transform: none; }
}