:root{--bg:#050505;--cream:#eee4cf;--cream-soft:#cfc4ad;--line:#8f8674;--line-dim:#3a3834;--footer-text:#565656;--counter-text:var(--cream);--red:#c42018}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}
html,body{margin:0;width:100%;height:100%;background:var(--bg);overflow:hidden;position:fixed;inset:0;overscroll-behavior:none;touch-action:manipulation}
body{height:100dvh;background:radial-gradient(circle at center 20%,rgba(255,255,255,.02),transparent 42%),radial-gradient(circle at center 80%,rgba(255,255,255,.012),transparent 52%),var(--bg);color:var(--cream);font-family:Georgia,"Times New Roman",serif}
button{font:inherit;-webkit-user-select:none;user-select:none}
.app{height:100dvh;width:100vw;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.stage{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;align-items:center;padding:max(24px,calc(env(safe-area-inset-top) + 6px)) 22px 18px;text-align:center;overflow:hidden}
h1{margin:clamp(34px,6.5vh,82px) auto 0;width:min(100%,860px);font-family:"UnifrakturCook",Georgia,serif;font-size:clamp(76px,18vw,146px);line-height:.84;letter-spacing:.01em;color:var(--cream);text-shadow:0 1px 0 #fff6dd,0 10px 28px rgba(238,228,207,.12);font-weight:700}
.tagline{margin-top:clamp(12px,1.8vh,22px);font-size:clamp(21px,5.2vw,36px);line-height:1.1;color:var(--cream-soft);opacity:.8}
.dice-stage-3d{position:relative;width:min(100%,760px);height:clamp(260px,40dvh,460px);margin:clamp(10px,1.5vh,24px) auto clamp(4px,1vh,12px);overflow:hidden;min-height:220px}
#sceneWrap{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;touch-action:none}
#sceneWrap canvas{display:block;width:100%!important;height:100%!important}



.controls{display:flex;flex-direction:column;gap:clamp(18px,2.8dvh,28px);align-items:center;margin-bottom:1vh}
.dice-select{display:flex;gap:clamp(18px,6vw,42px);justify-content:center;align-items:flex-end}
.dice-option{appearance:none;background:transparent;border:0;padding:0;color:var(--cream-soft);font-family:Arial,Helvetica,sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:none}
.mini-die{width:clamp(58px,18vw,104px);height:clamp(58px,18vw,104px);border:2px solid var(--line-dim);border-radius:13px;position:relative;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;background:#050505;display:block}
.dice-option.active .mini-die{border-color:var(--cream);box-shadow:0 0 18px rgba(238,228,207,.24),0 0 38px rgba(238,228,207,.08)}
.dice-option:active .mini-die{transform:scale(.97)}
.dice-number{font-size:clamp(26px,7vw,42px);font-weight:700;line-height:1;color:var(--cream-soft)}
.dice-option.active .dice-number{color:var(--cream)}
.pip{width:15%;height:15%;border-radius:50%;background:var(--cream);position:absolute;box-shadow:0 0 12px rgba(238,228,207,.24)}
.center{left:42.5%;top:42.5%}.bottom-left{left:28%;top:58%}.top-right{right:28%;top:28%}
.roll-button{appearance:none;border:2px solid var(--line);border-radius:18px;width:min(100%,720px);height:clamp(68px,10dvh,96px);background:transparent;color:var(--cream);font-family:Georgia,serif;font-weight:700;font-size:clamp(46px,13vw,92px);letter-spacing:.08em;display:flex;justify-content:center;align-items:center;gap:clamp(18px,5vw,32px);cursor:pointer;box-shadow:0 0 0 1px rgba(238,228,207,.08) inset;transition:transform .16s ease,opacity .16s ease}
.roll-button:active{transform:scale(.985)}
.roll-button.rolling{opacity:.72;transform:scale(.99)}
.cube{width:clamp(40px,11vw,68px);height:clamp(40px,11vw,68px);border:2px solid var(--cream);border-radius:8px;position:relative;transform:rotate(-8deg);flex:0 0 auto;box-shadow:0 0 18px rgba(238,228,207,.12)}
.cube .pip{width:12%;height:12%}.p1{left:25%;top:24%}.p2{left:45%;top:24%}.p3{left:65%;top:24%}.p4{left:25%;top:60%}.p5{left:45%;top:60%}.p6{left:65%;top:60%}
.footer{height:calc(104px + env(safe-area-inset-bottom));padding:18px 18px calc(16px + env(safe-area-inset-bottom));text-align:center;color:var(--footer-text);font-family:Georgia,serif;background:linear-gradient(to top,rgba(255,255,255,.045),rgba(255,255,255,.015) 58%,transparent)}
.credit{font-size:clamp(18px,5vw,28px);line-height:1.2}
.credit a{color:inherit;text-underline-offset:4px}
.counter{margin-top:8px;font-size:clamp(14px,4vw,20px);letter-spacing:.08em;text-transform:uppercase;color:var(--counter-text);font-weight:700}
@media (min-width:900px){.stage{padding-left:40px;padding-right:40px}h1{margin-top:clamp(18px,4vh,54px);font-size:clamp(82px,9vw,132px)}.tagline{font-size:clamp(24px,2.6vw,34px)}.dice-stage-3d{height:clamp(260px,34vh,390px);width:min(780px,82vw)}.controls{gap:18px}.mini-die{width:76px;height:76px}.dice-number{font-size:34px}.roll-button{height:76px;font-size:56px;width:min(680px,76vw)}.footer{height:92px;padding-top:12px}.credit{font-size:22px}.counter{font-size:16px}}
@media (max-height:760px){h1{margin-top:3.8vh;font-size:clamp(56px,15vw,104px)}.tagline{font-size:clamp(18px,4.8vw,28px);margin-top:10px}.dice-stage-3d{height:clamp(210px,34dvh,320px);margin:8px auto 0;min-height:190px}.controls{gap:14px;margin-bottom:.4vh}.roll-button{height:clamp(60px,9dvh,78px);font-size:clamp(32px,9vw,56px)}.footer{height:calc(88px + env(safe-area-inset-bottom));padding-top:10px}.mini-die{width:clamp(52px,15vw,82px);height:clamp(52px,15vw,82px)}}

.screen-fade{
  position:fixed;
  inset:0;
  z-index:25;
  pointer-events:none;
  background:rgba(5,5,5,.72);
  opacity:0;
  transition:opacity .35s ease;
}
.screen-fade.show{
  opacity:1;
}


/* Automatic splash/loading gate. */
.intro-gate{
  position:fixed;
  inset:0;
  z-index:90;
  overflow:hidden;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
#sceneWrap.intro-hidden{
  opacity:0!important;
  visibility:hidden;
}
#sceneWrap.intro-moving{
  position:fixed!important;
  z-index:85!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none!important;
  overflow:visible!important;
}


/* v2.1.0 Theme modal + compact action row */
.action-row{
  width:min(86vw,410px);
  display:grid;
  grid-template-columns:minmax(108px,.34fr) minmax(0,.66fr);
  gap:12px;
  align-items:stretch;
}
.action-row .roll-button,
.action-row .theme-button{
  width:100%;
  min-width:0;
  height:clamp(64px,9.4dvh,82px);
  border-radius:18px;
}
.action-row .roll-button{
  border-color:#d72d23;
  background:linear-gradient(180deg,#e03a2e 0%,#b71f18 100%);
  color:#fff0d8;
  font-family:Georgia,serif;
  font-size:clamp(38px,10vw,64px);
  font-weight:700;
  letter-spacing:.055em;
  text-shadow:0 2px 0 rgba(74,0,0,.38);
  box-shadow:
    0 7px 18px rgba(122,15,8,.24),
    0 0 0 1px rgba(255,235,218,.12) inset,
    0 -4px 10px rgba(81,0,0,.16) inset;
}
.theme-button{
  border:2px solid var(--line);
  background:linear-gradient(180deg,#111 0%,#050505 100%);
  color:var(--cream);
  font-family:Georgia,serif;
  font-size:clamp(16px,4.3vw,22px);
  font-weight:700;
  letter-spacing:.06em;
  box-shadow:
    0 7px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(238,228,207,.10) inset,
    0 -4px 10px rgba(0,0,0,.22) inset;
  cursor:pointer;
}
.theme-button:hover,
.action-row .roll-button:hover{
  filter:brightness(1.06);
}
.theme-button:active,
.action-row .roll-button:active{
  transform:translateY(1px) scale(.988);
}

/* Real 10% dice increase without changing the spacing of 1/2/3. */
.dice-stage-3d canvas{
  transform:scale(1.10);
  transform-origin:center center;
}

.theme-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.theme-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.theme-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,4,4,.78);
  backdrop-filter:blur(3px);
}
.theme-modal-card{
  position:relative;
  width:min(86vw,390px);
  padding:28px 22px 22px;
  border:2px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,#111 0%,#060606 100%);
  box-shadow:0 22px 70px rgba(0,0,0,.58),0 0 0 1px rgba(238,228,207,.08) inset;
  color:var(--cream);
  transform:translateY(12px) scale(.97);
  transition:transform .22s ease;
}
.theme-modal.open .theme-modal-card{
  transform:translateY(0) scale(1);
}
.theme-modal-card h2{
  margin:0 0 20px;
  text-align:center;
  font-family:Georgia,serif;
  font-size:clamp(28px,7vw,40px);
  letter-spacing:.04em;
}
.theme-modal-close{
  position:absolute;
  top:10px;
  right:14px;
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:var(--cream-soft);
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.theme-choice{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  border:2px solid var(--line);
  border-radius:14px;
  background:#070707;
  color:var(--cream);
  font-family:Georgia,serif;
  font-size:18px;
  text-align:left;
}
.theme-choice-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--cream);
  box-shadow:0 0 12px rgba(238,228,207,.34);
}
.theme-coming-soon{
  margin-top:12px;
  padding:14px 16px;
  border:1px solid rgba(238,228,207,.18);
  border-radius:14px;
  color:rgba(238,228,207,.40);
  font-family:Georgia,serif;
  font-size:17px;
  text-align:center;
}

@media (orientation:landscape) and (max-height:620px){
  .action-row{
    width:min(100%,340px);
    gap:10px;
  }
  .action-row .roll-button,
  .action-row .theme-button{
    height:clamp(46px,10.8vh,66px);
    border-radius:14px;
  }
  .action-row .roll-button{
    font-size:clamp(30px,8.4vh,48px);
  }
  .theme-button{
    font-size:clamp(12px,3.1vh,17px);
  }
  .theme-modal-card{
    width:min(70vw,360px);
    padding:20px 18px 17px;
  }
}
@media (orientation:landscape) and (max-height:430px){
  .action-row{
    width:min(100%,290px);
    gap:8px;
  }
  .action-row .roll-button,
  .action-row .theme-button{
    height:clamp(40px,10vh,50px);
  }
  .action-row .roll-button{
    font-size:clamp(25px,7.5vh,38px);
  }
}

/* Landscape gets its own two-column game layout. */
@media (orientation: landscape) and (max-height: 620px) {
  .app { height:100dvh; overflow:hidden; display:block; }
  .stage {
    height:100dvh;
    display:grid;
    grid-template-columns:minmax(300px,1.15fr) minmax(260px,.85fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"header header" "dice controls" "footer footer";
    column-gap:clamp(18px,4vw,52px);
    align-items:center;
    padding:max(12px,env(safe-area-inset-top)) max(28px,calc(env(safe-area-inset-right) + 16px)) max(8px,env(safe-area-inset-bottom)) max(28px,calc(env(safe-area-inset-left) + 16px));
    overflow:hidden;
  }
  .app-header{grid-area:header;align-self:start;}
  h1{margin:0 auto;width:min(100%,760px);font-size:clamp(48px,13vh,92px);line-height:.78;}
  .tagline{margin-top:5px;font-size:clamp(16px,4.4vh,30px);line-height:1;}
  .dice-stage-3d{grid-area:dice;width:100%;height:min(58vh,360px);min-height:190px;margin:0;align-self:center;justify-self:stretch;}
  .controls{grid-area:controls;width:min(100%,360px);justify-self:start;align-self:center;gap:clamp(14px,3.2vh,26px);margin:0;}
  .dice-select{width:100%;justify-content:center;gap:clamp(16px,3.8vw,34px);}
  .mini-die{width:clamp(48px,14vh,82px);height:clamp(48px,14vh,82px);border-radius:12px;}
  .dice-number{font-size:clamp(24px,7vh,44px);line-height:.9;}
  .roll-button{width:min(100%,360px);height:clamp(58px,13vh,86px);font-size:clamp(34px,9vh,62px);border-radius:16px;gap:clamp(12px,2.6vw,24px);}
  .cube{width:clamp(34px,8vh,58px);height:clamp(34px,8vh,58px);border-radius:7px;}
  .footer{grid-area:footer;height:auto;padding:2px 18px 0;background:linear-gradient(to top,rgba(255,255,255,.02),rgba(255,255,255,.01) 58%,transparent);}
  .credit{font-size:clamp(14px,3.8vh,24px);line-height:1.05;}
  .counter{margin-top:3px;font-size:clamp(12px,3.4vh,19px);letter-spacing:.07em;}
}
@media (orientation: landscape) and (max-height: 430px) {
  .stage{grid-template-columns:minmax(280px,1.18fr) minmax(230px,.82fr);column-gap:clamp(14px,3vw,32px);padding-top:6px;padding-bottom:5px;}
  h1{font-size:clamp(36px,12vh,58px);}
  .tagline{font-size:clamp(13px,4vh,19px);margin-top:2px;}
  .dice-stage-3d{height:min(54vh,220px);min-height:130px;}
  .controls{width:min(100%,300px);gap:8px;}
  .mini-die{width:clamp(34px,12vh,52px);height:clamp(34px,12vh,52px);border-radius:9px;}
  .dice-number{font-size:clamp(18px,6.4vh,30px);}
  .roll-button{width:min(100%,300px);height:clamp(40px,11vh,56px);font-size:clamp(24px,7.8vh,40px);}
  .cube{width:clamp(26px,7vh,38px);height:clamp(26px,7vh,38px);}
  .credit{font-size:clamp(11px,3.4vh,17px);}
  .counter{font-size:clamp(10px,3vh,14px);}
}


/* v2.1.1 exact action-row matching */
.action-row{
  width:var(--dice-select-width, auto)!important;
  max-width:calc(100vw - 32px);
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(10px,2.5vw,14px)!important;
  margin-inline:auto;
}

.action-row .theme-button,
.action-row .roll-button{
  appearance:none;
  width:100%!important;
  min-width:0!important;
  height:clamp(64px,9.4dvh,82px)!important;
  padding:0 10px!important;
  border-width:2px!important;
  border-style:solid!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-family:Georgia,serif!important;
  font-size:clamp(26px,7vw,42px)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-align:center!important;
  text-shadow:0 2px 0 rgba(0,0,0,.38)!important;
  box-sizing:border-box!important;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease!important;
}

.action-row .theme-button{
  border-color:var(--line)!important;
  color:var(--cream)!important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.045) 22%,
      rgba(20,20,20,.96) 48%,
      #050505 100%)!important;
  box-shadow:
    0 7px 18px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.16) inset,
    0 0 0 1px rgba(238,228,207,.08) inset,
    0 -5px 12px rgba(0,0,0,.28) inset!important;
}

.action-row .roll-button{
  border-color:#e04438!important;
  color:#fff0d8!important;
  background:
    linear-gradient(180deg,
      #f05a4c 0%,
      #dd382c 24%,
      #c4231b 57%,
      #a81712 100%)!important;
  box-shadow:
    0 7px 18px rgba(122,15,8,.28),
    0 1px 0 rgba(255,240,220,.28) inset,
    0 0 0 1px rgba(255,235,218,.12) inset,
    0 -5px 12px rgba(81,0,0,.22) inset!important;
}

.action-row .theme-button:hover,
.action-row .roll-button:hover{
  filter:brightness(1.07);
}

.action-row .theme-button:active,
.action-row .roll-button:active{
  transform:translateY(1px) scale(.988);
}

@media (orientation:landscape) and (max-height:620px){
  .action-row{
    max-width:calc(100vw - 44px);
    gap:10px!important;
  }
  .action-row .theme-button,
  .action-row .roll-button{
    height:clamp(46px,10.8vh,66px)!important;
    border-radius:14px!important;
    font-size:clamp(20px,5.3vh,32px)!important;
  }
}

@media (orientation:landscape) and (max-height:430px){
  .action-row{
    gap:8px!important;
  }
  .action-row .theme-button,
  .action-row .roll-button{
    height:clamp(40px,10vh,50px)!important;
    font-size:clamp(18px,5vh,27px)!important;
  }
}


/* v2.2.0 final responsive UI polish */
:root{
  --content-width:min(86vw,410px);
  --ui-gap:clamp(12px,2.1dvh,22px);
}

/* Keep the complete composition visually centered and consistent. */
.app-header,
.dice-stage-3d,
.controls,
.footer{
  width:100%;
  margin-inline:auto;
}

.app-header{
  max-width:760px;
}

.stage{
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
}

h1{
  width:min(92vw,760px);
  margin-inline:auto;
}

.tagline{
  width:min(88vw,680px);
  margin-inline:auto;
}

/* Dice remain the main element, about 10% larger than the earlier stable scale. */
.dice-stage-3d{
  transform:scale(1.10);
  transform-origin:center center;
  margin-top:clamp(4px,.65dvh,9px);
  margin-bottom:clamp(2px,.4dvh,6px);
}

/* Preserve the natural compact spacing of the three selectors. */
.controls{
  width:var(--content-width);
  gap:var(--ui-gap);
}

.dice-select{
  width:100%;
  justify-content:space-between;
  align-items:flex-end;
  gap:0;
}

/* Theme and Roll must precisely match one another. */
.action-row{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(10px,2.5vw,14px)!important;
  margin:0!important;
}

.action-row .theme-button,
.action-row .roll-button{
  width:100%!important;
  min-width:0!important;
  height:clamp(62px,8.8dvh,78px)!important;
  padding:0 8px!important;
  border-width:2px!important;
  border-style:solid!important;
  border-radius:17px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-family:Georgia,serif!important;
  font-size:clamp(24px,6.3vw,39px)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-align:center!important;
  text-shadow:0 2px 0 rgba(0,0,0,.38)!important;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease!important;
}

.action-row .theme-button{
  color:var(--cream)!important;
  border-color:var(--line)!important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.06) 22%,
      rgba(19,19,19,.98) 50%,
      #050505 100%)!important;
  box-shadow:
    0 7px 18px rgba(0,0,0,.32),
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 0 1px rgba(238,228,207,.09) inset,
    0 -5px 12px rgba(0,0,0,.30) inset!important;
}

.action-row .roll-button{
  color:#fff0d8!important;
  border-color:#e04438!important;
  background:
    linear-gradient(180deg,
      #f26154 0%,
      #df3c30 24%,
      #c6251d 58%,
      #a71812 100%)!important;
  box-shadow:
    0 7px 18px rgba(122,15,8,.30),
    0 1px 0 rgba(255,240,220,.30) inset,
    0 0 0 1px rgba(255,235,218,.13) inset,
    0 -5px 12px rgba(81,0,0,.24) inset!important;
}

.action-row .theme-button:hover,
.action-row .roll-button:hover{
  filter:brightness(1.07);
}

.action-row .theme-button:active,
.action-row .roll-button:active{
  transform:translateY(1px) scale(.988);
}

/* Footer stays readable without stealing too much vertical room. */
.footer{
  padding-top:clamp(3px,.5dvh,7px);
  padding-bottom:max(4px,env(safe-area-inset-bottom));
}

/* Phone portrait: keep everything inside one screen, including Safari chrome changes. */
@media (orientation:portrait) and (max-width:520px){
  .stage{
    min-height:100svh;
    height:100dvh;
    grid-template-rows:auto minmax(0,1fr) auto;
    padding-top:max(7px,env(safe-area-inset-top));
    padding-bottom:max(4px,env(safe-area-inset-bottom));
  }

  h1{
    margin-top:clamp(6px,1.3dvh,14px);
  }

  .tagline{
    margin-top:clamp(2px,.45dvh,5px);
  }

  .dice-stage-3d{
    transform:scale(1.10);
  }

  .controls{
    width:min(84vw,390px);
    gap:clamp(11px,1.8dvh,18px);
  }

  .action-row .theme-button,
  .action-row .roll-button{
    height:clamp(56px,8.2dvh,70px)!important;
    font-size:clamp(22px,6.1vw,34px)!important;
  }
}

/* v2.51 — approved illustrated header, balanced utility row and guided help. */
.app-header h1{
  width:min(88vw,390px)!important;
  max-width:390px!important;
}
.header-artwork{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1600 / 980;
}
.app-header h1 .app-brand-logo{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}
.header-flare-canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:saturate(1.05);
}

/* CLASSIC / 1-2-3, ROLL / Shake and MAIN / Reset are three fixed columns. */
.utility-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.utility-row .shake-control{
  grid-column:2;
}
.reset-button{
  appearance:none;
  grid-column:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:100%;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background-color:var(--premium-green,#32ad6d);
  background-image:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.045) 34%,rgba(0,0,0,.12) 100%);
  background-blend-mode:soft-light;
  color:#fffaf0;
  font-family:var(--dice-ui-font,"Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif);
  font-size:clamp(11px,3vw,14px);
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  text-shadow:0 1px 1px rgba(0,0,0,.22);
  box-shadow:
    0 4px 7px rgba(17,17,17,.055),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,0,0,.12);
  cursor:pointer;
  touch-action:manipulation;
}
.reset-button:active{
  transform:translateY(1px) scale(.985);
  box-shadow:
    0 2px 4px rgba(17,17,17,.045),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.10);
}
.utility-row .shake-toggle{
  padding:0 clamp(4px,1.1vw,6px)!important;
  gap:clamp(3px,.8vw,5px)!important;
  font-size:clamp(8.5px,2.25vw,10px)!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.utility-row #shakeToggleLabel,
.action-row .main-button span{
  white-space:nowrap!important;
}

/* A close affordance with a generous hit area, but no visible button chrome. */
.theme-modal-close,
.pin-modal-close,
.main-modal-close,
.overlay-close{
  appearance:none!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(255,253,248,.88)!important;
  font-family:Arial,sans-serif!important;
  font-size:31px!important;
  font-weight:200!important;
  line-height:44px!important;
  text-align:center!important;
  text-shadow:0 2px 8px rgba(0,0,0,.34)!important;
  cursor:pointer;
}
.theme-modal-close:active,
.pin-modal-close:active,
.main-modal-close:active,
.overlay-close:active{
  transform:scale(.90)!important;
  opacity:.72;
}

.footer{
  position:relative;
}
.help-button{
  appearance:none;
  position:absolute;
  right:max(17px,env(safe-area-inset-right));
  bottom:calc(13px + env(safe-area-inset-bottom));
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  padding:0;
  border:1px solid rgba(255,253,248,.44);
  border-radius:50%;
  background:transparent;
  color:rgba(255,253,248,.72);
  font-family:var(--premium-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);
  font-size:15px;
  font-weight:650;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
}
.help-button:active{
  transform:scale(.92);
  color:#fff;
  border-color:rgba(255,255,255,.75);
}

.help-tour-overlay{
  position:fixed;
  inset:0;
  z-index:1700;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  background:rgba(7,8,7,.50);
  backdrop-filter:blur(8px) brightness(.46) saturate(.72);
  -webkit-backdrop-filter:blur(8px) brightness(.46) saturate(.72);
  transition:opacity .20s ease,visibility 0s linear .20s;
  touch-action:manipulation;
}
.help-tour-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .20s ease;
}
.help-tour-header-placeholder{
  display:block;
  pointer-events:none;
}
.help-tour-close{
  position:fixed;
  z-index:5;
  top:calc(10px + env(safe-area-inset-top));
  right:max(10px,env(safe-area-inset-right));
}
.help-tour-message{
  position:fixed;
  z-index:3;
  top:43%;
  left:50%;
  width:min(86vw,380px);
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
}
.help-tour-title{
  color:var(--premium-red,#e12b23);
  font-family:var(--dice-ui-font,"Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif);
  font-size:clamp(20px,5.2vw,27px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:.035em;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.46);
}
.help-tour-copy{
  margin-top:10px;
  color:rgba(255,253,248,.90);
  font-family:var(--premium-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);
  font-size:clamp(13px,3.45vw,16px);
  font-weight:560;
  line-height:1.28;
}
.help-tour-progress{
  margin-top:16px;
  color:rgba(255,253,248,.42);
  font-size:12px;
  letter-spacing:.45em;
}
.help-tour-progress .active{
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.44);
}
.help-tour-target{
  position:fixed;
  z-index:4;
  pointer-events:none;
}
.help-tour-target > *{
  width:100%!important;
  height:100%!important;
  margin:0!important;
  transform:none!important;
  pointer-events:none!important;
}
.help-tour-arrow{
  position:fixed;
  z-index:4;
  width:28px;
  height:42px;
  background:#fffdf8;
  clip-path:polygon(36% 0,64% 0,64% 55%,100% 55%,50% 100%,0 55%,36% 55%);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.42));
  animation:helpTourArrowBounce .82s cubic-bezier(.22,.72,.3,1) infinite;
  pointer-events:none;
}
@keyframes helpTourArrowBounce{
  0%,100%{transform:translate3d(0,-4px,0)}
  52%{transform:translate3d(0,7px,0)}
}
@media (prefers-reduced-motion:reduce){
  .help-tour-arrow{animation:none!important}
  .header-flare-canvas{display:none!important}
}

/* Tablet portrait gets a slightly wider but still balanced control zone. */
@media (orientation:portrait) and (min-width:521px){
  :root{
    --content-width:min(72vw,440px);
  }

  .dice-stage-3d{
    transform:scale(1.10);
  }
}

/* Dedicated landscape composition. */
@media (orientation:landscape) and (max-height:620px){
  :root{
    --content-width:min(100%,340px);
    --ui-gap:clamp(8px,2.2vh,14px);
  }

  .stage{
    grid-template-columns:minmax(300px,1.15fr) minmax(260px,.85fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:
      "header header"
      "dice controls"
      "footer footer";
    column-gap:clamp(18px,4vw,52px);
    align-items:center;
    padding-top:max(5px,env(safe-area-inset-top));
    padding-bottom:max(4px,env(safe-area-inset-bottom));
  }

  .app-header{
    grid-area:header;
  }

  h1{
    font-size:clamp(38px,12vh,66px);
    line-height:.8;
    margin-top:0;
  }

  .tagline{
    font-size:clamp(14px,4vh,22px);
    margin-top:2px;
  }

  .dice-stage-3d{
    grid-area:dice;
    transform:scale(1.10);
    height:min(58vh,350px);
    min-height:170px;
    margin:0;
  }

  .controls{
    grid-area:controls;
    width:var(--content-width);
    justify-self:start;
    align-self:center;
    margin:0;
  }

  .dice-select{
    width:100%;
  }

  .action-row{
    gap:10px!important;
  }

  .action-row .theme-button,
  .action-row .roll-button{
    height:clamp(46px,10.5vh,62px)!important;
    border-radius:14px!important;
    font-size:clamp(19px,5vh,30px)!important;
  }

  .footer{
    grid-area:footer;
    padding-top:2px;
  }
}

/* Extra-short iPhone landscape with browser bars visible. */
@media (orientation:landscape) and (max-height:430px){
  :root{
    --content-width:min(100%,290px);
  }

  .stage{
    grid-template-columns:minmax(270px,1.18fr) minmax(220px,.82fr);
    column-gap:clamp(12px,3vw,28px);
    padding-top:3px;
    padding-bottom:3px;
  }

  h1{
    font-size:clamp(34px,11.5vh,52px);
  }

  .tagline{
    font-size:clamp(12px,3.8vh,17px);
  }

  .dice-stage-3d{
    height:min(53vh,215px);
    min-height:125px;
    transform:scale(1.08);
  }

  .controls{
    gap:7px;
  }

  .action-row{
    gap:8px!important;
  }

  .action-row .theme-button,
  .action-row .roll-button{
    height:clamp(39px,9.8vh,48px)!important;
    font-size:clamp(17px,4.7vh,25px)!important;
  }

  .credit{
    font-size:clamp(10px,3.1vh,15px);
  }

  .counter{
    font-size:clamp(9px,2.8vh,13px);
  }
}


/* v2.2.1 theme modal polish */
.theme-modal-card{
  padding:clamp(34px,5.8dvh,52px) clamp(22px,5vw,34px) clamp(28px,4.6dvh,42px)!important;
}
.theme-modal-card h2{
  margin:0 0 clamp(28px,4.8dvh,44px)!important;
  font-family:"UnifrakturCook",Georgia,serif!important;
  font-size:clamp(54px,14vw,82px)!important;
  line-height:.9!important;
  letter-spacing:0!important;
  font-weight:700!important;
  text-transform:none!important;
  text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 18px rgba(238,228,207,.10)!important;
}
.theme-modal-close{
  top:14px!important;
  right:14px!important;
  width:clamp(42px,11vw,52px)!important;
  height:clamp(42px,11vw,52px)!important;
  border:2px solid #e04438!important;
  border-radius:13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  background:linear-gradient(180deg,#f26154 0%,#df3c30 24%,#c6251d 58%,#a71812 100%)!important;
  color:#fff0d8!important;
  font-family:Georgia,serif!important;
  font-size:clamp(30px,8vw,40px)!important;
  font-weight:700!important;
  line-height:1!important;
  text-shadow:0 2px 0 rgba(74,0,0,.38)!important;
  box-shadow:0 7px 18px rgba(122,15,8,.28),0 1px 0 rgba(255,240,220,.28) inset,0 0 0 1px rgba(255,235,218,.12) inset,0 -5px 12px rgba(81,0,0,.22) inset!important;
}
.theme-modal-close:hover{filter:brightness(1.07)}
.theme-modal-close:active{transform:translateY(1px) scale(.98)}
.theme-choice,
.theme-coming-soon{
  min-height:clamp(64px,9.2dvh,78px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 18px!important;
  border-width:2px!important;
  border-style:solid!important;
  border-radius:17px!important;
  font-family:Georgia,serif!important;
  font-size:clamp(24px,6vw,36px)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.04em!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
.theme-choice{
  border-color:var(--line)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 22%,rgba(19,19,19,.98) 50%,#050505 100%)!important;
  color:var(--cream)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(238,228,207,.09) inset,0 -5px 12px rgba(0,0,0,.30) inset!important;
}
.theme-choice.active{
  border-color:#e04438!important;
  box-shadow:0 0 0 1px rgba(255,90,75,.28) inset,0 0 22px rgba(224,57,46,.68),0 0 48px rgba(170,24,18,.32),0 7px 18px rgba(0,0,0,.32)!important;
}
.theme-choice:hover{filter:brightness(1.06)}
.theme-choice:active{transform:translateY(1px) scale(.99)}
.theme-coming-soon{
  margin-top:clamp(20px,3.4dvh,30px)!important;
  border-color:rgba(238,228,207,.20)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.018) 30%,#050505 100%)!important;
  color:rgba(238,228,207,.34)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.05) inset!important;
}
.theme-choice-dot{display:none!important}

@media (orientation:landscape) and (max-height:620px){
  .theme-modal-card{padding:24px 22px 20px!important;width:min(62vw,410px)!important}
  .theme-modal-card h2{font-size:clamp(44px,12vh,66px)!important;margin-bottom:20px!important}
  .theme-modal-close{width:38px!important;height:38px!important;font-size:28px!important;top:10px!important;right:10px!important}
  .theme-choice,.theme-coming-soon{min-height:48px!important;font-size:clamp(19px,5vh,28px)!important}
  .theme-coming-soon{margin-top:14px!important}
}


/* v2.2.2 portrait spacing fix
   Restore the earlier vertical balance and guarantee that controls/footer never overlap. */
@media (orientation:portrait) and (max-width:520px){
  .app{
    height:100dvh;
    grid-template-rows:minmax(0,1fr) auto;
  }

  .stage{
    min-height:0;
    height:auto;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    align-items:center;
    overflow:hidden;
    padding:
      max(20px,calc(env(safe-area-inset-top) + 10px))
      max(12px,env(safe-area-inset-right))
      7px
      max(12px,env(safe-area-inset-left));
  }

  /* Slightly more breathing room above the logo. */
  h1{
    margin-top:clamp(8px,1.25dvh,14px)!important;
    font-size:clamp(65px,17vw,104px)!important;
    line-height:.80!important;
  }

  /* Keep slogan visually attached to the logo. */
  .tagline{
    margin-top:0!important;
    font-size:clamp(18px,4.8vw,28px)!important;
    line-height:1!important;
  }

  /* Keep the earlier stage height; scale only the rendered dice inside it. */
  .dice-stage-3d{
    height:clamp(215px,31dvh,300px)!important;
    min-height:195px!important;
    margin:clamp(4px,.55dvh,7px) auto 0!important;
    transform:scale(1.07)!important;
    transform-origin:center center!important;
  }

  .controls{
    width:min(84vw,390px)!important;
    gap:clamp(9px,1.35dvh,13px)!important;
    margin:0 auto!important;
  }

  .dice-select{
    width:100%!important;
    justify-content:space-between!important;
  }

  .action-row{
    width:100%!important;
    gap:clamp(9px,2.2vw,12px)!important;
  }

  .action-row .theme-button,
  .action-row .roll-button{
    height:clamp(54px,7.4dvh,64px)!important;
    font-size:clamp(21px,5.8vw,32px)!important;
  }

  .footer{
    position:relative;
    z-index:5;
    height:calc(82px + env(safe-area-inset-bottom))!important;
    padding:
      7px
      14px
      calc(8px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(
      to top,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015) 58%,
      transparent
    )!important;
  }

  .credit{
    font-size:clamp(17px,4.6vw,24px)!important;
    line-height:1.05!important;
  }

  .counter{
    margin-top:5px!important;
    font-size:clamp(13px,3.6vw,17px)!important;
    line-height:1.05!important;
  }
}

/* Compact iPhone/Safari viewport: protect the bottom controls from browser chrome. */
@media (orientation:portrait) and (max-width:520px) and (max-height:760px){
  .stage{
    padding-top:max(16px,calc(env(safe-area-inset-top) + 7px));
    padding-bottom:5px;
  }

  h1{
    margin-top:5px!important;
    font-size:clamp(58px,15.8vw,91px)!important;
  }

  .tagline{
    font-size:clamp(17px,4.5vw,24px)!important;
  }

  .dice-stage-3d{
    height:clamp(185px,28.5dvh,245px)!important;
    min-height:175px!important;
    transform:scale(1.05)!important;
  }

  .mini-die{
    width:clamp(50px,14vw,72px)!important;
    height:clamp(50px,14vw,72px)!important;
  }

  .dice-number{
    font-size:clamp(24px,6.3vw,34px)!important;
  }

  .controls{
    gap:8px!important;
  }

  .action-row .theme-button,
  .action-row .roll-button{
    height:clamp(48px,6.9dvh,56px)!important;
    font-size:clamp(19px,5.3vw,28px)!important;
  }

  .footer{
    height:calc(72px + env(safe-area-inset-bottom))!important;
    padding-top:5px!important;
  }

  .credit{
    font-size:clamp(15px,4.2vw,21px)!important;
  }

  .counter{
    margin-top:3px!important;
    font-size:clamp(11px,3.2vw,15px)!important;
  }
}


/* v2.2.3 intro layering fix */
#sceneWrap.intro-moving{
  position:fixed!important;
  z-index:150!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none!important;
  overflow:visible!important;
  isolation:isolate;
}

/* Keep the tap overlay above the rolling dice until it fades away. */
.intro-gate{
  z-index:160!important;
}

/* Normal UI stays below the one-time intro animation. */
.app-header,
.controls,
.footer,
.theme-modal{
  position:relative;
  z-index:auto;
}

/* Theme modal remains topmost once the intro is finished. */
.theme-modal.open{
  z-index:220!important;
}

/* Prevent transformed parents from creating an unexpected stacking context
   during the one-time intro animation. */
body.intro-running .stage,
body.intro-running .app,
body.intro-running .dice-stage-3d{
  transform:none!important;
  filter:none!important;
}


/* v2.2.4 layout + theme modal fix */

/* Header: broader, aligned with the rest and slightly lower. */
.app-header{
  width:min(92vw,760px)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding-top:clamp(12px,2.2dvh,24px)!important;
}
h1{
  width:100%!important;
  max-width:none!important;
  margin:0 auto!important;
  font-size:clamp(70px,18vw,116px)!important;
  line-height:.79!important;
  text-align:center!important;
}
.tagline{
  width:100%!important;
  max-width:none!important;
  margin:0 auto!important;
  text-align:center!important;
}

/* Center the main dice stage between header and selector row. */
.stage{
  grid-template-rows:auto minmax(0,1fr) auto!important;
}
.dice-stage-3d{
  align-self:center!important;
  justify-self:center!important;
  margin:auto!important;
  transform:scale(1.08)!important;
  transform-origin:center center!important;
}

/* Selector dice speak for themselves: larger, no numeral underneath. */
.dice-select{
  align-items:center!important;
}
.dice-option{
  gap:0!important;
}
.dice-number{
  display:none!important;
}
.mini-die{
  width:clamp(66px,19.5vw,112px)!important;
  height:clamp(66px,19.5vw,112px)!important;
  border-radius:15px!important;
}

/* Restore a real fixed modal. v2.2.3 accidentally neutralized its positioning. */
.theme-modal{
  position:fixed!important;
  inset:0!important;
  z-index:220!important;
  display:grid!important;
  place-items:center!important;
  padding:22px!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.theme-modal.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.theme-modal-backdrop{
  position:absolute!important;
  inset:0!important;
}
.theme-modal-card{
  position:relative!important;
  z-index:1!important;
}

/* Prevent normal layout rules from overriding modal positioning. */
.app-header,
.controls,
.footer{
  position:relative;
}
.theme-modal{
  transform:none!important;
  filter:none!important;
}

/* Portrait balance matching the marked composition. */
@media (orientation:portrait) and (max-width:520px){
  .stage{
    grid-template-rows:auto minmax(0,1fr) auto!important;
    padding-top:max(14px,calc(env(safe-area-inset-top) + 8px))!important;
    padding-bottom:6px!important;
  }

  .app-header{
    padding-top:clamp(10px,1.8dvh,18px)!important;
  }

  h1{
    font-size:clamp(68px,17.5vw,108px)!important;
  }

  .tagline{
    font-size:clamp(18px,4.8vw,28px)!important;
    margin-top:0!important;
  }

  .dice-stage-3d{
    height:clamp(250px,35dvh,330px)!important;
    min-height:225px!important;
    transform:scale(1.10)!important;
  }

  .controls{
    gap:clamp(10px,1.5dvh,14px)!important;
  }

  .mini-die{
    width:clamp(68px,20vw,108px)!important;
    height:clamp(68px,20vw,108px)!important;
  }
}

/* Short iPhone portrait. */
@media (orientation:portrait) and (max-width:520px) and (max-height:760px){
  .app-header{
    padding-top:8px!important;
  }

  h1{
    font-size:clamp(61px,16vw,94px)!important;
  }

  .tagline{
    font-size:clamp(16px,4.35vw,23px)!important;
  }

  .dice-stage-3d{
    height:clamp(205px,29.5dvh,255px)!important;
    min-height:190px!important;
    transform:scale(1.06)!important;
  }

  .mini-die{
    width:clamp(60px,17.5vw,84px)!important;
    height:clamp(60px,17.5vw,84px)!important;
  }
}

/* Landscape: preserve two columns while removing selector numerals. */
@media (orientation:landscape) and (max-height:620px){
  .app-header{
    padding-top:2px!important;
  }

  h1{
    font-size:clamp(40px,12.5vh,70px)!important;
  }

  .dice-stage-3d{
    transform:scale(1.08)!important;
  }

  .mini-die{
    width:clamp(52px,13vh,82px)!important;
    height:clamp(52px,13vh,82px)!important;
  }
}


/* v2.3.0 final header polish */
@media (orientation:portrait){
  .app-header{
    padding-top:clamp(28px,4.2dvh,42px)!important;
  }
  h1{
    margin-bottom:0!important;
    line-height:.78!important;
  }
  .tagline{
    font-size:90%!important;
    margin-top:-2px!important;
    line-height:1!important;
  }
}


/* v2.4.1 stronger bounce + lower header */
@media (orientation:portrait){
  .app-header{
    padding-top:clamp(42px,6.2dvh,64px)!important;
  }

  h1{
    margin:0 auto!important;
    line-height:.76!important;
  }

  .tagline{
    margin-top:-6px!important;
    line-height:.95!important;
    font-size:90%!important;
  }
}

@media (orientation:portrait) and (max-width:520px){
  .app-header{
    padding-top:clamp(38px,5.8dvh,56px)!important;
  }

  h1{
    line-height:.75!important;
  }

  .tagline{
    margin-top:-7px!important;
  }
}

@media (orientation:portrait) and (max-width:520px) and (max-height:760px){
  .app-header{
    padding-top:clamp(28px,4.6dvh,42px)!important;
  }

  .tagline{
    margin-top:-6px!important;
  }
}


/* v2.6.4 definitive mobile header position fix */
@media (orientation:portrait) and (max-width:520px){
  .stage{
    padding-top:max(46px,calc(env(safe-area-inset-top) + 34px))!important;
  }

  .app-header{
    padding-top:0!important;
    margin-top:0!important;
    transform:translateY(18px)!important;
  }

  h1{
    margin:0 auto!important;
    line-height:.72!important;
  }

  .tagline{
    margin-top:-10px!important;
    line-height:.92!important;
    font-size:90%!important;
  }
}

/* Shorter mobile screens still get a clearly lowered header. */
@media (orientation:portrait) and (max-width:520px) and (max-height:760px){
  .stage{
    padding-top:max(34px,calc(env(safe-area-inset-top) + 24px))!important;
  }

  .app-header{
    transform:translateY(12px)!important;
  }

  .tagline{
    margin-top:-9px!important;
  }
}


/* v2.6.5 final mobile header block placement
   Move logo + slogan together as one block, with almost no gap between them. */
@media (orientation:portrait) and (max-width:520px){
  .stage{
    padding-top:max(22px,env(safe-area-inset-top))!important;
  }

  .app-header{
    width:min(92vw,760px)!important;
    padding-top:0!important;
    margin:0 auto!important;
    transform:translateY(clamp(92px,12.5dvh,126px))!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }

  h1{
    width:100%!important;
    margin:0!important;
    line-height:.74!important;
  }

  .tagline{
    width:100%!important;
    margin-top:-12px!important;
    line-height:.92!important;
    font-size:90%!important;
  }

  /* Pull the dice area upward to use the space released inside the header. */
  .dice-stage-3d{
    transform:translateY(-22px) scale(1.08)!important;
    transform-origin:center center!important;
  }
}

/* Short mobile screens: same composition, slightly smaller downward shift. */
@media (orientation:portrait) and (max-width:520px) and (max-height:760px){
  .app-header{
    transform:translateY(clamp(66px,9.5dvh,86px))!important;
  }

  .tagline{
    margin-top:-10px!important;
  }

  .dice-stage-3d{
    transform:translateY(-18px) scale(1.06)!important;
  }
}


/* v2.6.6 real header wrapper fix */
@media (orientation:portrait) and (max-width:520px){
  .stage{
    grid-template-rows:auto minmax(0,1fr) auto!important;
    padding-top:max(18px,env(safe-area-inset-top))!important;
  }

  .app-header{
    width:min(92vw,760px)!important;
    margin:0 auto!important;
    padding:0!important;
    transform:translateY(clamp(72px,9.5dvh,96px))!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
    align-self:start!important;
  }

  .app-header h1{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:.74!important;
  }

  .app-header .tagline{
    width:100%!important;
    margin:-11px 0 0!important;
    padding:0!important;
    line-height:.92!important;
    font-size:90%!important;
  }

  .dice-stage-3d{
    align-self:center!important;
    margin:auto!important;
    transform:translateY(-10px) scale(1.08)!important;
    transform-origin:center center!important;
  }
}

@media (orientation:portrait) and (max-width:520px) and (max-height:760px){
  .app-header{
    transform:translateY(clamp(54px,7.5dvh,72px))!important;
  }

  .app-header .tagline{
    margin-top:-10px!important;
  }

  .dice-stage-3d{
    transform:translateY(-8px) scale(1.06)!important;
  }
}


/* v2.6.7 separate slogan + centered dice */
@media (orientation:portrait) and (max-width:520px){
  .stage{
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    padding-top:max(18px,env(safe-area-inset-top))!important;
  }

  .app-header{
    width:min(92vw,760px)!important;
    margin:0 auto!important;
    padding:0!important;
    transform:translateY(clamp(58px,7.8dvh,78px))!important;
    align-self:start!important;
  }

  .app-header h1{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:.74!important;
  }

  /* Slogan is separate again, with clear breathing room below the logo. */
  .stage > .tagline{
    width:min(88vw,680px)!important;
    margin:clamp(74px,9.8dvh,96px) auto 0!important;
    padding:0!important;
    line-height:.95!important;
    font-size:90%!important;
    text-align:center!important;
    align-self:start!important;
  }

  /* Center dice in the available space between slogan and selectors. */
  .dice-stage-3d{
    align-self:center!important;
    justify-self:center!important;
    margin:auto!important;
    transform:scale(1.08)!important;
    transform-origin:center center!important;
  }
}

@media (orientation:portrait) and (max-width:520px) and (max-height:760px){
  .app-header{
    transform:translateY(clamp(42px,6.2dvh,58px))!important;
  }

  .stage > .tagline{
    margin-top:clamp(56px,7.8dvh,72px)!important;
  }

  .dice-stage-3d{
    transform:scale(1.06)!important;
  }
}


/* Main Selector Test v1 */
.action-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(8px,2vw,11px)!important;
}

.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button{
  width:100%!important;
  min-width:0!important;
  height:clamp(58px,8.2dvh,72px)!important;
  padding:0 4px!important;
  border-width:2px!important;
  border-style:solid!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-family:Georgia,serif!important;
  font-size:clamp(16px,4.25vw,27px)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.035em!important;
  text-align:center!important;
  text-shadow:0 2px 0 rgba(0,0,0,.38)!important;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease!important;
}

.action-row .theme-button{
  color:#eef5ff!important;
  border-color:#4189d9!important;
  background:
    linear-gradient(180deg,#5ba7f0 0%,#347fc8 28%,#1f5f9e 62%,#164473 100%)!important;
  box-shadow:
    0 7px 18px rgba(17,70,126,.30),
    0 1px 0 rgba(255,255,255,.28) inset,
    0 0 0 1px rgba(220,238,255,.12) inset,
    0 -5px 12px rgba(8,39,74,.24) inset!important;
}

.action-row .main-button{
  color:var(--cream)!important;
  border-color:var(--line)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 22%,rgba(19,19,19,.98) 50%,#050505 100%)!important;
  box-shadow:
    0 7px 18px rgba(0,0,0,.32),
    0 1px 0 rgba(255,255,255,.18) inset,
    0 0 0 1px rgba(238,228,207,.09) inset,
    0 -5px 12px rgba(0,0,0,.30) inset!important;
}

.action-row .theme-button:hover,
.action-row .roll-button:hover,
.action-row .main-button:hover{filter:brightness(1.07)}
.action-row .theme-button:active,
.action-row .roll-button:active,
.action-row .main-button:active{transform:translateY(1px) scale(.988)}

.main-modal{
  position:fixed!important;
  inset:0!important;
  z-index:230!important;
  display:grid!important;
  place-items:center!important;
  padding:22px!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.main-modal.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.main-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,4,4,.78);
  backdrop-filter:blur(3px);
}
.main-modal-card{
  position:relative;
  z-index:1;
  width:min(88vw,420px);
  max-height:min(78dvh,680px);
  padding:30px 20px 20px;
  border:2px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,#111 0%,#060606 100%);
  box-shadow:0 22px 70px rgba(0,0,0,.58),0 0 0 1px rgba(238,228,207,.08) inset;
  color:var(--cream);
  display:flex;
  flex-direction:column;
}
.main-modal-card h2{
  margin:0 0 22px;
  text-align:center;
  font-family:"UnifrakturCook",Georgia,serif;
  font-size:clamp(48px,13vw,72px);
  line-height:.85;
  color:var(--cream);
}
.main-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:42px;
  height:42px;
  border:2px solid #e04438;
  border-radius:11px;
  color:#fff0d8;
  background:linear-gradient(180deg,#f25a4d 0%,#df3b2f 24%,#c6241c 58%,#a71812 100%);
  box-shadow:0 5px 14px rgba(122,15,8,.28),0 1px 0 rgba(255,240,220,.30) inset;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.main-choice-list{
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:3px 4px 5px;
  scrollbar-width:thin;
}
.main-choice{
  flex:0 0 auto;
  width:100%;
  min-height:54px;
  padding:10px 14px;
  border:2px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 22%,rgba(19,19,19,.98) 50%,#050505 100%);
  color:var(--cream);
  box-shadow:0 7px 18px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(238,228,207,.09) inset,0 -5px 12px rgba(0,0,0,.30) inset;
  font-family:Georgia,serif;
  font-size:clamp(18px,4.8vw,25px);
  font-weight:700;
  text-align:center;
  cursor:pointer;
}
.main-choice.active{
  border-color:#e04438;
  box-shadow:0 0 0 1px rgba(255,90,75,.28) inset,0 0 22px rgba(224,57,46,.68),0 0 48px rgba(170,24,18,.32),0 7px 18px rgba(0,0,0,.32);
}
.main-choice:hover{filter:brightness(1.06)}
.main-choice:active{transform:translateY(1px) scale(.99)}

@media (display-mode:standalone) and (orientation:portrait){
  .dice-stage-3d{
    transform:scale(.98)!important;
    width:94%!important;
  }
}

@media (orientation:landscape) and (max-height:620px){
  .action-row .theme-button,
  .action-row .roll-button,
  .action-row .main-button{
    height:clamp(42px,10vh,58px)!important;
    font-size:clamp(14px,3.8vh,22px)!important;
    border-radius:13px!important;
  }
  .main-modal-card{
    width:min(64vw,430px);
    max-height:86dvh;
    padding:22px 18px 16px;
  }
  .main-modal-card h2{
    font-size:clamp(42px,11vh,62px);
    margin-bottom:16px;
  }
  .main-choice{
    min-height:44px;
    font-size:clamp(16px,4.4vh,24px);
  }
}

/* Main Selector Test v2 – green state + swipe scrolling */
.action-row .main-button{
  color:#effff5!important;
  border-color:#39a968!important;
  background:linear-gradient(180deg,#58c982 0%,#319d5e 28%,#207645 62%,#15522f 100%)!important;
  box-shadow:0 7px 18px rgba(17,104,55,.30),0 1px 0 rgba(255,255,255,.28) inset,0 0 0 1px rgba(220,255,232,.12) inset,0 -5px 12px rgba(7,55,29,.24) inset!important;
}
.main-choice-list{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
}
.main-choice-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.main-choice.active{
  border-color:#46c878!important;
  box-shadow:0 0 0 1px rgba(91,225,137,.32) inset,0 0 22px rgba(57,193,105,.72),0 0 48px rgba(28,132,69,.34),0 7px 18px rgba(0,0,0,.32)!important;
}
.dice-stage-3d.main-selected::after{
  content:"";
  position:absolute;
  left:50%;
  top:58%;
  width:34%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(54,201,111,.18) 0%,rgba(43,168,91,.10) 38%,rgba(28,116,64,.04) 62%,transparent 76%);
  filter:blur(12px);
  pointer-events:none;
  z-index:0;
}
#sceneWrap{z-index:2}
.dice-ground-shadow-canvas{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:calc(100% + 96px);
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.controls{
  position:relative;
  z-index:5;
}

/* Main Selector Test v3 – requested refinements */
.action-row .theme-button,
.action-row .main-button{
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.045) 22%,#111 52%,#040404 100%)!important;
  color:var(--cream)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.16) inset,0 0 0 1px rgba(238,228,207,.08) inset,0 -5px 12px rgba(0,0,0,.32) inset!important;
}
.action-row .theme-button{border-color:#398fd8!important;box-shadow:0 0 0 1px rgba(79,165,235,.17) inset,0 0 14px rgba(45,137,211,.20),0 7px 18px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.16) inset!important}
.action-row .main-button{border-color:#42bd73!important;box-shadow:0 0 0 1px rgba(83,213,133,.17) inset,0 0 14px rgba(45,174,98,.20),0 7px 18px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.16) inset!important}
.theme-choice.active{
  border-color:#419fe8!important;
  box-shadow:0 0 0 1px rgba(90,181,249,.30) inset,0 0 22px rgba(54,151,225,.70),0 0 48px rgba(27,91,158,.34),0 7px 18px rgba(0,0,0,.32)!important;
}
.main-choice.active{
  border-color:#46c878!important;
  box-shadow:0 0 0 1px rgba(91,225,137,.32) inset,0 0 22px rgba(57,193,105,.72),0 0 48px rgba(28,132,69,.34),0 7px 18px rgba(0,0,0,.32)!important;
}
.dice-stage-3d.main-selected::after{
  width:42%!important;
  background:radial-gradient(circle,rgba(61,224,125,.30) 0%,rgba(43,188,99,.18) 35%,rgba(27,128,68,.07) 62%,transparent 78%)!important;
  filter:blur(10px)!important;
}


/* v3.0.0 portrait lock */
.portrait-lock{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right))
          max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  background:#050505;
  color:var(--cream);
  text-align:center;
  user-select:none;
  -webkit-user-select:none;
}
.portrait-lock-card{
  width:min(84vw,420px);
  padding:28px 24px;
  border:2px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,#111 0%,#060606 100%);
  box-shadow:0 20px 70px rgba(0,0,0,.58),0 0 0 1px rgba(238,228,207,.08) inset;
}
.portrait-lock-icon{
  font-size:56px;
  line-height:1;
  color:var(--red);
  margin-bottom:14px;
}
.portrait-lock-title{
  font-family:"UnifrakturCook",Georgia,serif;
  font-size:clamp(40px,8vw,64px);
  line-height:.9;
}
.portrait-lock-text{
  margin-top:12px;
  font-family:Georgia,serif;
  font-size:clamp(16px,3.5vw,22px);
  color:var(--cream-soft);
}
/* Show portrait lock on touch phones and tablets in landscape.
   iPad landscape can be taller than 700 CSS pixels, so height cannot be the
   device discriminator here. The coarse touch pointer keeps desktop free. */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:1366px){
  .portrait-lock{
    display:flex!important;
  }
}
@media (orientation:portrait){
  .portrait-lock{
    display:none!important;
  }
}
/* Extra-small phones: prevent dice clipping in installed PWA mode. */
@media (display-mode:standalone) and (orientation:portrait) and (max-width:390px){
  .dice-stage-3d{
    width:92%!important;
    transform:scale(.94)!important;
  }
}


/* v3.1.0 Fantasy unlock beta */
.theme-choice.locked{
  opacity:.72;
}
.theme-choice.locked span{
  filter:saturate(.72);
}

.pin-modal{
  position:fixed;
  inset:0;
  z-index:245;
  display:grid;
  place-items:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.pin-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.pin-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,4,4,.82);
  backdrop-filter:blur(4px);
}
.pin-modal-card{
  position:relative;
  z-index:1;
  width:min(88vw,390px);
  padding:30px 22px 24px;
  border:2px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,#111 0%,#060606 100%);
  color:var(--cream);
  box-shadow:0 22px 70px rgba(0,0,0,.62),0 0 0 1px rgba(238,228,207,.08) inset;
}
.pin-modal-card h2{
  margin:0;
  text-align:center;
  font-family:"UnifrakturCook",Georgia,serif;
  font-size:clamp(50px,14vw,72px);
  line-height:.86;
}
.pin-subtitle{
  margin:12px 0 18px;
  text-align:center;
  font-family:Georgia,serif;
  font-size:clamp(16px,4vw,21px);
  color:var(--cream-soft);
}
.pin-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:42px;
  height:42px;
  border:2px solid #e04438;
  border-radius:11px;
  color:#fff0d8;
  background:linear-gradient(180deg,#f25a4d 0%,#df3b2f 24%,#c6241c 58%,#a71812 100%);
  box-shadow:0 5px 14px rgba(122,15,8,.28),0 1px 0 rgba(255,240,220,.30) inset;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.pin-display{
  height:58px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:2px solid #419fe8;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.24));
  box-shadow:0 0 18px rgba(54,151,225,.22),0 1px 0 rgba(255,255,255,.10) inset;
}
.pin-display span{
  width:15px;
  height:15px;
  border:2px solid rgba(238,228,207,.55);
  border-radius:50%;
  background:transparent;
  transition:background .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.pin-display span.filled{
  border-color:#f2e6cf;
  background:#f2e6cf;
  box-shadow:0 0 12px rgba(242,230,207,.55);
}
.pin-keypad{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  touch-action:manipulation;
}
.pin-keypad button{
  min-height:58px;
  border:2px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 22%,rgba(19,19,19,.98) 50%,#050505 100%);
  color:var(--cream);
  box-shadow:0 7px 18px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(238,228,207,.09) inset,0 -5px 12px rgba(0,0,0,.30) inset;
  font-family:Georgia,serif;
  font-size:clamp(24px,7vw,34px);
  font-weight:700;
  cursor:pointer;
}
.pin-keypad button:active{
  transform:translateY(1px) scale(.98);
  filter:brightness(1.08);
}
.pin-keypad .pin-function{
  font-size:clamp(14px,4vw,19px);
  color:var(--cream-soft);
}
@media (orientation:landscape) and (max-height:620px){
  .pin-modal-card{
    width:min(62vw,370px);
    padding:22px 18px 18px;
  }
  .pin-modal-card h2{font-size:clamp(42px,11vh,62px)}
  .pin-subtitle{margin:8px 0 12px}
  .pin-display{height:44px;margin-bottom:12px}
  .pin-keypad{gap:7px}
  .pin-keypad button{min-height:42px;font-size:clamp(20px,5.5vh,28px)}
}


/* v3.1.1 Theme menu spacing fix */
.theme-modal-card{
  display:flex!important;
  flex-direction:column!important;
}
.theme-modal-card .theme-choice,
.theme-modal-card .theme-coming-soon,
.theme-modal-card .fantasy-theme-choice{
  margin-top:12px!important;
}
.theme-modal-card h2 + .theme-choice{
  margin-top:0!important;
}

/* v3.1.2 dynamic action labels */
.action-row .theme-button,
.action-row .main-button{
  font-size:clamp(12px,2.365vw,16.5px)!important;
  line-height:1.05!important;
  padding-inline:8px!important;
  text-align:center!important;
}
.action-row .theme-button span,
.action-row .main-button span{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-align:center!important;
}
.action-row .roll-button{
  font-size:clamp(17.6px,4.675vw,29.7px)!important;
}

html,body,button,a,canvas{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}


/* v3.6.4 — settled dice edge-clipping fix
   Keep the intro canvas untouched. Once the intro has finished, widen the
   WebGL render surface symmetrically so the left and right dice remain fully
   visible at their final positions. */
.dice-stage-3d{
  overflow:visible!important;
}
#sceneWrap:not(.intro-hidden):not(.intro-moving){
  left:50%!important;
  right:auto!important;
  width:calc(100% + clamp(88px,24vw,150px))!important;
  transform:translateX(-50%)!important;
  overflow:visible!important;
}
#sceneWrap:not(.intro-hidden):not(.intro-moving) canvas{
  width:100%!important;
  height:100%!important;
}


/* v3.6.4 colour-only refresh — built on the supplied working live version */
:root{
  --bg:#111111;
  --cream:#faf9f5;
  --cream-soft:#e8e6df;
  --line:#242424;
  --line-dim:#d8d6cf;
  --footer-text:#171717;
  --counter-text:#171717;
  --daylight-dark:#111111;
  --daylight-light:#faf9f5;
  --daylight-blue:#2f86d6;
  --daylight-red:#d62d25;
  --daylight-green:#2ea765;
  --ui-surface:#faf9f5;
  --brand-logo-cream:#f6f3eb;
}
html,body{background-color:var(--ui-surface)!important}
body{
  color:var(--daylight-dark)!important;
  background-image:linear-gradient(to bottom,
    var(--daylight-dark) 0%,
    var(--daylight-dark) 20%,
    var(--ui-surface) 46%,
    var(--ui-surface) 100%)!important;
  background-color:var(--ui-surface)!important;
}
.app{background:transparent!important}
.stage{background:transparent!important}
/* Header stays dark and retains its existing light branding. */
.app-header h1,h1{color:var(--brand-logo-cream)!important}
.tagline{color:var(--brand-logo-cream)!important;opacity:1!important}

/* 1 / 2 / 3 controls keep their dimensions and spacing, only their finish changes. */
.dice-select{justify-content:center!important;align-items:center!important}
.dice-option,.dice-option.active{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.mini-die{
  background:var(--daylight-light)!important;
  border:1.5px solid var(--daylight-dark)!important;
  box-shadow:none!important;
}
.dice-option.active .mini-die{box-shadow:0 0 0 2px rgba(17,17,17,.18)!important}
.pip{background:var(--daylight-dark)!important;box-shadow:none!important}

/* Flat full-colour action buttons. */
.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button{
  border:0!important;
  box-shadow:none!important;
  background-image:none!important;
  color:#fff!important;
  text-shadow:none!important;
  filter:none!important;
}
.action-row .theme-button{background-color:var(--daylight-blue)!important}
.action-row .roll-button{background-color:var(--daylight-red)!important}
.action-row .main-button{background-color:var(--daylight-green)!important}
.action-row .theme-button:hover,
.action-row .roll-button:hover,
.action-row .main-button:hover{filter:none!important}

/* Footer order is counter first, smaller credits second, centered in the existing footer area. */
.footer{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  background:var(--ui-surface)!important;
  color:var(--daylight-dark)!important;
}
.counter{order:1!important;margin:0!important;color:var(--daylight-dark)!important}
.credit{order:2!important;margin:0!important;font-size:70%!important;color:var(--daylight-dark)!important}
.credit a,.credit span{color:inherit!important}

/* Inverted light/dark treatment in all overlays; coloured active glows remain. */
.theme-modal-backdrop,.pin-modal-backdrop,.main-modal-backdrop{background:rgba(250,249,245,.72)!important}
.theme-modal-card,.pin-modal-card,.main-modal-card,.portrait-lock-card{
  background:var(--daylight-dark)!important;
  color:var(--daylight-light)!important;
  border-color:var(--daylight-light)!important;
}
.theme-modal-card h2,.pin-modal-card h2,.main-modal-card h2,
.pin-subtitle,.portrait-lock-title,.portrait-lock-text{color:var(--daylight-light)!important}
.theme-modal-close,.pin-modal-close,.main-modal-close{color:var(--daylight-light)!important}
.theme-choice,.main-choice,.pin-keypad button{
  background:var(--daylight-light)!important;
  color:var(--daylight-dark)!important;
  border-color:var(--daylight-light)!important;
}
.theme-choice.active{box-shadow:0 0 18px rgba(47,134,214,.55)!important}
.main-choice.active{box-shadow:0 0 18px rgba(46,167,101,.55)!important}
.pin-display{background:var(--daylight-dark)!important}
.portrait-lock{background:var(--daylight-light)!important}

/* No green glow around the rendered main die; the texture text itself is green. */
.dice-stage-3d.main-selected{filter:none!important}
#sceneWrap{filter:none!important}

/* v3.6.4 animation/button refinement — requested visual corrections */
/* Remove the old stage glow entirely; selected Main is indicated by green lettering only. */
.dice-stage-3d.main-selected::after{display:none!important}

/* Richer, polished action-button finish while preserving dimensions and positions. */
.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button{
  border:0!important;
  color:#fffdf8!important;
  text-shadow:0 1px 0 rgba(0,0,0,.24)!important;
  box-shadow:
    0 5px 14px rgba(25,25,25,.07),
    0 12px 30px rgba(20,20,20,.045),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -2px 0 rgba(0,0,0,.12)!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%)!important;
  background-blend-mode:soft-light!important;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease!important;
}
.action-row .theme-button{background-color:#338bd8!important}
.action-row .roll-button{background-color:#e12b23!important}
.action-row .main-button{background-color:#32ad6d!important}
.action-row .theme-button:active,
.action-row .roll-button:active,
.action-row .main-button:active{
  transform:translateY(3px)!important;
  box-shadow:
    0 3px 10px rgba(25,25,25,.06),
    0 7px 20px rgba(20,20,20,.04),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.10)!important;
}

/* v3.6.4 splash and full-screen dice-drop layers.
   The logo flight itself is controlled by JavaScript so there is one source
   of truth for position, scale and handoff timing. */
.intro-gate{
  position:fixed!important;
  inset:0!important;
  z-index:500!important;
  display:grid!important;
  place-items:center!important;
  background:#050505!important;
  cursor:default!important;
  overflow:hidden!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:none!important;
  will-change:auto;
}
.intro-gate.finished{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:transparent!important;
}
.splash-logo-wrap{width:min(84vw,720px);text-align:center;transform:translateY(-2vh)}
.splash-logo{
  color:var(--cream,#f6f3eb);
  font-family:"UnifrakturCook",Georgia,serif;
  font-size:clamp(72px,18vw,142px);
  line-height:.82;
  white-space:nowrap;
  transform-origin:center;
}
.splash-progress{width:min(72vw,460px);height:12px;margin:42px auto 0;border:1px solid rgba(246,243,235,.42);border-radius:999px;overflow:hidden;background:rgba(246,243,235,.08)}
.splash-progress span{display:block;width:0;height:100%;border-radius:inherit;background:#54844a;box-shadow:0 0 14px rgba(84,132,74,.42);transition:width .18s linear}
.intro-gate.logo-flight .splash-progress{opacity:0;transition:opacity .18s ease}
.intro-gate.logo-flight .splash-logo{opacity:0!important}
.exact-header-logo-flight{
  transform-origin:center center!important;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.app-header h1{transition:none!important}
@media (min-width:900px){
  .splash-logo{font-size:clamp(88px,9vw,142px)!important}
}
#sceneWrap canvas{position:relative;z-index:30!important}
.dice-stage-3d{isolation:isolate}
.drop-overlay-canvas{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:180!important;
  pointer-events:none!important;
  transform:none!important;
}
body.dice-drop-overlay .dice-stage-3d,
body.dice-drop-overlay #sceneWrap{overflow:visible!important}

/* Acceptance checklist addition: selector geometry and fixed-Main availability. */
.controls{
  width:min(100%,760px)!important;
  margin-inline:auto!important;
}
.dice-select,
.action-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(10px,2.4vw,16px)!important;
  align-items:center!important;
}
.dice-select{
  margin-inline:auto!important;
  padding:0!important;
}
.dice-option{
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.mini-die{
  width:clamp(62px,18vw,112px)!important;
  height:clamp(62px,18vw,112px)!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  border-radius:clamp(16px,4vw,26px)!important;
  box-sizing:border-box!important;
  background:var(--daylight-light)!important;
  border:2px solid rgba(17,17,17,.42)!important;
}
.dice-option.active .mini-die{
  border-color:var(--daylight-dark)!important;
  box-shadow:0 0 0 1px rgba(17,17,17,.18)!important;
}
.dice-option.main-disabled{
  cursor:not-allowed!important;
  -webkit-tap-highlight-color:transparent;
}
.dice-option.main-disabled .mini-die{
  opacity:.40!important;
  filter:grayscale(1)!important;
}
.dice-option.main-disabled:active .mini-die{
  transform:none!important;
}
.dice-count-notice{
  min-height:1.25em;
  margin-top:clamp(4px,.8vh,8px);
  opacity:0;
  pointer-events:none;
  color:rgba(17,17,17,.62);
  font:600 clamp(10px,2.35vw,13px)/1.25 Georgia,serif;
  text-align:center;
  transform:translateY(-3px);
  transition:opacity .18s ease,transform .18s ease;
}
.dice-count-notice.show{
  opacity:1;
  transform:translateY(0);
}
@media (min-width:900px){
  .controls{width:min(680px,76vw)!important}
  .mini-die{width:96px!important;height:96px!important}
}

/* Acceptance pass: literal pixel-perfect sequential drops. */
.dice-drop-snapshot{
  position:fixed;
  z-index:650;
  pointer-events:none;
  object-fit:fill;
  transform-origin:center center;
  will-change:transform;
}
.dice-drop-shadow{
  position:fixed;
  z-index:649;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.32) 0%,rgba(0,0,0,.16) 42%,rgba(0,0,0,0) 76%);
  filter:blur(6px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.38);
  will-change:transform,opacity;
}
body.dice-drop-overlay{overflow:hidden!important}
/* Splash fades transparently over the already-laid-out app; no black bridge frame. */
.intro-gate{will-change:opacity}
.intro-gate.finished{opacity:0!important;background:transparent!important}
.exact-header-logo-flight{text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}


/* v3.6.4 step 5.10.1 — shared raster brand logo
   One asset is used by both the fixed header and the existing splash handoff. */
.brand-logo-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.app-header h1{
  display:block!important;
  width:min(88vw,760px)!important;
  height:auto!important;
  font-size:0!important;
  line-height:0!important;
}
.app-header h1 .brand-logo-image{
  width:100%!important;
  max-height:clamp(92px,18vw,156px)!important;
  object-fit:contain!important;
}
.splash-logo{
  width:min(84vw,720px)!important;
  font-size:0!important;
  line-height:0!important;
}
.splash-logo .brand-logo-image{
  width:100%!important;
  max-height:min(36vh,330px)!important;
  object-fit:contain!important;
}
.exact-header-logo-flight{
  display:block!important;
}
.exact-header-logo-flight .brand-logo-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* v3.6.4 step 5.10.4 — desktop/mobile proportion parity + unified UI typography */
:root{
  --dice-ui-font:"Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
}

/* Counter and all menu typography use the same rounded family as the dice labels. */
.counter,
.theme-modal-card,
.theme-modal-card h2,
.theme-choice,
.theme-coming-soon,
.pin-modal-card,
.pin-modal-card h2,
.pin-subtitle,
.pin-keypad button,
.main-modal-card,
.main-modal-card h2,
.main-choice{
  font-family:var(--dice-ui-font)!important;
}

/* The slogan and counter intentionally share one visual text size. */
.stage > .tagline,
.counter{
  font-size:clamp(13px,3.6vw,17px)!important;
}

/* On desktop, keep the same narrow portrait composition instead of stretching
   the interface across the browser width. */
@media (min-width:900px){
  body{
    display:flex!important;
    justify-content:center!important;
    overflow-x:hidden!important;
  }

  .app{
    width:min(100vw,460px)!important;
    min-height:100dvh!important;
    margin:0 auto!important;
  }

  .stage{
    width:100%!important;
    padding:18px 12px 7px!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
  }

  .app-header{
    width:min(92%,420px)!important;
    margin:0 auto!important;
    padding:0!important;
    transform:translateY(clamp(58px,7.8dvh,78px))!important;
    align-self:start!important;
  }

  .app-header h1{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:.74!important;
  }

  .stage > .tagline{
    width:min(88%,400px)!important;
    margin:clamp(74px,9.8dvh,96px) auto 0!important;
    padding:0!important;
    line-height:.95!important;
    text-align:center!important;
    align-self:start!important;
  }

  .dice-stage-3d{
    width:100%!important;
    height:clamp(215px,31dvh,300px)!important;
    min-height:195px!important;
    margin:auto!important;
    transform:scale(1.08)!important;
    transform-origin:center center!important;
  }

  #sceneWrap:not(.intro-hidden):not(.intro-moving){
    width:calc(100% + 132px)!important;
  }

  .controls{
    width:min(84%,390px)!important;
    gap:clamp(9px,1.35dvh,13px)!important;
    margin:0 auto!important;
  }

  .dice-select{
    width:100%!important;
    justify-content:space-between!important;
  }

  .mini-die{
    width:clamp(52px,6dvh,72px)!important;
    height:clamp(52px,6dvh,72px)!important;
  }

  .action-row{
    width:100%!important;
    gap:10px!important;
  }

  .action-row .theme-button,
  .action-row .roll-button,
  .action-row .main-button{
    height:clamp(54px,7.4dvh,64px)!important;
  }

  .action-row .theme-button,
  .action-row .main-button{
    font-size:clamp(12px,1.45vw,15px)!important;
  }

  .action-row .roll-button{
    font-size:clamp(20px,2.4vw,27px)!important;
  }

  .footer{
    width:100%!important;
    height:82px!important;
    padding:7px 14px 8px!important;
  }

  .counter,
  .stage > .tagline{
    font-size:15px!important;
  }

  .credit{
    font-size:12px!important;
  }
}

/* v3.6.4 step 5.10.5 — Mobile Master Layout
   The iPhone portrait composition is the single source of truth.
   Desktop keeps the same narrow proportions instead of creating a separate layout. */
:root{
  --mobile-master-width:430px;
}

/* The three primary actions now use the same rounded family as the dice labels. */
.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button{
  font-family:var(--dice-ui-font)!important;
  letter-spacing:0!important;
}

/* Slightly larger brand, matching the visual weight of the supplied iPhone reference. */
@media (orientation:portrait){
  .app-header h1{
    width:min(94vw,430px)!important;
  }

  .app-header h1 .brand-logo-image{
    max-height:clamp(116px,25vw,184px)!important;
  }

  /* Lower the 1/2/3 row and tighten it to the action buttons. */
  .controls{
    gap:3px!important;
  }

  .dice-select{
    position:relative!important;
    transform:translateY(9px)!important;
    z-index:2!important;
  }

  .action-row{
    margin-top:9px!important;
  }
}

/* Desktop is the same portrait product canvas as iPhone. Only the surrounding
   background grows; the internal sizing and rhythm remain mobile. */
@media (min-width:900px) and (orientation:landscape){
  body{
    display:flex!important;
    justify-content:center!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }

  .app{
    width:min(var(--mobile-master-width),100vw)!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0 auto!important;
    grid-template-rows:minmax(0,1fr) auto!important;
  }

  .stage{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    grid-template-areas:none!important;
    align-items:center!important;
    column-gap:0!important;
    padding:clamp(18px,3.4dvh,32px) 12px 7px!important;
    overflow:hidden!important;
  }

  .app-header{
    width:100%!important;
    max-width:none!important;
    margin:0 auto!important;
    padding:clamp(22px,4.5dvh,42px) 0 0!important;
    transform:none!important;
    align-self:start!important;
  }

  .app-header h1{
    width:94%!important;
    margin:0 auto!important;
    padding:0!important;
    line-height:0!important;
  }

  .app-header h1 .brand-logo-image{
    width:100%!important;
    max-height:174px!important;
  }

  .stage > .tagline{
    width:100%!important;
    margin:-4px auto 0!important;
    padding:0!important;
    font-size:15px!important;
    line-height:1!important;
    text-align:center!important;
    align-self:start!important;
  }

  .dice-stage-3d{
    grid-area:auto!important;
    width:100%!important;
    height:clamp(250px,35dvh,330px)!important;
    min-height:225px!important;
    margin:auto!important;
    transform:scale(1.10)!important;
    transform-origin:center center!important;
    align-self:center!important;
    justify-self:center!important;
  }

  #sceneWrap:not(.intro-hidden):not(.intro-moving){
    width:calc(100% + 132px)!important;
  }

  .controls{
    grid-area:auto!important;
    width:min(84%,390px)!important;
    justify-self:center!important;
    align-self:end!important;
    gap:3px!important;
    margin:0 auto!important;
  }

  .dice-select{
    width:100%!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:0!important;
    transform:translateY(9px)!important;
  }

  .mini-die{
    width:82px!important;
    height:82px!important;
    border-radius:15px!important;
  }

  .action-row{
    width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin:9px 0 0!important;
  }

  .action-row .theme-button,
  .action-row .roll-button,
  .action-row .main-button{
    width:100%!important;
    min-width:0!important;
    height:64px!important;
    padding:0 6px!important;
    border-radius:17px!important;
    font-family:var(--dice-ui-font)!important;
    font-size:20px!important;
    font-weight:700!important;
    line-height:1!important;
    letter-spacing:0!important;
  }

  .action-row .roll-button{
    font-size:30px!important;
  }

  .footer{
    grid-area:auto!important;
    width:100%!important;
    height:82px!important;
    padding:7px 14px 8px!important;
  }

  .counter,
  .stage > .tagline{
    font-size:15px!important;
  }

  .credit{
    font-size:12px!important;
  }
}

/* v3.6.4 step 5.10.8 — remove control-band artefacts
   The wide feathered action-button shadows overlapped into one rectangular haze
   and were clipped at the stage/footer boundary on iPhone Safari. Keep each
   control visually independent and prevent transformed control layers from
   producing hairline compositor edges. */
.controls,
.dice-select,
.action-row{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Preserve the approved 9px selector placement without creating a transformed
   compositing layer around the complete selector row. */
.dice-select{
  top:9px!important;
  transform:none!important;
  overflow:visible!important;
}

/* The selector itself may never cast a shared row shadow. */
.dice-option,
.dice-option.active,
.mini-die{
  filter:none!important;
}
.dice-option.active .mini-die{
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.18)!important;
}

/* Compact per-button contact shadows: soft enough to ground the buttons, but
   no large second blur that can merge into a grey box behind the full row. */
.action-row{
  overflow:visible!important;
  isolation:auto!important;
}
.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button{
  box-shadow:
    0 4px 7px rgba(17,17,17,.055),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.10)!important;
}
.action-row .theme-button:active,
.action-row .roll-button:active,
.action-row .main-button:active{
  box-shadow:
    0 2px 4px rgba(17,17,17,.045),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(0,0,0,.08)!important;
}

/* Explicitly remove any inherited section edge around the controls/footer. */
.footer{
  border-top:0!important;
  outline:0!important;
  box-shadow:none!important;
}


/* v3.6.4 step 5.10.11 — two-dice clearance + notice centering
   Keep the approved control geometry, but reserve a true middle line for the
   fixed-Main notice so it sits between both button rows instead of hugging the
   selector. */
.controls{
  gap:0!important;
}
.controls > .dice-select{
  top:0!important;
  transform:none!important;
}
.dice-count-notice{
  width:100%!important;
  min-height:clamp(30px,4.2dvh,38px)!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
  color:rgba(255,250,240,.94)!important;
  font-family:var(--premium-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif)!important;
  font-size:clamp(11px,2.65vw,13px)!important;
  font-weight:650!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  text-align:center!important;
  text-shadow:0 1px 2px rgba(0,0,0,.28)!important;
  transform:none!important;
}
.dice-count-notice.show{
  transform:none!important;
}
.action-row{
  margin-top:0!important;
}

/* ========================================================================== */
/* SIDEQUEST v3.6.4-premium-toy — visual refinement only                      */
/* Layout, element order, sizing logic and functionality intentionally kept.  */
/* ========================================================================== */
:root{
  --premium-ink:#121311;
  --premium-charcoal:#151614;
  --premium-charcoal-warm:#24231f;
  --premium-panel:#2b2a26;
  --premium-panel-soft:#34322d;
  --premium-ivory:#f4f0e7;
  --premium-ivory-muted:#c7c1b5;
  --premium-line:rgba(255,250,239,.14);
  --premium-red:#e12b23;
  --premium-red-deep:#aa3028;
  --premium-blue:#338bd8;
  --premium-green:#32ad6d;
  --premium-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
}

html,body{
  background:#151614!important;
}
body{
  font-family:var(--premium-font)!important;
  color:var(--premium-ivory)!important;
  background:
    linear-gradient(180deg,
      #111210 0%,
      #171816 28%,
      #1e1e1b 60%,
      #26241f 100%)!important;
}
.app,.stage{background:transparent!important}
.stage{
  position:relative!important;
  isolation:isolate!important;
}
/* A broad, feathered pool of ambient light rather than a visible gradient. */
.stage::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:50%;
  top:37%;
  width:min(112vw,760px);
  height:clamp(260px,45dvh,500px);
  transform:translate(-50%,-50%);
  border-radius:48%;
  background:rgba(238,231,214,.075);
  filter:blur(88px);
  pointer-events:none;
}
.stage::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:64%;
  width:min(76vw,500px);
  height:70px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(232,218,192,.07);
  filter:blur(34px);
  pointer-events:none;
}

/* Brand stays untouched; supporting type becomes calmer and quieter. */
.tagline{
  font-family:var(--premium-font)!important;
  color:var(--premium-ivory-muted)!important;
  opacity:.72!important;
  font-weight:500!important;
  letter-spacing:.012em!important;
  text-shadow:none!important;
}
.counter,.credit,.theme-button,.roll-button,.main-button,
.theme-modal-card,.pin-modal-card,.main-modal-card,.portrait-lock-card{
  font-family:var(--premium-font)!important;
}
.counter{
  color:rgba(244,240,231,.78)!important;
  font-weight:650!important;
  letter-spacing:.085em!important;
}
.credit,.credit a,.credit span{
  color:rgba(244,240,231,.40)!important;
}
.footer{
  color:var(--premium-ivory)!important;
  background:linear-gradient(180deg,rgba(20,21,19,0) 0%,rgba(20,21,19,.54) 34%,rgba(20,21,19,.82) 100%)!important;
}

/* Selector dice: warm resin, gentle edge light, no hard outlines. */
.mini-die{
  background:
    linear-gradient(145deg,#fffdf8 0%,#f2ede3 58%,#ddd5c8 100%)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:16px!important;
  box-shadow:
    0 10px 21px rgba(0,0,0,.20),
    0 2px 5px rgba(0,0,0,.12),
    inset 1px 1px 0 rgba(255,255,255,.86),
    inset -1px -2px 3px rgba(74,62,44,.12)!important;
  transition:transform .20s cubic-bezier(.2,.8,.2,1),box-shadow .20s ease,filter .20s ease!important;
}
.dice-option.active .mini-die{
  border-color:rgba(255,255,255,.55)!important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.24),
    0 0 0 2px rgba(244,240,231,.22),
    0 0 24px rgba(244,235,215,.14),
    inset 1px 1px 0 rgba(255,255,255,.92),
    inset -1px -2px 3px rgba(74,62,44,.10)!important;
}
.dice-option:active .mini-die{
  transform:translateY(1px) scale(.965)!important;
  box-shadow:
    0 5px 12px rgba(0,0,0,.18),
    inset 1px 1px 0 rgba(255,255,255,.72),
    inset -1px -2px 4px rgba(74,62,44,.14)!important;
}
.pip{
  background:#22231f!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 1px 1px rgba(0,0,0,.16)!important;
}

/* Buttons read as three pieces of carefully finished hardware. */
.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button{
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:18px!important;
  color:#fffaf0!important;
  text-shadow:0 1px 1px rgba(0,0,0,.22)!important;
  letter-spacing:.018em!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.045) 34%,rgba(0,0,0,.12) 100%)!important;
  background-blend-mode:soft-light!important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.20),
    0 2px 5px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.18)!important;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,filter .16s ease!important;
}
.action-row .theme-button{background-color:var(--premium-blue)!important}
.action-row .main-button{background-color:var(--premium-green)!important}
.action-row .roll-button{
  background-color:var(--premium-red)!important;
  border-color:rgba(255,221,210,.28)!important;
  box-shadow:
    0 13px 28px rgba(130,38,29,.28),
    0 3px 7px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,242,235,.48),
    inset 0 -2px 0 rgba(101,22,17,.22)!important;
}
.action-row .theme-button:active,
.action-row .roll-button:active,
.action-row .main-button:active{
  transform:translateY(2px) scale(.982)!important;
  box-shadow:
    0 4px 9px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.15)!important;
}
.action-row .theme-button:hover,
.action-row .roll-button:hover,
.action-row .main-button:hover{filter:brightness(1.025)!important}

/* Overlays share the same warm, tactile material language. */
.theme-modal-backdrop,.pin-modal-backdrop,.main-modal-backdrop{
  background:rgba(10,11,10,.68)!important;
  backdrop-filter:blur(14px) saturate(.85)!important;
  -webkit-backdrop-filter:blur(14px) saturate(.85)!important;
}
.theme-modal-card,.pin-modal-card,.main-modal-card,.portrait-lock-card{
  color:var(--premium-ivory)!important;
  background:
    linear-gradient(160deg,rgba(59,57,51,.98),rgba(29,30,27,.98))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:24px!important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.theme-modal-card h2,.pin-modal-card h2,.main-modal-card h2,
.pin-subtitle,.portrait-lock-title,.portrait-lock-text{
  color:var(--premium-ivory)!important;
}
.theme-choice,.main-choice,.pin-keypad button{
  color:var(--premium-ivory)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 5px 14px rgba(0,0,0,.14)!important;
}
.theme-choice.active,.main-choice.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 0 1px rgba(244,240,231,.16),0 7px 18px rgba(0,0,0,.20)!important;
}
.theme-modal-close,.pin-modal-close,.main-modal-close{
  color:var(--premium-ivory)!important;
}
.pin-display{background:rgba(12,13,12,.58)!important}
.portrait-lock{background:#181916!important}

/* Preserve the quiet composition on wider displays too. */
@media (min-width:900px) and (orientation:landscape){
  body{
    background:
      linear-gradient(180deg,#111210 0%,#181916 30%,#22211d 72%,#292720 100%)!important;
  }
}

/* v2.30 — current menu typography + tactile portrait rotation cue */
.theme-modal-card h2,
.pin-modal-card h2,
.main-modal-card h2,
.portrait-lock-title{
  font-family:var(--premium-font,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif)!important;
  font-weight:750!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
}
.portrait-lock-title{
  font-size:clamp(25px,6.6vw,38px)!important;
  line-height:1.02!important;
}
.portrait-lock-text{
  font-family:var(--premium-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif)!important;
  font-size:clamp(14px,3.4vw,18px)!important;
  font-weight:500!important;
  line-height:1.35!important;
  letter-spacing:.01em!important;
  color:rgba(244,240,231,.72)!important;
}
.portrait-lock-die-wrap{
  --rotation-die-size:clamp(48px,12vw,62px);
  width:var(--rotation-die-size);
  height:var(--rotation-die-size);
  margin:0 auto 20px;
  position:relative;
  z-index:0;
  isolation:isolate;
  transform-origin:50% 100%;
  animation:portraitDieBounce 2.8s cubic-bezier(.22,.72,.25,1) infinite;
  will-change:transform;
}
.portrait-lock-die-wrap::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:12%;
  right:12%;
  bottom:-10px;
  height:8px;
  border-radius:50%;
  background:rgba(0,0,0,.42);
  filter:blur(5px);
  animation:portraitDieShadow 2.8s ease-in-out infinite;
}
.portrait-lock-die{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.76);
  border-radius:clamp(10px,2.5vw,14px);
  background:radial-gradient(circle at 50% 45%,#fff 0%,#f7f3eb 58%,#d9d3c8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -5px 9px rgba(88,82,71,.12),
    0 7px 17px rgba(0,0,0,.34);
  transform-origin:50% 50%;
  animation:portraitDieQuarterTurn 2.8s cubic-bezier(.22,.72,.25,1) infinite;
  will-change:transform;
}
.portrait-lock-pip{
  position:absolute;
  width:13%;
  aspect-ratio:1;
  border-radius:50%;
  background:#272824;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 1px 1px rgba(0,0,0,.18);
}
.portrait-lock-pip.pip-1{left:22%;top:22%}
.portrait-lock-pip.pip-2{right:22%;top:22%}
.portrait-lock-pip.pip-3{left:43.5%;top:43.5%}
.portrait-lock-pip.pip-4{left:22%;bottom:22%}
.portrait-lock-pip.pip-5{right:22%;bottom:22%}
@keyframes portraitDieBounce{
  0%,18%,68%,100%{transform:translate3d(0,0,0) scaleY(1)}
  23%{transform:translate3d(0,4px,0) scaleY(.78)}
  29%{transform:translate3d(0,-2px,0) scaleY(1.08)}
  43%{transform:translate3d(0,-18px,0) scaleY(1)}
  55%{transform:translate3d(0,1px,0) scaleY(.91)}
  62%{transform:translate3d(0,0,0) scaleY(1)}
}
@keyframes portraitDieQuarterTurn{
  0%,23%{transform:rotate(0deg)}
  29%{transform:rotate(7deg)}
  43%{transform:rotate(48deg)}
  55%,100%{transform:rotate(90deg)}
}
@keyframes portraitDieShadow{
  0%,18%,62%,100%{opacity:.72;transform:scaleX(1)}
  23%{opacity:.84;transform:scaleX(1.12)}
  43%{opacity:.24;transform:scaleX(.58)}
  55%{opacity:.8;transform:scaleX(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .portrait-lock-die-wrap,
  .portrait-lock-die,
  .portrait-lock-die-wrap::after{animation:none!important}
}

/* v2.31 — rolling counter digit + persistent Main discovery hint */
.counter{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
.counter-number{
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.counter-prefix{line-height:1}
.counter-digit-window{
  display:inline-block;
  position:relative;
  width:.68em;
  height:1em;
  overflow:hidden;
  line-height:1;
  vertical-align:top;
}
.counter-digit{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
}
.counter-digit-new{transform:translate3d(0,110%,0)}
.counter.counter-rolling .counter-digit-old{
  animation:counterDigitOut .5s cubic-bezier(.22,.72,.22,1) forwards;
}
.counter.counter-rolling .counter-digit-new{
  animation:counterDigitIn .5s cubic-bezier(.22,.72,.22,1) forwards;
}
@keyframes counterDigitOut{
  0%{transform:translate3d(0,0,0);opacity:1}
  100%{transform:translate3d(0,-110%,0);opacity:.25}
}
@keyframes counterDigitIn{
  0%{transform:translate3d(0,110%,0);opacity:.25}
  100%{transform:translate3d(0,0,0);opacity:1}
}

.main-hint-overlay{
  --main-hint-center-x:50vw;
  --main-hint-button-left:66vw;
  --main-hint-button-width:28vw;
  --main-hint-button-height:60px;
  --main-hint-button-top:72vh;
  position:fixed;
  inset:0;
  z-index:800;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  background:rgba(7,8,7,.48);
  backdrop-filter:blur(7px) brightness(.48) saturate(.72);
  -webkit-backdrop-filter:blur(7px) brightness(.48) saturate(.72);
  transition:opacity .22s ease,visibility 0s linear .22s;
  touch-action:manipulation;
}
.main-hint-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .22s ease;
}
.main-hint-message{
  position:fixed;
  z-index:2;
  top:50%;
  left:50%;
  width:min(88vw,390px);
  transform:translate(-50%,-50%);
  color:var(--premium-red,#e12b23);
  font-family:var(--premium-font,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif);
  font-size:clamp(20px,5.4vw,28px);
  font-weight:780;
  line-height:1.05;
  letter-spacing:.045em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.46);
}
.main-hint-arrow{
  position:fixed;
  z-index:2;
  left:calc(var(--main-hint-center-x) - 15px);
  top:max(70px,calc(var(--main-hint-button-top) - 64px));
  width:30px;
  height:44px;
  background:#fffdf8;
  clip-path:polygon(36% 0,64% 0,64% 55%,100% 55%,50% 100%,0 55%,36% 55%);
  animation:mainHintArrowBounce .82s cubic-bezier(.22,.72,.3,1) infinite;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.42));
}
@keyframes mainHintArrowBounce{
  0%,100%{transform:translate3d(0,-4px,0)}
  52%{transform:translate3d(0,7px,0)}
}
.main-hint-button-stage.action-row{
  position:fixed!important;
  z-index:3!important;
  display:block!important;
  left:var(--main-hint-button-left)!important;
  top:var(--main-hint-button-top)!important;
  width:var(--main-hint-button-width)!important;
  height:var(--main-hint-button-height)!important;
  margin:0!important;
  max-width:none!important;
  transform:none!important;
  pointer-events:none!important;
}
.main-hint-button-stage.action-row .main-button{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  opacity:1!important;
  pointer-events:none!important;
}
@media (prefers-reduced-motion:reduce){
  .counter.counter-rolling .counter-digit-old,
  .counter.counter-rolling .counter-digit-new,
  .main-hint-arrow{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* v2.45 — opt-in motion sensor input; the existing ROLL controls stay intact. */
.controls{
  --primary-control-gap:10px;
}
.action-row{
  gap:var(--primary-control-gap)!important;
}
.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button{
  font-size:18px!important;
}
.action-row .theme-button.compact-label,
.action-row .main-button.compact-label{
  font-size:clamp(12px,2.365vw,16.5px)!important;
}
.shake-control{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  margin:var(--primary-control-gap) auto 0;
}
.shake-control[hidden]{display:none!important}
.shake-toggle{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:17px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.025)),
    #22231f;
  color:rgba(255,253,248,.92);
  font-family:var(--dice-ui-font,"Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif)!important;
  font-size:clamp(15px,4vw,20px);
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  cursor:pointer;
  touch-action:manipulation;
  box-shadow:
    0 4px 7px rgba(17,17,17,.055),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -2px 0 rgba(0,0,0,.12);
  transition:color .18s ease,background-color .18s ease,transform .16s ease;
}
.shake-toggle-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#e12b23;
  box-shadow:0 0 8px rgba(225,43,35,.54),0 0 0 1px rgba(255,255,255,.08);
  transition:background-color .18s ease,box-shadow .18s ease;
}
.shake-toggle.enabled{color:rgba(255,253,248,.90)}
.shake-toggle.enabled .shake-toggle-dot{
  background:#45db82;
  box-shadow:0 0 8px rgba(69,219,130,.62);
}
.shake-toggle.detecting{
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.025)),
    #22231f;
}
.shake-toggle.detecting .shake-toggle-dot{
  background:#fff;
  animation:shakeReadyPulse .56s ease-in-out infinite alternate;
}
.shake-toggle:disabled{opacity:.55;cursor:default}
.shake-toggle:active{transform:translateY(1px) scale(.992)}
.shake-status{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
@keyframes shakeReadyPulse{
  from{transform:scale(.78);opacity:.62}
  to{transform:scale(1.22);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .shake-toggle.detecting .shake-toggle-dot{animation:none!important}
}

/* v2.48 — compact selector + Shake utility row.
   The selector occupies one primary-button column; Shake fills the other two. */
.utility-row{
  --utility-height:clamp(28px,8vw,34px);
  display:grid;
  grid-template-columns:calc((100% - (2 * var(--primary-control-gap))) / 3) minmax(0,1fr);
  align-items:stretch;
  gap:var(--primary-control-gap);
  width:100%;
  height:var(--utility-height);
  margin-top:var(--primary-control-gap);
}
.utility-row .dice-select{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center!important;
  justify-items:center;
  gap:3px!important;
  width:100%!important;
  height:100%;
}
.utility-row .dice-option{
  width:100%;
  height:100%;
  justify-content:center;
  gap:0;
}
.utility-row .mini-die{
  width:clamp(28px,8vw,34px)!important;
  height:clamp(28px,8vw,34px)!important;
  max-width:calc(100% - 1px);
  max-height:calc(100% - 1px);
  border-width:1px!important;
  border-radius:8px!important;
}
.utility-row .shake-control{
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
}
.utility-row .shake-toggle{
  width:100%;
  min-height:0;
  height:100%;
  gap:clamp(6px,1.8vw,9px);
  padding:0 clamp(10px,3vw,16px);
  border-radius:clamp(12px,3.6vw,16px);
  font-size:clamp(12px,3.2vw,15px);
}
.utility-row .shake-toggle-dot{
  width:clamp(7px,2vw,9px);
  height:clamp(7px,2vw,9px);
  flex:0 0 auto;
}
@media (orientation:landscape) and (max-height:620px){
  .utility-row{
    --utility-height:clamp(27px,7.5vh,32px);
  }
  .utility-row .mini-die{
    width:clamp(26px,7.5vh,32px)!important;
    height:clamp(26px,7.5vh,32px)!important;
  }
  .utility-row .shake-toggle{
    font-size:clamp(11px,3.2vh,14px);
  }
}

/* v2.49 — pre-GitHub geometry and layer polish. */
.utility-row .dice-select{
  top:0!important;
  transform:none!important;
  align-self:center!important;
}
.utility-row .mini-die{
  inline-size:calc(var(--utility-height) - 1px)!important;
  block-size:calc(var(--utility-height) - 1px)!important;
  width:calc(var(--utility-height) - 1px)!important;
  height:calc(var(--utility-height) - 1px)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1 / 1!important;
  box-sizing:border-box!important;
}
.utility-row .mini-die .pip{
  width:5px!important;
  height:5px!important;
  min-width:5px!important;
  min-height:5px!important;
  transform:translate(-50%,-50%)!important;
}
.utility-row .mini-die .pip.center{
  left:50%!important;
  top:50%!important;
  right:auto!important;
}
.utility-row .mini-die .pip.bottom-left{
  left:32%!important;
  top:68%!important;
  right:auto!important;
}
.utility-row .mini-die .pip.top-right{
  left:68%!important;
  top:32%!important;
  right:auto!important;
}
.controls-notice-slot{
  width:100%!important;
  min-height:clamp(30px,4.2dvh,38px)!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  text-align:center!important;
}
.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button,
.utility-row .shake-toggle{
  border-radius:14px!important;
}

/* v2.52 — exact header composition and supplied button colours.
   This block intentionally lives at EOF so older responsive rules cannot
   separate the logo from its perfectly aligned flare map. */
:root{
  --tattoo-dice-blue:#66b5f7;
  --tattoo-dice-red:#c5352a;
  --tattoo-dice-green:#54844a;
  --header-composite-width:min(calc(100vw - 24px),410px);
}

.app-header h1,
.splash-logo{
  width:var(--header-composite-width)!important;
  max-width:410px!important;
  height:auto!important;
  margin-inline:auto!important;
  font-size:0!important;
  line-height:0!important;
  overflow:visible!important;
}

.header-artwork{
  position:relative!important;
  isolation:isolate;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1600 / 980!important;
  overflow:visible!important;
}

.header-artwork::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-5% -8% -7%;
  border-radius:44%;
  background:
    radial-gradient(ellipse at 50% 55%,
      rgba(102,181,247,.58) 0%,
      rgba(102,181,247,.30) 34%,
      rgba(102,181,247,.13) 56%,
      rgba(102,181,247,0) 79%);
  filter:blur(24px);
  animation:headerAuraBreath 4.8s ease-in-out infinite;
  pointer-events:none;
}

/* Match the app canvas during loading so the handoff changes only the content,
   never the character or brightness of the background. */
.intro-gate{
  background:
    radial-gradient(circle at center 20%,rgba(255,255,255,.02),transparent 42%),
    radial-gradient(circle at center 80%,rgba(255,255,255,.012),transparent 52%),
    #050505!important;
}

@keyframes headerAuraBreath{
  0%,100%{opacity:.74;transform:scale(1.05)}
  48%{opacity:.96;transform:scale(1.12)}
}

.app-header h1 .app-brand-logo,
.splash-logo .app-brand-logo{
  position:absolute!important;
  z-index:1;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  transform:none!important;
}

.header-flare-canvas{
  position:absolute!important;
  z-index:2;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
}

.splash-logo-wrap{
  width:100%!important;
  display:grid!important;
  place-items:center!important;
}

.intro-gate.logo-flight .splash-logo{
  opacity:1!important;
}

.stage > .tagline{
  display:none!important;
}

.action-row .theme-button{
  background-color:var(--tattoo-dice-blue)!important;
}
.action-row .roll-button{
  background-color:var(--tattoo-dice-red)!important;
}
.action-row .main-button{
  background-color:var(--tattoo-dice-green)!important;
}

.reset-button{
  color:#fffdf8!important;
  font-size:clamp(8.5px,2.25vw,10px)!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.025)),
    #22231f!important;
  box-shadow:
    0 4px 9px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.32)!important;
}

.footer .help-button{
  top:auto!important;
  bottom:calc(13px + env(safe-area-inset-bottom))!important;
}

@media (orientation:landscape) and (max-height:620px){
  :root{
    --header-composite-width:min(40vw,360px);
  }
  .header-artwork::before{
    filter:blur(12px);
  }
}

@media (prefers-reduced-motion:reduce){
  .header-artwork::before{
    animation:none!important;
  }
}

/* v2.52.5 — one quiet close affordance for every menu.
   The 44px touch target remains, but only the slim white × is visible. */
.theme-modal-close,
.pin-modal-close,
.main-modal-close,
.overlay-close{
  appearance:none!important;
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(255,255,255,.82)!important;
  font-family:Arial,sans-serif!important;
  font-size:28px!important;
  font-weight:200!important;
  line-height:1!important;
  text-shadow:0 1px 7px rgba(0,0,0,.42)!important;
  filter:none!important;
}
.theme-modal-close:hover,
.pin-modal-close:hover,
.main-modal-close:hover,
.overlay-close:hover{
  color:#fff!important;
  filter:none!important;
}
.theme-modal-close:active,
.pin-modal-close:active,
.main-modal-close:active,
.overlay-close:active{
  transform:scale(.90)!important;
  opacity:.68!important;
}

/* The fixed header size is now the permanent theme-header contract.
   In portrait, center the actual dice composition in the clear band between
   that header and the controls, while returning the complete controls group
   to its former lower resting position. */
@media (orientation:portrait) and (max-width:520px){
  .dice-stage-3d{
    transform:
      translateY(clamp(52px,7.8dvh,64px))
      scale(1.28)!important;
    transform-origin:center center!important;
  }
  .controls{
    transform:translateY(clamp(36px,5.25dvh,42px))!important;
  }
}
.theme-modal,
.main-modal,
.pin-modal{
  z-index:1400!important;
}
@media (orientation:portrait) and (max-width:520px){
  /* Uniform scaling only: the cubes retain their exact 3D proportions while
     the complete composition stays inside the primary-button width. */
  .dice-stage-3d{
    transform:
      translateY(clamp(52px,7.8dvh,64px))
      scale(1.28)!important;
    transform-origin:center center!important;
  }
  .dice-stage-3d canvas{
    transform:scale(1)!important;
    transform-origin:center center!important;
  }
  .controls{
    transform:translateY(clamp(36px,5.25dvh,42px))!important;
  }
}

/* v2.52.9 — one invisible, proportional mobile viewport.
   Width is derived from both the available screen width and the stable
   smallest viewport height. That keeps header, dice, controls and footer in
   the same relationship in Safari and in an installed iOS/Android PWA. */
:root{
  --app-shell-width:min(100vw,430px);
  --app-fit-width:clamp(
    240px,
    calc(64svh - 146px - env(safe-area-inset-bottom)),
    min(calc(100vw - 24px),410px)
  );
}
html,
body{
  background:#050505!important;
}
body{
  width:100vw!important;
  height:100svh!important;
  min-height:100svh!important;
  display:grid!important;
  place-items:center!important;
}
.app{
  width:var(--app-shell-width)!important;
  height:100svh!important;
  max-height:100svh!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  margin:0 auto!important;
  background:
    radial-gradient(circle at center 20%,rgba(255,255,255,.02),transparent 42%),
    radial-gradient(circle at center 80%,rgba(255,255,255,.012),transparent 52%),
    #050505!important;
}
.stage{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  padding:
    max(5px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    0
    max(12px,env(safe-area-inset-left))!important;
}
.app-header h1,
.splash-logo,
.controls{
  width:var(--app-fit-width)!important;
  max-width:410px!important;
}
.dice-stage-3d{
  width:var(--app-fit-width)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1.05 / 1!important;
  margin:0 auto!important;
  transform:none!important;
  transform-origin:center center!important;
  overflow:hidden!important;
}
#sceneWrap:not(.intro-hidden):not(.intro-moving){
  width:100%!important;
  left:0!important;
  right:0!important;
  transform:none!important;
}
.dice-stage-3d canvas{
  transform:none!important;
  transform-origin:center center!important;
}
.controls{
  align-self:center!important;
  margin:0 auto!important;
  transform:none!important;
}
.footer{
  position:relative!important;
  z-index:80!important;
  width:100%!important;
  height:calc(88px + env(safe-area-inset-bottom))!important;
  min-height:0!important;
  padding:
    6px
    max(14px,env(safe-area-inset-right))
    max(7px,env(safe-area-inset-bottom))
    max(14px,env(safe-area-inset-left))!important;
  background:
    linear-gradient(to top,rgba(255,255,255,.035),rgba(255,255,255,.012) 62%,transparent)!important;
}
.splash-progress{
  width:min(72vw,460px)!important;
  max-width:calc(var(--app-fit-width) - 48px)!important;
}

@supports not (height:100svh){
  :root{
    --app-fit-width:clamp(
      240px,
      calc(64vh - 146px - env(safe-area-inset-bottom)),
      min(calc(100vw - 24px),410px)
    );
  }
  body,
  .app{
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
  }
}

/* v2.52.14 — the complete control system scales from its real container.
   This avoids iOS text inflation and keeps labels, button bodies, selector
   dice and pips in the same proportions on short or narrow phones. */
html{
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}
.app{
  container-type:inline-size;
  container-name:tattoo-dice-app;
}
.controls{
  container-type:inline-size;
  container-name:tattoo-dice-controls;
  --primary-control-gap:clamp(6px,3cqw,10px)!important;
}
.action-row{
  gap:var(--primary-control-gap)!important;
}
.action-row .theme-button,
.action-row .roll-button,
.action-row .main-button{
  height:clamp(44px,19.45cqw,64px)!important;
  min-height:0!important;
  padding-inline:clamp(4px,2cqw,8px)!important;
  border-radius:clamp(10px,4.25cqw,14px)!important;
  font-size:clamp(12px,5.47cqw,18px)!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.action-row .theme-button.compact-label,
.action-row .main-button.compact-label{
  font-size:clamp(10px,4.55cqw,15px)!important;
}
.action-row .theme-button span,
.action-row .roll-button span,
.action-row .main-button span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.utility-row{
  --utility-height:clamp(22px,10cqw,34px)!important;
  height:var(--utility-height)!important;
  column-gap:var(--primary-control-gap)!important;
  margin-top:var(--primary-control-gap)!important;
}
.utility-row .dice-select{
  column-gap:clamp(2px,1.1cqw,4px)!important;
}
.utility-row .mini-die{
  inline-size:calc(var(--utility-height) - 1px)!important;
  block-size:calc(var(--utility-height) - 1px)!important;
  width:calc(var(--utility-height) - 1px)!important;
  height:calc(var(--utility-height) - 1px)!important;
  border-radius:clamp(6px,2.4cqw,8px)!important;
}
.utility-row .mini-die .pip{
  width:clamp(3.5px,1.5cqw,5px)!important;
  height:clamp(3.5px,1.5cqw,5px)!important;
  min-width:clamp(3.5px,1.5cqw,5px)!important;
  min-height:clamp(3.5px,1.5cqw,5px)!important;
}
.utility-row .shake-toggle,
.utility-row .reset-button{
  padding-inline:clamp(3px,1.5cqw,6px)!important;
  border-radius:clamp(7px,3.1cqw,11px)!important;
  font-size:clamp(7px,2.6cqw,10px)!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.utility-row .shake-toggle{
  gap:clamp(2px,1cqw,4px)!important;
}
.utility-row .shake-toggle-dot{
  width:clamp(5px,2.1cqw,8px)!important;
  height:clamp(5px,2.1cqw,8px)!important;
}
.controls-notice-slot{
  min-height:clamp(24px,10.5cqw,36px)!important;
  font-size:clamp(9px,3.4cqw,12px)!important;
  line-height:1.15!important;
}
.footer .counter{
  font-size:clamp(11px,3.3cqw,14px)!important;
}
.footer .credit{
  font-size:clamp(9px,2.8cqw,12px)!important;
}
.footer .help-button{
  width:clamp(30px,9.3cqw,40px)!important;
  height:clamp(30px,9.3cqw,40px)!important;
  font-size:clamp(11px,3.3cqw,14px)!important;
}

/* Final header polish: reclaim the unused top air. The artwork, aura, flare
   canvas and splash-flight destination all move together with this parent. */
.app-header{
  transform:translateY(clamp(36px,4.6svh,42px))!important;
}
@media (max-height:640px){
  .app-header{
    transform:translateY(28px)!important;
  }
}

/* Portrait tablets previously allowed the single stage grid track to grow to
   the header's intrinsic width, even though the app shell itself is 430px.
   Keep that one track bounded so the complete composition stays centred. */
@media (orientation:portrait) and (min-width:521px){
  .stage{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .app-header{
    width:100%!important;
    min-width:0!important;
  }
  .app-header h1{
    width:min(100%,410px)!important;
    margin-inline:auto!important;
  }
  .dice-stage-3d,
  .controls{
    justify-self:center!important;
    margin-inline:auto!important;
  }
}

/* v2.52.22 — tablet/desktop frame.
   Keep the approved 430px UI composition centred, but let its background fill
   the complete viewport and give only the WebGL render surface extra horizontal
   breathing room. Its height stays tied to the same phone-tested fit formula,
   so dice size and all controls remain unchanged while the support dice can no
   longer be clipped by the narrow app column. */
@media (min-width:521px){
  html,
  body{
    background:
      radial-gradient(circle at center 20%,rgba(255,255,255,.02),transparent 42%),
      radial-gradient(circle at center 80%,rgba(255,255,255,.012),transparent 52%),
      #050505!important;
  }
  .app{
    background:transparent!important;
    overflow:visible!important;
  }
  .stage{
    grid-template-columns:minmax(0,1fr)!important;
    overflow:visible!important;
  }
  .app-header{
    width:100%!important;
    min-width:0!important;
    transform:translateY(clamp(20px,2.4svh,26px))!important;
  }
  .app-header h1{
    width:min(100%,410px)!important;
    margin-inline:auto!important;
  }
  .dice-stage-3d{
    width:min(560px,calc(100vw - 32px))!important;
    max-width:none!important;
    height:clamp(
      228px,
      calc((64svh - 146px - env(safe-area-inset-bottom)) * .95238),
      390px
    )!important;
    aspect-ratio:auto!important;
    justify-self:center!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    overflow:hidden!important;
  }
  .controls{
    justify-self:center!important;
    margin-inline:auto!important;
  }
}

/* The tour now lifts the actual live control into this neutral portal. Its
   already-computed metrics are frozen before the move, so the highlighted
   button is always identical to the responsive control the user was viewing. */
.help-tour-target{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  container-type:normal!important;
}
.help-tour-target > *{
  max-width:none!important;
  max-height:none!important;
  box-sizing:border-box!important;
}
.theme-choice-list{width:100%;max-height:min(55vh,420px);overflow:auto;display:grid;gap:9px;padding:2px}.theme-choice-list .theme-choice{width:100%;margin:0}.theme-choice-list .theme-choice.locked::after{content:"🔒";margin-left:8px;font-size:.72em}