/* Auto Car Ship — landing games prototype. Shared design system, lifted from the
   perfected campaign emails: page #060d18, card #0b1a2e, panel #12283f,
   header #001771, ribbon #018ce9, quote button #002f9b. ACS blue family only. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#060d18;
  font-family:Arial,Helvetica,sans-serif;
  color:#dbe7f3;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:600px;margin:0 auto;padding:18px 10px 28px;}
.card{
  background:#0b1a2e;border:1px solid #123a6e;border-radius:14px;overflow:hidden;
}
.brand{background:#001771;text-align:center;padding:20px 24px 0;}
.brand .mark{font-size:15px;letter-spacing:6px;color:#9fd0ff;}
.brand h1.logo{
  margin:2px 0 0;font-size:27px;font-weight:bold;letter-spacing:1px;color:#ffffff;line-height:1.15;
}
.brand h1.logo .car{color:#018ce9;}
.brand .tagline{font-size:11px;letter-spacing:4px;color:#9fd0ff;padding:4px 0 16px;}
.ribbon{
  background:#018ce9;color:#ffffff;text-align:center;
  font-size:12px;font-weight:bold;letter-spacing:2px;padding:7px 16px;
}
.body{padding:24px 24px 6px;}
.body h2{font-size:25px;line-height:1.25;color:#ffffff;margin:0 0 12px;}
.body p{font-size:16px;line-height:1.55;margin:0 0 14px;}
.small{font-size:13.5px;color:#bcd3e8;line-height:1.5;}
.proto{
  display:inline-block;font-size:11px;font-weight:bold;letter-spacing:2px;color:#ffd76a;
  border:1px solid #ffd76a;border-radius:999px;padding:4px 12px;margin:0 0 14px;
}
/* game shell */
.gamebox{background:#12283f;border-radius:12px;padding:16px 14px 18px;margin:6px 0 4px;}
.gamebox h3{margin:0 0 6px;font-size:15px;color:#ffffff;text-align:center;}
.gamebox .sub{font-size:14px;line-height:1.5;color:#cfe8ff;text-align:center;margin:0 0 12px;}
.stage{
  position:relative;border-radius:10px;overflow:hidden;background:#00113d;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer;
}
.stage canvas{display:block;width:100%;height:auto;}
.stage .overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px;gap:10px;
}
.stage .overlay .big{font-size:21px;font-weight:bold;color:#ffffff;line-height:1.3;}
.stage .overlay .hint{font-size:14px;color:#cfe8ff;line-height:1.5;}
.stage .overlay.hidden{display:none;}
.hud{margin-top:12px;text-align:center;}
.hud .count{color:#ffffff;font-size:14.5px;font-weight:bold;}
.hud .count .dim{color:#bcd3e8;font-weight:normal;}
.dots{margin-top:6px;font-size:9px;letter-spacing:3px;line-height:1;}
.dots .on{color:#ffd76a;}
.dots .off{color:#274a75;}
.bar{margin:8px auto 0;width:82%;background:#0d2b52;border-radius:3px;height:5px;overflow:hidden;}
.bar i{display:block;height:5px;background:#018ce9;border-radius:3px;width:0%;}
.tapbtn{
  display:block;margin:12px auto 0;background:#018ce9;color:#ffffff;border:0;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:bold;letter-spacing:1px;
  border-radius:999px;padding:13px 26px;min-width:70%;
}
.tapbtn:active{transform:scale(.98);}
/* reward + cta */
.reward{
  background:#12283f;border:1px solid #018ce9;border-radius:10px;
  padding:14px 18px;font-size:14.5px;line-height:1.55;color:#eaf6ff;margin:16px 0 0;
}
.reward.hidden{display:none;}
.cta-row{text-align:center;padding:20px 24px 4px;}
a.quote{
  display:inline-block;background:#002f9b;color:#ffffff;font-size:17px;font-weight:bold;
  text-decoration:none;padding:15px 42px;border-radius:999px;border:1px solid #018ce9;
}
.cta-row .under{font-size:13px;color:#7d93ad;margin-top:10px;}
a.play{
  display:inline-block;background:#018ce9;color:#ffffff;font-size:16px;font-weight:bold;
  text-decoration:none;padding:13px 30px;border-radius:999px;
}
a.back{color:#9fd0ff;font-size:14px;text-decoration:none;}
/* hub cards */
.gcard{background:#12283f;border-radius:12px;padding:18px 18px 20px;margin:0 0 16px;text-align:center;}
.gcard h3{margin:0 0 6px;font-size:18px;color:#ffffff;}
.gcard p{font-size:14.5px;line-height:1.55;color:#cfe8ff;margin:0 0 14px;}
.gcard .art{font-size:40px;line-height:1.2;margin:2px 0 10px;}
/* footer */
.foot{padding:20px 24px 26px;}
.foot .rule{border-top:1px solid #123a6e;padding-top:14px;font-size:12px;line-height:1.6;color:#7d93ad;text-align:center;}
.foot a{color:#9db8d2;}
/* bid battle bits */
.vs{display:flex;align-items:flex-start;justify-content:center;gap:14px;margin:8px 0 2px;}
.vs .side{flex:1;text-align:center;}
.vs .who{font-size:12px;font-weight:bold;letter-spacing:2px;color:#9fd0ff;}
.vs .num{font-size:44px;font-weight:bold;color:#ffffff;line-height:1.1;}
.vs .side.house .num{color:#7fa8cf;}
.vs .mid{font-size:30px;padding-top:26px;}
.chip{
  display:inline-block;font-size:11px;font-weight:bold;letter-spacing:2px;color:#ffffff;
  background:#0d2b52;border:1px solid #274a75;border-radius:999px;padding:4px 12px;
}
.leadchip{color:#ffd76a;}
.phase{font-size:17px;font-weight:bold;color:#ffffff;text-align:center;min-height:22px;margin-top:6px;}
.comment{text-align:center;color:#bcd3e8;font-size:13.5px;min-height:20px;margin-top:4px;}
.hammer{display:inline-block;transition:transform .18s ease;}