:root{--ink:#0b1230;--teal:#2dd4bf;--coral:#ff5d73;--sun:#ffd24a;--ok:#22c55e;--bad:#ff4d5e;--mut:#b4bffd}
#tricky-pairs-app *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#tricky-pairs-app button{font-family:inherit;color:inherit}
#tricky-pairs-app{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;color:#eef2ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(135deg,#0b1230,#251e7a,#0e5566,#0b1230);background-size:300% 300%;animation:tp-bg 20s ease infinite}
#tricky-pairs-app::before,#tricky-pairs-app::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(70px);opacity:.38;pointer-events:none}
#tricky-pairs-app::before{background:radial-gradient(circle,#6366f1,transparent 65%);top:-22vmax;left:-18vmax;animation:tp-drift 22s ease-in-out infinite alternate}
#tricky-pairs-app::after{background:radial-gradient(circle,#14b8a6,transparent 65%);bottom:-28vmax;right:-18vmax;animation:tp-drift 27s ease-in-out infinite alternate-reverse}
@keyframes tp-bg{50%{background-position:100% 100%}}
@keyframes tp-drift{to{transform:translate(18vmax,10vmax) scale(1.15)}}
.tp-screen{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;animation:tp-in .45s cubic-bezier(.2,.8,.2,1) both}
.tp-screen.tp-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.tp-scroll>*{flex:none}
@keyframes tp-in{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}
.tp-col{width:min(980px,100%);margin:0 auto}
/* top bar */
.tp-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;flex:none;width:min(1100px,100%);margin:0 auto}
.tp-top>:first-child{justify-self:start}.tp-tools{justify-self:end;display:flex;gap:8px}
.tp-ib{width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.09);font-size:21px;cursor:pointer;backdrop-filter:blur(8px);transition:transform .15s,background .2s}
.tp-ib:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}.tp-ib:active{transform:scale(.9)}
.tp-ttl{text-align:center;line-height:1.1}
.tp-ttl b{font-size:clamp(22px,4vw,34px);font-weight:700}
.tp-ttl span{display:block;font-size:clamp(12px,1.8vw,15px);color:var(--mut)}
/* stats */
.tp-stats{flex:none;display:flex;align-items:center;gap:10px;width:min(900px,100%);margin:8px auto 0}
.tp-bar{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.tp-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--sun));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.tp-chip{display:inline-block;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.13);font-weight:600;font-size:14px;white-space:nowrap}
.tp-chip.bump{animation:tp-bump .45s}
@keyframes tp-bump{40%{transform:scale(1.25);background:rgba(255,210,74,.35)}}
/* question */
.tp-q{flex:none;text-align:center;margin:clamp(6px,1.6vh,16px) 0 clamp(6px,1.2vh,12px)}
.tp-q h2{margin:0;font-size:clamp(24px,4.6vw,44px);font-weight:700;line-height:1.12;text-shadow:0 4px 20px rgba(0,0,0,.4)}
.tp-q h2.sm{font-size:clamp(20px,3.6vw,34px)}
.tp-hintbtn{margin-top:8px;border:1.5px solid var(--sun);background:rgba(255,210,74,.12);color:var(--sun);border-radius:99px;padding:7px 18px;font-weight:600;font-size:15px;cursor:pointer;transition:transform .15s,background .2s}
.tp-hintbtn:hover{background:rgba(255,210,74,.25);transform:translateY(-2px)}
.tp-hintbtn.used{opacity:.5;pointer-events:none}
.tp-hint{margin:0 auto;max-width:680px;max-height:0;opacity:0;overflow:hidden;color:#fff3c4;font-size:15px;line-height:1.4;transition:max-height .45s,opacity .45s,margin .45s}
.tp-hint.show{max-height:90px;opacity:1;margin-top:8px}
/* arena */
.tp-arena{flex:1;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(8px,2vw,22px);align-items:stretch;width:min(1100px,100%);margin:0 auto}
.tp-card{position:relative;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;border-radius:clamp(18px,3vw,30px);border:2px solid rgba(255,255,255,.25);background:linear-gradient(160deg,#fff,#e0e7ff);color:#1e1b4b;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .4s,border-color .3s;animation:tp-card-in .6s cubic-bezier(.2,.9,.25,1.1) both;animation-delay:var(--dl,0s)}
.tp-arena>.tp-card:nth-child(1){--dx:-70px}.tp-arena>.tp-card:nth-child(3){--dx:70px;--dl:.08s}
@keyframes tp-card-in{from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.9)}to{opacity:1;transform:none}}
.tp-card:not(.used):hover{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 50px rgba(99,102,241,.55)}
.tp-card:not(.used):active{transform:scale(.98)}
.tp-card:focus-visible,.tp-next:focus-visible,.tp-play:focus-visible,.tp-ib:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.tp-card.used{cursor:default}
.tp-let{position:absolute;top:10px;left:10px;z-index:2;width:clamp(30px,5vw,40px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--coral),#e11d48);color:#fff;font-weight:700;display:grid;place-items:center;font-size:clamp(15px,2.4vw,20px);box-shadow:0 4px 12px rgba(225,29,72,.5)}
.tp-wrap{position:absolute;top:16px;left:16px;right:16px;bottom:16px;transition:bottom .5s cubic-bezier(.2,.8,.2,1)}
.tp-card.used .tp-wrap{bottom:56px}
.tp-svg{width:100%;height:100%;display:block;overflow:visible;animation:tp-float 4.5s ease-in-out infinite}
.tp-arena>.tp-card:nth-child(3) .tp-svg{animation-delay:-2.2s}
@keyframes tp-float{50%{transform:translateY(-8px) rotate(.8deg)}}
.tp-svg path{fill:#c7d2fe;fill-opacity:0;stroke:#4f46e5;stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tp-draw 1.1s .2s ease forwards,tp-fill .7s .9s ease forwards;transition:fill .4s,stroke .4s}
@keyframes tp-draw{to{stroke-dashoffset:0}}@keyframes tp-fill{to{fill-opacity:1}}
.tp-card.correct .tp-svg path{fill:#86efac;stroke:#15803d}.tp-card.wrong .tp-svg path{fill:#fca5a5;stroke:#b91c1c}
.tp-tag{position:absolute;left:50%;bottom:12px;transform:translate(-50%,20px) scale(.8);opacity:0;padding:5px 16px;border-radius:99px;font-weight:700;font-size:clamp(14px,2.4vw,20px);white-space:nowrap;color:#fff;background:#64748b;transition:.45s cubic-bezier(.2,1.4,.4,1)}
.tp-card.used .tp-tag{opacity:1;transform:translate(-50%,0) scale(1)}
.tp-card.correct .tp-tag{background:var(--ok)}.tp-card.wrong .tp-tag{background:var(--bad)}
.tp-card.correct{border-color:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.35),0 0 60px rgba(34,197,94,.7);animation:tp-pop .55s}
.tp-card.wrong{border-color:var(--bad);box-shadow:0 0 0 4px rgba(255,77,94,.35),0 0 60px rgba(255,77,94,.65);animation:tp-shake .5s}
.tp-card.other{opacity:.6}
@keyframes tp-pop{40%{transform:scale(1.05)}}
@keyframes tp-shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.tp-vs{align-self:center;width:clamp(40px,6vw,64px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--sun),#fb923c);color:#3b1d00;font-weight:700;font-size:clamp(15px,2.6vw,24px);animation:tp-ring-p 2s infinite;z-index:2}
@keyframes tp-ring-p{0%{box-shadow:0 0 0 0 rgba(255,210,74,.55)}70%,100%{box-shadow:0 0 0 16px rgba(255,210,74,0)}}
/* options (state quiz) */
.tp-opts{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:clamp(8px,1.6vw,16px);width:min(1000px,100%);margin:0 auto}
.tp-opt{justify-content:flex-start;gap:12px;padding:0 16px;text-align:left;font-size:clamp(16px,2.8vw,24px);font-weight:600;--dy:24px;--dl:calc(var(--i)*.07s)}
.tp-opt .tp-let{position:static;flex:none}
.tp-opt.correct::after,.tp-opt.wrong::after{content:"✓";margin-left:auto;font-size:28px;font-weight:700;color:var(--ok)}
.tp-opt.wrong::after{content:"✗";color:var(--bad)}
/* footer */
.tp-foot{flex:none;min-height:clamp(58px,9vh,76px);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.tp-msg{font-size:clamp(17px,3vw,26px);font-weight:700;animation:tp-rise .4s both;text-align:center}
.tp-msg.dim{color:var(--mut);font-weight:500;font-size:clamp(14px,2.2vw,17px);animation:none}
.tp-msg.ok{color:#4ade80}.tp-msg.no{color:#ff9aa6}
@keyframes tp-rise{from{opacity:0;transform:translateY(12px)}}
.tp-next,.tp-play,.tp-btn{border:0;border-radius:99px;font-weight:700;cursor:pointer;color:#06222a;background:linear-gradient(135deg,var(--teal),#67e8f9);transition:transform .15s}
.tp-next{padding:11px 30px;font-size:clamp(16px,2.6vw,20px);box-shadow:0 8px 24px rgba(45,212,191,.45);animation:tp-rise .4s both,tp-glow 1.8s .5s infinite}
@keyframes tp-glow{0%{box-shadow:0 0 0 0 rgba(45,212,191,.55)}70%,100%{box-shadow:0 0 0 16px rgba(45,212,191,0)}}
.tp-next:hover,.tp-play:hover,.tp-btn:hover{transform:scale(1.05)}.tp-next:active,.tp-play:active,.tp-btn:active{transform:scale(.96)}
.tp-btn{padding:12px 24px;font-size:17px}.tp-btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
/* home / learn / result */
.tp-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.tp-deco span{position:absolute;width:clamp(90px,15vw,190px);opacity:.15;animation:tp-float 7s ease-in-out infinite}
.tp-deco .tp-svg path{fill:#fff;stroke:#fff}
.tp-hero{text-align:center;padding:clamp(18px,5vh,56px) 0 12px}
.tp-hero h1{margin:0;font-size:clamp(40px,9vw,84px);line-height:1;font-weight:700;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.tp-hero p.sub{margin:12px auto 22px;max-width:520px;font-size:clamp(16px,2.6vw,21px);color:var(--mut);line-height:1.4}
.tp-play{padding:16px 46px;font-size:clamp(19px,3vw,24px);animation:tp-glow 2s infinite}
.tp-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 6px}
.tp-rules{font-size:14px;color:var(--mut);margin:6px 0 0}
.tp-h3{margin:22px 0 10px;font-size:clamp(18px,3vw,24px);text-align:center}
.tp-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;padding-bottom:24px}
.tp-pair{display:flex;align-items:center;gap:8px;padding:8px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.tp-pair i{font-style:normal;font-size:12px;color:var(--sun);font-weight:700}
.tp-sbtn{flex:1;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);font-weight:600;font-size:15px;cursor:pointer;padding:6px 8px;transition:transform .15s,background .2s}
.tp-sbtn:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.tp-learn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(14px,3vw,30px);align-items:center;margin-top:clamp(10px,3vh,26px)}
.tp-shapebox{position:relative;height:clamp(220px,46vh,420px);border-radius:28px;background:linear-gradient(160deg,#fff,#e0e7ff);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.tp-shapebox .tp-wrap{bottom:16px}
.tp-learn h2{margin:0 0 10px;font-size:clamp(26px,4.4vw,40px)}
.tp-facts{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.tp-facts li{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.1);font-size:clamp(15px,2.2vw,18px);line-height:1.35}
.tp-diff{padding:12px 14px;border-radius:14px;border-left:5px solid var(--teal);background:rgba(45,212,191,.14);font-size:clamp(15px,2.2vw,18px);line-height:1.4;margin:0 0 14px}
.tp-res{text-align:center;padding-top:clamp(10px,3vh,30px)}
.tp-res h2{margin:6px 0;font-size:clamp(28px,5vw,44px)}
.tp-res p{margin:6px auto;max-width:560px;font-size:clamp(15px,2.4vw,19px);line-height:1.45;color:#dbe3ff}
.tp-badge{display:inline-block;padding:10px 20px;border-radius:99px;background:linear-gradient(135deg,var(--sun),#fb923c);color:#3b1d00!important;font-weight:700;animation:tp-pop .7s .6s both}
.tp-ring{width:clamp(150px,26vh,220px)}.tp-ring circle{fill:none;stroke-width:10}.tp-ring .bg{stroke:rgba(255,255,255,.15)}
.tp-ring .fg{stroke:var(--teal);stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);transform:rotate(-90deg);transform-origin:60px 60px;animation:tp-ringa 1.2s .3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tp-ringa{to{stroke-dashoffset:var(--o)}}
.tp-ring text{fill:#fff;font:700 30px system-ui,sans-serif}
.tp-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.tp-conf{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.tp-conf i{position:absolute;width:9px;height:14px;border-radius:2px;animation:tp-conf 1.15s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes tp-conf{to{transform:translate(var(--x),calc(var(--y) + 170px)) rotate(var(--r));opacity:0}}
/* phones & small screens: stack shapes top/bottom, everything stays on one screen */
@media (max-aspect-ratio:1/1){
 .tp-arena{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);gap:8px}
 .tp-arena>.tp-card:nth-child(1){--dx:0;--dy:-50px}.tp-arena>.tp-card:nth-child(3){--dx:0;--dy:50px}
 .tp-vs{margin:-16px 0;width:44px}
 .tp-opts{grid-template-columns:1fr}
 .tp-learn{grid-template-columns:1fr}.tp-shapebox{height:clamp(200px,34vh,320px)}
}
@media (max-height:520px){
 .tp-ttl span,.tp-rules{display:none}
 .tp-q{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:6px 0}
 .tp-q h2{font-size:22px}.tp-hintbtn{margin:0}.tp-ib{width:38px;height:38px}
 .tp-foot{min-height:48px;margin-top:4px}.tp-card.used .tp-wrap{bottom:44px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---- Light, clean theme ---- */
:root{--mut:#64748b}
#tricky-pairs-app{color:#334155;background:linear-gradient(135deg,#ffffff,#eef2ff 45%,#e8f7f5 100%);background-size:200% 200%}
#tricky-pairs-app::before{background:radial-gradient(circle,#c7d2fe,transparent 65%);opacity:.7}
#tricky-pairs-app::after{background:radial-gradient(circle,#a7f3d0,transparent 65%);opacity:.6}
.tp-screen{background-image:radial-gradient(rgba(30,41,90,.07) 1px,transparent 1px)}
.tp-ib{background:#fff;border-color:#e2e8f0;color:#1e293b;box-shadow:0 2px 8px rgba(30,41,90,.08)}
.tp-ib:hover{background:#eef2ff}
.tp-ttl b,.tp-q h2,.tp-hero h1,.tp-learn h2,.tp-res h2,.tp-h3{color:#334155;text-shadow:none}
.tp-bar{background:#dbe3f0}
.tp-chip{background:#fff;border:1px solid #e2e8f0;color:#1e293b;box-shadow:0 1px 4px rgba(30,41,90,.06)}
.tp-chip.bump{background:#fef3c7}
.tp-hintbtn{border-color:#d97706;background:#fffbeb;color:#92400e}
.tp-hintbtn:hover{background:#fef3c7}
.tp-hint{color:#92400e}
.tp-card{background:#fff;border:1.5px solid #e2e8f0;box-shadow:0 10px 30px rgba(30,41,90,.12)}
.tp-card:not(.used):hover{border-color:#818cf8;box-shadow:0 18px 44px rgba(79,70,229,.25)}
.tp-card.correct{border-color:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.25),0 10px 44px rgba(34,197,94,.45)}
.tp-card.wrong{border-color:var(--bad);box-shadow:0 0 0 4px rgba(255,77,94,.22),0 10px 44px rgba(255,77,94,.4)}
.tp-card.other{opacity:.7}
.tp-msg.dim{color:#64748b}.tp-msg.ok{color:#15803d}.tp-msg.no{color:#b91c1c}
.tp-next,.tp-play,.tp-btn{color:#fff;background:linear-gradient(135deg,#4f46e5,#6366f1)}
.tp-next{box-shadow:0 8px 22px rgba(79,70,229,.35)}
@keyframes tp-glow{0%{box-shadow:0 0 0 0 rgba(79,70,229,.45)}70%,100%{box-shadow:0 0 0 16px rgba(79,70,229,0)}}
.tp-btn.ghost{background:#fff;color:#1e293b;border:1px solid #cbd5e1}
.tp-hero p.sub,.tp-rules{color:#475569}
.tp-res p{color:#334155}
.tp-deco span{opacity:.09}.tp-deco .tp-svg path{fill:#4f46e5;stroke:#4f46e5}
.tp-pair{background:#fff;border-color:#e2e8f0;box-shadow:0 2px 10px rgba(30,41,90,.06)}
.tp-pair i{color:#d97706}
.tp-sbtn{background:#f8fafc;border-color:#e2e8f0;color:#1e293b}.tp-sbtn:hover{background:#eef2ff}
.tp-shapebox{background:#fff;border:1.5px solid #e2e8f0;box-shadow:0 14px 40px rgba(30,41,90,.14)}
.tp-facts li{background:#fff;border:1px solid #e2e8f0;color:#1e293b}
.tp-diff{background:#eef2ff;border-left-color:#4f46e5;color:#1e293b}
.tp-ring .bg{stroke:#dbe3f0}.tp-ring .fg{stroke:#4f46e5}.tp-ring text{fill:#334155}


/* ===== FINAL THEME — professional, white background, USA flag colours ===== */
/* Old Glory Red #B31942 · White #FFFFFF · Old Glory Blue #B31942 */

#tricky-pairs-app {
  position: fixed !important; inset: 0 !important; height: 100vh !important; height: 100dvh !important; overflow: hidden !important;
  background: #ffffff !important; background-size: auto !important; animation: none !important;
  color: #334155 !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
#tricky-pairs-app::before, #tricky-pairs-app::after { display: none !important; }
#tricky-pairs-app .tp-screen { background-image: none !important; }
#tricky-pairs-app .tp-ttl b, #tricky-pairs-app .tp-q h2, #tricky-pairs-app .tp-hero h1,
#tricky-pairs-app .tp-learn h2, #tricky-pairs-app .tp-res h2, #tricky-pairs-app .tp-h3 { color: #111827 !important; text-shadow: none !important; }
#tricky-pairs-app .tp-bar { background: #e2e8f0 !important; }
#tricky-pairs-app .tp-bar i { background: #B31942 !important; }
#tricky-pairs-app .tp-chip { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #111827 !important; box-shadow: 0 1px 4px rgba(10,49,97,.08) !important; }
/* Primary buttons — Old Glory Red, strong and solid (no gradient tricks) */
#tricky-pairs-app .tp-play, #tricky-pairs-app .tp-next, #tricky-pairs-app .tp-btn:not(.ghost) {
  background: #B31942 !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(179,25,66,.28) !important;
}
#tricky-pairs-app .tp-next { animation: tp-glow 2s infinite !important; }
@keyframes tp-glow { 0% { box-shadow: 0 0 0 0 rgba(179,25,66,.35); } 70%, 100% { box-shadow: 0 0 0 14px rgba(179,25,66,0); } }
#tricky-pairs-app .tp-btn.ghost { background: #ffffff !important; color: #B31942 !important; border: 2px solid #B31942 !important; }
/* VS circle — red with white text */
#tricky-pairs-app .tp-vs { background: #B31942 !important; color: #ffffff !important; }
/* State shapes — navy outline on white, light-blue fill (USA blue, clean and real) */
#tricky-pairs-app .tp-svg path { fill: #f8fafc !important; stroke: #374151 !important; stroke-width: 1.4 !important; }
#tricky-pairs-app .tp-card.correct .tp-svg path { fill: #dcfce7 !important; stroke: #15803d !important; }
#tricky-pairs-app .tp-card.wrong .tp-svg path { fill: #fee2e2 !important; stroke: #b91c1c !important; }
#tricky-pairs-app .tp-let { background: #B31942 !important; box-shadow: 0 4px 12px rgba(179,25,66,.35) !important; }
#tricky-pairs-app .tp-card { background: #ffffff !important; border: 2px solid #e2e8f0 !important; box-shadow: 0 8px 24px rgba(179,25,66,.10) !important; }
#tricky-pairs-app .tp-card:not(.used):hover { border-color: #B31942 !important; box-shadow: 0 14px 32px rgba(179,25,66,.18) !important; }
#tricky-pairs-app .tp-shapebox { background: #ffffff !important; border: 2px solid #e2e8f0 !important; }
#tricky-pairs-app .tp-deco span { opacity: .05 !important; }
/* Hint button — top-left row above the centred question title */
#tricky-pairs-app .tp-hint-row { text-align: left; margin-bottom: 6px; }
#tricky-pairs-app .tp-hintbtn { border-color: #B31942 !important; background: #ffffff !important; color: #B31942 !important; }
#tricky-pairs-app .tp-hintbtn:hover { background: #eff6ff !important; }
/* Result ring + badge in USA colours */
#tricky-pairs-app .tp-ring .fg { stroke: #B31942 !important; }
#tricky-pairs-app .tp-badge { background: #fef2f4 !important; color: #B31942 !important; border: 1.5px solid #f0a8b8 !important; }
#tricky-pairs-app .tp-diff { background: #fef2f2 !important; border-left-color: #B31942 !important; }

/* Red is an accent only — never a solid button colour */
#tricky-pairs-app .tp-sbtn { background: #ffffff !important; color: #B31942 !important; border: 1.5px solid #e2e8f0 !important; }
#tricky-pairs-app .tp-sbtn:hover { background: #fef2f4 !important; border-color: #f0a8b8 !important; }
#tricky-pairs-app .tp-pair { background: #ffffff !important; border: 1.5px solid #e2e8f0 !important; }
#tricky-pairs-app .tp-pair i { color: #B31942 !important; }
/* No left-edge cut-off: everything stays inside the screen */
#tricky-pairs-app { overflow-x: hidden !important; }
#tricky-pairs-app .tp-col { max-width: 100% !important; box-sizing: border-box !important; }
#tricky-pairs-app .tp-pairs { width: 100% !important; box-sizing: border-box !important; }
#tricky-pairs-app .tp-pair { flex-wrap: wrap !important; box-sizing: border-box !important; }
#tricky-pairs-app .tp-sbtn { min-width: 0 !important; }

/* Arena cards stay tall so shapes render large, never tiny */
#tricky-pairs-app .tp-hint-row { padding: 0 2px !important; box-sizing: border-box !important; }

/* Top bar: icons top-left, Play US States Quiz link top-right (NOT a bottom bar) */
#tricky-pairs-app .tp-footerbar { margin-top: auto; flex: none; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 2px 4px; border-top: 1px solid #e2e8f0; }
#tricky-pairs-app .tp-foot-left { display: flex; gap: 8px; }
#tricky-pairs-app .tp-foot-play { display: inline-block; background: #B31942; color: #ffffff; text-decoration: none; font-weight: 700; padding: 10px 18px; border-radius: 999px; font-size: 15px; box-shadow: 0 4px 14px rgba(179,25,66,.30); }
#tricky-pairs-app .tp-foot-play:hover { background: #991B1B; }
/* Pair buttons: slightly darker than white so the eye falls on them — not dark, not invisible */
#tricky-pairs-app .tp-sbtn { background: #f1f5f9 !important; border: 1.5px solid #cbd5e1 !important; color: #111827 !important; }
#tricky-pairs-app .tp-sbtn:hover { background: #e2e8f0 !important; }

/* Feedback: message on top, Next button below it — never side by side */
#tricky-pairs-app .tp-foot { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
/* Top bar: icons grouped top-left, Play link top-right */
#tricky-pairs-app .tp-top-left { display: flex; gap: 8px; align-items: center; }
#tricky-pairs-app .tp-top > :last-child { justify-self: end; }
#tricky-pairs-app .tp-top .tp-foot-play { white-space: nowrap; }
@media (max-width: 560px) {
  #tricky-pairs-app .tp-top .tp-foot-play { font-size: 13px; padding: 8px 12px; }
  #tricky-pairs-app .tp-ib { width: 38px; height: 38px; font-size: 18px; }
}

/* Mobile responsive: stats wrap instead of overflowing; right button stays pinned to the right edge */
#tricky-pairs-app .tp-top > :last-child { justify-self: end; margin-left: auto; }
@media (max-width: 560px) {
  #tricky-pairs-app .tp-stats { flex-wrap: wrap; }
  #tricky-pairs-app .tp-bar { flex: 1 1 120px; }
  #tricky-pairs-app .tp-arena .tp-card { min-height: 160px !important; }
  #tricky-pairs-app .tp-q h2 { font-size: 26px; }
  #tricky-pairs-app .tp-hero h1 { font-size: 44px; }
  #tricky-pairs-app .tp-pair { padding: 6px; }
}
@media (min-height: 700px) {
  }

/* ---- WordPress embed overrides (appended last, wins) ---- */
#tricky-pairs-app{position:relative!important;inset:auto!important;width:100%!important;height:100vh!important;height:100dvh!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#tricky-pairs-app .tp-hero-title{margin:0;font-size:clamp(40px,9vw,84px);line-height:1;font-weight:700;color:#111827}
@media(max-width:560px){#tricky-pairs-app .tp-hero-title{font-size:44px}}


/* ---- v1.0.6: user orders 2026-10-27 ---- */
/* Tool flush with the site header: zero every gap above the app on this page */
body.page-id-654 #masthead { margin-bottom: 0 !important; }
body.page-id-654 .content-wrap, body.page-id-654 #primary, body.page-id-654 #main, body.page-id-654 .entry-content-wrap, body.page-id-654 .entry-content { padding-top: 0 !important; margin-top: 0 !important; }
body.page-id-654 .kb-row-layout-id654_3fc899-6b .kt-inside-inner-col { padding-top: 0 !important; }
#tricky-pairs-quiz-wrap { margin: 0 !important; padding: 0 !important; }
#tricky-pairs-app .tp-screen { padding-top: 0 !important; }
/* Play button flush with the right corner: bar spans full width, button pulled to the screen edge */
#tricky-pairs-app .tp-top { width: 100% !important; }
#tricky-pairs-app .tp-top > :last-child { margin-right: calc(max(14px, env(safe-area-inset-right)) * -1) !important; }

/* ---- v1.0.8: user orders 2026-10-27 ---- */
/* Center title removed from the top bar (JS): bar is now 2 columns (left + Play right) */
#tricky-pairs-app .tp-top { grid-template-columns: 1fr auto !important; }
/* Tool moved up: hero top padding reduced now the bar title is gone */
#tricky-pairs-app .tp-hero { padding-top: 12px !important; }

/* ---- v1.0.9: user orders 2026-10-27 ---- */
/* Play button removed (JS): the bar now has a single left cell — force it to stay LEFT,
   overriding the older :last-child rules (justify-self:end, margin-left:auto, negative right margin)
   that would otherwise push the Back button to the right now that it is also the last child. */
#tricky-pairs-app .tp-top > :first-child { justify-self: start !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Tool flush with the header: hero top padding removed (was 12px in v1.0.8) */
#tricky-pairs-app .tp-hero { padding-top: 0 !important; }