/* ============================================================
   Title · reward · end screens
   ============================================================ */
.center{min-height:76vh; display:flex; flex-direction:column; justify-content:center; max-width:62ch}

/* ---------- title screen: copy left, salvaged plate right ---------- */
.intro{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px);
  gap:clamp(26px,5vw,60px); align-items:center; min-height:80vh;
}
.introtext{max-width:62ch}

/* ---------- mode picker ---------- */
.pick{
  margin:26px 0 12px; font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  color:var(--bone-dim);
}
.modes{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:56ch}
@media(max-width:560px){.modes{grid-template-columns:1fr}}
.mode{
  position:relative; display:flex; flex-direction:column; gap:6px; text-align:left;
  padding:16px 16px 14px; border-radius:var(--r);
  background:linear-gradient(170deg,var(--slate-2),var(--slate) 70%);
  border:1px solid var(--line); color:#cfc8bb;
  transition:border-color .2s,transform .2s,box-shadow .3s;
  animation:enterPanel .5s ease both .15s;
}
.mode:hover{border-color:var(--brass); transform:translateY(-3px); box-shadow:0 22px 40px -26px #000, 0 0 40px -22px rgba(201,146,46,.6)}
.mode b{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.1em; color:var(--bone)}
.mode .mtag{font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--brass-dim)}
.mode .mfig{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--brass)}
.mode p{margin:2px 0 0; font-size:14.5px; line-height:1.5; color:#a6a099; flex:1}
.mode .mfoot{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--bone-dim);
}
/* the hard way in wears a warmer badge */
.mode-hard{border-color:rgba(184,80,60,.34)}
.mode-hard .mtag{color:var(--rust)}
.mode-hard:hover{border-color:var(--rust); box-shadow:0 22px 40px -26px #000, 0 0 40px -22px rgba(184,80,60,.7)}
.mode-hard b{color:var(--bone)}

.platewrap{position:relative; margin:0 0 44px; animation:plateIn 1.1s cubic-bezier(.2,.9,.25,1) .3s both}
@keyframes plateIn{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}

.plate{
  position:relative; margin:0; padding:11px 11px 8px;
  background:linear-gradient(158deg,#1d3439,#0b1418 70%);
  border:1px solid var(--brass-dim); border-radius:var(--r);
  transform:rotate(-1.6deg);
  transition:transform .55s cubic-bezier(.2,.9,.25,1), box-shadow .55s;
  box-shadow:0 44px 84px -44px #000, 0 0 70px -26px rgba(201,146,46,.3),
             inset 0 1px 0 rgba(231,223,209,.07);
}
.plate:hover{transform:rotate(0) scale(1.015); box-shadow:0 50px 90px -40px #000, 0 0 90px -22px rgba(201,146,46,.45)}
.plate img{
  display:block; width:100%; height:auto; border:1px solid rgba(0,0,0,.55);
  filter:saturate(.94) contrast(1.04);
}
/* glass over the print */
.plate::after{
  content:""; position:absolute; left:11px; right:11px; top:11px; bottom:30px; pointer-events:none;
  background:linear-gradient(118deg, rgba(231,223,209,.12) 0 16%, transparent 40%, transparent 100%);
}
/* the brass pin holding it to the wall */
.plate::before{
  content:""; position:absolute; top:-7px; left:50%; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #ffe6a8, var(--brass) 60%, #6d4d13);
  box-shadow:0 3px 8px rgba(0,0,0,.6), 0 0 14px rgba(201,146,46,.45);
}
.plate figcaption{
  padding:9px 2px 1px; font-family:var(--mono); font-size:9px; letter-spacing:.24em;
  color:rgba(231,223,209,.42);
}

/* the second plate, pinned over the bottom-left corner of the first */
.plate.inset{
  position:absolute; left:-30px; bottom:-32px; width:58%; z-index:2;
  padding:8px 8px 5px; transform:rotate(4.6deg);
  background:linear-gradient(158deg,#223c41,#0c161a 70%);
  box-shadow:0 26px 50px -26px #000, 0 0 44px -18px rgba(201,146,46,.34),
             inset 0 1px 0 rgba(231,223,209,.08);
}
.plate.inset:hover{transform:rotate(1deg) scale(1.05); z-index:3}
.plate.inset::after{left:8px; right:8px; top:8px; bottom:24px}
.plate.inset::before{left:auto; right:15px; top:-6px; width:10px; height:10px; margin:0}
.plate.inset figcaption{padding:7px 1px 0; font-size:8px; letter-spacing:.2em}

@media(max-width:980px){
  .intro{grid-template-columns:1fr; min-height:0; padding:8vh 0 6vh; gap:38px}
  .platewrap{max-width:560px}
  .plate{transform:rotate(-1deg)}
  .plate.inset{left:-12px; bottom:-24px; width:64%}
}
@media(max-width:520px){
  .plate.inset{left:0; bottom:-20px; width:70%}
}
.title{
  font-family:var(--display); font-weight:700; letter-spacing:.16em;
  font-size:clamp(42px,10vw,90px); line-height:.98; margin:0 0 6px; color:var(--bone);
}
.title span{color:var(--brass)}
.title.win{animation:titleGlow 3.4s ease-in-out infinite}
@keyframes titleGlow{0%,100%{text-shadow:none}50%{text-shadow:0 0 26px rgba(201,146,46,.4)}}
.sub{font-family:var(--mono); font-size:12px; letter-spacing:.34em; color:var(--brass); margin:0 0 30px}
.caret{display:inline-block; width:.55em; background:var(--brass); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.stats{display:flex; gap:30px; flex-wrap:wrap; margin:26px 0 30px}
.stat b{display:block; font-family:var(--mono); font-size:26px; color:var(--brass); font-weight:500}
.stat span{font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--bone-dim)}
.stat.coin b{color:var(--brass-lit)}

/* reward screen ledger */
.ledger{
  max-width:44ch; margin:22px 0 4px; padding:14px 16px;
  border:1px solid var(--line); border-left:2px solid var(--brass); border-radius:var(--r);
  background:rgba(201,146,46,.05);
}
.ledger div{
  display:flex; gap:12px; font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  color:var(--bone-dim); padding:3px 0;
}
.ledger div b{margin-left:auto; color:var(--brass); font-weight:500}
.ledger div.tot{border-top:1px solid var(--line); margin-top:6px; padding-top:8px; color:var(--bone)}
.ledger div.tot b{color:var(--brass-lit); font-size:16px}
.ledger div.zero b{color:var(--bone-dim)}

.chipdrop{
  display:inline-grid; place-items:center; width:64px; height:64px; margin:0 0 6px;
  font-family:var(--mono); font-size:30px; color:var(--ink); font-weight:600;
  background:radial-gradient(circle at 34% 28%, #ffe6a8, var(--brass) 58%, #6d4d13);
  border-radius:50%; box-shadow:0 0 26px rgba(201,146,46,.35);
  animation:chipIn .7s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes chipIn{from{opacity:0; transform:translateY(-26px) rotate(-140deg) scale(.5)}to{opacity:1; transform:none}}