.sok {
    --sok-ink: var(--ink, #25231f);
    --sok-muted: #6f6559;
    --sok-line: #e8e0d3;
    --sok-cream: var(--cream, #f7f5ef);
    --sok-gold: #b29258;
    color: var(--sok-ink);
    display: grid;
    gap: 18px;
    line-height: 1.55;
}
.sok [hidden] { display: none !important; }
.sok .sok-hero {
    align-items: center;
    background: radial-gradient(ellipse at 76% 42%, #49352a 0, #2d221d 38%, #211b17 76%);
    color: #fff7e8;
    display: grid;
    gap: 22px;
    grid-template-columns: 1.2fr 1fr;
    min-height: 300px;
    overflow: hidden;
    padding: clamp(22px, 5vw, 65px);
}
.sok .sok-hero h2 {
    color: inherit;
    font: 400 clamp(38px, 5.7vw, 76px)/1.03 var(--serif, Georgia, serif);
    letter-spacing: -.035em;
    margin: 8px 0 16px;
}
.sok .sok-hero p { color: #eee1cc; max-width: 390px; }
.sok .sok-label { color: #795e38; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sok .sok-hero .sok-label { color: #e3c897; }
.sok .sok-hero-bottles { display: flex; align-items: center; justify-content: center; min-width: 0; }
.sok .sok-hero-bottles img {
    aspect-ratio: .75;
    background: #f7f0e4;
    border: 1px solid #e4c38c69;
    border-radius: 3px;
    box-shadow: 0 12px 25px #110c0a6b;
    height: auto;
    object-fit: contain;
    width: 34%;
}
.sok .sok-hero-bottles img:nth-child(1) { transform: translate(9%, 7%) rotate(-12deg); }
.sok .sok-hero-bottles img:nth-child(2) { position: relative; z-index: 1; transform: scale(1.16); }
.sok .sok-hero-bottles img:nth-child(3) { transform: translate(-9%, 7%) rotate(12deg); }
.sok .sok-button {
    align-items: center;
    background: var(--sok-ink);
    border: 1px solid var(--sok-ink);
    border-radius: 2px;
    color: #fff !important;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    min-height: 42px;
    padding: 8px 14px;
    text-decoration: none;
}
.sok .sok-button:hover { background: #473a2b; }
.sok .sok-hero .sok-button { background: #f2e4c9; border-color: #f2e4c9; color: #241e18 !important; }
.sok .sok-hero .sok-coupon-jump { background: transparent; color: #fff7e8 !important; margin-left: 5px; }
.sok .sok-secondary { background: transparent; border-color: #baab93; color: var(--sok-ink) !important; }
.sok .sok-secondary:hover { background: var(--sok-cream); }
.sok .sok-balance { border: 1px solid #d5bb87; display: inline-flex; gap: 12px; padding: 9px 14px; }
.sok .sok-panel, .sok .sok-terms { border: 1px solid var(--sok-line); padding: clamp(16px, 4vw, 32px); }
.sok .sok-panel h3 { font: 400 clamp(24px, 4vw, 36px)/1.1 var(--serif, Georgia, serif); margin: 5px 0 12px; }
.sok .sok-panel h4 { font-size: 17px; margin: 26px 0 8px; }
.sok .sok-terms summary { cursor: pointer; font-weight: 700; }
.sok .sok-terms ul { margin-bottom: 0; padding-inline-start: 20px; }
.sok .sok-terms li + li { margin-top: 6px; }
.sok .sok-join { display: grid; gap: 12px; justify-items: start; margin-top: 16px; }
.sok .sok-notice { margin: 0; border: 1px solid #e4c3ac; background: #fff4ed; padding: 12px 15px; }
.sok .sok-notice[data-success="yes"] { border-color: #c9d5bc; background: #f2f7ed; }
.sok .sok-play { text-align: center; background: var(--sok-cream); }
.sok .sok-game { margin: 0 auto; width: min(100%, 395px); }
.sok .sok-game-hud { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 8px; }
.sok .sok-game-hud div { background: #fff; border: 1px solid var(--sok-line); display: grid; padding: 6px 2px; }
.sok .sok-game-hud strong { font-size: clamp(12px, 2.9vw, 17px); }
.sok .sok-game-hud small { color: var(--sok-muted); font-size: clamp(9px, 2.4vw, 12px); }
.sok .sok-board {
    background: #2b231e;
    border: 2px solid #5d4835;
    border-radius: 8px;
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 5px;
}
.sok .sok-column {
    background: #3e3027;
    border: 1px solid #66523e;
    border-radius: 4px;
    display: grid;
    padding: 0;
    position: relative;
    touch-action: manipulation;
}
.sok .sok-column[data-selected="true"] { background: #524032; border-color: #dfc591; }
.sok .sok-column[aria-disabled="true"] { cursor: default; }
.sok .sok-column:focus-visible { outline: 2px solid #f3d79c; outline-offset: 1px; z-index: 2; }
.sok .sok-slot, .sok .sok-preview { align-items: center; aspect-ratio: 1.16; display: flex; justify-content: center; min-width: 0; position: relative; }
.sok .sok-slot { border-top: 1px solid #ffefc517; }
.sok .sok-slot[data-rank]::after { content: attr(data-rank); position: absolute; right: 2px; bottom: 2px; border-radius: 2px; background: #231a15; color: #fff4db; font-size: 10px; line-height: 1; padding: 2px; pointer-events: none; }
.sok .sok-preview { background: #241b17; z-index: 1; }
.sok .sok-slot img, .sok .sok-preview img {
    background: #f7f0e4;
    border: 1px solid #c0a784;
    border-radius: 4px;
    box-shadow: 0 1px 5px #1e1713b3;
    height: 89%;
    object-fit: contain;
    pointer-events: none;
    width: 72%;
}
.sok .sok-slot img[data-level="1"], .sok .sok-preview img[data-level="1"] { border-color: #f1c788; }
.sok .sok-slot img[data-level="2"] { border-color: #a7caea; }
.sok .sok-slot img[data-level="3"] { border-color: #f3dc92; box-shadow: 0 0 8px #ebbc62; }
.sok .sok-game-status { min-height: 42px; margin: 10px 0 0; }
.sok .sok-game-actions { display: flex; justify-content: center; }
.sok .sok-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.sok .sok-levels li { align-items: center; background: var(--sok-cream); display: grid; gap: 4px; justify-items: center; padding: 6px 1px; text-align: center; }
.sok .sok-levels img { border-radius: 3px; height: 56px; object-fit: contain; width: 54px; }
.sok .sok-levels span { font-size: 11px; overflow-wrap: anywhere; }
.sok .sok-tiers { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sok .sok-tier { background: var(--sok-cream); border: 1px solid var(--sok-line); display: grid; gap: 2px; justify-items: start; min-width: 0; padding: clamp(8px, 2vw, 18px); }
.sok .sok-tier strong { font: 400 clamp(18px, 3.3vw, 32px)/1.15 var(--serif, Georgia, serif); }
.sok .sok-tier small, .sok .sok-coupon small, .sok .sok-events small { color: var(--sok-muted); display: block; }
.sok .sok-tier form { margin-top: 6px; }
.sok .sok-tier .sok-button:disabled { color: #463d31 !important; background: #eae1d2; border-color: #ddd0bc; opacity: 1; cursor: not-allowed; margin-top: 6px; }
.sok .sok-coupon { align-items: center; border-bottom: 1px solid var(--sok-line); display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 10px 0; }
.sok .sok-coupon-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sok .sok-coupon code { font-size: 12px; overflow-wrap: anywhere; }
.sok .sok-page-link { display: inline-block; margin: 12px 16px 0 0; text-decoration: underline; }
.sok .sok-events { list-style: none; margin: 0; padding: 0; }
.sok .sok-events li { border-bottom: 1px solid var(--sok-line); display: flex; gap: 12px; justify-content: space-between; padding: 7px 0; }
@media (max-width: 580px) {
    .sok .sok-hero { grid-template-columns: 1fr; min-height: auto; }
    .sok .sok-hero-bottles { justify-self: center; max-width: 220px; }
    .sok .sok-tiers { gap: 4px; }
    .sok .sok-tier .sok-button { font-size: 11px; padding-inline: 5px; }
}