/* Lil Guys' existing site is the art-direction authority. Variables come from
   public-site/styles.css through /brand-tokens.css, not a second palette. */
html,body{background:var(--yellow);color:var(--ink);font-family:var(--mono)}
.lobby-shade{background:transparent}.brand-sun{display:none}
.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
header{height:76px;padding:0 3vw;border-bottom:1px solid #15151055}header a{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.025em}header a span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;opacity:1;margin-left:12px}#build{font-size:9px;font-weight:400}#build i{background:var(--red)}
#lobby{left:4vw;width:430px;top:14%;padding:0 12px 12px 0}#lobby h1{font-family:var(--display);font-size:clamp(48px,4.9vw,70px);font-weight:400;font-style:normal;letter-spacing:.025em;line-height:.98;transform:none;margin:18px 0 22px}#lobby h1 span{color:var(--ink);font-size:inherit}.intro{font-size:15px;font-weight:400;color:var(--ink);line-height:1.65;margin:20px 0 24px}.eyebrow{font-weight:500;font-size:10px;letter-spacing:.12em}
.course-picker{border-color:var(--ink);padding-top:16px}.section-line label,#course-number{font-weight:500;letter-spacing:.1em}#course-choice{font-family:var(--mono);font-size:19px;font-weight:500;border-bottom:1px solid var(--ink);color:var(--ink)}#course-description{color:var(--ink);font-size:11px;line-height:1.6;min-height:35px}
select{font-family:var(--mono);color:var(--ink);border:1px solid var(--ink);border-radius:0;background:var(--paper)}label{font-weight:500}details{border-color:#15151066}summary{font-family:var(--mono);font-weight:500;letter-spacing:.08em}summary span{color:var(--ink)}
button,#start{background:var(--ink);color:var(--paper);font-family:var(--mono);font-weight:500;border:1.5px solid var(--ink);border-radius:0;box-shadow:5px 5px 0 var(--ink);letter-spacing:.06em}#start{background:var(--paper);color:var(--ink);padding:17px 16px;margin-top:18px;text-align:left;font-size:13px}button:hover,#start:hover{background:var(--acid);color:var(--ink);box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}button:active,#start:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}button:disabled{opacity:.55;transform:none;box-shadow:5px 5px 0 var(--ink)}button.secondary{background:var(--paper);color:var(--ink);box-shadow:none;border:1px solid}button.secondary:hover{background:var(--yellow)}button.text-button{background:transparent;border:0;box-shadow:none;color:var(--ink);text-decoration:underline}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--red)}#loading,.keys,small{color:var(--ink)}#loading{font-size:10px;margin-top:16px}.keys{font-size:9px;font-weight:400}.keys b{font-family:var(--mono);background:var(--ink);color:var(--paper);border-radius:0;font-weight:400}.keys span{line-height:2}
.badge,.counter{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:0;box-shadow:5px 5px 0 var(--ink)}.badge{min-width:230px}.counter{background:var(--yellow);min-width:170px}.badge strong{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.035em;line-height:1.3;margin:7px 0}.badge small,.counter small{color:var(--ink);font-weight:400;font-size:9px}.counter strong{font-size:37px}.counter em{font-family:var(--mono);font-weight:400;font-size:13px;opacity:1}.survival-note{font-weight:400;font-size:9px}progress,progress::-webkit-progress-bar{background:#15151022}progress::-webkit-progress-value{background:var(--red)}progress::-moz-progress-bar{background:var(--red)}#course-tip{background:var(--paper);color:var(--ink);border:1px solid;border-radius:0;font-weight:400;font-size:11px;line-height:1.6}
#callout{font-family:var(--display);font-style:normal;font-weight:400;color:var(--yellow);-webkit-text-stroke:2px var(--ink);text-shadow:6px 7px 0 var(--ink);font-size:clamp(48px,9vw,130px);letter-spacing:.04em}.small-card,.card:not(#lobby){border:2px solid var(--ink);border-radius:0;background:var(--paper);box-shadow:9px 9px 0 var(--ink)}h2,#result h1{font-family:var(--display);font-style:normal;font-weight:400;letter-spacing:.035em}h2{font-size:23px;line-height:1.3}.small-card p,#result p{font-family:var(--mono);color:var(--ink);font-size:12px;line-height:1.65}#result h1{font-size:35px;line-height:1.2}
#sound-controls button{background:var(--paper);color:var(--ink);border:1px solid;box-shadow:2px 2px 0 var(--ink);font-size:9px;font-weight:400}#sound-controls button:hover{background:var(--acid);transform:none}footer{font-family:var(--mono);font-weight:400;color:var(--ink);font-size:8px}#performance{color:var(--ink);font-size:8px}.popup-close{background:#ffef20;color:#111;box-shadow:2px 2px #111;letter-spacing:0}#loading-screen{background:var(--paper);color:var(--ink)}
@media(max-height:820px){#lobby{top:12%;bottom:90px}#lobby h1{font-size:56px;line-height:.96;margin:14px 0}.intro{font-size:13px;margin:14px 0}.course-picker{padding-top:12px;margin-bottom:10px}#start{margin-top:12px;padding:14px}}
@media(max-width:900px){#lobby{width:370px}#lobby h1{font-size:57px}.intro{max-width:290px}.badge{min-width:190px}.counter{min-width:140px}header a span{display:none}}
@media(max-width:600px){#lobby{width:calc(100% - 40px);max-width:350px;left:20px;background:#f5c842ee;padding:14px}#lobby h1{font-size:48px}.intro{font-size:12px}.badge{min-width:145px;padding:10px}.badge strong{font-size:16px}.counter{min-width:95px}.counter strong{font-size:28px}.counter small{font-size:7px}header{height:62px}#hud{top:76px}#course-description{font-size:10px}}
.playing .lg-profile-button{top:auto;bottom:44px;right:24px}#callout[data-mode=draw]{font-size:clamp(24px,5vw,64px);padding:0 20px;text-wrap:balance}
/* Shared franchise navigation and touch controls for the public game. */
.games-link{font:11px 'DM Mono',monospace;margin-left:auto;margin-right:24px;pointer-events:auto}
#touch-controls{display:none;position:fixed;left:16px;right:16px;bottom:18px;z-index:5;justify-content:space-between;align-items:end;pointer-events:none;touch-action:none}
#touch-controls button{width:48px;height:48px;padding:0;border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:2px 3px var(--ink);pointer-events:auto;touch-action:none;font:500 14px 'DM Mono',monospace}
#touch-controls button:active{background:var(--yellow);translate:1px 2px;box-shadow:1px 1px var(--ink)}
.touch-directions{display:grid;grid-template-columns:repeat(3,48px);gap:6px}.touch-directions button:first-child{grid-column:2}.touch-directions button:nth-child(2){grid-column:1}
.touch-actions{display:flex;gap:8px;align-items:end}.touch-actions button:last-child{width:38px!important}
@media(pointer:coarse){.playing #touch-controls:not([hidden]){display:flex}.playing #sound-controls,.playing footer{display:none}.playing .lg-profile-button{bottom:auto;top:14px;right:14px}#hud{top:64px}.games-link{margin-right:0}}
@media(max-width:800px){.games-link{font-size:10px;margin-right:0}#pause{z-index:6}}
.games-link{position:absolute;top:64px;left:40px;margin:0}.playing .games-link{display:none}@media(max-width:800px){.games-link{left:20px;top:62px}}

.playing #build{display:none}