:root{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:#293225;background:#dcfa49;font-synthesis:none;--ink:#293225;--muted:#617142;--line:#adc953;--lime:#dcfa49}*{box-sizing:border-box}body{margin:0;min-height:100svh}body.racing{background:#dfebc5}button,input,select{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #6679c6;outline-offset:4px}[hidden]{display:none!important}.page{width:calc(100% - 112px);max-width:1280px;margin:auto;position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;pointer-events:none}.page>*{pointer-events:auto}header{height:97px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:22px;letter-spacing:-1px;font-weight:800;text-decoration:none;color:inherit}.header-actions{display:flex;gap:16px}.plain-button{padding:10px 8px;min-height:44px;border:0;background:none;font-size:14px;line-height:1.3}.plain-button:hover:not(:disabled){text-decoration:underline}main{flex:1}.headline{display:flex;justify-content:space-between;align-items:flex-end;margin:47px 0 31px}.eyebrow{font-size:13px;line-height:1.5;margin:0 0 12px;color:var(--muted)}h1{font-size:clamp(42px,5.2vw,72px);line-height:1.06;letter-spacing:-3.4px;margin:0;font-weight:400}h1 strong{font-weight:800}.aside-note{font-size:14px;line-height:1.6;margin:0 4px 5px 20px;color:var(--muted)}.drawing-card{background:#fafbf5;border:1px solid #d0dfa3;border-radius:7px;position:relative;box-shadow:0 4px 0 #aabd4930;overflow:hidden}.canvas-notes{display:flex;justify-content:space-between;position:absolute;top:15px;left:22px;right:22px;font-size:12px;color:#7c866c;pointer-events:none}#drawing{display:block;width:100%;height:clamp(280px,33vw,440px);touch-action:none;cursor:crosshair}.empty-hint{position:absolute;top:44%;width:100%;text-align:center;font-size:20px;color:#bac4a9;pointer-events:none}.empty-hint small{display:block;font-size:14px;margin-top:12px}.drawing-tools{display:flex;align-items:center;justify-content:space-between;padding:0 15px 6px 20px}.colors{display:flex;gap:9px}.color{width:22px;height:22px;border:3px solid #fafbf5;border-radius:50%;background:var(--c);position:relative}.color:after{content:'';position:absolute;inset:-9px}.color.selected{box-shadow:0 0 0 1px #68745a}.drawing-tools .plain-button{font-size:12px;color:#7c866c}.submit-row{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:28px}.name-field{display:flex;flex-direction:column;gap:7px;min-width:210px;width:30%}.name-field span{font-size:12px;color:var(--muted)}.name-field input{font-size:20px;border:0;border-bottom:1px solid #b3c856;padding:3px 0 10px;background:none;border-radius:0;width:100%;outline-offset:4px}.name-field input::placeholder{color:#657342}.dark-button{border:1px solid #3c472f;background:#35402c;color:#f1ffbd;min-height:52px;display:flex;justify-content:space-between;align-items:center;gap:35px;padding:15px 22px;border-radius:4px;font-size:16px;box-shadow:0 3px 0 #65793420}.dark-button:hover:not(:disabled){background:#263322}.dark-button:active:not(:disabled){transform:translateY(1px)}#start{width:260px}.borrow-row{display:flex;justify-content:center;align-items:center;position:relative;margin-top:10px;min-height:45px}.borrow-row button{font-size:13px;color:var(--muted)}#draftStatus{font-size:12px;color:var(--muted);position:absolute;left:0;top:20px}#advanced{margin:10px 0 15px;color:var(--muted);font-size:13px}summary{cursor:pointer;width:fit-content;min-height:36px;padding:9px 0}.advanced-content{padding:15px 18px;background:#eef6b957;border:1px solid #bacd60;border-radius:5px;max-width:620px;line-height:1.7}.advanced-content p{margin:0 0 13px}.advanced-content label{display:flex;align-items:center;gap:18px}.advanced-content select{background:#f7facf;border:1px solid #acbf55;border-radius:4px;padding:9px;min-height:44px}.advanced-content input{accent-color:#35402c;max-width:180px}#legSettings{margin-top:15px}#legSettings p{font-size:12px;margin:9px 0 0}footer{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);padding:27px 0 25px}#raceWorld{position:fixed;inset:0;z-index:0}#raceCanvas{display:block;width:100%;height:100%;pointer-events:none}.racing .page{max-width:none}.racing main{pointer-events:none}.racing main button,.racing main section#resultPanel{pointer-events:auto}.racing footer{pointer-events:none}.racing header{height:85px;border-bottom-color:#bed08e}.race-top{display:flex;align-items:start;justify-content:space-between;margin-top:25px}.race-top .eyebrow{font-size:12px;margin-bottom:6px}#raceName{font-size:26px;letter-spacing:-.8px;margin:0;max-width:60vw;overflow-wrap:anywhere}.race-top #back{font-size:13px;color:#637546;padding-top:0}#rankings{list-style:none;position:absolute;right:0;top:184px;margin:0;padding:0;min-width:155px;max-width:210px;font-size:13px;z-index:2}#rankings li{display:flex;gap:16px;align-items:center;padding:10px 13px;margin-bottom:3px;color:#52623c;background:#f4f7e329;border-radius:2px;overflow:hidden}#rankings li.mine{background:#35402c;color:#ecf9ae}#rankings .rank{font-size:12px;min-width:12px}#rankings .racer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#countdown{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);font-size:clamp(80px,11vw,145px);font-weight:800;letter-spacing:-7px;z-index:2}#raceControls{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);width:300px;text-align:center;z-index:3}.distance-row{display:flex;justify-content:space-between;align-items:center;color:#637447;font-size:12px;height:28px;text-align:left}.distance-row .plain-button{font-size:12px;min-height:28px;padding:4px}.progress-track{height:2px;background:#aeba8d;margin:2px 0 14px}.progress-track i{display:block;width:0;height:100%;background:#35402c}#cheer{width:100%;justify-content:center;gap:20px}#cheerHint{font-size:12px;line-height:1.5;color:#687b49;margin:12px -30px 0}#cheerFeedback{font-size:12px;color:#35402c;display:block;height:18px;padding-top:6px}#resultPanel{position:fixed;right:4.5vw;top:32%;width:290px;padding:24px;background:#dcfa49;border:1px solid #bacb53;border-radius:7px;box-shadow:0 5px 0 #687e3220;z-index:4}#resultPanel .eyebrow{color:#3f4d2f;font-size:12px;margin:0 0 10px}#place{font-weight:800;font-size:85px;line-height:1;letter-spacing:-5px}#resultText{font-size:15px;line-height:1.65;margin:19px 0 14px}#bestTime{font-size:12px;color:#64723d;margin:0 0 15px}#resultPanel .dark-button,#resultPanel .outline-button{width:100%;font-size:14px;min-height:45px;padding:12px}.outline-button{border:1px solid #afc551;background:transparent;border-radius:4px;margin-top:9px}.outline-button:hover{background:#d3ed48}.result-links{display:flex;justify-content:space-between;margin-top:8px}.result-links button{font-size:12px;padding:7px 0}#pauseOverlay{position:fixed;inset:0;z-index:8;background:#e5efcedd;backdrop-filter:blur(7px);display:grid;place-items:center}#pauseOverlay>div{text-align:center}#pauseOverlay .dark-button{margin:20px auto 5px;min-width:210px;justify-content:center}#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);background:#35402c;color:#f1ffbd;padding:13px 20px;border-radius:5px;font-size:14px;z-index:20;opacity:0;pointer-events:none;max-width:90vw;text-align:center}#toast.show{opacity:1}@media(min-width:1600px){.page{max-width:1400px}.headline{margin-top:55px}#drawing{height:450px}}@media(max-width:760px){.page{width:calc(100% - 40px)}header{height:74px}.brand{font-size:19px}.header-actions{gap:7px}.header-actions button{font-size:12px;padding:8px 5px}.headline{margin:32px 0 23px}h1{font-size:46px;letter-spacing:-2px}.eyebrow{font-size:12px;max-width:240px}.aside-note{font-size:12px;max-width:95px;margin-left:10px}#drawing{height:310px}.canvas-notes{font-size:11px;left:14px;right:14px;top:13px}.empty-hint{font-size:17px}.empty-hint small{font-size:12px}.drawing-tools{padding:0 9px 6px 14px}.submit-row{gap:20px;margin-top:23px}.name-field{min-width:0;width:50%}.name-field input{font-size:17px}.name-field span{font-size:11px}#start{width:45%;font-size:14px;gap:8px;padding:14px 12px}.borrow-row{margin-top:12px;justify-content:flex-end}#draftStatus{font-size:11px;top:17px}.borrow-row button{font-size:12px}footer{font-size:10px;line-height:1.5;padding:22px 0}.racing header{height:72px}.race-top{margin-top:20px}#raceName{font-size:23px;max-width:63vw}.race-top #back{font-size:12px}#rankings{top:151px;max-width:125px;min-width:117px;font-size:11px}#rankings li{padding:8px 9px;gap:8px}.racing footer{position:fixed;bottom:0;left:20px;right:20px}#raceControls{width:240px;bottom:65px}#cheerHint{font-size:11px;margin-left:-25px;margin-right:-25px}#countdown{top:41%;font-size:98px}#resultPanel{top:auto;bottom:66px;right:20px;width:220px;padding:17px}#place{font-size:65px}#resultText{font-size:13px;line-height:1.5;margin:10px 0}#bestTime{font-size:11px;margin-bottom:9px}#resultPanel .eyebrow{font-size:11px}#resultPanel .dark-button,#resultPanel .outline-button{min-height:43px;font-size:13px}.result-links button{font-size:11px}.advanced-content{font-size:12px;padding:12px}.advanced-content label{gap:10px}}@media(max-width:390px){h1{font-size:39px}.aside-note{font-size:11px}.headline .eyebrow{font-size:11px}#drawing{height:280px}.page{width:calc(100% - 30px)}.empty-hint{font-size:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* OddHoof: one compact drawing surface, then an unobstructed race. */
.page{max-width:1120px;width:calc(100% - 80px)}
header{height:80px}
.brand{font-size:25px;letter-spacing:-1.1px}
.headline{margin:32px 0 24px}
h1{font-size:clamp(42px,4.6vw,64px);letter-spacing:-2.8px;line-height:1.12}
#drawing{height:clamp(250px,27vw,350px)}
.drawing-tools{padding:2px 14px 8px 14px}
.colors{gap:0}
.color{width:40px;height:44px;border:0;border-radius:0;background:transparent}
.color:after{inset:12px 10px;border-radius:50%;background:var(--c)}
.color.selected{box-shadow:none}
.color.selected:after{outline:1px solid #68745a;outline-offset:3px}
.drawing-tools .plain-button,.name-field span{font-size:14px}
.submit-row{margin-top:20px}
.borrow-row{display:grid;justify-items:center;justify-content:center;gap:0;min-height:50px;margin-top:5px}
#draftStatus{position:static;min-height:14px;font-size:12px}
.borrow-row button{font-size:14px}
#advanced{margin:4px 0;font-size:14px}
footer{padding:20px 0;font-size:12px}
.canvas-notes{font-size:12px}
.dark-button{transition:background .12s ease,transform .12s ease}
#raceWorld{height:100svh;bottom:auto}
.racing .page{height:100svh;min-height:100svh;overflow:hidden}
.racing header{height:80px;flex-shrink:0}
.race-top{margin-top:20px}
#raceName{max-width:60vw;font-size:25px}
#rankings{top:168px;min-width:140px;font-size:14px}
#rankings li{padding:9px 12px;background:transparent}
#raceControls{bottom:max(38px,env(safe-area-inset-bottom));width:280px}
#cheerHint{font-size:12px;margin-top:9px}
#cheerFeedback{min-height:22px;height:auto}
#countdown{top:44%;line-height:1;letter-spacing:-.07em}
#cheer.cheering{animation:cheer-tap .2s ease-out}
#resultPanel{right:40px;top:50%;transform:translateY(-40%);width:280px;padding:22px;border-radius:5px}
.result-links{gap:14px}
.result-links button{font-size:13px}
.racing footer{font-size:12px;padding:16px 0}
#pauseOverlay>div{padding:28px;max-width:calc(100vw - 32px)}
#pauseOverlay h2{font-size:28px}
@keyframes cheer-tap{50%{transform:translateY(2px);background:#52633a}}
@media(min-width:1600px){.page{max-width:1280px}.headline{margin-top:38px}#drawing{height:390px}}
@media(max-width:760px){
 .page{width:calc(100% - 36px)}
 header,.racing header{height:68px}
 .brand{font-size:23px}
 .header-actions button{font-size:12px;min-height:44px}
 .headline{margin:27px 0 21px}
 h1{font-size:clamp(34px,8.7vw,48px);letter-spacing:-1.6px;line-height:1.16}
 .aside-note{font-size:12px;min-width:70px;margin:0 0 3px 10px}
 .eyebrow{font-size:12px;line-height:1.6}
 #drawing{height:clamp(245px,35svh,320px)}
 .canvas-notes{left:13px;right:13px;top:12px;font-size:12px}
 .empty-hint{padding:0 12px;font-size:16px}
 .empty-hint small{font-size:12px;line-height:1.6}
 .drawing-tools{padding:0 5px 4px}
 .drawing-tools .plain-button{font-size:13px;padding:10px 7px}
 .color{width:36px}
 .color:after{inset:13px 9px}
 .submit-row{gap:16px;margin-top:19px;align-items:flex-end}
 .name-field{width:49%}
 .name-field span{font-size:12px;line-height:1.5}
 .name-field input{font-size:17px}
 #start{width:47%;min-height:52px;font-size:14px;padding:12px}
 .borrow-row{justify-content:center;margin-top:8px;min-height:59px}
 .borrow-row button{font-size:13px}
 #draftStatus{font-size:12px;line-height:1.5}
 footer{font-size:12px;gap:12px;flex-wrap:wrap;padding:18px 0}
 .race-top{margin-top:18px}
 #raceName{font-size:22px;max-width:62vw}
 .race-top .eyebrow{font-size:12px;max-width:60vw}
 #rankings{top:151px;min-width:124px;max-width:142px;font-size:12px}
 #rankings li{gap:9px;padding:8px}
 #raceControls{width:240px;bottom:max(22px,env(safe-area-inset-bottom))}
 #cheerHint{font-size:12px;margin-left:-20px;margin-right:-20px}
 .racing footer{display:none}
 #resultPanel{top:auto;bottom:max(18px,env(safe-area-inset-bottom));left:18px;right:18px;width:auto;transform:none;padding:17px 19px}
 #place{font-size:60px;letter-spacing:-3px;float:left;margin-right:18px}
 #resultText{font-size:14px;min-height:60px;margin:8px 0;line-height:1.55}
 #bestTime{clear:both;font-size:12px;margin-bottom:10px}
 #resultPanel .eyebrow{font-size:12px;margin-bottom:9px}
 #resultPanel .dark-button,#resultPanel .outline-button{font-size:14px;min-height:44px}
 .result-links{margin-top:4px}
 .result-links button{font-size:13px;min-height:40px}
 .finished #rankings{top:143px}
 .advanced-content{font-size:14px}
 .advanced-content label{flex-wrap:wrap}
}
@media(max-height:560px) and (min-aspect-ratio:6/5){
 .racing header{height:54px}
 .race-top{margin-top:8px}
 .race-top .eyebrow{display:none}
 #raceName{font-size:20px}
 #rankings{top:100px;font-size:12px}
 #rankings li{padding:5px 9px}
 #raceControls{bottom:8px;width:220px}
 #cheer{min-height:42px;padding:9px}
 #cheerHint{margin-top:5px}
 .racing footer{display:none}
 #resultPanel{left:auto;right:18px;top:76px;bottom:auto;width:245px;transform:none;padding:15px}
 #place{font-size:49px;float:none;margin:0}
 #resultText{font-size:13px;min-height:0;margin:8px 0}
 #bestTime{margin-bottom:6px}
 #resultPanel .dark-button,#resultPanel .outline-button{min-height:38px;padding:8px}
 .result-links button{min-height:32px;font-size:12px}
 .finished #rankings{display:none}
}
@media(prefers-reduced-motion:reduce){.dark-button{transition:none}#cheer.cheering{animation:none}}

@media(min-width:761px) and (max-height:820px){
 body:not(.racing) header{height:64px}
 .headline{margin:20px 0}
 h1{font-size:clamp(42px,4vw,54px)}
 #drawing{height:clamp(210px,calc(100svh - 450px),340px)}
}
@media(min-width:761px) and (min-height:561px){
 .finished #rankings{top:145px}
 .finished #rankings li{padding:4px 12px}
 #resultPanel{top:260px;transform:none;max-height:calc(100svh - 280px);overflow-y:auto}
}

@media(max-width:760px){
 .headline:lang(en) h1{font-size:clamp(28px,7.6vw,40px);letter-spacing:-1.2px}
 #resultPanel{max-height:calc(100svh - 100px);overflow-y:auto}
}
@media(max-height:560px) and (min-aspect-ratio:6/5){#resultPanel{max-height:calc(100svh - 94px);overflow-y:auto}}
/* Results and shared, paginated history. */
#publicNameHint{font-size:12px;line-height:1.5;color:var(--muted)}
#resultPanel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;width:min(660px,calc(100vw - 64px));max-height:calc(100svh - 130px);top:50%;bottom:auto;left:auto;right:32px;transform:translateY(-50%);padding:24px;overflow:auto}
.finished #rankings{display:none}
.result-summary{min-width:0}
#place{float:none;margin:0;font-size:76px}
#resultText{min-height:0;font-size:14px;line-height:1.65}
.result-actions{display:grid;grid-template-columns:1fr;gap:9px}
#resultPanel .result-actions button{width:100%;min-height:46px;margin:0;padding:12px 14px;font-size:14px;justify-content:space-between}
.result-save-horse{display:block;margin:6px auto 0;font-size:13px;color:var(--muted)}
.history-board{min-width:0;padding-left:23px;border-left:1px solid #b8ce57}
.history-board h3{font-size:18px;margin:0 0 5px;letter-spacing:-.3px}
#historyCourse{font-size:13px;margin:0 0 12px;color:var(--muted)}
#historySaveStatus,#historyMessage{font-size:12px;line-height:1.55;margin:6px 0;color:#52623b}
#historySaveStatus:empty,#historyMessage:empty{display:none}
#historyTable{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;margin:10px 0}
#historyTable th{font-size:12px;font-weight:400;color:#64733f;text-align:left;padding:8px 5px;border-bottom:1px solid #b9cf5c}
#historyTable th:first-child{width:42px}
#historyTable th:last-child{width:70px;text-align:right}
#historyTable td{padding:11px 5px;border-bottom:1px solid #bfd563;overflow-wrap:anywhere;line-height:1.4}
#historyTable td:first-child{font-variant-numeric:tabular-nums}
#historyTable td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#historyTable tr.is-you{background:#eff9b3}
.history-pagination{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.history-pagination .plain-button{font-size:12px;padding:8px 3px;white-space:nowrap}
#historyPage{font-size:12px;line-height:1.5;text-align:center;color:var(--muted)}
#historyNote{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 0}
#historyRetry{min-height:40px}
@media(max-width:760px){
 #resultPanel{grid-template-columns:1fr;gap:16px;left:18px;right:18px;width:auto;top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none;max-height:70svh;padding:18px}
 #place{float:left;margin:0 16px 8px 0;font-size:59px}
 #resultText{min-height:60px;margin-top:8px}
 #bestTime{clear:both}
 .history-board{padding:15px 0 0;border-left:0;border-top:1px solid #b8ce57}
 #historyTable td{padding:9px 5px}
 .history-board h3{font-size:17px}
}
@media(max-height:560px) and (min-aspect-ratio:6/5){
 #resultPanel{width:min(620px,calc(100vw - 36px));left:auto;right:18px;top:72px;bottom:auto;transform:none;max-height:calc(100svh - 90px);grid-template-columns:1fr 1.15fr;gap:18px;padding:17px}
 #place{float:none;font-size:49px;margin:0}
 .history-board{padding:0 0 0 18px;border-top:0;border-left:1px solid #b8ce57}
 #resultText{min-height:0}
}

/* Make the athlete name visibly editable, matching the start button. */
.name-field{background:#35402c;color:#f1ffbd;border:1px solid #3c472f;border-radius:4px;padding:13px 18px;box-shadow:0 3px 0 #65793420;cursor:text}
.name-field span{color:#f1ffbd;font-weight:600}
.name-field input{color:#dcfa49;caret-color:#dcfa49;border-bottom-color:#aabd69;font-weight:600;min-height:40px}
.name-field input::placeholder{color:#dcfa49;opacity:1}
.name-field #publicNameHint{color:#d2deb7}
.name-field:hover{background:#2d3826}
.name-field:focus-within{outline:3px solid #6679c6;outline-offset:4px}
.name-field input:focus-visible{outline:none}
@media(max-width:760px){.name-field{padding:11px 12px}.name-field span{font-size:12px}.name-field #publicNameHint{font-size:11px}}

.course-picker{margin:0 0 20px}.course-picker h2{font-size:14px;margin:0 0 10px;font-weight:600}.course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.course-card{position:relative;min-height:76px;text-align:left;padding:14px 30px 14px 16px;border:1px solid #adbf60;background:#f7facf;border-radius:5px}.course-card strong{display:block;font-size:16px}.course-card small{display:block;margin-top:7px;font-size:12px;color:#617142}.course-card:hover{border-color:#35402c}.course-card[aria-pressed=true]{background:#35402c;color:#dcfa49;border-color:#35402c}.course-card[aria-pressed=true] small{color:#edf7b9}.course-card[aria-pressed=true]:after{content:'✓';position:absolute;right:12px;top:15px}.course-settings:has(#legSettings:not([hidden])){margin-top:12px;padding:12px 16px;border:1px solid #bacd60;border-radius:5px;background:#eef6b957}.course-settings #legSettings{margin:0}.course-settings label{display:flex;align-items:center;gap:14px;font-size:13px}.course-settings input{accent-color:#35402c;max-width:180px;min-width:0}.course-settings p{font-size:12px;line-height:1.5;margin:8px 0 0;color:#617142}
@media(max-width:760px){.course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.course-card{min-height:70px;padding:12px 26px 12px 12px}.course-card strong{font-size:14px}.course-card small{font-size:11px}.course-settings label{gap:8px}.course-settings input{width:42%}}

/* Repeated race-control taps must not trigger mobile double-tap zoom.
   manipulation preserves pinch zoom; do not disable scaling in the viewport. */
#raceControls button{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.opponent-picker{margin:0 0 18px}.opponent-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.opponent-switch>span{margin-right:8px;font-weight:600}.opponent-switch button{border:1px solid #adbf60;background:#f7facf;border-radius:4px;padding:10px 16px;min-height:44px}.opponent-switch button[aria-pressed=true]{background:#35402c;color:#dcfa49;border-color:#35402c}#ghostPanel{background:#f7facf;border:1px solid #adbf60;border-radius:5px;margin-top:10px;padding:14px}#ghostPanel p{font-size:12px;line-height:1.6;margin:0 0 8px}#ghostStatus{color:#617142}#ghostCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ghost-card{border:1px solid #d0d9ac;background:#fafbf5;padding:8px;border-radius:4px;min-width:0}.ghost-card canvas{width:100%;height:80px;object-fit:contain}.ghost-card strong,.ghost-card small{display:block;overflow-wrap:anywhere;font-size:13px}.ghost-card small{font-size:11px;color:#617142;margin-top:5px}.ghost-actions{display:flex;gap:10px;flex-wrap:wrap}.ghost-actions button{font-size:12px}.history-challenge{display:block;border:1px solid #71824d;border-radius:3px;padding:3px 7px;margin-top:4px;font-size:11px;background:#f3fabd;color:#35402c;min-height:28px}.history-challenge:disabled{border:0;padding-left:0;background:none}#ghostResult{border-top:1px solid #adc953;margin:12px 0;padding-top:10px;font-size:12px;line-height:1.6}#ghostOutcome{font-weight:600;margin:0 0 7px}#ghostFinishers{list-style:none;padding:0;margin:0}#ghostFinishers li{overflow-wrap:anywhere;padding:3px 0}#ghostNewGroup{font-size:12px;padding-left:0}
@media(max-width:760px){#ghostCards{gap:6px}.ghost-card{padding:6px}.ghost-card canvas{height:58px}.ghost-card strong{font-size:12px}.opponent-switch button{padding:9px 12px}#ghostPanel{padding:10px}}

.canvas-navigation{position:absolute;top:40px;left:14px;z-index:2;display:flex;align-items:center;gap:3px;background:#fafbf5ed;border:1px solid #c3cead;border-radius:5px;padding:3px}.canvas-navigation button{min-width:36px;min-height:36px;padding:6px;border:0;border-radius:3px;background:none;font-size:13px;touch-action:manipulation}.canvas-navigation button[aria-pressed=true]{background:#35402c;color:#dcfa49}.canvas-navigation output{font-size:11px;min-width:37px;text-align:center}.drawing-overview{position:absolute;right:14px;top:42px;width:112px;background:#fafbf5e8;border:1px solid #bdc8a8;border-radius:4px;pointer-events:none;z-index:1}.drawing-overview span{display:block;font-size:10px;padding:3px 6px;color:#617142}.drawing-overview canvas{display:block;width:100%;height:70px}
@media(max-width:760px){#drawing{height:clamp(360px,58svh,520px)}.canvas-navigation{top:38px;left:8px;gap:0}.canvas-navigation button{min-width:32px;min-height:40px}.drawing-overview{right:8px;top:90px;width:88px}.drawing-overview canvas{height:56px}.canvas-notes{font-size:10px}.canvas-navigation output{min-width:34px}}
.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.course-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.course-picker-heading h2{margin:0}.course-picker-heading button{background:#35402c;color:#dcfa49;border:0;border-radius:4px;min-height:40px;padding:9px 14px;font-size:13px}#homeLeaderboard{width:min(600px,calc(100% - 32px));max-height:85svh;overflow:auto;padding:22px;border:1px solid #adbf60;border-radius:10px;background:#f7facf;color:#293225}#homeLeaderboard::backdrop{background:#29322580}.home-board-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.home-board-heading h2{font-size:20px;margin:0}.home-board-heading button{border:0;background:none;min-width:44px;min-height:44px;font-size:20px}.home-board-course{display:flex;align-items:center;gap:12px;font-size:13px;margin:12px 0}.home-board-course select{padding:10px;border:1px solid #adbf60;background:#fffef5;border-radius:4px}#homeBoardStatus{font-size:12px;line-height:1.6;color:#617142}.home-board-row{display:grid;grid-template-columns:24px minmax(0,1fr) 60px;gap:8px;padding:12px 8px;border-bottom:1px solid #d0d9ac;align-items:center;font-size:13px}.home-board-row strong{overflow-wrap:anywhere}.home-board-row button{grid-column:2/4;justify-self:start;background:#35402c;color:#dcfa49;border:0;border-radius:4px;min-height:36px;padding:7px 12px;font-size:12px}.home-board-row button:disabled{background:transparent;color:#617142;padding:0;min-height:20px;opacity:1}.home-board-row.is-you{background:#e1edbd}.home-board-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:12px}.home-board-pagination button,#homeBoardRetry{min-height:40px;border:1px solid #adbf60;background:transparent;border-radius:4px;padding:8px 12px}
@media(max-width:760px){#homeLeaderboard{margin:auto 0 0;width:100%;max-width:none;max-height:85svh;border-radius:14px 14px 0 0;padding:18px 18px max(18px,env(safe-area-inset-bottom))}}