/* LET'S RACE: compact, in-page mobile layout — 2026-09-09 */
body{
  background:
    radial-gradient(circle at 14% 10%,rgba(255,224,112,.13) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 18%,rgba(142,255,202,.12) 0 2px,transparent 3px),
    radial-gradient(ellipse at 50% -10%,#176842 0%,#07341f 38%,#02150c 100%);
  background-size:74px 74px,96px 96px,100% 100%;
}
.arena,.chipboard,.slots,.pool,.musicbar{
  box-shadow:0 12px 32px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035);
}
.track{background-image:url('/assets/lets-race/lets-race-mat.webp?v=20260929-image-webp1')}
.runner img,.racer img{animation:race-idle 2.4s ease-in-out infinite;filter:drop-shadow(0 5px 9px rgba(0,0,0,.55))}
.runner:nth-child(even) img,.racer:nth-child(even) img{animation-delay:-1.1s}
@keyframes race-idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1.5deg)}}
.arena.cheering .runner img{animation:race-cheer .38s ease-in-out infinite alternate}
@keyframes race-cheer{from{transform:translateY(1px)}to{transform:translateY(-3px)}}
.btn.primary{box-shadow:0 6px 18px rgba(240,201,71,.28)}
.betting-sheet{display:contents}
.compact-hint{display:none}

/* The same sizing rules cover portrait phones and short landscape screens. */
@media(max-width:900px),(max-height:520px) and (max-width:1400px){
  html,body{width:100%;height:100%;height:100dvh;min-height:0;margin:0;overflow:hidden;overscroll-behavior:none}
  body{font-size:12px;line-height:1.25}
  body .wrap{
    width:100%;max-width:900px;height:100%;height:100dvh;margin:0 auto;
    padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    display:grid;gap:5px;overflow:hidden;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:'header' 'title' 'music' 'status' 'arena' 'bets' 'message';
    grid-template-rows:32px 22px 32px 32px minmax(0,1fr) 224px 24px;
  }
  .wrap>*{min-width:0;min-height:0}
  .bar{grid-area:header;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;margin:0;padding:0 0 4px;min-height:0}
  .brand{font-size:14px;white-space:nowrap;line-height:1}
  .bar nav{gap:8px;min-width:0}.bar nav a{font-size:11px;white-space:nowrap}
  .wallet{font-size:11px;line-height:1;white-space:nowrap;padding:6px 8px;min-width:0}
  h1{grid-area:title;font-size:20px;line-height:22px;margin:0;color:#ffe582}
  .sub{display:none}
  .musicbar{grid-area:music;margin:0;padding:2px 4px;gap:4px;border-radius:9px;flex-wrap:nowrap;overflow:hidden}
  .mbtn,.helpbtn{height:26px;min-height:0;padding:3px 7px;line-height:1;font-size:10px;white-space:nowrap;flex:0 0 auto}
  .musicbar .now{min-width:0;flex:1 1 0;font-size:10px;line-height:1.1}
  .race-status-row{grid-area:status;position:static;display:flex;gap:4px;flex-wrap:nowrap;margin:0;min-height:0}
  .historybtn{height:30px;min-width:0;min-height:0;padding:4px 8px;line-height:1;font-size:10px;white-space:nowrap}
  .race-clock{margin-left:auto;min-width:0;padding:7px 8px;font-size:10px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
  .arena{
    grid-area:arena;position:relative;inset:auto;display:grid;place-items:center;
    container-type:size;width:100%;height:100%;min-height:0;margin:0;
    border:1px solid rgba(227,196,82,.4);border-radius:12px;overflow:hidden;
    background:radial-gradient(ellipse at center,rgba(19,90,55,.6),rgba(2,26,15,.8));
  }
  .crowd{display:none}
  .arena .track{
    position:relative;width:min(100cqw,177.68cqh);height:auto;aspect-ratio:1672/941;
    min-height:0;padding:0;margin:0;border:0;border-radius:8px;
    background-size:100% 100%;background-position:center;box-shadow:none;overflow:hidden;
  }
  /* Match the six painted lanes; percentages use the mat's actual height. */
  .track .lane{position:absolute;left:18.5%;right:12.5%;height:9.3%;min-height:0;border:0;background:none}
  .track .lane:nth-child(1){top:26.8%}.track .lane:nth-child(2){top:36.1%}
  .track .lane:nth-child(3){top:45.4%}.track .lane:nth-child(4){top:54.7%}
  .track .lane:nth-child(5){top:64%}.track .lane:nth-child(6){top:73.3%}
  .lane-no,.finish{display:none}
  .runner{left:0;top:50%;width:clamp(22px,6cqw,36px);height:clamp(22px,6cqw,36px);margin-top:clamp(-18px,-3cqw,-11px)}
  .runner .tag{bottom:-4px;padding:0 2px;font-size:7px;line-height:1;border-radius:3px;background:#031d13cc;max-width:54px;overflow:hidden;text-overflow:ellipsis}
  .runner img,.racer img{filter:drop-shadow(0 2px 3px #0009);animation:none}
  .throwable{font-size:17px}.impact{font-size:15px}.fx{font-size:12px}.slash{width:36px;height:24px;border-width:2px;filter:none}
  .countdown{font-size:36px}
  .betting-sheet{
    grid-area:bets;position:static;inset:auto;transform:none;z-index:auto;width:100%;height:100%;
    display:grid;min-width:0;min-height:0;gap:5px;padding:6px;border:1px solid var(--line);border-radius:12px;
    background:linear-gradient(155deg,#0a3425ee,#041e15ee);box-shadow:0 5px 15px #0003;
    grid-template-areas:'hint' 'slots' 'pool' 'chips' 'controls';
    grid-template-rows:15px 62px 46px 43px 26px;grid-template-columns:minmax(0,1fr);
  }
  .betting-sheet>*{min-width:0;min-height:0;margin:0}
  .compact-hint{grid-area:hint;display:block;font-size:10px;line-height:15px;color:#bedccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slots{grid-area:slots;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:4px;height:100%;box-shadow:none}
  .slot{position:relative;min-width:0;min-height:0;height:100%;padding:3px 1px 15px;gap:1px;border-width:1px;border-radius:8px;overflow:hidden;justify-content:flex-start}
  .slot-label{font-size:10px;line-height:11px;flex-shrink:0}
  .slot>img{width:26px;height:26px;flex-shrink:0;object-fit:contain}
  .slot .who{max-width:100%;font-size:8px;line-height:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
  .slot .stake{position:absolute;right:2px;bottom:2px;font-size:6px;line-height:8px}
  /* The stake stays inside its own slot and cannot cover the next pick. */
  .slot .stack{left:3px;right:3px;top:auto;bottom:2px;width:auto;height:13px;display:grid;filter:none}
  .slot .stack img{display:none}
  .stack b{min-width:0;padding:0 3px;border:0;font-size:9px;line-height:13px;box-shadow:none;background:#183c25;color:#ffdc76}
  .slot.maxed .stack{outline:0}
  .slot.maxed .stack{right:22px}
  .pool{grid-area:pool;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:0;height:100%;overflow:hidden;box-shadow:none}
  .racer{display:flex;min-width:0;min-height:0;width:100%;height:100%;padding:2px;gap:1px;justify-content:center;border-radius:8px}
  .racer img{width:29px;height:29px;flex-shrink:0}.racer span{max-width:100%;font-size:9px;line-height:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chipboard{grid-area:chips;height:100%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;padding:2px 5px;border-radius:9px;box-shadow:none;overflow:visible}
  .chipboard .cb-label,.chipboard .cb-hint{display:none}
  .chip{width:36px;height:36px;min-width:36px;min-height:36px;flex:0 0 auto}
  .chip .cv{bottom:1px;font-size:8px;line-height:10px;background:#062318;border-radius:8px;padding:0 3px;color:#ffdc76}
  .chip.on{transform:none;box-shadow:0 0 0 2px var(--gold)}
  .controls{grid-area:controls;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;height:100%}
  .btn{min-width:0;min-height:26px;height:100%;padding:3px 7px;font-size:10px;line-height:1;flex:1 1 0;white-space:nowrap;border-radius:7px}
  .tally{flex:1.3 1 0;min-width:0;font-size:8px;line-height:10px;max-height:30px;overflow:hidden}
  .msg{grid-area:message;display:block;min-height:0;max-height:24px;margin:0;font-size:10px;line-height:12px;overflow:hidden;overflow-wrap:anywhere}
  .ghost{width:42px;height:42px}
  .coach{position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;width:auto;max-height:45dvh;overflow:auto;padding:10px;font-size:12px}
  .coach:after{display:none}
  .rovl{padding:12px}.rcard{width:min(540px,94vw);max-height:88dvh;padding:16px 12px;border-radius:20px;border-width:2px}
  .rcard .eyebrow{font-size:11px}.rcard h2{font-size:30px;margin:8px 0 12px}
  .rlines{gap:5px}.rline{padding:7px 8px;font-size:11px;gap:8px}.rline span{min-width:0;overflow-wrap:anywhere}
  .rsum{margin-top:10px;padding:8px;font-size:12px}.rbtn{min-height:36px;margin-top:12px;padding:7px 12px;font-size:14px}
  /* The shared coffee badge must not cover mobile race controls. */
  body .bmac-floating-link{display:none!important}
}

@media(max-width:900px) and (max-height:590px) and (orientation:portrait){
  body .wrap{gap:3px;grid-template-rows:29px 20px 28px 30px minmax(0,1fr) 207px 24px}
  h1{font-size:18px;line-height:20px}.bar{gap:5px}.brand{font-size:12px}.bar nav{gap:6px}.bar nav a,.wallet{font-size:10px}
  .betting-sheet{gap:3px;padding:5px;grid-template-rows:14px 58px 43px 40px 28px}
  .compact-hint{font-size:9px;line-height:14px}.slot>img{width:22px;height:22px}.racer img{width:26px;height:26px}
}

/* Short wide screens use two columns, with no panels covering the track. */
@media(max-width:900px) and (orientation:landscape),(max-height:520px) and (max-width:1400px) and (orientation:landscape){
  body .wrap{
    max-width:none;padding:5px max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:4px 7px;
    grid-template-columns:minmax(0,1fr) minmax(290px,42%);
    grid-template-areas:'header header' 'title music' 'status status' 'arena bets' 'message message';
    grid-template-rows:27px 28px 30px minmax(0,1fr) 22px;
  }
  h1{font-size:19px;line-height:28px}.musicbar{height:28px}.musicbar .now{display:none}.musicbar .mbtn,.musicbar .helpbtn{flex:1;padding:3px 5px;font-size:9px}
  .race-status-row{justify-content:flex-start}.race-clock{margin-left:auto}
  .betting-sheet{padding:5px;gap:4px;grid-template-rows:14px minmax(48px,1fr) 41px 39px 28px}
  .compact-hint{font-size:9px;line-height:14px}
  .slot{padding-bottom:14px}.slot>img{width:24px;height:24px}.slot .who{font-size:8px}
  .racer img{width:25px;height:25px}.racer span{font-size:8px}
  .chip{width:33px;height:33px;min-width:33px;min-height:33px}.chipboard{gap:9px}
  .btn{font-size:9px}.tally{font-size:8px;line-height:9px}
  .coach{left:auto!important;width:min(340px,48vw);right:10px!important;max-height:75dvh}
}

@media(max-height:340px) and (orientation:landscape){
  body .wrap{grid-template-rows:25px 25px 27px minmax(0,1fr) 20px;gap:3px 6px}
  .musicbar{height:25px}.mbtn,.helpbtn{height:23px}.historybtn{height:26px;padding:3px 7px}.race-clock{padding:6px 8px}
  .betting-sheet{gap:3px;padding:4px;grid-template-rows:12px minmax(43px,1fr) 35px 33px 26px}
  .compact-hint{font-size:8px;line-height:12px}.slot>img{width:20px;height:20px}.slot .who{display:none}
  .racer img{width:22px;height:22px}.racer span{font-size:7px;line-height:8px}.chip{width:29px;height:29px;min-width:29px;min-height:29px}
}
@media(prefers-reduced-motion:reduce){.runner img,.racer img,.arena.cheering .runner img{animation:none}}