/* =====================================================================
   screens-misc.css —— 登录(auth) / 主页(home) / AI 编程(coding) 三屏样式。
   风格：FIFA 风暗色电竞（深蓝底 + 青色霓虹 + 金色强调），组件复用 theme.css。
   设计稿：竖屏 1080x1920（#stage 内布局，单位直接用 px）。
   ===================================================================== */

/* 引入设计底座（tokens + .t-* 组件）。重复 @import 同一文件无副作用。 */
@import url("theme.css");

/* ---------------------------------------------------------------------
   通用：登录/AI 编程两屏共用的面板背景（覆盖 main.css 的 .panel 渐变）
   顶部青色球场灯光 + 底部金色余晖，营造夜场球场氛围
   （主页已改 FC 风 v2 大厅，样式独立在 screens-home.css）
   --------------------------------------------------------------------- */
#screen-auth .panel,
#screen-coding .panel {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(45, 212, 255, 0.12), transparent 62%),
    radial-gradient(760px 420px at 50% 112%, rgba(245, 195, 75, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}

/* 三屏输入控件统一放大（theme .t-input 默认 26px 偏小，1080 设计稿下加大） */
#screen-auth .t-input,
#screen-coding .t-input {
  font-size: 32px;
  padding: 20px 24px;
  border-radius: var(--r-md);
  width: 100%;
}

/* =====================================================================
   1. 登录 / 注册
   ===================================================================== */

#screen-auth .auth-panel {
  align-items: center;
  justify-content: center;
  gap: 56px;
}

/* ---- 纯 CSS 文字 LOGO：斜体大字 + 青色霓虹光晕 ---- */
.auth-logo { text-align: center; user-select: none; }
.auth-logo-text {
  font-size: 110px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 2px;
  color: var(--text-0);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  line-height: 1.1;
}
.auth-logo-text em {
  font-style: italic;
  color: var(--accent);
  /* 多层 text-shadow 叠出霓虹灯管效果 */
  text-shadow:
    0 0 14px rgba(45, 212, 255, 0.85),
    0 0 42px rgba(45, 212, 255, 0.45),
    0 0 90px rgba(45, 212, 255, 0.25);
}
.auth-logo-sub {
  margin-top: 14px;
  font-size: 26px;
  letter-spacing: 10px;
  color: var(--text-1);
}

/* ---- 居中毛玻璃大卡 ---- */
.auth-card {
  width: 860px;
  max-width: 100%;
  padding: 52px 64px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  /* 顶部一条青色发光描边，强化电竞感 */
  border-top: 2px solid rgba(45, 212, 255, 0.55);
  box-shadow: var(--shadow-card), 0 -2px 28px rgba(45, 212, 255, 0.12);
}

/* 卡内标题：居中、随登录/注册切换 */
.auth-title {
  font-size: 48px;
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: 4px;
  color: var(--text-0);
}

#screen-auth label { font-size: 26px; color: var(--text-1); gap: 12px; }

/* 注册扩展区（昵称/队名/国籍）：与上方字段同列距 */
.auth-extra { display: flex; flex-direction: column; gap: 26px; }

/* ---- 国籍选择行：◀ 大国旗+国名 ▶ ---- */
#screen-auth .nation-picker {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(10, 16, 32, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
}
#screen-auth .nation-btn { padding: 14px 26px; font-size: 30px; flex: none; }
#screen-auth .nation-display {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 0;
}
/* 国旗 emoji 大号展示 */
#screen-auth .nation-flag { font-size: 72px; }
#screen-auth .nation-name { font-size: 36px; font-weight: 700; color: var(--text-0); }

/* ---- 提交按钮：全宽主色 ---- */
.auth-submit { width: 100%; font-size: 38px; padding: 24px; letter-spacing: 6px; margin-top: 8px; }

/* ---- 登录/注册切换链接：去按钮化、精致下划线 ---- */
.auth-toggle {
  align-self: center;
  background: none;
  border: none;
  padding: 8px 6px;
  font-size: 26px;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: 1px;
  border-bottom: 1px solid transparent;
  transition: all 0.15s ease;
}
.auth-toggle:hover {
  border-bottom-color: var(--accent);
  text-shadow: 0 0 12px rgba(45, 212, 255, 0.5);
}

.auth-status { text-align: center; }
.auth-demo { text-align: center; font-size: 22px; }

/* （旧主页样式已整体迁移重做：见 https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/css/screens-home.css「FC 风 v2 大厅」） */

/* =====================================================================
   3. AI 编程
   ===================================================================== */

#screen-coding .coding-panel { padding: 44px 64px; gap: 22px; }

/* ---- 顶栏：标题 + 额度徽章 + 返回 ---- */
.coding-topbar { gap: 22px; }
#screen-coding .t-title { font-size: 42px; }
#screen-coding .coding-topbar .t-badge { font-size: 25px; padding: 8px 20px; }
.coding-back { margin-left: auto; font-size: 26px; padding: 12px 30px; }

/* ---- 分区卡片通用 ---- */
.coding-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 34px;
  border-radius: var(--r-lg);
}

/* 卡片 1：引导文案（左侧青色竖条强调） */
.coding-intro-card { border-left: 4px solid var(--accent); padding: 24px 30px; }
#screen-coding .coding-intro { font-size: 25px; line-height: 1.7; color: var(--text-1); }

/* 卡片 2：表单区 */
#screen-coding label { font-size: 26px; color: var(--text-1); gap: 10px; }
#screen-coding textarea.t-input { line-height: 1.6; min-height: 200px; }
/* 下拉框沿用 t-input 外观（去原生底色） */
#screen-coding select.t-input { cursor: pointer; }

/* 横排容器里的 t-btn 平分宽度（main.css 只对旧 .btn 生效，这里补上） */
#screen-coding .coding-row { gap: 22px; }
#screen-coding .coding-row .t-btn { flex: 1 1 0; }

/* 生成按钮：全宽主色 */
.coding-generate { width: 100%; font-size: 36px; padding: 22px; letter-spacing: 4px; }

/* 上传/下载行：ghost 弱化为次级操作 */
.coding-actions .t-btn { font-size: 27px; padding: 16px 24px; }

/* ---- 卡片 3：结果代码区（等宽字体深色代码框） ---- */
#screen-coding .code-result {
  flex: 1 1 auto;
  min-height: 160px;
  overflow: auto;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 28px;
  font-family: Consolas, "JetBrains Mono", "SF Mono", Menlo, "Courier New", monospace;
  font-size: 22px;
  line-height: 1.55;
  color: #9fe8a8;
  white-space: pre-wrap;
  word-break: break-all;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5);
}
/* 空态占位提示（生成/上传成功后由 JS 填充文本） */
#screen-coding .code-result:empty::before {
  content: "生成或上传成功后，agent 代码会显示在这里…";
  color: var(--text-2);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* =====================================================================
   ★ PC 横屏（1920x1080）适配 —— 仅在 body.landscape 下生效，
   由 https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/js/app.js fitStage() 按窗口宽高比 + LANDSCAPE_READY 切换。
   竖版（1080x1920）规则一律不动，以下全部是追加覆盖。
   ===================================================================== */

/* ---------------------------------------------------------------------
   ★ 横屏 1. 登录 / 注册：LOGO 左 + 登录卡右，左右双栏避免上下挤压。
   panel 左右留 140px，保证卡片不与右上角语言切换角标(.lang-toggle)重叠。
   --------------------------------------------------------------------- */
body.landscape #screen-auth .auth-panel {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 110px;
  padding: 48px 140px;
}
body.landscape #screen-auth .auth-logo { flex: 0 1 auto; }
/* 注册态字段多（昵称/队名/国籍），1080 高放不下时卡内滚动，不撑破舞台 */
body.landscape #screen-auth .auth-card {
  flex: 0 0 860px;
  max-height: 100%;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------
   ★ 横屏 2. 主页：FC 风 v2 大厅横版规则在 https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/css/screens-home.css。
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   ★ 横屏 3. AI 编程：intro 卡横贯顶部，表单卡（左 55%）| 结果代码区（右 45%）。
   表单卡高度吃紧时内部滚动，代码区独立滚动。
   --------------------------------------------------------------------- */
body.landscape #screen-coding .coding-panel {
  display: grid;
  grid-template-columns: 55fr 45fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top    top"
    "intro  intro"
    "form   result"
    "status status";
  gap: 20px 28px;
  padding: 36px 64px;
}
body.landscape #screen-coding .coding-topbar { grid-area: top; }
body.landscape #screen-coding .coding-intro-card { grid-area: intro; }
body.landscape #screen-coding .coding-form-card {
  grid-area: form;
  padding: 24px 30px;
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
}
body.landscape #screen-coding .code-result { grid-area: result; min-height: 0; }
body.landscape #screen-coding .coding-panel > .status { grid-area: status; }
/* 横版可视高度有限：描述输入框略降高（竖版 200px） */
body.landscape #screen-coding textarea.t-input { min-height: 150px; }

/* ---------------------------------------------------------------------
   ★ 横屏 4. 球员自定义：已是「列表左 + 属性右」双栏，横版只做加宽与留白；
   左列加宽到 440px，属性条吃满剩余横向空间。顶栏结构不变。
   （cz- 竖版样式在 screens-team.css，此处仅追加 body.landscape 覆盖。）
   --------------------------------------------------------------------- */
body.landscape #screen-customize .cz-panel { padding: 28px 48px; gap: 16px; }
body.landscape #screen-customize .cz-body { gap: 28px; }
body.landscape #screen-customize .cz-players { width: 440px; }
/* 14 行属性在 1080 高内放不下：行距/行高微缩，几乎免滚动（仍可内部滚动兜底） */
body.landscape #screen-customize .cz-attrs { gap: 8px; }
body.landscape #screen-customize .cz-attr { padding: 6px 16px; }