.dd-save-puck {
--ddsp-red: #d71920;
--ddsp-red-dark: #8f0f14;
--ddsp-grey: #b8b8b8;
--ddsp-white: #ffffff;
--ddsp-gold: #f5c542;
--ddsp-silver: #cfd4dc;
--ddsp-bronze: #c98142;
--ddsp-border-red: rgba(215, 25, 32, 0.45);
box-sizing: border-box;
color: var(--ddsp-white);
font-family: Arial, Helvetica, sans-serif;
}
.dd-save-puck *,
.dd-save-puck *::before,
.dd-save-puck *::after {
box-sizing: border-box;
} .dd-save-puck .ddsp-page {
position: relative;
z-index: 1;
padding: 28px;
background:
radial-gradient(circle at 15% 12%, rgba(215, 25, 32, 0.42), transparent 30%),
radial-gradient(circle at 85% 88%, rgba(215, 25, 32, 0.22), transparent 34%),
linear-gradient(135deg, #030303 0%, #121212 52%, #050505 100%);
}
.dd-save-puck .ddsp-wrap {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.dd-save-puck .ddsp-game-section {
width: 100%;
} .dd-save-puck .ddsp-hero-card,
.dd-save-puck .ddsp-info-card,
.dd-save-puck .ddsp-game-card,
.dd-save-puck .ddsp-leaderboard-card,
.dd-save-puck .ddsp-achievement-card,
.dd-save-puck .ddsp-sponsor-card {
border: 1px solid var(--ddsp-border-red);
background:
linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.04)),
rgba(0,0,0,0.34);
box-shadow:
0 26px 90px rgba(0,0,0,0.48),
inset 0 1px 0 rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 28px;
} .dd-save-puck .ddsp-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 24px;
align-items: center;
margin-bottom: 26px;
}
.dd-save-puck .ddsp-hero-card {
padding: 32px;
overflow: hidden;
position: relative;
}
.dd-save-puck .ddsp-hero-card::after {
content: "GAME";
position: absolute;
right: -24px;
bottom: -42px;
font-size: 9rem;
font-weight: 900;
line-height: 1;
color: rgba(215,25,32,0.11);
letter-spacing: -0.08em;
pointer-events: none;
}
.dd-save-puck .ddsp-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
border-radius: 999px;
border: 1px solid rgba(215,25,32,0.55);
background: rgba(215,25,32,0.12);
color: #fff;
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dd-save-puck .ddsp-hero-title {
position: relative;
z-index: 1;
margin: 18px 0 12px;
max-width: 760px;
font-size: clamp(3rem, 7vw, 6.8rem);
line-height: 0.88;
letter-spacing: -0.06em;
text-transform: uppercase;
}
.dd-save-puck .ddsp-hero-title span {
color: var(--ddsp-red);
text-shadow: 0 0 25px rgba(215,25,32,0.34);
}
.dd-save-puck .ddsp-hero-text {
position: relative;
z-index: 1;
max-width: 670px;
margin: 0;
color: var(--ddsp-grey);
font-size: 1.08rem;
line-height: 1.65;
}
.dd-save-puck .ddsp-hero-actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
} .dd-save-puck .ddsp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 19px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.14);
font-family: inherit;
font-weight: 900;
text-decoration: none;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
font-size: 0.95rem;
}
.dd-save-puck .ddsp-btn:hover {
transform: translateY(-2px);
}
.dd-save-puck .ddsp-btn-primary {
background: linear-gradient(180deg, var(--ddsp-red), var(--ddsp-red-dark));
color: #fff;
box-shadow: 0 12px 35px rgba(215,25,32,0.24);
}
.dd-save-puck .ddsp-btn-secondary {
background: rgba(255,255,255,0.08);
color: #fff;
} .dd-save-puck .ddsp-info-card {
padding: 24px;
}
.dd-save-puck .ddsp-info-grid {
display: grid;
gap: 14px;
}
.dd-save-puck .ddsp-mini-stat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 17px;
border-radius: 20px;
background: rgba(255,255,255,0.075);
border: 1px solid rgba(255,255,255,0.1);
}
.dd-save-puck .ddsp-mini-stat span {
color: var(--ddsp-grey);
font-size: 0.86rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dd-save-puck .ddsp-mini-stat strong {
font-size: 1.55rem;
color: #fff;
} .dd-save-puck .ddsp-main-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 24px;
align-items: start;
} .dd-save-puck .ddsp-game-card {
padding: 20px;
}
.dd-save-puck .ddsp-game-top {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.dd-save-puck .ddsp-stat-box {
padding: 15px;
border-radius: 18px;
text-align: center;
background: rgba(255,255,255,0.075);
border: 1px solid rgba(255,255,255,0.1);
}
.dd-save-puck .ddsp-stat-box span {
display: block;
margin-bottom: 6px;
color: var(--ddsp-grey);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dd-save-puck .ddsp-stat-box strong {
font-size: 1.45rem;
color: #fff;
} .dd-save-puck .ddsp-rink {
position: relative;
min-height: 510px;
overflow: hidden;
border: 10px solid rgba(255,255,255,0.9);
background:
repeating-linear-gradient(
165deg,
rgba(0,0,0,0.055) 0,
rgba(0,0,0,0.055) 1px,
transparent 1px,
transparent 52px
),
linear-gradient(135deg, #f3fafc 0%, #dbe8ed 52%, #f4fafc 100%);
box-shadow: inset 0 0 50px rgba(0,0,0,0.16);
border-radius: 34px 34px 125px 125px;
touch-action: none;
}
.dd-save-puck .ddsp-rink::before {
content: "";
position: absolute;
inset: 14px;
border: 4px solid rgba(30,94,148,0.75);
border-radius: 24px 24px 105px 105px;
pointer-events: none;
z-index: 1;
}
.dd-save-puck .ddsp-rink.ddsp-save-flash {
animation: ddsp-rinkSaveFlash 0.34s ease-out;
}
@keyframes ddsp-rinkSaveFlash {
0% { filter: brightness(1); }
35% { filter: brightness(1.35); }
100% { filter: brightness(1); }
} .dd-save-puck .ddsp-blue-line {
position: absolute;
left: 14px;
right: 14px;
top: 27%;
height: 5px;
background: rgba(30,94,148,0.55);
z-index: 2;
}
.dd-save-puck .ddsp-top-arc {
position: absolute;
left: 50%;
top: -78px;
width: 170px;
height: 170px;
transform: translateX(-50%);
border: 4px solid rgba(30,94,148,0.32);
border-radius: 50%;
z-index: 2;
}
.dd-save-puck .ddsp-faceoff {
position: absolute;
width: 108px;
height: 108px;
border: 4px solid rgba(30,94,148,0.34);
border-radius: 50%;
top: 48%;
transform: translateY(-50%);
z-index: 2;
}
.dd-save-puck .ddsp-faceoff-left { left: 14%; }
.dd-save-puck .ddsp-faceoff-right { right: 14%; }
.dd-save-puck .ddsp-faceoff::before,
.dd-save-puck .ddsp-faceoff::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
background: rgba(215,25,32,0.7);
transform: translate(-50%, -50%);
border-radius: 999px;
}
.dd-save-puck .ddsp-faceoff::before {
width: 48px;
height: 4px;
}
.dd-save-puck .ddsp-faceoff::after {
width: 4px;
height: 48px;
}
.dd-save-puck .ddsp-faceoff-dot {
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--ddsp-red);
z-index: 2;
}
.dd-save-puck .ddsp-hash {
position: absolute;
width: 24px;
height: 3px;
background: rgba(215,25,32,0.5);
border-radius: 99px;
}
.dd-save-puck .ddsp-hash-h1 { left: -16px; top: 33px; }
.dd-save-puck .ddsp-hash-h2 { left: -16px; bottom: 33px; }
.dd-save-puck .ddsp-hash-h3 { right: -16px; top: 33px; }
.dd-save-puck .ddsp-hash-h4 { right: -16px; bottom: 33px; } .dd-save-puck .ddsp-ice-sponsor {
position: absolute;
left: 50%;
top: 48%;
width: min(420px, 72%);
min-height: 120px;
transform: translate(-50%, -50%) rotate(-2deg);
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 18px;
border-radius: 22px;
z-index: 2;
pointer-events: none;
opacity: 0.32;
filter: saturate(0.75) contrast(0.9) blur(0.15px);
mix-blend-mode: multiply;
}
.dd-save-puck .ddsp-ice-sponsor::before {
content: "";
position: absolute;
inset: -10px;
border-radius: 28px;
background:
linear-gradient(135deg, rgba(255,255,255,0.46), transparent 38%, rgba(255,255,255,0.22)),
repeating-linear-gradient(
165deg,
rgba(255,255,255,0.25) 0,
rgba(255,255,255,0.25) 1px,
transparent 1px,
transparent 18px
);
box-shadow:
inset 0 0 24px rgba(255,255,255,0.45),
0 0 28px rgba(255,255,255,0.18);
pointer-events: none;
}
.dd-save-puck .ddsp-ice-sponsor-mark,
.dd-save-puck .ddsp-ice-sponsor-copy {
position: relative;
z-index: 1;
}
.dd-save-puck .ddsp-ice-sponsor-mark {
width: 100%;
height: auto;
min-height: 90px;
display: grid;
place-items: center;
border-radius: 18px;
background:
radial-gradient(circle at 30% 25%, #ffffff, #9bc4d8 42%, #1d5e94 100%);
color: #062338;
font-size: 1.15rem;
font-weight: 900;
letter-spacing: -0.08em;
box-shadow: inset 0 0 0 3px rgba(255,255,255,0.55);
}
.dd-save-puck .ddsp-ice-sponsor-mark img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 18px;
}
.dd-save-puck .ddsp-ice-sponsor-copy {
text-align: left;
line-height: 1;
}
.dd-save-puck .ddsp-ice-sponsor-copy strong {
display: block;
color: #164a75;
font-size: clamp(1.1rem, 2vw, 1.65rem);
font-weight: 900;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.dd-save-puck .ddsp-ice-sponsor-copy span {
display: block;
margin-top: 5px;
color: #d71920;
font-size: clamp(0.72rem, 1vw, 0.9rem);
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
} .dd-save-puck .ddsp-crease {
position: absolute;
left: 50%;
bottom: 78px;
width: 280px;
height: 118px;
transform: translateX(-50%);
border: 4px solid rgba(30,94,148,0.4);
border-bottom: 0;
border-radius: 150px 150px 0 0;
background: rgba(30,94,148,0.11);
z-index: 2;
}
.dd-save-puck .ddsp-goal-line {
position: absolute;
left: 14px;
right: 14px;
bottom: 76px;
height: 5px;
background: rgba(215,25,32,0.75);
z-index: 2;
}
.dd-save-puck .ddsp-net {
position: absolute;
left: 50%;
bottom: 18px;
width: 220px;
height: 62px;
transform: translateX(-50%);
border: 5px solid rgba(215,25,32,0.95);
background:
linear-gradient(rgba(0,0,0,0.13) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.13) 1px, transparent 1px),
rgba(255,255,255,0.36);
background-size: 16px 16px;
box-shadow: 5px 8px 0 rgba(0,0,0,0.18);
z-index: 3;
} .dd-save-puck .ddsp-goalie {
position: absolute;
left: 50%;
bottom: 108px;
width: 150px;
height: 46px;
transform: translateX(-50%);
border-radius: 18px;
background: linear-gradient(180deg, #ff2a32, #9f0e14);
box-shadow: 0 16px 30px rgba(0,0,0,0.35);
z-index: 5;
display: grid;
place-items: center;
color: #fff;
font-weight: 900;
letter-spacing: 0.02em;
user-select: none;
font-size: 0.9rem;
}
.dd-save-puck .ddsp-goalie::before,
.dd-save-puck .ddsp-goalie::after {
content: "";
position: absolute;
top: 8px;
width: 34px;
height: 50px;
border-radius: 12px;
background: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,0.16);
}
.dd-save-puck .ddsp-goalie::before { left: -22px; }
.dd-save-puck .ddsp-goalie::after { right: -22px; }
.dd-save-puck .ddsp-stick {
position: absolute;
right: -76px;
bottom: -12px;
width: 82px;
height: 6px;
background: #222;
transform: rotate(28deg);
border-radius: 99px;
} .dd-save-puck .ddsp-puck {
position: absolute;
left: 50%;
top: 20%;
width: 30px;
height: 30px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, #525252, #050505 72%);
box-shadow: 8px 9px 0 rgba(0,0,0,0.18);
z-index: 6;
transform: translate(-50%, -50%);
}
.dd-save-puck .ddsp-puck.ddsp-is-hidden {
opacity: 0;
} .dd-save-puck .ddsp-puck-shard,
.dd-save-puck .ddsp-ice-chip {
position: absolute;
pointer-events: none;
z-index: 7;
transform: translate(-50%, -50%);
}
.dd-save-puck .ddsp-puck-shard {
width: 9px;
height: 9px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #5d5d5d, #050505 72%);
box-shadow: 2px 3px 0 rgba(0,0,0,0.18);
animation: ddsp-puckShardBurst 0.58s ease-out forwards;
}
.dd-save-puck .ddsp-ice-chip {
width: 6px;
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,0.92);
box-shadow: 0 0 7px rgba(255,255,255,0.45);
animation: ddsp-iceChipBurst 0.48s ease-out forwards;
}
@keyframes ddsp-puckShardBurst {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
100% {
opacity: 0;
transform:
translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
scale(0.36)
rotate(var(--rot));
}
}
@keyframes ddsp-iceChipBurst {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
100% {
opacity: 0;
transform:
translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
scale(0.5)
rotate(var(--rot));
}
} .dd-save-puck .ddsp-save-glow {
position: absolute;
inset: 0;
z-index: 7;
pointer-events: none;
background:
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(215,25,32,0.46), transparent 28%),
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255,255,255,0.42), transparent 14%);
animation: ddsp-saveGlowBurst 0.42s ease-out forwards;
}
@keyframes ddsp-saveGlowBurst {
0% { opacity: 0; transform: scale(0.9); }
30% { opacity: 1; }
100% { opacity: 0; transform: scale(1.08); }
}
@keyframes ddsp-slideUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
} .dd-save-puck .ddsp-overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
background: radial-gradient(circle, rgba(0,0,0,0.36), rgba(0,0,0,0.68));
z-index: 8;
}
.dd-save-puck .ddsp-overlay.ddsp-is-hidden {
display: none;
}
.dd-save-puck .ddsp-start-panel {
width: min(470px, 92%);
padding: 26px;
border-radius: 26px;
text-align: center;
border: 1px solid rgba(215,25,32,0.58);
background: rgba(0,0,0,0.68);
box-shadow: 0 22px 80px rgba(0,0,0,0.55);
}
.dd-save-puck .ddsp-start-panel h2 {
margin: 0 0 10px;
font-size: 2.2rem;
}
.dd-save-puck .ddsp-start-panel p {
margin: 0 0 20px;
color: var(--ddsp-grey);
line-height: 1.55;
} .dd-save-puck .ddsp-game-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 16px;
}
.dd-save-puck .ddsp-game-message {
margin: 0;
color: #fff;
font-weight: 900;
font-size: 1.05rem;
}
.dd-save-puck .ddsp-controls {
display: flex;
gap: 10px;
color: var(--ddsp-grey);
font-size: 0.95rem;
}
.dd-save-puck .ddsp-key {
display: inline-grid;
place-items: center;
min-width: 34px;
height: 30px;
padding: 0 9px;
border-radius: 9px;
background: rgba(255,255,255,0.14);
color: #fff;
font-weight: 900;
}
.dd-save-puck .ddsp-mobile-controls {
display: none;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.dd-save-puck .ddsp-mobile-controls button {
width: 88px;
min-height: 52px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 1.4rem;
font-weight: 900;
cursor: pointer;
} .dd-save-puck .ddsp-sidebar {
display: grid;
gap: 24px;
}
.dd-save-puck .ddsp-leaderboard-card,
.dd-save-puck .ddsp-achievement-card {
padding: 24px;
}
.dd-save-puck .ddsp-card-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.dd-save-puck .ddsp-card-title h2 {
margin: 0;
font-size: 1.8rem;
line-height: 1.1;
}
.dd-save-puck .ddsp-card-title p {
margin: 8px 0 0;
color: var(--ddsp-grey);
line-height: 1.45;
}
.dd-save-puck .ddsp-season-tag {
flex: 0 0 auto;
padding: 8px 11px;
border-radius: 999px;
color: #fff;
background: rgba(215,25,32,0.16);
border: 1px solid rgba(215,25,32,0.5);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
} .dd-save-puck .ddsp-tabs {
display: flex;
gap: 8px;
margin-bottom: 14px;
padding: 5px;
border-radius: 999px;
background: rgba(255,255,255,0.07);
}
.dd-save-puck .ddsp-tab {
flex: 1;
padding: 10px;
border-radius: 999px;
text-align: center;
font-size: 0.82rem;
font-weight: 900;
color: var(--ddsp-grey);
cursor: pointer;
border: none;
background: transparent;
font-family: inherit;
}
.dd-save-puck .ddsp-tab.ddsp-active {
background: linear-gradient(180deg, var(--ddsp-red), var(--ddsp-red-dark));
color: #fff;
} .dd-save-puck .ddsp-leader-list {
display: grid;
gap: 10px;
}
.dd-save-puck .ddsp-leader {
display: grid;
grid-template-columns: 42px 1fr auto;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 18px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.09);
}
.dd-save-puck .ddsp-rank {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 13px;
background: rgba(255,255,255,0.12);
font-weight: 900;
}
.dd-save-puck .ddsp-rank-gold {
background: rgba(245,197,66,0.18);
color: var(--ddsp-gold);
border: 1px solid rgba(245,197,66,0.4);
}
.dd-save-puck .ddsp-rank-silver {
background: rgba(207,212,220,0.16);
color: var(--ddsp-silver);
border: 1px solid rgba(207,212,220,0.36);
}
.dd-save-puck .ddsp-rank-bronze {
background: rgba(201,129,66,0.16);
color: var(--ddsp-bronze);
border: 1px solid rgba(201,129,66,0.36);
}
.dd-save-puck .ddsp-player strong {
display: block;
font-size: 0.98rem;
}
.dd-save-puck .ddsp-player span {
display: block;
margin-top: 3px;
color: var(--ddsp-grey);
font-size: 0.82rem;
}
.dd-save-puck .ddsp-score {
font-size: 1.2rem;
font-weight: 900;
color: #fff;
} .dd-save-puck .ddsp-badges {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.dd-save-puck .ddsp-badge-item {
padding: 14px;
border-radius: 18px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.09);
}
.dd-save-puck .ddsp-badge-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-bottom: 10px;
border-radius: 14px;
background: rgba(215,25,32,0.16);
border: 1px solid rgba(215,25,32,0.38);
font-size: 1.25rem;
}
.dd-save-puck .ddsp-badge-item strong {
display: block;
margin-bottom: 4px;
}
.dd-save-puck .ddsp-badge-item span {
color: var(--ddsp-grey);
font-size: 0.82rem;
line-height: 1.35;
} .dd-save-puck .ddsp-sponsor-card {
margin-top: 24px;
padding: 24px;
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
}
.dd-save-puck .ddsp-sponsor-card h2 {
margin: 0 0 8px;
font-size: 1.55rem;
}
.dd-save-puck .ddsp-sponsor-card p {
margin: 0;
color: var(--ddsp-grey);
line-height: 1.55;
}
.dd-save-puck .ddsp-sponsor-box {
width: 220px;
min-height: 90px;
display: grid;
place-items: center;
border-radius: 22px;
border: 1px dashed rgba(255,255,255,0.25);
background: rgba(255,255,255,0.06);
color: var(--ddsp-grey);
font-weight: 900;
text-align: center;
padding: 16px;
}
.dd-save-puck .ddsp-sponsor-box img {
max-width: 100%;
max-height: 70px;
object-fit: contain;
} @media (max-width: 1080px) {
.dd-save-puck .ddsp-hero,
.dd-save-puck .ddsp-main-grid {
grid-template-columns: 1fr;
}
.dd-save-puck .ddsp-sidebar {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 780px) {
.dd-save-puck .ddsp-page {
padding: 16px;
}
.dd-save-puck .ddsp-hero-card,
.dd-save-puck .ddsp-info-card,
.dd-save-puck .ddsp-game-card,
.dd-save-puck .ddsp-leaderboard-card,
.dd-save-puck .ddsp-achievement-card,
.dd-save-puck .ddsp-sponsor-card {
border-radius: 22px;
}
.dd-save-puck .ddsp-hero-card {
padding: 24px;
}
.dd-save-puck .ddsp-game-top {
grid-template-columns: repeat(2, 1fr);
}
.dd-save-puck .ddsp-rink {
min-height: 440px;
border-radius: 28px 28px 95px 95px;
}
.dd-save-puck .ddsp-rink::before {
border-radius: 20px 20px 78px 78px;
}
.dd-save-puck .ddsp-ice-sponsor {
width: min(320px, 64%);
min-height: 90px;
gap: 10px;
top: 48%;
}
.dd-save-puck .ddsp-ice-sponsor-mark {
min-height: 70px;
border-radius: 14px;
font-size: 0.95rem;
}
.dd-save-puck .ddsp-sidebar,
.dd-save-puck .ddsp-sponsor-card {
grid-template-columns: 1fr;
}
.dd-save-puck .ddsp-sponsor-box {
width: 100%;
}
.dd-save-puck .ddsp-badges {
grid-template-columns: 1fr;
}
.dd-save-puck .ddsp-mobile-controls {
display: flex;
}
}
@media (max-width: 520px) {
.dd-save-puck .ddsp-hero-title {
font-size: 3.4rem;
}
.dd-save-puck .ddsp-game-top {
grid-template-columns: 1fr;
}
.dd-save-puck .ddsp-leader {
grid-template-columns: 36px 1fr;
}
.dd-save-puck .ddsp-score {
grid-column: 2;
}
.dd-save-puck .ddsp-controls {
width: 100%;
justify-content: center;
}
.dd-save-puck .ddsp-game-footer {
justify-content: center;
text-align: center;
}
.dd-save-puck .ddsp-faceoff {
width: 84px;
height: 84px;
}
.dd-save-puck .ddsp-ice-sponsor {
width: min(260px, 76%);
opacity: 0.28;
}
.dd-save-puck .ddsp-ice-sponsor-copy strong {
font-size: 1rem;
}
.dd-save-puck .ddsp-ice-sponsor-copy span {
font-size: 0.65rem;
}
.dd-save-puck .ddsp-crease {
width: 220px;
}
.dd-save-puck .ddsp-net {
width: 170px;
}
} .dd-save-puck .ddsp-leaderboard-card--compact {
max-width: 520px;
margin: 0 auto;
}
.dd-save-puck .ddsp-sponsor-section--compact {
margin-top: 28px;
}
.dd-save-puck .ddsp-sponsor-strip {
padding: 18px;
border-radius: 22px;
border: 1px dashed rgba(255,255,255,0.18);
text-align: center;
background: rgba(255,255,255,0.04);
}
.dd-save-puck .ddsp-sponsor-placeholder {
color: var(--ddsp-grey);
font-weight: 600;
} .dd-save-puck .ddsp-404-hero {
padding: 64px 28px;
text-align: center;
}
.dd-save-puck .ddsp-404-content {
max-width: 620px;
margin: 0 auto;
}
.dd-save-puck .ddsp-404-title {
margin: 0 0 12px;
font-size: 3rem;
font-weight: 900;
letter-spacing: -0.03em;
color: #fff;
}
.dd-save-puck .ddsp-404-subtitle {
margin: 0 0 22px;
color: var(--ddsp-grey);
line-height: 1.6;
}
.dd-save-puck .ddsp-404-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
} .dd-save-puck .ddsp-login-card {
max-width: 520px;
margin: 48px auto;
padding: 36px;
border-radius: 26px;
text-align: center;
border: 1px solid var(--ddsp-border-red);
background:
linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.04)),
rgba(0,0,0,0.34);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 14px 50px rgba(0,0,0,0.35);
}
.dd-save-puck .ddsp-login-card h2 {
margin: 0 0 12px;
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.03em;
color: #fff;
}
.dd-save-puck .ddsp-login-card p {
margin: 0 0 22px;
color: var(--ddsp-grey);
line-height: 1.6;
}