/* ============================================================
   PHALANX · Reimagined — styling (Obsidian / Mediterranean)
   gold #C9A44A · aegean #5EA8D8 · terracotta #D9694A · ink #0E0B07
   Touch-first: ≥48px hit targets, no hover dependence.
   ============================================================ */

#ph-wrap {
  --gold:var(--sym-gold,#C9A44A);
  --gold-hi:color-mix(in srgb, var(--sym-gold,#C9A44A) 78%, #fff 22%);
  --gold-dk:color-mix(in srgb, var(--sym-gold,#C9A44A) 60%, #000 40%);
  --a:#5EA8D8; --a-dk:#2E6F94; --a-glow:rgba(94,168,216,.5);
  --b:#D9694A; --b-dk:#9A4428; --b-glow:rgba(217,105,74,.5);
  --ink:var(--sym-bg,#0E0B07);
  --ink2:var(--sym-bg-card,#171009);
  --raised:color-mix(in srgb, var(--sym-bg-card,#1f160b) 82%, var(--sym-fg,#fff) 7%);
  --line:color-mix(in srgb, var(--sym-gold,#C9A44A) 24%, transparent);
  --txt:var(--sym-fg,#E8DCC8); --dim:var(--sym-stone,#8a7a60);
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  font-family:'Crimson Text','Noto Serif',Georgia,serif;
  color:var(--txt); -webkit-tap-highlight-color:transparent;
}
#ph-wrap * { box-sizing:border-box; }
.ph-cinzel { font-family:'Cinzel',serif; }

/* ───────── SCREENS ───────── */
.ph-screen { display:none; width:100%; min-height:100%; }
.ph-screen.active { display:flex; flex-direction:column; }

/* ───────── CONTENT PICKER (battleship-style menu) ───────── */
.ph-pick-root {
  width:100%; min-height:100%; flex:1;
  display:flex; flex-direction:column; align-items:center;
  padding:52px 20px 44px; box-sizing:border-box; position:relative;
  background:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--sym-bg-card,#1b1510) 82%, var(--sym-fg,#fff) 7%) 0%, var(--ink) 70%);
}
.ph-pick-exit {
  position:absolute; top:14px; left:14px;
  background:color-mix(in srgb, var(--sym-bg,#0E0B07) 70%, transparent); border:1px solid color-mix(in srgb, var(--sym-gold,#C9A44A) 30%, transparent);
  color:color-mix(in srgb, var(--sym-gold,#C9A44A) 82%, transparent); font-family:'Cinzel',serif; font-size:.72rem;
  letter-spacing:.04em; padding:7px 15px; border-radius:6px; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.ph-pick-exit:hover { border-color:var(--gold); color:var(--gold); }
.ph-pick-menu { width:100%; max-width:660px; display:flex; flex-direction:column; align-items:center; }
.ph-pick-title {
  font-family:'Cormorant Garamond','Cinzel',serif; font-weight:600;
  font-size:clamp(2.4rem,7vw,4rem); letter-spacing:.2em; color:var(--gold);
  margin:0; text-align:center; line-height:1; text-shadow:0 0 50px color-mix(in srgb, var(--sym-gold,#C9A44A) 22%, transparent);
}
.ph-pick-sub {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.05rem; letter-spacing:.1em; color:var(--dim);
  margin:6px 0 0; text-align:center;
}
.ph-pick-hr { width:72px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dk),transparent); margin:16px 0 24px; }
.ph-pick-groups { width:100%; display:flex; flex-direction:column; gap:24px; }
.ph-pick-cat-h {
  font-family:'Cinzel',serif; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:color-mix(in srgb, var(--sym-gold,#C9A44A) 66%, transparent);
  padding-bottom:8px; margin-bottom:11px; border-bottom:1px solid color-mix(in srgb, var(--sym-gold,#C9A44A) 14%, transparent);
}
.ph-pick-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px; }
.ph-pick-btn {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:linear-gradient(135deg, var(--raised), color-mix(in srgb, var(--sym-bg-card,#2a1f12) 82%, var(--sym-fg,#fff) 7%));
  border:1px solid color-mix(in srgb, var(--sym-gold,#C9A44A) 22%, transparent); border-radius:9px; padding:13px 15px;
  cursor:pointer; color:var(--txt);
  transition:border-color .16s, transform .12s, box-shadow .16s;
}
.ph-pick-btn:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 7px 22px color-mix(in srgb, var(--sym-gold,#C9A44A) 16%, transparent); }
.ph-pick-ic { font-size:1.55rem; line-height:1; flex-shrink:0; }
.ph-pick-tx { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.ph-pick-nm { font-family:'Cinzel',serif; font-size:.88rem; color:var(--gold-hi); letter-spacing:.02em; }
.ph-pick-mt { font-family:'Noto Serif',serif; font-size:.72rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-pick-end { color:color-mix(in srgb, var(--sym-gold,#C9A44A) 60%, transparent); font-size:1rem; flex-shrink:0; }
.ph-pick-btn.locked { opacity:.55; }
.ph-pick-btn.locked:hover { transform:none; border-color:color-mix(in srgb, var(--sym-gold,#C9A44A) 22%, transparent); box-shadow:none; }
.ph-pick-empty { color:var(--dim); font-style:italic; text-align:center; }

/* lobby: chosen-subject / change-content button */
.ph-l-back {
  margin-top:12px; background:color-mix(in srgb, var(--sym-bg,#0E0B07) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--sym-gold,#C9A44A) 28%, transparent); color:var(--gold-hi);
  font-family:'Cinzel',serif; font-size:.74rem; letter-spacing:.03em;
  padding:7px 16px; border-radius:7px; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.ph-l-back:hover { border-color:var(--gold); }
.ph-l-back-ic { margin-right:4px; }
.ph-l-back-chg { color:var(--dim); }

/* ───────── LOBBY ───────── */
.ph-lobby { max-width:760px; margin:0 auto; padding:26px 18px 44px; width:100%; }
.ph-l-head { text-align:center; margin-bottom:24px; }
.ph-l-kicker { font-family:'Cinzel',serif; font-size:.64rem; letter-spacing:.3em; color:var(--gold); opacity:.85; }
.ph-l-title { font-family:'Cinzel',serif; font-weight:600; font-size:clamp(2rem,6vw,3rem); color:var(--gold-hi); margin:6px 0 4px; line-height:1; }
.ph-l-title em { color:var(--gold); font-style:normal; }
.ph-l-sub { color:var(--dim); font-style:italic; font-size:1.05rem; max-width:520px; margin:0 auto; }

.ph-card { background:rgba(0,0,0,.16); border:1px solid var(--line); border-radius:13px; padding:16px 18px; margin-bottom:16px; }
.ph-card-h { font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.18em; color:var(--gold); text-transform:uppercase; margin-bottom:13px; display:flex; align-items:center; gap:8px; }
.ph-card-h::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }

.ph-set-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ph-set-row:last-child { margin-bottom:0; }
.ph-set-row > label { font-size:.92rem; color:var(--dim); flex-shrink:0; }
.ph-set-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.ph-set-grid .ph-set-row { flex-direction:column; align-items:stretch; gap:7px; }
.ph-set-grid .ph-set-row > label { font-family:'Cinzel',serif; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; }

/* segmented control */
.ph-seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--ink2); }
.ph-seg.wrap { flex-wrap:wrap; }
.ph-seg button {
  flex:1; padding:10px 14px; min-height:44px; cursor:pointer; white-space:nowrap;
  font-family:'Cinzel',serif; font-size:.76rem; letter-spacing:.03em;
  background:transparent; color:var(--dim); border:none; border-right:1px solid var(--line);
  transition:all .15s;
}
.ph-seg button:last-child { border-right:none; }
.ph-seg button:hover { color:var(--txt); background:color-mix(in srgb, var(--sym-gold,#C9A44A) 6%, transparent); }
.ph-seg button.on { background:linear-gradient(180deg,color-mix(in srgb, var(--sym-gold,#C9A44A) 22%, transparent),color-mix(in srgb, var(--sym-gold,#C9A44A) 10%, transparent)); color:var(--gold-hi); }

/* mode cards (big two-up) */
.ph-modes { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.ph-mode {
  text-align:left; padding:16px; border-radius:13px; cursor:pointer; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.16));
  border:1.5px solid var(--line); transition:border-color .2s,box-shadow .2s,transform .15s; color:inherit;
}
.ph-mode:hover { transform:translateY(-2px); }
.ph-mode.on { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold),0 12px 34px -16px color-mix(in srgb, var(--sym-gold,#C9A44A) 60%, transparent); }
.ph-mode-tag { font-family:'Cinzel',serif; font-size:.9rem; font-weight:600; color:var(--gold-hi); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.ph-mode-tag .ph-dot { width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0; }
.ph-mode.on .ph-dot { background:var(--gold); box-shadow:0 0 8px var(--gold); }
.ph-mode-desc { font-size:.92rem; line-height:1.5; color:var(--dim); }

/* unit legend */
.ph-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.ph-unit-card { display:flex; gap:11px; align-items:flex-start; padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:var(--ink2); }
.ph-unit-emb { width:38px; height:38px; flex-shrink:0; border-radius:9px; background:radial-gradient(circle at 35% 30%,var(--a),var(--a-dk)); display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-size:.6rem; font-weight:700; color:#06121c; letter-spacing:.04em; border:1px solid rgba(255,255,255,.14); }
.ph-unit-emb.ar { background:radial-gradient(circle at 35% 30%,#7fc0ec,#2E6F94); }
.ph-unit-emb.ca { background:radial-gradient(circle at 35% 30%,#9fd0ee,#2E6F94); }
.ph-unit-emb.ge { background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-dk)); color:#1a1304; }
.ph-unit-body h4 { margin:0 0 2px; font-family:'Cinzel',serif; font-size:.82rem; color:var(--txt); font-weight:600; }
.ph-unit-body h4 span { color:var(--dim); font-weight:400; font-size:.72rem; }
.ph-unit-body p { margin:0; font-size:.82rem; line-height:1.4; color:var(--dim); }

/* terrain legend chips */
.ph-terr { display:flex; flex-wrap:wrap; gap:8px; }
.ph-terr-chip { display:flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid var(--line); border-radius:20px; background:var(--ink2); font-size:.82rem; color:var(--dim); }
.ph-terr-chip b { color:var(--txt); font-weight:600; font-family:'Cinzel',serif; font-size:.74rem; }
.ph-terr-sw { width:13px; height:13px; border-radius:3px; flex-shrink:0; }

.ph-start-btn {
  width:100%; margin-top:6px; padding:16px; min-height:54px; cursor:pointer; border-radius:11px;
  font-family:'Cinzel',serif; font-size:1.02rem; font-weight:600; letter-spacing:.06em;
  background:linear-gradient(180deg,var(--gold),var(--gold-dk)); color:#1a1304; border:none;
  box-shadow:0 10px 30px -12px color-mix(in srgb, var(--sym-gold,#C9A44A) 70%, transparent); transition:all .15s;
}
.ph-start-btn:hover { transform:translateY(-2px); box-shadow:0 14px 36px -12px color-mix(in srgb, var(--sym-gold,#C9A44A) 85%, transparent); }
.ph-start-btn.sec { background:transparent; border:1px solid var(--line); color:var(--dim); box-shadow:none; font-size:.86rem; min-height:48px; }
.ph-start-btn.sec:hover { border-color:var(--gold); color:var(--txt); }

/* ───────── BATTLE / PLACEMENT shared shell ───────── */
.ph-play { flex:1; min-height:0; display:flex; flex-direction:column; }
.ph-hud { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 16px; background:var(--ink2); border-bottom:1px solid var(--line); flex-shrink:0; }
.ph-hud-side { display:flex; flex-direction:column; gap:1px; min-width:96px; }
.ph-hud-side.right { align-items:flex-end; }
.ph-hud-lbl { font-family:'Cinzel',serif; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.ph-hud-name { font-size:.92rem; color:var(--txt); line-height:1.1; }
.ph-hud-cnt { font-family:'Cinzel',serif; font-size:1.5rem; line-height:1; }
.ph-hud-cnt.p { color:var(--a); } .ph-hud-cnt.a { color:var(--b); }
.ph-hud-pips { display:flex; gap:3px; margin-top:3px; }
.ph-hud-side.right .ph-hud-pips { justify-content:flex-end; }
.ph-pip { width:7px; height:7px; border-radius:2px; background:var(--line); }
.ph-pip.p.live { background:var(--a); } .ph-pip.a.live { background:var(--b); }
.ph-pip.gen.p.live { background:var(--gold); box-shadow:0 0 5px var(--gold); }
.ph-pip.gen.a.live { background:var(--gold); box-shadow:0 0 5px var(--gold); }
.ph-hud-mid { display:flex; flex-direction:column; align-items:center; gap:5px; }
.ph-turn-tag { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border:1px solid; border-radius:6px; transition:.3s; }
.ph-turn-tag.p { color:var(--a); border-color:var(--a-dk); background:rgba(94,168,216,.08); }
.ph-turn-tag.a { color:var(--b); border-color:var(--b-dk); background:rgba(217,105,74,.08); }
.ph-exit-mini { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.06em; color:var(--dim); background:none; border:none; cursor:pointer; padding:4px; }
.ph-exit-mini:hover { color:var(--gold); }

.ph-status { font-size:.96rem; letter-spacing:.01em; color:var(--gold); text-align:center; min-height:24px; padding:8px 16px 4px; flex-shrink:0; }
.ph-status b { color:var(--gold-hi); }
.ph-status .ph-hint { color:var(--dim); font-style:italic; font-size:.86rem; }

.ph-board-area { flex:1; min-height:0; position:relative; }
.ph-board-area canvas { display:block; width:100%; height:100%; cursor:pointer; }

/* placement picker bar */
.ph-pbar { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:10px 16px; flex-shrink:0; background:var(--ink2); border-top:1px solid var(--line); }
.ph-pick {
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 12px; min-width:62px;
  border:1px solid var(--line); border-radius:10px; background:var(--raised); cursor:pointer; transition:all .15s;
}
.ph-pick:hover { border-color:var(--gold); }
.ph-pick.sel { border-color:var(--gold); background:color-mix(in srgb, var(--sym-gold,#C9A44A) 12%, transparent); box-shadow:0 0 0 1px var(--gold); }
.ph-pick.done { opacity:.3; pointer-events:none; }
.ph-pick-lbl { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.04em; color:var(--txt); }
.ph-pick-cnt { font-size:.74rem; color:var(--gold); }
.ph-pbar-actions { display:flex; gap:10px; align-items:center; }
.ph-mini-btn { padding:11px 20px; min-height:46px; border-radius:9px; cursor:pointer; font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.04em; border:1px solid var(--line); background:var(--ink2); color:var(--dim); transition:all .15s; }
.ph-mini-btn.go { background:linear-gradient(180deg,var(--gold),var(--gold-dk)); color:#1a1304; border:none; font-weight:600; }
.ph-mini-btn.go:disabled { opacity:.35; cursor:default; }
.ph-mini-btn:not(.go):hover { border-color:var(--gold); color:var(--txt); }

/* pass-device curtain (hot-seat) */
.ph-curtain { position:absolute; inset:0; z-index:60; display:none; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:2rem; text-align:center; background:rgba(8,5,2,.96); }
.ph-curtain.active { display:flex; }
.ph-curtain-glyph { font-size:3rem; color:var(--gold); }
.ph-curtain h2 { font-family:'Cinzel',serif; font-size:1.6rem; color:var(--gold-hi); margin:0; }
.ph-curtain p { color:var(--dim); max-width:340px; margin:0; font-size:1rem; }

/* ───────── QUIZ / CLASH MODAL ───────── */
.ph-quiz { position:absolute; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:1.25rem; background:rgba(8,5,2,.93); }
.ph-quiz.active { display:flex; }
.ph-quiz-box { max-width:540px; width:100%; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,var(--raised),var(--ink2)); padding:1.5rem; box-shadow:0 30px 80px -30px #000; }
.ph-clash-row { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.ph-clash-side { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ph-clash-emb { width:52px; height:52px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-size:.64rem; font-weight:700; letter-spacing:.04em; border:1px solid rgba(255,255,255,.16); }
.ph-clash-emb.p { background:radial-gradient(circle at 35% 30%,var(--a),var(--a-dk)); color:#06121c; }
.ph-clash-emb.a { background:radial-gradient(circle at 35% 30%,var(--b),var(--b-dk)); color:#1c0a04; }
.ph-clash-nm { font-family:'Cinzel',serif; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); text-align:center; }
.ph-clash-edge { display:flex; gap:3px; min-height:9px; }
.ph-edge-pip { width:8px; height:8px; border-radius:50%; background:var(--line); }
.ph-edge-pip.p { background:var(--a); box-shadow:0 0 6px var(--a-glow); }
.ph-edge-pip.a { background:var(--b); box-shadow:0 0 6px var(--b-glow); }
.ph-clash-mid { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ph-clash-vs { font-family:'Cinzel',serif; font-size:1.6rem; color:var(--gold); }
.ph-clash-fore { font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); text-align:center; max-width:90px; line-height:1.3; }
.ph-clash-fore b { color:var(--gold-hi); font-family:'Cinzel',serif; }

.ph-qlbl { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; display:flex; justify-content:space-between; align-items:center; }
.ph-qtimer { color:var(--dim); font-family:'Crimson Text',serif; letter-spacing:0; }
.ph-qtxt { font-family:'Cormorant Garamond','Noto Serif',serif; font-size:clamp(1.2rem,3.4vw,1.55rem); line-height:1.4; color:var(--txt); margin-bottom:1rem; }
.ph-opts { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ph-opt {
  padding:15px 13px; min-height:56px; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.025); cursor:pointer; transition:all .15s;
  font-family:'Noto Serif','Cormorant Garamond',serif; font-size:1rem; color:var(--txt); text-align:left; line-height:1.35;
}
.ph-opt:not(:disabled):hover { background:color-mix(in srgb, var(--sym-gold,#C9A44A) 10%, transparent); border-color:var(--gold); }
.ph-opt.correct { background:rgba(94,168,216,.2); border-color:var(--a); color:var(--txt); }
.ph-opt.wrong { background:rgba(217,105,74,.18); border-color:var(--b); color:var(--dim); }
.ph-opt:disabled { cursor:default; }
.ph-clash-res { margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--line); font-size:.96rem; line-height:1.5; color:var(--dim); text-align:center; min-height:24px; }
.ph-clash-res strong { color:var(--txt); }
.ph-clash-res.win strong { color:var(--a); } .ph-clash-res.lose strong { color:var(--b); } .ph-clash-res.draw strong { color:var(--gold-hi); }

/* ───────── RESULT ───────── */
.ph-result { align-items:center; justify-content:center; text-align:center; gap:1rem; padding:2.5rem 1.5rem; flex:1; }
.ph-res-kicker { font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); }
.ph-res-title { font-family:'Cinzel',serif; font-size:clamp(2.6rem,9vw,4.5rem); font-weight:600; line-height:1; }
.ph-res-title.win { color:var(--gold-hi); } .ph-res-title.lose { color:var(--b); }
.ph-res-detail { font-size:1.05rem; line-height:1.6; color:var(--dim); max-width:440px; font-style:italic; }
.ph-res-stats { display:flex; gap:26px; margin:8px 0 4px; }
.ph-res-stat { display:flex; flex-direction:column; gap:2px; }
.ph-res-stat .v { font-family:'Cinzel',serif; font-size:1.7rem; color:var(--gold-hi); }
.ph-res-stat .k { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.ph-res-btns { display:flex; gap:12px; margin-top:.6rem; flex-wrap:wrap; justify-content:center; }