/* Competition: countdown bar, Build (submission), Market (reels), Results. Tokens come from style.css. */

/* ---------- countdown bar ---------- */
.phase-bar { position: sticky; top: 57px; z-index: 19; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px;
  background: var(--navy); color: #fff; font-family: var(--px); font-size: 13px; letter-spacing: .1em; text-align: center; }
.phase-bar[hidden] { display: none; }
.phase-bar .tri { color: var(--yellow); }
.phase-bar .timer { background: var(--yellow); color: var(--navy); padding: 3px 9px; font-weight: 700; }
.phase-bar.m-build { background: var(--green-d); }
.phase-bar.m-market { background: var(--red); }
.phase-bar.m-results { background: var(--navy); }
.phase-bar.hurry .timer { animation: blink 1s steps(1) infinite; background: #fff; }

/* in competition modes the level map is reference, not the main thing */
body:not([data-mode="workshop"]) .map .section-head h2::after { content: " (loot)"; font-size: .5em; opacity: .5; }

/* ---------- phase section ---------- */
.phase { padding: 30px 6vw 20px; scroll-margin-top: 110px; }
.phase[hidden] { display: none; }
.phase-card { background: var(--glass); backdrop-filter: blur(8px); border: 3px solid var(--navy); clip-path: var(--step); padding: 30px clamp(16px, 4vw, 44px); }
.phase-card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5vw, 66px); line-height: 1; margin: 8px 0 10px; }
.phase-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 24px; }
.phase-head .sub { max-width: 640px; }
.sub-status { font-family: var(--px); font-size: 13px; letter-spacing: .06em; }
.sub-status .ok { background: var(--green); padding: 4px 8px; }
.sub-status .warn { background: var(--red); color: #fff; padding: 4px 8px; }
.sub-status em { font-family: var(--sans); font-style: normal; letter-spacing: 0; color: var(--red); }

/* ---------- build ---------- */
.build-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 34px; align-items: start; }
.sub-form select, .sub-form textarea { font: inherit; font-size: 17px; padding: 12px 14px; border: 3px solid var(--navy); background: #fff; color: var(--navy); width: 100%; outline: none; resize: vertical; }
.sub-form select:focus, .sub-form textarea:focus { box-shadow: 4px 4px 0 var(--yellow); }
.field em { font-style: normal; opacity: .55; float: right; }
.price-row { display: flex; align-items: center; gap: 16px; }
.price-row input { flex: 1; accent-color: var(--green-d); height: 28px; }
.price-row b { font-family: var(--px); font-size: 30px; min-width: 120px; text-align: right; }
.price-field small { font-size: 13px; opacity: .75; }
.uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 6px; }
.drop { display: grid; gap: 6px; padding: 16px; border: 3px dashed var(--navy); background: #fff; cursor: pointer; transition: background .1s; }
.drop:hover { background: #fff8e0; }
.drop b { font-family: var(--px); font-size: 13px; letter-spacing: .08em; }
.drop span { font-size: 14px; }
.drop .bar { height: 8px; background: #e3e9f4; visibility: hidden; }
.drop .bar.on { visibility: visible; }
.drop .bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .15s; }
.ad-options { padding: 16px; border: 2px solid var(--navy); background: #fff8e0; font-size: 15px; line-height: 1.5; }
.ad-options[hidden] { display: none; }
.ad-options p + p { margin-top: 12px; }
.ad-options a { display: inline-block; margin: 8px 0; text-decoration: underline; font-weight: 700; }
.ad-compress { display: block; margin: 10px 0 6px; padding: 10px 12px; border: 2px solid var(--navy); font: inherit; font-weight: 700; text-align: left; }
.ad-options small { display: block; }
.preview { position: sticky; top: 130px; display: grid; justify-items: center; gap: 10px; }
.phone { width: 270px; aspect-ratio: 9 / 16; border: 8px solid var(--navy); border-radius: 30px; overflow: hidden; background: #000; box-shadow: 10px 10px 0 rgba(20, 33, 61, .2); }
.phone .reel { position: relative; width: 100%; height: 100%; }
.phone .reel-info h4 { font-size: 18px; }
.phone .reel-info .story { display: none; }

/* ---------- reel card (shared) ---------- */
.reel { position: relative; overflow: hidden; background: #000; color: #fff; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auto-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 30px; text-align: center;
  background: linear-gradient(160deg, #1f9e3a, var(--navy) 70%); }
.auto-card img { width: 46%; max-width: 170px; }
.auto-card b { font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1; }
.auto-card p { font-size: 15px; opacity: .9; max-width: 28ch; }
.auto-card span { font-family: var(--px); font-size: 26px; color: var(--yellow); }
.auto-card em { font-family: var(--px); font-style: normal; font-size: 11px; letter-spacing: .1em; background: #fff; color: var(--navy); padding: 3px 8px; }
.reel-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 92px 18px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.reel-team { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.reel-team img { width: 30px; height: 30px; object-fit: contain; background: rgba(255, 255, 255, .15); border-radius: 50%; padding: 2px; }
.reel-info h4 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; margin-bottom: 6px; }
.chip { font-family: var(--px); font-style: normal; font-size: 10px; letter-spacing: .08em; background: rgba(255, 255, 255, .2); padding: 3px 7px; vertical-align: middle; }
.reel-info .tl { font-size: 15px; }
.reel-info .story { font-size: 13px; opacity: .85; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reel-price { position: absolute; top: 16px; right: 14px; font-family: var(--px); font-weight: 700; font-size: 20px; background: var(--yellow); color: var(--navy); padding: 6px 10px; }

/* ---------- market (full screen, phone-shaped on laptops) ---------- */
.market { position: fixed; inset: 0; z-index: 80; background: #05080f; display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.m-top { width: min(480px, 100%); display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--navy); color: #fff; }
.m-top > img { width: 36px; height: 36px; object-fit: contain; }
.m-wallet { flex: 1; display: grid; }
.m-wallet b { font-family: var(--px); font-size: 18px; color: var(--yellow); }
.m-wallet small { font-size: 12px; opacity: .8; }
.m-btn { width: 38px; height: 38px; border: 2px solid #4a5a80; color: #fff; font-size: 16px; }
.m-feed { width: min(480px, 100%); height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; }
.m-feed .slide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.m-empty { color: #fff; text-align: center; padding: 40px 20px; }
.reel-actions { position: absolute; right: 10px; bottom: 22px; display: grid; gap: 14px; justify-items: center; }
.buy { position: relative; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-family: var(--px); font-size: 11px; letter-spacing: .04em; }
.buy svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.buy circle { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-dasharray: 100.5; stroke-dashoffset: calc(100.5 * (1 - var(--p, 0))); transition: stroke-dashoffset .25s linear; }
.buy span { position: relative; }
.buy.ready { background: var(--green); color: var(--navy); animation: pulse 1s ease-in-out infinite; }
.buy.ready circle { stroke: var(--navy); }
.buy.owned { background: var(--yellow); color: var(--navy); font-size: 9px; }
.buy:disabled { cursor: default; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.skip { font-family: var(--px); font-size: 10px; letter-spacing: .06em; color: #fff; background: rgba(0, 0, 0, .55); padding: 6px 8px; }
.m-end { display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; text-align: center; padding: 30px; }
.m-end img { width: 160px; }
.m-end b { font-family: var(--serif); font-size: 34px; font-weight: 400; }
.m-sheet { position: fixed; inset: 0; z-index: 85; background: rgba(5, 8, 15, .6); display: grid; align-items: end; justify-items: center; }
.m-sheet[hidden] { display: none; }
.m-confirm { width: min(480px, 100%); background: var(--paper); color: var(--navy); padding: 24px 22px 30px; border-top: 4px solid var(--yellow); animation: pop .2s steps(3); }
.m-confirm h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; margin: 6px 0 8px; }
.m-confirm-row { display: flex; align-items: center; gap: 16px; }
.a-link { text-decoration: underline; font-size: 15px; }

.market-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }

/* ---------- results ---------- */
.my-result { display: flex; align-items: center; gap: 14px; background: var(--navy); color: #fff; padding: 14px 18px; }
.my-result.go { background: var(--green-d); }
.my-result img { width: 60px; }
.my-result b { font-family: var(--px); font-size: 34px; display: block; line-height: 1; }
.my-result span { font-family: var(--px); font-size: 12px; letter-spacing: .08em; display: block; margin: 4px 0; }
.my-result small { font-size: 13px; opacity: .85; }
.res-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 26px; align-items: start; }
.board { list-style: none; display: grid; gap: 6px; }
.board li { display: grid; grid-template-columns: 42px 44px 1fr auto; align-items: center; gap: 12px; background: #fff; border: 2px solid #d5deec; padding: 8px 12px; }
.board li.adv { border-color: var(--green-d); background: #effbf0; }
.board li.me { outline: 3px solid var(--yellow); outline-offset: -1px; }
.board .rk { font-family: var(--px); font-size: 20px; text-align: center; }
.board img { width: 40px; height: 40px; object-fit: contain; }
.board .who b { display: block; }
.board .who small, .board .nums small { font-size: 12px; opacity: .7; }
.board .nums { text-align: right; }
.board .nums b { font-family: var(--px); font-size: 18px; display: block; }
.board li.cut { display: block; text-align: center; background: var(--red); color: #fff; border: 0; font-family: var(--px); font-size: 11px; letter-spacing: .14em; padding: 5px; }
.top-sales { background: var(--navy); color: #fff; padding: 18px; display: grid; gap: 8px; }
.top-sales .kicker { color: var(--yellow); margin-bottom: 4px; }
.ts { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid #26365e; padding-bottom: 8px; }
.ts .rk { font-family: var(--px); color: var(--yellow); }
.ts small { display: block; font-size: 12px; opacity: .7; }
.ts em { font-family: var(--px); font-style: normal; color: var(--green); }

@media (max-width: 900px) {
  .phase { padding: 20px 16px; }
  .phase-bar { top: 53px; font-size: 11px; gap: 8px; }
  .build-grid, .res-grid { grid-template-columns: 1fr; }
  .uploads { grid-template-columns: 1fr; }
  .preview { position: static; }
  .board li { grid-template-columns: 30px 36px 1fr auto; gap: 8px; }
}

/* ---------- build round: portal mode, rules, cues ---------- */
/* After Workshop the phase screen is the whole page; the level map comes back only on request. */
body.portal .hero, body.portal .map, body.portal .team-screen, body.portal .loot-count { display: none; }
body.portal.show-loot .map { display: block !important; }
body.portal .phase { padding-top: 26px; }
.phase-card + .phase-card { margin-top: 22px; }
.hud-rules { display: inline-flex; align-items: center; gap: 7px; background: var(--yellow); }
.hud-rules[hidden] { display: none; }
.hud-rules svg { width: 15px; height: 15px; fill: currentColor; }

.read-clock { display: grid; justify-items: center; gap: 2px; background: var(--navy); color: #fff; padding: 12px 18px; min-width: 150px; }
.read-clock small { font-family: var(--px); font-size: 11px; letter-spacing: .12em; opacity: .8; }
.read-clock b { font-family: var(--px); font-size: 34px; color: var(--yellow); line-height: 1; }
.read-clock.done { background: var(--green-d); }
.read-clock.done b { color: #fff; }

.rules { text-align: left; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.rule { position: relative; background: #fff; border: 3px solid var(--navy); padding: 16px 18px 16px 62px; }
.rule-n { position: absolute; left: 14px; top: 14px; font-family: var(--px); font-weight: 700; font-size: 15px; background: var(--yellow); padding: 4px 6px; line-height: 1; }
.rule h4 { font-family: var(--px); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.rule ul { display: grid; gap: 6px; padding-left: 18px; font-size: 16px; }
.brief-end { display: grid; justify-items: start; gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 3px dashed var(--navy); }
.agree { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; cursor: pointer; }
.agree input { width: 22px; height: 22px; accent-color: var(--green-d); }
.brief-end .btn:disabled { cursor: not-allowed; }
.brief-end .fine { margin-top: 0; }
.rules-card { width: min(980px, 100%); }
.rules-card .rules { margin-bottom: 20px; }

.fn { font-family: var(--px); background: var(--navy); color: #fff; padding: 2px 5px; margin-right: 6px; font-weight: 700; }

.cues { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 20px; }
.cue { position: relative; background: #fff; border: 3px solid var(--navy); padding: 16px 18px 16px 58px; display: grid; gap: 8px; align-content: start; }
.cue h4 { font-family: var(--px); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.cue > p { font-size: 15px; }
.cue-good { list-style: none; display: grid; gap: 5px; }
.cue-good li { font-size: 15px; background: #effbf0; border-left: 4px solid var(--green-d); padding: 5px 9px; }
.cue-good li::before { content: "✓ "; color: var(--green-d); font-weight: 700; }
.cue-weak { font-size: 14px; background: #fdecee; border-left: 4px solid var(--red); padding: 5px 9px; }
.cue-weak b { color: var(--red); }
.cues-card .link-btn { margin-top: 18px; opacity: .75; }

@media (max-width: 900px) {
  .read-clock { min-width: 0; width: 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .rules, .cues { grid-template-columns: 1fr; }
  .hud-rules { padding: 6px 8px; }
}

/* ad still downloading: spinner, and no buy ring / skip until it plays */
.reel-load { position: absolute; inset: 0; display: none; place-content: center; grid-auto-flow: column; gap: 8px; background: rgba(5, 8, 15, .55); pointer-events: none; }
.reel-load i { width: 14px; height: 14px; background: var(--yellow); animation: reelload .9s steps(2) infinite; }
.reel-load i:nth-child(2) { animation-delay: .15s; } .reel-load i:nth-child(3) { animation-delay: .3s; }
@keyframes reelload { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-14px); opacity: 1; } }
.slide.loading .reel-load { display: grid; }
.slide.loading .reel-actions { visibility: hidden; }
.slide.loading.slow .reel-actions { visibility: visible; }
.slide.loading.slow .buy { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .reel-load i { animation: none; } }