@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#242720;background:#eeeade;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ff683c;outline-offset:5px}header{height:88px;border-bottom:1px solid #cbc9bb;margin:0 4%;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:1px}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:1px}.brand-icon{background:#252a22;color:#f4edda;font-size:29px;line-height:30px;width:32px;text-align:center;border-radius:5px}.studio{font-size:9px;border-left:1px solid #aaa;padding-left:10px}.edition{font-size:10px;color:#72756a}#sound{border:1px solid #c0c2b4;border-radius:30px;background:transparent;padding:10px 14px;font-size:10px;font-weight:700;letter-spacing:1px}#sound span{margin-left:12px}main{max-width:1600px;margin:auto;padding:38px 4% 28px;display:grid;grid-template-columns:0.85fr 1.4fr;gap:5.4%;min-height:760px}aside{padding:14px 0 0;position:relative}.eyebrow,.section-label{font-size:9px;font-weight:700;letter-spacing:1.6px}.eyebrow{display:flex;gap:8px;align-items:center}.eyebrow span{background:#f36839;width:6px;height:6px;border-radius:50%}h1{font-family:'Barlow Condensed','Impact',sans-serif;font-weight:900;letter-spacing:-2px;line-height:.88;font-size:clamp(64px,6.6vw,104px);margin:29px 0 24px;position:relative}h1 em{color:#ee6038;font-style:normal}.title-arrow{font-family:Arial;font-size:60px;position:absolute;right:0;bottom:0;color:#ee6038}.intro{font-size:20px;line-height:1.45;letter-spacing:-.5px;margin:0 0 25px}.rule{height:1px;background:#c9c9b9;margin-bottom:25px;width:100%}.mission{color:#75776b;font-size:12px;line-height:1.7;max-width:345px;margin:11px 0 20px}.how{display:flex;gap:15px;margin:13px 0}.how>span{width:25px;height:25px;display:grid;place-items:center;border:1px solid #c4c5b7;border-radius:50%;font-size:10px;color:#777b6b}.how p{margin:0;font-size:11px;line-height:1.7;color:#777b6b}.how b{color:#30362b;font-weight:600}.controls{margin-top:24px;border-top:1px solid #c9c9b9;padding-top:18px}.controls>div:not(:first-child){display:flex;gap:28px;margin-top:12px;font-size:10px;color:#6f7565}.controls span{display:flex;align-items:center;gap:5px;min-width:120px}kbd{font:10px 'DM Sans',sans-serif;border:1px solid #c7c9bc;border-bottom:2px solid #b9bdad;border-radius:4px;padding:4px 6px;color:#3d4634;background:#f4f1e6;min-width:23px;text-align:center}.best{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#e1e1d2;border:1px solid #d1d4c2;padding:16px;margin-top:24px;border-radius:6px}.best>span:first-child{font-size:9px;letter-spacing:1px;font-weight:700}.best small{display:block;font-size:7px;color:#888e7c;margin-top:5px}.best b{font-family:'Barlow Condensed',Impact,sans-serif;font-size:27px;letter-spacing:2px}.fine{font-size:9px;line-height:1.6;color:#929685;margin-top:17px}.game{min-height:710px;position:relative;background:#727d4e;border-radius:12px;overflow:hidden;isolation:isolate;box-shadow:0 8px 30px #282d1714}#canvas-wrap,.vignette,#bubbles{position:absolute;inset:0}canvas{display:block;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(#13251a80,transparent 27%,transparent 70%,#11231b90)}.game-top{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center}.live{display:flex;align-items:center;gap:7px;font-size:8px;font-weight:700;letter-spacing:1.6px;color:#f5f1d9}.live i{width:5px;height:5px;background:#f6b84d;border-radius:50%}#pause{color:#fff5db;background:#f2ecd91c;border:1px solid #dedbc54d;border-radius:6px;width:28px;height:28px}.hud{position:absolute;top:75px;left:26px;right:26px;display:flex;justify-content:space-between;color:#fff6df;pointer-events:none}.hud label{display:block;font-size:8px;letter-spacing:1.5px;opacity:.8}.hud strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:49px;letter-spacing:2px;display:block;line-height:1.25}.hud span{display:block;font-size:7px;letter-spacing:1px;color:#edcc78}.hud small{font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:1px}.rage-stat{text-align:right}.rage-stat strong{font-size:36px;line-height:1.7}.rage-stat strong small{font-size:25px;color:#efb84e}#hearts{font-size:11px;color:#f8c574}#hearts small{display:block;color:#e0dfc8;font-size:6px;margin-top:4px}.lane-label{position:absolute;top:180px;left:25%;color:#eacb72;font-size:7px;letter-spacing:2px;transform:translateX(-50%);opacity:.8}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;background:#11221918;backdrop-filter:blur(1px)}.start-card{width:83%;max-width:400px;text-align:center;padding:28px 23px;background:#f1eddf;border:1px solid #fff9e7;border-radius:9px;box-shadow:0 15px 50px #14200e45;transform:translateY(55px)}.tag{font-size:8px;letter-spacing:1.4px;color:#8a8d75;font-weight:700}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:43px;line-height:.98;text-transform:uppercase;margin:16px 0;letter-spacing:-.5px}.start-card p{font-size:11px;color:#737868;line-height:1.6;margin-bottom:24px}.primary{border:0;background:#ee663c;color:#fff7df;border-radius:5px;padding:17px 13px;width:100%;font-size:9px;letter-spacing:1px;font-weight:700;box-shadow:0 3px 0 #c94d28}.primary:hover{background:#dc542d;transform:translateY(-1px)}.primary span{float:right}.start-card>small{display:block;font-size:6px;letter-spacing:1px;margin-top:16px;color:#999b88}.hidden{display:none!important}.game-bottom{position:absolute;bottom:24px;left:26px;right:26px;display:flex;justify-content:space-between;align-items:center;color:#fff3d3;pointer-events:none}.speed{display:flex;gap:10px;align-items:center}.speed strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:53px;line-height:1}.speed span{font-size:9px;line-height:1.8;letter-spacing:1px}.speed b{font-size:6px;color:#d6cb92}.route{text-align:center;background:#324f53;border:2px solid #ece8cb;border-radius:5px 5px 14px 14px;width:40px;overflow:hidden;transform:rotate(-4deg)}.route span{display:block;font-size:5px;background:#ad573a;padding:3px 0}.route b{font-size:18px}.location{text-align:right;font-size:7px;line-height:1.8;letter-spacing:1px;color:#c4c7ab}.location b{color:#f4e7bf;font-size:6px}.bubble{position:absolute;transform:translate(-50%,-100%);padding:7px 10px;background:#fff3cf;color:#4b4030;border-radius:6px 6px 6px 0;font-size:10px;font-weight:800;white-space:nowrap;box-shadow:0 3px 0 #0002;pointer-events:none}.bubble.hot{background:#f67744;color:#fff8df}#toast{position:absolute;top:27%;width:100%;text-align:center;color:#ffdc86;font-size:12px;font-weight:700;letter-spacing:1px;text-shadow:0 2px 5px #000;pointer-events:none}footer{margin:0 4%;border-top:1px solid #c9c9b9;padding:19px 0 23px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:#8a8f7b}footer b{font-size:14px;margin-left:8px}.touch{display:none} @media(min-width:1500px){main{padding-top:50px}.game{min-height:800px}aside{padding-top:40px}}@media(max-width:900px){main{gap:4%;grid-template-columns:.8fr 1.2fr;padding-left:3%;padding-right:3%}h1{font-size:70px}.title-arrow{display:none}.eyebrow{font-size:7px}.location{display:none}.edition{display:none}}@media(max-width:650px){header{height:65px}.brand{font-size:12px}main{display:flex;flex-direction:column;padding:22px 4%;gap:24px}aside{padding:0}h1{font-size:70px;margin:18px 0 14px}.intro{font-size:16px;margin:0}.eyebrow{font-size:7px}.rule,.section-label,.mission,.how,.controls,.fine{display:none}.best{position:absolute;right:0;bottom:2px;margin:0;padding:10px;gap:15px}.best small{font-size:6px}.best>span:first-child{font-size:7px}.game{height:75svh;min-height:590px}.touch{display:flex;position:absolute;bottom:85px;left:20px;right:20px;justify-content:space-between;gap:12px;z-index:6}.touch button{width:46px;height:42px;border:1px solid #e8dfba66;border-radius:8px;background:#263b2bac;color:#ffedc4;font-size:22px;touch-action:none;user-select:none}.touch button:nth-child(2){margin-right:auto}.game-bottom{bottom:20px}.start-card{transform:translateY(12px)}footer{font-size:7px}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){button{transition:none}}

@media(min-width:651px){main{align-items:start}.game{position:sticky;top:16px;height:calc(100svh - 165px);min-height:540px;max-height:900px}.lane-label{left:35.4%}}
@media(max-width:650px){.lane-label{left:32%}}

/* Keep the complete mobile game inside the viewport, even with browser bars open. */
@media(max-width:650px){
  body{height:100svh;display:flex;flex-direction:column}
  header{height:44px;flex-shrink:0}
  .brand{font-size:10px;gap:7px}
  .brand-icon{width:24px;font-size:23px;line-height:25px}
  .studio{font-size:7px;padding-left:7px}
  #sound{font-size:8px;padding:8px 10px}
  #sound span{margin-left:6px}
  main{width:100%;max-width:none;flex:1;min-height:0;margin:0;padding:10px 4% max(10px,env(safe-area-inset-bottom));gap:10px}
  aside{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px}
  .eyebrow{display:none}
  h1{grid-column:1/-1;font-size:clamp(26px,8vw,40px);line-height:1;letter-spacing:-.7px;margin:0;white-space:nowrap}
  h1 br{display:none}
  h1 em{margin-left:.15em}
  .intro{font-size:10px;line-height:1.4;letter-spacing:0}
  .best{position:static;padding:6px 8px;gap:8px;min-width:0}
  .best>span:first-child{font-size:6px;letter-spacing:.5px}
  .best small{font-size:5px;margin-top:2px}
  .best b{font-size:22px;line-height:1;letter-spacing:1px}
  .best>span:last-child{display:none}
  .game{flex:1;min-height:0;height:auto;width:100%}
  .game-top{top:12px;left:16px;right:16px}
  .live{font-size:7px;letter-spacing:1px}
  .hud{top:51px;left:16px;right:16px}
  .hud strong{font-size:36px}
  .rage-stat strong{font-size:28px}
  .hud label{font-size:7px;letter-spacing:1px}
  .hud span{font-size:6px;letter-spacing:.5px}
  .lane-label{top:140px;font-size:6px;letter-spacing:1px}
  .game-bottom{bottom:94px;left:16px;right:16px}
  .speed strong{font-size:38px}
  .touch{bottom:14px;left:12px;right:12px;gap:8px;align-items:end}
  .touch button{height:58px;width:48px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;background:#253b2b;border-color:#e8dfba99;box-shadow:0 3px 0 #15271e}
  .touch button span{font:700 27px/1 Arial,sans-serif;pointer-events:none}
  .touch button small{font:700 7px/1 'DM Sans',Arial,sans-serif;letter-spacing:.6px;pointer-events:none}
  .touch button.steer{width:clamp(62px,17vw,82px);height:70px;background:#f4c74f;color:#242720;border:2px solid #fff0b4;box-shadow:0 4px 0 #ac792c,0 3px 14px #0005}
  .touch button.steer span{font-size:34px}
  .touch button.steer small{font-size:9px;letter-spacing:1px}
  .touch button:active{transform:translateY(3px);box-shadow:none;background:#f8edd0;color:#242720}
  .overlay{z-index:7}
  .start-card{transform:none;padding:18px 16px;max-height:calc(100% - 24px);overflow-y:auto}
  h2{font-size:35px;margin:12px 0}
  .start-card p{margin-bottom:16px}
  .start-card>small{margin-top:12px}
  footer{display:none}
}