:root{
  --gold:#e7c47c;
  --gold-bright:#ffe2a0;
  --muted:#b99b65;
  --paper:#f4e3bb;
  --blue:#83c7ff;
  --red:#ff8b74;
  --black:#07080a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#020304;color:var(--paper);font-family:Georgia,"Noto Serif SC","Songti SC","Times New Roman",serif;overscroll-behavior:none}
body{display:flex;justify-content:center;align-items:flex-start}
button{appearance:none;border:0;background:none;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.app{position:relative;width:min(100vw,480px);height:100dvh;min-height:620px;overflow:hidden;background:#050608;isolation:isolate}
.app-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-5;user-select:none;pointer-events:none}
.app::after{content:"";position:absolute;inset:0;z-index:-4;pointer-events:none;background:rgba(0,0,0,.12)}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}
.screen{position:absolute;inset:0;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(10px) scale(.992);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;content-visibility:auto}
.screen.active{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s;z-index:2}
.art-button{position:absolute;display:flex;align-items:center;justify-content:center;z-index:12;min-height:56px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.62));transition:transform .14s ease,filter .14s ease,opacity .14s ease}
.art-button:active{transform:scale(.976);filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))}
.art-button[disabled]{opacity:.62;pointer-events:none}
.art-button>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.art-button>span{position:relative;z-index:1;color:var(--gold-bright);font-size:clamp(20px,5.7vw,28px);letter-spacing:.16em;text-indent:.16em;text-shadow:0 2px 8px #000}
.art-button.small>span{font-size:clamp(13px,3.6vw,17px);letter-spacing:.1em;text-indent:.1em}
.icon-button{position:absolute;display:flex;align-items:center;justify-content:center;z-index:30;width:52px;height:52px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));transition:transform .14s ease}
.icon-button:active{transform:scale(.92)}
.icon-button img{width:100%;height:100%;object-fit:contain}
.nav-back{top:max(18px,env(safe-area-inset-top));left:16px}
.page-title{position:absolute;z-index:8;left:62px;right:28px;top:max(26px,calc(env(safe-area-inset-top) + 10px));text-align:right}
.page-title p,.roll-title p{margin:0;color:#9e7f4e;font-size:11px;letter-spacing:.28em}
.page-title h2,.roll-title h2{margin:.28rem 0 0;color:var(--gold-bright);font-weight:500;font-size:clamp(30px,8vw,42px);letter-spacing:.15em;text-indent:.15em;text-shadow:0 5px 18px rgba(0,0,0,.9)}
.page-title span,.roll-title span{display:block;margin-top:.35rem;color:#c9ac75;font-size:13px;letter-spacing:.08em}

/* Cover */
.cover-emblem{position:absolute;z-index:4;left:4%;right:4%;top:23%;height:48%;display:flex;align-items:center;justify-content:center}
.cover-emblem .sigil{position:absolute;width:91%;max-width:470px;opacity:.72;filter:drop-shadow(0 0 22px rgba(224,170,75,.18))}
.cover-die{position:relative;z-index:2;width:61%;max-width:310px;filter:drop-shadow(0 25px 42px rgba(0,0,0,.72)) drop-shadow(0 0 30px rgba(255,121,31,.24))}
.cover-die-value{position:absolute;z-index:3;top:49%;left:50%;transform:translate(-50%,-50%);font-size:clamp(58px,16vw,88px);color:#ffe2a0;text-shadow:0 3px 8px #000,0 0 24px rgba(255,174,75,.6)}
.cover-copy{position:absolute;z-index:6;left:6%;right:6%;top:max(40px,calc(env(safe-area-inset-top) + 20px));text-align:center}
.cover-copy p{margin:0;color:#9b7d4e;font-size:12px;letter-spacing:.3em}
.cover-copy h1{margin:.55rem 0 0;font-weight:600;font-size:clamp(43px,12vw,65px);letter-spacing:.14em;text-indent:.14em;color:var(--gold-bright);text-shadow:0 5px 22px #000}
.cover-copy span{display:block;margin-top:.7rem;color:#c6a66d;font-size:15px;letter-spacing:.17em;text-indent:.17em}
.cover-start{left:9%;right:9%;bottom:max(28px,calc(env(safe-area-inset-bottom) + 20px));height:10.5%}
.floating{animation:floating 4.8s ease-in-out infinite}
.slow-spin{animation:slow-spin 34s linear infinite}

/* Mode */
.mode-stack{position:absolute;z-index:6;left:7%;right:7%;top:19%;bottom:7%;display:flex;flex-direction:column;gap:3.5%}
.mode-card{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:34% 1fr auto;align-items:center;padding:7% 7% 7% 6%;text-align:left;overflow:hidden;filter:drop-shadow(0 14px 30px rgba(0,0,0,.62));transition:transform .16s ease,filter .16s ease}
.mode-card:active{transform:scale(.985)}
.mode-card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1}
.mode-icon{width:84%;max-width:140px;justify-self:center;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.mode-text{padding-left:5%}
.mode-text strong{display:block;color:var(--gold-bright);font-size:clamp(25px,7vw,38px);font-weight:500;letter-spacing:.13em;text-indent:.13em}
.mode-text span{display:block;margin-top:.6rem;color:#c5a971;font-size:14px;line-height:1.6}
.mode-card em{font-style:normal;font-size:12px;color:#9e8152;letter-spacing:.08em;align-self:end;margin-bottom:8px}
.mode-card.duel .mode-icon{filter:drop-shadow(0 0 20px rgba(203,72,47,.24))}

/* Config */
.config-title{top:max(24px,calc(env(safe-area-inset-top) + 8px))}
.count-section{position:absolute;z-index:8;left:8%;right:8%;top:15.5%;height:16%}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;padding:0 3%;color:#d7bc84}
.section-heading span{font-size:17px;letter-spacing:.12em}
.section-heading b{font-size:11px;font-weight:400;color:#91764b;letter-spacing:.08em}
.count-rail{position:relative;height:76%;display:flex;align-items:center;justify-content:center}
.count-rail>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.count-rail button{position:absolute;z-index:2;width:76px;height:76px;top:50%;transform:translateY(-50%)}
.count-rail button:first-of-type{left:-7px}.count-rail button:last-of-type{right:-7px}
.count-rail button img{width:100%;height:100%;object-fit:contain}
.count-display{position:relative;z-index:2;display:flex;align-items:flex-end;gap:.45rem;color:var(--gold-bright)}
.count-display strong{font-size:clamp(48px,13vw,70px);line-height:.85;font-weight:500}
.count-display span{font-size:17px;line-height:1.1;color:#cfb47b}
.skin-section{position:absolute;z-index:8;left:4%;right:4%;top:32.5%;bottom:15.8%}
.owner-tabs{height:37px;display:flex;justify-content:center;gap:8px;margin-bottom:2px}
.owner-tabs button{min-width:118px;padding:0 20px;border:1px solid rgba(215,175,87,.28);border-radius:999px;color:#9f8454;background:rgba(10,9,8,.46);font-size:13px;letter-spacing:.08em;transition:all .16s ease}
.owner-tabs button.active{color:#ffe1a0;border-color:rgba(244,202,107,.7);box-shadow:0 0 16px rgba(214,153,56,.16)}
.skin-carousel{position:relative;height:calc(100% - 68px);display:flex;align-items:center;justify-content:center}
.skin-stage{position:relative;width:min(76%,330px);height:100%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 18px 32px rgba(0,0,0,.6))}
.stage-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.stage-sigil{position:absolute;width:77%;opacity:.38}
.skin-current{position:relative;z-index:3;width:65%;filter:drop-shadow(0 20px 28px rgba(0,0,0,.7));transition:opacity .2s ease,transform .2s ease}
.skin-side{position:absolute;z-index:2;width:29%;opacity:.35;filter:blur(.3px) drop-shadow(0 8px 18px rgba(0,0,0,.6));transition:all .2s ease}
.skin-side.left{left:-4%;transform:translateX(-22%) scale(.86)}
.skin-side.right{right:-4%;transform:translateX(22%) scale(.86)}
.skin-title{position:absolute;z-index:5;left:0;right:0;bottom:8.5%;text-align:center;text-shadow:0 3px 12px #000}
.skin-title strong{display:block;color:var(--gold-bright);font-size:clamp(27px,7.5vw,38px);font-weight:500;letter-spacing:.17em;text-indent:.17em}
.skin-title span{display:block;margin-top:.2rem;color:#9f8251;font-size:12px;letter-spacing:.12em}
.skin-nav{top:48%;transform:translateY(-50%);width:48px;height:48px}
.skin-nav.prev{left:0}.skin-nav.next{right:0}
.skin-progress{position:absolute;left:0;right:0;bottom:2%;display:flex;justify-content:center;gap:6px}
.skin-progress i{display:block;width:6px;height:6px;border-radius:50%;background:#665232;transition:all .18s ease}
.skin-progress i.active{width:20px;border-radius:6px;background:#e1bd75;box-shadow:0 0 10px rgba(225,189,117,.45)}
.duo-summary{position:absolute;left:6%;right:6%;bottom:-8px;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.duo-summary>div{padding:6px 10px;border:1px solid rgba(221,177,85,.24);background:rgba(7,8,10,.5);text-align:center}
.duo-summary span{display:block;color:#8e7449;font-size:10px;letter-spacing:.08em}.duo-summary strong{display:block;margin-top:2px;color:#e4c78c;font-size:13px;font-weight:400}
.duo-summary i{font-style:normal;color:#a98955;font-size:14px}
.config-next{left:8%;right:8%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));height:9.5%}

/* Solo */
.roll-title{position:absolute;z-index:8;left:70px;right:24px;top:max(20px,calc(env(safe-area-inset-top) + 4px));text-align:right}
.solo-arena{position:absolute;z-index:8;left:4%;right:4%;top:13.2%;bottom:15.5%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.arena-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.arena-sigil{position:absolute;width:88%;opacity:.28}
.arena-idle{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center}
.arena-idle img{width:min(57vw,260px);filter:drop-shadow(0 18px 32px rgba(0,0,0,.65));opacity:.72;animation:floating 4s ease-in-out infinite}
.arena-idle span{color:#a88c5a;font-size:14px;letter-spacing:.09em}
.dice-field{position:absolute;z-index:5;left:7%;right:7%;top:10%;bottom:23%;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;place-items:center;gap:2% 1%;align-content:center}
.rolled-die{position:relative;width:100%;max-width:125px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;will-change:transform,opacity,filter}
.rolled-die img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.65))}
.rolled-die b{position:relative;z-index:2;font-size:clamp(28px,8vw,46px);font-weight:600;color:#fff1c5;text-shadow:0 3px 7px #000,0 0 14px rgba(255,197,92,.55)}
.rolled-die.selected-score::after{content:attr(data-selected-label);position:absolute;z-index:4;right:2%;top:2%;padding:.18rem .36rem;border:1px solid rgba(255,220,139,.72);border-radius:999px;background:rgba(22,15,8,.86);color:#ffe09a;font-size:10px;letter-spacing:.08em;box-shadow:0 0 14px rgba(255,192,74,.32)}
.rolled-die.selected-score img{filter:drop-shadow(0 0 12px rgba(255,196,74,.58)) drop-shadow(0 12px 20px rgba(0,0,0,.65))}
.rolled-die.selected-advantage::after{border-color:rgba(126,214,166,.75);color:#bff2d1;background:rgba(8,31,20,.88);box-shadow:0 0 14px rgba(77,190,124,.28)}
.rolled-die.selected-advantage img{filter:drop-shadow(0 0 14px rgba(91,211,144,.64)) drop-shadow(0 12px 20px rgba(0,0,0,.65))}
.rolled-die.selected-disadvantage::after{border-color:rgba(224,102,102,.75);color:#ffb0a1;background:rgba(39,8,8,.9);box-shadow:0 0 14px rgba(210,67,67,.28)}
.rolled-die.selected-disadvantage img{filter:drop-shadow(0 0 14px rgba(218,78,78,.62)) drop-shadow(0 12px 20px rgba(0,0,0,.65))}

.result-total{position:absolute;z-index:7;left:17%;right:17%;bottom:8%;height:16%;display:flex;align-items:center;justify-content:center;gap:.7rem;filter:drop-shadow(0 12px 22px rgba(0,0,0,.58))}
.result-total>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.result-total span,.result-total strong{position:relative;z-index:2}.result-total span{font-size:13px;color:#b79862;letter-spacing:.1em}.result-total strong{font-size:clamp(46px,13vw,70px);font-weight:500;color:#ffe0a0}
.critical-badges{position:absolute;z-index:8;left:4%;right:4%;bottom:1.2%;display:flex;justify-content:center;gap:8px}
.critical-badge{padding:5px 11px;border:1px solid rgba(223,179,87,.35);background:rgba(8,8,9,.65);font-size:11px;letter-spacing:.08em;color:#d9bc80}
.critical-badge.success{color:#ffe0a0}.critical-badge.fail{color:#ff987d;border-color:rgba(231,91,65,.35)}
.critical-badge.fate{font-weight:500;border-color:rgba(211,171,91,.45);color:#d8bd83}
.critical-badge.fate.advantage{color:#bff2d1;border-color:rgba(91,211,144,.46);background:rgba(9,37,24,.72)}
.critical-badge.fate.disadvantage{color:#ffad9e;border-color:rgba(218,78,78,.46);background:rgba(43,9,9,.72)}
.critical-badge.fate.single{color:#e4c88e;border-color:rgba(220,183,104,.4)}
.result-total[data-condition="advantage"]{filter:drop-shadow(0 0 14px rgba(91,211,144,.26)) drop-shadow(0 12px 22px rgba(0,0,0,.58))}
.result-total[data-condition="disadvantage"]{filter:drop-shadow(0 0 14px rgba(218,78,78,.24)) drop-shadow(0 12px 22px rgba(0,0,0,.58))}
.roll-button{left:8%;right:8%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));height:9.5%}

/* Duo */
.duo-back{top:calc(50% - 26px);left:8px}
.duo-center-title{position:absolute;z-index:14;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.duo-center-title strong{display:block;color:#d6b777;font-size:12px;letter-spacing:.16em}.duo-center-title span{display:block;margin-top:2px;color:#8c734a;font-size:10px}
.duel-zone{position:absolute;z-index:7;left:3%;right:3%;height:40.8%}
.zone-top{top:1.5%}.zone-bottom{bottom:1.5%}
.duel-zone-inner{position:relative;width:100%;height:100%;padding:6.5% 7% 5%;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.duel-zone-inner.rotated{transform:rotate(180deg)}
.zone-panel{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.zone-head{position:relative;z-index:3;width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}
.zone-head strong{font-size:14px;font-weight:500;letter-spacing:.07em;color:#dcecff}.zone-bottom .zone-head strong{color:#ffd6c9}
.zone-head span{font-size:32px;color:#f5e1b0}
.zone-idle{position:absolute;z-index:2;left:0;right:0;top:43%;transform:translateY(-50%);text-align:center;color:#8295a7;font-size:12px;letter-spacing:.08em}.zone-bottom .zone-idle{color:#a48379}
.duel-dice-field{position:absolute;z-index:4;left:7%;right:7%;top:18%;bottom:23%;display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:1%}
.duel-dice-field .rolled-die{max-width:88px}
.duel-dice-field .rolled-die b{font-size:clamp(20px,5.6vw,31px)}
.zone-badges{position:absolute;z-index:5;left:8%;right:8%;bottom:17%;display:flex;justify-content:center;gap:5px}
.zone-badges .critical-badge{font-size:9px;padding:3px 7px}
.zone-roll{left:22%;right:22%;bottom:3%;height:14.5%}
.duel-core{position:absolute;z-index:20;left:18%;right:18%;top:45.3%;height:9.4%;display:flex;align-items:center;justify-content:center;text-align:center}
.core-medallion{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 0 18px rgba(204,146,53,.2))}
.core-wait,.core-result{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center}
.core-wait strong{font-size:24px;color:#e2c27d}.core-wait span{font-size:9px;color:#8d744b;letter-spacing:.1em}
.core-result span{font-size:11px;color:#ad8e58}.core-result strong{margin-top:1px;font-size:18px;font-weight:500;color:#ffe0a0;letter-spacing:.08em}.core-result em{font-style:normal;margin-top:1px;font-size:8px;color:#806944}

/* Critical */
.critical-overlay{position:absolute;z-index:100;inset:0;background:rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}
.critical-overlay>img{position:absolute;width:120%;max-width:none;animation:crit-art 1.45s ease-out both}
.critical-copy{position:relative;z-index:3;text-align:center;text-shadow:0 4px 14px #000;animation:crit-copy 1.45s ease-out both}
.critical-copy strong{display:block;font-size:clamp(44px,12vw,72px);font-weight:500;letter-spacing:.11em;text-indent:.11em}.critical-copy span{display:block;margin-top:.45rem;font-size:15px;letter-spacing:.13em;text-indent:.13em}
.critical-overlay.success .critical-copy{color:#ffe4a2}.critical-overlay.fail .critical-copy{color:#ff8b73}

@keyframes slow-spin{to{transform:rotate(360deg)}}
@keyframes floating{0%,100%{transform:translateY(-5px)}50%{transform:translateY(8px)}}
@keyframes crit-art{0%{opacity:0;transform:scale(.55) rotate(-8deg)}20%{opacity:1}75%{opacity:.95}100%{opacity:0;transform:scale(1.16) rotate(3deg)}}
@keyframes crit-copy{0%{opacity:0;transform:scale(.65)}22%{opacity:1;transform:scale(1.07)}60%{transform:scale(1)}100%{opacity:0;transform:translateY(-12px)}}
@keyframes medallion-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.duel-core.waiting{animation:medallion-pulse 1.5s ease-in-out infinite}

@media (max-width:390px){
  .page-title h2,.roll-title h2{font-size:29px}
  .cover-copy h1{font-size:42px}.cover-copy span{font-size:13px}.cover-emblem{top:24%;height:44%}
  .mode-stack{top:18.5%;bottom:6%}.mode-text strong{font-size:23px}.mode-text span{font-size:12px}
  .count-section{top:15.4%}.skin-section{top:32%;bottom:15.2%}.skin-stage{width:74%}
  .skin-title strong{font-size:25px}.duo-summary{bottom:-6px}
  .solo-arena{top:13%;bottom:15%}.dice-field{top:9%;bottom:23%}.rolled-die{max-width:105px}
  .duel-zone{height:40.5%}.zone-top{top:1.7%}.zone-bottom{bottom:1.7%}.duel-core{top:45.5%;height:9%}
}
@media (max-height:720px){
  .cover-emblem{top:22%;height:44%}.cover-copy span{display:none}
  .mode-stack{top:17%;bottom:5.5%}
  .count-section{top:15%;height:15%}.skin-section{top:31%;bottom:14.8%}
  .skin-title{bottom:7%}.config-next,.roll-button{height:9%}
  .solo-arena{top:13%;bottom:14.5%}
}
@media (min-width:481px){
  body{align-items:center}.app{height:min(100dvh,900px);border-radius:20px;box-shadow:0 0 0 1px #342918,0 24px 90px #000}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Count-aware dice composition */
.dice-field[data-count="1"]{grid-template-columns:1fr}
.dice-field[data-count="1"] .rolled-die{max-width:190px}
.dice-field[data-count="2"]{grid-template-columns:repeat(2,1fr);padding:0 7%}
.dice-field[data-count="2"] .rolled-die{max-width:150px}
.dice-field[data-count="3"]{grid-template-columns:repeat(3,1fr)}
.dice-field[data-count="3"] .rolled-die{max-width:125px}
.dice-field[data-count="4"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);padding:0 8%}
.dice-field[data-count="4"] .rolled-die{max-width:112px}
.dice-field[data-count="5"],.dice-field[data-count="6"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.dice-field[data-count="5"] .rolled-die,.dice-field[data-count="6"] .rolled-die{max-width:96px}
.duel-dice-field[data-count="1"]{grid-template-columns:1fr}
.duel-dice-field[data-count="1"] .rolled-die{max-width:122px}
.duel-dice-field[data-count="2"]{grid-template-columns:repeat(2,1fr);padding:0 14%}
.duel-dice-field[data-count="2"] .rolled-die{max-width:102px}
.duel-dice-field[data-count="3"]{grid-template-columns:repeat(3,1fr)}
.duel-dice-field[data-count="3"] .rolled-die{max-width:84px}
.duel-dice-field[data-count="4"]{grid-template-columns:repeat(4,1fr)}
.duel-dice-field[data-count="4"] .rolled-die{max-width:72px}
.duel-dice-field[data-count="5"],.duel-dice-field[data-count="6"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.duel-dice-field[data-count="5"] .rolled-die,.duel-dice-field[data-count="6"] .rolled-die{max-width:64px}

/* Duo configuration spacing */
.duo-config .skin-carousel{height:calc(100% - 104px)}
.duo-config .skin-progress{bottom:37px}
.duo-config .duo-summary{bottom:0}
.duo-config .skin-title{bottom:7%}
.duo-config .skin-carousel{height:calc(100% - 112px)}
.duo-config .skin-progress{display:none}
.duo-config .duo-summary{bottom:0;height:42px}
.duo-config .skin-title{bottom:6%}