/* Bella's Game World — v0.2 iPad and Home Screen polish.
   Isolated here so the original games and their JavaScript remain untouched. */
:root {color-scheme: light}
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-x: none; }
button, a, input[type="button"], input[type="color"], [role="button"] { touch-action: manipulation; }
.bella-hub-bar {
  box-sizing: border-box;
  min-height: 50px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
.bella-hub-bar a {min-height: 42px; padding: 9px 17px; font-size: 14px;}
@media (display-mode: standalone) {
 body {padding-bottom: env(safe-area-inset-bottom);}
 .bella-hub-bar { padding-top: max(6px, env(safe-area-inset-top)); }
}
@supports (-webkit-touch-callout: none) {
 body { min-height: 100dvh; }
}
/* --- Homepage: purposeful, finger-friendly two-by-two game shelf on iPad --- */
body.bella-page-home .wrapper {padding-left: env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
body.bella-page-home .game-card { -webkit-user-select:none;user-select:none;touch-action:manipulation;}
body.bella-page-home .game-card:active {scale:.988}
body.bella-page-home .art img {object-position:center}
@media (min-width: 720px) and (max-width: 1200px) {
 body.bella-page-home .wrapper{width:calc(100% - 34px)}
 body.bella-page-home .nav{padding:12px 0 10px}
 body.bella-page-home .brand-icon{height:44px;width:44px;border-radius:15px;font-size:26px}
 body.bella-page-home .hero{min-height:175px;padding:22px 29px;border-radius:29px;grid-template-columns:1.25fr .75fr}
 body.bella-page-home h1{font-size:clamp(36px,4.35vw,54px);line-height:1.05;letter-spacing:-1.6px;margin:10px 0 9px}
 body.bella-page-home .hero p{font-size:14px;line-height:1.35}
 body.bella-page-home .eyebrow{padding:6px 10px;font-size:10px;letter-spacing:.9px}
 body.bella-page-home .hero-art{height:135px;margin:0}
 body.bella-page-home .hero-rainbow{font-size:102px;top:-10px;right:12%}
 body.bella-page-home .hero-unicorn{font-size:70px;top:25px;left:4%}
 body.bella-page-home .hero-star{font-size:32px;top:17px;right:7%}
 body.bella-page-home .hero-heart{font-size:28px;right:16%;bottom:3px}
 body.bella-page-home .hero-spark{font-size:24px}
 body.bella-page-home .section-head{margin:17px 2px 13px}
 body.bella-page-home .section-head h2{font-size:26px}
 body.bella-page-home .section-head p{font-size:12px;margin-top:3px}
 body.bella-page-home .surprise{min-height:44px;padding:8px 15px}
 body.bella-page-home .game-grid{gap:14px}
 body.bella-page-home .game-card{min-height:215px;border-radius:24px}
 body.bella-page-home .card-content{min-height:215px;padding:19px 0 18px 22px;width:57%}
 body.bella-page-home .game-card h3{font-size:clamp(24px,2.7vw,30px);margin:10px 0 7px;letter-spacing:-.6px}
 body.bella-page-home .game-card p{font-size:12px;line-height:1.33;margin-bottom:8px;max-width:210px}
 body.bella-page-home .card-tag{padding:6px 9px;font-size:9px;letter-spacing:.4px}
 body.bella-page-home .play-chip{padding:9px 13px;font-size:12px}
 body.bella-page-home .art{width:44%}
 body.bella-page-home .art img{top:16%;left:3%;height:73%;width:91%;border-width:4px;border-radius:16px}
 body.bella-page-home .art .float-emoji{font-size:42px}
 body.bella-page-home .cta-bottom{margin:17px 0 6px;padding:12px 16px}
 body.bella-page-home .cta-bottom strong{font-size:15px}
 body.bella-page-home footer{padding:10px 0 19px}
}
@media (min-width: 720px) and (max-height: 850px) and (orientation: landscape) {
 body.bella-page-home .nav{padding:7px 0}
 body.bella-page-home .hero{min-height:131px;padding:13px 26px;border-radius:25px}
 body.bella-page-home h1{font-size:clamp(33px,3.9vw,45px);margin:7px 0 4px}
 body.bella-page-home .hero p{font-size:12px}
 body.bella-page-home .hero-art{height:108px}
 body.bella-page-home .hero-rainbow{font-size:88px;top:-12px}
 body.bella-page-home .hero-unicorn{font-size:59px;top:19px}
 body.bella-page-home .hero-star{font-size:29px}
 body.bella-page-home .section-head{margin:11px 2px 9px}
 body.bella-page-home .section-head h2{font-size:24px}
 body.bella-page-home .game-grid{gap:10px}
 body.bella-page-home .game-card{min-height:190px;border-radius:23px}
 body.bella-page-home .card-content{min-height:190px;padding:15px 0 15px 21px}
 body.bella-page-home .game-card h3{font-size:25px;margin:9px 0 5px}
 body.bella-page-home .game-card p{font-size:11px;line-height:1.25;margin-bottom:6px}
 body.bella-page-home .art img{height:70%;top:19%}
 body.bella-page-home .play-chip{padding:7px 12px}
 body.bella-page-home .cta-bottom{display:none}
 body.bella-page-home footer{font-size:10px;padding:8px 0}
}
@media (max-width:719px) {
 body.bella-page-home .hero {padding:24px 20px 14px}
 body.bella-page-home .hero-art {height:108px}
 body.bella-page-home .hero-rainbow{font-size:100px;top:-12px}
 body.bella-page-home .hero-unicorn{font-size:70px;top:16px}
 body.bella-page-home .section-head{margin:17px 2px 12px}
 body.bella-page-home .section-head h2{font-size:clamp(21px,5.4vw,27px)}
 body.bella-page-home .game-card {min-height:216px}
 body.bella-page-home .card-content{min-height:216px}
 body.bella-page-home .art img {object-fit:cover}
 body.bella-page-home .cta-doodles{display:none}
}
/* --- All games: conserve the iPad's vertical space, preserve large tap targets. --- */
@media (min-width: 720px) and (max-width: 1199px) {
 body.bella-page-unicorn header {padding:8px 15px}
 body.bella-page-unicorn .main {padding:0 14px 15px;gap:12px;grid-template-columns:minmax(238px,29%) minmax(0,1fr)}
 body.bella-page-unicorn .panel {min-height:0;max-height:calc(100dvh - 135px);padding:12px;border-radius:20px}
 body.bella-page-unicorn .stage-wrap {padding:8px;border-radius:20px}
 body.bella-page-unicorn .stage-top {min-height:36px;padding:3px 4px 8px}
 body.bella-page-unicorn .intro-card {width:min(55%,340px);padding:12px}
 body.bella-page-unicorn.playing .main {grid-template-columns:1fr}
 body.bella-page-paper .app {padding:10px 14px 22px}
 body.bella-page-paper .topbar {margin-bottom:10px;gap:10px}
 body.bella-page-paper .main {grid-template-columns:minmax(235px,32%) minmax(0,1fr);gap:12px}
 body.bella-page-paper .wardrobe {max-height:calc(100dvh - 185px);overflow-y:auto;padding:12px}
 body.bella-page-paper .center {min-width:0}
 body.bella-page-paper .designer {grid-column:1/-1}
 body.bella-page-glow .app {padding:8px 12px 24px}
 body.bella-page-glow .topbar {gap:9px;margin-bottom:10px}
 body.bella-page-glow .settings, body.bella-page-glow .makeup-panel {padding:12px}
 body.bella-page-glow .layout {gap:11px}
 body.bella-page-glow .main-stage {padding:9px}
 body.bella-page-glow .portrait-shell {max-width:min(100%,520px)}
 body.bella-page-coding .shell{width:calc(100% - 24px);padding-top:10px}
 body.bella-page-coding .top{margin-bottom:9px}
 body.bella-page-coding .level-strip{margin-bottom:10px}
 body.bella-page-coding .workspace{gap:11px}
 body.bella-page-coding .panel{padding:13px;border-radius:21px}
}
@media (min-width:720px) and (max-width:950px) {
 body.bella-page-unicorn .main {grid-template-columns:1fr}
 body.bella-page-unicorn .stage-wrap{order:0}
 body.bella-page-unicorn .panel{order:1;max-height:none;overflow:visible}
 body.bella-page-glow .layout{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
 body.bella-page-glow .main-stage{grid-column:1;grid-row:1}
 body.bella-page-glow .makeup-panel{grid-column:2;grid-row:1}
 body.bella-page-glow .settings{grid-column:1/-1;grid-row:2}
 body.bella-page-coding .workspace{grid-template-columns:minmax(0,1.06fr) minmax(310px,.94fr)}
 body.bella-page-coding .left,body.bella-page-coding .right {order:initial}
 body.bella-page-coding .world{max-height:360px}
 body.bella-page-coding .lower{grid-template-columns:1fr 1fr}
}
@media (max-width:759px) {
 body.bella-page-paper .wardrobe{order:2;max-height:none;overflow:visible}
 body.bella-page-paper .designer{order:3}
 body.bella-page-unicorn .intro-card {padding:11px;border-radius:17px}
 body.bella-page-glow .topbar {padding-bottom:2px}
 body.bella-page-coding .shell{padding-bottom:max(25px,env(safe-area-inset-bottom))}
}
@media (max-width:419px) {
 .bella-hub-bar span.bella-hub-now {display:none}
 .bella-hub-bar{justify-content:center}
 body.bella-page-home .nav-pill{display:none}
 body.bella-page-home .game-card h3{font-size:26px}
}
/* Print-to-PDF should remain exactly as each game's own print stylesheet defines. */
@media print {.bella-hub-bar{display:none!important}body{padding:0!important}}
/* Keep the entire doll/beauty canvas in view on shorter landscape iPads;
   the tool panels may scroll, but the creation itself should not be cut off. */
@media (min-width:720px) and (max-height:850px) and (orientation:landscape) {
 body.bella-page-paper .scene-card{max-width:min(100%,390px)}
 body.bella-page-paper .app{padding-top:7px}
 body.bella-page-paper .topbar{margin-bottom:9px}
 body.bella-page-glow .portrait-shell{max-width:min(100%,410px)}
 body.bella-page-glow .stage-footer{padding-top:6px}
 body.bella-page-glow .main-stage .stage-top{padding-bottom:6px}
}