/* Separate mobile composition; original desktop selectors remain intact. */
.mobile-brand-logo{display:none}
@media(max-width:700px){.brand-dot{display:none}}
@media(max-width:700px) and (min-height:480px){
  body{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:calc(8px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#d8f2fb,#b7e7f7);gap:0}
  body:before,body:after{opacity:.38}
  .wrap{width:100%;max-width:500px}
  .site-header{position:relative;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;border:0;min-height:0}
  .identity{width:100%;max-width:100%;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:3px}
  .identity #avatar{width:60px;height:60px;border:2px solid var(--ink)}
  .identity>span{display:flex;flex-direction:column;align-items:center;width:100%}
  .identity .mobile-brand-logo{display:block;width:236px;max-width:72%;height:auto;border:0;border-radius:0;box-shadow:none;object-fit:contain;margin:-13px 0 -20px}
  .identity strong{display:none}
  .identity small{font:700 11px/1.3 var(--body);margin:0;color:var(--ink)}
  #language{position:absolute;right:0;top:2px;width:52px;height:44px;padding:0;min-height:44px;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 49'%3E%3Cpath d='M15 40C8 43 2 37 5 31C0 27 3 19 9 19C6 11 13 6 20 10C22 1 33 1 38 9C46 3 55 9 52 16C61 15 65 24 59 29C65 36 58 44 51 41C47 47 37 47 32 41C26 47 17 47 15 40Z' fill='%23fffdf4' stroke='%23172135' stroke-width='2.2'/%3E%3C/svg%3E") center/100% 100% no-repeat;box-shadow:none;font:800 11px/1 var(--body)}
  main.wrap{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:4px}
  .title-row{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .portfolio-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0 0 7px}
  .machine-column{flex:1;min-height:0;container-type:size;justify-content:center}
  .slot-stage{flex:0 0 auto;width:min(80cqw,calc(100cqh - 66px),280px);max-width:none;aspect-ratio:1;margin:0}
  .machine-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-top:4px;width:100%}
  .lever-hint{font:700 11px/1.3 var(--body);margin:0;text-align:center;color:var(--ink)}
  .explore-controls{display:grid;grid-template-columns:36px auto 36px;justify-content:center;align-items:center;gap:8px;height:40px;max-width:100%}
  .progress-summary{width:36px;justify-content:center;flex-direction:row;align-items:center;margin:0;gap:0;font-variant-numeric:tabular-nums}
  .progress-figures{gap:3px}
  .progress-figures strong{font:800 14px/1 var(--body)}
  .progress-figures span{font:800 12px/1 var(--body)}
  .progress-summary>div:last-child{display:none}
  .area-picker{display:flex;gap:4px;margin:0}
  .area-picker button{flex:0 0 36px;width:36px;height:36px;padding:0;background:var(--paper);border:1.5px solid var(--ink);font:800 12px/1 var(--body);box-shadow:none}
  .area-picker button.active{background:var(--yellow);box-shadow:none}
  #reset{width:36px;height:40px;min-height:40px;padding:0;font-size:0;text-decoration:none;color:var(--ink);justify-self:center}
  #reset:before{content:'↺';font:800 24px/1 var(--body)}
  .cabinet-marquee{left:16%;right:16%;font-size:clamp(10px,6.3cqw,25px);-webkit-text-stroke:.7px var(--ink);text-shadow:0 1px 0 #84b7df}
  .cabinet-plaque{font-size:clamp(8px,4.8cqw,16px);letter-spacing:.4px}
  .reel-cell{font-size:clamp(12px,9cqw,29px);-webkit-text-stroke:.5px var(--ink)}
  .reel-cell[data-symbol="7"]{font-size:clamp(14px,11cqw,35px)}
  .reel-cell[data-symbol="BAR"]{font-size:clamp(7px,4.2cqw,14px);letter-spacing:-.3px}
  .lever{min-width:44px;min-height:44px}
  .insight-cloud{flex:0 0 auto;width:100%;padding:15px 18px 14px;border:2px solid var(--ink);border-radius:30px;text-align:center}
  .insight-cloud:before{top:-11px;height:14px;width:44px;left:50%;transform:translateX(-50%);border-width:2px}
  .insight-cloud:after{bottom:-8px;height:12px;width:38px;left:50%;right:auto;transform:translateX(-50%);border-width:2px}
  .insight-top,.perspective-symbol,.card-foot,.card-actions .secondary{display:none}
  .insight-cloud h2{font:800 20px/1.16 var(--body);letter-spacing:-.3px;padding:0;margin:0 0 8px;color:var(--ink)}
  .insight-cloud>p{font:500 14px/1.45 var(--body);color:var(--ink);max-width:none;margin:0 0 12px}
  .card-actions{justify-content:center;gap:0}
  .card-actions .primary{width:190px;min-height:44px;padding:10px 16px;font:800 14px/1.2 var(--body);border-radius:22px;box-shadow:0 2px 0 var(--ink)}
  .card-actions .primary:disabled{font-size:12px;white-space:nowrap;padding-inline:8px}
  .insight-cloud #skip-animation{position:absolute;right:16px;bottom:18px;width:32px;height:36px;min-height:36px;margin:0;padding:0;font-size:0;text-decoration:none;border:1.5px solid var(--ink);border-radius:16px;background:var(--paper)}
  .insight-cloud #skip-animation:before{content:'»';font:800 22px/1 var(--body)}
  .insight-cloud.revealed{animation:one-screen-reveal .3s ease-out}
  footer.wrap{flex:0 0 auto;display:block;border:0;padding:6px 0 0;margin-top:3px;letter-spacing:0}
  footer>span{display:none}
  nav{display:flex;justify-content:center;gap:9px;width:100%;padding:0 2px 2px}
  nav button{flex:1;min-height:44px;background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:9px 12px;box-shadow:0 2px 0 var(--ink);font:800 13px/1.2 var(--body)}
  nav .nav-cv{background:var(--paper)}
}
@keyframes one-screen-reveal{from{opacity:.55}to{opacity:1}}
@media(max-width:370px) and (min-height:480px){
  .explore-controls{grid-template-columns:32px auto 32px;gap:5px}
  .progress-summary,#reset{width:32px}
  .area-picker{gap:3px}
  .area-picker button{width:34px;height:34px;flex-basis:34px}
  nav{gap:7px}
  nav button{padding-inline:8px;font-size:12px}
}
@media(max-width:700px) and (min-height:480px) and (max-height:620px){
  body{padding-top:6px;padding-bottom:8px}
  .identity{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:6px;width:100%;margin:0}
  .identity #avatar{width:52px;height:52px;flex:0 0 52px}
  .identity>span{grid-column:2;width:100%;min-width:0}
  .identity .mobile-brand-logo{width:216px;max-width:100%;margin-top:-12px;margin-bottom:-15px}
  .identity small{font-size:10px}
  .portfolio-stage{gap:11px;padding-bottom:5px}
  .insight-cloud{padding:12px 14px 11px}
  .insight-cloud h2{font-size:20px;margin-bottom:7px}
  .insight-cloud>p{margin-bottom:10px}
  .card-actions .primary{min-height:42px}
}