/* =====================================================================
   Goal Pick | pred-m.css : Predictions page, PHONES ONLY
   Everything lives inside @media (max-width:760px), so laptop / tablet
   layouts are not touched. Load it LAST (after pred-pro.css).

   Look: calm and light. Medium weights, thin borders, soft mint instead
   of neon, one small signature detail (a risk-coloured edge on each card).
   ===================================================================== */

@media (max-width:760px){

  /* ---------- page skeleton ---------- */
  .ph{display:none}                                   /* go straight to the picks */
  .pw{padding-top:12px;gap:14px}
  .pw .col{gap:14px}

  /* the outer "panel" around the list disappears, cards stand on their own */
  .pw .col > .bs:first-child{background:none;border:0;box-shadow:none;padding:0;border-radius:0;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .pw .col > .bs:first-child .pl{margin-inline:0}

  /* ---------- tabs ---------- */
  /* sticky tabs + filters: fully solid (nothing shows through), and it
     slides up to the very top when the header hides on scroll-down */
  .tbar{background:#04070f!important;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 12px 18px -14px rgba(0,0,0,.9);transition:top .3s cubic-bezier(.22,1,.36,1)}
  .tbar .wrap{background:#04070f}
  body:has(.nav.hide) .tbar{top:0;padding-top:var(--sat,0px)}
  .tbar .wrap{padding-inline:12px;display:block}
  .tabs{gap:2px;padding-inline:0}
  .tabs a{padding:13px 12px;font-size:14px;font-weight:500;gap:7px;color:var(--m)}
  .tabs a.on{color:#fff;font-weight:500;border-bottom-color:var(--g)}
  .tabs .ic{font-size:17px;opacity:.9}
  /* phone tab order: Today, Tomorrow, All Predictions, High Confidence */
  .tabs a:nth-child(3){order:1}   /* Today */
  .tabs a:nth-child(4){order:2}   /* Tomorrow */
  .tabs a:nth-child(1){order:3}   /* All Predictions */
  .tabs a:nth-child(2){order:4}   /* High Confidence */

  /* ---------- filters: league + search side by side ---------- */
  .fl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;padding:2px 0 12px}
  .fl select,.fl input{width:100%;height:44px;padding:0 14px;border-radius:12px;font-size:16px;font-weight:400;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);color:#e6eefc}
  .fl input::placeholder{color:#7d8ca8}
  .fl select:focus,.fl input:focus{outline:0;border-color:rgba(34,240,138,.45)}

  /* ---------- top banner ("Top Predictions / Highest-confidence..."): removed on phones ---------- */
  .pw .col > .bs:first-child > h3{display:none}

  /* ---------- the cards ---------- */
  .pl{display:grid;gap:12px}
  .pm{position:relative;border:1px solid rgba(255,255,255,.075);border-radius:18px;overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));
    box-shadow:0 10px 24px -16px rgba(0,0,0,.8)}
  .pm:last-child{border-bottom:1px solid rgba(255,255,255,.075)}
  .pm.open{background:linear-gradient(180deg,rgba(34,240,138,.05),rgba(255,255,255,.02));border-color:rgba(34,240,138,.22)}

  /* signature detail: a slim edge that tells the risk level at a glance */
  .pm::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:0 2px 2px 0;background:#5f6f8f;opacity:.8}
  .pm[data-lv=high]::before{background:var(--g)}
  .pm[data-lv=medium]::before{background:#f0b13c}

  .pl .pm-r{grid-template-columns:88px 120px minmax(0,1fr);   /* fixed, so the Odds | Risk divider lines up on every card */
   
    grid-template-areas:"l l t" "m m c" "p p p" "o v d";
    gap:12px 0;padding:14px 14px 14px 16px;align-items:center}

  /* row 1: league + date */
  .pl .pm-l{gap:8px;font-size:13.5px;font-weight:400;color:#9fb0cc}
  .pl .pm-l img{width:20px;height:20px}
  .pl .pm-t{font-size:12.5px;font-weight:400;color:#9fb0cc;display:inline-flex;align-items:center;gap:7px}
  .pl .pm-t::before{content:"";width:15px;height:15px;background:currentColor;opacity:.8;flex:none;
    -webkit-mask:var(--i-cal) center/contain no-repeat;mask:var(--i-cal) center/contain no-repeat}

  /* row 2: teams (stacked, so long names never get squeezed) + confidence */
  .pl .pm-m{gap:9px}
  .pl .pm-m .tm{gap:11px;font-size:15.5px;font-weight:500;color:#f1f6ff}
  .pl .pm-m .tm img{width:26px;height:26px}
  .pl .pm-m .tm b{font-weight:500}

  .pl .pm-c{position:relative;justify-self:end;display:block;min-width:92px;padding:9px 12px 14px;text-align:center;
    border:1px solid rgba(34,240,138,.26);border-radius:13px;background:rgba(34,240,138,.055)}
  .pl .pm-c b{position:static;display:block;min-width:0;padding:0;border:0;background:none;border-radius:0;
    font-size:22px;line-height:1.1;font-weight:500;letter-spacing:-.01em;color:#5ff5a8}
  .pl .pm-c::after{content:"Confidence";display:block;margin-top:3px;font-size:9.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#7fd9ad}
  .pl .pm-c::before{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.1)}
  .pl .pm-c b::after{left:12px;bottom:6px;height:2px;width:calc((100% - 24px) * var(--v,0) / 100);background:var(--g)}
  /* (b is static, so its bar measures against .pm-c, which is the positioned box) */

  /* row 3: the pick itself */
  .pl .pm-p{gap:0 10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.075);align-items:center;flex-wrap:wrap}
  .pl .pm-p::before{content:"";width:19px;height:19px;flex:none;background:var(--g);opacity:.9;
    -webkit-mask:var(--i-tgt) center/contain no-repeat;mask:var(--i-tgt) center/contain no-repeat}
  .pl .pm-p b{font-size:16px;font-weight:500;color:#5ff5a8}
  .pl .pm-p small{font-size:12.5px;font-weight:400;color:#8ea0bf;flex-basis:100%;padding-left:29px;margin-top:1px}

  /* row 4: odds | risk | details */
  .pl .pm-o{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding-right:16px}
  .pl .pm-o::before{content:"Odds";font-size:12px;font-weight:400;color:#8ea0bf}
  .pl .pm-o b{font-size:20px;font-weight:500;line-height:1.15;color:#fff}
  .pl .pm-v{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 16px;border-left:1px solid rgba(255,255,255,.09)}
  .pl .pm-v::before{content:"Risk level";font-size:12px;font-weight:400;color:#8ea0bf}
  .pl .pm-v i{font-size:12.5px;font-weight:500;padding:3px 12px;border-radius:999px}
  .pl .pm[data-lv=medium] .pm-v i{background:rgba(240,177,60,.1);color:#f4bd55;border-color:rgba(240,177,60,.4)}
  .pl .pm[data-lv=high] .pm-v i{background:rgba(34,240,138,.1);color:#5ff5a8;border-color:rgba(34,240,138,.38)}
  .pl .pm-d{justify-self:end;height:42px;padding:0 15px 0 17px;border-radius:13px;gap:8px;font-size:14.5px;font-weight:500;
    background:rgba(34,240,138,.04);border:1px solid rgba(34,240,138,.38);color:#eaf7f0}
  .pl .pm.open .pm-d{background:rgba(34,240,138,.12);border-color:rgba(34,240,138,.55);color:#5ff5a8}

  /* ---------- opened details: a little lighter too ---------- */
  .pl .pm-x{padding:0 14px 16px 16px}
  .x-b{border-radius:14px;background:rgba(255,255,255,.03)}
  .x-pick b{font-weight:500}
  .x-mr .x-nm{font-weight:500}
  .x-mc{font-weight:500}

  /* ---------- header: show the little tagline on this page ---------- */
  body:has(.pw) .logo small{display:block;font-size:8.5px;letter-spacing:.16em;color:#7f90ad;margin-top:2px}
  body:has(.pw) .logo b{font-weight:600}

  /* ---------- bottom dock: solid enough that cards never show through ---------- */
  body:has(.pw) .bnav{background:rgba(8,12,23,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  body:has(.pw) .bnav a span{font-weight:500}
  body:has(.pw) .bnav a.on{font-weight:600}

  /* ---------- tiny inline icons (kept here so no markup is needed) ---------- */
  :root{
    --i-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --i-tgt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3C/svg%3E");
  }
}

/* very small phones */
@media (max-width:360px){
  .pl .pm-r{padding:12px 12px 12px 14px;grid-template-columns:78px 108px minmax(0,1fr)}
  .pl .pm-c{min-width:82px}
  .pl .pm-c b{font-size:20px}
  .pl .pm-o{padding-right:10px}.pl .pm-v{padding:0 10px}
  .pl .pm-d{padding:0 12px}
}

/* ---------- compact tuning: smaller cards so ~2 fit on screen (phones only) ---------- */
@media (max-width:760px){
  .pl{gap:10px}
  .pm{border-radius:16px}
  .pm::before{top:14px;bottom:14px}
  .pl .pm-r{gap:8px 0;padding:11px 12px 11px 14px}
  .pl .pm-l{font-size:13px}
  .pl .pm-l img{width:18px;height:18px}
  .pl .pm-t{font-size:12px}
  .pl .pm-m{gap:5px}
  .pl .pm-m .tm{gap:9px;font-size:14.5px}
  .pl .pm-m .tm img{width:22px;height:22px}
  .pl .pm-c{min-width:80px;padding:6px 10px 11px;border-radius:12px}
  .pl .pm-c b{font-size:19px}
  .pl .pm-c::after{font-size:8.5px;margin-top:1px}
  .pl .pm-c::before{left:10px;right:10px;bottom:5px}
  .pl .pm-c b::after{left:10px;bottom:5px;width:calc((100% - 20px) * var(--v,0) / 100)}
  .pl .pm-p{padding-top:9px}
  .pl .pm-p::before{width:17px;height:17px}
  .pl .pm-p b{font-size:15px}
  .pl .pm-p small{padding-left:27px;font-size:12px}
  .pl .pm-r{grid-template-columns:80px 112px minmax(0,1fr)}
  .pl .pm-o{padding-right:12px}
  .pl .pm-o::before,.pl .pm-v::before{font-size:11.5px}
  .pl .pm-o b{font-size:18px}
  .pl .pm-v{padding:0 12px;gap:3px}
  .pl .pm-v i{font-size:12px;padding:2px 10px}
  .pl .pm-d{height:38px;padding:0 13px 0 15px;font-size:14px;border-radius:12px}
}
@media (max-width:360px){
  .pl .pm-r{grid-template-columns:72px 100px minmax(0,1fr)}
}

/* ---------- finishing touches (phones only) ---------- */
@media (max-width:760px){
  /* slimmer top area: more room for matches */
  body:has(.pw) .nav .wrap{height:50px;min-height:0}
  body:has(.pw) .logo img,body:has(.pw) .logo .lg{width:32px!important;height:32px!important}
  body:has(.pw) .logo b{font-size:19px}
  body:has(.pw) .mbtn{width:40px;height:40px;border-radius:12px}
  .tbar{top:50px}
  .tabs a{padding:11px 12px}
  .fl{padding:0 0 10px}
  .fl select,.fl input{height:40px}

  /* soft fade on the right edge of the tabs: tells people the row scrolls */
  .tabs{padding-right:26px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent)}
}