/* ================== 全局设置 ================== */
:root{
  --blue:#0000FF; 
  --grid-w:240px;
  --grid-h:320px;
  --gap:16px;
  --border-style: 2px solid var(--blue);
  --bg-gray: #D9D9D9;
}

*{ box-sizing:border-box }

html,body{
  margin:0; height:100%; background:#fff; color:#111;
  font-family: "Times New Roman", Times, serif;
}

/* ================== 屏幕切换 ================== */
.screen{ display:none; min-height:100vh; }
.screen.active{ display:block; }

/* ================== HOME ================== */
#home{ position:relative; overflow:hidden; min-height:100vh; cursor:pointer; }
#homeFlowBg{ position:absolute; inset:0; overflow:hidden; }
#homeFlowGrid{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  display:grid; grid-template-columns:repeat(6,var(--grid-w)); grid-auto-rows:var(--grid-h);
  gap:var(--gap); padding:120px 24px 160px; height:auto;
  animation:homeFlow 20s linear infinite;
}
.ghost{
  width:var(--grid-w); height:var(--grid-h); overflow:hidden;
  border-radius:0; background:#f7f7f7;
}
.ghost img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes homeFlow{ 0%{ transform:translate(-50%,0); } 100%{ transform:translate(-50%,-50%); } }
#homeMask{ position:absolute; inset:0; background:rgba(255,255,255,0.86); z-index:2; pointer-events:none; }
#homeOverlay{ position:relative; z-index:3; min-height:100vh; display:flex; padding-top:40px; justify-content:center; }
#homeLogo{
  width:100%; max-width:3000px; aspect-ratio:16/9;
  background:url("assets/IMG_Market_Logo.png") center/contain no-repeat;
  transform:translate(-10px,-20px);
}

/* ================== MARKET ================== */
#market{ position: relative; min-height: 100vh; padding: 260px 20px 40px; }
#marketOverlay{ position: fixed; top: 0; left: 0; right: 0; height: 220px; z-index: 15; pointer-events: none; }
#marketLogo{
    position: absolute; top: -330px; left: 13px; width: 98vw; aspect-ratio: 16/9;
    background: url("assets/IMG_Market_Logo_2.png") center/contain no-repeat; z-index: 10;
}
#marketHint{ position: absolute; top: 600px; left: 70px; font-size: 25px; z-index: 10; }
#marketExit{ position: absolute; right: 70px; top: 600px; font-size: 25px; cursor: pointer; z-index: 999; pointer-events: auto; }

#grid{
  display:grid; grid-template-columns:repeat(6,var(--grid-w)); grid-auto-rows:var(--grid-h);
  gap:var(--gap); justify-content:center; padding-top:8px;
}
.tile{
  position:relative; overflow:hidden; background:#f7f7f7; cursor:pointer;
  transition: transform .26s, box-shadow .26s, grid-column .26s, grid-row .26s;
}
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile.expand{ z-index:2; transform:scale(1); box-shadow:0 12px 36px rgba(15,23,42,.22); }
.tile.span-2row{ grid-row:span 2; }
.tile.span-2col{ grid-column:span 2; }
.tile.to-left{ grid-column:-3 / -1; }

/* ================== TRADE OVERLAY ================== */
#tradeOverlay {
  position: fixed; inset: 0; background: rgba(255, 255, 255, 0.98);
  z-index: 9000; display: none; align-items: center; justify-content: center;
  padding: 20px;
}
#tradeOverlay.active { display: flex; }

.icon-close-btn {
  position: fixed; top: 40px; right: 50px; background: transparent; border: none;
  cursor: pointer; z-index: 10000; padding: 0;
}

.tradeWindowGrid {
  display: grid;
  grid-template-columns: auto 100px auto;
  justify-content: center;
  height: 85vh;
  background: transparent;
  border: var(--border-style);
}

.tradeCol { position: relative; height: 100%; overflow: hidden; background: #fff; }
.left-panel, .right-panel { aspect-ratio: 3 / 4; width: auto; }
.left-panel { border-right: var(--border-style); }
.right-panel { border-left: var(--border-style); background: var(--bg-gray); }
.middle-gap { background: transparent; }

.overlay-title {
  position: absolute; top: 30px; left: 30px;
  font-size: 36px; font-weight: bold; z-index: 50; pointer-events: none;
}
.media-fill-box, #video, #selectedBox img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
#selectedBox { background: #fff; }
.camera-wrapper { position: absolute; inset: 0; background: var(--bg-gray); z-index: 1; }

.overlay-meta {
  position: absolute; bottom: 40px; left: 30px;
  font-size: 28px; line-height: 1.3; z-index: 50; pointer-events: none; font-weight: bold;
}
.tradeForm {
  position: absolute; bottom: 40px; left: 30px; right: 30px;
  z-index: 60; display: flex; flex-direction: column; gap: 12px;
}
.form-row { display: flex; width: 100%; align-items: center; }
.full-width { width: 100%; }
.split-row { gap: 15px; }
.grow-input { flex-grow: 1; }

.pill-input {
  background: transparent; border: var(--border-style); border-radius: 999px;
  padding: 10px 20px; font-size: 22px; outline: none; font-weight: bold;
}

.trade-btn {
  background: var(--blue); border: var(--border-style); border-radius: 999px;
  padding: 10px 30px; font-size: 22px; font-weight: bold; cursor: pointer; white-space: nowrap;
}
.trade-btn:disabled { opacity: 0.8; cursor: not-allowed; }

/* ================== DONE SCREEN ================== */
#done{ position: relative; cursor: pointer; overflow: hidden; }
#doneFlowBg{ position: absolute; inset: 0; overflow: hidden; }
#doneFlowGrid{
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(6, var(--grid-w)); grid-auto-rows: var(--grid-h);
  gap: var(--gap); padding: 120px 24px 160px; height: auto;
  animation: homeFlow 20s linear infinite;
}
#doneMask{
  position: absolute; inset: 0; background: rgba(255, 255, 255, 0.86); z-index: 2; pointer-events: none;
}
.doneMsgWrap{
  position: relative; z-index: 3; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.doneMsg {
  text-align: center; font-size: 32px; line-height: 1.5; font-weight: bold;
}

/* ================== 响应式 ================== */
@media (max-width:1500px){ #grid,#homeFlowGrid,#doneFlowGrid{ grid-template-columns:repeat(5,var(--grid-w)); } }
@media (max-width:1260px){ #grid,#homeFlowGrid,#doneFlowGrid{ grid-template-columns:repeat(4,var(--grid-w)); } }
@media (max-width:1010px){ #grid,#homeFlowGrid,#doneFlowGrid{ grid-template-columns:repeat(3,var(--grid-w)); } }
@media (max-width:760px){ #grid,#homeFlowGrid,#doneFlowGrid{ grid-template-columns:repeat(2,var(--grid-w)); } }

/* ========================================================== */
/* 全局字体风格（白字 + 蓝描边） */
/* ========================================================== */
body, p, span, div,
button, input,
h1, h2, h3, h4, h5, h6,
.serif, .pill-input {
  font-family: "Times New Roman", Times, serif !important;
  color: white !important;
  -webkit-text-stroke: 2px var(--blue) !important;
  text-shadow: none !important;
}

::placeholder {
  color: white !important;
  -webkit-text-stroke: 1.5px var(--blue) !important;
  opacity: 0.7;
}

button.trade-btn {
    -webkit-text-stroke: 0 !important; 
    color: white !important;           
    font-weight: bold !important;
}