/* J-GAMES homepage (index.html, also loaded by the apercu-accueil-fil mock-up): fixed page, games hung on a clothesline that scrolls sideways. */
/* Base look "encre noire" (chosen by Jamel): black ink for the switch, pegs and play button; red only in the logo's correction. */
html,body{height:100%;margin:0;overflow:hidden;background:#fff}
body{color:#171717;font-family:Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:transparent}
.sr,.js .game-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.no-js .line{display:none}
.no-js .game-list{display:flex;justify-content:center;gap:16px;padding:20px}
/* Four equal gaps: above the logo, between the switch and the cards, above and below the play button.
   The switch sits 20px under the logo, the pair centred above the cards; the logo grows on computers, the switch keeps its size. */
/* --logo sizes the logo; on phones the switch follows it with the computer ratio (a 250 × 46 switch for a 346px logo). */
.home{--logo:clamp(300px,18vw,350px);height:100vh;height:100svh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding-top:16px}
.brand{position:relative;z-index:2;margin:auto 0 0;line-height:0}
/* Centred on the letters J…L, not the pencil: they span 3.4–199.9 of the 234.4-wide viewBox, so the image moves right by 15.6 units. */
.logo{display:block;width:var(--logo);height:auto;translate:6.64% 0} /* hand-lettered J-GAMES / JAMEL logo, the page title */
.modes{--centred:0;position:relative;z-index:120;margin:20px 0 auto;display:grid;grid-template-columns:1fr 1fr;width:min(250px,calc(100% - 32px));padding:3px;box-sizing:border-box;border:2px solid #1a1a1a;border-radius:999px;background:#fff}
.modes::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#1a1a1a;transition:transform .3s cubic-bezier(.3,.8,.3,1)}
.modes[data-active=multi]::before{transform:translateX(100%)}
.modes button{position:relative;z-index:1;min-height:36px;padding:0 18px;border:0;border-radius:999px;background:none;color:#1a1a1a;font:700 15px/1 Arial,Helvetica,sans-serif;white-space:nowrap;cursor:pointer;transition:color .3s}
.modes button[aria-pressed=true]{color:#fff}
.modes button:focus-visible,.footer a:focus-visible{outline:3px solid #1a1a1a;outline-offset:4px}

.line{flex:none;align-self:stretch;position:relative;touch-action:none;cursor:grab;outline:none}
.line.dragging{cursor:grabbing}
.line:focus-visible .card.is-center{outline:3px solid #1a1a1a;outline-offset:5px}
.rope{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rope path{fill:none;stroke:#a3a3a3;stroke-width:1.6}
.cards{position:absolute;inset:0}
.card{position:absolute;left:0;top:0;display:block;width:var(--card-w,300px);padding:10px;box-sizing:border-box;border:1px solid #e3e5ea;border-radius:16px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 14px 32px rgba(23,36,65,.12);transform-origin:50% 0;will-change:transform;user-select:none;-webkit-user-drag:none}
.card.is-center{box-shadow:0 20px 44px rgba(23,36,65,.2)}
/* 4:3 card: the whole cover sits in the middle, its top and bottom edges fading into the game's colour. */
.photo{display:flex;align-items:center;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--bg,#f2f3f6)}
.photo img{display:block;width:100%;height:auto;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
.pin{position:absolute;left:50%;top:-13px;width:18px;height:26px;margin-left:-9px;box-sizing:border-box;border:2px solid #1a1a1a;border-radius:5px;background:#1a1a1a}
.pin::after{content:"";position:absolute;left:50%;top:4px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff}
.play{position:relative;z-index:120;margin:auto 0;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:170px;height:52px;padding:0 30px;box-sizing:border-box;border:2px solid #1a1a1a;border-radius:999px;background:#1a1a1a;color:#fff;font:700 18px/1 Arial,Helvetica,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.play:hover{background:#333}
.play:active{transform:scale(.97)}
.play[hidden]{visibility:hidden} /* keeps its place so the line does not move */
.play:focus-visible{outline:3px solid #1a1a1a;outline-offset:4px}
.card-empty .photo{justify-content:center;box-sizing:border-box;border:2px dashed #c9ccd4;background:#fafafb;color:#a3a7b0;font-size:18px;font-weight:700}


.footer{position:relative;z-index:2;align-self:stretch;padding:0 16px 8px}
.socials{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px}
.footer a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;color:#565656;font-size:14px;text-decoration:none}
.footer a:hover{color:#171717;text-decoration:underline;text-underline-offset:3px}
.footer svg{width:19px;height:19px}

@media(max-width:639.98px){.card{padding:7px;border-radius:13px}.photo{border-radius:8px}}
@media(max-width:600px){.home{--logo:min(300px,78vw)}.modes{width:calc(var(--logo) * 250 / 346)}.modes button{min-height:calc(var(--logo) * 36 / 346);padding:0 8px;font-size:calc(var(--logo) * 15 / 346)}.footer a{font-size:13px}.socials{gap:0 8px}}
@media(max-height:560px){.home{padding-top:10px}.logo{width:170px}.modes{width:min(250px,calc(100% - 32px))}.modes button{min-height:32px;font-size:14px}.play{height:44px;font-size:16px}.footer a{min-height:34px}}
@media(prefers-reduced-motion:reduce){.modes::before,.modes button,.play{transition:none}}

/* ——— Art-direction proposal (?da=bacle, ?da=bacle-visage): super simple, almost sloppy, in the spirit of Neal.fun. ——— */
html[data-da^=bacle],[data-da^=bacle] body{background:#fbfbf9}
[data-da^=bacle] .logo{width:clamp(210px,17vw,250px)}
[data-da=bacle-visage] .logo{width:clamp(260px,21vw,340px);translate:none}
[data-da^=bacle] .rope path{stroke:#222;stroke-width:1.5}
[data-da^=bacle] .pin{width:8px;height:20px;margin-left:-4px;top:-10px;border:0;border-radius:2px;background:#333}
[data-da^=bacle] .pin::after{display:none}
[data-da^=bacle] .card,[data-da^=bacle] .card.is-center{padding:0;border:3px solid #2b2b2b;border-radius:12px;background:#fff;box-shadow:none}
[data-da^=bacle] .photo{border-radius:9px}
[data-da^=bacle] .modes{min-width:0;width:auto;padding:0;gap:10px;border:0;background:none}
[data-da^=bacle] .modes::before{display:none}
[data-da^=bacle] .modes button{min-height:42px;padding:0 18px;border:1px solid #c8c8c8;border-radius:8px;background:#fff;color:#555;font:400 16px/1 Arial,Helvetica,sans-serif}
[data-da^=bacle] .modes button[aria-pressed=true]{border-color:#222;color:#111;font-weight:700}
[data-da^=bacle] .play{min-width:0;height:44px;padding:0 20px;border:1px solid #c8c8c8;border-radius:8px;background:#fff;color:#111;font:400 16px/1 Arial,Helvetica,sans-serif}
[data-da^=bacle] .play:hover{background:#f1f1f1}
[data-da^=bacle] .footer a{color:#555}
@media(max-width:600px){[data-da^=bacle] .logo{width:min(210px,56vw)}[data-da=bacle-visage] .logo{width:min(280px,74vw)}}
@media(max-height:560px){[data-da^=bacle] .logo{width:160px}[data-da=bacle-visage] .logo{width:210px}}

/* ——— Proposal ?da=rouge: the all-red logo, with navy buttons, selector and pegs (the colour of the logo's letters). ——— */
[data-da=rouge] .modes{border-color:#172441}
[data-da=rouge] .modes::before{background:#172441}
[data-da=rouge] .modes button{color:#172441}
[data-da=rouge] .modes button[aria-pressed=true]{color:#fff}
[data-da=rouge] .pin{background:#172441}
[data-da=rouge] .play{border-color:#172441;background:#172441}
[data-da=rouge] .play:hover{background:#2c3c66}
[data-da^=rouge] .modes button:focus-visible,[data-da^=rouge] .footer a:focus-visible,[data-da^=rouge] .play:focus-visible,[data-da^=rouge] .line:focus-visible .card.is-center{outline-color:#172441}

/* Proposal ?da=rouge-touches: navy buttons with small red touches echoing the logo (pegs, play arrow). */
[data-da=rouge-touches] .modes{border-color:#172441}
[data-da=rouge-touches] .modes::before{background:#172441}
[data-da=rouge-touches] .modes button{color:#172441}
[data-da=rouge-touches] .modes button[aria-pressed=true]{color:#fff}
[data-da=rouge-touches] .pin{background:#e5383b}
[data-da=rouge-touches] .play{border-color:#172441;background:#172441}
[data-da=rouge-touches] .play span{color:#ff6b6e}
[data-da=rouge-touches] .play:hover{background:#2c3c66}

/* Proposal ?da=rouge-contour: no filled colour at all, outlined navy buttons; the logo's red is the page's only colour. */
[data-da=rouge-contour] .modes,[data-da=rouge-contour] .play,[data-da=rouge-contour] .pin{border-color:#172441}
[data-da=rouge-contour] .modes::before{background:#eef0f5}
[data-da=rouge-contour] .modes button{color:#7a8195}
[data-da=rouge-contour] .modes button[aria-pressed=true]{color:#172441}
[data-da=rouge-contour] .pin{background:#fff}
[data-da=rouge-contour] .pin::after{background:#172441}
[data-da=rouge-contour] .play{background:#fff;color:#172441}
[data-da=rouge-contour] .play:hover{background:#eef0f5}

/* ——— Proposals for the switch and the play button: ?da=souligne|entoure|coche (marks drawn by fil.js), ?da=tampon, ?da=classique. ——— */
/* Hand-drawn marks: no pill, labels on white; the active choice is underlined, circled, ticked, highlighted, pointed at or
   bracketed (with "barre" the other choice is struck through in red, like the logo), and the mark is redrawn on switch. */
[data-da=souligne] .modes,[data-da=entoure] .modes,[data-da=coche] .modes,[data-da=surligne] .modes,[data-da=fleche] .modes,[data-da=barre] .modes,[data-da=crochets] .modes{border-color:transparent;gap:6px}
[data-da=souligne] .modes::before,[data-da=entoure] .modes::before,[data-da=coche] .modes::before,[data-da=surligne] .modes::before,[data-da=fleche] .modes::before,[data-da=barre] .modes::before,[data-da=crochets] .modes::before{display:none}
[data-da=souligne] .modes button,[data-da=entoure] .modes button,[data-da=coche] .modes button,[data-da=surligne] .modes button,[data-da=fleche] .modes button,[data-da=barre] .modes button,[data-da=crochets] .modes button{color:#8a8a8a;transition:color .3s}
[data-da=souligne] .modes button[aria-pressed=true],[data-da=entoure] .modes button[aria-pressed=true],[data-da=coche] .modes button[aria-pressed=true],[data-da=surligne] .modes button[aria-pressed=true],[data-da=fleche] .modes button[aria-pressed=true],[data-da=barre] .modes button[aria-pressed=true],[data-da=crochets] .modes button[aria-pressed=true],[data-da=coche] .modes button{color:#1a1a1a}
[data-da=souligne] .ink,[data-da=entoure] .ink,[data-da=coche] .ink,[data-da=surligne] .ink,[data-da=fleche] .ink,[data-da=barre] .ink,[data-da=crochets] .ink{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
[data-da=souligne] .ink path,[data-da=entoure] .ink path,[data-da=coche] .ink path,[data-da=surligne] .ink path,[data-da=fleche] .ink path,[data-da=barre] .ink path,[data-da=crochets] .ink path{fill:none;stroke:#1a1a1a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
[data-da=souligne] .modes .ink .draw,[data-da=entoure] .modes .ink .draw,[data-da=coche] .modes .ink .draw,[data-da=surligne] .modes .ink .draw,[data-da=fleche] .modes .ink .draw,[data-da=barre] .modes .ink .draw,[data-da=crochets] .modes .ink .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s ease-in}
[data-da=souligne] .modes.inked button[aria-pressed=true] .ink .draw,[data-da=entoure] .modes.inked button[aria-pressed=true] .ink .draw,[data-da=coche] .modes.inked button[aria-pressed=true] .ink .draw,[data-da=surligne] .modes.inked button[aria-pressed=true] .ink .draw,[data-da=fleche] .modes.inked button[aria-pressed=true] .ink .draw,[data-da=barre] .modes.inked button[aria-pressed=true] .ink .draw,[data-da=crochets] .modes.inked button[aria-pressed=true] .ink .draw{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease-out .2s}
[data-da=souligne] .play,[data-da=entoure] .play,[data-da=coche] .play,[data-da=surligne] .play,[data-da=fleche] .play,[data-da=barre] .play,[data-da=crochets] .play{border-color:transparent;background:transparent;color:#1a1a1a;font-size:20px}
[data-da=souligne] .play:hover,[data-da=entoure] .play:hover,[data-da=coche] .play:hover,[data-da=surligne] .play:hover,[data-da=fleche] .play:hover,[data-da=barre] .play:hover,[data-da=crochets] .play:hover{background:transparent;transform:rotate(-2deg)}
[data-da=coche] .modes button{padding:0 14px 0 40px}
/* Coché layout: the switch sits in the middle of the space between the logo and the cards (five equal gaps on the page),
   and the two choices form one centred group instead of two halves of an invisible pill. */
[data-da=coche] .modes{--centred:1;margin:auto 0;grid-template-columns:auto auto;gap:14px;min-width:0;width:auto;padding:0}
[data-da=surligne] .ink{z-index:-1}
[data-da=surligne] .ink path{stroke:rgba(229,56,59,.3)}
[data-da=barre] .ink path{stroke:#e5383b}
[data-da=barre] .play .ink path{stroke:#1a1a1a}
[data-da=barre] .modes.inked button[aria-pressed=true] .ink .draw{stroke-dashoffset:1;transition:stroke-dashoffset .3s ease-in}
[data-da=barre] .modes.inked button[aria-pressed=false] .ink .draw{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease-out .2s}
@media(prefers-reduced-motion:reduce){[data-da=souligne] .ink path,[data-da=entoure] .ink path,[data-da=coche] .ink path,[data-da=surligne] .ink path,[data-da=fleche] .ink path,[data-da=barre] .ink path,[data-da=crochets] .ink path{transition:none!important}}

/* Tampon: worn rubber stamps; the chosen one is stamped in black, slightly tilted, with a little press on switch. */
[data-da=tampon] .modes{border-color:transparent;gap:12px;padding:4px 6px}
[data-da=tampon] .modes::before{display:none}
[data-da=tampon] .modes button,[data-da=tampon] .play{border:2px solid #1a1a1a;border-radius:5px;text-transform:uppercase;letter-spacing:.08em;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 2.05'/%3E%3C/filter%3E%3Crect width='140' height='70' filter='url%28%23r%29'/%3E%3C/svg%3E") 0 0/140px 70px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 2.05'/%3E%3C/filter%3E%3Crect width='140' height='70' filter='url%28%23r%29'/%3E%3C/svg%3E") 0 0/140px 70px}
[data-da=tampon] .modes button{color:#1a1a1a;font-size:15px;opacity:.35;transition:opacity .2s}
[data-da=tampon] .modes button[aria-pressed=true]{background:#1a1a1a;color:#fff;opacity:1;rotate:-2deg;animation:stamp-press .22s ease-out}
[data-da=tampon] .play{border-radius:5px;rotate:-3deg;letter-spacing:.12em}
@keyframes stamp-press{from{scale:1.18;opacity:.3}}
@media(prefers-reduced-motion:reduce){[data-da=tampon] .modes button[aria-pressed=true]{animation:none}}

/* Classique: a plain app switch, light grey track and a white sliding pill; black play button. */
[data-da=classique] .modes{border-color:transparent;background:#efefef}
[data-da=classique] .modes::before{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18)}
[data-da=classique] .modes button{color:#6b6b6b}
[data-da=classique] .modes button[aria-pressed=true]{color:#1a1a1a}
[data-da=classique] .play{border-color:#1a1a1a}

/* Scotch: a strip of masking tape stuck behind the chosen label (and behind "Jouer"); it peels off and sticks to the other choice. */
[data-da=scotch] .modes{border-color:transparent;gap:8px}
[data-da=scotch] .modes::before{display:none}
[data-da=scotch] .modes button{color:#8a8a8a;transition:color .3s}
[data-da=scotch] .modes button[aria-pressed=true]{color:#1a1a1a}
[data-da=scotch] .modes button::after,[data-da=scotch] .play::after{content:"";position:absolute;inset:9px 4px;z-index:-1;background:rgba(229,214,178,.85);clip-path:polygon(2% 0,98% 5%,100% 22%,97% 40%,100% 60%,97% 80%,99% 100%,1% 95%,3% 78%,0 60%,3% 40%,0 20%);rotate:-2deg;opacity:0;scale:1.15;transition:opacity .25s,scale .25s}
[data-da=scotch] .modes button[aria-pressed=true]::after,[data-da=scotch] .play::after{opacity:1;scale:1}
[data-da=scotch] .play{border-color:transparent;background:transparent;color:#1a1a1a;font-size:20px}
[data-da=scotch] .play::after{inset:7px -4px;rotate:1.5deg}
[data-da=scotch] .play:hover{background:transparent;transform:rotate(-2deg)}
@media(prefers-reduced-motion:reduce){[data-da=scotch] .modes button::after{transition:none}}

/* ——— Clean, simple button proposals (?da=ligne|point|contour|carre, plus ?da=classique above), compared on /apercu-boutons/. ——— */
/* Ligne: two words, a thin black line slides under the chosen one; play button with softly rounded corners. */
[data-da=ligne] .modes,[data-da=point] .modes{border-color:transparent;min-width:280px}
[data-da=ligne] .modes button,[data-da=point] .modes button{color:#9a9a9a}
[data-da=ligne] .modes button[aria-pressed=true],[data-da=point] .modes button[aria-pressed=true]{color:#1a1a1a}
[data-da=ligne] .modes::before{top:auto;bottom:3px;left:calc(25% - 20px);width:40px;height:2px;border-radius:2px;transition:left .3s cubic-bezier(.3,.8,.3,1)}
[data-da=ligne] .modes[data-active=multi]::before{transform:none;left:calc(75% - 20px)}
[data-da=ligne] .play{border-radius:10px}
/* Point: the same two words, a small black dot slides under the chosen one. */
[data-da=point] .modes::before{top:auto;bottom:1px;left:calc(25% - 3px);width:6px;height:6px;border-radius:50%;transition:left .3s cubic-bezier(.3,.8,.3,1)}
[data-da=point] .modes[data-active=multi]::before{transform:none;left:calc(75% - 3px)}
/* Contour: two separate outlined buttons, the chosen one filled in black; outlined play button that fills on hover. */
[data-da=contour] .modes{border-color:transparent;gap:10px;padding:0}
[data-da=contour] .modes::before{display:none}
[data-da=contour] .modes button{border:1.5px solid #1a1a1a;color:#1a1a1a;transition:background .2s,color .2s}
[data-da=contour] .modes button[aria-pressed=true]{background:#1a1a1a;color:#fff}
[data-da=contour] .play{border-width:1.5px;background:#fff;color:#1a1a1a;transition:background .2s,color .2s}
[data-da=contour] .play:hover{background:#1a1a1a;color:#fff}
/* Carré: the black pill switch and play button with square corners and small uppercase labels. */
[data-da=carre] .modes,[data-da=carre] .modes::before,[data-da=carre] .modes button,[data-da=carre] .play{border-radius:0}
[data-da=carre] .modes button,[data-da=carre] .play{font-size:14px;letter-spacing:.08em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){[data-da=ligne] .modes::before,[data-da=point] .modes::before{transition:none}}
/* Bleu: the original blue look (trial, ?da=bleu): blue fills with navy outlines, blue pins. */
[data-da=bleu] .modes,[data-da=bleu] .play,[data-da=bleu] .pin{border-color:#172441}
[data-da=bleu] .modes::before,[data-da=bleu] .play,[data-da=bleu] .pin{background:#315cff}
[data-da=bleu] .modes button{color:#172441}
[data-da=bleu] .modes button[aria-pressed=true]{color:#fff}
[data-da=bleu] .play:hover{background:#2147e8}
[data-da=bleu] .modes button:focus-visible,[data-da=bleu] .play:focus-visible{outline-color:#172441}
/* Phone layout proposals (mock-up only, ?mobile=a|b|c); computers are untouched. */
@media(max-width:600px){
/* A · Colonne: logo, switch and play button share one width; the group is centred, the socials stay at the bottom. */
[data-mobile=a] .home{--logo:min(250px,64vw)}
[data-mobile=a] .modes{width:var(--logo);margin:16px 0 32px}
[data-mobile=a] .modes button,[data-mobile=b] .modes button,[data-mobile=c] .modes button{min-height:38px;padding:0 12px;font-size:15px}
[data-mobile=a] .play{width:var(--logo);height:50px;margin:28px 0 auto}
/* B · En-tête: small logo and wide switch at the top like an app header; cards and a wide play button centred below. */
[data-mobile=b] .home{--logo:min(210px,54vw)}
[data-mobile=b] .brand{margin:12px 0 0}
[data-mobile=b] .modes{width:min(300px,calc(100% - 64px));margin:14px 0 auto}
[data-mobile=b] .play{width:min(300px,calc(100% - 64px));height:54px;margin:28px 0 auto}
/* C · Commandes en bas: logo above the cards, switch and play button stacked within thumb reach. */
[data-mobile=c] .home{--logo:min(260px,66vw)}
[data-mobile=c] .brand{margin:auto 0}
[data-mobile=c] .line{order:1}
[data-mobile=c] .modes{order:2;width:min(260px,calc(100% - 64px));margin:28px 0 0}
[data-mobile=c] .play{order:3;width:min(260px,calc(100% - 64px));height:52px;margin:14px 0 16px}
[data-mobile=c] .footer{order:4}
}

/* A card drawn as one of the wall's notes (data-look="note", the Mur à idées): a torn scrap of paper taped to the line
   instead of pinned. Its shadow is a filter on the card, so it follows the torn edges cut into ::before. */
.cards .card.card-note{border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 1px 1px rgba(23,36,65,.14)) drop-shadow(0 12px 16px rgba(23,36,65,.16))}
.cards .card.card-note.is-center{box-shadow:none;filter:drop-shadow(0 1px 1px rgba(23,36,65,.16)) drop-shadow(0 18px 24px rgba(23,36,65,.22))}
.card.card-note::before{content:"";position:absolute;inset:0;background:#fffdf6;clip-path:polygon(0.0% 1.2px,8.3% 1.6px,16.7% 1.7px,25.0% 0.4px,33.3% 0.0px,41.7% 0.9px,50.0% 0.7px,58.3% 2.0px,66.7% 1.7px,75.0% 1.5px,83.3% 1.4px,91.7% 1.7px,100.0% 0.4px,calc(100% - 1.1px) 12.5%,calc(100% - 0.4px) 25.0%,calc(100% - 2.3px) 37.5%,calc(100% - 0.1px) 50.0%,calc(100% - 2.0px) 62.5%,calc(100% - 0.2px) 75.0%,calc(100% - 1.7px) 87.5%,calc(100% - 0.8px) 100.0%,91.7% calc(100% - 2.8px),83.3% calc(100% - 5.9px),75% calc(100% - 0.1px),66.7% calc(100% - 0.4px),58.3% calc(100% - 6.4px),50% calc(100% - 3.6px),41.7% calc(100% - 0.6px),33.3% calc(100% - 6.9px),25% calc(100% - 6.6px),16.7% calc(100% - 0.8px),8.3% calc(100% - 3.0px),0% calc(100% - 0.9px),0.8px 87.5%,1.6px 75%,0.4px 62.5%,1.7px 50%,0.1px 37.5%,0.4px 25%,2.0px 12.5%)}
.card.card-note .photo{position:relative;background:none;border-radius:0}
.cards .card.card-note .pin{top:-11px;width:56px;height:24px;margin-left:-28px;border:0;border-radius:0;background:rgba(222,205,156,.85);
  clip-path:polygon(0 12%,5% 0,95% 0,100% 14%,96% 32%,100% 52%,95% 72%,100% 90%,94% 100%,6% 100%,0 86%,4% 66%,0 46%,5% 28%);transform:rotate(-4deg)}
.cards .card.card-note .pin::after{display:none}

/* A cover that fills the whole card, without the white frame or the faded edges (data-look="plein", Guess the Number):
   its character's shoulders touch the bottom edge of the card. */
.cards .card.card-plein{padding:0}
.card.card-plein .photo{border-radius:15px}
.card.card-plein .photo img{-webkit-mask-image:none;mask-image:none}
@media(max-width:639.98px){.card.card-plein .photo{border-radius:12px}}