/* ===========================================================
   疯狂的月饼 · 水墨割草  样式
   画面基准 1280x720，#stage 通过 transform 缩放适配窗口
   =========================================================== */
:root{
  --ink:#26231f;
  --ink-soft:#4a443c;
  --paper:#f2e8d5;
  --paper-deep:#e6d9be;
  --seal:#a8322f;
  --seal-light:#c8524c;
  --gold:#c9a227;
  --jade:#4d7f6a;
  --shadow:0 8px 26px rgba(20,16,10,.45);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;background:#15130f;}
body{
  display:flex;align-items:center;justify-content:center;
  font-family:"STKaiti","KaiTi","Kaiti SC","Songti SC","SimSun",serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 40%, #262218 0%, #100e0b 70%, #070605 100%);
  user-select:none;
  -webkit-user-select:none;
}
#stage{
  position:relative;width:1280px;height:720px;flex:0 0 auto;
  transform-origin:center center;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 20px 60px rgba(0,0,0,.7);
  background:#f2e8d5;overflow:hidden;
}
#game{display:block;width:1280px;height:720px;cursor:none;}
/* 浮层面板画布：压在所有 DOM 界面之上（成就 / 中秋图鉴 / 卡面特效） */
#overlay{position:absolute;inset:0;width:1280px;height:720px;pointer-events:none;z-index:50;}
.hidden{display:none !important;}

/* ---------- 手机端虚拟摇杆（网游式：大摇杆 + 右下技能键） ---------- */
#touch{position:absolute;inset:0;z-index:60;pointer-events:none;touch-action:none;}
#touch.hidden{display:none !important;}

/* 左：移动摇杆。按下时 JS 会把它挪到手指处（浮动摇杆），松开弹回左下 */
#stick{position:absolute;left:26px;bottom:26px;width:248px;height:248px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(252,246,230,.26), rgba(252,246,230,.07) 68%, rgba(252,246,230,.20));
  border:4px solid rgba(252,246,230,.5);
  box-shadow:0 10px 26px rgba(20,16,10,.4), inset 0 0 46px rgba(255,255,255,.14);
  pointer-events:auto;touch-action:none;
  transition:left .14s ease-out, bottom .14s ease-out;}
#stick .ar{position:absolute;font-size:21px;line-height:1;font-weight:400;pointer-events:none;
  color:rgba(252,246,230,.62);text-shadow:0 1px 4px rgba(0,0,0,.55);}
#stick .ar.u{left:50%;top:13px;transform:translateX(-50%);}
#stick .ar.d{left:50%;bottom:13px;transform:translateX(-50%);}
#stick .ar.l{left:13px;top:50%;transform:translateY(-50%);}
#stick .ar.r{right:13px;top:50%;transform:translateY(-50%);}
#knob{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fdf8ea, #cbb98f);
  border:3px solid rgba(38,35,31,.55);
  box-shadow:0 5px 16px rgba(20,16,10,.5), inset 0 0 20px rgba(120,96,60,.25);}

/* 右：主攻击摇杆（最大、最好按）——拖动即开火，方向即瞄准 */
#atkStick{position:absolute;right:28px;bottom:28px;width:214px;height:214px;border-radius:50%;
  pointer-events:auto;touch-action:none;
  background:radial-gradient(circle at 50% 45%, rgba(240,150,90,.34), rgba(180,60,40,.18));
  border:4px solid rgba(252,236,200,.62);
  box-shadow:0 10px 26px rgba(20,16,10,.45), inset 0 0 46px rgba(255,180,120,.2);}
#atkKnob{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #ffe9d2, #d69a6a);
  border:3px solid rgba(90,40,20,.55);box-shadow:0 5px 16px rgba(20,16,10,.45);}
#atkStick .atk-label{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:17px;
  letter-spacing:3px;color:rgba(70,24,12,.8);pointer-events:none;}

/* 技能键：贴着攻击摇杆排成一个小扇形 */
.tbtn{position:absolute;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;
  border-radius:50%;border:4px solid rgba(252,246,230,.55);color:#3a1412;
  background:radial-gradient(circle at 45% 38%, rgba(253,248,234,.94), rgba(206,186,146,.9));
  font-family:inherit;box-shadow:0 7px 20px rgba(20,16,10,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.tbtn b{font-size:26px;letter-spacing:2px;font-weight:700;line-height:1;}
.tbtn s{text-decoration:none;font-size:13px;letter-spacing:2px;opacity:.65;line-height:1;}
.tbtn:active{transform:scale(.93);background:radial-gradient(circle at 45% 38%, #fff6dc, #bfa87c);}
.tbtn.dash{right:262px;bottom:44px;width:126px;height:126px;}
.tbtn.act{right:276px;bottom:196px;width:112px;height:112px;}
/* 暂停键：右上角（HUD 信息条下方、攻击摇杆上方，谁也不挡） */
.tbtn.pause{right:24px;top:132px;width:96px;height:96px;
  background:radial-gradient(circle at 45% 38%, rgba(253,248,234,.86), rgba(198,178,140,.86));}
.tbtn.pause b{font-size:22px;letter-spacing:0;}

/* 竖屏提示：横屏才是正常姿态 */
#rotateHint{position:absolute;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:rgba(12,10,7,.92);color:#f6e7c4;font-size:26px;letter-spacing:4px;text-align:center;}
#rotateHint.on{display:flex;}

/* 触屏模式下 HUD 让开摇杆：武器栏挪到左上，提示条上移 */
.is-touch .hud-weapons{left:16px;top:102px;bottom:auto;flex-wrap:wrap;max-width:620px;
  transform:scale(.82);transform-origin:left top;}
.is-touch .hud-hint{bottom:164px;}
.is-touch .hud-toasts{bottom:236px;}

@media (max-width:820px){
  .hud-hint{font-size:17px;bottom:118px;}
  .is-touch .hud-hint{bottom:156px;}
  .hud-weapons{transform:scale(.86);transform-origin:left bottom;}
  .title{font-size:76px;letter-spacing:12px;}
  .subtitle{font-size:20px;letter-spacing:8px;}
  .menu-btns{gap:10px;}
  .menu-btns .btn{font-size:19px;padding:9px 38px;min-width:230px;}
}
@media (max-height:430px){
  #stick{width:208px;height:208px;left:18px;bottom:18px;}
  #knob{width:88px;height:88px;margin:-44px 0 0 -44px;}
  #stick .ar{font-size:18px;}
  #atkStick{width:184px;height:184px;right:20px;bottom:20px;}
  #atkKnob{width:78px;height:78px;margin:-39px 0 0 -39px;}
  #atkStick .atk-label{font-size:15px;bottom:11px;}
  .tbtn.dash{width:110px;height:110px;right:222px;bottom:34px;}
  .tbtn.act{width:98px;height:98px;right:238px;bottom:168px;}
  .tbtn.pause{width:84px;height:84px;right:18px;top:108px;}
  .tbtn b{font-size:23px;}
  .tbtn s{font-size:12px;}
  .is-touch .hud-weapons{top:92px;transform:scale(.72);}
}

/* ---------- 纸纹与墨框 ---------- */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:rgba(18,15,11,.55);backdrop-filter:blur(2px);
}
.screen.paper{
  background:
    radial-gradient(circle at 50% 42%, rgba(255,250,236,.97), rgba(233,219,190,.97) 62%, rgba(206,188,153,.97)),
    var(--paper);
}
.screen.paper::after{
  content:"";position:absolute;inset:16px;border:2px solid rgba(38,35,31,.35);
  border-radius:4px;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(120,96,60,.18);
}

/* 主菜单半透明，露出画布上的水墨背景 */
#menu.paper{
  background:linear-gradient(rgba(246,238,221,.55), rgba(232,219,190,.72));
}
#menu.paper::after{inset:22px;border-color:rgba(38,35,31,.28);}

.title{font-size:96px;letter-spacing:18px;color:var(--ink);text-shadow:0 3px 0 rgba(255,255,255,.4);}
.title-ink{
  position:absolute;top:70px;left:50%;transform:translateX(-50%);
  width:520px;height:210px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(200,180,130,.45), rgba(200,180,130,0) 70%);
  filter:blur(6px);pointer-events:none;
}
.subtitle{font-size:24px;letter-spacing:10px;color:var(--ink-soft);opacity:.9;margin-bottom:12px;}
.menu-btns{display:flex;flex-direction:column;gap:14px;margin-top:6px;}
.credit{position:absolute;bottom:28px;font-size:16px;letter-spacing:2px;color:var(--ink-soft);opacity:.75;}

.btn{
  font-family:inherit;font-size:22px;letter-spacing:4px;
  padding:12px 44px;min-width:260px;cursor:pointer;
  color:var(--ink);background:linear-gradient(#fdf7e6,#e8dcc0);
  border:2px solid rgba(38,35,31,.7);border-radius:4px;
  box-shadow:0 4px 0 rgba(38,35,31,.35), inset 0 0 18px rgba(200,175,120,.35);
  transition:transform .08s ease, box-shadow .08s ease, background .15s;
}
.btn:hover{background:linear-gradient(#fffdf3,#eee3c8);transform:translateY(-1px);}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(38,35,31,.35);}
.btn.primary{
  color:#fdf5e3;background:linear-gradient(#b8403a,#8e2725);
  border-color:#631a18;box-shadow:0 4px 0 #4d1310, inset 0 0 18px rgba(255,200,150,.25);
}
.btn.primary:hover{background:linear-gradient(#c94b44,#9b2d29);}
.btn[disabled]{opacity:.4;cursor:not-allowed;filter:grayscale(.6);}
/* ---------- 选择关卡：卡片式 ---------- */
.lv-cards{display:flex;gap:20px;margin:8px 0 6px;align-items:stretch;}
.lvcard{position:relative;width:238px;padding:18px 16px 16px;cursor:pointer;
  background:linear-gradient(#fdf8ea,#e9dcc0);border:2px solid rgba(38,35,31,.7);border-radius:8px;
  box-shadow:0 7px 0 rgba(38,35,31,.32), inset 0 0 30px rgba(205,180,130,.3);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .12s ease, box-shadow .12s ease;}
.lvcard:hover{transform:translateY(-6px);box-shadow:0 13px 0 rgba(38,35,31,.32), inset 0 0 34px rgba(205,180,130,.4);}
.lvcard .lvc-badge{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:#fdf5e3;background:linear-gradient(#b8403a,#8e2725);
  border:3px double #f0d9a8;box-shadow:0 4px 12px rgba(0,0,0,.35);}
.lvcard .lvc-name{font-size:24px;letter-spacing:3px;}
.lvcard .lvc-zone{font-size:14px;letter-spacing:1px;color:var(--ink-soft);text-align:center;
  line-height:1.5;min-height:44px;}
.lvcard .lvc-boss{font-size:14px;letter-spacing:1px;color:#5c1f1c;background:rgba(200,170,110,.22);
  border-left:3px solid rgba(168,50,47,.55);border-radius:3px;padding:4px 10px;text-align:center;}
.lvcard .lvc-star{font-size:18px;letter-spacing:5px;color:var(--gold);}
.lvcard .lvc-tag{font-size:12px;letter-spacing:2px;color:var(--ink-soft);opacity:.9;}
.lvcard.locked{filter:grayscale(.85);opacity:.6;cursor:not-allowed;}
.lvcard.locked:hover{transform:none;box-shadow:0 7px 0 rgba(38,35,31,.32);}
.lvcard.locked::after{content:"未 解 锁";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-11deg);white-space:nowrap;
  font-size:26px;letter-spacing:4px;color:#8e2725;opacity:.9;
  border:3px solid rgba(142,39,37,.7);border-radius:6px;padding:5px 14px;background:rgba(252,246,230,.75);}
/* 无尽模式卡片：夜色底 + 金边 */
.lvcard.endless{background:linear-gradient(#33313d,#191821);color:#f3e7cf;border-color:#c9922a;
  box-shadow:0 7px 0 rgba(20,16,10,.5), inset 0 0 34px rgba(201,146,42,.22);}
.lvcard.endless:hover{box-shadow:0 13px 0 rgba(20,16,10,.5), inset 0 0 40px rgba(201,146,42,.3);}
.lvcard.endless .lvc-badge{background:linear-gradient(#c9922a,#8d6515);border-color:#fbeec8;color:#2b1c06;font-size:22px;}
.lvcard.endless .lvc-zone{color:#d9c9a6;}
.lvcard.endless .lvc-tag{color:#e6d3a8;opacity:.95;}
.lvcard.endless .lvc-boss{color:#f6dfae;background:rgba(201,146,42,.18);border-left-color:rgba(201,146,42,.75);}
/* 金色古卷按键：原「无尽模式」按键的样式，现在给主菜单的「中秋图鉴」用 */
.btn.gold{border-color:#8d6515;background:linear-gradient(#fdf3d8,#e5cf9c);color:#5b3d08;}
.btn.gold:hover{background:linear-gradient(#fffaea,#eed9a8);}

.panel-title{font-size:44px;letter-spacing:14px;margin-bottom:10px;}
.panel-title.light{color:#f7edd8;text-shadow:0 2px 12px rgba(0,0,0,.8);}
.panel-note{font-size:16px;letter-spacing:2px;color:var(--ink-soft);max-width:820px;text-align:center;line-height:1.7;}
.panel-note.light{color:#f0e4c8;text-shadow:0 1px 8px rgba(0,0,0,.9);}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(300px,1fr));gap:10px 34px;margin:8px 0 16px;}
.help-grid>div{display:flex;align-items:baseline;gap:14px;font-size:18px;
  border-bottom:1px dashed rgba(38,35,31,.3);padding-bottom:6px;}
.help-grid b{color:var(--seal);min-width:150px;font-size:19px;letter-spacing:1px;}
.help-grid span{color:var(--ink-soft);}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-size:16px;}
.hud-left{position:absolute;left:18px;top:16px;display:flex;gap:10px;align-items:center;}
#hudAvatar{width:72px;height:72px;image-rendering:auto;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));}
.hud-bars{width:290px;}
.hud-name{font-size:17px;letter-spacing:2px;color:#2b2620;text-shadow:0 1px 0 rgba(255,255,255,.6);
  display:flex;justify-content:space-between;}
.hud-name span{font-size:14px;opacity:.85;}
.bar{height:13px;border:2px solid rgba(38,35,31,.75);border-radius:3px;background:rgba(255,252,240,.5);
  overflow:hidden;margin-top:3px;position:relative;}
.bar i{display:block;height:100%;width:100%;transition:width .12s linear;}
.bar.hp i{background:linear-gradient(#d9534f,#9c2b28);}
.bar.xp{height:8px;}
.bar.xp i{background:linear-gradient(#7fb3a0,#43705d);}
.bar.boss{height:16px;width:560px;background:rgba(30,24,18,.6);}
.bar.boss i{background:linear-gradient(#f0c04a,#b8403a);}
.hud-lv{font-size:13px;color:#3a332b;margin-top:2px;letter-spacing:1px;}
.hud-center{position:absolute;left:50%;top:14px;transform:translateX(-50%);text-align:center;}
.wave-banner{font-size:34px;letter-spacing:8px;color:#5c1f1c;
  text-shadow:0 2px 0 rgba(255,255,255,.6), 0 0 22px rgba(200,60,50,.45);
  opacity:0;transition:opacity .4s;}
.wave-banner.on{opacity:1;}
.boss-bar{margin-top:6px;}
.boss-name{font-size:20px;letter-spacing:6px;color:#3a1412;text-shadow:0 1px 0 rgba(255,255,255,.5);}
.hud-right{position:absolute;right:18px;top:16px;text-align:right;color:#2b2620;}
.hud-level{font-size:19px;letter-spacing:3px;text-shadow:0 1px 0 rgba(255,255,255,.6);}
.hud-stat{font-size:15px;opacity:.85;margin-top:2px;letter-spacing:1px;}
.dash-ind{margin-top:8px;font-size:13px;letter-spacing:2px;opacity:.9;display:flex;
  align-items:center;gap:8px;justify-content:flex-end;}
.dash-ind i{display:block;width:70px;height:7px;background:rgba(38,35,31,.3);border:1px solid rgba(38,35,31,.6);
  border-radius:2px;position:relative;overflow:hidden;}
.dash-ind i::after{content:"";position:absolute;inset:0;width:var(--dash,100%);
  background:linear-gradient(90deg,#6fae95,#3f6f5c);transition:width .06s linear;}
.hud-weapons{position:absolute;left:18px;bottom:16px;display:flex;gap:10px;}
.wchip{background:rgba(252,246,230,.82);border:2px solid rgba(38,35,31,.7);border-radius:4px;
  padding:4px 10px 4px 6px;display:flex;align-items:center;gap:8px;box-shadow:0 2px 0 rgba(38,35,31,.3);}
.wchip canvas{width:34px;height:34px;}
.wchip b{font-size:15px;letter-spacing:1px;}
.wchip s{text-decoration:none;font-size:12px;color:var(--seal);letter-spacing:0;}
.hud-hint{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);
  font-size:20px;letter-spacing:3px;color:#3a1412;background:rgba(252,246,230,.8);
  padding:6px 20px;border-radius:3px;border:1px solid rgba(38,35,31,.4);opacity:0;transition:opacity .3s;}
.hud-hint.on{opacity:1;}
.hud-toasts{position:absolute;left:50%;bottom:180px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;}
.toast{font-size:22px;letter-spacing:3px;color:#5c1f1c;text-shadow:0 2px 0 rgba(255,255,255,.7);
  animation:toastUp 1.5s ease forwards;}
@keyframes toastUp{
  0%{opacity:0;transform:translateY(14px) scale(.9);}
  18%{opacity:1;transform:translateY(0) scale(1);}
  75%{opacity:1;}
  100%{opacity:0;transform:translateY(-18px);}
}
.dmg-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(180,30,30,0) 45%, rgba(150,20,20,.85) 100%);
  transition:opacity .18s;}

/* ---------- 卡牌 ---------- */
.cards{display:flex;gap:26px;margin:6px 0 4px;}
.card{
  --pad:14px;--art:130px;--halo:170px;
  width:238px;background:linear-gradient(#fdf8ea,#eadfc4);border:2px solid rgba(38,35,31,.75);
  border-radius:6px;padding:var(--pad);cursor:pointer;position:relative;
  box-shadow:0 8px 0 rgba(38,35,31,.35), inset 0 0 30px rgba(205,180,130,.35);
  transition:transform .1s ease, box-shadow .1s ease;
  animation:cardIn .26s cubic-bezier(.2,1.4,.4,1) backwards;
}
.card:nth-child(2){animation-delay:.07s;}
.card:nth-child(3){animation-delay:.14s;}
@keyframes cardIn{from{opacity:0;transform:translateY(38px) rotate(-2deg);}to{opacity:1;transform:none;}}
.card .key{position:absolute;right:10px;top:8px;font-size:13px;opacity:.55;}
/* 卡面美术位：光环与图标必须同心，而且光环要画在**道具底座之外**。
   图标底座是半径 0.42*260 的宣纸圆盘（缩到 130 显示后半径约 54.6px），
   所以光环画布给到 170px 见方、圆心与图标重合，光环半径落在圆盘外面才看得见。
   光环以前没有定位样式，是个普通块级 canvas，被排在图标**上方** →
   旋转的光环飘在道具头顶、卡片还白高 130px。 */
.card .halo{position:absolute;left:50%;margin-left:calc(var(--halo) / -2);
  top:calc(var(--pad) + (var(--art) - var(--halo)) / 2);
  width:var(--halo);height:var(--halo);display:block;pointer-events:none;z-index:0;}
/* 图标下方多留一点空：光环直径比图标大，留白不够会压在名字上（光环是定位元素，
   默认画在文字之上）*/
.card .card-icon{position:relative;z-index:1;display:block;
  width:var(--art);height:var(--art);margin:0 auto 20px;}
.card h3{font-size:24px;letter-spacing:3px;text-align:center;margin-bottom:2px;}
.card .tag{display:block;text-align:center;font-size:13px;letter-spacing:3px;color:#fdf5e3;
  background:var(--ink-soft);border-radius:2px;padding:2px 0;margin:0 26px 8px;}
.card.w .tag{background:var(--seal);}
.card .desc{font-size:15px;line-height:1.55;color:#403a31;min-height:48px;}
.card .detail{font-size:13px;line-height:1.5;color:#5c1f1c;letter-spacing:0;
  background:rgba(200,170,110,.18);border-left:3px solid rgba(168,50,47,.6);
  border-radius:3px;padding:5px 8px;margin-top:6px;}
.card .lv{font-size:13px;color:var(--seal);letter-spacing:1px;margin-top:4px;}
/* 悬浮：位移由 updateCards 每帧写进内联 transform（含悬浮抬起量），
   这里只补一层阴影；选择器带上 .cards 才压得过下面的稀有度配色 */
.cards .card:hover{box-shadow:0 14px 0 rgba(38,35,31,.35), inset 0 0 34px rgba(205,180,130,.45);}
.card.r1{border-color:#6f6a5f;}
.card.r2{border-color:#3f6f5c;box-shadow:0 8px 0 rgba(38,35,31,.35), inset 0 0 34px rgba(90,150,120,.3);}
.card.r3{border-color:#a8322f;box-shadow:0 8px 0 rgba(38,35,31,.35), inset 0 0 34px rgba(200,120,70,.35);}

/* ---------- 对话 ---------- */
#dialogue{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:34px;pointer-events:auto;}
.dlg-box{width:1000px;min-height:236px;display:flex;gap:18px;padding:16px 22px 16px 16px;
  background:linear-gradient(#fbf4e2,#e9dcc0);border:2px solid rgba(38,35,31,.8);border-radius:6px;
  box-shadow:var(--shadow);
  animation:dlgIn .22s ease backwards;}
@keyframes dlgIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
#dlgPortrait{width:200px;height:200px;flex:0 0 auto;background:radial-gradient(circle at 50% 45%,#fffaf0,#e3d3b0);
  border:2px solid rgba(38,35,31,.5);border-radius:4px;}
.dlg-main{flex:1;display:flex;flex-direction:column;}
.dlg-name{font-size:26px;letter-spacing:5px;color:var(--seal);margin-bottom:6px;}
.dlg-text{font-size:20px;line-height:1.75;color:#332e27;letter-spacing:1px;flex:1;
  text-shadow:0 1px 0 rgba(255,255,255,.6);}
.dlg-next{align-self:flex-end;font-size:15px;letter-spacing:2px;color:var(--ink-soft);opacity:.8;
  animation:blink 1.2s infinite;}
@keyframes blink{0%,100%{opacity:.85;}50%{opacity:.25;}}

/* ---------- 结算 ---------- */
.result-inner{display:flex;flex-direction:column;align-items:center;gap:18px;
  animation:resIn .35s cubic-bezier(.2,1.3,.4,1);}
@keyframes resIn{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:none;}}
.result-seal{
  font-size:74px;letter-spacing:16px;color:#fdf1dd;padding:22px 62px;
  background:linear-gradient(#b8403a,#8a2422);border:4px double #f0d9a8;border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.35);
  text-shadow:0 4px 0 rgba(0,0,0,.25);
}
.result-seal.fail{background:linear-gradient(#4c4a48,#2c2a28);}
.result-sub{font-size:22px;letter-spacing:4px;color:#f2e6cc;text-shadow:0 2px 10px rgba(0,0,0,.8);}
.result-btns{display:flex;gap:20px;margin-top:6px;}