/* Inside Job: a heist planned on a blueprint. Poker chips mark how strong each hand is. */

/* ---------- poker chips (100, 200, 300 …) ---------- */
.pchip {
  --chip: 44px;
  --c: #f2efe6; --ink: #1d2a44; --edge: #1d2a44;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--chip); height: var(--chip); border-radius: 50%;
  background:
    radial-gradient(circle, var(--c) 0 54%, var(--edge) 55% 57%, transparent 58%),
    repeating-conic-gradient(var(--c) 0 22.5deg, #fff 22.5deg 30deg, var(--c) 30deg 45deg);
  box-shadow: 0 calc(var(--chip) * .06) 0 rgba(0, 0, 0, .35), 0 calc(var(--chip) * .1) calc(var(--chip) * .2) rgba(0, 0, 0, .45), inset 0 0 0 calc(var(--chip) * .03) rgba(0, 0, 0, .25);
  font-family: var(--num); color: var(--ink); user-select: none;
}
.pchip b { font-weight: 400; font-size: calc(var(--chip) * .32); letter-spacing: -.02em; line-height: 1; }
.pchip.c-white { --c: #f3f0e7; --ink: #111; --edge: #31446b; }
.pchip.c-yellow { --c: #f2c230; --ink: #111; --edge: #8a6a00; }
.pchip.c-orange { --c: #ee7a22; --ink: #111; --edge: #8f3f06; }
.pchip.c-red { --c: #cf2b2f; --ink: #111; --edge: #6e0d10; }
.pchip.c-black { --c: #1c1a1f; --ink: #fff; --edge: #000; }
.pchip.c-white:not(.empty) { background: radial-gradient(circle, var(--c) 0 54%, var(--edge) 55% 57%, transparent 58%), repeating-conic-gradient(var(--c) 0 22.5deg, #31446b 22.5deg 30deg, var(--c) 30deg 45deg); }
.pchip.empty { background: none; box-shadow: none; border: 2px dashed rgba(255, 255, 255, .3); box-sizing: border-box; }
.pchip[role="button"] { cursor: pointer; }
.pchip[role="button"]:active { transform: scale(.92); }

/* ---------- the table: a blueprint ---------- */
body[data-game="insidejob"] #felt {
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(190, 220, 255, .12), transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 50%, rgba(2, 8, 22, .6) 100%),
    repeating-linear-gradient(0deg, rgba(200, 225, 255, .14) 0 1px, transparent 1px 6vmin),
    repeating-linear-gradient(90deg, rgba(200, 225, 255, .14) 0 1px, transparent 1px 6vmin),
    repeating-linear-gradient(0deg, rgba(200, 225, 255, .05) 0 1px, transparent 1px 1.2vmin),
    repeating-linear-gradient(90deg, rgba(200, 225, 255, .05) 0 1px, transparent 1px 1.2vmin),
    linear-gradient(180deg, #1b4a86, #123563);
}
body[data-game="insidejob"] #print, body[data-game="insidejob"] .sizer { display: none; }
body[data-game="insidejob"] .meta { flex-direction: column; gap: .6vmin; }
.ij-pile { display: inline-flex; gap: .5vmin; align-items: center; }
.ij-pile .pchip { --chip: 3.4vmin; }
.ij-pile .pchip[data-now] { --chip: 5.2vmin; margin-left: .4vmin; }
.ij-shown { font-size: 1.7vmin; color: var(--ivory); }

#heist {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * 1.6);
  color: #eaf2ff; font-family: var(--ui); text-align: center; max-width: calc(var(--v) * 110);
}
.ij-head { display: flex; align-items: center; gap: calc(var(--v) * 2.4); font-size: calc(var(--v) * 1.9); letter-spacing: .06em; white-space: nowrap; }
.ij-head b { font-family: var(--display); font-weight: 400; font-size: calc(var(--v) * 2.8); letter-spacing: .04em; }
.ij-head > span { color: #a9c4ec; text-transform: capitalize; }
.ij-track { display: flex; align-items: center; gap: calc(var(--v) * .7); }
.ij-track span { font-size: calc(var(--v) * 1.4); letter-spacing: .16em; text-transform: uppercase; color: #a9c4ec; }
.ij-track em { width: calc(var(--v) * 1.4); }
.ij-track i { width: calc(var(--v) * 2.6); height: calc(var(--v) * 2.6); border-radius: 50%; border: .25vmin solid rgba(234, 242, 255, .45); display: grid; place-items: center; }
.ij-track i.vault.on { background: radial-gradient(circle, #ffe08a 0 30%, #d9a520 31% 60%, #8a6408 61%); border-color: #ffe08a; box-shadow: 0 0 1.4vmin rgba(227, 207, 159, .6); }
.ij-track i.alarm.on { background: radial-gradient(circle, #ff8a8a 0 30%, #e0262b 31%); border-color: #ff8a8a; box-shadow: 0 0 1.4vmin rgba(255, 60, 60, .7); animation: ijBlink 1s steps(2) infinite; }
@keyframes ijBlink { 50% { opacity: .55; } }
.ij-twist {
  display: flex; flex-direction: column; gap: .2em; padding: calc(var(--v, 8px) * 1) calc(var(--v, 8px) * 1.8); border-radius: calc(var(--v, 8px) * .5);
  background: #f4f1e8; color: #1d2a44; box-shadow: 0 .6vmin 1.6vmin rgba(0, 0, 0, .4); max-width: calc(var(--v, 8px) * 60); rotate: -.6deg;
  font-size: calc(var(--v, 8px) * 1.7);
}
.ij-twist small { font-size: .75em; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #b4302f; }
.ij-twist.specialist small { color: #2f6db4; }
.ij-twist b { font-family: var(--display); font-weight: 400; font-size: 1.4em; }
.ij-cards { display: flex; gap: calc(var(--v) * 1); justify-content: center; }
.ij-cards .card.unturned { opacity: .55; }
.ij-middle { display: flex; gap: calc(var(--v) * 1.2); justify-content: center; flex-wrap: wrap; min-height: calc(var(--v) * 7); align-items: center; }
#heist .ij-middle .pchip { --chip: calc(var(--v) * 7); }
#heist .ij-middle p { margin: 0; font-family: var(--serif); font-style: italic; color: #a9c4ec; font-size: calc(var(--v) * 2); }
.ij-msg { margin: 0; font-family: var(--serif); font-size: calc(var(--v) * 2.1); max-width: calc(var(--v) * 70); }
.ij-msg .tool { margin-left: calc(var(--v) * 1); }
.ij-lineup { display: flex; gap: calc(var(--v) * 1.4); justify-content: center; flex-wrap: wrap; }
.ij-slot {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * .6); padding: calc(var(--v) * 1) calc(var(--v) * 1.2);
  border-radius: calc(var(--v) * .8); background: rgba(8, 24, 52, .45); border: .2vmin solid rgba(200, 225, 255, .2); transition: .3s;
}
.ij-slot .pchip { --chip: calc(var(--v) * 4.6); }
.ij-slot .nm { display: flex; align-items: center; gap: calc(var(--v) * .5); font-weight: 600; font-size: calc(var(--v) * 1.7); white-space: nowrap; }
.ij-slot .nm i { width: calc(var(--v) * 1.1); height: calc(var(--v) * 1.1); border-radius: 50%; box-shadow: 0 0 0 .15vmin #fff; }
.ij-slot .hand { font-family: var(--serif); font-size: calc(var(--v) * 1.7); min-height: 1.2em; }
.ij-slot .mark { font-size: calc(var(--v) * 1.5); font-weight: 800; color: #ff8a8a; }
.ij-slot.on { background: rgba(8, 24, 52, .7); }
.ij-slot.good { border-color: #7fe0a0; }
.ij-slot.bad { border-color: #ff6b6b; box-shadow: 0 0 2vmin rgba(255, 70, 70, .45); }
.ij-verdict { font-family: var(--display); font-size: calc(var(--v) * 4.4); padding: calc(var(--v) * .6) calc(var(--v) * 2.4); border-radius: calc(var(--v) * .8); animation: ijPop .5s cubic-bezier(.2, .9, .3, 1.4) both; }
.ij-verdict.ok { background: #f4f1e8; color: #1d6a3a; }
.ij-verdict.bad { background: #cf2b2f; color: #fff; }
@keyframes ijPop { from { transform: scale(.4); opacity: 0; } }

/* ---------- the phone ---------- */
body[data-game="insidejob"] { background: linear-gradient(180deg, #1b4a86, #0f2c55); }
body[data-game="insidejob"] #board { display: flex; }
body[data-game="insidejob"] #board { margin-top: 6px; }
body[data-game="insidejob"] #board .card { --cw: min(12.5vw, 54px); }
body[data-game="insidejob"] #status { margin: 8px 0 4px; min-height: 0; }
body[data-game="insidejob"] #panel { gap: 8px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
body[data-game="insidejob"] #handWrap { margin-top: 6px; padding-bottom: 12px; }
body[data-game="insidejob"] #hand .card { --cw: min(21vw, 100px); }
body[data-game="insidejob"] #hand { height: calc(min(21vw, 100px) * 1.4 + 24px); padding-top: 18px; }
.ij-label { margin: 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #a9c4ec; align-self: flex-start; }
#panel .ij-middle { min-height: 56px; width: 100%; gap: 10px; }
#panel .ij-middle .pchip { --chip: 50px; }
#panel .ij-middle em { font-family: var(--serif); color: #a9c4ec; }
.ij-crew { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ij-crew li { display: flex; align-items: center; gap: 10px; padding: 3px 10px; border-radius: 10px; background: rgba(8, 24, 52, .4); }
.ij-crew li.me { background: rgba(244, 241, 232, .14); }
.ij-crew .nm { flex: 1; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 18px; color: var(--ivory); min-width: 0; }
.ij-crew .nm i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; flex: none; }
.ij-crew .nm em { font-style: normal; color: #7fe0a0; }
.ij-crew .past { display: flex; gap: 3px; align-items: center; }
.ij-crew .past small { color: #a9c4ec; font-size: 12px; margin-left: 4px; }
.ij-crew .pchip { --chip: 40px; }
.pchip[data-small] { --chip: 26px; }
.ij-hint { margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: #a9c4ec; }
#panel .ij-twist { font-size: 14px; }
.ij-line { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ij-line li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(8, 24, 52, .4); color: var(--ivory); border: 1px solid transparent; }
.ij-line li span { font-family: var(--display); font-size: 17px; }
.ij-line li em { margin-left: auto; font-family: var(--serif); color: #cfe0f7; }
.ij-line li.good { border-color: #7fe0a0; }
.ij-line li.bad { border-color: #ff6b6b; }
.ij-roundchip { font-family: var(--display) !important; font-size: 18px !important; text-transform: capitalize; padding: 2px 10px; border-radius: 99px; margin-top: 4px; }
.ij-roundchip.c-white { background: #f3f0e7; color: #1d2a44; }
.ij-roundchip.c-yellow { background: #f2c230; color: #3a2900; }
.ij-roundchip.c-orange { background: #ee7a22; color: #fff; }
.ij-roundchip.c-red { background: #cf2b2f; color: #fff; }