/* Not Hues and Cues on the phones: the whose-turn bar, the cues, the secret card, the
   two-step board picker and its sheet. Dark rules first, then the light theme. */
.hcp { --gold: #ffb800; display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; color: var(--text); }
.hcp [hidden] { display: none !important; }
.hcp-compose:empty, .hcp-cue:empty, .hcp-log:empty { display: none; }

/* ---- whose turn ---- */
.hcp-bar-in { display: flex; align-items: center; gap: 10px; border-radius: 18px; padding: 10px 12px 10px 14px; min-height: 64px; }
.hcp-bar-in.me { background: linear-gradient(120deg, #ffd60a, #ffb000); color: #1b1b1b; box-shadow: 0 10px 30px rgba(255,190,0,.45); animation: nup-pop .35s cubic-bezier(.2,1.4,.4,1) both, nup-throb 1.6s ease-in-out .4s infinite; }
.hcp-bar-in.me:has(.tclock.urgent) { background: linear-gradient(120deg, #ff7a3d, #ff3b30); color: #fff; }
.hcp-bar-in.me .tclock.urgent .fg { stroke: #fff; }
.hcp-bar-in.me .tclock.urgent .bg { stroke: rgba(255,255,255,.25); }
.hcp-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hcp-bt b { font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: -.01em; line-height: 1; }
.hcp-bt span { font-size: 15px; font-weight: 700; line-height: 1.25; }
.hcp-bar-in .tclock { width: 58px; height: 58px; }
.hcp-bar-in .tclock b { font-size: 23px; }
.hcp-bar-in.idle { background: rgba(0,0,0,.3); color: var(--label-2); font-size: 15px; }
.hcp-bar-in.idle .hcp-bw { flex: 1; min-width: 0; line-height: 1.3; }
.hcp-bar-in .avatar.sm { width: 34px; height: 34px; font-size: 15px; }
.hcp-bar-in.idle b { color: var(--text); }
.hcp-bar-in.idle em { font-style: normal; font-weight: 800; color: var(--gold); }
.hcp-bar-in.idle small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hcp-bar-in.idle .tclock { width: 44px; height: 44px; }
.hcp-bar-in.idle .tclock .bg { stroke: rgba(255,255,255,.14); }
.hcp-bar-in.idle .tclock .fg { stroke: var(--gold); }
.hcp-bar-in.idle .tclock.urgent .fg { stroke: #ff453a; }
.hcp-bar-in.idle .tclock b { font-size: 17px; color: var(--text); }
body.hcp-myturn::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 15; box-shadow: inset 0 0 0 5px #ffc400, inset 0 0 50px rgba(255,196,0,.45); animation: nup-frame 1.6s ease-in-out infinite; }

/* ---- the cues ---- */
.hcp-cuein { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.3); border-radius: 18px; padding: 10px 14px; min-height: 56px; }
.hcp-cuein.wait { color: var(--label-2); font-size: 15px; }
.hcp-cuein.wait b { color: var(--text); }
.hcp-cw { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.hcp-cw .c1 { font-family: var(--hc-font); font-size: 36px; font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: .01em; }
.hcp-cw .c2 { font-family: var(--hc-font); font-size: 27px; font-weight: 900; text-transform: uppercase; line-height: 1; color: var(--text); padding-left: 12px; border-left: 2px solid rgba(255,255,255,.18); }
.hcp-cw .c2.wait, .hcp-cw .c2.pass { font-family: var(--font); font-size: 14px; font-weight: 700; text-transform: none; color: var(--label-2); }

/* ---- the secret card ---- */
.hcp-card { background: #fffdf8; color: #23211d; border-radius: 20px; padding: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.06); }
.hcp-cardhead { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 8px; }
.hcp-cardhead b { font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.hcp-cardhead span { font-size: 12px; color: rgba(35,33,29,.55); font-weight: 600; }
.hcp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hcp-cardchip { height: 104px; border-radius: 14px; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.hcp-cardchip .hcp-chipc, .hcp-cardchip .hc-chipc { font-size: 26px; }
.hcp-cardchip.on { box-shadow: 0 0 0 3px #fffdf8, 0 0 0 6px var(--gold), 0 10px 24px rgba(0,0,0,.3); transform: scale(1.02); }
.hcp-cardchip.on::after { content: '✓'; position: absolute; right: 8px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #1b1b1b; font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.hcp-cardchip.in { animation: hcp-dealt .5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes hcp-dealt { from { transform: translateY(-40px) rotate(-6deg); opacity: 0; } }
.hcp-tip { font-size: 14px; color: var(--label-2); line-height: 1.4; padding: 9px 12px; border-radius: 14px; background: rgba(0,0,0,.3); }
.hcp-tip b { color: var(--text); }

/* ---- the whole board, small ---- */
.hcp-over { position: relative; padding: 5px; border-radius: 12px; background: var(--hc-panel, #1f2024); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.hcp-over.tap { cursor: pointer; }
.hcp-ocells { position: relative; display: grid; grid-template-columns: repeat(30, 1fr); gap: 1px; }
.hcp-ocells i { display: block; aspect-ratio: 1; border-radius: 1.5px; }
.hcp-ocells > span { position: absolute; pointer-events: none; }
.hcp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.6); transform: translate(-50%, -50%); }
.hcp-over.big .hcp-dot { width: 11px; height: 11px; }
.hcp-oring { border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); outline: 1.5px dashed rgba(0,0,0,.6); outline-offset: 1px; }
.hcp-oframe { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1c1f, 0 0 12px rgba(0,0,0,.5); border-radius: 3px; }
.hcp-owin { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,0,0,.7), 0 0 0 999px rgba(0,0,0,.28); border-radius: 3px; transition: left .12s, top .12s; }
.hcp-over { overflow: hidden; }

/* ---- the zoomed window ---- */
.hcp-picker { display: flex; flex-direction: column; gap: 8px; }
.hcp-zhint { font-size: 13px; color: var(--label-2); text-align: center; }
.hcp-zgrid { display: grid; grid-template-columns: 18px repeat(var(--zc), 1fr); gap: 3px; padding: 8px 8px 8px 4px; border-radius: 16px; background: var(--hc-panel, #1f2024); box-shadow: 0 10px 26px rgba(0,0,0,.3); touch-action: none; user-select: none; -webkit-user-select: none; }
.hcp-zcorner { width: 18px; }
.hcp-znum, .hcp-zlet { font-size: 12px; font-weight: 800; color: var(--label-2); text-align: center; align-self: center; font-variant-numeric: tabular-nums; }
.hcp-zc { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 6px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; min-width: 0; }
.hcp-zc:active { transform: scale(.94); }
.hcp-zc.sel { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1d1c1f; z-index: 2; }
.hcp-zc.chosen { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px #1d1c1f; z-index: 2; }
.hcp-zc.taken { cursor: default; }
.hcp-zcone { position: absolute; left: 50%; top: 50%; width: 62%; height: 76%; transform: translate(-50%, -62%); pointer-events: none; }

/* ---- the chosen square, big ---- */
.hcp-ov { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; animation: hcp-fade .2s ease both; }
@keyframes hcp-fade { from { opacity: 0; } }
.hcp-sheet { width: 100%; max-width: 520px; background: var(--bg-2); border-radius: 26px 26px 0 0; padding: 16px 16px calc(14px + var(--safe-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; animation: hcp-up .3s cubic-bezier(.2,1.1,.4,1) both; box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
@keyframes hcp-up { from { transform: translateY(60%); } }
.hcp-shead { display: flex; align-items: baseline; gap: 10px; }
.hcp-shead > b { font-family: var(--hc-font); font-size: 34px; font-weight: 900; line-height: 1; }
.hcp-shead span { font-size: 13px; color: var(--label-2); }
.hcp-mag { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: 64px 104px 64px; gap: 6px; }
.hcp-mx { position: relative; border: 0; padding: 0; border-radius: 12px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; }
.hcp-mx.off { background: repeating-linear-gradient(45deg, rgba(128,128,128,.12) 0 6px, transparent 6px 12px); box-shadow: none; }
.hcp-mx.mid { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1d1c1f, 0 10px 24px rgba(0,0,0,.35); z-index: 2; }
.hcp-mx.mid span { position: absolute; left: 10px; bottom: 8px; font-family: var(--hc-font); font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.hcp-mx em { position: absolute; left: 50%; top: 50%; width: 30px; height: 37px; transform: translate(-50%, -60%); }
.hcp-mx.mid em { left: auto; right: 10px; top: 10px; transform: none; }
.hcp-place { font-size: 19px; font-weight: 800; min-height: 58px; background: #f4f1ea; color: #1d1c1f; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hcp-place i { width: 24px; height: 24px; border-radius: 6px; background: var(--sw); box-shadow: 0 0 0 2px #1d1c1f; }
.hcp-why { font-size: 15px; color: var(--label-2); text-align: center; padding: 12px 6px; }

/* ---- the composer ---- */
.hcp-compose { display: flex; flex-direction: column; gap: 6px; background: rgba(0,0,0,.3); border-radius: 18px; padding: 10px; }
.hcp-crow { display: flex; gap: 8px; }
.hcp-crow input { flex: 1; min-width: 0; height: 54px; border-radius: 14px; border: 0; padding: 0 14px; font-size: 22px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: var(--bg-3); color: var(--text); font-family: var(--hc-font); }
.hcp-crow input::placeholder { text-transform: none; font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--label-3); }
.hcp-crow .btn { width: auto; flex: none; min-width: 84px; min-height: 54px; font-weight: 800; }
.hcp-prob { font-size: 13px; color: var(--label-2); line-height: 1.35; padding: 0 4px; }
.hcp-prob.no { color: #ff8a7a; font-weight: 700; }
.hcp-pass { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); min-height: 48px; font-weight: 700; }

/* ---- the result ---- */
.hcp-result { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.3); border-radius: 18px; padding: 10px; }
.hcp-rchip { width: 66px; height: 66px; flex: none; }
.hcp-rchip .hc-chipc { display: none; }
.hcp-result > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hcp-result small { font-size: 10px; font-weight: 900; letter-spacing: .16em; color: var(--label-2); }
.hcp-result > div > b { font-family: var(--hc-font); font-size: 32px; font-weight: 900; line-height: 1; }
.hcp-result > div > span { font-size: 12px; color: var(--label-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcp-rpts { text-align: center; }
.hcp-rpts b { display: block; font-family: var(--hc-font); font-size: 40px; font-weight: 900; line-height: 1; color: var(--label-2); }
.hcp-rpts.got b { color: var(--gold); }
.hcp-rpts span { font-size: 11px; font-weight: 700; color: var(--label-2); }

.hcp-log { font-size: 13px; color: var(--label-2); line-height: 1.35; padding: 0 4px; }
.hcp-log div:last-child { color: var(--text); }

/* ---- big moments ---- */
.hcp-moment { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle, color-mix(in srgb, var(--sw, var(--pc)) 60%, transparent), rgba(0,0,0,.6) 75%); animation: nup-moment 2.4s ease both; }
.hcp-mchip { width: 130px; height: 130px; border-radius: 22px; background: var(--sw); box-shadow: 0 0 0 5px #fff, 0 0 0 11px #1d1c1f, 0 20px 50px rgba(0,0,0,.5); display: flex; align-items: flex-end; padding: 12px; color: #fff; animation: hcp-chipdrop .6s cubic-bezier(.2,1.4,.4,1) both; }
.hcp-mchip span { font-family: var(--hc-font); font-size: 30px; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.hcp-mchip.ink-dark { color: #1d1c1f; }
.hcp-mchip.ink-dark span { text-shadow: none; }
@keyframes hcp-chipdrop { from { transform: scale(2.2) rotate(-10deg); opacity: 0; } }
.hcp-moment .big { font-family: var(--hc-font); font-size: 92px; font-weight: 900; line-height: .9; color: #fff; text-shadow: 4px 4px 0 rgba(0,0,0,.35); animation: nup-slam .5s .15s cubic-bezier(.2,1.5,.4,1) both; }
.hcp-moment.exact .big { font-size: 68px; color: #ffd60a; text-shadow: 4px 4px 0 #1d1c1f; transform: rotate(-5deg); }
.hcp-moment.none .big { color: rgba(255,255,255,.75); }
.hcp-moment.win .big { font-size: 60px; color: #ffd60a; text-align: center; text-shadow: 4px 4px 0 var(--pc); }
.hcp-moment .who { background: rgba(0,0,0,.7); color: #fff; font-size: 18px; font-weight: 800; padding: 8px 16px; border-radius: 999px; }

/* ---- the end ---- */
.hcp-final { align-items: center; text-align: center; padding-top: 30px; gap: 14px; }
.hcp-fchips { display: flex; gap: 6px; }
.hcp-fchips i { width: 34px; height: 46px; border-radius: 7px; background: var(--sw); box-shadow: 0 6px 14px rgba(0,0,0,.3); animation: hcp-dealt .5s calc(var(--k) * 70ms) cubic-bezier(.2,1.2,.4,1) both; }
.hcp-fscore { display: flex; flex-direction: column; align-items: center; }
.hcp-fscore b { font-family: var(--hc-font); font-size: 76px; font-weight: 900; line-height: 1; }
.hcp-fscore span { font-size: 15px; color: var(--label-2); font-weight: 700; }

/* ---- light theme ---- */
[data-theme="light"] .hcp-bar-in.idle, [data-theme="light"] .hcp-tip, [data-theme="light"] .hcp-cuein, [data-theme="light"] .hcp-compose, [data-theme="light"] .hcp-result { background: rgba(255,255,255,.86); box-shadow: 0 4px 14px rgba(110,80,40,.12); }
[data-theme="light"] .hcp-bar-in.idle .tclock .bg { stroke: rgba(0,0,0,.1); }
[data-theme="light"] .hcp-bar-in.idle em { color: #b7791f; }
[data-theme="light"] .hcp-cw .c2 { border-left-color: rgba(0,0,0,.12); }
[data-theme="light"] .hcp-over, [data-theme="light"] .hcp-zgrid { background: #fffefb; box-shadow: 0 0 0 1px rgba(110,80,40,.12), 0 8px 22px rgba(110,80,40,.16); }
[data-theme="light"] .hcp-owin { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,0,0,.75), 0 0 0 999px rgba(255,255,255,.35); }
[data-theme="light"] .hcp-crow input { background: #f2eee6; }
[data-theme="light"] .hcp-pass { box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); background: #fff; }
[data-theme="light"] .hcp-prob.no { color: #d0342c; }
[data-theme="light"] .hcp-rpts.got b { color: #c98a00; }
[data-theme="light"] .hcp-sheet { background: #fbf8f2; }
[data-theme="light"] .hcp-place { background: #1d1c1f; color: #fff; }
[data-theme="light"] .hcp-place i { box-shadow: 0 0 0 2px #fff; }