:root { --on-gold:#17130a; } /* right / wrong colours: site.css brand-metal tokens */ /* Echoes of Battle interactive games (play.js). Uses the site tokens from site.css. */ .play { border:1px solid var(--gold-line); border-radius:22px; background:radial-gradient(120% 80% at 50% 0%,rgba(212,175,95,.07),transparent 60%),linear-gradient(180deg,var(--card-2),var(--card)); padding:32px 28px 28px; box-shadow:0 40px 90px -55px var(--gold-glow); position:relative; margin:1.6rem 0 2.4rem; min-height:420px; display:flow-root; } /* nothing in a game box is clipped (the top line fades out before the rounded corners): at 200% zoom on a phone (195 px) text that does not fit wraps instead of being cut off (QA 2026-10-31) */ .play :where(.pl-title, .pl-sub, .pl-how li, .pl-res-rank, .pl-res-note, .pl-q, .pl-clues li, .pl-fact, .pl-ftitle, .pl-verdict) { overflow-wrap:break-word; } /* a game scrolled into view (#play-geo deep link, round change) clears the fixed top bar: ~65px + 12px. common.js scrollToGame() sets the exact bar height at run time; this is the static fallback. */ .play, #play, #play-geo { scroll-margin-top:var(--anchor-off, 80px); } .play, .geo-panel { scroll-margin-bottom:96px; } .pl-fb, .pl-res-actions { scroll-margin-bottom:96px; } .play::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); } .play.pl-fade > * { animation:plIn .38s var(--ease,ease) both; } @keyframes plIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } .pl-err { color:var(--muted); text-align:center; padding:3rem 0; } .pl-err p { margin:0 0 1rem; } /* common.js loading(): the box until its first screen is drawn */ .pl-load { color:var(--muted); text-align:center; padding:3rem 0; margin:0; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; } .pl-load:focus { outline:none; } /* start screen */ .pl-kicker { font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); text-align:center; } .pl-title { font-family:var(--font-display); font-size:clamp(1.7rem,5.4vw,2.3rem); line-height:1.12; margin:.55rem 0 .4rem; text-align:center; color:var(--text); } .pl-title em { color:var(--gold-bright); } .pl-sub { color:var(--muted); text-align:center; font-size:1.02rem; line-height:1.65; max-width:500px; margin:0 auto 1.2rem; } .pl-meds { display:flex; justify-content:center; margin:1.3rem 0 1.1rem; } .pl-med { width:54px; height:54px; border-radius:50%; background-size:cover; background-position:center; border:1.5px solid var(--gold); margin-left:-12px; background-color:var(--card-2,#161310); box-shadow:0 0 12px -3px var(--gold-glow,rgba(201,168,76,.55)), 0 6px 12px -8px rgba(0,0,0,.6); } .pl-med:first-child { margin-left:0; } .pl-meds-blur .pl-med { filter:blur(5px) saturate(.6); } .pl-how { list-style:none; margin:0 auto 1.3rem; padding:0; max-width:440px; display:grid; grid-template-columns:minmax(0,1fr); gap:.45rem; } .pl-how li { position:relative; padding-left:1.6rem; color:var(--muted); font-size:.95rem; line-height:1.5; } .pl-how li::before { content:""; position:absolute; left:.35rem; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); } .pl-best { text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:1rem; } .pl-center { text-align:center; } /* buttons */ .pl-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:46px; padding:.8rem 1.4rem; border-radius:10px; border:1px solid transparent; font-family:var(--font-mono); font-size:.82rem; font-weight:700; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; text-align:center; text-decoration:none; white-space:normal; overflow-wrap:break-word; text-wrap:balance; max-width:100%; color:var(--on-gold); cursor:pointer; background:linear-gradient(135deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep)); box-shadow:0 10px 30px -12px rgba(201,168,76,.6); transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s; } .pl-btn:hover { transform:translateY(-2px); box-shadow:0 0 34px -6px var(--gold-glow),0 16px 34px -14px rgba(201,168,76,.7); } .pl-btn:focus-visible, .pl-opt:focus-visible, .pl-share button:focus-visible, .pl-read:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; } .pl-btn.ghost { color:var(--text); background:rgba(255,255,255,.02); border-color:var(--gold-line); box-shadow:none; } .pl-btn.ghost:hover { border-color:var(--gold); background:var(--gold-soft); color:var(--text); } /* round chrome */ .pl-top { display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; } .pl-bar { flex:1; height:6px; border-radius:4px; background:var(--gold-line); overflow:hidden; } .pl-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); border-radius:4px; transition:width .35s ease; } .pl-num, .pl-score { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .pl-score { color:var(--gold-bright); border:1px solid var(--gold-line); border-radius:100px; padding:.25rem .65rem; } .pl-q { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-align:center; margin:.2rem 0 .9rem; } .pl-streak { text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); margin:-.3rem 0 .7rem; } /* reveal frame */ .pl-frame-wrap { display:flex; justify-content:center; } .pl-frame { position:relative; width:min(100%, calc(58vh * var(--ar,1.5))); overflow:hidden; border-radius:14px; border:1px solid var(--gold-line); background:#0d0b09; box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 24px 50px -30px #000; transition:aspect-ratio .7s var(--ease,ease); } .pl-frame img { position:absolute; max-width:none; display:block; transition:width .7s var(--ease,ease),height .7s var(--ease,ease),left .7s var(--ease,ease),top .7s var(--ease,ease),filter .7s ease; user-select:none; -webkit-user-drag:none; } .pl-frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(0,0,0,.45); pointer-events:none; border-radius:14px; } .pl-frame.pl-done { border-color:var(--gold); } .pl-stagebadge { position:absolute; left:10px; top:10px; z-index:2; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#f3e6c4; background:rgba(12,10,8,.72); border:1px solid var(--gold-line); border-radius:100px; padding:.25rem .6rem; backdrop-filter:blur(4px); } .pl-clues { list-style:none; counter-reset:clue; margin:1rem auto .4rem; padding:0; max-width:560px; display:grid; grid-template-columns:minmax(0,1fr); gap:.45rem; } .pl-clues li { counter-increment:clue; position:relative; padding:.6rem .8rem .6rem 2.4rem; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--gold-line); color:var(--muted); font-size:.98rem; line-height:1.5; } .pl-clues li::before { content:counter(clue); position:absolute; left:.7rem; top:.6rem; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--gold-soft); color:var(--gold-bright); font-family:var(--font-mono); font-size:.7rem; display:flex; align-items:center; justify-content:center; } .pl-clues li.pl-new { color:var(--text); border-color:var(--gold); animation:plIn .4s ease both; } .pl-worth { text-align:center; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); margin:.5rem 0 .8rem; min-height:1em; } .pl-actions { text-align:center; margin-top:.9rem; min-height:1px; } /* options */ .pl-opts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; } .pl-sides { grid-template-columns:minmax(0,1fr); } .pl-opt { display:flex; align-items:center; gap:.7rem; text-align:left; cursor:pointer; border:1px solid var(--gold-line); border-radius:14px; background:rgba(255,255,255,.02); padding:.85rem 1rem; color:var(--text); font-size:1rem; font-family:var(--font-display); line-height:1.3; transition:border-color .18s,background .18s,transform .12s; min-height:52px; min-width:0; overflow-wrap:anywhere; } .pl-opt kbd { flex:none; font-family:var(--font-mono); font-size:.68rem; width:1.5rem; height:1.5rem; border-radius:7px; border:1px solid var(--gold-line); color:var(--muted); display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); } .pl-opt:hover:not(:disabled) { border-color:var(--gold); background:var(--gold-soft); transform:translateY(-1px); } .pl-opt:disabled { cursor:default; } .pl-opt.ok { border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok-ink); box-shadow:0 0 18px -8px var(--ok-glow); } .pl-opt.no { border-color:var(--no-line); background:var(--no-bg); color:var(--no-ink); } /* colour is never the only cue: the right and the picked-wrong option carry a glyph */ .pl-opt.ok::after, .pl-opt.no::after { flex:none; margin-left:auto; padding-left:.5rem; font-family:var(--font-mono); font-weight:700; } .pl-opt.ok::after { content:"\2713"; content:"\2713" / ""; color:var(--ok); } .pl-opt.no::after { content:"\2717"; content:"\2717" / ""; color:var(--no); } .pl-opt.dim { opacity:.45; } /* who-won card */ .pl-card { border-radius:16px; border:1px solid var(--gold-line); min-height:260px; background-size:cover; background-position:center 35%; display:flex; align-items:flex-end; margin-bottom:1rem; overflow:hidden; box-shadow:0 24px 50px -30px #000; } .pl-card-in { padding:1.3rem 1.3rem 1.2rem; min-width:0; overflow-wrap:break-word; } .pl-when { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); } .pl-bname { font-family:var(--font-display); font-size:clamp(1.4rem,4.6vw,1.9rem); color:#fff6e2; line-height:1.15; margin:.25rem 0 .45rem; text-shadow:0 2px 12px rgba(0,0,0,.6); } .pl-setup { color:#e7dcc4; font-size:1rem; line-height:1.55; max-width:560px; } /* feedback */ .pl-fb { margin:1.2rem auto 0; max-width:580px; border-top:1px solid var(--gold-line); padding-top:1rem; } .pl-verdict { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; } .pl-verdict.ok { color:var(--ok); } .pl-verdict.no { color:var(--no); } .pl-ftitle { font-family:var(--font-display); font-size:1.25rem; color:var(--text); text-align:center; margin:.45rem 0 .2rem; } .pl-fact { color:var(--muted); line-height:1.65; margin:.5rem 0 .4rem; text-align:center; } .pl-credit { color:var(--muted); font-size:.8rem; text-align:center; margin:0 0 .6rem; } .pl-fbrow { display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap; margin-top:.7rem; } .pl-read { color:var(--gold); text-decoration:none; font-size:.95rem; display:inline-block; padding:.7rem 0; } .pl-read:hover { text-decoration:underline; } /* result */ .pl-res-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:.4rem; } .pl-res-score { font-family:var(--font-display); font-size:3.6rem; text-align:center; color:var(--gold-bright); line-height:1; margin:.4rem 0 .1rem; } .pl-res-score small { font-size:1.3rem; color:var(--muted); display:inline-block; } /* "/25,000" may drop under the score on a narrow screen */ .pl-res-rank { font-family:var(--font-display); font-size:1.75rem; text-align:center; color:var(--text); margin:.2rem 0; } .pl-res-note { color:var(--muted); text-align:center; max-width:460px; margin:.2rem auto .8rem; line-height:1.6; } .pl-res-stats { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; } .pl-res-stats span { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--gold-line); border-radius:100px; padding:.3rem .7rem; } .pl-res-stats .pl-pb { color:var(--on-gold); background:var(--gold-bright); border-color:var(--gold-bright); } .pl-recap { list-style:none; margin:0 auto 1.2rem; padding:0; max-width:460px; display:grid; grid-template-columns:minmax(0,1fr); gap:.3rem; } .pl-recap li { display:flex; justify-content:space-between; gap:1rem; padding:.45rem .75rem; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid var(--gold-line); } .pl-recap a { color:var(--text); text-decoration:none; overflow-wrap:break-word; } .pl-recap a:hover { color:var(--gold-bright); } .pl-recap b { font-family:var(--font-mono); font-size:.8rem; } .pl-recap li.ok b { color:var(--ok); } .pl-recap li.no b { color:var(--no); } .pl-res-actions { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; } .pl-share-nudge { text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:.6rem; } .pl-share { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; } .pl-share button { width:44px; height:44px; border-radius:50%; border:1px solid var(--gold-line); background:rgba(255,255,255,.03); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s,background .15s; } .pl-share button:hover { border-color:var(--gold); background:var(--gold-soft); } .pl-share svg { width:18px; height:18px; fill:var(--text); } .pl-toast { position:absolute; left:50%; bottom:14px; transform:translate(-50%,20px); opacity:0; transition:all .25s; background:var(--gold-bright); color:var(--on-gold); font-family:var(--font-mono); font-size:.75rem; padding:.4rem .9rem; border-radius:100px; pointer-events:none; } .pl-toast.show { opacity:1; transform:translate(-50%,0); } @media (max-width:560px) { .play { padding:24px 16px 20px; border-radius:18px; } .pl-opts { grid-template-columns:minmax(0,1fr); } .pl-frame { width:min(100%, calc(46vh * var(--ar,1.5))); } .pl-card { min-height:220px; } .pl-opt kbd { display:none; } } /* 200% zoom on a phone (~195 px): less padding, so names and answers keep whole words where they can */ @media (max-width:300px) { .play, .play.geo, .play.hl { padding:18px 8px 16px; } .pl-opt { padding:.7rem .7rem; gap:.5rem; } .pl-card-in { padding:1rem .8rem .9rem; } .pl-bname { font-size:1.2rem; } .pl-res-score { font-size:2.6rem; } .pl-res-rank { font-size:1.4rem; } .pl-recap li { padding:.45rem .55rem; gap:.6rem; } } @media (prefers-reduced-motion: reduce) { .play.pl-fade > *, .pl-clues li.pl-new { animation:none; } .pl-frame, .pl-frame img, .pl-bar > i, .pl-btn, .pl-opt { transition:none; } .pl-btn:hover { transform:none; } } /* pool list under the game */ .prose .pl-list { list-style:none; padding:0; margin:.4rem 0 1.4rem; display:flex; flex-wrap:wrap; gap:.45rem; } .prose .pl-list li { margin:0; } .prose .pl-list a { display:inline-block; padding:.35rem .8rem; border:1px solid var(--gold-line); border-radius:100px; color:var(--text); text-decoration:none; font-size:.92rem; background:rgba(255,255,255,.02); } .prose .pl-list a:hover { border-color:var(--gold); color:var(--gold-bright); } /* layout fixes inside the blog "dispatch" template: the game goes first on phones (the column is a flex box that puts .prose first), and the text-only hero is compact so the game is on screen at once */ body.dx .dx-col > #play { order: 0; } body.dx:has(#play) .dx-hero-plain { min-height: 0; padding-top: 5.2rem; padding-bottom: 0; } body.dx:has(#play) .dx-hero-plain .dx-hero-in { padding-bottom: .6rem; } /* 50:50 hint */ .pl-opt.pl-struck { text-decoration:line-through; opacity:.35; } .pl-hintnote { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* starter-set offer on the result screen */ .pl-offer { margin:0 auto 1.3rem; max-width:560px; text-align:center; border:1px solid var(--gold); border-radius:18px; padding:1.3rem 1.2rem 1.25rem; background:radial-gradient(120% 90% at 50% 0%,rgba(212,175,95,.16),transparent 70%),rgba(255,255,255,.02); box-shadow:0 20px 50px -35px var(--gold-glow); } .pl-offer-k { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } .pl-offer-h { font-family:var(--font-display); font-size:clamp(1.25rem,4vw,1.5rem); color:var(--text); margin:.35rem 0 .4rem; line-height:1.2; } .pl-offer-p { color:var(--muted); font-size:.97rem; line-height:1.55; margin:0 auto .9rem; max-width:470px; } .pl-offer-pl { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .45rem; } .pl-offer-pick { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-bottom:1rem; } .pl-era { cursor:pointer; border:1px solid var(--gold-line); background:rgba(255,255,255,.02); color:var(--text); border-radius:100px; padding:.42rem .8rem; font-size:.88rem; font-family:var(--font-body); transition:border-color .15s,background .15s; min-height:44px; } .pl-era:hover { border-color:var(--gold); } .pl-era.on { background:var(--gold-bright); border-color:var(--gold-bright); color:var(--on-gold); font-weight:600; } .pl-era:focus-visible { outline:2px solid var(--gold-bright); outline-offset:2px; } .pl-offer-done { color:var(--gold-bright); font-family:var(--font-display); font-size:1.05rem; padding:1rem; } /* the toast is a direct child of .play: keep the entrance animation (fill-mode both) from forcing it visible */ .play.pl-fade > .pl-toast { animation: none; } /* Result grids (Battle of the Day, the map game, higher or lower, the timeline). The marks are struck tiles in the brand's metals, sized in em so each grid keeps its old footprint. Colour is never the only cue: every kind has its own engraved glyph. The share text keeps emoji (common.js MARK_EMOJI). */ .pl-grid { text-align:center; font-size:2.4rem; margin:.6rem 0 .2rem; line-height:1.2; } .pl-mk { --mk-ink:#241904; --mk-rust:#a65a3c; display:inline-block; position:relative; box-sizing:border-box; vertical-align:middle; width:.92em; height:.92em; margin:.06em .14em; border-radius:.09em; border:1px solid transparent; } .pl-mk::before { content:""; position:absolute; inset:.1em; border:1px solid transparent; border-radius:.03em; } .pl-mk::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } /* hit and the top map tier: a gold seal with an engraved frame and a struck lozenge */ .pl-mk-hit, .pl-mk-t4 { background:linear-gradient(150deg,#f4e2a6 0%,var(--gold-bright) 24%,var(--gold) 58%,var(--gold-deep) 100%); border-color:var(--gold-deep); box-shadow:inset 0 1px 0 rgba(255,248,222,.6), inset 0 -1px 0 rgba(60,40,8,.45), 0 0 .32em -.04em var(--gold-glow); } .pl-mk-hit::before, .pl-mk-t4::before { border-color:rgba(54,36,6,.38); } .pl-mk-hit::after, .pl-mk-t4::after { width:.22em; height:.22em; background:var(--mk-ink); transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 1px 0 rgba(255,244,210,.45); } /* miss: an ink tile with a rust edge and an engraved cross */ .pl-mk-miss { background:linear-gradient(160deg,#1c1711,#0b0906); border-color:rgba(166,90,60,.7); box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 .22em rgba(166,90,60,.2); } .pl-mk-miss::after { width:.4em; height:.4em; background:linear-gradient(45deg,transparent 44%,var(--mk-rust) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--mk-rust) 44% 56%,transparent 56%); } /* clue used before the answer: a dim bronze tile with a single engraved bar */ .pl-mk-clue { background:linear-gradient(150deg,#6a5432,#3f321d); border-color:rgba(201,168,76,.32); box-shadow:inset 0 1px 0 rgba(255,236,190,.14); } .pl-mk-clue::after { width:.34em; height:.06em; min-height:1px; background:rgba(230,201,119,.62); } /* not reached: an empty outlined socket */ .pl-mk-empty { background:rgba(255,255,255,.015); border-color:rgba(201,168,76,.34); } .pl-mk-empty::before { border-color:rgba(201,168,76,.1); } /* map tiers below the top: bronze with a hollow lozenge, sepia with a rivet, iron with a dash */ .pl-mk-t3 { background:linear-gradient(150deg,#d6a46e 0%,#ad7845 45%,#714a25 100%); border-color:#66421f; box-shadow:inset 0 1px 0 rgba(255,232,200,.45), inset 0 -1px 0 rgba(50,28,8,.4); } .pl-mk-t3::before { border-color:rgba(50,28,8,.32); } .pl-mk-t3::after { width:.2em; height:.2em; border:.05em solid #2e1a07; transform:translate(-50%,-50%) rotate(45deg); } .pl-mk-t2 { background:linear-gradient(150deg,#6f5b3f,#41351f); border-color:rgba(156,130,54,.45); box-shadow:inset 0 1px 0 rgba(255,236,190,.16); } .pl-mk-t2::after { width:.14em; height:.14em; border-radius:50%; background:rgba(230,201,119,.7); } .pl-mk-t1 { background:linear-gradient(160deg,#2b2823,#151310); border-color:rgba(154,142,122,.42); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); } .pl-mk-t1::after { width:.3em; height:.06em; min-height:1px; background:rgba(154,142,122,.75); } /* the marks strike in one after another */ .pl-grid .pl-mk { animation:plMk .34s var(--ease,ease) both; } .pl-grid .pl-mk:nth-child(2) { animation-delay:.06s; } .pl-grid .pl-mk:nth-child(3) { animation-delay:.12s; } .pl-grid .pl-mk:nth-child(4) { animation-delay:.18s; } .pl-grid .pl-mk:nth-child(5) { animation-delay:.24s; } .pl-grid .pl-mk:nth-child(n+6) { animation-delay:.3s; } @keyframes plMk { from { opacity:0; transform:scale(1.35); } to { opacity:1; transform:none; } } /* leaderboard rows: small tiles, no inner frame */ .geo-lb-mk { white-space:nowrap; line-height:1; } .geo-lb-mk .pl-mk { width:1.15em; height:1.15em; margin:0 .1em; border-radius:2px; } .geo-lb-mk .pl-mk::before { display:none; } .geo-lb-mk .pl-mk-miss::after { width:.56em; height:.56em; background:linear-gradient(45deg,transparent 39%,var(--mk-rust) 39% 61%,transparent 61%),linear-gradient(-45deg,transparent 39%,var(--mk-rust) 39% 61%,transparent 61%); } .geo-lb-mk .pl-mk-hit::after { width:.28em; height:.28em; } @media (prefers-reduced-motion: reduce) { .pl-grid .pl-mk { animation:none; } } /* round 3: "More games" block of every end screen (common.js moreGames) */ .pl-more { margin:1.2rem auto 1.4rem; max-width:560px; text-align:center; } .pl-more-row { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; } .pl-more-row .pl-btn { padding:.6rem 1rem; font-size:.74rem; min-height:44px; } /* "Today's dailies: 1 of 2" on a daily result (common.js dailyPair) */ .pl-dd { margin:0 auto 1.2rem; max-width:560px; text-align:center; } .pl-dd b { display:block; color:var(--gold-bright); font-weight:600; } .pl-dd .pl-dd-go { margin:.6rem 0 .1rem; } .pl-dd span { display:block; margin-top:.35rem; color:var(--muted); font-size:.88rem; } /* Friend challenge (common.js chStartHtml / duelHtml / nickRow), shared by every solo game. geo.css carries the same rules for pages cached before they moved here. */ .pl-nick { text-align:center; color:var(--muted); font-size:.95rem; margin:.9rem 0 .2rem; } .pl-nick b { color:var(--gold-bright); font-weight:600; } .pl-linkbtn { background:none; border:0; padding:.2rem .3rem; min-height:44px; color:var(--gold); font:inherit; font-size:.85rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; } .pl-linkbtn:hover { color:var(--gold-bright); } .pl-fresh { margin-top:.7rem; } .pl-fresh a { color:var(--muted); font-size:.9rem; } .pl-fresh a:hover { color:var(--gold); } .pl-rival { font-family:var(--font-mono); font-size:.8rem; color:var(--muted); text-align:center; margin:.3rem 0; } .pl-recap li a { flex:1; min-width:0; display:flex; align-items:center; min-height:44px; } .pl-recap .pl-rv { font-family:var(--font-mono); font-size:.78rem; color:var(--muted); min-width:3.2em; text-align:right; } .pl-duel { max-width:460px; margin:0 auto 1.4rem; border:1px solid var(--gold-line); border-radius:16px; padding:1rem 1.1rem; text-align:center; background:rgba(212,175,95,.06); } .pl-duel-row { display:flex; align-items:center; justify-content:center; gap:1rem; } .pl-duel-row span { display:flex; flex-direction:column; align-items:center; min-width:0; flex:1; } .pl-duel-row i { font-style:normal; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.25; overflow-wrap:anywhere; max-width:100%; } .pl-duel-row b { font-family:var(--font-display); font-size:1.9rem; color:var(--text); } .pl-duel-row em { font-style:normal; font-size:1.6rem; color:var(--gold); } .pl-duel-v { margin-top:.4rem; font-family:var(--font-display); font-size:1.15rem; } .pl-duel.win .pl-duel-v { color:var(--ok); } .pl-duel.lose .pl-duel-v { color:var(--no); } .pl-duel.draw .pl-duel-v { color:var(--mid); } /* Streak shield line of a daily result (common.js shieldHtml) */ .pl-shield { display:flex; align-items:center; justify-content:center; gap:.5rem; margin:0 auto 1.1rem; max-width:560px; text-align:left; color:var(--muted); font-size:.92rem; } .pl-shield svg { flex:0 0 auto; width:20px; height:20px; fill:none; stroke:var(--gold-line); stroke-width:1.6; } .pl-shield.on, .pl-shield.used { color:var(--text); } .pl-shield.on svg, .pl-shield.used svg { fill:var(--gold); stroke:var(--gold-bright); } .pl-shield.used { font-weight:600; color:var(--gold-bright); } /* Archive of past days (common.js archiveSetup) and an archive game (?day=N) */ .play.pl-arch .pl-kicker, .play.pl-arch .pl-res-eyebrow { color:var(--gold-bright); } .pl-archive { margin:0 0 2rem; border:1px solid var(--gold-line); border-radius:14px; background:var(--card); } .pl-archive > summary { cursor:pointer; padding:.9rem 1.1rem; min-height:44px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); } .pl-archive > summary:hover { color:var(--gold-bright); } .pl-ar-body { padding:0 1.1rem 1rem; } .pl-ar-note { color:var(--muted); font-size:.92rem; margin:0 0 .8rem; } .pl-ar-back { margin:0 0 .8rem; } .pl-ar-list { list-style:none; margin:0 0 .6rem; padding:0; } .pl-ar-list li { border-top:1px solid var(--gold-line); } .pl-ar-list a { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .9rem; padding:.65rem .2rem; min-height:44px; color:var(--text); text-decoration:none; } .pl-ar-list a:hover b, .pl-ar-list a:focus-visible b { color:var(--gold-bright); } .pl-ar-list b { font-family:var(--font-display); font-weight:600; min-width:5.2rem; } .pl-ar-d { color:var(--muted); font-size:.85rem; flex:1 1 8rem; } .pl-ar-c { font-size:.88rem; color:var(--text); flex:1 1 100%; } .pl-ar-c i { font-style:normal; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); } .pl-ar-c em { font-style:normal; color:var(--muted); font-size:.8rem; } .pl-ar-c.none { color:var(--muted); } .pl-ar-list li.cur a { background:linear-gradient(90deg, rgba(212,175,55,.08), transparent); } @media (min-width:640px) { .pl-ar-c { flex:0 1 auto; } } /* own nickname editor (common.js nickForm) */ .pl-nick-form { display:flex; flex-direction:column; align-items:center; gap:.35rem; max-width:340px; margin:0 auto; } .pl-nick-form label { color:var(--text); font-size:.9rem; } .pl-nick-form input { width:100%; min-height:44px; padding:.45rem .8rem; border:1px solid var(--gold-line); border-radius:10px; background:rgba(0,0,0,.25); color:var(--text); font:inherit; font-size:1rem; text-align:center; } .pl-nick-form input:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .pl-nick-hint { color:var(--muted); font-size:.78rem; margin:0; } .pl-nick-err { color:var(--rust, #e07a5f); font-size:.85rem; margin:0; min-height:1.1em; } .pl-nick-btns { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem; } /* Until the game draws, the box holds only its