* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: #eee;
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; }
button, a { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* 로그인 */
body.login { display: grid; place-items: center; background: #111; }
#login { display: grid; gap: 12px; width: min(300px, calc(100vw - 32px)); text-align: center; }
#login h1 { margin: 0 0 8px; font-weight: 600; }
#login input, #login button { padding: 14px; border-radius: 10px; border: 1px solid #444; font-size: 18px; }
#login input { background: #222; color: #fff; text-align: center; letter-spacing: 4px; }
#login button { background: #2d7ff9; border: 0; color: #fff; }
#msg { min-height: 1.4em; margin: 0; color: #ff8080; }

.bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.bar button, .bar a { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px; padding: 7px 12px; text-decoration: none; cursor: pointer; }

/* 첫 화면: 사진 + 찍기 버튼 */
#home { position: fixed; inset: 0; display: flex; flex-direction: column; background: #111;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* 사진은 살짝 작게(여백) 두고 아래 메뉴가 항상 보이게 한다 */
#photoBox { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 4% 6% 2%; overflow: hidden; }
#homeImg { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; border-radius: 6px; box-shadow: 0 2px 14px rgba(0,0,0,.6); }
#homeImg { transition: filter .7s ease; }
#homeImg.gray { filter: grayscale(1) brightness(.75) contrast(1.05); }
#arrowCv { position: absolute; pointer-events: none; }

/* 손패+전장 */
.homebar .cambtn.pairbtn { background: #7a4dff; }
#swapBtn { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 3px; border-radius: 8px; border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.65);
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
#swapBtn img { width: clamp(64px, 14vw, 140px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; display: block; }
#swapBtn span { font-size: 12px; font-weight: 700; }
#roleTip { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); margin: 0; pointer-events: none;
  background: rgba(122,77,255,.9); border-radius: 14px; padding: 4px 14px; font-size: 14px; font-weight: 700; white-space: nowrap; }
#review { position: fixed; inset: 0; background: #111; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0; }
.rv-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (orientation: portrait) { .rv-cards { grid-template-columns: 1fr; } }
.rv-cards figure { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  background: #1b1b1b; border: 1px solid #333; border-radius: 10px; padding: 8px; }
.rv-cards figcaption { font-weight: 700; font-size: 15px; }
.rv-cards figcaption b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #7a4dff; margin-right: 4px; font-size: 13px; }
.rv-pic { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; border-radius: 6px; overflow: hidden; }
.rv-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rv-empty { color: #777; margin: 0; }
.rv-row { display: flex; align-items: center; gap: 8px; }
.rv-info { flex: 1; font-size: 12px; color: #999; }
.rv-shot, .rv-bar button { background: #2a2a2a; border: 1px solid #444; border-radius: 16px; padding: 7px 14px; cursor: pointer; }
#rvMsg { margin: 6px 0 0; min-height: 1.2em; text-align: center; color: #ff8a8a; font-size: 14px; }
.rv-bar { justify-content: center; gap: 10px; padding: 8px 0 calc(env(safe-area-inset-bottom) + 12px); }
.rv-bar .rv-next { background: #2d7ff9; border: 0; font-size: 17px; font-weight: 700; padding: 10px 26px; border-radius: 24px; }
.rv-bar .rv-next.go { background: #34c759; color: #04210f; }
button:disabled { opacity: .5; cursor: default; }

/* 승리 확률 HUD: 사진 오른쪽 위. 크기는 사진 너비에 맞춰 JS 가 font-size 를 정한다. */
#hud { position: absolute; pointer-events: none; }
#winrate { position: absolute; top: .7em; right: .7em; min-width: 8.5em; padding: .55em .8em .65em;
  background: linear-gradient(160deg, rgba(10,14,24,.9), rgba(24,28,44,.85)); border-radius: .7em;
  border: 2px solid var(--wr, #ffd60a); box-shadow: 0 0 .9em color-mix(in srgb, var(--wr, #ffd60a) 45%, transparent);
  color: #fff; text-align: left; animation: wrIn .5s cubic-bezier(.2,1.6,.4,1); }
#winrate .wr-label { font-size: .78em; font-weight: 700; letter-spacing: .08em; color: #c9d3e6; }
#winrate .wr-num { line-height: 1; margin: .15em 0 .35em; color: var(--wr, #ffd60a);
  text-shadow: 0 0 .4em color-mix(in srgb, var(--wr, #ffd60a) 60%, transparent); }
#winrate .wr-num b { font-size: 2.3em; font-weight: 900; font-variant-numeric: tabular-nums; }
#winrate .wr-num small { font-size: 1.1em; font-weight: 800; margin-left: .1em; }
#winrate .wr-bar { height: .5em; border-radius: .25em; background: rgba(255,255,255,.14); overflow: hidden; }
#winrate .wr-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--wr, #ffd60a);
  box-shadow: 0 0 .5em var(--wr, #ffd60a); }
#winrate .wr-note { font-size: .72em; color: #dfe6f3; margin-top: .4em; max-width: 13em; }
#winrate .wr-note:empty { display: none; }
#winrate.pop { animation: wrPop .6s ease; }
@keyframes wrIn { from { opacity: 0; transform: translateY(-.6em) scale(.85); } }
@keyframes wrPop { 40% { transform: scale(1.12); box-shadow: 0 0 1.6em var(--wr, #ffd60a); } }

/* 분석중: 사진 위에 훑고 지나가는 스캔 줄 + 가운데 문구 */
#analyzing { position: absolute; pointer-events: none; overflow: hidden; border-radius: 6px;
  display: grid; place-items: center; animation: fadein .4s ease; }
#analyzing .scan { position: absolute; left: 0; right: 0; height: 22%; top: -22%;
  background: linear-gradient(transparent, rgba(77,163,255,.28), transparent); animation: scan 1.8s linear infinite; }
#analyzing p { position: relative; margin: 0; display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.25); border-radius: 22px;
  padding: 9px 18px; font-size: clamp(15px, 2.4vw, 22px); font-weight: 700; letter-spacing: .5px; }
#analyzing p span::after { content: ""; display: inline-block; width: 1.4em; text-align: left; animation: dots 1.2s steps(4) infinite; }
#analyzing i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25);
  border-top-color: #4da3ff; animation: spin .8s linear infinite; }
@keyframes scan { to { top: 100%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@keyframes fadein { from { opacity: 0; } }
#arrowCv.drawing { pointer-events: auto; cursor: crosshair; outline: 2px dashed #ffd60a; }
#homeEmpty { text-align: center; color: #888; }
#homeInfo { margin: 0; text-align: center; font-size: 13px; color: #999; min-height: 1.4em; }
.homebar { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px 14px;
  background: #1b1b1b; border-top: 1px solid #333; }
.homebar .cambtn { background: #2d7ff9; border: 0; font-size: 18px; padding: 10px 26px; border-radius: 26px; }
.homebar .tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.homebar .tools button, .homebar .tools a { font-size: 15px; padding: 9px 14px; text-align: center;
  background: #2a2a2a; border-color: #444; }
#arrowBtn.on { background: #ffd60a; color: #000; border-color: #ffd60a; }
@media (orientation: landscape) and (max-height: 500px) {
  /* 가로: 메뉴를 아래 한 줄로 */
  #homeInfo { display: none; }
  #photoBox { padding: 10px 8% 6px; }
  .homebar { flex-wrap: nowrap; padding: 8px 10px 10px; }
  .homebar .tools { flex-wrap: nowrap; }
  .homebar .tools button, .homebar .tools a { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
}

/* AI 안내 */
#aiPanel { position: fixed; inset: 0; z-index: 4; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: 16px; }
.aibox { width: min(900px, 100%); height: min(90vh, 100%); display: flex; flex-direction: column; background: #1b1b1b;
  border: 1px solid #333; border-radius: 12px; overflow: hidden; }
.aihead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #333; }
.aihead b { flex: 1; font-size: 14px; }
.aihead a { font-size: 13px; text-decoration: none; background: #2a2a2a; border: 1px solid #444; border-radius: 14px; padding: 5px 12px; }
.aihead button { background: #2a2a2a; border: 1px solid #444; border-radius: 14px; padding: 5px 12px; cursor: pointer; }
#aiCopy { background: #2d7ff9; border-color: #2d7ff9; }
#aiText { flex: 1; margin: 0; padding: 12px; overflow: auto; white-space: pre-wrap; word-break: break-all;
  font: 12.5px/1.5 ui-monospace, Consolas, monospace; color: #ddd; user-select: text; }

/* 촬영 화면 (가로) */
#cam { position: fixed; inset: 0; overflow: hidden; background: #000; }
#stage { position: absolute; }
#video, #guide { position: absolute; inset: 0; width: 100%; height: 100%; }
#video { object-fit: fill; background: #000; }
#guide { pointer-events: none; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .25s; }
#flash.on { opacity: .7; transition: none; }
/* 선명도 표시: 초록=선명, 노랑=조금 흐림, 빨강=흐림 */
#sharp { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 6px; pointer-events: none;
  background: rgba(0,0,0,.6); border-radius: 12px; padding: 3px 10px 3px 6px; font-size: 13px; }
#sharp i { width: 12px; height: 12px; border-radius: 50%; background: #888; }
#sharp.good i { background: #3ddc84; } #sharp.mid i { background: #ffd60a; } #sharp.bad i { background: #ff5c5c; }
#sharp.busy { background: rgba(45,127,249,.85); }
#tip { position: absolute; left: 8px; bottom: 6px; margin: 0; pointer-events: none; font-size: 12px; color: #ddd;
  background: rgba(0,0,0,.5); border-radius: 10px; padding: 2px 8px; }
#focusRing { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid #ffd60a;
  border-radius: 8px; pointer-events: none; animation: ring .6s ease-out; }
@keyframes ring { from { transform: scale(1.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#camMsg { position: absolute; inset: 40% 96px auto 16px; text-align: center; color: #ccc; }

.side { position: absolute; top: 0; bottom: 0; right: env(safe-area-inset-right); width: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0; }
.side .small { width: 84px; padding: 5px 0; font-size: 13px; border-radius: 14px; cursor: pointer;
  background: #1c1c1c; border: 1px solid #444; }
.side .opts { display: grid; gap: 6px; }
#shutter { width: 70px; height: 70px; border-radius: 50%; padding: 0; background: #fff; flex: none;
  border: 5px solid rgba(255,255,255,.45); background-clip: padding-box; cursor: pointer; }
#shutter:active { transform: scale(.92); }

/* 세로로 들고 있으면 촬영을 막고 돌려 달라고 안내 */
#rotate { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 18px;
  background: rgba(0,0,0,.88); text-align: center; font-size: 18px; }
#rotate p { margin: 0; }
#rotate button { background: none; border: 1px solid #666; border-radius: 18px; padding: 7px 16px; }
#rotate .phone { width: 46px; height: 80px; border: 4px solid #eee; border-radius: 9px; animation: turn 1.8s ease-in-out infinite; }
@keyframes turn { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) {
  #rotate { display: grid; }
}

#status { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 12px); transform: translateX(-50%); z-index: 5;
  background: rgba(0,0,0,.75); border-radius: 16px; padding: 6px 14px; font-size: 14px; white-space: nowrap; }
#status.err { color: #ff8a8a; }

/* 갤러리 */
#gallery { position: fixed; inset: 0; overflow-y: auto; background: #111; padding-top: calc(env(safe-area-inset-top) + 60px); }
.gtop { position: fixed; top: 0; left: 0; right: 0; padding-top: calc(env(safe-area-inset-top) + 10px); background: #111; z-index: 1; }
#usage { flex: 1; text-align: center; color: #999; font-size: 13px; }
#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 3px; padding: 0 3px 24px; }
#grid button { aspect-ratio: 16 / 10; border: 0; padding: 0; background: #222; cursor: pointer; }
#grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
#empty { text-align: center; color: #888; margin-top: 30vh; }

/* 크게 보기 */
#viewer { position: fixed; inset: 0; background: #000; display: grid; place-items: center; z-index: 3; }
#viewImg { max-width: 100%; max-height: 100%; object-fit: contain; }
.vbottom { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom); background: linear-gradient(transparent, rgba(0,0,0,.8)); }
#viewInfo { flex: 1; text-align: center; font-size: 13px; color: #bbb; }
.danger { color: #ff8a8a !important; }