/* QuizRips quiz polish: a real question panel, neutral answer buttons (nothing looks pre-highlighted),
   clear right/wrong marks, the wrong-answer teaching panel, test review, Redemption and Warm-Up. */

/* ---------- question panel ---------- */
.play .card.qcard{background:linear-gradient(180deg,#1C2A5C,#152048);border:1px solid #30437F;border-radius:24px;padding:22px 20px 20px;box-shadow:0 22px 44px -26px rgba(0,0,0,.85)}
.play .qtext{color:#fff}
.play .quote{background:#0F1838;border-left-color:#FFD23F;border-radius:0 12px 12px 0;padding:12px 16px;font-size:18px}
:root[data-theme="light"] .play .card.qcard{background:#fff;border-color:#D3D9EA;box-shadow:0 18px 40px -26px rgba(20,26,51,.45)}
:root[data-theme="light"] .play .qtext{color:#141A33}
:root[data-theme="light"] .play .quote{background:#F3F5FC}
@media (max-width:620px){.play .card.qcard{padding:18px 14px 16px;border-radius:20px}}

/* ---------- answer buttons: all the same until you answer ---------- */
.play .choice,.play .tf .choice,.play .tf .choice[data-tf="1"],.play .tf .choice[data-tf="0"]{background:#24336A;border:2px solid #3A4E92;color:#fff;box-shadow:0 4px 0 #111A3D}
.play .choice .k{background:#0F1838;color:#BFD0FF;border-radius:50%;font-family:var(--f-display);font-weight:800}
.play .choice:hover:not(:disabled){border-color:#4FA3FF;background:#2A3C7A}
.play .tf .choice{font-size:21px}
:root[data-theme="light"] .play .choice,:root[data-theme="light"] .play .tf .choice[data-tf="1"],:root[data-theme="light"] .play .tf .choice[data-tf="0"]{background:#F3F6FF;border-color:#C9D3EE;color:#141A33;box-shadow:0 4px 0 #D3D9EA}
:root[data-theme="light"] .play .choice .k{background:#fff;color:#2D5BFF}
/* after answering: right is green with a check, your wrong pick is red with an X, the rest fade */
.play .choice{position:relative}
.play .choice.right,.play .tf .choice.right{background:#0FA97A;border-color:#2DD4A0;color:#fff;box-shadow:0 0 0 3px rgba(45,212,160,.3),0 4px 0 #08694B;opacity:1}
.play .choice.wrong,.play .tf .choice.wrong{background:#B3263A;border-color:#FF6B7A;color:#fff;box-shadow:0 0 0 3px rgba(255,90,100,.3),0 4px 0 #6E1220;opacity:1}
.play .choice.right .k,.play .choice.wrong .k{background:#fff}
.play .choice.right .k{color:#0FA97A}.play .choice.wrong .k{color:#B3263A}
.play .choice.right::after,.play .choice.wrong::after{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:17px;background:#fff;animation:markpop .35s cubic-bezier(.3,1.6,.5,1)}
.play .choice.right::after{content:"\2713";color:#0FA97A}
.play .choice.wrong::after{content:"\2715";color:#B3263A}
.play .choice.dim,.play .tf .choice:disabled:not(.right):not(.wrong){opacity:.4}
:root[data-theme="light"] .play .choice.right{background:#0FA97A;color:#fff}
:root[data-theme="light"] .play .choice.wrong{background:#B3263A;color:#fff}
@keyframes markpop{from{transform:translateY(-50%) scale(0)}}

/* ---------- wrong-answer teaching panel ---------- */
.fb.teach{border-top:4px solid #FF5A64;background:#2A1022}
.fb.teach .in{align-items:flex-end}
.fb .th{display:flex;align-items:center;gap:10px;font-size:22px;color:#FF8A94!important;margin-bottom:10px}
.fb .th .tx{flex:none;width:34px;height:34px;border-radius:50%;background:#FF5A64;color:#fff;display:grid;place-items:center;font-size:18px;animation:markpop2 .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes markpop2{from{transform:scale(0)}}
.tgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.tgrid>div{border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tgrid small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.tgrid span{font-family:var(--f-display);font-weight:800;font-size:19px;overflow-wrap:anywhere}
.tpick{background:rgba(255,90,100,.14);border:1px solid rgba(255,90,100,.5);color:#FFB3BA}
.tpick span{text-decoration:line-through;text-decoration-thickness:2px}
.tright{background:#0FA97A;color:#fff;box-shadow:0 0 0 3px rgba(45,212,160,.25)}
.tw{margin:10px 0 0!important;font-size:16px!important;line-height:1.45;color:#F4F6FF}
.tw span{font-weight:800;color:#FFD23F}
.tw mark{background:#0FA97A;color:#fff;border-radius:6px;padding:0 6px;font-weight:800}
#fbnext.wait{opacity:.55}
body.fbteach .play{padding-bottom:300px}
:root[data-theme="light"] .fb.teach{background:#FFF1F3;color:#141A33}
:root[data-theme="light"] .fb .th{color:#C2273B!important}
:root[data-theme="light"] .tpick{color:#8A1424}
:root[data-theme="light"] .tw{color:#141A33}
:root[data-theme="light"] .tw span{color:#A86A00}
@media (max-width:520px){.tgrid{grid-template-columns:1fr}.fb .th{font-size:19px}}

/* ---------- results: go over your test ---------- */
.revbox{padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between}
.rb-tx{display:flex;flex-direction:column;min-width:200px;flex:1}
.rb-tx b{font-family:var(--f-display);font-size:20px}
.rb-tx small{color:var(--muted);font-size:14px}
.rb-btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:620px){.rb-btns{width:100%;flex-direction:column}.rb-btns .btn{width:100%}}
.redeemcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:linear-gradient(135deg,color-mix(in srgb,#FFD23F 22%,var(--surface)),var(--surface));border-color:#FFD23F}
.redeemcard .eyebrow{color:#FFD23F}
:root[data-theme="light"] .redeemcard .eyebrow{color:#A86A00}
.redeemcard .rg{display:flex;align-items:center;gap:14px}
.redeemcard{padding:16px 18px}
.rgb{width:78px;height:78px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 32px/1 var(--f-display);background:var(--surface-2);border:2px solid var(--line)}
.rgb small{font:700 13px/1 var(--f-body);margin-top:4px;color:var(--muted)}
.rgb.old{opacity:.6}
.rgb.new{background:#FFD23F;color:#2A1A00;border-color:#B57A00;animation:markpop2 .6s .3s cubic-bezier(.3,1.6,.5,1) backwards}
.rgb.new small{color:#5A3A00}
.redeemcard .arrow{font-size:28px;font-weight:800;color:#FFD23F}
.redeemcard p{margin:0}

/* ---------- review my test (full screen) ---------- */
.trov{position:fixed;inset:0;z-index:58;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);animation:fadein .2s}
.tr-wrap{max-width:760px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.tr-head{display:flex;align-items:center;gap:12px}
.tr-head>div{flex:1;min-width:0}
.tr-head h2{font-family:var(--f-display);font-size:clamp(24px,5vw,32px)}
.tr-head .gradebadge{flex:none}
.tr-seg{align-self:flex-start}
.tr-list{display:flex;flex-direction:column;gap:12px}
.titem{background:var(--surface);border:1px solid var(--line);border-left:5px solid #0FA97A;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.titem.bad{border-left-color:#FF5A64}
.th2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-weight:800;font-size:14px}
.tk{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tres{margin-left:auto;font-weight:800;font-size:14px;color:#2DD4A0}
.titem.bad .tres{color:#FF7A85}
:root[data-theme="light"] .tres{color:#0B7F5B}:root[data-theme="light"] .titem.bad .tres{color:#C2273B}
.tq{margin:0;font-size:18px;font-weight:700;line-height:1.4}
.tq mark{background:#0FA97A;color:#fff;border-radius:6px;padding:0 6px}
.tquote{margin:0;padding:8px 12px;background:var(--surface-2);border-left:3px solid #FFD23F;border-radius:0 8px 8px 0}
.tch{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tch li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--surface-2);font-size:16px}
.tch li .m{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px}
.tch li.ok{background:color-mix(in srgb,#0FA97A 22%,var(--surface));font-weight:800}
.tch li.ok .m{background:#0FA97A;color:#fff}
.tch li.no{background:color-mix(in srgb,#FF5A64 18%,var(--surface))}
.tch li.no .m{background:#FF5A64;color:#fff}
.tch li.no span:last-child{text-decoration:line-through}
.twhy{margin:0;color:var(--muted);font-size:15px}
.tr-foot{display:flex;flex-direction:column;gap:10px;margin-top:6px}

/* ---------- modes: Warm-Up tile, Redemption / Warm-Up intro banners ---------- */
.modes2{grid-template-columns:1fr 1fr}
.modes2 .modetile.speed{grid-column:auto;order:0}
@media (min-width:900px){.modes2{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mt-ic.warm{background:linear-gradient(135deg,#2DD4A0,#0FA97A);font-size:26px}
.in-mode.wu{background:linear-gradient(135deg,#2DD4A0,#0FA97A)}
.in-mode.rd{background:linear-gradient(135deg,#FFD23F,#E88A00);color:#2A1A00;text-shadow:none}
.fb .msg b.th{font-size:22px}
@media (max-width:620px){
  .fb.teach .in{flex-direction:column;align-items:stretch;gap:12px}
  .fb.teach .msg{min-width:0}
  .fb.teach #fbnext{width:100%}
  .fb .msg b.th{font-size:18px}
  .tgrid{grid-template-columns:1fr 1fr}
  .tgrid span{font-size:17px}
}

/* ---------- wrong-answer cost ---------- */
.float.neg{color:#FF5A64!important;text-shadow:0 2px 0 rgba(0,0,0,.4)}
#xpc.hit{animation:xphit .45s ease}
@keyframes xphit{30%{transform:scale(1.18);background:#FF5A64;color:#fff}}
.tcost{display:inline-block;margin-top:10px;font-weight:800;font-size:14px;color:#fff;background:#B3263A;border-radius:999px;padding:5px 12px}
.xprow.neg{color:#FF7A85}.xprow.neg b{color:#FF7A85}
.negv{color:#FF7A85!important}
:root[data-theme="light"] .xprow.neg,:root[data-theme="light"] .xprow.neg b,:root[data-theme="light"] .negv{color:#C2273B!important}
.levelup.down{background:linear-gradient(90deg,#FFB3BA,#FF7A85);color:#4A0A14}