#screen-cup{--cup-deep:#173b30;--cup-soft:#edf3ec}
.cup-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:12px 0 16px}
.cup-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#557367}
.cup-heading h2{font-size:30px;line-height:1.1;margin:7px 0;text-transform:none}
.cup-heading p,.cup-section-heading p{margin:0;color:var(--dim);font-size:13px}
.cup-collection{display:flex;flex-direction:column;flex-shrink:0;text-align:right;font-size:11px;color:var(--dim)}
.cup-collection>b{font-size:32px;line-height:1.1;color:var(--cup-deep)}
.cup-collection>b span{font-size:17px;color:#7c8a80}
.cup-progress{display:flex;gap:5px;margin-bottom:24px}
.cup-progress span{height:5px;flex:1;border-radius:6px;background:#ccd9cb}
.cup-progress .complete{background:#43876b}
#screen-cup .cup-feature{padding:0;overflow:hidden;border:1px solid #c9d8cd;box-shadow:0 8px 24px #183c3010;border-radius:18px}
.cup-feature-top{display:flex;align-items:center;gap:18px;padding:24px;background:radial-gradient(ellipse at 100% 0%,#ffffff24,transparent 65%),linear-gradient(125deg,#15392e,#254e3d);color:#fff}
.cup-feature-copy{flex:1;min-width:0}
.cup-feature-copy .cup-eyebrow{color:#b9d0bb;font-size:9px}
.cup-feature-copy h2{font-size:30px;line-height:1.1;margin:9px 0;text-transform:none;color:#fff}
.cup-feature-copy p{font-size:13px;line-height:1.5;color:#d2dfd4;margin:0;max-width:400px}
.cup-podium{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#ffffff21,transparent 70%)}
.cup-podium .cup-art{width:130px;height:140px;filter:drop-shadow(0 8px 8px #0003)}
.cup-stats{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding:18px 22px;border-bottom:1px solid var(--line);background:#f5f8f2;gap:12px}
.cup-stats>div+div{border-left:1px solid var(--line);padding-left:16px}
.cup-stats span{display:block;font-size:9px;letter-spacing:1px;color:var(--dim);font-weight:700}
.cup-stats b{display:block;font-size:22px;color:var(--cup-deep);margin-top:3px;line-height:1.2}
.cup-stats small{font-size:11px;font-weight:500}
.cup-feature> .rounds,.cup-feature> .notice,.cup-feature>p,.cup-feature> .row,.cup-feature>h4,.cup-feature> .fixt,.cup-feature> .cup-rules{margin-left:20px;margin-right:20px}
#screen-cup .cup-feature> .rounds{margin-top:20px;gap:8px}
#screen-cup .cup-feature .rnd{border-radius:10px;padding:12px 5px;background:#f5f7f2;border:1px solid #e2e8dc}
#screen-cup .cup-feature .rnd.now{background:#fff7df;border-color:#e4bf65;box-shadow:inset 0 3px #e4bf65}
#screen-cup .cup-feature .rnd.won{background:#eaf4e9;border-color:#b9d6b9}
.cup-feature .rnd b{font-size:12px}
#screen-cup #cup-play{width:calc(100% - 40px);margin-left:20px;margin-right:20px;border-radius:10px;min-height:48px}
.cup-feature> .row{flex-wrap:wrap;gap:8px}
.cup-prize-note{line-height:1.5;margin-top:10px}
.cup-rules{font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding:14px 0;margin-top:16px}
.cup-rules summary{cursor:pointer;font-weight:700}
.cup-rules p{line-height:1.6;margin-top:8px}
.cup-section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:28px 0 14px}
.cup-section-heading h3{margin:5px 0 0;font-size:23px;text-transform:none}
.cup-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:24px}
.cup-tile{appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;font:inherit;color:var(--ink);background:#fff;border:1px solid #d2ddcf;border-radius:14px;padding:12px;cursor:pointer;box-shadow:0 3px 8px #183c3006;transition:transform .18s,box-shadow .18s,border-color .18s}
.cup-tile:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 7px 18px #183c3015;border-color:#8ca895}
.cup-tile:focus-visible{outline:3px solid #307455;outline-offset:3px}
.cup-tile[aria-pressed=true]{border-color:#39795b;box-shadow:0 0 0 1px #39795b;background:#f5faf3}
.cup-tile.is-locked{background:#f2f5ef}
.cup-tile:disabled{cursor:default}
.cup-tile-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:4px;font-size:10px;color:#647368;font-weight:700;letter-spacing:.7px}
.cup-status{font-size:8px;letter-spacing:.5px}
.is-won .cup-status{color:#297145}
.cup-tile-art{width:100%;display:flex;justify-content:center;background:radial-gradient(ellipse,var(--cup-colour),transparent 68%);background-size:90% 70%;background-position:center;background-repeat:no-repeat;margin:8px 0 4px}
.cup-tile-art .cup-art{filter:drop-shadow(0 4px 3px #17251c20)}
.is-locked .cup-tile-art{background-image:radial-gradient(ellipse,#e1e8de,transparent 68%)}
.is-locked .cup-art{filter:saturate(.6)}
.cup-tile-name{font-size:14px;line-height:1.2;min-height:34px;display:flex;align-items:center;justify-content:center}
.cup-tile-rating{font-size:11px;color:var(--dim);margin:5px 0 12px}
.cup-tile-prize{border-top:1px solid var(--line);padding-top:10px;width:100%;font-weight:800;font-size:14px;color:var(--cup-deep)}
.cup-tile-prize small{font-weight:400;font-size:10px;display:block;color:var(--dim)}
.cup-footer{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cup-footer .card{border-radius:14px;margin:0}
.cup-footer .cup-art{width:48px;height:54px}
@media(max-width:900px){.cup-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){.cup-heading h2{font-size:25px}.cup-collection>b{font-size:27px}.cup-heading{gap:12px}.cup-heading p{font-size:12px}.cup-feature-top{padding:20px 16px;gap:8px}.cup-feature-copy h2{font-size:26px}.cup-feature-copy p{font-size:12px}.cup-podium{width:85px;height:110px}.cup-podium .cup-art{width:90px;height:108px}.cup-stats{padding:16px;gap:8px}.cup-stats b{font-size:19px}.cup-stats>div+div{padding-left:10px}.cup-stats span{font-size:8px;letter-spacing:.5px}.cup-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cup-section-heading{align-items:start;flex-direction:column;gap:6px}.cup-footer{grid-template-columns:1fr}.cup-feature> .rounds,.cup-feature> .notice,.cup-feature>p,.cup-feature> .row,.cup-feature>h4,.cup-feature> .fixt,.cup-feature> .cup-rules{margin-left:14px;margin-right:14px}#screen-cup #cup-play{width:calc(100% - 28px);margin-left:14px;margin-right:14px}.cup-feature .rnd b{font-size:11px}}
@media(prefers-reduced-motion:reduce){.cup-tile{transition:none}.cup-tile:hover:not(:disabled){transform:none}}