* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg, #fff8ee); color: var(--text, #2b2118);
  font-family: var(--font, system-ui, sans-serif);
  -webkit-user-select: none; user-select: none;
}
/* olapaca 공용 위 이름표(.ola-top)·아래 탭(.ola-tabbar)은 /common/bar.js 가 넣는다(nopo 세션 소유). 게임 중엔 숨긴다 */
body { display: flex; flex-direction: column; height: 100dvh; }
#app { flex: 1; min-height: 0; width: 100%; max-width: 1100px; margin: 0 auto; }
body[data-screen="game"] .ola-top, body[data-screen="game"] .ola-tabbar, body[data-screen="game"] .ola-pop { display: none !important; }
body[data-screen="game"].ola-has-tabs { padding-bottom: 0; }
[hidden] { display: none !important; }
.screen { height: 100%; display: flex; flex-direction: column; padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }

.start-box, .result-box {
  margin: auto; width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center;
}
.title { font-size: 44px; margin: 0; color: var(--accent, #d9531e); letter-spacing: -1px; }
.rule { margin: 0 0 8px; color: var(--muted, #7a6a58); }
.today-score { margin: 0; font-weight: 700; font-size: 18px; }
.best { margin: 0; color: var(--muted, #7a6a58); font-size: 14px; }
.btn {
  font: inherit; font-size: 18px; font-weight: 700; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--cell-border, #e0cdb5); background: var(--surface, #fff); color: var(--text, #2b2118);
}
.btn.primary { background: var(--accent, #d9531e); border-color: var(--accent, #d9531e); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted, #7a6a58); font-weight: 500; }
.btn:disabled { opacity: .6; }
.btn:active { transform: scale(.98); }

.hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; flex: none; }
.hud-item { display: flex; flex-direction: column; align-items: center; min-width: 64px; line-height: 1.1; }
.hud-label { font-size: 11px; color: var(--muted, #7a6a58); }
.hud-value { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hud-value.low { color: var(--danger, #c62828); }
.mode-label { font-size: 13px; color: var(--muted, #7a6a58); text-align: center; }

.board-wrap { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.board {
  position: relative; display: grid; touch-action: none;
  grid-template-columns: repeat(var(--cols), var(--cell, 40px));
  grid-template-rows: repeat(var(--rows), var(--cell, 40px));
  background: var(--surface, #fff); border-radius: 8px; border: 2px solid var(--cell-border, #e0cdb5);
  box-sizing: content-box;
}
.cell { background: var(--cell-bg, #fff); border: 1px solid var(--cell-border, #eee); padding: 5%; display: flex; }
.cell img { width: 100%; height: 100%; pointer-events: none; display: block; }
.cell.empty { background: transparent; border-color: transparent; }
.cell.pop { animation: pop .18s ease-out; }
@keyframes pop { from { background: var(--select-ok, #3a9d4f); opacity: .8; } to { background: transparent; opacity: 1; } }

.sel {
  position: absolute; pointer-events: none; z-index: 2;
  border: 3px solid var(--select, #2a7de1); box-sizing: border-box; background: color-mix(in srgb, var(--select, #2a7de1) 18%, transparent); border-radius: 4px;
}
.sel.ok { border-color: var(--select-ok, #2e9e4f); background: color-mix(in srgb, var(--select-ok, #2e9e4f) 30%, transparent); }
.sel-sum {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -105%);
  background: var(--select, #2a7de1); color: #fff; font-weight: 800; font-size: 16px; line-height: 1;
  padding: 4px 9px; border-radius: 10px; white-space: nowrap;
}
.sel.ok .sel-sum { background: var(--select-ok, #2e9e4f); }
.sel.label-below .sel-sum { top: auto; bottom: 0; transform: translate(-50%, 105%); }

.ad-slot {
  flex: none; display: flex; align-items: center; justify-content: center;
  min-height: 50px; margin-top: 8px; border: 1px dashed var(--cell-border, #ccc); border-radius: 8px;
  color: var(--muted, #999); font-size: 12px;
}
.result-box .ad-slot { min-height: 100px; }
.result-mode { margin: 0; color: var(--muted, #7a6a58); }
.result-score { margin: 0; font-size: 72px; line-height: 1; color: var(--accent, #d9531e); }
.result-score small { font-size: 24px; margin-left: 4px; color: var(--text, #2b2118); }
.result-detail { margin: 0; font-size: 18px; font-weight: 600; }
.share-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--muted, #7a6a58); }

@media (max-height: 700px) {
  .hud-value { font-size: 22px; }
  .ad-slot { min-height: 44px; margin-top: 4px; }
}

/* 광고는 승인 전까지 꺼 둔다(html[data-ads="off"]). 자리는 남기고 화면엔 안 보이게 */
/* 광고 단위 번호가 있는 자리만 보인다 (src/ui/ads.js) */
.ad-slot:not([data-on]) { display: none; }
.ad-slot[data-on] { border: 0; min-height: 50px; }
.next-board { margin: 0; font-size: 14px; color: var(--muted, #7a6a58); font-variant-numeric: tabular-nums; }
.daily-note { margin: -4px 0 0; font-size: 13px; color: var(--muted, #7a6a58); text-align: center; }
.result-standing { margin: 0; min-height: 1.2em; font-size: 16px; font-weight: 700; color: var(--accent, #c8412b); }
.notice { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted, #7a6a58); text-align: center; }
.notice a { color: inherit; }
#screen-privacy { display: block; overflow-y: auto; max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; line-height: 1.65; text-align: left; }
#screen-privacy[hidden] { display: none; }
#screen-privacy h1 { font-size: 22px; margin: 0 0 4px; }
#screen-privacy h2 { font-size: 17px; margin: 24px 0 6px; }
#screen-privacy ul { padding-left: 20px; margin: 0; }
#screen-privacy a { color: var(--accent, #C8412B); }
#screen-privacy .muted { color: var(--muted, #6F6155); font-size: 14px; }
/* 아래 탭이 있는 화면은 내용이 길면 스크롤 (작은 휴대폰) */

/* 당겨서 새로고침·스크롤은 시작·결과·안내 화면에서만. 게임 중엔 막는다(드래그가 새로고침으로 바뀌면 오늘의 판을 잃는다) */
body[data-screen="game"] { overflow: hidden; overscroll-behavior: none; }
body:not([data-screen="game"]) { height: auto; min-height: 100dvh; }
body:not([data-screen="game"]) #app { display: flex; flex-direction: column; }
body:not([data-screen="game"]) .screen { height: auto; flex: 1; }

/* 묶음 안 다른 게임으로(사업관리 10-13 — 게임 사이를 오가게) */
.more-games { margin: 6px 0 0; font-size: 14px; text-align: center; color: var(--muted, #7a6a58); }
.more-games a { color: var(--accent, #C8412B); font-weight: 600; text-decoration: none; white-space: nowrap; }