/* W16 UI: #progressPanel (exams, arena, contests, book, rival strip, run-end). Palette from ui/ui.css:
   panel #3d3129, deep #2b2320, border #6b4a34, gold #e8b84b, text #f2e9d8, muted #c9b393, dim #bdb09c, green #4a7a4f, red #b5533c. */

#progressPanel { margin: 10px 0; }
#progressPanel p { margin: 0; }
.pg-panel { background: #3d3129; border: 2px solid #6b4a34; border-radius: 6px; padding: 10px; }
.pg-tabs, .pg-sub { display: flex; gap: 6px; margin-bottom: 8px; }
.pg-tabs button, .pg-sub button { flex: 1; min-height: 44px; padding: 0 4px; font-size: 12px; font-weight: bold; color: #c9b393;
  background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; position: relative; }
.pg-tabs button[aria-selected="true"], .pg-sub button[aria-selected="true"] { background: #e8b84b; color: #2b2320; border-color: #e8b84b; }
.pg-tabs .dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e05a3a;
  box-shadow: 0 0 0 2px #2b2320; animation: pg-blink 1.6s ease-in-out infinite; }
.pg-tabs em { font-style: normal; font-size: 10px; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: #5a5048; color: #f2e9d8; }
.pg-tabs button[aria-selected="true"] em { background: #2b2320; color: #e8b84b; }
@keyframes pg-blink { 50% { transform: scale(1.35); } }

.pg-dim { font-size: 11px; color: #c9b393; line-height: 1.35; }
.pg-big { font: 900 22px/1.1 ui-monospace, "Consolas", monospace; color: #f2e9d8; }
.pg-empty { font-size: 12px; color: #c9b393; text-align: center; padding: 12px; border: 2px dashed #6b4a34; border-radius: 6px; }
.pg-locked { font-size: 11px; color: #bdb09c; text-align: center; padding: 8px; }
.pg-locked b { color: #c9b393; }
#progressPanel .good { color: #8fcf7f; } #progressPanel .bad { color: #e0826b; } #progressPanel .warn { color: #e8b84b; }
.pg-tag { font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 3px; background: #5a5048; color: #f2e9d8; white-space: nowrap; }

.pg-card { background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; padding: 8px; margin-top: 8px; display: grid; gap: 5px; }
.pg-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pg-card .nm, .pg-rival .nm, .pg-troph .nm, .pg-gifts .nm { font-size: 13px; font-weight: bold; color: #f2e9d8; }

.pg-meter { height: 8px; background: #3d3129; border: 1px solid #6b4a34; border-radius: 4px; overflow: hidden; }
.pg-meter.thin { height: 6px; }
.pg-meter i { display: block; height: 100%; background: linear-gradient(90deg, #d9a63b, #e8b84b); transition: width 300ms ease-out; }

.pg-btn { min-height: 44px; padding: 4px 12px; font-size: 13px; font-weight: bold; color: #f2e9d8; background: #3d3129;
  border: 2px solid #6b4a34; border-radius: 6px; line-height: 1.15; transition: transform 80ms ease-out, filter 120ms; }
.pg-btn small { display: block; font-size: 10px; font-weight: normal; opacity: 0.85; }
.pg-btn.gold { background: #e8b84b; color: #2b2320; border-color: #e8b84b; box-shadow: 0 3px 0 #9c7426; }
.pg-btn.wide { width: 100%; }
.pg-btn:active:not(:disabled) { transform: translateY(2px) scale(0.98); box-shadow: none; }
.pg-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.pg-btn.armed { background: #9a4430; border-color: #9a4430; color: #f2e9d8; box-shadow: none; }
.pg-btn:focus-visible, .pg-tabs button:focus-visible, .pg-sub button:focus-visible, .pg-rhead:focus-visible { outline: 2px solid #f2e9d8; outline-offset: 2px; }

/* ---------- rival strip (non-blocking) ---------- */
.pg-rivals { background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; margin-bottom: 8px; }
.pg-rivals.pulse { animation: pg-pulse 700ms ease-out 2; }
@keyframes pg-pulse { 40% { border-color: #e8b84b; box-shadow: 0 0 0 3px rgba(232,184,75,0.35); } }
.pg-rhead { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: none; border: 0;
  color: #f2e9d8; font-size: 12px; text-align: left; }
.pg-rhead .ico { width: 16px; height: 16px; flex-shrink: 0; background:
  linear-gradient(#b5533c, #b5533c) 2px 5px / 12px 9px no-repeat, linear-gradient(#e8b84b, #e8b84b) 0 1px / 16px 4px no-repeat;
  image-rendering: pixelated; }
.pg-rhead .txt { flex: 1; }
.pg-rhead .drain { font-weight: bold; color: #e0826b; font-size: 12px; }
.pg-rhead .chev { color: #c9b393; }
.pg-rbody { padding: 0 8px 8px; display: grid; gap: 6px; }
.pg-rival { border-top: 1px solid #6b4a34; padding-top: 6px; display: grid; gap: 4px; }
.pg-rival .top { display: flex; justify-content: space-between; align-items: center; }
.pg-rival .pull { font-size: 11px; font-weight: bold; }
.pg-log { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid #6b4a34; font-size: 11px; color: #bdb09c; display: grid; gap: 2px; }

/* ---------- exams ---------- */
.pg-grade { display: flex; gap: 12px; align-items: center; }
.pg-grade .seal { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #f5d27a, #c9902c); border: 3px solid #9c7426; box-shadow: inset 0 0 0 3px #e8b84b; }
.pg-grade .seal span { font: 900 11px/1.05 ui-monospace, "Consolas", monospace; color: #2b2320; max-width: 52px; }
.pg-grade.stamp .seal { animation: pg-stamp 520ms cubic-bezier(.2,1.6,.4,1); }
@keyframes pg-stamp { 0% { transform: scale(1.8) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.pg-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pg-reqs li { display: grid; grid-template-columns: 20px 1fr auto; gap: 2px 6px; align-items: center; font-size: 12px; }
.pg-reqs .chk { width: 18px; height: 18px; border: 2px solid #6b4a34; border-radius: 4px; display: grid; place-items: center; font-size: 12px; font-weight: bold; }
.pg-reqs li.ok .chk { background: #3f6b44; border-color: #3f6b44; color: #f2e9d8; }
.pg-reqs .v { font-variant-numeric: tabular-nums; color: #c9b393; }
.pg-reqs li.ok .v { color: #8fcf7f; }
.pg-reqs .pg-meter { grid-column: 2 / 4; }
.pg-reqs li.ok .pg-meter i { background: #4a7a4f; }

/* ---------- arena ---------- */
.pg-stam { display: flex; align-items: center; gap: 8px; font-size: 12px; background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; padding: 8px; }
.pg-stam .lbl { color: #c9b393; }
.pg-stam b { font-variant-numeric: tabular-nums; }
.pg-pips { flex: 1; display: flex; gap: 2px; min-width: 0; }
.pg-pips i { flex: 1; height: 12px; max-width: 16px; background: #3d3129; border: 1px solid #1e6e2c; border-radius: 2px; }
.pg-pips i.on { background: linear-gradient(#86fc7f, #67d558); }
.pg-timer { font-size: 11px; color: #c9b393; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.pg-pick { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #c9b393; }
.pg-pick select { flex: 1; min-height: 44px; min-width: 0; font-size: 13px; color: #f2e9d8; background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; padding: 0 8px; }
.pg-odds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; background: #3d3129; border-radius: 4px; padding: 6px 8px; }
.pg-odds .you b { color: #e8b84b; font-size: 14px; }
.pg-odds .vs { color: #bdb09c; font-size: 10px; }
.pg-odds .them b { color: #9cc8e0; margin-right: 4px; }
.pg-more { margin-top: 8px; }
.pg-odd { margin-left: auto; font-weight: bold; font-size: 12px; }

/* ---------- contests ---------- */
.pg-sched { background: #2b2320; border: 2px solid #e8b84b; border-radius: 6px; padding: 8px; font-size: 13px; display: grid; gap: 2px; }
.pg-last { font-size: 12px; margin-top: 6px; }
.pg-req1 { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- book ---------- */
.pg-troph, .pg-gifts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pg-troph li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; padding: 6px 8px; }
.pg-troph .cup { width: 18px; height: 20px; margin-top: 2px; background:
  linear-gradient(#5a5048, #5a5048) 3px 0 / 12px 10px no-repeat, linear-gradient(#5a5048, #5a5048) 7px 10px / 4px 5px no-repeat,
  linear-gradient(#5a5048, #5a5048) 3px 15px / 12px 4px no-repeat; }
.pg-troph li.got { border-color: #9c7426; }
.pg-troph li.got .cup { background:
  linear-gradient(#e8b84b, #e8b84b) 3px 0 / 12px 10px no-repeat, linear-gradient(#e8b84b, #e8b84b) 7px 10px / 4px 5px no-repeat,
  linear-gradient(#c9902c, #c9902c) 3px 15px / 12px 4px no-repeat; }
.pg-troph .pg-meter { margin: 3px 0; }
.pg-gifts li { display: flex; align-items: center; gap: 8px; background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; padding: 6px 8px; min-height: 44px; }
.pg-gifts li.reg { border-color: #4a7a4f; }
.pg-gifts .boxes { display: flex; gap: 4px; }
.pg-gifts .boxes i { width: 16px; height: 16px; border-radius: 2px; background: #3d3129; border: 2px dashed #6b4a34; }
.pg-gifts .boxes i.on { border: 0; background: linear-gradient(90deg, transparent 6px, #e8b84b 6px, #e8b84b 10px, transparent 10px), #b5533c; }
#progressPanel .pg-gifts + .pg-dim { margin-top: 6px; }

/* ---------- run end ---------- */
.pg-end { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 10px;
  background: linear-gradient(135deg, #5a3f22, #3d3129); border: 2px solid #e8b84b; border-radius: 6px; }

/* ---------- modal (arena result / final score) ---------- */
.pg-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20, 14, 10, 0.72);
  animation: pg-fade 160ms ease-out; }
.pg-modal.out { opacity: 0; transition: opacity 160ms ease-in; }
@keyframes pg-fade { from { opacity: 0; } }
.pg-sheet { width: 100%; max-width: 380px; max-height: calc(100dvh - 32px); overflow: auto; background: #3d3129; border: 3px solid #e8b84b;
  border-radius: 8px; padding: 14px; display: grid; gap: 10px; color: #f2e9d8; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: pg-rise 260ms cubic-bezier(.2,1.3,.4,1); }
@keyframes pg-rise { from { transform: translateY(24px) scale(0.96); opacity: 0; } }
.pg-kicker { font-size: 11px; color: #c9b393; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.pg-h2 { font-size: 18px; margin: 0; }
.pg-judges { display: flex; gap: 4px; }
.pg-judges i { flex: 1; height: 10px; border-radius: 2px; background: #5a5048; animation: pg-judge 1ms forwards; animation-delay: calc(var(--d) * 105ms); }
@keyframes pg-judge { to { background: #e8b84b; } }
.pg-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
.pg-box { position: relative; background: #f2e9d8; color: #2b2320; border: 3px solid; border-radius: 6px; padding: 6px 4px 8px; text-align: center; }
.pg-box.you { border-color: #e8b84b; box-shadow: 0 0 0 2px #9c7426 inset; }
.pg-box.r1 { border-color: #5aa0d8; } .pg-box.r2 { border-color: #5fbf6a; } .pg-box.r3 { border-color: #a07ad8; }
.pg-box.r4 { border-color: #e07a5a; } .pg-box.r5 { border-color: #bdb09c; }
.pg-box .nm { display: block; font-size: 11px; font-weight: bold; }
.pg-box .pt { display: block; font: 900 22px/1.1 ui-monospace, "Consolas", monospace; font-variant-numeric: tabular-nums; }
.pg-box small { font-size: 10px; }
.pg-box .place { position: absolute; top: -12px; right: -6px; font: 900 16px/1 ui-monospace, monospace; padding: 3px 5px; border-radius: 4px;
  background: #5a5048; color: #f2e9d8; opacity: 0; transform: translateY(-14px) scale(1.6); }
.pg-box.ranked .place { opacity: 1; transform: none; transition: transform 320ms cubic-bezier(.2,1.8,.4,1), opacity 120ms; }
.pg-box.ranked .place[data-place="1"] { background: #e8b84b; color: #2b2320; }
.pg-modal.won .pg-box.you.ranked { animation: pg-bump 420ms ease-out; }
@keyframes pg-bump { 40% { transform: scale(1.08); } }
.pg-verdict { text-align: center; font-size: 12px; color: #c9b393; animation: pg-rise 260ms ease-out; }
.pg-verdict .big { font: 900 24px/1.2 ui-monospace, monospace; color: #f2e9d8; }
.pg-verdict.win .big { color: #e8b84b; text-shadow: 0 2px 0 #9c7426; }
.pg-score { font: 900 40px/1 ui-monospace, "Consolas", monospace; text-align: center; color: #e8b84b; text-shadow: 0 3px 0 #9c7426; margin: 0; }
.pg-best { text-align: center; font-size: 12px; color: #c9b393; margin: 0; }
.pg-best.new { color: #8fcf7f; font-weight: bold; }
.pg-break { width: 100%; border-collapse: collapse; font-size: 12px; }
.pg-break td { padding: 4px 2px; border-bottom: 1px solid #6b4a34; }
.pg-break td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.pg-break td:last-child { color: #e8b84b; font-weight: bold; }
.pg-note { font-size: 11px; color: #c9b393; margin: 0; }
.pg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  #progressPanel *, .pg-modal, .pg-modal * { animation: none !important; transition: none !important; }
  .pg-box .place { opacity: 1; transform: none; }
  .pg-judges i { background: #e8b84b; }
}

/* ---------- PV3 pixel polish (headers use .pxh from ui2.css) ---------- */
#progressPanel .pxh { margin: 10px 0 0; }
.pg-over { font: bold 11px/1 ui-monospace, "Consolas", monospace; color: #2b2320; background: #86fc7f; border: 1px solid #1e6e2c; border-radius: 3px; padding: 2px 4px; }
.pg-face { width: 28px; height: 34px; flex-shrink: 0; border: 2px solid #2b1d16; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px #6b4a34; }
.pg-face .pt-img { width: 28px; height: 34px; }
.pg-card .top .nm { flex: 1; min-width: 0; }
.pg-bowl { width: 30px; height: 20px; flex-shrink: 0; }
.pg-bowl .pt-img { width: 30px; height: 20px; }
.pg-odds { gap: 4px 6px; }
.pg-gifts li .gi { flex: 1; min-width: 0; }
.pg-gifts li .boxes { margin-left: auto; }
.pg-troph .cup { image-rendering: pixelated; }