@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700;750;800;900;1000&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#f8f7f2;--white:#fffefb;--ink:#212522;--blue:#2549e9;--lemon:#f1ed76;--line:#dcded5;--muted:#71766c;--green:#437453;--radius:16px;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-width:300px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button{touch-action:manipulation}a{color:inherit}h1,h2,h3,p{margin:0}button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.site-header{max-width:1328px;margin:auto;min-height:104px;padding:20px 44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.brand-mark{width:47px;height:48px;border-radius:9px;background:var(--blue);color:var(--lemon);font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;transform:rotate(-6deg);letter-spacing:-1.5px}.brand-mark span{font-size:14px;position:relative;top:4px}.brand-name{font-size:16px;font-weight:1000;line-height:.98;letter-spacing:-.5px;position:relative}.brand-dot{position:absolute;right:-13px;top:-4px;font-size:9px}.header-actions{display:flex;gap:12px;align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;min-width:42px;height:42px;border-radius:50%;font-size:22px}.icon-button:hover{background:#eaece2}.energy-pill{border:1px solid var(--ink);border-radius:30px;display:flex;align-items:center;gap:8px;background:var(--lemon);padding:8px 14px;font-size:15px;font-weight:800;min-height:42px}.energy-pill>span:first-child{font-size:24px;line-height:1}.runs-label{font-size:12px;letter-spacing:.6px}.screen{max-width:1150px;margin:0 auto;padding:34px 30px 52px;animation:enter .3s ease}.step-line{display:flex;align-items:center;gap:17px;max-width:430px;margin:0 0 36px;font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:1px;font-weight:600;color:#797f75}.step-line b{font-size:11px;border:1px solid var(--line);border-radius:50%;display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;letter-spacing:0;margin-right:6px}.step-line i{width:35px;height:1px;background:var(--line)}.step-line .active{color:var(--blue)}.step-line .active b{background:var(--blue);color:white;border-color:var(--blue)}.step-line .complete b{background:var(--lemon);border-color:var(--lemon)}.drawing-layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(270px,1fr);gap:70px}.section-heading{display:flex;align-items:center;justify-content:space-between}.eyebrow{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:1.5px;display:block;color:var(--muted)}h1{font-size:48px;line-height:1.02;font-weight:1000;letter-spacing:-2.8px;margin-top:12px}h1 span{color:var(--blue)}.pencil-stamp{font-size:62px;line-height:1;transform:rotate(-12deg);color:var(--blue);padding-right:12px}.intro{font-size:16px;margin:15px 0 25px;color:#62665d}.drawing-board{background:white;border:1.5px solid var(--ink);border-radius:13px;box-shadow:4px 5px 0 #e7e8de;overflow:hidden}.board-top{padding:14px 18px;display:flex;justify-content:space-between;border-bottom:1px solid #eeeee7;font-size:10px;letter-spacing:1px;font-family:'Space Grotesk',sans-serif;color:var(--muted)}.ink-dot{display:inline-block;width:7px;height:7px;background:var(--ink);border-radius:100%;margin-right:5px}.canvas-wrap{position:relative;background-image:radial-gradient(#e5e7e0 1px,transparent 1px);background-size:19px 19px;aspect-ratio:1000/650;touch-action:none;overflow:hidden}.canvas-wrap canvas{width:100%;height:100%;display:block;cursor:crosshair;position:relative;z-index:1;touch-action:none}.canvas-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;gap:10px;color:#9aa093}.canvas-hint span{font-family:Georgia,serif;font-size:35px;font-style:italic;transform:rotate(-5deg)}.canvas-hint small{font-size:13px}.drawing-toolbar{min-height:51px;display:flex;align-items:center;justify-content:space-between;padding:8px 15px;border-top:1px solid #eeeee7}.drawing-toolbar>span{font-size:9px;letter-spacing:.9px;color:var(--muted)}.drawing-toolbar>div{display:flex;gap:16px}.text-button{border:0;background:none;font-size:13px;padding:6px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9bcb3}.text-button:hover{color:var(--blue)}.name-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:26px 0 18px}.name-row label{font-size:11px;letter-spacing:1px;font-weight:800}.name-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--white);width:66%;overflow:hidden}.name-field input{min-width:0;width:100%;border:none;background:transparent;padding:13px 14px;font-size:18px;font-weight:700;outline-offset:-4px}.name-field button{background:none;border:none;font-size:23px;padding:8px 14px;border-left:1px solid var(--line)}.button{display:flex;justify-content:center;align-items:center;gap:18px;width:100%;border:1.5px solid var(--ink);border-radius:10px;min-height:61px;padding:15px 20px;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:.3px;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}.button:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}.button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.button>span{font-size:23px}.primary{background:var(--blue);color:white;border-color:#172779;box-shadow:0 4px 0 #172779}.primary:hover{box-shadow:0 6px 0 #172779}.secondary{background:var(--lemon)}.create-button{justify-content:space-between}.under-button{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:11px;color:var(--muted)}.under-button .text-button{font-size:11px}.return-button{display:block;margin:15px auto 0}.draw-aside{padding-top:20px}.rule-card{border-top:2px solid var(--ink);padding-top:21px}.rule-card h2{font-size:32px;letter-spacing:-1px;line-height:1.12;margin:16px 0 30px}.rule-card ol{list-style:none;padding:0;margin:0}.rule-card li{display:flex;gap:16px;margin:0 0 27px}.rule-card li>b{font-family:'Space Grotesk';font-size:13px;color:var(--blue);padding-top:2px}.rule-card strong{font-size:15px}.rule-card p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:5px}.rule-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:17px 0;font-size:10px;letter-spacing:.8px;font-weight:600}.ticket{position:relative;background:var(--lemon);border:1px solid #d3ce4f;border-radius:12px;text-align:center;margin-top:27px;padding:25px 22px 19px;transform:rotate(2.5deg);overflow:hidden}.ticket>.eyebrow{font-size:10px;color:#555933}.ticket>strong{font-family:'Space Grotesk';font-size:81px;line-height:1.4;letter-spacing:-7px;font-weight:600}.ticket>strong span{font-size:27px;letter-spacing:-1px;margin-left:4px}.mini-rail{position:relative;display:block;height:36px;margin:0 25px 17px;border-left:5px solid #525a2d;border-right:5px solid #525a2d}.mini-rail:before,.mini-rail:after{content:'';position:absolute;top:10px;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,#525a2d 0,#525a2d 25px,#fffbcb 25px,#fffbcb 50px)}.mini-rail:after{top:25px}.ticket p{font-size:13px}.ticket-note{display:block;border-top:1px dashed #bab54d;margin-top:20px;padding-top:16px;font-size:9px;font-weight:800;letter-spacing:.8px}.site-footer{max-width:1240px;border-top:1px solid var(--line);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:23px 32px;gap:15px;color:var(--muted);font-family:'Space Grotesk';font-size:10px;letter-spacing:.6px}.site-footer b{color:var(--blue);margin:0 8px}.site-footer .text-button{font-size:11px}.challenge-banner{border:1.5px solid var(--blue);background:#eef0ff;border-radius:12px;padding:18px;margin:0 0 22px;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:20px;line-height:1.5}.challenge-banner strong{color:var(--blue)}.challenge-banner .button{width:auto;min-height:44px;font-size:13px;padding:10px 15px;white-space:nowrap}.ready-screen{max-width:600px}.ready-screen .step-line{margin:0 auto 30px}.horse-passport{background:var(--white);border:1.5px solid var(--ink);border-radius:20px;padding:30px;text-align:center;box-shadow:5px 6px 0 #e6e8df}.horse-passport h1{font-size:38px;letter-spacing:-1.5px}.ready-horse-frame{position:relative;height:220px;display:flex;align-items:center;justify-content:center;margin:8px 0 15px;background-image:radial-gradient(#e1e5d9 1px,transparent 1px);background-size:20px 20px;border-bottom:1px solid var(--line)}.ready-horse-frame img{width:75%;height:85%;object-fit:contain;animation:bob 1.1s ease-in-out infinite}.level-tag{position:absolute;right:0;bottom:10px;font-size:10px;font-weight:700;letter-spacing:.7px;background:var(--lemon);border-radius:4px;padding:6px 9px;transform:rotate(-4deg)}.passport-stats,.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.passport-stats>div+div,.result-stats>div+div{border-left:1px solid var(--line)}small{display:block}.passport-stats small,.result-stats small{font-size:9px;font-weight:600;letter-spacing:.8px;color:var(--muted);margin-bottom:7px}.passport-stats b,.result-stats strong{font-family:'Space Grotesk';font-size:22px}.rhythm-guide{border-top:1px dashed var(--line);margin:23px 0;padding-top:22px}.rhythm-guide>strong{font-family:'Space Grotesk';font-size:22px;letter-spacing:1px}.rhythm-guide span{color:#b7beb0;font-size:16px}.rhythm-guide b{color:var(--blue);background:var(--lemon);padding:4px 8px;border-radius:6px;margin-left:5px}.rhythm-guide p{font-size:14px;color:var(--muted);line-height:1.5;margin-top:14px}.ready-secondary{display:flex;justify-content:space-between;margin:20px 0 10px}.tiny{font-size:11px;color:var(--muted);line-height:1.6}.small-challenge{margin-top:18px;padding:12px;background:#eef0ff;color:var(--blue);font-size:14px;border-radius:8px}.game-screen{max-width:1040px;padding-top:24px}.game-layout{display:grid;grid-template-columns:minmax(0,500px) minmax(220px,1fr);gap:70px}.arena-head{display:flex;justify-content:space-between;align-items:center;padding:0 0 16px}.arena-head h2{font-size:25px;letter-spacing:-.8px;margin-top:4px}.game-head-right{display:flex;align-items:center;gap:12px}.game-head-right>span{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--blue)}.arena-wrap{position:relative;border:1.5px solid var(--ink);border-radius:17px;overflow:hidden;background:#f0f4e6;aspect-ratio:1.03}.arena-wrap>canvas{width:100%;height:100%;display:block}.height-display{position:absolute;top:23px;left:26px;pointer-events:none}.height-display>span{font-size:10px;letter-spacing:1.2px;color:#596852;font-weight:700;display:block}.height-display strong{font-family:'Space Grotesk';font-size:65px;line-height:1.2;letter-spacing:-4px;font-weight:600}.height-display small{display:inline;font-size:24px;letter-spacing:-1px;margin-left:3px}.arena-feedback{position:absolute;top:29%;left:10px;right:10px;text-align:center;pointer-events:none;font-size:32px;font-weight:1000;letter-spacing:-1px;line-height:1.05;color:var(--blue)}.arena-feedback small{font-size:13px;letter-spacing:0;margin-top:8px;font-weight:600}.stride-panel{margin:17px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:18px}.stride-panel>.eyebrow{font-size:9px}.stride-panel>div:first-child{display:flex;flex-direction:column;min-width:120px}.stride-panel strong{font-family:'Space Grotesk';font-size:44px;line-height:1.12;color:var(--blue)}.stride-panel .eyebrow{font-size:10px;letter-spacing:.5px}.stride-dots{display:flex;gap:8px;align-items:center;flex:1;justify-content:center}.stride-dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid #b5bda9}.stride-dots i.lit{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px #2549e911}.stride-dots i.passed{background:#cbd1c3;border-color:#cbd1c3}.count-hint{font-size:9px;line-height:1.6;letter-spacing:1px;font-weight:600;color:var(--muted);text-align:right}.jump-button{background:var(--lemon);font-size:30px;min-height:79px;justify-content:space-between;padding:16px 28px;box-shadow:0 6px 0 var(--ink);touch-action:none;user-select:none}.jump-button>span{font-size:34px}.game-footer{display:flex;justify-content:space-between;margin-top:19px;font-size:9px;letter-spacing:.8px;color:var(--muted)}.game-aside{padding-top:80px}.game-aside h2{font-size:55px;letter-spacing:-2.5px;line-height:1.05;margin:18px 0 25px}.game-aside h2 span{color:var(--blue)}.game-aside>p{font-size:15px;color:var(--muted);line-height:1.7;max-width:230px}.timing-legend{padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:28px 0}.timing-legend p{margin-bottom:17px;display:flex;flex-direction:column;gap:5px}.timing-legend p:last-child{margin-bottom:0}.timing-legend b{font-size:12px;letter-spacing:.8px}.timing-legend span{font-size:13px;color:var(--muted)}.perfect-color{color:var(--blue)}.game-aside .game-fair-note{font-size:12px}.pause-overlay{position:absolute;inset:0;background:#f8f7f2ef;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px;text-align:center;z-index:5}.pause-overlay h2{font-size:38px;line-height:1.05;letter-spacing:-1.5px;margin:14px}.pause-overlay p{font-size:14px;color:var(--muted);margin-bottom:25px}.pause-overlay .button{max-width:280px}.pause-overlay .text-button{margin-top:20px}.result-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:50px}.result-card{background:var(--white);border:1.5px solid var(--ink);padding:27px 30px;border-radius:18px;text-align:center;box-shadow:5px 6px 0 #e3e6dd;position:relative}.result-badge{display:inline-block;background:var(--lemon);border:1px solid #dbd657;font-family:'Space Grotesk';font-size:11px;font-weight:700;letter-spacing:1.1px;padding:7px 10px;border-radius:4px;transform:rotate(-4deg)}.result-card h1{font-size:44px;margin-top:16px}.result-reason{font-size:14px;color:var(--muted);margin:12px 0;line-height:1.6}.result-doodle{height:140px;position:relative;margin-top:15px}.result-doodle img{width:70%;height:100%;object-fit:contain;transform:rotate(-5deg)}.result-doodle span{position:absolute;right:5px;bottom:10px;font-family:Georgia,serif;font-size:20px;font-style:italic;transform:rotate(-8deg);color:var(--blue);max-width:130px;overflow-wrap:anywhere}.result-card>.eyebrow{font-size:10px;margin-top:15px}.result-height{font-family:'Space Grotesk';font-size:85px;letter-spacing:-6px;line-height:1.12;color:var(--blue);font-weight:600;margin-bottom:20px}.result-height small{display:inline;font-size:30px;letter-spacing:-1px;margin-left:3px}.result-stats{padding:18px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin-bottom:22px}.result-card>.button+.button{margin-top:16px}.result-links{display:flex;justify-content:space-between;margin:19px 0 12px}.result-card>.tiny{font-size:10px}.result-rewards{background:#eff4df;border-radius:7px;margin-bottom:20px;padding:10px;font-size:13px}.result-rank{padding-top:10px}.rank-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.rank-head h2{font-size:25px;letter-spacing:-1px}.rank-head select{max-width:128px;font-size:12px;border:1px solid var(--line);background:transparent;border-radius:6px;padding:6px}.rank-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:5px;overflow-x:auto}.rank-tab{padding:13px 9px;background:none;border:0;font-family:'Space Grotesk';font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}.rank-tab.active{color:var(--blue);border-bottom:2px solid var(--blue)}.rank-notice{font-size:11px;line-height:1.5;color:var(--muted);padding:13px 0}.rank-row{display:flex;gap:13px;align-items:center;min-height:64px;border-bottom:1px solid var(--line);font-size:14px;padding:9px 8px}.rank-row.me{background:#eef0ff;border-radius:7px;border-bottom-color:transparent;color:var(--blue)}.rank-row .rank-position{width:20px;font-family:'Space Grotesk';font-size:13px;color:var(--muted)}.rank-row .rank-avatar{font-size:17px;background:#e7eadf;width:33px;height:33px;border-radius:50%;display:flex;align-items:center;justify-content:center}.rank-row.me .rank-avatar{background:var(--lemon)}.rank-row .rank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.rank-row small{display:inline;font-size:9px;font-weight:500;margin-left:3px;color:var(--muted)}.rank-row strong{font-family:'Space Grotesk';font-size:16px;white-space:nowrap}.rank-message{margin-top:18px;border:1px dashed #b1b6a7;border-radius:8px;padding:13px;font-size:13px;line-height:1.6;text-align:center}.empty-rank{padding:25px 12px;text-align:center;font-size:14px;line-height:1.7;color:var(--muted)}.note-card{border-top:2px solid var(--ink);margin-top:38px;padding-top:23px}.note-card h3{font-size:26px;letter-spacing:-.6px;margin:12px 0}.note-card p{font-size:14px;line-height:1.7;color:var(--muted)}.feed-mini{display:flex;justify-content:space-around;padding-top:20px}.feed-mini span{font-size:27px;text-align:center}.feed-mini small{font-size:10px;margin-top:5px;font-weight:700;color:var(--muted)}.challenge-outcome{padding:12px;background:var(--lemon);border-radius:8px;font-size:14px;font-weight:800;margin:15px 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:100;background:var(--ink);color:white;font-size:14px;line-height:1.5;max-width:calc(100% - 32px);width:max-content;padding:13px 19px;border-radius:10px;box-shadow:0 4px 20px #0002;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1.5px solid var(--ink);padding:0;border-radius:19px;width:calc(100% - 34px);max-width:470px;max-height:90dvh;background:var(--paper);box-shadow:0 15px 80px #14200e33;color:var(--ink)}dialog::backdrop{background:#1f261b77;backdrop-filter:blur(3px)}.modal-shell{padding:35px 27px 27px;position:relative}.modal-close{position:absolute;right:12px;top:12px;width:33px;min-width:33px;height:33px;background:var(--paper);z-index:1}.modal-shell h2{font-size:30px;line-height:1.1;letter-spacing:-1.1px;margin:11px 0 15px;padding-right:17px}.modal-shell p{font-size:14px;line-height:1.7;color:var(--muted);margin:12px 0}.modal-shell .button{font-size:14px;min-height:53px;margin-top:16px}.modal-shell .tiny{font-size:11px}.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:23px 0}.feed-item{background:var(--white);border:1px solid var(--line);padding:16px 7px 12px;border-radius:10px;text-align:center}.feed-item>span{font-size:29px}.feed-item strong{display:block;margin:7px 0;font-size:13px}.feed-item small{font-size:11px;color:var(--muted)}.feed-item button{background:var(--lemon);border:1px solid #bbb858;border-radius:6px;padding:7px 10px;font-size:12px;font-weight:700;width:100%;margin-top:13px}.energy-meter{height:9px;background:#dfe4d4;border-radius:8px;overflow:hidden;margin:13px 0}.energy-meter span{display:block;height:100%;background:var(--blue)}.modal-links{display:flex;justify-content:space-between;gap:12px;margin-top:15px}.modal-field{display:block;font-size:11px;font-weight:700;letter-spacing:.7px;margin-top:18px}.modal-field input,.share-url{width:100%;border:1px solid #c8cdbf;background:var(--white);border-radius:8px;font-size:15px;padding:12px;margin-top:8px}.share-preview{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--white);margin:15px 0;font-size:16px;line-height:1.6}.share-preview strong{color:var(--blue)}.story-preview{width:100%;max-height:50dvh;object-fit:contain;display:block;border-radius:10px;background:#eee}.story-link{display:block;text-align:center;color:var(--blue);padding:13px;font-size:14px}.help-list{padding-left:23px;margin:22px 0}.help-list li{font-size:14px;line-height:1.6;margin-bottom:12px}.disclosure{border-top:1px solid var(--line);padding-top:15px;margin-top:15px;font-size:12px!important}.keyboard-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}.keyboard-controls button{padding:12px;border:1px solid var(--line);border-radius:6px;background:var(--white)}.noscript{position:fixed;inset:0;background:var(--paper);z-index:100;padding:30px;display:grid;place-content:center;font-size:20px}.confetti{position:fixed;pointer-events:none;inset:0;z-index:20;overflow:hidden}.confetti i{position:absolute;left:var(--x);top:-20px;width:8px;height:14px;background:var(--c);animation:fall var(--d) ease-in forwards;animation-delay:var(--delay)}body.is-playing .site-footer{display:none}body.is-playing .site-header{min-height:78px;padding-top:12px;padding-bottom:12px}body.is-playing .screen{padding-bottom:25px}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes bob{0%,100%{transform:translateY(1px) rotate(-2deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes fall{to{transform:translateY(105vh) rotate(650deg)}}@media(min-width:1300px){.screen{padding-top:40px}.drawing-layout{gap:90px}.canvas-wrap{aspect-ratio:1.75}.draw-aside{padding-top:31px}}@media(max-width:850px){.site-header{padding:19px 25px;min-height:88px}.drawing-layout{gap:35px;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr)}h1{font-size:39px;letter-spacing:-2px}.pencil-stamp{font-size:45px;padding-right:0}.rule-card h2{font-size:28px}.game-layout{gap:40px}.game-aside h2{font-size:43px}.result-layout{gap:28px}.result-card{padding:25px 21px}.result-card h1{font-size:36px}.result-height{font-size:70px}.result-rank .rank-tab{font-size:10px;padding:12px 6px}}@media(max-width:680px){.site-header{min-height:78px;padding:16px 19px}.brand-mark{width:38px;height:39px;font-size:16px;border-radius:7px}.brand-mark span{font-size:11px}.brand-name{font-size:13px}.brand{gap:10px}.header-actions{gap:8px}.header-actions .icon-button{width:35px;min-width:35px;height:35px}.header-actions .icon-button svg{width:19px;height:19px}.energy-pill{min-height:36px;padding:5px 10px;gap:5px;font-size:14px}.energy-pill>span:first-child{font-size:20px}.runs-label{font-size:9px}.screen{padding:23px 20px 33px}.step-line{font-size:10px;gap:9px;margin-bottom:26px;max-width:none}.step-line b{font-size:9px;width:20px;height:20px;margin-right:4px}.step-line i{flex:1;width:auto;max-width:35px}.drawing-layout,.game-layout,.result-layout{display:block}.draw-aside{display:none}.section-heading .eyebrow{font-size:9px;letter-spacing:1px}h1{font-size:37px;letter-spacing:-2px;margin-top:9px}.pencil-stamp{font-size:48px;margin-right:6px}.intro{font-size:13px;margin:13px 0 20px}.board-top{padding:11px 13px;font-size:8px}.canvas-wrap{aspect-ratio:1.42}.canvas-hint span{font-size:29px}.canvas-hint small{font-size:11px}.drawing-toolbar{min-height:45px;padding:6px 12px}.drawing-toolbar>span{font-size:7px;letter-spacing:.4px;max-width:135px}.drawing-toolbar .text-button{font-size:12px}.drawing-toolbar>div{gap:13px}.name-row{margin:22px 0 17px;gap:12px}.name-row label{font-size:9px;max-width:80px;line-height:1.6}.name-field{width:69%}.name-field input{padding:10px 12px;font-size:16px}.name-field button{font-size:20px;padding:7px 12px}.button{font-size:13px;min-height:57px;padding:12px 15px}.button>span{font-size:23px}.under-button{font-size:9px;align-items:flex-start;gap:10px;margin-top:14px}.under-button .text-button{padding:0;font-size:9px;white-space:nowrap}.site-footer{padding:19px 20px;gap:10px;flex-wrap:wrap;font-size:8px}.site-footer b{margin:0 4px}.site-footer .text-button{font-size:10px}.desktop-note{display:none}.ready-screen{max-width:500px}.horse-passport{padding:26px 23px;border-radius:15px}.horse-passport h1{font-size:32px;letter-spacing:-1.5px}.horse-passport>.eyebrow{font-size:9px}.ready-horse-frame{height:185px}.passport-stats small,.result-stats small{font-size:8px;letter-spacing:.4px}.passport-stats b,.result-stats strong{font-size:20px}.rhythm-guide{margin:20px 0}.rhythm-guide>strong{font-size:20px;letter-spacing:0}.rhythm-guide p{font-size:13px}.ready-secondary .text-button{font-size:12px}.game-screen{max-width:470px;padding:15px 16px 24px}.arena-head{padding:0 2px 12px}.arena-head .eyebrow{font-size:9px}.arena-head h2{font-size:22px}.game-head-right .icon-button{height:35px;min-width:35px;font-size:18px}.game-head-right>span{font-size:10px}.arena-wrap{aspect-ratio:1.05;border-radius:13px}.height-display{top:18px;left:19px}.height-display strong{font-size:54px}.height-display>span{font-size:8px}.height-display small{font-size:21px}.arena-feedback{font-size:29px;top:30%}.arena-feedback small{font-size:12px}.stride-panel{margin:16px 0 11px;gap:10px}.stride-panel>div:first-child{min-width:110px}.stride-panel .eyebrow{font-size:8px}.stride-panel strong{font-size:40px}.stride-dots{gap:7px}.stride-dots i{width:11px;height:11px}.count-hint{font-size:8px}.jump-button{font-size:29px;min-height:74px;padding:13px 24px}.game-footer{font-size:8px;margin-top:17px;letter-spacing:.5px}.game-aside{display:none}.result-screen{max-width:500px}.result-card{padding:23px 22px}.result-card h1{font-size:39px}.result-reason{font-size:13px}.result-doodle{height:110px}.result-height{font-size:76px;margin-bottom:18px}.result-rank{margin-top:36px}.result-rank .rank-tab{font-size:11px;padding:12px 10px;flex:1}.result-links .text-button{font-size:12px}.result-card>.tiny{font-size:9px}.note-card{margin-top:28px}.challenge-banner{padding:13px;font-size:13px;gap:10px;align-items:flex-start;flex-direction:column}.challenge-banner .button{width:100%}.modal-shell{padding:34px 21px 23px}.modal-shell h2{font-size:29px}.pause-overlay h2{font-size:33px}}@media(max-width:360px){.screen{padding-left:14px;padding-right:14px}.site-header{padding-left:14px;padding-right:14px}.runs-label{display:none}h1{font-size:33px}.create-button{font-size:12px}.pencil-stamp{font-size:39px}.stride-dots{gap:5px}.count-hint{display:none}}@media(max-height:760px) and (max-width:680px){body.is-playing .site-header{min-height:63px;padding-top:10px;padding-bottom:10px}.game-screen{padding-top:10px}.arena-wrap{max-height:45dvh;aspect-ratio:1.15}.arena-head{padding-bottom:9px}.stride-panel{margin:11px 0 9px}.jump-button{min-height:63px}.game-footer{margin-top:13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Keep compact labels readable on phones; inputs stay at 16px to avoid focus zoom. */
.board-top,.drawing-toolbar>span,.name-row label,.under-button,.under-button .text-button,.site-footer,.site-footer .text-button,.ticket>.eyebrow,.ticket-note,.rule-foot,.level-tag,.passport-stats small,.result-stats small,.tiny,.result-card>.tiny,.arena-head .eyebrow,.height-display>span,.game-head-right>span,.stride-panel .eyebrow,.count-hint,.game-footer,.rank-notice,.rank-row small,.feed-mini small,.modal-shell .tiny,.feed-item small,.modal-field,.game-aside .game-fair-note,.result-card>.eyebrow{font-size:12px}
.drawing-toolbar>span{font-size:12px;letter-spacing:0;max-width:55%}.intro,.rule-card p,.modal-shell p,.game-aside>p,.note-card p{font-size:16px}.modal-field input,.share-url{font-size:16px}.game-footer{gap:15px;line-height:1.5}.board-top{gap:12px;letter-spacing:.3px}.site-footer{flex-wrap:wrap;line-height:1.6}.rank-tabs{gap:0}.rank-tab{font-size:12px}.under-button{line-height:1.5}.canvas-hint small{font-size:14px}.step-line{font-size:12px}.step-line b{font-size:12px}
@media(max-width:680px){.board-top,.drawing-toolbar>span{font-size:12px}.board-top{padding:10px}.drawing-toolbar>span{max-width:48%}.name-row label{max-width:110px}.under-button{flex-wrap:wrap}.game-head-right>span{font-size:12px;letter-spacing:0}.game-footer{font-size:12px;letter-spacing:0}.count-hint{display:none}.step-line{gap:7px;letter-spacing:.5px}.step-line b{margin-right:4px}.step-line i{max-width:22px}.passport-stats small,.result-stats small{font-size:12px;line-height:1.4;min-height:32px}.result-rank .rank-tab{font-size:12px;padding:12px 7px}.rhythm-guide p,.result-reason,.ready-secondary .text-button,.result-links .text-button{font-size:14px}.create-button{font-size:14px}.site-footer{font-size:12px}.site-footer .text-button{font-size:12px}.result-card>.tiny{font-size:12px}.arena-head .eyebrow{font-size:12px}.game-screen .eyebrow{letter-spacing:.3px}.stride-panel>div:first-child{min-width:130px}.stride-panel .eyebrow{font-size:12px}.ready-horse-frame{height:175px}.ready-screen .step-line{gap:7px}.name-field{flex:1}.name-row{gap:10px}.name-row label{width:100px;flex-shrink:0}}

.publish-panel{margin:22px 0;padding:20px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);text-align:left}.publish-panel h3{font-size:22px;margin:10px 0}.publish-panel p{font-size:14px;line-height:1.6;margin:9px 0;color:var(--muted)}.publish-panel .button{margin:14px 0;font-size:13px}.live-rank-list{font-size:14px;line-height:1.5;padding-top:9px}.live-rank-row{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);cursor:pointer;gap:10px}.live-rank-row:hover{background:#eef0ff}.horse-thumbnail{width:66px;height:58px;object-fit:contain;background:white;border:1px solid var(--line);border-radius:8px;padding:5px}.rank-row .rank-location{display:block;margin:6px 0 0;font-size:12px;white-space:normal;font-weight:400}.play-badge{display:block;font-size:11px;font-weight:700;color:var(--blue);margin-top:7px}.live-rank-row .rank-name{white-space:normal;overflow-wrap:anywhere}.replay-portrait{display:block;max-width:180px;height:95px;object-fit:contain;margin:10px auto}.replay-video,.replay-canvas{width:100%;max-height:53dvh;aspect-ratio:780/800;object-fit:contain;border-radius:12px;background:#e9eedf}.replay-controls{display:grid;gap:12px}.replay-controls input{width:100%;accent-color:var(--blue)}.replay-modal .tiny{font-size:12px}.replay-modal .modal-links{flex-wrap:wrap}.replay-modal h2{font-size:28px}.live-rank-list .empty-rank{font-size:14px}.rank-position{flex-shrink:0}.live-rank-row .rank-avatar{display:none}
/* The comic equestrian club: shared surfaces on every screen. */
:root{--paper:#fff8df;--white:#fffcef;--ink:#171b29;--blue:#124ae8;--lemon:#ffe454;--line:#bca678;--muted:#555448;--radius:18px;background:#8ad2ed}
body{background:linear-gradient(#bde9ff22,#e6ecb966),url('/art/arena.webp') center top/cover fixed;min-height:100dvh}
.site-header{max-width:1220px;border:0;padding:24px 30px;gap:20px}.brand{background:linear-gradient(174deg,#f4cb87,#d99b51);border:3px solid var(--ink);box-shadow:4px 5px 0 #171b29;transform:rotate(-3deg);padding:12px 18px;border-radius:5px}.brand-mark{width:62px;height:55px;border:2px solid #171b29;font-size:29px;background:#1aa7fa;color:#ffeb55;text-shadow:2px 2px #171b29}.brand-mark span{font-size:22px}.brand-name{font-size:19px}.icon-button{border:2px solid var(--ink);background:#fff9e9;box-shadow:2px 3px 0 var(--ink);min-width:45px;height:45px}.energy-pill{background:#ffe454;border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);min-height:48px;font-size:18px}.account-button{background:#fff9e6;border:2px solid #171b29;border-radius:25px;padding:12px 17px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;font-size:13px;box-shadow:2px 3px #171b29}
.screen{max-width:1190px;padding:30px 34px 50px}.step-line{background:#fff8df;border:2px solid var(--ink);box-shadow:3px 4px var(--ink);padding:12px 18px;border-radius:10px;max-width:445px;gap:12px;margin-bottom:28px;color:#605e53;font-weight:800;position:relative;z-index:2}.step-line i{flex:1;background:#97815f}.step-line b{border:2px solid #a79a7d}.drawing-layout{gap:38px;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr)}.drawing-main{position:relative;min-width:0}.section-heading{position:relative;z-index:2}.section-heading .eyebrow{color:#172e64;text-shadow:0 1px #fff;font-weight:800}.section-heading h1{font-size:clamp(34px,4.7vw,62px);font-weight:1000;letter-spacing:-2.8px;text-shadow:2px 3px #fff5cf;margin-top:9px}.pencil-stamp{color:#ffcc25;text-shadow:2px 2px #171b29}.intro{display:inline-block;background:#fff2a8;border:2px solid var(--ink);border-radius:8px 15px 9px 18px;transform:rotate(-2deg);padding:9px 16px;color:var(--ink);font-weight:700;position:relative;z-index:2;box-shadow:2px 3px #9f692b;margin:18px 0 24px}
.drawing-board{position:relative;border:10px solid #b77c3c;outline:3px solid #171b29;box-shadow:inset 0 0 0 2px #51371d,6px 9px 0 #171b2980;border-radius:9px;background:#fffbed;z-index:2}.drawing-board:before{content:'';height:15px;width:64px;border:3px solid var(--ink);background:#9ca4ad;box-shadow:inset 0 0 0 4px #687280;position:absolute;top:-8px;left:calc(50% - 32px);border-radius:3px;z-index:3}.board-top{color:#333642;padding-top:19px;letter-spacing:.3px;border-color:#dcd3b9}.canvas-wrap{background-color:#fffbed;background-image:radial-gradient(#d2c6a5 1px,transparent 1px);aspect-ratio:1000/750}.canvas-hint{color:#969083}.canvas-hint span{font-size:38px}.drawing-toolbar{background:#fffae9;border-color:#dcd3b9}.drawing-toolbar>span{color:#49483e}.text-button{color:inherit;font-weight:650}.name-row{gap:15px}.name-row label{background:#e9b971;border:2px solid #26212a;border-radius:5px;padding:12px;max-width:150px;box-shadow:2px 3px #60472b;transform:rotate(-3deg);font-size:13px}.name-field{border:2px solid var(--ink);border-radius:15px;box-shadow:3px 4px var(--ink);background:#fffbee}.name-field input{font-size:23px}.button{border:3px solid var(--ink);border-radius:18px;font-family:'DM Sans',Arial,sans-serif;font-weight:1000;color:var(--ink);box-shadow:3px 5px var(--ink)}.primary{background:linear-gradient(#fff16e,#ffdf37);border-color:var(--ink);color:var(--ink);box-shadow:3px 5px var(--ink)}.primary:hover,.button:hover{box-shadow:4px 7px var(--ink)}.secondary{background:#eff7ff}.create-button{font-size:clamp(16px,2vw,23px);min-height:72px;border-radius:36px}.under-button{color:#232c27;background:#fff7dcce;padding:6px 10px;border-radius:7px;font-size:12px}.draw-aside{padding-top:0;position:relative}.club-mascot{width:105%;max-height:375px;object-fit:contain;object-position:bottom;display:block;margin:-55px -2% -18px;position:relative;z-index:1;filter:drop-shadow(4px 7px 1px #573d2340)}.rule-card{background:#fff8e5;border:3px solid var(--ink);border-radius:17px;padding:24px;box-shadow:5px 6px var(--ink);position:relative;z-index:2}.rule-card h2{font-size:30px;margin:13px 0 20px}.rule-card li{margin-bottom:20px}.rule-card p{color:#57584f}.ticket{border:3px solid var(--ink);box-shadow:4px 5px var(--ink);background:#ffe66e;transform:rotate(2deg)}
.horse-passport,.result-card,.result-rank,.game-aside,.note-card{background:#fff9e5;border:3px solid var(--ink);box-shadow:5px 7px var(--ink);border-radius:20px}.horse-passport{padding:30px}.ready-horse-frame{background:#fffbee;background-image:radial-gradient(#dacdaf 1px,transparent 1px);background-size:19px 19px;border:2px dashed #bea570}.level-tag{background:#ffe454;border:2px solid var(--ink);font-weight:800}.rhythm-guide{background:#fff0ab;border:2px solid var(--ink);border-radius:10px}.passport-stats,.result-stats{border-color:#d5be89}.result-card{padding:30px}.result-rank{padding:24px;align-self:start}.note-card{margin-top:28px;background:#fff0b4;box-shadow:3px 4px var(--ink)}.result-height{color:#154bea;text-shadow:3px 3px #ddd3ac}.result-badge{border:2px solid var(--ink);background:#ffea5c}.result-doodle{background:#fffce7;border:2px dashed #c8b083}.result-links{gap:15px;flex-wrap:wrap}
.arena-head{background:#fff6d5;border:3px solid var(--ink);border-bottom:0;border-radius:18px 18px 0 0;padding:16px 20px}.arena-wrap{border:3px solid var(--ink);border-radius:0;box-shadow:4px 5px var(--ink)}.height-display{color:#151c31;text-shadow:2px 2px #fffbe6}.height-display strong{color:#1645d8}.stride-panel{background:#fff5d5;border:3px solid var(--ink);border-radius:0 0 18px 18px;margin-top:0;padding:16px 22px;box-shadow:4px 5px var(--ink)}.jump-button{background:#ffdd3c;border:3px solid var(--ink);border-radius:30px;margin-top:17px;box-shadow:4px 6px var(--ink);font-size:30px}.game-footer{background:#fff8e9e0;border-radius:10px;padding:10px 14px}.game-aside{padding:28px;align-self:start;margin-top:80px}.pause-overlay{background:#fff8e8f0}.arena-feedback{color:#123fc1;text-shadow:2px 2px #fff9d2}.game-fair-note{color:#5a5141}
.site-footer{background:#fff4d3e8;border-top:2px solid #171b29;padding:18px 30px;margin-top:22px;color:#242638;gap:20px}.modal-shell{background:#fff8e5;border:3px solid var(--ink);box-shadow:6px 8px var(--ink);border-radius:20px;padding:34px}.modal-shell h2{font-weight:1000;letter-spacing:-1px}dialog{background:transparent;padding:8px;border:0;max-width:min(620px,96vw);max-height:92dvh}dialog::backdrop{background:#172542a8;backdrop-filter:blur(5px)}.modal-close{background:#ffdd50}.modal-field{display:grid;gap:8px;font-size:12px;font-weight:850;letter-spacing:.5px;margin:18px 0}.modal-field input,.modal-field select,.share-url{width:100%;min-width:0;padding:13px;border:2px solid #242532;border-radius:10px;background:#fffef7;font-size:16px}.account-passport{background:#fff0b1;border:2px solid var(--ink);border-radius:12px;padding:20px;margin:20px 0;overflow-wrap:anywhere}.account-passport span{display:block;font-size:11px;letter-spacing:1px;margin:8px 0}.account-passport strong{font-size:30px}.auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:15px 0}.form-error{color:#a21c22;font-weight:700;min-height:22px;margin-bottom:12px}.recovery-key{font-family:monospace;font-size:12px!important}.publish-panel,.reward-panel{border:2px solid var(--ink);border-radius:14px;background:#e7f5ff;padding:18px;margin:22px 0;box-shadow:3px 4px #171b2929;text-align:left}.reward-panel{background:#fff0ac}.reward-panel h3,.publish-panel h3{font-size:19px;margin:8px 0}.reward-panel p,.publish-panel p{font-size:14px;line-height:1.55;margin:10px 0}.reward-panel .button,.publish-panel .button{font-size:14px;min-height:50px;margin:13px 0}.rank-rider{display:block!important;color:#1c48bb!important;font-size:12px!important;font-weight:750}.rank-tabs{gap:3px}.rank-tab{font-size:11px!important;padding:10px 4px!important}.live-rank-row{background:#fffcee;border:1px solid #d5c197;border-radius:12px;margin:7px 0;padding:12px 8px}.live-rank-row.me{background:#fff0ab;border:2px solid var(--ink)}.horse-thumbnail{border:2px solid #242532!important;background:#fffdf3}.rank-name{overflow-wrap:anywhere}.rank-notice{line-height:1.5}.toast{background:#172e66;border:2px solid #fff1b7;box-shadow:3px 4px #172238;color:white}.challenge-banner{background:#fff2a8;border:3px solid var(--ink)}.empty-rank{background:#fff4d4}.feed-item,.share-preview{background:#fff1b3;border:2px solid var(--ink)}.feed-item button{border:2px solid #171b29;background:#ffdf43}.tiny{line-height:1.55;color:#565246}
@media(min-width:1300px){.screen{padding-top:32px}.drawing-layout{grid-template-columns:minmax(0,700px) minmax(260px,1fr)}.club-mascot{max-height:400px}.draw-aside{padding-top:0}}
@media(max-width:850px){.site-header{padding:18px 23px}.drawing-layout{grid-template-columns:minmax(0,1.65fr) minmax(210px,1fr);gap:24px}.rule-card{padding:18px}.rule-card h2{font-size:25px}.club-mascot{margin-top:-15px;max-height:310px}.section-heading h1{font-size:39px}.pencil-stamp{display:none}.screen{padding:25px 24px 40px}.game-aside{margin-top:0}.header-actions{gap:9px}.brand{padding:10px}.brand-name{font-size:16px}.brand-mark{width:48px;height:46px;font-size:25px}.account-button{max-width:115px;padding:10px}}
@media(max-width:650px){body{background-position:center top;background-size:auto 100dvh}.site-header{padding:15px 14px;gap:12px;flex-wrap:wrap;min-height:106px}.brand{padding:8px 10px;gap:9px}.brand-name{font-size:14px}.brand-mark{height:43px;width:47px;font-size:26px}.header-actions{gap:8px;margin-left:auto}.account-button{max-width:100px;font-size:11px;padding:9px;min-height:39px}.header-actions .icon-button{min-width:38px;width:38px;height:38px}.energy-pill{min-height:40px;padding:6px 10px;gap:5px;font-size:15px}.runs-label{font-size:10px}.screen{padding:15px 16px 35px}.step-line{font-size:11px;margin-bottom:21px;padding:10px 12px;max-width:100%;gap:7px}.step-line b{width:24px;height:24px;margin-right:5px}.drawing-layout{display:block}.draw-aside{display:block;padding:0;position:static}.draw-aside .rule-card,.draw-aside .ticket{display:none}.draw-screen{position:relative}.club-mascot{position:absolute;width:138px;height:165px;right:0;top:88px;margin:0;z-index:1;object-fit:contain;opacity:1}.section-heading h1{font-size:clamp(30px,7.2vw,46px);letter-spacing:-1.8px;max-width:85%;position:relative;z-index:2}.section-heading .eyebrow{font-size:9px;letter-spacing:.7px}.intro{font-size:12px;padding:8px 10px;margin:16px 0 19px;max-width:92%}.drawing-board{border-width:8px;outline-width:2px}.board-top{font-size:9px;padding:16px 10px 11px}.canvas-wrap{aspect-ratio:1.16}.canvas-hint span{font-size:31px}.canvas-hint small{font-size:11px}.drawing-toolbar{padding:8px 9px}.drawing-toolbar>span{font-size:9px;max-width:46%}.drawing-toolbar>div{gap:14px}.name-row{margin:22px 0 17px}.name-row label{font-size:11px;padding:9px;max-width:107px}.name-field{flex:1}.name-field input{padding:11px;font-size:20px}.create-button{min-height:66px;font-size:16px;padding:14px;gap:8px}.under-button{font-size:10px;gap:7px;align-items:flex-start}.under-button .text-button{font-size:10px;white-space:nowrap;padding-top:0}.horse-passport,.result-card{padding:22px 17px}.result-rank{padding:18px 13px;margin-top:25px}.game-screen{padding:10px 12px 20px}.game-layout{gap:20px}.arena-head{padding:12px 15px}.arena-head h2{font-size:22px}.stride-panel{padding:12px 15px}.jump-button{min-height:65px;font-size:27px}.game-aside{display:none}.site-footer{font-size:10px;padding:15px;flex-wrap:wrap;gap:10px}.site-footer .desktop-note{display:none}.modal-shell{padding:29px 20px 24px}.modal-shell h2{font-size:28px}.modal-shell .button{font-size:14px;padding:14px 10px}.rank-head h2{font-size:23px}.rank-head{flex-wrap:wrap;gap:12px}.live-rank-row{grid-template-columns:22px 46px minmax(0,1fr) auto!important;gap:8px!important}.horse-thumbnail{width:46px!important;height:46px!important}.rank-name{font-size:14px}.live-rank-row>strong{font-size:22px!important}.publish-panel,.reward-panel{padding:15px}.result-card h1{font-size:46px}}
@media(max-width:390px){.header-actions{gap:6px}.brand{gap:7px}.brand-name{font-size:12px}.brand-mark{width:40px}.header-actions .icon-button{width:34px;min-width:34px;height:34px}.account-button{font-size:10px;max-width:80px;padding:8px}.energy-pill{padding:6px 8px}.runs-label{display:none}.club-mascot{width:115px;height:148px;top:90px}.section-heading h1{font-size:29px}.intro{font-size:11px}.canvas-hint small{font-size:10px}}
@media(max-height:600px) and (orientation:landscape){.game-column{max-width:460px;margin:auto}.arena-wrap{max-height:48dvh;overflow:hidden}.arena-wrap canvas{height:48dvh;width:100%;object-fit:fill}.height-display strong{font-size:35px}.stride-panel{padding:5px 15px}.stride-panel strong{font-size:28px}.jump-button{min-height:48px;padding:6px}}
/* SillyHoof wordmark and the one-more-height decision. */
.brand{gap:12px;padding:12px 17px}.brand-mark{font-size:29px;letter-spacing:-3px;width:59px;color:#ffe454;background:#164be6;transform:rotate(-7deg)}.brand-name{font-size:31px;line-height:1.05;letter-spacing:-1.5px;color:#164be6;text-shadow:1px 2px #fff2ac;font-weight:1000;white-space:nowrap}.brand-name>span{color:#bc392d}.brand-name small{display:block;font-size:9px;letter-spacing:.7px;color:#262335;margin-top:5px;text-shadow:none}
.failed-height-offer{text-align:center}.failed-height-offer h2{font-size:54px;line-height:1.05;color:#174be6;margin:14px 0}.failed-height-offer h2 span{font-size:27px;color:#262335}.failed-height-offer p{margin:12px 0;font-size:15px;line-height:1.5}.failed-height-offer .button{margin-top:15px;min-height:55px;font-size:15px}.kept-height{background:#ffefab;border:2px solid #242532;border-radius:12px;padding:12px;margin:15px 0}.kept-height>span{font-size:12px;font-weight:800;display:block}.kept-height strong{font-size:35px}.failure-city-rank{border:2px dashed #124ae8;border-radius:12px;padding:14px;background:#edf5ff}.failure-city-rank strong{display:block;font-size:31px;color:#164be6}.failure-city-rank .tiny{font-size:12px;margin:5px 0}.publication-summary{background:#fff0ad;border:3px solid #171b29;box-shadow:3px 5px #171b29;border-radius:15px;padding:22px;margin:22px 0;text-align:center}.official-rank{display:block;font-size:64px;font-weight:1000;color:#174be6;line-height:1.2}.publication-summary p{margin:10px 0}.publication-summary .button{margin-top:17px}.failed-height-offer .tiny{font-size:12px}.share-retry-note{color:#8a301c}.form-error:empty{min-height:0}
@media(max-width:650px){.brand{padding:9px 11px;gap:8px}.brand-name{font-size:25px}.brand-name small{font-size:7px;letter-spacing:.25px}.brand-mark{width:41px;height:43px;font-size:24px;letter-spacing:-2px}.failed-height-offer h2{font-size:43px}.failed-height-offer .button{font-size:14px;padding:12px 9px}.failed-height-offer p{font-size:14px}.modal-shell:has(.failed-height-offer){padding:28px 18px 20px}.failure-city-rank{padding:10px}.failed-height-offer .tiny{font-size:12px}}
@media(max-width:390px){.brand-name{font-size:22px}.brand-name small{font-size:6.5px}.brand-mark{display:none}.brand{padding:10px 12px}}

/* Supplied SillyHoof header artwork. */
.site-header .brand{display:block;width:340px;max-width:100%;flex:0 1 auto;padding:0;gap:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none}
.brand-logo{display:block;width:100%;height:auto;border-radius:8px}
@media(max-width:900px){.site-header .brand{width:280px}}
@media(max-width:650px){.site-header .brand{width:min(270px,72vw)}}

/* Compact toolbar: the logo and all controls share one row on phones. */
.site-header{gap:8px;padding:12px 18px;min-height:80px;flex-wrap:nowrap}
.site-header .brand{width:220px;flex:0 1 220px;min-width:80px}
.brand-logo{border-radius:0;max-height:86px;object-fit:contain;object-position:left center}
.header-actions{flex:0 0 auto;gap:7px;margin-left:auto}
.header-actions .icon-button,.language-select{width:40px;height:40px;min-width:40px;padding:5px;border:2px solid var(--ink,#191c29);border-radius:50%;font-weight:800;background:#fff7da;color:#171c2b}
.language-select{border-radius:12px;cursor:pointer;font-size:14px;width:47px}
.header-actions .account-button{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;padding:9px 10px;min-height:40px}
.header-actions .energy-pill{padding:5px 10px;gap:4px;height:40px;font-size:16px}
.stable-screen{max-width:1000px;margin:auto;padding:12px 18px 40px}
.stable-panel{background:#fff9e5;border:3px solid #191c29;border-radius:24px;box-shadow:5px 7px 0 #191c29;padding:24px}
.stable-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stable-heading h1{font-size:clamp(27px,5vw,40px);margin:6px 0}
.stable-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.stall{min-width:0;padding:14px;border:2px solid #242a39;border-radius:16px;background:#ffefaa;display:flex;flex-direction:column;gap:9px}
.stall.active{outline:3px solid #1c4fe8;outline-offset:3px}
.stall img{width:100%;height:135px;object-fit:contain;background:#fffdf2;border-radius:10px}
.stall h3{margin:0;overflow-wrap:anywhere}.stall .button{font-size:15px;padding:11px 8px;min-height:44px;margin:0}
.stall.locked{background:#eff4fe;justify-content:center;text-align:center;min-height:245px;border-style:dashed}
.stall p{font-size:14px;margin:4px 0}.stall .stall-symbol{font-size:34px}
.stable-notice{padding:14px;border-radius:12px;background:#eaf1ff;font-size:15px;line-height:1.5}
#result-city-placement{margin:18px 0;text-align:center}#result-city-placement strong{display:block;color:#1849e6;font-size:40px}
:lang(zh){font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;letter-spacing:normal}
:lang(zh-Hant){font-family:"PingFang TC","Microsoft JhengHei","Noto Sans CJK TC",sans-serif}
:lang(zh) .eyebrow,:lang(zh) .button,:lang(zh) .step-line{letter-spacing:.02em}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{letter-spacing:0;line-height:1.25}
@media(max-width:650px){.site-header{gap:5px;padding:8px;min-height:66px;flex-wrap:nowrap}.site-header .brand{width:130px;flex-basis:130px}.header-actions{gap:4px}.header-actions .icon-button,.language-select{width:32px;height:36px;min-width:32px;padding:4px}.language-select{width:39px}.header-actions .account-button{max-width:55px;font-size:12px;padding:6px;min-height:36px;border-width:2px}.header-actions .energy-pill{height:36px;padding:4px 7px;font-size:15px;border-width:2px;min-width:40px}.header-actions .runs-label{display:none}.stable-panel{padding:16px}.stable-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stall{padding:10px}.stall img{height:115px}.stable-heading{align-items:flex-start}.stable-heading .button{font-size:14px;padding:10px}.brand-logo{max-height:62px}}
@media(max-width:350px){.header-actions{gap:3px}.site-header .brand{min-width:64px}.header-actions .account-button{max-width:45px}}

@media(max-width:350px){.header-actions .icon-button{width:28px;min-width:28px}.header-actions .language-select{width:34px;min-width:34px}.header-actions .account-button{max-width:40px}.header-actions .energy-pill{padding:4px;min-width:34px}}

/* One viewport for playing and results, with secondary pages in accessible dialogs. */
.site-header .brand{width:270px;flex-basis:270px}
.brand-logo{max-height:108px}
body:is([data-screen="game"],[data-screen="result"]){height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body:is([data-screen="game"],[data-screen="result"]) .site-header{width:100%;flex:0 0 auto;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:6px;min-height:68px}
body:is([data-screen="game"],[data-screen="result"]) .site-footer{display:none}
body:is([data-screen="game"],[data-screen="result"]) #main{flex:1;min-height:0;width:100%;overflow:hidden}
body:is([data-screen="game"],[data-screen="result"]) .screen{height:100%;width:100%;padding:8px 14px max(14px,env(safe-area-inset-bottom));animation:none}
#game-screen .game-layout{height:100%;display:block;max-width:660px;margin:0 auto}
#game-screen .game-column{height:100%;max-width:none;display:grid;grid-template-rows:auto minmax(90px,1fr) auto auto auto;gap:0;min-height:0}
#game-screen .game-aside{display:none}
#game-screen .arena-head{padding:7px 14px;min-height:52px}
#game-screen .arena-head h2{font-size:21px;line-height:1.1;margin:2px 0;max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game-screen .arena-wrap{min-height:0;max-height:none;aspect-ratio:auto;background:#bde1f3;box-shadow:none}
#game-screen .arena-wrap>canvas{width:100%;height:100%;object-fit:contain;touch-action:none}
#game-screen .height-display{top:10px;left:12px}
#game-screen .height-display strong{font-size:clamp(32px,5vh,46px);letter-spacing:-2px}
#game-screen .height-display small{font-size:20px}

#game-screen .arena-feedback{top:20%;font-size:24px}
#game-screen .stride-panel{margin:0;padding:7px 14px;gap:10px;box-shadow:none;min-height:58px}
#game-screen .stride-panel>div:first-child{min-width:100px}
#game-screen .stride-panel strong{font-size:29px}
#game-screen .jump-button{min-height:52px;margin:10px 0 0;padding:8px;font-size:26px;touch-action:manipulation;user-select:none;transition:background-color .12s;transform:none}
#game-screen .jump-button:active{transform:none;box-shadow:2px 3px var(--ink)}
#game-screen .game-footer{padding:4px 8px;margin:8px 0 0;line-height:1.2;letter-spacing:0}
#game-screen .pause-overlay{overflow:auto;padding:20px}
#result-screen .result-layout{height:100%;display:block;max-width:580px;margin:auto}
#result-screen .result-card{height:100%;max-height:800px;padding:16px 20px;display:flex;flex-direction:column;gap:9px;overflow:auto;overscroll-behavior:contain;text-align:center}
#result-screen .result-heading{flex:none}
#result-screen .result-badge{display:inline-block;margin:0;padding:3px 10px;font-size:10px;line-height:1.4;transform:rotate(-2deg)}
#result-screen h1{font-size:clamp(23px,3.6vh,34px);margin:6px 0 0;line-height:1.1}
#result-screen .result-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:8px;min-height:80px;flex:1 1 130px;max-height:190px}
#result-screen .result-doodle{height:100%;min-height:75px;max-height:180px;margin:0;border:0;border-radius:12px;background:#fff5ce}
#result-screen .result-doodle img{height:calc(100% - 24px);max-height:148px;width:90%;transform:none}
#result-screen .result-doodle span{position:static;display:block;transform:none;max-width:none;line-height:1;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#result-screen .result-height{font-size:clamp(43px,8vh,68px);letter-spacing:-3px;line-height:1.1;margin:4px 0 0;text-shadow:2px 2px #ddd3ac}
#result-screen .result-height small{font-size:22px;letter-spacing:0}
#result-screen .result-score .eyebrow{font-size:10px;letter-spacing:.3px}
#result-screen .result-metrics{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;align-items:stretch;flex:none}
#result-screen .horse-best,#result-screen #result-city-placement{background:#edf5ff;border:1.5px solid #abc4ed;border-radius:11px;margin:0;padding:7px 4px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:61px}
#result-screen .horse-best{background:#fff1ae;border-color:#dbc882}
#result-screen .result-metrics small{font-size:10px;line-height:1.4;font-weight:750}
#result-screen .result-metrics strong,#result-screen #result-city-placement strong{font-size:25px;line-height:1.1;color:#164be6}
#result-screen .compact-save{font-size:11px;line-height:1.35;min-height:16px;background:none;padding:0;margin:0;border:0;box-shadow:none}
#result-screen .compact-save p{margin:0}
#result-screen .compact-save .text-button{font-size:12px;padding:4px}
#result-screen .button{min-height:48px;margin:0;padding:10px 12px;font-size:16px;flex:none;box-shadow:2px 4px var(--ink)}
#result-screen #share-reward-note{font-size:11px;line-height:1.45;margin:0;flex:none}
#result-screen .result-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px;margin:0;flex:none}
#result-screen .result-links button{min-height:31px;font-size:11px;line-height:1.2;padding:5px 1px;white-space:normal;text-decoration-thickness:1px}
#result-detail-source[hidden]{display:none!important}
.modal-shell .result-stats{grid-template-columns:repeat(2,1fr);padding:12px 0;margin:12px 0}
.modal-shell .feed-explainer{font-weight:800;color:#1748c6;font-size:14px;line-height:1.6}
.modal-shell #feed-play,.modal-shell #feed-challenge{margin-top:12px;min-height:48px}
.reset-success{padding:12px;background:#e4f2d9;border-radius:8px;color:#24491c;line-height:1.55}
.modal-shell:has(.failed-height-offer){padding:22px 18px 16px}
.failed-height-offer h2{font-size:39px;margin:9px 0}
.failed-height-offer h2 span{font-size:23px}
.failed-height-offer p{font-size:13px;margin:8px 0}
.failed-height-offer .kept-height{padding:8px;margin:8px 0}
.failed-height-offer .kept-height strong{font-size:30px}
.failed-height-offer .failure-city-rank{padding:8px}
.failed-height-offer .failure-city-rank strong{font-size:29px}
.failed-height-offer .button{min-height:47px;margin-top:10px;font-size:14px}
.failed-height-offer .tiny{font-size:11px;line-height:1.4}
@media(max-width:650px){
 .site-header .brand{width:171px;flex:0 1 171px;min-width:0}
 .header-actions{gap:2px}
 .header-actions .icon-button,.header-actions .account-button{width:29px;min-width:29px;height:36px;padding:3px}
 .header-actions .account-button{font-size:0;max-width:29px;min-height:36px}
 .header-actions .account-button::before{content:'♙';font-size:22px;line-height:1;color:#183c8f}
 .header-actions .language-select{min-width:36px;width:36px;padding:2px;font-size:13px}
 .header-actions .energy-pill{min-width:38px;padding:4px 5px;gap:3px}
 #result-screen .result-card{padding:12px 14px;gap:8px}
 #game-screen .arena-head .eyebrow{font-size:9px}
 #game-screen .count-hint{font-size:9px}
}
@media(max-width:360px){.site-header .brand{width:145px;flex-basis:145px;min-width:0}.header-actions{gap:2px}.header-actions .icon-button,.header-actions .account-button{width:28px;min-width:28px;max-width:28px}.header-actions .language-select{min-width:33px;width:33px}.header-actions .energy-pill{min-width:33px;padding:4px;font-size:14px}.site-header{gap:3px;padding-left:5px;padding-right:5px}}
@media(max-height:680px){
 body:is([data-screen="game"],[data-screen="result"]) .site-header .brand{max-width:171px}
 body:is([data-screen="game"],[data-screen="result"]) .site-header{min-height:58px;padding-top:3px;padding-bottom:3px}
 #result-screen .result-card{padding:9px 12px;gap:6px}
 #result-screen .result-hero{max-height:108px;min-height:72px;flex-basis:86px}
 #result-screen .result-doodle{min-height:72px}
 #result-screen .result-doodle img{max-height:78px}
 #result-screen h1{font-size:23px;margin-top:4px}
 #result-screen .result-height{font-size:45px}
 #result-screen .result-metrics>div{min-height:51px!important;padding:4px!important}
 #result-screen .result-links button{min-height:27px}
 #result-screen .button{min-height:44px;font-size:14px;padding:8px}
 #game-screen .arena-head{min-height:42px;padding:4px 12px}
 #game-screen .stride-panel{min-height:48px;padding:4px 12px}
 #game-screen .jump-button{min-height:46px;margin-top:7px}
}
@media(max-height:500px) and (min-width:600px){
 #game-screen .game-layout{max-width:1000px}
 #game-screen .game-column{grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:42px minmax(50px,1fr) 54px 24px;gap:6px 12px}
 #game-screen .arena-head{grid-column:1/3;border-bottom:3px solid var(--ink);border-radius:12px}
 #game-screen .arena-wrap{grid-column:1;grid-row:2/5;border-radius:12px}
 #game-screen .stride-panel{grid-column:2;grid-row:2;border-radius:12px;align-self:end}
 #game-screen .jump-button{grid-column:2;grid-row:3;margin:0}
 #game-screen .game-footer{grid-column:2;grid-row:4;justify-content:center;margin:0}
 #game-screen .game-footer span:last-child{display:none}
 #result-screen .result-layout{max-width:900px}
 #result-screen .result-card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto;gap:6px 20px}
 #result-screen .result-heading{grid-column:1;grid-row:1}
 #result-screen .result-hero{grid-column:1;grid-row:2;max-height:140px}
 #result-screen .result-metrics{grid-column:1;grid-row:3/5}
 #result-screen #result-save-slot{grid-column:2;grid-row:1}
 #result-screen #retry-button{grid-column:2;grid-row:2;align-self:start}
 #result-screen #share-result{grid-column:2;grid-row:2;align-self:end}
 #result-screen #share-reward-note{grid-column:2;grid-row:3}
 #result-screen .result-links{grid-column:2;grid-row:4;grid-template-columns:repeat(4,1fr)}
}
/* Country names can be much longer than the old city choices. */
.rank-head{flex-wrap:wrap;gap:10px}.rank-head select{max-width:100%;min-width:0;width:min(100%,240px)}
.region-setting{font-size:13px;margin:8px 0;line-height:1.5}.region-label{display:grid;gap:8px}.region-label select{width:100%;min-width:0;padding:12px;border:2px solid var(--ink,#191b2b);border-radius:12px;background:#fff8e2;color:#191b2b}
@media(max-width:480px){.rank-tabs .rank-tab{font-size:11px;padding-inline:3px}.rank-head h2{font-size:24px}.rank-head select{width:100%}}
.rank-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:visible}.rank-tabs .rank-tab{min-width:0;white-space:normal;overflow-wrap:anywhere}