/* FLOWS screens: join, launch, claim, admin. Prefix fl-. */
.fl-panel{position:relative;max-width:820px;background:rgba(8,16,30,.78);color:#fff;padding:28px 30px 30px;box-shadow:10px 10px 0 rgba(255,90,54,.9);font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.fl-h{margin:0 0 14px;font-size:34px;line-height:1;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.5px;color:#ffd166}
.fl-sub{margin:0 0 18px;font-size:15px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.85)}
.fl-sec{margin:24px 0 10px;font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#ffd166}
.fl-k{font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#ffd166;margin-right:8px}
.fl-coinline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px;font-size:18px}
.fl-coinline b{font-weight:900;font-style:italic}
.fl-panel a{color:#7CFFB2}
.fl-addr{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;word-break:break-all;color:#7CFFB2}

/* inside the game shell the main element is already the panel */
main .fl-panel{background:none;box-shadow:none;max-width:900px}

/* buttons (stand alone if game.css is absent) */
.fl-btn{display:inline-block;padding:12px 22px;border:0;background:#7CFFB2;color:#10203a !important;font:900 15px/1.1 Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;text-decoration:none;cursor:pointer;transform:skewX(-8deg);transition:transform .08s,box-shadow .08s}
.fl-btn:hover,.fl-btn:focus-visible{transform:skewX(-8deg) translate(-2px,-2px);box-shadow:4px 4px 0 #ff5a36;outline:0}
.fl-btn:disabled{opacity:.5;cursor:default;transform:skewX(-8deg);box-shadow:none}
.fl-alt{background:#fff;color:#10203a !important}
.fl-alt:hover,.fl-alt:focus-visible{box-shadow:4px 4px 0 #ff5a36}
.fl-buy{background:#ffd166}
.fl-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}

/* objectives */
.fl-objectives{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fl-obj{display:flex;align-items:center;gap:16px;padding:12px 16px;background:rgba(255,255,255,.06);transform:skewX(-6deg)}
.fl-obj>*{transform:skewX(6deg)}
.fl-obj b{display:block;font-size:20px;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.3px}
.fl-obj small{display:block;margin-top:3px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.fl-num{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;background:#10203a;color:#ffd166;font-weight:900;font-style:italic;font-size:18px;box-shadow:inset 0 0 0 2px #ffd166}
.fl-obj.fl-done{background:#ffd166;color:#10203a;box-shadow:6px 6px 0 #ff5a36}
.fl-obj.fl-done small{color:rgba(16,32,58,.7)}
.fl-obj.fl-done .fl-num{background:#10203a;color:#7CFFB2;box-shadow:none}
.fl-rules{margin:18px 0 0;display:grid;gap:4px}
.fl-rules p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.88)}
.fl-rules b{color:#7CFFB2;font-weight:900;font-style:italic;text-transform:uppercase;margin-right:4px}

/* live area */
.fl-live{margin-top:18px}
.fl-live:empty{display:none}
.fl-pick{padding:16px 18px;background:rgba(255,255,255,.05)}
.fl-pick-t{font-size:16px;font-weight:900;font-style:italic;text-transform:uppercase;color:#fff}
.fl-pick .fl-actions{margin-top:14px}
.fl-wallets{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.fl-wallet{padding:12px 20px;border:0;background:rgba(255,255,255,.1);color:#fff;font:900 16px Inter,"Helvetica Neue",Arial,sans-serif;font-style:italic;text-transform:uppercase;cursor:pointer;transform:skewX(-8deg)}
.fl-wallet:hover,.fl-wallet.fl-on{background:#ffd166;color:#10203a;box-shadow:6px 6px 0 #ff5a36}
.fl-wallet:disabled{cursor:default}
.fl-status{display:grid;gap:2px;margin-bottom:6px}
.fl-kv{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
.fl-kv span{font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.fl-kv b{font-weight:700;text-align:right;word-break:break-word}
.fl-state{margin-top:14px;padding:14px 18px;transform:skewX(-6deg)}
.fl-state>*{transform:skewX(6deg)}
.fl-state b{display:block;font-size:22px;font-weight:900;font-style:italic;text-transform:uppercase}
.fl-state small{display:block;font-size:13px;font-weight:600;margin-top:2px}
.fl-in{background:#7CFFB2;color:#10203a;box-shadow:6px 6px 0 #ff5a36}
.fl-out{background:rgba(255,90,54,.18);box-shadow:inset 4px 0 0 #ff5a36}
.fl-wait{display:flex;align-items:baseline;gap:14px;background:rgba(255,255,255,.06)}
.fl-wait small{order:0;font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:#ffd166}
.fl-clock{font-variant-numeric:tabular-nums;color:#7CFFB2;font-size:30px !important;letter-spacing:1px}
.fl-won{display:block;margin-bottom:16px;padding:16px 20px;background:#ffd166;color:#10203a !important;text-decoration:none;transform:skewX(-6deg);box-shadow:8px 8px 0 #ff5a36}
.fl-won b{display:block;font-size:26px;font-weight:900;font-style:italic;text-transform:uppercase;transform:skewX(6deg)}
.fl-won small{display:block;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;transform:skewX(6deg)}

/* messages and empty */
.fl-msg{margin:12px 0;padding:10px 14px;font-size:14px;font-weight:600;background:rgba(255,255,255,.08)}
.fl-msg[hidden]{display:none}
.fl-ok{background:rgba(124,255,178,.16);color:#7CFFB2}
.fl-bad{background:rgba(255,90,54,.2);color:#ffd2c7}
.fl-empty{padding:26px 22px;background:rgba(255,255,255,.05);text-align:left}
.fl-empty-t{font-size:24px;font-weight:900;font-style:italic;text-transform:uppercase;color:#fff}
.fl-empty p{margin:6px 0 0;font-size:15px;color:rgba(255,255,255,.75)}
.fl-empty .fl-actions{margin-top:16px}

/* forms */
.fl-form{display:block}
.fl-form[hidden]{display:none}
.fl-field{display:block;margin-bottom:12px;min-width:0}
.fl-field>span{display:flex;justify-content:space-between;margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.7)}
.fl-field>span i{font-style:normal;letter-spacing:1px;color:rgba(255,255,255,.45)}
.fl-field input,.fl-field textarea,.fl-field select,.fl-custom-n{width:100%;box-sizing:border-box;padding:12px 14px;border:0;border-radius:0;background:rgba(255,255,255,.1);color:#fff;font:600 16px Inter,"Helvetica Neue",Arial,sans-serif;box-shadow:inset 0 -3px 0 rgba(255,255,255,.25);outline:0}
.fl-field select option{color:#10203a}
.fl-field textarea{resize:vertical;min-height:72px}
.fl-field input:focus,.fl-field textarea:focus,.fl-field select:focus,.fl-custom-n:focus{background:rgba(255,255,255,.16);box-shadow:inset 0 -3px 0 #ffd166}
.fl-field input::placeholder,.fl-custom-n::placeholder{color:rgba(255,255,255,.4)}
.fl-upper{text-transform:uppercase}
.fl-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fl-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.fl-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.fl-drop{display:flex;align-items:center;gap:14px;padding:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);cursor:pointer}
.fl-file:focus-within .fl-drop,.fl-drop:hover{box-shadow:inset 0 0 0 2px #ffd166}
.fl-drop img{width:56px;height:56px;object-fit:cover}
.fl-drop b{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.5px}
.fl-drop small{margin-left:auto;font-size:12px;color:rgba(255,255,255,.55)}

/* selectable prize cards */
.fl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fl-card{position:relative;display:flex;flex-direction:column;padding:18px 18px 16px;background:rgba(255,255,255,.07);cursor:pointer;transform:skewX(-6deg);transition:transform .08s,background .08s}
.fl-card>*{transform:skewX(6deg)}
.fl-card input,.fl-chip input{position:absolute;opacity:0;pointer-events:none}
.fl-card-t{font-size:30px;line-height:1;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.5px}
.fl-card-v{margin-top:10px;font-size:24px;font-weight:900;font-style:italic;color:#7CFFB2}
.fl-card-s{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fl-card:hover{background:rgba(255,255,255,.13)}
.fl-card.fl-on{background:#ffd166;color:#10203a;transform:skewX(-6deg) translate(-3px,-3px);box-shadow:8px 8px 0 #ff5a36}
.fl-card.fl-on .fl-card-v{color:#10203a}
.fl-card.fl-on .fl-card-s{color:rgba(16,32,58,.7)}
.fl-card:focus-within{outline:2px solid #fff;outline-offset:3px}

/* preset choices (skewed blocks, not rounded) */
.fl-chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fl-chip{position:relative;display:inline-block;padding:10px 16px;border:0;background:rgba(255,255,255,.08);color:#fff;font:900 16px Inter,"Helvetica Neue",Arial,sans-serif;font-style:italic;text-transform:uppercase;cursor:pointer;transform:skewX(-8deg)}
.fl-chip>span{display:inline-block;transform:skewX(8deg)}
.fl-chip:hover{background:rgba(255,255,255,.15)}
.fl-chip.fl-on{background:#ffd166;color:#10203a;box-shadow:5px 5px 0 #ff5a36}
.fl-chip:focus-within{outline:2px solid #fff;outline-offset:2px}
.fl-custom-n{width:180px}
.fl-custom-n[hidden]{display:none}

/* pay + step tracker */
.fl-pay[hidden]{display:none}
.fl-amount{display:flex;align-items:baseline;gap:10px}
.fl-amount b{font-size:48px;line-height:1;font-weight:900;font-style:italic;color:#7CFFB2;text-shadow:3px 3px 0 rgba(0,0,0,.45)}
.fl-amount span{font-size:18px;font-weight:900;font-style:italic}
.fl-copy{display:flex;align-items:center;gap:14px;margin:14px 0 6px;padding:12px 14px;background:rgba(255,255,255,.07)}
.fl-copy .fl-addr{flex:1;min-width:0}
.fl-copy .fl-btn{padding:8px 14px;font-size:12px}
.fl-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fl-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.06);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.55);transform:skewX(-6deg)}
.fl-steps li>*{transform:skewX(6deg)}
.fl-steps .fl-num{width:26px;height:26px;font-size:14px}
.fl-steps li.fl-on{background:#ffd166;color:#10203a;box-shadow:5px 5px 0 #ff5a36}
.fl-steps li.fl-on::after{content:"";flex:none;margin-left:auto;width:28px;height:4px;background:linear-gradient(90deg,#10203a 50%,transparent 50%) 0 0/14px 4px;animation:fl-run 1s linear infinite}
.fl-steps li.fl-done{background:rgba(124,255,178,.18);color:#7CFFB2}
.fl-steps li.fl-done .fl-num{color:#7CFFB2;box-shadow:inset 0 0 0 2px #7CFFB2}
@keyframes fl-run{to{background-position:14px 0}}

/* wins */
.fl-wins{display:grid;gap:16px;margin-top:8px}
.fl-win{padding:18px 20px;background:rgba(255,255,255,.05)}
.fl-win.fl-pending{background:rgba(255,209,102,.08);box-shadow:inset 0 0 0 2px #ffd166}
.fl-win-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.fl-win-h b{font-size:26px;font-weight:900;font-style:italic;text-transform:uppercase}
.fl-cash{font-size:24px;font-weight:900;font-style:italic;color:#7CFFB2}
.fl-win.fl-past small{display:block;margin-top:8px;color:rgba(255,255,255,.75)}
.fl-win .fl-form{margin-top:14px}

/* admin */
.fl-keyrow{display:flex;gap:14px;align-items:flex-end}
.fl-keyrow .fl-field{flex:1;margin:0}
.fl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.fl-tab{padding:10px 16px;border:0;background:rgba(255,255,255,.08);color:#fff;font:900 15px Inter,"Helvetica Neue",Arial,sans-serif;font-style:italic;text-transform:uppercase;cursor:pointer;transform:skewX(-8deg)}
.fl-tab.fl-on{background:#ffd166;color:#10203a;box-shadow:5px 5px 0 #ff5a36}
.fl-pane[hidden]{display:none}
.fl-pane .fl-chips{margin-bottom:14px}
.fl-admin .fl-win{margin-bottom:12px}

@media (max-width:720px){
  .fl-panel{padding:22px 18px 24px;box-shadow:6px 6px 0 rgba(255,90,54,.9)}
  main .fl-panel{box-shadow:none}
  .fl-h{font-size:28px}
  .fl-row2,.fl-row3{grid-template-columns:1fr;gap:0}
  .fl-cards{grid-template-columns:1fr;gap:12px}
  .fl-card{flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
  .fl-card-t{font-size:24px}
  .fl-card-v{margin:0 0 0 auto;font-size:20px}
  .fl-card-s{display:none}
  .fl-steps{grid-template-columns:1fr 1fr}
  .fl-obj b{font-size:17px}
  .fl-amount b{font-size:38px}
  .fl-copy{flex-direction:column;align-items:stretch}
  .fl-keyrow{flex-direction:column;align-items:stretch}
  .fl-drop small{display:none}
  .fl-actions .fl-btn{flex:1 1 auto;text-align:center}
}