*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#252048;color:#fff}
button{font:inherit}
.app{width:100%;height:100dvh;padding:8px;display:flex;align-items:center;justify-content:center;transition:background .25s ease,color .2s ease;overflow:hidden}
.screen{width:100%;max-width:560px;height:calc(100dvh - 16px);display:none;flex-direction:column;gap:8px;justify-content:space-between;overflow:hidden}
.screen.active{display:flex}
.mini{align-self:flex-start;padding:7px 10px;border:3px solid rgba(255,255,255,.36);background:rgba(255,255,255,.18);border-radius:999px;font-size:clamp(.62rem,2.2vw,.76rem);font-weight:1000;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
h1,h2{margin:0;text-transform:uppercase;letter-spacing:-.08em;line-height:.78;font-weight:1000;text-shadow:5px 5px 0 rgba(0,0,0,.22);max-width:100%;overflow:hidden}
h1{font-size:clamp(3.5rem,17vh,6.6rem)}
h2{font-size:clamp(2.3rem,11vh,4.7rem);text-align:center}
.line{margin:0;font-size:clamp(1rem,3vh,1.35rem);line-height:1.08;font-weight:950;text-align:center;text-shadow:3px 3px 0 rgba(0,0,0,.18);max-width:100%}
button{min-width:0;min-height:52px;border:4px solid #111;border-radius:20px;background:#fff4b7;color:#16110a;padding:10px;font-weight:1000;font-size:clamp(.95rem,2.8vh,1.2rem);box-shadow:4px 4px 0 rgba(0,0,0,.30);overflow:hidden;text-overflow:ellipsis}
button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.30)}
.big{min-height:78px;border-radius:26px;background:#ffcf3f;font-size:clamp(1.2rem,4vh,2rem);text-transform:uppercase}
.green{background:#7cff9b}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-width:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.purple{background:linear-gradient(145deg,#252048,#7b3cff)}
.gold{background:linear-gradient(145deg,#6d421b,#f0b53d);color:#1d1300}
.green-bg{background:linear-gradient(145deg,#0d7345,#68e67b);color:#061b0b}
.blue{background:linear-gradient(145deg,#123d8a,#54c7ff)}
.red{background:linear-gradient(145deg,#76182a,#f05b69)}
.suspect-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0}
.suspect-card{background:#fffdf0;color:#111;border:4px solid #111;border-radius:22px;padding:6px;box-shadow:4px 4px 0 rgba(0,0,0,.30);display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:flex-start;min-width:0}
.suspect-card.target{outline:5px solid #ffcf3f;outline-offset:-3px;background:#fff2b7}
.suspect-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:3px solid #111;background:#ddd}
.suspect-card .name{font-size:clamp(.76rem,2.1vh,1rem);font-weight:1000;line-height:1.05;text-align:center}
.suspect-card .tag{font-size:clamp(.62rem,1.8vh,.8rem);font-weight:900;opacity:.8;text-transform:uppercase;letter-spacing:.04em}
.target-strip{display:flex;gap:10px;align-items:center;background:#fffdf0;color:#111;border:4px solid #111;border-radius:22px;padding:8px;box-shadow:4px 4px 0 rgba(0,0,0,.30)}
.target-portrait{width:90px;height:90px;object-fit:cover;border-radius:16px;border:3px solid #111;background:#ddd;flex:0 0 auto}
.target-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.target-name{font-size:clamp(1rem,3vh,1.3rem);font-weight:1000;line-height:1.02}
.target-question{font-size:clamp(.9rem,2.6vh,1.1rem);font-weight:900;opacity:.85}
.clue-card{flex:1;min-height:0;background:#fffdf0;color:#111;border-radius:28px;font-size:clamp(1.05rem,3.8vh,1.7rem);line-height:1.1;white-space:normal;text-align:left;padding:16px}
.target-card.single{display:flex;flex-direction:column;align-items:center;gap:6px}
.single-portrait{width:min(42vw,180px);aspect-ratio:1/1;object-fit:cover;border-radius:22px;border:4px solid #111;background:#fffdf0;box-shadow:4px 4px 0 rgba(0,0,0,.30)}
.single-name{font-size:clamp(1.1rem,3.3vh,1.5rem);font-weight:1000;text-align:center;line-height:1.05;text-shadow:3px 3px 0 rgba(0,0,0,.18)}
.small-gap{gap:4px}
@media(max-height:740px){.screen{gap:6px}.line{font-size:.95rem}.suspect-card .name{font-size:.72rem}.target-portrait{width:80px;height:80px}.single-portrait{width:min(34vw,145px)}button{min-height:46px;padding:8px}.big{min-height:66px}h2{font-size:clamp(2rem,9.5vh,4rem)}.clue-card{padding:12px;font-size:clamp(1rem,3.1vh,1.45rem)}}


/* V1.7 compact home screen fix */
#home {
  justify-content:space-between;
  gap:10px;
}

#home h1 {
  font-size:clamp(3.05rem, 11.2vh, 5.2rem);
  line-height:.82;
  letter-spacing:-.075em;
  max-width:100%;
  white-space:normal;
  overflow:visible;
}

#home .line {
  font-size:clamp(.95rem, 2.7vh, 1.25rem);
  line-height:1.08;
}

#home .big {
  min-height:72px;
  font-size:clamp(1.35rem, 4vh, 2rem);
}

#home button:not(.big) {
  min-height:58px;
}

@media(max-height:760px){
  #home h1 {
    font-size:clamp(2.65rem, 10vh, 4.4rem);
  }
  #home .big {
    min-height:64px;
  }
  #home button:not(.big) {
    min-height:50px;
  }
}

@media(max-width:390px){
  #home h1 {
    font-size:clamp(2.65rem, 18vw, 4.2rem);
    letter-spacing:-.06em;
  }
}


/* V1.8 polish: tappable suspects, target badge, noir locations */
.suspect-card {
  position:relative;
  min-height:0;
  cursor:pointer;
  text-transform:none;
}
.suspect-card:active {
  transform:translate(2px,2px);
}
.portrait-wrap {
  position:relative;
  width:100%;
}
.portrait-wrap img {
  display:block;
}
.target-badge {
  position:absolute;
  left:6px;
  top:6px;
  padding:5px 8px;
  border:3px solid #111;
  border-radius:999px;
  background:#ffcf3f;
  color:#111;
  font-size:clamp(.58rem,1.7vh,.75rem);
  font-weight:1000;
  letter-spacing:.08em;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.suspect-card.target {
  outline:6px solid #ffcf3f;
  outline-offset:-4px;
}
.suspect-card.target .name {
  color:#111;
}
#caseQuestion {
  font-size:clamp(.92rem,2.7vh,1.25rem);
}


/* V1.9 skill/music home polish */
#home .two button {
  min-height:52px;
  font-size:clamp(.9rem,2.6vh,1.1rem);
}
#home .big {
  min-height:68px;
}


/* V2.3 clean accessible noir UI */
html, body {
  background:#05070a;
}

.app {
  background:#05070a;
  padding:0;
}

.screen {
  max-width:560px;
  min-height:100dvh;
  height:100dvh;
}

.noir-home {
  position:relative;
  padding:18px 18px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(207,164,72,.16), transparent 30%),
    linear-gradient(to bottom, rgba(5,7,10,.84), rgba(5,7,10,.96)),
    #05070a;
  color:#f7efd3;
  justify-content:space-between;
  gap:10px;
  overflow:hidden;
}

.noir-home::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:42%;
  background:
    linear-gradient(to bottom, rgba(5,7,10,0), rgba(5,7,10,.92)),
    repeating-linear-gradient(
      90deg,
      rgba(214,166,62,.16) 0 3px,
      transparent 3px 20px
    );
  opacity:.55;
  pointer-events:none;
}

.noir-frame {
  position:absolute;
  inset:10px;
  border:2px solid rgba(188,139,45,.85);
  pointer-events:none;
  z-index:0;
}

.noir-frame::before,
.noir-frame::after {
  content:"";
  position:absolute;
  width:54px;
  height:54px;
  border-color:rgba(214,166,62,.9);
  border-style:solid;
}

.noir-frame::before {
  left:8px;
  top:8px;
  border-width:3px 0 0 3px;
}

.noir-frame::after {
  right:8px;
  bottom:8px;
  border-width:0 3px 3px 0;
}

.noir-home > *:not(.noir-frame) {
  position:relative;
  z-index:1;
}

.noir-home .top-pill {
  align-self:center;
  max-width:100%;
  border-color:#b8892d;
  color:#f7efd3;
  background:rgba(8,9,11,.78);
  box-shadow:0 3px 0 rgba(0,0,0,.55);
}

.title-block {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:0;
}

.noir-home h1 {
  color:#f6edcf;
  font-size:clamp(3.2rem, 11.5vh, 5.4rem);
  line-height:.82;
  letter-spacing:-.045em;
  text-align:center;
  text-shadow:
    4px 4px 0 rgba(0,0,0,.75),
    0 0 18px rgba(218,170,70,.22);
  white-space:normal;
  overflow:visible;
}

.noir-home .line {
  max-width:92%;
  margin:0 auto;
  color:#f6edcf;
  font-size:clamp(1rem, 2.8vh, 1.25rem);
  line-height:1.15;
  text-shadow:3px 3px 0 rgba(0,0,0,.75);
}

.noir-home button {
  border-radius:18px;
  text-transform:none;
  letter-spacing:0;
}

.noir-primary {
  min-height:82px;
  border:4px solid #111 !important;
  background:linear-gradient(to bottom, #dfbd61, #bc8530) !important;
  color:#090705 !important;
  font-size:clamp(1.7rem, 5vh, 2.45rem) !important;
  text-transform:uppercase !important;
  box-shadow:5px 5px 0 rgba(0,0,0,.72) !important;
}

.noir-secondary {
  min-height:64px;
  border:3px solid #b8892d !important;
  background:rgba(8,9,11,.94) !important;
  color:#f6edcf !important;
  font-size:clamp(1rem, 3vh, 1.25rem) !important;
  box-shadow:4px 4px 0 rgba(0,0,0,.72) !important;
}

.noir-secondary span {
  display:block;
  margin-top:3px;
  font-size:.72em;
  opacity:.88;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.noir-secondary.wide {
  min-height:66px;
  font-size:clamp(1.25rem,3.6vh,1.65rem) !important;
}

.noir-home .two {
  gap:10px;
}

.screen:not(.noir-home) {
  background:
    radial-gradient(circle at 50% 0%, rgba(207,164,72,.12), transparent 32%),
    linear-gradient(to bottom, #05070a, #0a0d10);
  color:#f7efd3;
  border-left:2px solid rgba(188,139,45,.55);
  border-right:2px solid rgba(188,139,45,.55);
}

.screen:not(.noir-home)::before {
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid rgba(188,139,45,.45);
  pointer-events:none;
  z-index:-1;
}

.screen:not(.noir-home) .mini {
  border-color:#b8892d;
  background:rgba(8,9,11,.86);
  color:#f7efd3;
}

.screen:not(.noir-home) h2,
.screen:not(.noir-home) .line,
.screen:not(.noir-home) .single-name {
  color:#f7efd3;
  text-shadow:3px 3px 0 rgba(0,0,0,.75);
}

.screen:not(.noir-home) button:not(.suspect-card) {
  background:#0c0d0d;
  color:#f5ecd0;
  border-color:#b8892d;
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
}

.screen:not(.noir-home) button.green {
  background:#c39739;
  color:#0b0702;
  border-color:#f0d071;
}

.screen:not(.noir-home) .big {
  background:#c39739;
  color:#0b0702;
  border-color:#f0d071;
}

.clue-card,
.target-strip,
.suspect-card {
  background:rgba(245,236,208,.96) !important;
  color:#111 !important;
}

#caseScreen h2 {
  font-size:clamp(1.9rem,7.5vh,3.8rem);
}

#caseQuestion {
  font-size:clamp(.95rem,2.8vh,1.25rem);
}

.suspect-gallery {
  max-height:34vh;
}

@media(max-height:760px){
  .noir-home {
    padding:14px 16px 14px;
    gap:8px;
  }
  .noir-home h1 {
    font-size:clamp(2.75rem, 10vh, 4.4rem);
  }
  .noir-primary {
    min-height:68px;
  }
  .noir-secondary {
    min-height:54px;
  }
  .noir-secondary.wide {
    min-height:56px;
  }
  .noir-home .line {
    font-size:.98rem;
  }
}

@media(max-width:390px){
  .noir-home {
    padding:14px 14px 14px;
  }
  .noir-home h1 {
    font-size:clamp(2.65rem, 16vw, 4rem);
  }
  .noir-secondary {
    font-size:clamp(.88rem, 2.7vh, 1.08rem) !important;
  }
}


/* V2.4: use the chosen noir art as the home background, with clean real buttons */
.app {
  background:#030508;
  padding:0;
}

.noir-art-home {
  position:relative;
  display:none;
  width:100%;
  max-width:560px;
  height:100dvh;
  padding:0;
  overflow:hidden;
  background:#030508;
}

.noir-art-home.active {
  display:block;
}

.noir-art-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
  pointer-events:none;
}

.home-controls {
  position:absolute;
  left:6%;
  right:6%;
  bottom:5.2%;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.home-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.home-btn {
  border:3px solid #c4943a !important;
  border-radius:18px !important;
  box-shadow:0 5px 0 rgba(0,0,0,.72), 0 0 14px rgba(209,163,70,.16) !important;
  font-weight:1000 !important;
  text-align:center;
  min-width:0 !important;
  letter-spacing:.02em;
}

.home-primary {
  min-height:78px !important;
  background:linear-gradient(to bottom, #e0bd61, #b9822f) !important;
  color:#080604 !important;
  font-size:clamp(1.65rem, 4.9vh, 2.45rem) !important;
  text-transform:uppercase !important;
  border-color:#f0d071 !important;
}

.home-small {
  min-height:64px !important;
  background:rgba(5,7,10,.94) !important;
  color:#f7efd3 !important;
  font-size:clamp(.9rem, 2.75vh, 1.18rem) !important;
  line-height:1.05;
}

.home-small span {
  display:block;
  margin-top:4px;
  font-size:.7em;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.9;
}

.home-wide {
  min-height:66px !important;
  background:rgba(5,7,10,.94) !important;
  color:#f7efd3 !important;
  font-size:clamp(1.2rem, 3.8vh, 1.65rem) !important;
}

.home-btn:active {
  transform:translateY(3px);
  box-shadow:0 2px 0 rgba(0,0,0,.72), 0 0 14px rgba(209,163,70,.16) !important;
}

.home-btn:focus-visible {
  outline:5px solid #fff2a6;
  outline-offset:3px;
}

/* Ensure old home styles don't interfere */
.noir-art-home .mini,
.noir-art-home .title-block,
.noir-art-home .noir-frame {
  display:none !important;
}

/* Inner screens remain simple and readable */
.screen:not(.noir-art-home) {
  background:
    radial-gradient(circle at 50% 0%, rgba(207,164,72,.12), transparent 32%),
    linear-gradient(to bottom, #05070a, #0a0d10);
  color:#f7efd3;
  border-left:2px solid rgba(188,139,45,.55);
  border-right:2px solid rgba(188,139,45,.55);
}

@media(max-height:760px){
  .home-controls {
    bottom:4%;
    gap:9px;
  }
  .home-primary {
    min-height:66px !important;
    font-size:clamp(1.45rem, 4.3vh, 2rem) !important;
  }
  .home-small {
    min-height:54px !important;
  }
  .home-wide {
    min-height:56px !important;
  }
}

@media(max-width:390px){
  .home-controls {
    left:5%;
    right:5%;
    bottom:4.2%;
  }
  .home-row {
    gap:8px;
  }
  .home-small {
    font-size:clamp(.78rem, 2.45vh, 1rem) !important;
  }
}


/* V2.5 fixes: background fit, in-game background, spoken How To Play */
.noir-art-bg {
  object-fit:contain !important;
  object-position:center top !important;
  background:#030508;
}

.noir-art-home {
  background:#030508 !important;
}

/* Move buttons slightly lower and keep them clear of the artwork */
.home-controls {
  bottom:3.5% !important;
  gap:10px !important;
}

.home-primary {
  min-height:70px !important;
}

.home-small {
  min-height:58px !important;
}

.home-wide {
  min-height:58px !important;
}

/* Add a proper background to all game screens without letting it fight the text */
.screen:not(.noir-art-home) {
  background:#030508 !important;
  overflow:hidden;
}

.screen:not(.noir-art-home)::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to bottom, rgba(3,5,8,.62), rgba(3,5,8,.88)),
    url("assets/ui/noir-main-bg.png");
  background-size:cover;
  background-position:center center;
  opacity:.48;
  z-index:-3;
  pointer-events:none;
}

.screen:not(.noir-art-home)::before {
  z-index:-2 !important;
  background:rgba(0,0,0,.18);
}

/* Put readable panels behind core case content */
#caseScreen .line,
#clueScreen .target-strip,
#placeScreen .target-card,
#timeScreen .target-card,
#reviewScreen .target-card,
#resultScreen .target-card,
.spoken-how-screen .how-card {
  position:relative;
  z-index:1;
}

#caseScreen h2 {
  margin-top:7vh;
}

#caseScreen .line {
  background:rgba(0,0,0,.58);
  border:2px solid rgba(196,148,58,.7);
  border-radius:16px;
  padding:10px;
}

/* Spoken How To Play screen */
.spoken-how-screen h2 {
  font-size:clamp(2.1rem, 8vh, 4.4rem);
}

.how-card {
  flex:1;
  min-height:0;
  background:rgba(245,236,208,.96);
  color:#111;
  border:4px solid #111;
  border-radius:26px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
}

.how-icon {
  font-size:clamp(2.8rem, 10vh, 5rem);
  text-align:center;
  line-height:1;
}

.how-card p {
  margin:0;
  font-size:clamp(1.05rem, 3.1vh, 1.45rem);
  line-height:1.12;
  font-weight:1000;
  text-align:center;
}

@media(max-height:760px){
  .home-controls {
    bottom:2.8% !important;
    gap:8px !important;
  }
  .home-primary {
    min-height:60px !important;
  }
  .home-small {
    min-height:50px !important;
  }
  .home-wide {
    min-height:50px !important;
  }
}


/* V2.6 bigger buttons, auto music, verdict stamps */
button {
  min-height:64px;
  font-size:clamp(1.05rem, 3.3vh, 1.38rem);
}

.big {
  min-height:88px;
}

.grid2,
.two,
.three {
  gap:12px;
}

.screen:not(.noir-art-home) button:not(.suspect-card):not(.img-btn),
.screen:not(.noir-home) button:not(.suspect-card):not(.img-btn) {
  min-height:66px;
  border-width:4px;
}

#caseScreen .grid2 button,
#reviewScreen .grid2 button,
#clueScreen .two button,
#clueScreen .three button,
#resultScreen button,
#howScreen button {
  min-height:68px;
  font-size:clamp(1rem, 3.1vh, 1.32rem);
}

#resultTitle {
  display:inline-flex;
  align-self:center;
  justify-content:center;
  align-items:center;
  min-height:120px;
  padding:14px 18px;
  border:6px solid #b8892d;
  border-radius:18px;
  transform:rotate(-4deg);
  background:rgba(6,7,8,.9);
  color:#f7efd3;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:6px 6px 0 rgba(0,0,0,.7), inset 0 0 0 2px rgba(246,237,211,.4);
  font-size:clamp(2.1rem, 8vh, 4.2rem);
}

#resultLine {
  background:rgba(0,0,0,.64);
  border:3px solid rgba(196,148,58,.8);
  border-radius:18px;
  padding:14px;
  font-size:clamp(1rem, 3.2vh, 1.4rem);
}

.result-actions {
  grid-template-columns:1fr 1fr 1fr;
}

#resultRetryBtn {
  background:#0c0d0d !important;
  color:#f5ecd0 !important;
}

@media(max-height:760px){
  button {
    min-height:56px;
  }
  .big {
    min-height:72px;
  }
  #caseScreen .grid2 button,
  #reviewScreen .grid2 button,
  #clueScreen .two button,
  #clueScreen .three button,
  #resultScreen button,
  #howScreen button {
    min-height:56px;
  }
  #resultTitle {
    min-height:90px;
    font-size:clamp(1.7rem, 6.5vh, 3.4rem);
  }
}

@media(max-width:390px){
  #resultScreen button {
    font-size:clamp(.82rem, 2.55vh, 1rem);
  }
}


/* V2.7 accessibility button bump */
#clueScreen .three,
#clueScreen .two,
#reviewScreen .grid2,
#caseScreen .grid2,
#resultScreen .result-actions,
#howScreen .two {
  gap:10px;
}

#clueScreen .three button,
#clueScreen .two button,
#reviewScreen .grid2 button,
#caseScreen .grid2 button,
#resultScreen button,
#howScreen button,
#placeBackBtn,
#timeBackBtn {
  min-height:74px !important;
  font-size:clamp(1.08rem, 3.35vh, 1.42rem) !important;
  border-radius:18px !important;
  border-width:4px !important;
  padding:10px 8px !important;
}

/* Let the clue card give a little space back to the larger controls */
#clueScreen .clue-card {
  flex:0.92;
}

/* Make main home controls slightly easier too */
.home-primary {
  min-height:76px !important;
}
.home-small,
.home-wide {
  min-height:64px !important;
}

@media(max-height:760px){
  #clueScreen .three button,
  #clueScreen .two button,
  #reviewScreen .grid2 button,
  #caseScreen .grid2 button,
  #resultScreen button,
  #howScreen button,
  #placeBackBtn,
  #timeBackBtn {
    min-height:62px !important;
    font-size:clamp(.95rem, 2.9vh, 1.18rem) !important;
  }

  #clueScreen .clue-card {
    flex:0.82;
  }

  .home-primary {
    min-height:66px !important;
  }
  .home-small,
  .home-wide {
    min-height:56px !important;
  }
}

@media(max-width:390px){
  #clueScreen .three button,
  #clueScreen .two button {
    font-size:clamp(.9rem, 2.8vh, 1.1rem) !important;
  }
}


/* V2.8 larger accessible buttons */

/* Main menu: larger, easier-to-hit controls */
.home-controls {
  left:5% !important;
  right:5% !important;
  bottom:3.2% !important;
  gap:14px !important;
}

.home-primary {
  min-height:92px !important;
  font-size:clamp(1.9rem, 5.5vh, 2.8rem) !important;
  border-radius:20px !important;
}

.home-row {
  gap:12px !important;
}

.home-small {
  min-height:76px !important;
  font-size:clamp(1rem, 3.2vh, 1.3rem) !important;
  border-radius:18px !important;
}

.home-small span {
  font-size:.74em !important;
}

.home-wide {
  min-height:76px !important;
  font-size:clamp(1.35rem, 4.2vh, 1.9rem) !important;
  border-radius:18px !important;
}

/* Case screen: bigger bottom controls */
#caseScreen .grid2 {
  gap:12px !important;
}

#caseScreen .grid2 button {
  min-height:82px !important;
  font-size:clamp(1.08rem, 3.35vh, 1.45rem) !important;
  border-radius:18px !important;
}

/* Clue screen: bigger controls without losing the clue card */
#clueScreen .three,
#clueScreen .two {
  gap:10px !important;
}

#clueScreen .three button,
#clueScreen .two button {
  min-height:82px !important;
  font-size:clamp(1.04rem, 3.25vh, 1.35rem) !important;
  border-radius:18px !important;
  padding:10px 8px !important;
}

#clueScreen .clue-card {
  flex:0.78 !important;
}

/* Answer/review/result buttons match the bigger style */
#reviewScreen .grid2 button,
#resultScreen button,
#howScreen button,
#placeBackBtn,
#timeBackBtn {
  min-height:80px !important;
  font-size:clamp(1.05rem, 3.25vh, 1.4rem) !important;
}

/* Keep small phones safe */
@media(max-height:760px){
  .home-controls {
    bottom:2.4% !important;
    gap:10px !important;
  }

  .home-primary {
    min-height:74px !important;
    font-size:clamp(1.55rem, 4.6vh, 2.15rem) !important;
  }

  .home-small,
  .home-wide {
    min-height:62px !important;
  }

  #caseScreen .grid2 button,
  #clueScreen .three button,
  #clueScreen .two button,
  #reviewScreen .grid2 button,
  #resultScreen button,
  #howScreen button,
  #placeBackBtn,
  #timeBackBtn {
    min-height:66px !important;
    font-size:clamp(.95rem, 2.9vh, 1.2rem) !important;
  }

  #clueScreen .clue-card {
    flex:0.68 !important;
  }
}

@media(max-width:390px){
  .home-controls {
    left:4.5% !important;
    right:4.5% !important;
  }

  .home-small {
    font-size:clamp(.86rem, 2.7vh, 1.05rem) !important;
  }

  #clueScreen .three button,
  #clueScreen .two button {
    font-size:clamp(.86rem, 2.65vh, 1.08rem) !important;
  }
}


/* V2.9 square accessibility buttons */

/* Make game-control buttons square-ish and easier to hit */
#caseScreen .grid2,
#reviewScreen .grid2 {
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
}

#caseScreen .grid2 button,
#reviewScreen .grid2 button {
  min-height:96px !important;
  aspect-ratio:2.15 / 1 !important;
  border-radius:16px !important;
  font-size:clamp(1.1rem, 3.4vh, 1.45rem) !important;
  line-height:1.05 !important;
}

/* Clue screen: chunky square-like controls */
#clueScreen .three {
  grid-template-columns:1fr 1fr 1fr !important;
  gap:10px !important;
}

#clueScreen .two {
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

#clueScreen .three button {
  min-height:88px !important;
  aspect-ratio:1.25 / 1 !important;
  border-radius:16px !important;
  font-size:clamp(.95rem, 3vh, 1.2rem) !important;
  line-height:1.05 !important;
}

#clueScreen .two button {
  min-height:92px !important;
  aspect-ratio:2 / 1 !important;
  border-radius:16px !important;
  font-size:clamp(1.05rem, 3.2vh, 1.35rem) !important;
}

/* Place/time answer screens */
#placeButtons button,
#timeButtons button {
  min-height:104px !important;
  aspect-ratio:1.9 / 1 !important;
  border-radius:18px !important;
  font-size:clamp(1.2rem, 3.8vh, 1.65rem) !important;
}

#placeBackBtn,
#timeBackBtn {
  min-height:88px !important;
  border-radius:16px !important;
}

/* Result screen: big clear action buttons */
#resultScreen .result-actions {
  grid-template-columns:1fr 1fr 1fr !important;
  gap:10px !important;
}

#resultScreen .result-actions button {
  min-height:88px !important;
  aspect-ratio:1.2 / 1 !important;
  border-radius:16px !important;
  font-size:clamp(.88rem, 2.8vh, 1.15rem) !important;
  line-height:1.05 !important;
}

/* How to play buttons */
#howScreen .two button {
  min-height:96px !important;
  aspect-ratio:2 / 1 !important;
  border-radius:16px !important;
}

/* Home screen buttons: keep large, more block-like */
.home-primary {
  min-height:96px !important;
  border-radius:18px !important;
}

.home-small,
.home-wide {
  min-height:82px !important;
  border-radius:16px !important;
}

/* Give space back from cards where square controls need it */
#clueScreen .clue-card {
  flex:0.62 !important;
}

#caseScreen h2 {
  margin-top:5vh !important;
}

/* Small phone safety */
@media(max-height:760px){
  #caseScreen .grid2 button,
  #reviewScreen .grid2 button {
    min-height:78px !important;
  }

  #clueScreen .three button {
    min-height:72px !important;
    font-size:clamp(.82rem, 2.65vh, 1.02rem) !important;
  }

  #clueScreen .two button {
    min-height:76px !important;
  }

  #placeButtons button,
  #timeButtons button {
    min-height:84px !important;
  }

  #resultScreen .result-actions button {
    min-height:72px !important;
    font-size:clamp(.76rem, 2.45vh, .95rem) !important;
  }

  #howScreen .two button {
    min-height:76px !important;
  }

  .home-primary {
    min-height:78px !important;
  }

  .home-small,
  .home-wide {
    min-height:66px !important;
  }

  #clueScreen .clue-card {
    flex:0.54 !important;
  }
}

/* Very narrow screens: avoid text clipping */
@media(max-width:390px){
  #caseScreen .grid2 button,
  #reviewScreen .grid2 button,
  #clueScreen .two button {
    font-size:clamp(.92rem, 2.85vh, 1.12rem) !important;
  }

  #resultScreen .result-actions button {
    font-size:clamp(.7rem, 2.3vh, .88rem) !important;
  }
}

/* Global Back to Menu button */
#globalBackToMenuBtn {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  z-index: 9999;
  padding: 8px 12px;
  border: 1px solid #d6a13a;
  border-radius: 10px;
  background: #050607;
  color: #fff4d6;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(214, 161, 58, 0.35);
}