*{box-sizing:border-box}body{margin:0;background:#0c0b0a;color:#e8e1d4;font:14px "Yu Gothic",Meiryo,sans-serif}header,main{max-width:1000px;margin:auto;padding:16px}header{display:flex;justify-content:space-between;color:#9f9486}a{color:#cbb187}h1{font-size:22px;font-weight:500;margin:0 0 14px}.stage{height:min(62vh,650px);min-height:360px;border:1px solid #302923}canvas{width:100%;height:100%;display:block;touch-action:none}button{background:#29241e;color:#e8e1d4;border:1px solid #574737;border-radius:3px;padding:10px 16px;min-height:44px;font:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d1ad71;outline-offset:3px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}output{color:#d1ad71;margin-left:auto}@media(max-width:600px){.stage{height:55vh;min-height:340px}header,main{padding:12px}h1{font-size:19px}.actions{gap:6px}button{padding:9px 12px}}
#result{margin:18px 0 24px;text-align:center}#result[hidden]{display:none}.total{margin:0 0 12px;font-size:18px}.total strong{font-size:42px;font-weight:500}#score-items{display:flex;justify-content:center;gap:12px 24px;flex-wrap:wrap;color:#b8ab98}#score-items p{margin:0}

/* Brush lettering stays legible at small sizes; the ramen remains the main focus. */
body{font-family:var(--seimen-font);font-size:18px;line-height:1.75;letter-spacing:.025em}header{font-size:16px}header a{text-decoration:none}h1{text-align:center;font-family:var(--seimen-font);font-size:clamp(62px,8vw,86px);line-height:1.15;letter-spacing:.10em;font-weight:400;color:#efe5cf;margin:0 0 22px}.stage{border:0}canvas:focus-visible{outline:2px solid #c5a777;outline-offset:4px}button,input,output{font-family:var(--seimen-font)}#result{margin:22px 0 28px}.total strong{font-size:58px;font-weight:400}#score-items{font-size:18px;color:#c6b99f}@media(max-width:600px){header{font-size:14px}h1{font-size:62px;margin-bottom:18px}body{font-size:17px}#score-items{font-size:17px;gap:8px 20px}}

/* Keep the brush title; controls and numeric feedback use a readable UI face. */
body{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;font-size:16px;line-height:1.7;letter-spacing:.01em;font-synthesis:weight}header,.site-header,.stage-bar,button,input,output,select,details,#score-items,.total,.score,footer{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif}.stage-bar #timer,.score strong{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif}h1{font-family:var(--seimen-font);font-synthesis:none}#score-items{font-size:15px}.total strong{font-weight:500}

.total,.total strong,.score,.score strong{font-family:var(--seimen-font);font-synthesis:none;font-weight:400}

.quiet,.primary,.secondary,.zoom-button{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif}

[hidden]{display:none!important}.header-tools,.result-actions,.view-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.quiet{background:transparent;border-color:transparent;color:#bca98c;min-height:44px;font-size:14px}.stage{position:relative}#loading,#fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0c0b0ae8;padding:24px;text-align:center}#status{color:#b9ab93;text-align:center;margin:12px 0}.result-actions{justify-content:center;margin:18px 0}.best,.share-note{font-size:13px;color:#b9ab93}.share-note{max-width:500px;margin:12px auto}footer{max-width:1000px;margin:auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;color:#928675;font-size:13px}dialog{color:#e8e1d4;background:#17140f;border:1px solid #514632;max-width:min(660px,92vw);max-height:84vh;overflow:auto;padding:24px}dialog::backdrop{background:#000b}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.dialog-head h2{margin:0;font-size:20px}.dialog-head button{font-size:22px}.view-tools{margin:18px 0}.release-heading{display:flex;gap:12px;flex-wrap:wrap;font-size:15px;font-weight:500}.release-heading .version{border:1px solid #67543a;padding:1px 8px}.release-heading span:nth-child(2){color:#b9ab93}dialog li{margin:10px 0}#restart{display:block;margin:14px auto}.total{font-family:var(--seimen-font)}

.help-intro{color:#d9c6a8;margin:14px 0}.help-tabs{display:flex;gap:20px;border-bottom:1px solid #4b4030;margin:18px 0}.help-tab{flex:1;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;margin:0!important;font-family:"Yu Gothic",Meiryo,system-ui,sans-serif!important;color:#9e927f;padding:8px 12px}.help-tab[aria-selected="true"]{border-bottom-color:#d1ad71;color:#efe5cf}.help-lead{font-weight:600;color:#d9c6a8}.help-steps{padding-left:24px}.help-steps li{margin:14px 0}.help-steps strong,.help-steps span{display:block}.help-steps span{font-size:.92em;color:#c0b6a6}.help-common{border-top:1px solid #4b4030;margin-top:20px;padding-top:4px}.help-kind,.keyboard-help{font-size:14px;color:#b9ab93}.keyboard-help summary{cursor:pointer;min-height:44px;line-height:44px}.keyboard-help p{margin:4px 0 12px}@media(max-width:600px){#help-dialog{padding:18px}.help-steps{padding-left:20px}.help-steps li{margin:12px 0}}
.noodle-choice{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 14px;font-size:14px}#next-kind{font-size:13px;color:#bca98c}.result-kind{font-size:14px;color:#bca98c;margin:0 0 4px}

#next-kind,#result-kind,.noodle-kind-name{font-family:var(--seimen-font);font-synthesis:none;font-weight:400}#next-kind,#result-kind{font-size:20px}

.noodle-options{display:flex;gap:6px;align-items:center}.noodle-option{font-family:var(--seimen-font);font-synthesis:none;font-weight:400;font-size:26px;line-height:1.45;min-width:82px;min-height:46px;padding:4px 14px;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;color:#bca98c}.noodle-option[aria-pressed="true"]{color:#f0e4cf;border-bottom-color:#c6aa7d;background:#211c14}.noodle-option:hover{color:#f0e4cf}.noodle-choice{flex-direction:column;gap:4px}

@media(max-width:420px){.noodle-options{gap:4px}.noodle-option{font-size:24px;padding:4px 8px;min-width:70px}}

#score-items,#best-result{font-family:var(--seimen-font);font-synthesis:none;font-weight:400;font-size:20px;line-height:1.8}

#best-result{word-break:keep-all}@media(max-width:600px){#best-result{font-size:18px}}

#status,#loading,#fallback p,#share-note{font-family:var(--seimen-font);font-synthesis:none;font-weight:400;font-size:20px;line-height:1.8}@media(max-width:600px){#status,#loading,#fallback p,#share-note{font-size:18px}}

.result-actions button{font-family:var(--seimen-font);font-synthesis:none;font-weight:400;font-size:20px;line-height:1.5}

.stage-controls{display:flex;justify-content:flex-end;margin:0 0 8px}.stage-menu{width:min(336px,100%);margin:0;padding:8px 10px;border:1px solid #6b563a;border-radius:4px;background:#15120ff5;color:#e4cfaa}.stage-menu .view-tools{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;margin:0}.stage-menu button,.stage-menu #zoom-level,#restart{font-family:var(--seimen-font);font-synthesis:none;font-weight:400;color:#e4cfaa;font-size:20px;line-height:1.4}.stage-menu button{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:4px;background:transparent;border:0;border-radius:2px}.stage-menu button:hover{background:#40321d}.stage-menu #view,.stage-menu #finish{flex:0 0 54px;min-width:54px;width:auto;margin:0;padding:4px 6px;text-align:center;white-space:nowrap}.stage-menu #view{border-right:1px solid #665034}.stage-menu #finish{border-left:1px solid #665034;color:#f0dbb5}.stage-menu .zoom-control{display:flex;flex:1 1 150px;min-width:0;align-items:center;gap:8px;padding:0 8px}.stage-menu #zoom-level{flex:0 0 40px;width:40px;font-size:18px;margin:0;text-align:center}.stage-menu #zoom{appearance:none;-webkit-appearance:none;min-width:0;width:100%;height:44px;margin:0;cursor:pointer;background:transparent;--zoom-fill:23.08%}.stage-menu #zoom::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#c5a471 var(--zoom-fill),#514331 var(--zoom-fill))}.stage-menu #zoom::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border:1px solid #f0dbb5;border-radius:50%;background:#c5a471;box-shadow:0 1px 4px #0008}.stage-menu #zoom::-moz-range-track{height:3px;border-radius:2px;background:#514331}.stage-menu #zoom::-moz-range-progress{height:3px;background:#c5a471}.stage-menu #zoom::-moz-range-thumb{width:12px;height:12px;border:1px solid #f0dbb5;border-radius:50%;background:#c5a471}#restart{line-height:1.5}

canvas{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

/* The game has no decorative frame; keyboard users retain a focus cue. */
canvas:focus{outline:none}
canvas[data-input-mode="keyboard"]:focus-visible{outline:2px solid #c5a777;outline-offset:4px}
.stage-menu{width:min(460px,100%);padding:0;border:0;border-radius:0;background:transparent}
.stage-menu .view-tools{gap:4px}
.stage-menu #view,.stage-menu #finish{flex:0 0 48px;min-width:48px;font-size:18px;padding:4px}
.stage-menu #restart{display:block;flex:0 0 84px;width:84px;min-width:84px;margin:0;padding:4px;font-size:18px;white-space:nowrap}
.stage-menu .zoom-control{flex:1 1 120px;padding:0 4px;gap:6px}
.stage-menu #zoom{min-width:24px}
.stage-menu #zoom-level{flex-basis:36px;width:36px;font-size:16px}
button:disabled{opacity:.5;cursor:default}
.is-result .stage{height:clamp(220px,38svh,380px);min-height:0}
.is-result canvas{touch-action:pan-y}
.is-result #result{margin:12px 0 24px}
.is-result .total{line-height:1.2;margin:4px 0 10px}
.is-result #best-result{margin:8px 0;line-height:1.5}
.is-result .result-actions{margin:12px 0}
@media(max-width:600px){
 .stage-menu #view,.stage-menu #finish{flex-basis:44px;min-width:44px}
 .stage-menu #restart{flex-basis:80px;width:80px;min-width:80px}
 .is-result .stage{height:clamp(160px,26svh,240px)}
 .is-result .result-kind{font-size:18px;line-height:1.4}
 .is-result .total strong{font-size:52px}
 .is-result #score-items{display:grid;gap:2px;font-size:18px;line-height:1.55}
 .is-result #best-result{font-size:18px}
 .is-result .result-actions{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr));gap:6px;align-items:stretch}
 .is-result .result-actions button{min-width:0;padding:8px 4px;font-size:18px;white-space:nowrap}
}