/* Aviatorfunnz — flight deck (game screen) styles */

.deck-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--edge);padding-bottom:12px;
}
.deck-head .title{font-size:clamp(28px,5.4vw,42px)}
.readout{text-align:right}
.readout .label{font-size:10px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.readout .val{
  font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:.05em;
  color:var(--brass-hi);line-height:1;font-variant-numeric:tabular-nums;
}
.readout .val::before{content:"\25C7 ";font-size:16px;color:var(--brass);vertical-align:2px}

.strip{display:flex;gap:6px;align-items:center;margin:12px 0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.strip::-webkit-scrollbar{display:none}
.strip .cap{font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;white-space:nowrap;padding-right:2px}
.chip{
  font-size:12px;padding:3px 8px;border-radius:999px;white-space:nowrap;
  border:1px solid currentColor;font-variant-numeric:tabular-nums;animation:chipIn .35s ease both;
}
.chip.low{color:#D8776B}
.chip.mid{color:var(--brass-hi)}
.chip.high{color:#7FD199}
@keyframes chipIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

.stage{
  position:relative;border:1px solid var(--edge);border-radius:3px;
  background:var(--panel);padding:8px;box-shadow:0 18px 40px -22px #000;
}
.stage canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:2px;background:var(--chart)}
@media (max-width:640px){.stage canvas{aspect-ratio:4/3}}

.overlay{position:absolute;inset:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.mult{
  font-family:var(--display);font-weight:900;font-size:clamp(52px,12vw,104px);
  letter-spacing:.03em;line-height:.9;color:var(--plot);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(255,255,255,.35);
}
.mult.out{color:var(--red)}
.mult-note{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#6C7A62;margin-top:6px}
.mult-note.warn{color:var(--red)}

.board{width:min(340px,80%)}
.board .head{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.16em;color:var(--plot);text-transform:uppercase}
.board .sub{font-size:11px;letter-spacing:.2em;color:#7B7156;text-transform:uppercase;margin-top:4px}
.runway{margin-top:14px;height:12px;border-radius:2px;background:#3A4148;position:relative;overflow:hidden;border:1px solid #2A3036}
.runway .fill{position:absolute;inset:0;transform-origin:left;background:var(--brass);opacity:.9}
.runway .dashes{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(233,225,204,.9) 14px 26px);opacity:.5}

.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:700px){.controls{grid-template-columns:1fr}}

.slot{border:1px solid var(--edge);border-radius:3px;background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:12px}
.slot-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.slot-head .tag{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.18em;color:var(--chart);text-transform:uppercase}
.slot-head .status{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.slot.live{border-color:#3E5F49}
.slot.live .status{color:#7FD199}

.stake{display:flex;align-items:stretch;gap:6px}
.stake input{
  flex:1;min-width:0;background:#0F161B;border:1px solid var(--edge);border-radius:2px;
  color:var(--brass-hi);font-family:var(--mono);font-size:19px;text-align:center;
  padding:9px 4px;font-variant-numeric:tabular-nums;
}
.step{width:40px;background:#0F161B;border:1px solid var(--edge);border-radius:2px;color:var(--chart);font-size:17px;cursor:pointer;font-family:var(--mono)}
.step:hover{border-color:var(--brass);color:var(--brass-hi)}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.quick button{background:transparent;border:1px solid var(--edge);border-radius:2px;color:var(--dim);font-family:var(--mono);font-size:12px;padding:6px 0;cursor:pointer}
.quick button:hover{border-color:var(--brass);color:var(--brass-hi)}

.act{
  width:100%;margin-top:10px;padding:15px 8px;cursor:pointer;
  border:1px solid var(--brass);border-radius:2px;
  background:linear-gradient(180deg,#D6A737,#A87C1E);color:#171208;
  font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.05;transition:filter .15s ease,transform .06s ease;
}
.act small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;opacity:.75;margin-top:3px}
.act:hover{filter:brightness(1.08)}
.act:active{transform:translateY(1px)}
.act.cancel{background:transparent;color:var(--chart);border-color:var(--edge)}
.act.cash{background:linear-gradient(180deg,#5FA875,#3C7551);border-color:#6FBF88;color:#08150D}
.act.done{background:transparent;border-color:#3E5F49;color:#7FD199;cursor:default}
.act:disabled{background:transparent;border-color:var(--edge);color:#4E5C66;cursor:not-allowed}

.auto{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.auto input[type=checkbox]{accent-color:var(--brass);width:14px;height:14px}
.auto input[type=text]{width:58px;background:#0F161B;border:1px solid var(--edge);border-radius:2px;color:var(--chart);font-family:var(--mono);font-size:13px;text-align:center;padding:4px 2px}

.ledger{margin-top:12px;border:1px solid var(--edge);border-radius:3px;background:var(--panel);padding:10px 12px}
.ledger h2{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.ledger ol{list-style:none;margin:0;padding:0;font-size:12px}
.ledger li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px dotted #2A3640;font-variant-numeric:tabular-nums}
.ledger li:first-child{border-top:none}
.ledger .empty{color:#5A6771;padding:4px 0}
.ledger .win{color:#7FD199}
.ledger .loss{color:#D8776B}

.deck-foot{margin-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:#5F6D77;letter-spacing:.08em}
.deck-foot button{background:none;border:none;color:#5F6D77;font-family:var(--mono);font-size:11px;letter-spacing:.08em;cursor:pointer;text-decoration:underline;padding:0}
.deck-foot button:hover{color:var(--brass-hi)}