html[data-page=belote] main { background:#211329; }
html[data-page=belote] main [hidden] { display:none !important; }
.belote-hero { position:relative;isolation:isolate;overflow:hidden;background:#281329; }
.belote-hero__art { position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center; }
.belote-hero::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#1b0d24ed 0%,#1b0d24d9 40%,#1b0d2410 80%); }
.belote-hero__inner { min-height:680px;padding-block:74px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center; }
.belote-hero__copy { max-width:610px; }
.belote-hero h1 { font-size:clamp(3.8rem,7vw,6.5rem);letter-spacing:-.035em; }
.belote-hero h1 span { display:block;font-size:.59em;font-style:italic;font-weight:400;color:#f0cba8;margin-top:14px; }
.belote-hero .lead { color:#f0e4ee;font-size:1.16rem;max-width:43ch; }
.belote-hero .store-badges { margin-block:25px; }
.belote-hero .button--ghost { background:#231329d9; }
.belote-hero__fan { position:relative;height:380px;max-width:420px;width:100%;justify-self:center; }
.belote-hero__fan .belote-card { position:absolute;width:46%;top:26px;box-shadow:0 24px 50px #08031099; }
.belote-hero__fan img:nth-child(1) { left:1%;transform:rotate(-16deg); }
.belote-hero__fan img:nth-child(2) { left:28%;top:0;z-index:2; }
.belote-hero__fan img:nth-child(3) { right:0;transform:rotate(16deg); }
.belote-card { display:block;width:100%;height:auto;border-radius:7px;box-shadow:0 6px 16px #0005; }
.belote-facts { background:#362039;border-block:1px solid #bb8cbd55; }
.belote-facts dl { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:25px;text-align:center; }
.belote-facts dt { color:#f1c89e;font:500 2.8rem var(--serif); }
.belote-facts dd { margin:0;color:#ebddea;font-size:.9rem; }
.belote-facts dl>div+div { border-left:1px solid #decade33; }
.belote-puzzles { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-block:35px 28px; }
.belote-puzzle { min-width:0;border:1px solid #ad7fae77;border-radius:16px;background:#342139;padding:24px; }
.belote-puzzle legend { padding:0 10px;font:600 1.35rem var(--serif);color:#f5e9db; }
.belote-puzzle legend span { color:#e8b88f;font:.9rem var(--sans); }
.belote-puzzle__question { color:#e8dce6;min-height:4.5em; }
.belote-puzzle__trick { display:flex;justify-content:center;gap:10px;padding-block:12px 20px;min-height:145px; }
.belote-puzzle__trick .belote-card { width:66px;align-self:center; }
.belote-puzzle__cards { display:flex;justify-content:center;gap:14px; }
.belote-choice { width:96px;min-width:0;flex:0 1 96px;background:transparent;padding:0;border:0;border-radius:7px;cursor:pointer;transition:transform .2s; }
.belote-choice:not(:disabled):hover,.belote-choice[aria-pressed=true] { transform:translateY(-8px); }
.belote-choice:disabled { opacity:1;cursor:default; }
.belote-choice[aria-pressed=true] { outline:3px solid #f2cc96;outline-offset:4px; }
.belote-choice[data-verdict=right] { outline-color:#abeec4; }
.belote-choice[data-verdict=wrong] { outline-color:#ffc3ad; }
.belote-puzzle__reply { color:#e6f4e9;min-height:1.5em;margin-top:22px;font-size:.96rem; }
.belote-practice>.inner>.store-badges { margin-top:25px; }
.belote-rules-band { background:#2c1a32; }
.belote-rules-band .rule-number { color:#edbb95; }
.belote-rules-band .sueca-rules p { color:#e5d8e4; }
.belote-rank { border-top:1px solid #ead3eb33;padding-top:40px;margin-top:40px; }
.belote-rank-switch { display:flex;flex-wrap:wrap;gap:12px;margin-block:26px; }
.belote-rank-switch button { min-height:48px;padding:12px 22px;border:1px solid #b691b5;border-radius:30px;background:#3c2843;color:#f7e9dd;cursor:pointer;font-weight:600; }
.belote-rank-switch button[aria-pressed=true] { background:#f1cc9f;color:#27122b;border-color:#f1cc9f; }
.belote-rank-group h4 { color:#f2ccaa;font-size:1.2rem;margin-block:24px; }
.belote-ranks { list-style:none;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px; }
.belote-ranks li { text-align:center;min-width:0; }
.belote-ranks strong { display:block;color:#f2ccaa;font:600 1.75rem var(--serif);margin-top:12px; }
.belote-ranks span { color:#e7dce5;font-size:.8rem; }
.belote-score-layout { display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center; }
.belote-score { background:#36233e;padding:30px;border:1px solid #a477a477;border-radius:16px; }
.belote-score label { display:block;color:#f2e6ef;font-weight:600; }
.belote-score input[type=range] { width:100%;min-height:48px;accent-color:#f1c89e;margin-block:18px; }
.belote-score__checks label { display:flex;align-items:start;gap:12px;padding-block:10px;font-size:.95rem;font-weight:400; }
.belote-score input[type=checkbox] { width:24px;height:24px;flex-shrink:0;margin-top:0;accent-color:#f1c89e; }
.belote-score select { width:100%;min-height:48px;background:#2b1932;color:#f7eade;border:1px solid #b996b8;border-radius:6px;padding:10px;margin-block:12px; }
.belote-score output { display:block;color:#f5d3a9;font:600 1.8rem/1.4 var(--serif);margin-block:24px 10px; }
.belote-score p { color:#e7dbe5; }
.belote-app-band { background:#301d36;border-block:1px solid #bd91ba33; }
.belote-app-band .sueca-features article { border-color:#dfb590; }
.belote-app-band .sueca-features p { color:#e6dbe6; }
.belote-gallery { display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 8px 28px;margin-bottom:30px; }
.belote-gallery figure { flex:0 0 228px;margin:0;scroll-snap-align:start; }
.belote-gallery img { display:block;width:100%;height:auto;border:1px solid #d4a6be80;border-radius:18px;box-shadow:0 12px 22px #0005; }
.belote-gallery figcaption { color:#e6dbe6;font-size:.95rem;text-align:center;margin-top:15px; }
html[data-page=belote] .sueca-faq p { color:#e7dbe5; }
@media (max-width:900px) {
    .belote-hero__inner { gap:20px;grid-template-columns:1.2fr .8fr;min-height:680px; }
    .belote-hero__fan { height:270px; }
    .belote-score-layout { grid-template-columns:1fr;gap:30px; }
    .belote-ranks { gap:10px; }
}
@media (max-width:600px) {
    .belote-hero__inner { grid-template-columns:1fr;padding-block:42px 36px;gap:12px; }
    .belote-hero__art { object-position:center; }
    .belote-hero::after { background:linear-gradient(180deg,#21112bdd 0%,#21112bec 42%,#21112b22 100%); }
    .belote-hero h1 { font-size:3.8rem; }
    .belote-hero .lead { font-size:1rem; }
    .belote-hero__fan { width:min(100%,300px);height:270px;margin-top:10px; }
    .belote-puzzles { grid-template-columns:1fr; }
    .belote-puzzle { padding:22px 18px; }
    .belote-puzzle__question { min-height:0; }
    .belote-facts dt { font-size:2.15rem; }
    .belote-facts dd { font-size:.74rem; }
    .belote-ranks { grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px; }
    .belote-ranks .belote-card { max-width:90px;margin:auto; }
    .belote-score { padding:24px; }
    .belote-score output { font-size:1.5rem; }
    .belote-gallery figure { flex-basis:205px; }
}
@media (prefers-reduced-motion:no-preference) {
    .belote-hero__fan { animation:belote-enter .7s both; }
    @keyframes belote-enter { from {opacity:0;transform:translateY(18px);} to {opacity:1;transform:translateY(0);} }
}
@media (prefers-reduced-motion:reduce) { .belote-choice {transition:none;} .belote-choice:not(:disabled):hover {transform:none;} }
@media (forced-colors:active) { .belote-puzzle,.belote-score,.belote-rank-switch button {border-color:CanvasText;} .belote-choice[aria-pressed=true] {outline-color:Highlight;} }