/* Start / game-over overlay */
/* ---- start screen (new design) ---- */
#overlay .card{width:min(480px,100%);box-sizing:border-box;container-type:inline-size;color:var(--ink);text-align:left;padding:0;border:34px solid transparent;border-image:url(../assets/ui/card-frame.webp) 70 fill / 34px stretch;background:none;margin:auto}
#overlay .ci{--u:calc(100cqw/412);display:flex;flex-direction:column;gap:calc(var(--u)*9);padding:0 2px 2px}
#overlay .hd{display:flex;flex-direction:column;align-items:center;margin:calc(var(--u)*-44) calc(var(--u)*-12) 0}
#logoW{position:relative;width:100%;max-width:560px}#logoI{display:block;width:100%;height:auto}
#crest{position:absolute;left:16.1%;top:27.4%;width:14.4%;height:auto}
#overlay h1{display:none;font-family:var(--display);font-weight:800;font-size:calc(var(--u)*50);line-height:1;margin:calc(var(--u)*30) 0 0;letter-spacing:.05em;color:#3a2412;text-align:center}
#overlay h1 em{font-style:normal;color:var(--blood)}
#overlay.over #logoW{display:none}#overlay.over h1{display:block}
#overlay .card p{margin:0;font-size:calc(var(--u)*14.5);line-height:1.42;text-align:center;color:#3a2412}
.dv{display:flex;justify-content:center}.dv img{width:min(36%,200px);height:auto;display:block}
#overlay .card .st{margin:0}
.cols{display:flex;flex-direction:column;gap:calc(var(--u)*9)}.cl,.cr{display:flex;flex-direction:column;gap:calc(var(--u)*9)}
#ovL{list-style:none;margin:0;padding:calc(var(--u)*8) calc(var(--u)*10);display:flex;flex-direction:column;gap:calc(var(--u)*5);background:rgba(255,246,222,.55);border:1px solid #d7b878;border-radius:calc(var(--u)*14);font-size:calc(var(--u)*13);line-height:1.32;color:#3a2412}
#ovL li{display:flex;gap:calc(var(--u)*10);align-items:center}#ovL li img{width:calc(var(--u)*40);height:calc(var(--u)*40);flex:none;object-fit:contain}
.tms{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*8)}
.tms button{position:relative;padding:0;border:0;background:none;cursor:pointer;border-radius:calc(var(--u)*12);transition:transform .08s,filter .15s}
.tms button img{display:block;width:100%;height:auto;pointer-events:none}
.tms button:hover{filter:brightness(1.12)}.tms button:active{transform:scale(.98)}
.tms button.on{box-shadow:0 0 0 calc(var(--u)*2.5) #ffd24a,0 0 calc(var(--u)*12) rgba(255,210,74,.75)}
.tms button.on::after,.ob.on::after{content:"";position:absolute;right:calc(var(--u)*-6);top:calc(var(--u)*-8);width:calc(var(--u)*24);height:calc(var(--u)*24);background:url(../assets/ui/checkmark.webp) center/contain no-repeat;pointer-events:none}
.rowo{display:grid;gap:calc(var(--u)*8)}.rowo.r3{grid-template-columns:repeat(3,1fr)}.rowo.r2{grid-template-columns:1fr 1fr}
.ob{position:relative;display:flex;align-items:center;gap:calc(var(--u)*8);min-width:0;height:calc(var(--u)*50);padding:0 calc(var(--u)*8);cursor:pointer;text-align:left;color:#fff;
  border-radius:calc(var(--u)*11);border:calc(var(--u)*2.5) solid #d9c3a0;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.1),transparent 70%),linear-gradient(#6d4a2c,#432a17);box-shadow:inset 0 0 calc(var(--u)*7) rgba(0,0,0,.55),0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,0,.4)}
.ob:hover{filter:brightness(1.15)}.ob:active{transform:scale(.98)}
.ob.on{border-color:#ffd24a;box-shadow:inset 0 0 calc(var(--u)*7) rgba(0,0,0,.55),0 0 calc(var(--u)*9) rgba(255,205,70,.6)}
.ob .oi{width:calc(var(--u)*30);height:calc(var(--u)*30);flex:none;background:var(--ic) center/contain no-repeat}
.ob span{display:flex;flex-direction:column;min-width:0;line-height:1.05}
.ob b{font-family:var(--display);font-weight:800;font-size:calc(var(--u)*17.5);letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap}
.ob small{font-family:var(--body);font-weight:600;font-size:calc(var(--u)*10.5);color:#f1e6d4;margin-top:calc(var(--u)*3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob.wide{justify-content:center;width:100%}
.go{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*4);margin-top:calc(var(--u)*2)}
.go>img{width:calc(var(--u)*34);height:auto;flex:none}
#btnStart{padding:0;border:0;background:none;cursor:pointer;width:62%;transition:transform .08s,filter .15s}
#btnStart img{display:block;width:100%;height:auto;pointer-events:none}
#btnStart:hover{filter:brightness(1.12)}#btnStart:active{transform:scale(.97)}
.cont{display:block;margin:0 auto;padding:calc(var(--u)*6) calc(var(--u)*18);border-radius:calc(var(--u)*10);border:calc(var(--u)*2) solid #d9c3a0;background:linear-gradient(#6d4a2c,#432a17);color:#fff;font-family:var(--display);font-weight:800;font-size:calc(var(--u)*16);cursor:pointer;text-shadow:0 1px 2px #000}
.cont small{display:block;font-family:var(--body);font-weight:600;font-size:calc(var(--u)*10);color:#f1e6d4}
.cont:hover{filter:brightness(1.15)}
@media (orientation:landscape) and (min-width:760px){
  #overlay .card{width:min(940px,100%)}
  #overlay .ci{--u:calc(100cqw/880)}
  .cols{flex-direction:row;align-items:flex-start;gap:calc(var(--u)*18)}.cl,.cr{flex:1 1 0;min-width:0}
  #overlay .hd{margin-left:0;margin-right:0}#logoW{max-width:calc(var(--u)*560)}
}
@media (max-height:500px) and (orientation:landscape){
  #overlay{padding:4px}
  #overlay .card{width:min(940px,100%);border-width:20px;border-image-width:20px}
  #overlay .ci{--u:calc(100cqw/1040);gap:calc(var(--u)*7)}
  #overlay .hd{margin-top:calc(var(--u)*-26)}#logoW{max-width:calc(var(--u)*430)}
  #ovL{display:none!important}#overlay .card p{font-size:calc(var(--u)*13)}
  #overlay h1{font-size:calc(var(--u)*40);margin-top:calc(var(--u)*14)}
  .dv{display:none}.ob{height:calc(var(--u)*46)}
}