/* * checkout-tool-responsive.css * ───────────────────────────────────────────────────────────────── * Makes tablet & desktop look identical to the mobile layout. * Add ONE line to in checkout-tool.html (before ): * * * * Nothing here changes the mobile experience. * ───────────────────────────────────────────────────────────────── */ /* The existing layout rules only fire inside @media (max-width:680px). This file re-declares the same rules without a breakpoint so they apply everywhere. The original mobile media query still overrides where needed (same specificity, later in cascade). */ /* ── Cap card width so it doesn't stretch wall-to-wall ── */ #focusCard { max-width: 400px; margin-left: auto !important; margin-right: auto !important; } /* ── Route line ── */ .routeLine { font-size: clamp(32px, 5vw, 46px); font-weight: 900; color: #fff; margin-top: 4px; line-height: 1.05; display: flex; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; height: 2.5em; overflow: visible; align-content: flex-start; } /* ── Alt route text ── */ .altRoute { display: block; margin-top: -4px; font-size: 0.55em; font-weight: 700; color: #7fb8ff; line-height: 1.35; letter-spacing: 0.2px; cursor: pointer; } .altActive { display: block; font-size: 36px; font-weight: 900; color: #ffd700; line-height: 1.15; margin-top: 6px; } /* ── Miss grid ── */ .missGrid { display: grid !important; grid-template-columns: repeat(5, 60px) !important; gap: 6px !important; justify-content: center; width: 100%; max-width: 330px !important; margin: 0 auto; margin-top: 12px; } /* ── Miss buttons — layout only, no background/color so variants aren't overridden ── */ .missBtn { width: 60px !important; height: 44px !important; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; border-radius: 6px; transition: all .15s ease; } /* ── Miss header row ── */ .missHeader { display: flex; justify-content: space-between; align-items: center; max-width: 330px; margin: 8px auto 1px auto; } /* ── Dartboard ── */ #boardWrap { margin-top: -12px; margin-bottom: 4px; display: flex; justify-content: center; position: relative; } #board { width: 265px; height: 265px; } /* ── Fireworks canvas ── */ #fireworks { position: absolute; top: 0; left: 0; width: 100%; height: 260px; pointer-events: none; } /* ── Input row (search + book links) ── */ .inputRow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 330px; margin-left: auto; margin-right: auto; position: relative; } /* Share icons sit outside the grid flow, absolutely positioned */ .shareIcon, .shareIcon2 { position: absolute; bottom: auto; top: 50%; transform: translateY(-50%); } .shareIcon { right: -44px; } .shareIcon2 { left: -44px; } .leftLink { justify-self: start; } .rightLink { justify-self: end; } /* ── Book link ── */ .bookLink { text-align: center; font-weight: 700; line-height: 1.1; text-decoration: none; } .bookLink:hover { opacity: .85; } .bookWord { color: #dcdcdc; font-size: 13px; font-weight: 600; } /* ── Setup route ── */ .setupRoute { display: block; width: 100%; text-align: center; margin-top: -6px; line-height: 1.15; } .setupRoute b { display: inline-block; font-size: 18px; font-weight: 900; color: #000; background: #ffffff; padding: 2px 10px; border-radius: 6px; letter-spacing: 2px; margin-bottom: 6px; animation: pulseSetup 2.2s infinite; } .setupRoute span { font-size: 36px; font-weight: 900; } /* ── Primary route width ── */ .primaryRoute { font-size: 1.1em; white-space: nowrap; flex-shrink: 1; } .primaryRoute, .altRoute, .altActive { width: 100%; margin-top: -8px; } /* ── Status line ── */ .statusLine { font-size: 16px; color: #ffffff; font-weight: 700; min-height: 16px; margin: 0 auto 6px auto; } #statusLine { flex: 1; text-align: right; height: 48px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; overflow: hidden; } /* ── SEO content headings ── */ .seo-content h2 { color: #ffd700; margin-top: 0; } .seo-content h3 { color: #ffd700; margin-top: 30px; } .seo-content p { margin: 14px 0; } /* ── Alt mode colours ── */ .altMode .missBtn { color: #ffd700; } .altMode .throwLine { color: #ffd700; } /* ── UK flag gradient text (book link) ── */ .gradientText { background: linear-gradient(to bottom, #c8102e 0%, #ffffff 50%, #00247d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Keep checkoutExplain hidden off-screen ── */ #checkoutExplain { position: absolute; left: -9999px; } /* ── Bust overlay: hidden by default (JS shows it), animation redeclared outside media query ── */ #bustOverlay { display: none; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); font-size: 72px; font-weight: 900; color: #ff1a1a; opacity: 0; z-index: 9999; pointer-events: none; text-shadow: 0 0 40px red, 0 0 80px rgba(255,0,0,0.5); white-space: nowrap; letter-spacing: 6px; } .bustAnim { animation: bustPop 1.9s ease, bustPixel 1.9s ease; } @keyframes bustPixel { 0% { clip-path: inset(0 0 0 0); image-rendering: auto; } 88% { clip-path: inset(0 0 0 0); image-rendering: auto; } 91% { clip-path: inset(2px 3px 1px 2px); image-rendering: pixelated; } 93% { clip-path: inset(4px 2px 3px 5px); image-rendering: pixelated; } 95% { clip-path: inset(6px 8px 2px 4px); image-rendering: pixelated; } 97% { clip-path: inset(10px 5px 8px 12px); image-rendering: pixelated; } 99% { clip-path: inset(20px 15px 18px 22px round 4px); image-rendering: pixelated; } 100% { clip-path: inset(50% 50% 50% 50%); image-rendering: pixelated; } } @keyframes bustPop { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; filter: blur(8px); } 30% { transform: translate(-50%,-50%) scale(1.4); opacity: 1; filter: blur(0); } 60% { transform: translate(-50%,-50%) scale(0.9); opacity: 1; filter: blur(0); } 80% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; filter: blur(0); } 88% { transform: translate(-50%,-50%) scale(1); opacity: 1; filter: blur(0) drop-shadow(0 0 4px red); } 92% { transform: translate(-50%,-50%) scale(1.05); opacity: 1; filter: blur(0) drop-shadow(0 0 8px red) contrast(2); } 95% { transform: translate(-50%,-50%) scale(1.1); opacity: 0.9; filter: blur(0) drop-shadow(0 0 6px red) contrast(4) saturate(3); } 97% { transform: translate(-50%,-50%) scale(1.15); opacity: 0.6; filter: blur(1px) drop-shadow(0 0 8px red) contrast(8) saturate(5); } 99% { transform: translate(-50%,-50%) scale(1.3); opacity: 0.3; filter: blur(2px) drop-shadow(0 0 12px red) contrast(20) saturate(10); } 100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; filter: blur(4px) drop-shadow(0 0 20px red) contrast(50) saturate(20); } } /* ── missBtn colors — redeclared outside media query so they apply on tablet/desktop ── */ .missBtn { background: #2a2a2a; color: #fff; } .missBtn.elite { background: #1f8f4e; color: #fff; } .missBtn.good { background: #1f8f4e; color: #fff; } .missBtn.bad, .missBtn.dead { background: #c0392b; color: #fff; } .missBtn.dead { background: #c0392b !important; color: #fff !important; } .missBtn.bust { background: #ff8c00; position: relative; overflow: hidden; } .missBtn.bust::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 4px, transparent 4px, transparent 10px ); z-index: 0; pointer-events: none; } .missBtn.bust span, .missBtn.bust { position: relative; z-index: 1; } .missBtn.win { background: #5a3ea6; color: #fff; } .missBtn.good.finishDot { background: #1f8f4e !important; color: #fff !important; } .missBtn.good.pref { background: #1f8f4e !important; color: #fff !important; } /* ── Finish dot (purple) and preferred miss dot (light purple) ── */ .missBtn.finishDot { position: relative; } .missBtn.finishDot::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #5a3ea6; box-shadow: 0 0 4px rgba(0,0,0,0.6); } .missBtn.pref::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: #b19cd9; border-radius: 50%; box-shadow: 0 0 6px rgba(177,156,217,.8); } .missBtn.npnso { background: #ffd700 !important; color: #000 !important; } .missBtn.good.finishDot.npnso { background: #ffd700 !important; color: #000 !important; } .missBtn.good.pref.npnso { background: #ffd700 !important; color: #000 !important; } .missBtn.elite.finishDot.npnso { background: #ffd700 !important; color: #000 !important; }