@import url('../prints/prints.css');
main{max-width:1560px;margin:auto;padding:0 4vw 40px}
.play-heading{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:38px 0 32px}
.play-heading h1{margin:8px 0 16px}
.play-heading .intro{max-width:48ch;font-size:17px;margin:0;color:var(--muted);line-height:1.65}
.play-note{flex:0 0 290px;display:grid;gap:7px;border-left:2px solid var(--edge);padding-left:22px;font-size:13px;line-height:1.6;color:var(--muted)}
.play-note strong{font-size:18px;color:var(--ink)}
.play-note .demo-detail{font-size:12px;max-width:36ch}
/* Rewards, conditions, and entry costs occupy the same positions on every card. */
.play-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.play-card{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:stretch;min-height:410px;padding:32px;border:1px solid #c2d5ce30;border-radius:14px;text-decoration:none;background:#092d39;color:#f2efdf;transition:border-color .2s,box-shadow .2s}
.play-card::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--scene) center/cover no-repeat;transition:transform .4s}
.play-card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#051e2cf5 0%,#072635eb 38%,#0726359c 70%,#07263535 100%)}
.card-copy{position:relative;z-index:2;width:72%;max-width:39ch;display:flex;flex-direction:column;align-items:flex-start}
.play-card .eyebrow{font:9px/1.6 var(--mono);letter-spacing:.12em;color:#cec09b;margin:0 0 12px}
.play-card h2{font-size:clamp(27px,2.55vw,37px);line-height:1.12;margin:0 0 16px;letter-spacing:-.035em}
.card-payoff{font-size:23px;font-weight:650;line-height:1.25;letter-spacing:-.025em;color:#f3d797;margin:0 0 14px;text-wrap:pretty}
.card-payoff strong{font-weight:750}
.cup-card .card-payoff strong,.dive-card .card-payoff strong,.tide-card .card-payoff strong,.trials-card .card-payoff strong,.fishing-card .card-payoff strong{white-space:nowrap}
.card-description{font-size:14px;line-height:1.6;color:#d4dfdc;margin:0 0 10px;max-width:34ch}
.card-terms{font-size:12px;line-height:1.6;color:#bdceca;margin:0 0 22px;max-width:36ch}
.card-entry{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:auto 0 14px;padding-top:14px;border-top:1px solid #ccdec32b;font-size:13px;line-height:1.5;color:#e5e7d8;width:100%}
.card-entry>span{font:9px/1.5 var(--mono);letter-spacing:.12em;color:#b8c7be}
.card-link{display:inline-flex;gap:9px;align-items:center;min-height:28px;font-size:14px;color:#f3e6c2}
.card-link>span{display:inline-block;transition:transform .2s}
.card-subject{position:absolute;z-index:0;right:-6%;bottom:7%;width:43%;height:auto;max-height:85%;object-fit:contain;filter:drop-shadow(0 12px 14px #00192366);pointer-events:none}
.cup-card .card-subject{width:42%;right:-1%;bottom:21%;transform:scaleX(-1) rotate(-6deg)}
.cup-card::before,.trials-card::before{background-position:70% center}
.play-card:hover{border-color:#d9c48699;box-shadow:0 8px 30px #00121b40}
.play-card:hover::before{transform:scale(1.025)}
.play-card:hover .card-link>span{transform:translate(2px,-2px)}
.play-card:focus-visible{outline:2px solid #f0ce85;outline-offset:5px}
/* A slow clockwise highlight invites play without moving the cards or their text. */
@property --halo-turn{syntax:'<angle>';initial-value:0deg;inherits:false}
body[data-ui="play"] .featured-card{border-color:#e7c77dcc;box-shadow:0 0 0 1px #ebca7938,0 0 22px #e8bd5a36,0 0 48px #d5a3471c,inset 0 0 22px #f3d7970a}
.card-halo{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:2px;background:conic-gradient(from var(--halo-turn),transparent 0deg 210deg,#dbac5350 260deg,#f8da8f 315deg,#fff4cf 344deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:card-halo-orbit 4s linear infinite}
.runs-card .card-halo{animation-delay:-2s}
@keyframes card-halo-orbit{to{--halo-turn:360deg}}
.featured-card .card-link{padding:8px 12px 8px 16px;min-height:44px;border:1px solid #f4d58666;border-radius:9px;background:#e9be5420;color:#ffe7a9;font-weight:650;box-shadow:inset 0 1px #ffe5a21a;transition:background .2s,border-color .2s}
.featured-card .card-link>span{font-size:20px;line-height:1;margin-left:8px}
body[data-ui="play"] .featured-card:is(:hover,:focus-visible){border-color:#f6dda2;box-shadow:0 0 0 1px #f0ce8555,0 0 28px #e8bd5a50,0 0 58px #d5a3472c,inset 0 0 26px #f3d79710}
.featured-card:is(:hover,:focus-visible) .card-link{background:#e9be5438;border-color:#f4d586bb}
@media(prefers-reduced-motion:reduce){.card-halo{animation:none}.featured-card .card-link{transition:none}}
@media(forced-colors:active){.card-halo{display:none}body[data-ui="play"] .featured-card,body[data-ui="play"] .featured-card:is(:hover,:focus-visible){border-color:Highlight;box-shadow:none}.featured-card .card-link{border-color:LinkText}}
.next-stop{border-top:1px solid var(--edge);display:flex;justify-content:space-between;align-items:center;gap:32px;padding:32px 0 0;margin-top:36px}
.next-stop h2{font-size:28px;margin:0 0 12px}
.next-stop p:not(.eyebrow){max-width:65ch;margin:8px 0;color:var(--muted);font-size:14px;line-height:1.7}
.next-stop .small{font-size:12px!important}.next-stop .secondary{flex-shrink:0}
footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--edge);padding:20px 4vw;font-size:12px}
footer a{display:inline-block;min-height:44px;padding:10px 0}
nav #sound{width:112px;flex:0 0 112px;text-align:center;white-space:normal;text-decoration:none;font:inherit;font-size:13px;padding:10px 0}
@media(max-width:1100px){.play-heading{align-items:flex-start;flex-direction:column;gap:22px}.play-note{flex-basis:auto;max-width:none}.play-note .demo-detail{max-width:none}.play-card{padding:25px}.card-copy{width:82%}.play-card h2{font-size:29px}.card-payoff{font-size:22px}.card-description{font-size:13px}.play-grid{gap:20px}.card-subject{right:-13%;width:48%;opacity:.65}.cup-card .card-subject{right:-5%;width:42%}}
@media(max-width:760px){.play-grid{grid-template-columns:1fr}.play-card{min-height:390px;padding:28px}.card-copy{width:72%;max-width:39ch}.play-card h2{font-size:32px}.card-description{font-size:14px}.card-subject{right:-4%;width:41%;opacity:.8}.cup-card .card-subject{right:0;width:42%}.next-stop{flex-direction:column;align-items:flex-start;gap:15px}}
@media(max-width:620px){header{flex-wrap:wrap;gap:8px}header nav{width:100%;justify-content:space-between;gap:8px}nav #sound{width:90px;flex-basis:90px}.play-heading .intro{font-size:15px}.play-note{padding-left:16px}.play-note strong{font-size:17px}.play-card{min-height:400px;padding:25px 22px}.card-copy{width:90%}.play-card h2{font-size:30px}.card-payoff{font-size:22px}.card-description{font-size:13px;max-width:29ch}.card-terms{max-width:29ch}.card-link{font-size:13px}.play-card .eyebrow{font-size:9px;margin-bottom:12px}.card-subject{right:-20%;bottom:15%;width:55%;opacity:.48}.cup-card .card-subject{right:-10%;width:48%;bottom:20%}.play-card::after{background:linear-gradient(90deg,#051e2cf5 0%,#072635eb 45%,#072635a3 100%)}footer{flex-wrap:wrap}.next-stop h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.play-card,.play-card::before,.card-link>span{transition:none}.play-card:hover::before{transform:none}}

.daily-invitation{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #a1b99c55;border-bottom:1px solid #a1b99c55;padding:25px 0;margin-bottom:35px}.daily-invitation h2{font-size:32px;margin:8px 0}.daily-invitation p{max-width:600px}.daily-invitation a{white-space:nowrap}@media(max-width:700px){.daily-invitation{flex-direction:column;align-items:flex-start}}

.salvage-card::before{background-position:70% center}.salvage-card::after{background:linear-gradient(90deg,#051e2cf2 0%,#072635dd 35%,#07263555 67%,transparent 100%)}

/* Illustrated course: keep the gates luminous beside the copy. */
.runs-card::before{background-position:right center}
.runs-card::after{background:linear-gradient(90deg,#051e2cf2 0%,#072635dc 33%,#07263565 65%,#07263515 100%)}
@media(max-width:620px){.runs-card::after{background:linear-gradient(90deg,#051e2cf2 0%,#072635cf 55%,#07263555 100%)}}

/* Keep the actual racing pack clear of the card copy. */
.cup-card::before{background-position:right center}
.cup-card::after{background:linear-gradient(90deg,#051e2cf5 0%,#072635e6 35%,#07263555 62%,#07263508 100%)}
@media(max-width:620px){.cup-card::before{background-position:right center}.cup-card::after{background:linear-gradient(90deg,#051e2cf2 0%,#072635cf 48%,#07263545 100%)}}

/* Preserve the fishing station’s warm materials and luminous water. */
.shore-card::before{background-position:right center}
.shore-card::after{background:linear-gradient(90deg,#051e2cf2 0%,#072635df 34%,#07263555 65%,transparent 100%)}
@media(max-width:620px){.shore-card::after{background:linear-gradient(90deg,#051e2cf2 0%,#072635cf 48%,#07263545 100%)}}

/* Full-scene illustrated covers: keep the focal art clear beside the copy. */
:is(.dive-card,.tide-card,.trials-card,.fishing-card,.bank-card)::before{background-position:right center}
:is(.dive-card,.tide-card,.trials-card,.fishing-card,.bank-card)::after{background:linear-gradient(90deg,#051e2cf2 0%,#072635df 34%,#07263555 65%,transparent 100%)}
@media(max-width:620px){:is(.dive-card,.tide-card,.trials-card,.fishing-card,.bank-card)::after{background:linear-gradient(90deg,#051e2cf2 0%,#072635cf 48%,#07263545 100%)}}

.bonus-draw{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;margin-top:32px;border:1px solid #dfbf7066;border-radius:22px;background:linear-gradient(120deg,#193f49,#102b38)}.bonus-draw h2{margin:0;font-size:28px}.bonus-draw p{max-width:640px}.bonus-draw .secondary{flex-shrink:0}@media(max-width:650px){.bonus-draw{align-items:flex-start;flex-direction:column}}