/* Stock Market lesson. All rules scoped under .stk-* */
.stk-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stk-note { font-size: 12.5px; color: var(--faint); text-align: center; }

/* photos and paintings */
.stk-photo { margin: 0; width: 100%; max-width: 380px; }
.stk-photo > div { overflow: hidden; border-radius: 12px; }
.stk-photo img { display: block; width: 100%; border-radius: 12px; }
.stk-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }
.stk-drift img { border-radius: 0; transform-origin: 30% 60%; animation: stkDrift 9s ease-in-out both; }
@keyframes stkDrift { from { transform: scale(1.18) translateX(4%); } to { transform: scale(1.02) translateX(0); } }
.stk-paper { max-width: 185px; }
.stk-paper img { box-shadow: 0 10px 30px rgba(0,0,0,.45); }

/* the ship, sliced */
.stk-top { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.stk-ship { --sw: 50px; position: relative; width: calc(var(--sw) * 4); height: 134px; }
/* The ship stays as a faint outline once its slices have flown. */
.stk-ghost { position: absolute; inset: 0; opacity: .16; background-repeat: no-repeat; background-size: calc(var(--sw) * 5) auto; background-position: calc(var(--sw) * -.75) 50%; }
.stk-ship .stk-slice { position: absolute; top: 0; left: calc(var(--i) * var(--sw)); }
/* Four slices cover the middle 80% of the picture: --sw is a slice's width, --i its place. */
.stk-slice { --sw: 50px; flex: none; width: var(--sw); height: 134px; background-repeat: no-repeat; background-size: calc(var(--sw) * 5) auto; background-position: calc(var(--sw) * -.75 - var(--i) * var(--sw)) 50%; }
.stk-hold { height: 48px; display: flex; justify-content: center; align-items: flex-end; }
.stk-hold .stk-slice { --sw: 30px; height: 48px; border-radius: 6px; box-shadow: 0 0 0 2px rgba(252,192,80,.65), 0 6px 14px rgba(0,0,0,.4); background-color: rgba(18,24,41,.6); }
.stk-ship .stk-slice { box-shadow: none; }
.stk-hold .stk-slice { position: static; }

.stk-chest { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; transition: transform .2s; }
.stk-chest img { width: 72px; height: auto; }
.stk-chest b { font: 700 13px var(--sans); color: var(--text); }
.stk-ct { font: 700 12.5px var(--sans); color: var(--gold); }
.stk-chest.stk-pop { transform: scale(1.08); }
.stk-chest.stk-zero .stk-ct { color: var(--dim); }

.stk-row { display: flex; justify-content: center; gap: 6px; width: 100%; }
.stk-p { display: flex; flex-direction: column; align-items: center; width: 80px; }
.stk-p img { height: 92px; width: auto; }
.stk-p b { font: 700 13.5px var(--sans); color: var(--text); margin-top: 2px; }
.stk-p span { font: 600 12px var(--sans); color: var(--dim); }
.stk-three { gap: 14px; align-items: flex-end; }
.stk-three .stk-p { width: 96px; }
.stk-three .stk-p img { height: 128px; }
.stk-three .stk-chest { margin-bottom: 18px; }

.stk-coin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 10px rgba(252,192,80,.6); pointer-events: none; z-index: 4; }

/* the market: a price, buyers and sellers */
.stk-tag { display: flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.stk-tag span { font: 600 13px var(--sans); color: var(--dim); }
.stk-tag b { font: 800 26px var(--sans); color: var(--text); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.stk-tag em { font: 600 13px var(--sans); color: var(--dim); font-style: normal; }
.stk-tag.up b { color: var(--mint); } .stk-tag.down b { color: var(--red); }
.stk-sides { display: flex; gap: 12px; width: 100%; max-width: 360px; }
.stk-side { flex: 1; border-radius: 14px; padding: 6px 6px 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); min-height: 92px; }
.stk-side h4 { margin: 0 0 4px; text-align: center; font: 700 12.5px var(--sans); color: var(--dim); text-transform: none; }
.stk-buy h4 { color: var(--mint); }
.stk-crowd { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
.stk-face { height: 58px; width: auto; animation: stkIn .35s ease-out both; }
@keyframes stkIn { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.stk-news { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; width: 100%; max-width: 300px; min-height: 56px; padding: 8px 14px; border-radius: 14px; background: #F3E6C8; color: #3A2A12; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.stk-news i { grid-row: 1 / 3; width: 30px; height: 22px; border-radius: 3px; background: linear-gradient(160deg, #C9A86A 50%, #B08D4E 50%); position: relative; }
.stk-news i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px; border-radius: 50%; background: #B23A2E; }
.stk-news span { font: 600 12px var(--sans); color: #6E5530; }
.stk-news b { font: 800 15px var(--serif); }
.stk-news.stk-open { transform: rotate(-1.5deg); }
.stk-news.stk-rumor { background: #E4DCCB; }

/* the app */
.stk-phone { width: 230px; padding: 14px; border-radius: 26px; background: #161C2E; border: 2px solid var(--line-strong); box-shadow: 0 16px 36px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 10px; }
.stk-bar { display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--sans); color: var(--dim); }
.stk-bar i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--mint), #1F9E6E); }
.stk-co { display: flex; justify-content: space-between; align-items: baseline; font: 700 15px var(--sans); }
.stk-co span { color: var(--dim); font-size: 13px; }
.stk-amt { font: 800 34px var(--sans); color: var(--text); text-align: center; }
.stk-buyb { text-align: center; padding: 9px; border-radius: 12px; background: rgba(63,214,154,.14); color: var(--mint); font: 800 14px var(--sans); }

.stk-why { flex-direction: row; justify-content: center; gap: 18px; }
.stk-ship1 { width: 170px; height: auto; }

@media (max-height: 700px) {
  .stk-ship { --sw: 42px; height: 112px; }
  .stk-ship .stk-slice { --sw: 42px; height: 112px; }
  .stk-p img { height: 76px; }
  .stk-three .stk-p img { height: 108px; }
  .stk-face { height: 46px; }
  .stk-side { min-height: 74px; }
  .stk-photo { max-width: 330px; }
  .stk-paper { max-width: 160px; }
  .stk-sc { gap: 9px; }
}