@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');

/* ═══════════════════════════════════════════════════
   CSS VARIABLES  (same palette as home page)
═══════════════════════════════════════════════════ */
:root {
  --bg:            #0c171e;
  --bg-2:          #0d2137;
  --bg-3:          #112a45;
  --blue:          #1e90ff;
  --blue-light:    #38b6ff;
  --blue-glow:     rgba(30, 144, 255, 0.45);
  --blue-dim:      rgba(30, 144, 255, 0.12);
  --border:        rgba(30, 144, 255, 0.18);
  --border-hover:  rgba(30, 144, 255, 0.55);
  --text:          #f0f6ff;
  --text-muted:    rgba(180, 210, 255, 0.55);
  --card-bg:       rgba(13, 33, 55, 0.75);
  --radius:        16px;
  --radius-sm:     10px;
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Acme", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
}

/* ═══ CUSTOM CURSOR ═══ */
.cursor-dot {
  position: fixed; width: 8px; height: 8px;
  background: var(--blue-light); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px var(--blue-light), 0 0 22px var(--blue);
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid rgba(56,182,255,0.5); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .28s, height .28s, opacity .28s, border-color .28s;
}
.cursor-ring.hovered { width: 58px; height: 58px; border-color: var(--blue); opacity: 0.55; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } body { cursor: auto; } }

/* ═══ PARTICLES ═══ */
#particles {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; opacity: 0.3;
}

/* ═══ TICKER BAR ═══ */
.ticker-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light), var(--blue));
  background-size: 200% auto;
  animation: tickerBg 4s linear infinite;
}
@keyframes tickerBg { 0%{background-position:0% center} 100%{background-position:200% center} }

/* ═══ HEADER ═══ */
.header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(10, 18, 25, 0.94);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  animation: headerSlide .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes headerSlide { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  min-height: 60px;
}

.logo_img {
  background: #fff;
  border-radius: 12px;
  padding: 5px 8px;
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(30,144,255,.3));
}

/* Back button */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 50px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  font-family: "Acme", sans-serif;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  position: relative; overflow: hidden;
}
.btn-back::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  opacity: 0; transition: opacity .3s;
  border-radius: 50px;
}
.btn-back span { position:relative; z-index:1; }
.btn-back .arrow { transition: transform .3s cubic-bezier(.34,1.56,.64,1); display:inline-block; }
.btn-back:hover { color:#fff; border-color:transparent; box-shadow:0 8px 28px var(--blue-glow); transform:translateY(-2px); }
.btn-back:hover::before { opacity:1; }
.btn-back:hover .arrow { transform:translateX(-4px); }

/* ═══ MAIN LAYOUT ═══ */
.page-body {
  position: relative; z-index: 1;
  padding: 20px 16px 40px;
  animation: pageIn .7s .1s cubic-bezier(.16,1,.3,1) both;
  max-width: 100%;
  overflow-x: hidden;
}
.visualizer-column { min-width: 0; }
@keyframes pageIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* ═══ VISUALIZER WRAPPER ═══ */
.visualizer-area {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  outline: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(30,144,255,.06);
}
.visualizer-area::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--blue-light), var(--blue), transparent);
  animation: topGlow 3s ease-in-out infinite; z-index:5; pointer-events:none;
}
@keyframes topGlow { 0%,100%{opacity:.4} 50%{opacity:1} }


/* ═══ ROOM VIEW ═══ */
.room-view {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: var(--room-aspect-ratio, 16/9);
  background: #fff;
  overflow: hidden;
  outline: none !important;
}

#object_pic,
#object_reflection {
  position: absolute;
  width: 100%; height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .5s ease;
}
#object_pic { z-index: 10; }
#object_reflection { z-index: 9; }

/* ═══ WALL & FLOOR ELEMENTS ═══ */
#wall {
  position: absolute; top: var(--room-wall-top, 0px); left: var(--room-wall-left, 0%);
  width: var(--room-wall-width, 150%); height: var(--room-wall-height, 268px);
  z-index: 2; overflow: hidden;
}
#floor {
  position: absolute; top: var(--room-floor-top, 268px); left: var(--room-floor-left, 0%);
  width: var(--room-floor-width, 150%); height: var(--room-floor-height, calc(100% - 200px));
  z-index: 1; overflow: hidden;
  transform: perspective(900px) rotateX(55deg);
  transform-origin: top;
}
#wall ul, #floor ul {
  display: flex; flex-wrap: wrap;
  align-content: flex-start;
  gap: 0; list-style: none; padding: 0; margin: 0;
}
#wall ul li, #floor ul li {
  margin: 0; padding: 0; position: relative; display: inline-block;
  outline: none !important;
}

/* Grid tile layouts */
#wall ul li.tile-4x2, #floor ul li.tile-4x2,
#wall ul li.tile-2x2, #floor ul li.tile-2x2,
#wall ul li.tile-4x10, #floor ul li.tile-4x10,
#wall ul li.tile-10x4, #floor ul li.tile-10x4 {
  display: grid; gap: 0;
}
#wall ul li.tile-4x2, #floor ul li.tile-4x2 {
  grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr);
}
#wall ul li.tile-2x2, #floor ul li.tile-2x2 {
  grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr);
}
#wall ul li.tile-4x10, #floor ul li.tile-4x10,
#wall ul li.tile-10x4, #floor ul li.tile-10x4 {
  grid-template-columns: repeat(10,1fr); grid-template-rows: repeat(4,1fr); gap: 0;
}
.tile-cell-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
#wall ul .room-tile-image, #floor ul .room-tile-image {
  position: relative;
  overflow: hidden;
  background: none;
}
#wall ul .room-tile-image::before, #floor ul .room-tile-image::before {
  content: '';
  position: absolute;
  width: var(--tile-image-width);
  height: var(--tile-image-height);
  left: 50%;
  top: 50%;
  background-image: var(--tile-image);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) rotate(var(--tile-image-rotation));
}
.clearfloat { clear: both; }

/* ═══════════════════════════════════════════════
   FULLSCREEN  — both native :fullscreen + CSS fallback
═══════════════════════════════════════════════ */

/* ── Native fullscreen (browser handles the overlay) ── */
.visualizer-area:-webkit-full-screen  { width: 100%; height: 100%; border-radius: 0; border: none; }
.visualizer-area:-moz-full-screen     { width: 100%; height: 100%; border-radius: 0; border: none; }
.visualizer-area:fullscreen           { width: 100%; height: 100%; border-radius: 0; border: none; display: flex; flex-direction: column; }

.visualizer-area:-webkit-full-screen  .room-view,
.visualizer-area:-moz-full-screen     .room-view,
.visualizer-area:fullscreen           .room-view {
  flex: 1;
  /* Remove fixed aspect-ratio so it fills the screen */
  aspect-ratio: unset !important;
  height: 100% !important;
  max-height: none !important;
}

/* Wall & floor recalculate inside fullscreen */
.visualizer-area:-webkit-full-screen  #wall,
.visualizer-area:-moz-full-screen     #wall,
.visualizer-area:fullscreen           #wall {
  height: 55%;      /* ~55% of screen height for wall */
}
.visualizer-area:-webkit-full-screen  #floor,
.visualizer-area:-moz-full-screen     #floor,
.visualizer-area:fullscreen           #floor {
  top: 55%;
  height: 45%;
}

/* Object image in fullscreen */
.visualizer-area:-webkit-full-screen  #object_pic,
.visualizer-area:-moz-full-screen     #object_pic,
.visualizer-area:fullscreen           #object_pic {
  background-size: cover;
}

/* ── CSS fallback fullscreen (.is-fullscreen class) ── */
body.fullscreen-open { overflow: hidden; }

.visualizer-area.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  border-radius: 0 !important;
  border: none !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}
.visualizer-area.is-fullscreen .room-view {
  flex: 1 !important;
  aspect-ratio: unset !important;
  height: calc(100vh - 50px) !important;  /* subtract toolbar height */
  max-height: none !important;
  width: 100% !important;
}
.visualizer-area.is-fullscreen #wall {
  height: 55% !important;
}
.visualizer-area.is-fullscreen #floor {
  top: 55% !important;
  height: 45% !important;
}
.visualizer-area.is-fullscreen #object_pic {
  background-size: cover !important;
}
.visualizer-area.is-fullscreen .visualizer-toolbar {
  flex-shrink: 0;
  height: 50px;
  background: rgba(10,18,25,.85);
  border-bottom: 1px solid var(--border);
}

/* ═══ LOADING ═══ */
.loading {
  position: fixed; inset: 0;
  background: rgba(10,18,25,.96);
  display: flex; align-items:center; justify-content:center;
  z-index: 2000; backdrop-filter: blur(12px);
}
.loading.hidden { display: none; }
.spinner {
  width: 52px; height: 52px;
  border: 3px solid var(--border);
  border-top-color: var(--blue-light);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 20px var(--blue-glow);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ ROOM EMPTY MODE ═══ */
.room-view.empty-mode #object_pic,
.room-view.empty-mode #object_reflection { opacity: 0; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 576px) {
  #wall { height: 118px; }
  #floor { position: absolute; top: 100px; min-height: 200px; transform: perspective(700px) rotateX(45deg); }
  .tile-4x10, .tile-10x4 { grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(4,1fr); }
}
@media (min-width: 577px) and (max-width: 991px) {
  #wall { height: 247px; }
  #floor { position: relative; top: 233px; min-height: 260px; transform: perspective(800px) rotateX(50deg); }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #wall { height: 221px; }
  #floor { position: relative; top: 199px; min-height: 300px; }
}
@media (min-width: 1200px) {
  #wall { min-height: 300px; }
  #floor { min-height: 350px; }
}
@media (max-width: 991.98px) {
  .page-body { padding: 14px 12px 30px; }
}
@media (max-width: 340px) {
  .page-body { padding: 10px 6px 24px; }
  .header-inner { padding-inline: 10px; }
  .visualizer-area { border-radius: 10px; }
  .room-view { aspect-ratio: var(--room-aspect-ratio, 4/3); }
  .controls-panel { border-radius: 10px; }
}