/* Approved ivory scientific notebook. All controls remain live HTML. */
.play-brand{display:none}
.game.in-session{--hero-top:110px;--hero-bottom:130px;display:grid;grid-template-columns:30% minmax(0,1fr);grid-template-rows:var(--hero-top) var(--hero-bottom) 62px minmax(320px,1fr) 30px 48px;gap:8px 12px;height:960px;min-height:800px;max-height:none;padding:12px 16px 16px;background:#fff9ed url('assets/lab-paper-v7.webp') center/100% 100% no-repeat;border:1px solid #ddb99b;border-radius:18px;overflow:visible}
.game.in-session .art-header{grid-column:2;grid-row:1;position:static;display:flex;align-items:center;justify-content:center;border:0;aspect-ratio:auto;width:auto;height:auto;margin:0;padding:25px 28px 0 0}
.game.in-session .art-header .header-controls{inset:9px 10px auto;width:auto;transform:none;padding:0}
.game.in-session .header-controls .icon-button{width:44px;height:44px;min-height:44px;border:1px solid #c5571a80;border-radius:50%;background:#fff9eded;color:#b54613;font-size:22px;box-shadow:none}
.game.in-session .header-controls .pause-button small{font:9px/1.15 system-ui}
.game.in-session .play-brand{display:flex;flex-direction:column;align-items:center;width:100%;gap:8px}
.play-logo-crop{width:100%;max-width:360px;aspect-ratio:4.8;position:relative;overflow:hidden;mix-blend-mode:multiply}
.game.in-session .play-wordmark{position:absolute;display:block;max-width:none;width:115%;height:auto;left:-7.5%;top:-83%;object-fit:initial;mix-blend-mode:multiply}
.play-tagline{color:#cc4c11;font:italic 26px/1.2 'Snell Roundhand','Apple Chancery','URW Chancery L',Georgia,serif;white-space:nowrap}
.game.in-session .dashboard{display:contents}
.game.in-session .portrait{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;align-items:center;justify-content:end;min-width:0;height:auto;gap:0;padding:20px 0 0;margin:0;align-self:stretch}
.game.in-session .hair{height:calc(var(--hero-top) + var(--hero-bottom) - 52px);max-width:100%;width:calc((var(--hero-top) + var(--hero-bottom) - 52px) * .625);background-size:500% 125%;aspect-ratio:auto;flex-shrink:1;mask-image:linear-gradient(#000 89%,transparent 100%);mix-blend-mode:multiply}
.game.in-session .character-name{font:400 20px/1.15 Georgia;color:#a4471f;letter-spacing:0;margin:0;text-align:center;align-self:center;overflow-wrap:normal}
.game.in-session .character-profession{font:11px/1.4 system-ui;color:#a4471f;margin:3px 0 0;text-align:center;align-self:center;overflow-wrap:normal}
.game.in-session .metrics-panel{grid-column:2;grid-row:2;min-width:0;align-self:center;padding:0 4px 0 0}
.game.in-session .stats{gap:9px}
.game.in-session .stats>div{border:0;background:transparent;padding:3px 0 7px;border-bottom:1px solid #cf71343d;border-radius:0;min-width:0}
.game.in-session .stats span{font:10px/1.4 system-ui;letter-spacing:.9px;color:#a94b22}
.game.in-session .stats strong{font:400 33px/1.25 Georgia;color:#a4471f;white-space:nowrap;font-variant-numeric:tabular-nums}
.game.in-session .progress-title{font:11px/1.4 Georgia;color:#a4471f;margin-top:14px;gap:6px}
.game.in-session .progress-title strong{font:400 29px/1 Georgia;color:#c64b12}
.game.in-session .track{height:5px;background:#dfd5c4;margin:8px 0;border-radius:6px}
.game.in-session .track>div{background:#d76527}
.game.in-session .milestones{font:10px/1.3 Georgia;color:#765b42}
.game.in-session .hair-condition,.game.in-session .ritual-note,.game.in-session .status-row,.game.in-session .live-timer,.game.in-session .selection-note,.game.in-session .bottom-nav,.game.in-session .footnote{display:none}
.game.in-session .suggestion{grid-column:1 / -1;grid-row:3;height:auto;min-height:0;display:flex;gap:11px;align-items:center;justify-content:center;border:0;border-top:1px solid #c8793e48;border-bottom:1px solid #c8793e48;border-radius:0;background:#fff9ed55;margin:0;padding:6px 4px}
.game.in-session .hint-swatch{width:42px;height:42px;border-radius:50%;background:var(--hint-color);box-shadow:0 0 0 3px #fff9ed,0 0 0 4px #d8bb9b;overflow:hidden}
.hint-swatch .layer{background:var(--color);height:100%;min-height:100%;border:0;border-radius:0;box-shadow:none}
.hint-swatch .ingredient-mark{width:28px;height:29px;max-height:none}
.hint-swatch .layer svg{width:26px;height:28px}
.game.in-session .hint-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.game.in-session .suggestion .hint-eyebrow{display:block;font:9px/1.2 system-ui;letter-spacing:1.6px;color:#9f5e36;margin:0}
.game.in-session .suggestion strong{font:400 19px/1.2 Georgia;color:#9e401d}
.hint-ingredient{font:11px/1.35 system-ui;color:#73513d}
.game.in-session .board{grid-column:1 / -1;grid-row:4;grid-template-columns:minmax(0,1fr) 17% minmax(0,1fr);gap:10px;min-height:0;padding:8px 0 0;isolation:isolate}
.game.in-session .board:before{display:none}
.game.in-session .rack{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:16px 8px;min-height:0}
.game.in-session .tube{height:100%;min-height:52px;padding:0 3px 5px;border:1.2px solid #b39073;border-radius:4px 4px 24px 24px;background:linear-gradient(90deg,#d2c6b52b,#ffffff85 15%,#ffffff15 55%,#b59b7a20 86%,#fff9ed90);box-shadow:inset 2px 0 3px #ffffffc9,inset -2px 0 3px #a9927133,0 4px 6px #82502c0a;min-width:0}
.game.in-session .tube:before{left:-2px;right:-2px;top:-4px;height:8px;border:1px solid #b19073;background:linear-gradient(#fffaf0,#d2c1aa 45%,#fff7e8 75%);box-shadow:0 1px 0 #fffdf8;border-radius:50%}
.game.in-session .tube:after{left:12%;top:7px;bottom:12px;width:4%;background:linear-gradient(#ffffffc0,#ffffff25);border-radius:9px}
.tube .layer{height:calc((100% - 6px) / 6);min-height:0;flex:0 0 calc((100% - 6px) / 6)}
.layer{color:white;background:linear-gradient(90deg,#ffffff25,transparent 28%,#00000008 76%,#ffffff32),var(--color);border-top:1px solid #ffffff40;box-shadow:inset 0 1px 1px #ffffff26}
.layer .ingredient-mark{background:none;border:0;border-radius:0;box-shadow:none;color:#fff;width:22px;height:100%;max-height:24px;opacity:1}
.layer svg{stroke:#fff;stroke-width:1.8;fill:none;width:21px;height:100%;max-height:23px;filter:none}
.game.in-session .tube.selected{outline:2px solid #c75a21;outline-offset:2px;box-shadow:0 0 0 5px #c75a2114}
.game.in-session .center{justify-content:center;min-height:0;padding-bottom:14px}
.game.in-session .center-caption{font:9px/1.3 system-ui;letter-spacing:1px;color:#a4532c;margin:0 0 13px}
.game.in-session .center-caption strong{font:400 24px/1.2 Georgia;margin-top:4px;color:#a4471f}
.game.in-session .receiver{width:92%;height:calc(100% - 85px);min-height:180px;max-height:430px;border:1.4px solid #b3926f;border-radius:9px 9px 19px 19px;background:linear-gradient(90deg,#b3b0a114,#ffffffa6 18%,#fffef730 52%,#b6aa8d25 83%,#fff8e090);box-shadow:inset 3px 0 4px #ffffffc9,inset -2px 0 3px #8d7a5226,0 5px 8px #85512e10}
.game.in-session .receiver:before{height:12px;top:-6px;left:-5px;right:-5px;border:1.2px solid #aa8a67;background:linear-gradient(#fffaf0,#e3d4bb 45%,#fff7e8 75%);box-shadow:0 2px 0 #c5a57d55}
.game.in-session .receiver:after{content:'';position:absolute;bottom:-14px;left:-6px;right:-6px;height:12px;border:1px solid #b3926f;border-radius:50%;background:linear-gradient(#fff8e8,#d8c1a2 45%,#f8ecd9 70%,#bfa17d);box-shadow:0 3px 3px #8c603320;pointer-events:none}
.game.in-session .mix{bottom:5px;left:4px;right:4px;border-radius:0 0 15px 15px}
.game.in-session .graduations{right:4px;opacity:.55;width:7px}
.game.in-session .message{grid-column:1 / -1;grid-row:5;height:30px;min-height:0;overflow:auto;margin:0;font:10px/1.35 system-ui;color:#93633d;text-align:center}
.game.in-session .cooldown-notice{display:none}
.game.in-session footer{grid-column:1 / -1;grid-row:6;display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;height:48px;min-height:0;border:0;margin:0;padding:0}
.game.in-session .phone-menu{display:block;grid-column:1;grid-row:1;min-height:44px;border:1px solid #c3743e;background:#fff9edbb;color:#a34a21;border-radius:24px;font:15px Georgia}
.game.in-session footer .primary,.game.in-session footer .secondary{grid-column:2;grid-row:1;min-height:44px;margin:0;padding:8px;border-radius:24px;font:17px/1.3 Georgia;color:white;background:linear-gradient(#da8038,#bd5b20);border:1px solid #b85d29;box-shadow:inset 0 1px 0 #fff4d657}
.game.in-session footer .personal-best,.game.in-session footer #rankings,.game.in-session footer #finish-run{display:none}
.game.in-session.is-playing footer #finish-run{display:block}.game.in-session.is-playing footer #start{display:none}
@media(max-width:600px){
 .game.in-session{--hero-top:clamp(84px,13dvh,108px);--hero-bottom:clamp(90px,14dvh,120px);height:100dvh;min-height:600px;max-width:none;width:100%;margin:0;padding:7px 8px max(7px,env(safe-area-inset-bottom));border:0;border-radius:0;grid-template-rows:var(--hero-top) var(--hero-bottom) 55px minmax(244px,1fr) 27px 44px;gap:6px 8px}
 .game.in-session .art-header{padding:24px 24px 0 0}
 .game.in-session .art-header .header-controls{inset:5px 7px auto}
 .game.in-session .play-brand{gap:5px}
 .play-logo-crop{aspect-ratio:4.8;max-width:260px}
 .game.in-session .portrait{padding-top:30px}
 .game.in-session .hair{height:calc(var(--hero-top) + var(--hero-bottom) - 60px);width:calc((var(--hero-top) + var(--hero-bottom) - 60px) * .625)}
 .game.in-session .character-name{font-size:16px;line-height:1.15}
 .game.in-session .character-profession{font-size:9px;margin-top:2px}
 .game.in-session .metrics-panel{padding:0}
 .game.in-session .stats{gap:5px}.game.in-session .stats>div{padding:2px 0 5px}
 .game.in-session .stats span{font-size:8px;letter-spacing:.7px}.game.in-session .stats strong{font-size:clamp(20px,6vw,27px);line-height:1.2}
 .game.in-session .progress-title{font-size:9px;margin-top:8px}.game.in-session .progress-title strong{font-size:24px}.game.in-session .track{height:4px;margin:6px 0}.game.in-session .milestones{font-size:9px}
 .game.in-session .suggestion{height:55px;gap:10px;padding:4px}
 .game.in-session .hint-swatch{width:36px;height:36px}.game.in-session .suggestion .hint-eyebrow{font-size:8px;letter-spacing:1.4px}.game.in-session .suggestion strong{font-size:17px}.hint-ingredient{font-size:10px}
 .game.in-session .board{grid-template-columns:minmax(0,1fr) 14% minmax(0,1fr);gap:6px;padding-top:5px}
 .game.in-session .rack{gap:9px 3px}
 .game.in-session .tube{padding:0 2px 4px;border-radius:4px 4px 17px 17px}
 .tube .layer .ingredient-mark{width:18px;height:100%;max-height:19px}.tube .layer svg{width:16px;height:100%;max-height:19px}
 .game.in-session .center-caption{font-size:8px;letter-spacing:.6px;margin-bottom:11px}.game.in-session .center-caption strong{font-size:19px;margin-top:3px}
 .game.in-session .receiver{height:calc(100% - 65px);min-height:155px;max-height:360px;width:94%}
 .game.in-session .message{height:27px;font-size:9px;line-height:1.35}
 .game.in-session footer{height:44px;grid-template-columns:66px minmax(0,1fr);gap:9px}.game.in-session footer .primary,.game.in-session footer .secondary{font-size:16px}.game.in-session .phone-menu{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.hair.changed,.cream-effect.play{animation:none}.track>div{transition:none}}

/* v1.7.1: a single brand signature, ingredient names and two short auth steps. */
.game:not(.in-session) .brand.brand-art{display:grid;place-items:center;background:#fff9ed url('assets/lab-paper-v7.webp') center top/100% auto no-repeat}
.lobby-logo-crop{width:68%;max-width:450px;aspect-ratio:4.8;position:relative;overflow:hidden;mix-blend-mode:multiply}
.game:not(.in-session) .brand.brand-art .lobby-logo-crop img{position:absolute;display:block;width:115%;height:auto;max-height:none;max-width:none;left:-7.5%;top:-83%;object-fit:initial}
.game.in-session .suggestion{justify-content:center}
.game.in-session .suggestion strong{font-size:19px;line-height:1.25}
.auth-card{padding:18px;border:1px solid #e7c9b3;border-radius:14px}
.auth-card h2{font:400 26px/1.2 Georgia;margin:0 0 8px}
.auth-card .auth-intro{font:13px/1.5 system-ui;margin:0 0 20px}
.auth-card label{font:12px/1.45 system-ui}
.auth-card input:not([type=checkbox]){margin:6px 0 14px;padding:11px 12px;min-height:46px}
.auth-card .field-note{font:11px/1.4 system-ui;margin:-6px 0 15px}
.auth-card .demo-note{font:11px/1.45 system-ui;margin:0 0 16px;padding:8px 10px}
.auth-card .primary{min-height:46px;padding:10px;font:16px/1.3 Georgia}
.auth-card .auth-later{display:block;width:100%;min-height:44px;text-decoration:none;font:12px system-ui;padding:10px;margin:0}
.auth-card .auth-privacy{display:block;text-align:center;font:11px/1.4 system-ui;color:#806e60}
.auth-card .otp-section{border:0;margin:12px 0 0;padding:0}
.auth-card .otp-section .auth-step{margin:0 0 10px}
@media(max-width:600px){.game.in-session .suggestion strong{font-size:17px}.auth-card{padding:15px}.auth-card h2{font-size:24px}}

.auth-card .auth-code-note{display:block;font:13px/1.5 system-ui;color:#604431;margin:0 0 16px;opacity:1}

/* Fallback for mobile browsers predating dynamic viewport units. */
@supports not (height:100dvh){
 @media(max-width:600px){
  .game{--phone-head:clamp(88px,16vh,144px);--phone-dash:clamp(88px,14vh,112px);height:100vh}
  .game.in-session{--hero-top:clamp(84px,13vh,108px);--hero-bottom:clamp(90px,14vh,120px);height:100vh}
  .game:not(.in-session){height:auto;min-height:100vh}
 }
}