:root{font-family:"Baloo 2","Nunito",system-ui,"Noto Sans",sans-serif;color:#172e49;background:#fff0d1;--blue:#285fb3;--red:#e1483c}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(#c6aa7833 .8px,transparent .8px) 0 0/7px 7px,#fff0d1}button,select{font:inherit;font-weight:800;min-height:44px;padding:9px 13px;border:2px solid #233c57;border-radius:12px;color:#172e49;background:#fff8e8;box-shadow:0 3px #8a744a33;cursor:pointer;max-width:100%}button.primary{background:var(--blue);color:#fff}button:disabled{opacity:.45;cursor:default}button:active{transform:translateY(2px)}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px dashed #e1483c;outline-offset:3px}[hidden]{display:none!important}#app{max-width:1100px;margin:auto;padding:12px max(12px,env(safe-area-inset-right)) 24px}header{display:flex;gap:12px;align-items:center}header a{font-size:25px;color:#285fb3;text-decoration:none}h1{flex:1;font-size:28px;line-height:1.1;margin:0}.hud{display:flex;justify-content:space-between;gap:10px;margin:12px 0 4px;font-size:17px}.rule{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:13px}.field{position:relative;width:min(70%,640px);float:left;margin-right:20px}canvas{display:block;width:100%;aspect-ratio:1;touch-action:none;border-radius:20px;background:#fbe9c5}#toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:90%;background:#fffff3ed;border:2px solid #233c57;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:800;text-align:center;pointer-events:none}#toast:empty{display:none}.controls{overflow:hidden;padding:8px 0}.controls>strong{display:block;font-size:16px;margin:0 0 10px}.driving,.actions{display:grid;gap:10px;margin-bottom:14px}.actions{grid-template-columns:1fr 1fr}.controls small{font-size:12px}#recap{border:2px solid #285fb3;background:#fff8e8;border-radius:16px;padding:16px;margin-top:16px}#recap h2{margin:0;line-height:1.2}#recap button{margin-top:8px}dialog{width:min(620px,calc(100% - 20px));max-height:calc(100dvh - 24px);overflow:auto;background:#fff8e8;border:3px solid #233c57;border-radius:24px;padding:20px;color:#172e49;box-shadow:8px 12px 0 #17335133}dialog::backdrop{background:#182a4099;backdrop-filter:blur(3px)}dialog p{line-height:1.55}.cover{height:210px;border:2px solid #233c57;border-radius:14px;background:linear-gradient(0deg,#fff1d5ed,transparent 75%),url('cover.webp') center/cover;display:flex;align-items:flex-end;padding:15px}.cover h2{margin:0;font-size:30px;line-height:1.05}.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.modes label{grid-column:1/3;display:flex;align-items:center;gap:12px}.modes select{flex:1;min-width:0}.settings,#skins{display:flex;gap:9px;flex-wrap:wrap}.settings{margin-top:15px}.settings button,.settings select,#skins button{font-size:13px}#skins button[aria-pressed=true]{outline:3px solid #e1483c}#hintdialog button{margin:5px}.hud span{white-space:nowrap}@media(max-width:650px){#app{padding:8px}h1{font-size:21px}header{gap:8px}header button{font-size:13px;padding:8px 10px}.hud{font-size:14px;margin-top:10px;gap:5px}.rule{font-size:11px}.field{width:100%;float:none;margin:0}.controls{padding-top:10px}.controls>strong{font-size:14px;margin-bottom:7px}.driving{grid-template-columns:1fr 1fr 1fr;gap:7px}.driving button,.actions button{font-size:12px;padding:7px 6px}.actions{grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:8px}dialog{padding:15px}.cover{height:160px}.cover h2{font-size:25px}}@media(max-height:500px) and (orientation:landscape){#app{padding:5px 10px}h1{font-size:19px}.hud{margin:4px 0;font-size:13px}.rule{font-size:11px;margin-bottom:4px}.field{width:calc(100dvh - 115px);float:left;margin-right:14px}.controls{padding:2px 0}.controls>strong{font-size:13px;margin:0 0 5px}.driving{grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:8px}.driving button,.actions button{font-size:11px;padding:6px}.actions{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:5px}.cover{height:100px}#recap{margin-top:5px;padding:10px}#recap h2{font-size:18px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}