@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#0c100f;--panel:#141b17;--line:#344035;--lime:#c5fa6b;--muted:#94a18f;--ink:#e5ecdf}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 'IBM Plex Mono',monospace}body:before{content:'';position:fixed;inset:0;background-image:linear-gradient(#ffffff03 1px,transparent 1px);background-size:100% 4px;pointer-events:none;z-index:9}main{max-width:1040px;margin:auto;padding:40px 32px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:38px}.logo{font-size:40px;font-weight:600;letter-spacing:-3px;text-decoration:none;color:var(--ink);line-height:1}.logo span{color:var(--lime)}.logo small{display:block;font-size:12px;letter-spacing:2px;margin-top:12px;color:var(--muted)}.badge{border:1px solid var(--line);padding:6px 12px;font-size:12px;color:var(--lime)}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}label{color:var(--muted);font-size:14px}select{margin-left:12px;background:var(--bg);color:var(--ink);border:1px solid var(--line);font:inherit;padding:8px 34px 8px 12px}.score{font-size:12px;color:var(--muted);letter-spacing:1px}.score strong{margin-left:14px;font-size:26px;color:var(--lime)}.machine{border:1px solid #53624b;background:var(--panel);box-shadow:6px 6px 0 #050806}.machine-top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}.live{font-size:12px;color:var(--lime)}.display{padding:26px 34px 20px;background:radial-gradient(ellipse at center,#24351c 0,#101b11 75%);border-bottom:1px solid var(--line)}.eyebrow{margin:0;font-size:14px;color:var(--muted)}#number{font-family:'DotGothic16',monospace;font-size:clamp(38px,7.7vw,88px);letter-spacing:3px;color:var(--lime);text-shadow:0 0 20px #b8ff4733;line-height:1.6;text-align:center;padding:14px 0;overflow-wrap:anywhere}.rule-line{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#91a781;border-top:1px dashed #3c5133;padding-top:12px}.play{padding:26px 34px}.attempts{display:flex;justify-content:space-between;margin-bottom:12px;font-size:14px}#tries{color:var(--lime)}.input-row{display:flex;gap:10px}input{min-width:0;flex:1;background:#090f0b;border:1px solid #53624b;padding:15px;color:var(--ink);font:inherit;border-radius:0}input:focus,select:focus,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button{cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink);padding:12px 18px;font:inherit;font-size:14px;border-radius:0}button:hover:not(:disabled){border-color:var(--lime);color:var(--lime)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--lime);color:#122009;border-color:var(--lime);font-weight:600;min-width:150px}.primary:hover:not(:disabled){background:#daffa0;color:#122009}.primary span{margin-left:14px}#feedback{font-size:14px;color:var(--muted);min-height:46px;padding-top:12px}.hints{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hints button{text-align:left;font-size:14px;color:var(--lime);padding:15px 18px}.hints small{display:block;color:var(--muted);font-size:12px;margin-top:4px}#hintText p{padding:12px 16px;border-left:2px solid var(--lime);background:#1e281c;font-size:14px}#result{margin-top:20px;border:1px solid var(--lime);padding:18px}#result h2{margin:0 0 8px;color:var(--lime);font-size:24px}#result p{margin:4px 0;font-size:14px;overflow-wrap:anywhere}.actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.actions button{border:none;padding:6px 0;color:var(--muted)}#next{color:var(--lime)}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}.bottom h2{font-size:14px;letter-spacing:1px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px}.bottom h2 span{color:var(--muted);font-size:12px}.bottom p{font-size:14px;color:var(--muted)}#historyToggle{border:0;padding:0;font-size:12px;color:var(--lime)}#history{padding-left:20px;font-size:14px;max-height:240px;overflow:auto}#history li{margin-bottom:12px}footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}footer>span{letter-spacing:2px}footer p{max-width:760px}#sharebox{margin-top:16px}#shareUrl{display:block;width:100%;margin-top:8px;font-size:14px}#shareStatus{font-size:14px;color:var(--lime)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:620px){main{padding:24px 16px}.logo{font-size:32px}.badge{font-size:12px;padding:4px 6px}.logo small{font-size:10px;letter-spacing:1px}header{margin-bottom:28px}.toolbar{gap:8px}select{max-width:155px;margin-left:4px}.score{font-size:10px}.score strong{font-size:22px;margin-left:6px}.machine-top{padding:12px 16px}.live{display:none}.display,.play{padding:20px 16px}.rule-line{font-size:12px}.input-row{flex-direction:column}.hints{gap:8px}.hints button{padding:12px 10px}.bottom{grid-template-columns:1fr;gap:10px}.actions{flex-wrap:wrap}.attempts{font-size:13px}}

/* Ranking hints retain the existing panel colors and spacing. */
#hintText .ranking-first{overflow-wrap:anywhere}.ranking-hint{margin:14px 0;padding:12px 16px;border-left:2px solid var(--lime);background:#1e281c;font-size:14px}#hintText .ranking-heading{margin:0 0 8px;padding:0;border:0;background:transparent}.ranking-row{display:grid;grid-template-columns:5em minmax(0,1fr) auto;gap:8px;padding:3px 0;align-items:baseline}.ranking-value{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}@media(max-width:620px){.ranking-hint{padding:12px 10px}.ranking-row{grid-template-columns:4.5em minmax(0,1fr) minmax(0,1.35fr);gap:5px;font-size:12px}}

/* Keep whole numbers readable in narrow viewports without changing game data. */
.ranking-value{white-space:nowrap;overflow-wrap:normal}
.ranking-row>span:first-child{white-space:nowrap}
@media(max-width:620px){
  #number{font-size:clamp(24px,8.5vw,48px);letter-spacing:1px;white-space:nowrap;overflow-wrap:normal}
  .ranking-row{grid-template-columns:max-content minmax(0,1fr) max-content}
  .ranking-row>span:nth-child(2){overflow-wrap:anywhere}
}
@media(max-width:380px){
  .ranking-row{grid-template-columns:max-content minmax(0,1fr);row-gap:0;padding:6px 0}
  .ranking-value{grid-column:1/-1;justify-self:end}
}

/* Round selection and completion use the same quiet digital panels. */
[hidden]{display:none!important}
.selection-screen,.complete-screen{padding:24px}
.selection-screen h1,.complete-screen h1{font-size:clamp(20px,3.5vw,30px);color:var(--lime);margin:0 0 12px}
.selection-screen p{font-size:14px;color:var(--muted)}
.mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 0}
.mode-options button{min-height:100px;padding:12px 4px;white-space:nowrap}
.mode-options button[aria-pressed=true]{border-color:var(--lime);background:#24351c;color:var(--lime)}
.mode-options strong,.mode-options span,.mode-options small{display:block}
.mode-options strong{font-size:24px}.mode-options span{font-size:11px}.mode-options small{font-size:10px;margin-top:6px}
#begin{width:100%;min-height:48px;white-space:nowrap}
.complete-screen{text-align:center}#roundCount{font-size:14px;color:var(--muted)}
#roundPoints{font-size:clamp(18px,3.5vw,36px);color:var(--lime);white-space:nowrap;margin:22px 0}
.complete-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.complete-actions button{min-height:48px;white-space:nowrap}
#resultShareText{display:block;width:100%;min-width:0;max-width:100%;background:#090f0b;color:var(--ink);border:1px solid var(--line);font:inherit;font-size:12px;padding:12px;resize:vertical}
#resultSharebox{text-align:left;margin-top:20px;overflow-wrap:anywhere}#resultShareStatus{font-size:14px}
#rules{grid-template-columns:1fr}#selectionFeedback,#shareEntry{overflow-wrap:anywhere}
@media(max-width:620px){.selection-screen,.complete-screen{padding:20px 16px}.complete-actions{display:grid;grid-template-columns:1fr}.actions button{min-height:44px;white-space:nowrap}#resultShareText{font-size:16px}}

/* Emphasize only the active region label. */
#location{font-weight:600;color:#FFFFFF}