/* Tall black-neon chip, matching the current terrain choice slots. */
:is(#viewport,.difficulty-transition-cover).title-screen.difficulty-screen #overlay{padding:0;overflow:hidden;background:linear-gradient(180deg,#090d2c55,transparent 38%,#080d2866);backdrop-filter:none}
:is(#viewport,.difficulty-transition-cover).difficulty-screen .title-brand{top:3%;left:12%;right:12%;height:17%;display:grid;place-items:center}
:is(#viewport,.difficulty-transition-cover).difficulty-screen .title-brand img{max-height:100%;width:100%;object-fit:contain}
:is(#viewport,.difficulty-transition-cover).difficulty-screen .difficulty-panel{--chip-accent:#27c9ff;isolation:isolate;position:absolute;top:21%;left:50%;transform:translateX(-50%);width:min(292px,80%);box-sizing:border-box;padding:1px 15px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;color:#eafaff;background:conic-gradient(from var(--chip-angle),var(--chip-accent) 0deg,var(--chip-accent) 55deg,#ecfbff 78deg,var(--chip-accent) 100deg,#142435 160deg,var(--chip-accent) 260deg);animation:chip-edge-flow 4s linear infinite;clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,15px 100%,0 calc(100% - 15px))}
.difficulty-panel::before{content:'';position:absolute;inset:1px;z-index:-1;clip-path:inherit;background:radial-gradient(ellipse at 50% 26%,color-mix(in srgb,var(--chip-accent) 15%,transparent),transparent 60%),#080b10;box-shadow:inset 0 0 12px color-mix(in srgb,var(--chip-accent) 15%,transparent)}
.difficulty-panel::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:inherit;box-shadow:inset 0 -5px 12px color-mix(in srgb,var(--chip-accent) 28%,transparent)}
.difficulty-heading{width:calc(100% + 28px);padding:11px 14px;box-sizing:border-box;background:linear-gradient(110deg,transparent 32%,#ffffff55 48%,transparent 64%) 180% 0/240% 100%,var(--chip-accent);animation:chip-tab-flow 4s ease-in-out infinite;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-heading h2{color:#080b10;text-align:center;font-size:16px;letter-spacing:.1em;line-height:1.3;margin:0;text-shadow:none}
:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-heading h2::after{display:none}
.difficulty-disc{position:relative;flex-shrink:0;width:calc(clamp(100px,16vh,140px) * 5 / 3);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#10131d 0 2px,#303743 3px,#10131a 4px 6px);border:2px solid #4f5865;box-shadow:0 8px 18px #0006,inset 0 0 18px #000;display:grid;place-items:center;margin:2px 0 5px}
.difficulty-disc:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent,#c2deef28,transparent 25%,transparent 48%,#c2deef22,transparent 77%);pointer-events:none}
.disc-label{width:41%;height:41%;border-radius:50%;background:linear-gradient(135deg,#d6a968,#896347);border:3px solid #0e1420;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#1b2533;z-index:1}.disc-label small{font-size:5px;letter-spacing:.03em;white-space:nowrap}.disc-label b{font-size:26px;line-height:1.1}.disc-label i{width:6px;height:6px;border-radius:50%;background:#0e1420;border:1px solid #e4ca9b}
.difficulty-selector{display:flex;justify-content:space-between;align-items:center;width:100%;gap:7px}
.difficulty-selector button{width:29px;height:34px;flex:none;display:grid;place-items:center;padding:0 0 3px;border:1px solid #41839c;border-radius:0;background:#112733;color:#b9edff;font:26px/1 system-ui;clip-path:var(--cut)}
.difficulty-selector button:disabled{opacity:.3;cursor:default}
.difficulty-stars{display:flex;gap:3px;font-size:25px;line-height:1;color:#45505b}.difficulty-stars .lit{color:#ffd58a;text-shadow:0 0 12px #efb65344}
:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-progress{width:100%;padding:10px 0 0;box-sizing:border-box;border:0;border-top:1px solid #28404d;background:transparent;color:#bcd6e5}
.difficulty-progress strong{color:#bcd6e5;font-size:12px;font-weight:600}
.difficulty-progress-meter{position:relative;height:24px;margin-top:7px;background:#1c303c;overflow:hidden}
.difficulty-progress-meter i{display:block;height:100%;background:linear-gradient(90deg,#2483af,#57d7ff)}
.difficulty-progress-meter b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:#f1fbff;text-shadow:0 1px 3px #07111f,0 0 3px #07111f}
:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-description{min-height:44px;margin:0;padding-top:10px;border-top:1px solid #28404d;box-sizing:border-box;line-height:1.8;font-size:12px;text-align:left;color:#c3d1de;width:100%}
.difficulty-income{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 0;border-top:1px solid #28404d;font-size:11px;color:#a9bacb}.difficulty-income b{font-size:20px;color:#ffda95}
:is(#viewport,.difficulty-transition-cover).title-screen #overlay .difficulty-panel #start{display:flex;justify-content:center;text-align:center;width:100%;min-width:0;margin:0;padding:11px 14px;font-size:17px}
:is(#viewport,.difficulty-transition-cover).title-screen #overlay .difficulty-panel #start:disabled{background:#183044;border-color:#3b5468;color:#91aabd;cursor:default;letter-spacing:0}
:is(#viewport,.difficulty-transition-cover).difficulty-screen .skill-entry{bottom:5.5%;z-index:1}
:is(#viewport,.difficulty-transition-cover).difficulty-screen #title-rain-glass{z-index:0}
@media(max-height:680px){
 :is(#viewport,.difficulty-transition-cover).difficulty-screen .title-brand{top:2%;height:15%;left:17%;right:17%}
 :is(#viewport,.difficulty-transition-cover).difficulty-screen .difficulty-panel{top:18%;width:min(246px,79%);padding:1px 12px 10px;gap:4px}
 .difficulty-heading{width:calc(100% + 22px);padding:7px 12px}:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-heading h2{font-size:14px}
 .difficulty-disc{width:calc(76px * 5 / 3);margin:0}.disc-label b{font-size:20px}.disc-label small{font-size:4px}
 .difficulty-stars{font-size:22px;gap:2px}.difficulty-selector{gap:5px}.difficulty-selector button{width:26px;height:28px;font-size:23px}
 :is(#viewport,.difficulty-transition-cover) #overlay .difficulty-progress{padding:7px 0 0}.difficulty-progress-meter{height:21px;margin-top:5px}
 :is(#viewport,.difficulty-transition-cover) #overlay .difficulty-description{font-size:11px;min-height:40px;line-height:1.65;padding-top:7px}
 .difficulty-income{padding:5px 0}.difficulty-income b{font-size:18px}
 :is(#viewport,.difficulty-transition-cover).title-screen #overlay .difficulty-panel #start{padding:8px 10px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){:is(#viewport,.difficulty-transition-cover) .difficulty-panel,.difficulty-heading{animation:none}}

/* Album art and the stepped neon edge share a single gradient zone. */
.difficulty-disc-zone{position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:center;width:calc(100% + 28px);margin:-8px -14px 0;padding:12px 0 27px;box-sizing:border-box;gap:8px;background:linear-gradient(155deg,var(--disc-top),var(--disc-bottom));clip-path:polygon(0 0,100% 0,100% 100%,37% 100%,31.3% calc(100% - 18px),0 calc(100% - 18px))}
.difficulty-disc-zone::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 20% 5%,#ffffff22,transparent 62%),linear-gradient(125deg,transparent 55%,#ffffff0a 55% 56%,transparent 56%)}
.difficulty-disc-zone .difficulty-disc{margin:0;box-sizing:content-box;border:1px solid #c6e2ed;box-shadow:0 10px 24px #070e3655,inset 0 0 12px #fff7;background:radial-gradient(circle,transparent 0 12%,#e9f5ffbb 12.5% 13%,#819aa9 13.5% 15%,#e4eef2aa 15.5% 18%,transparent 18.5% 64%,#edfbffcc 65%,#718caa 66%,#d7eaf5 67%,transparent 68%),conic-gradient(from calc(var(--disc-angle) + var(--disc-flow)),#dbe5f1 0deg,#83d2e0 38deg,#cda6f4 62deg,#e8d6a5 81deg,#f5ffff 100deg,#9bb6d2 151deg,#dbe7f2 180deg,#74d4d7 215deg,#c4abf4 242deg,#f7e9c6 265deg,#f6ffff 282deg,#96b0cd 332deg,#dbe5f1 360deg);mask-image:radial-gradient(circle,transparent 0 5%,#000 5.5%)}
.difficulty-disc-zone .difficulty-disc::before{inset:8%;border:1px solid #ffffff77;background:conic-gradient(from calc(var(--disc-angle) + var(--disc-flow)),transparent 0deg,var(--chip-accent) 23deg,transparent 48deg 180deg,var(--chip-accent) 206deg,transparent 232deg);opacity:.42}
.difficulty-disc-zone .disc-label{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;color:#213f58;text-shadow:none;display:block}
.difficulty-disc-zone .disc-label small{position:absolute;top:23%;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.2em;color:#234b68!important;font-weight:800}
.difficulty-disc-zone .disc-label b{position:absolute;bottom:12%;left:0;right:0;text-align:center;font-size:26px;line-height:1.1;letter-spacing:.05em}
.difficulty-disc-zone .disc-label i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;height:38%;border:1px solid #182331;background:radial-gradient(circle,transparent 0 24%,#11151d 25% 31%,#030508 32% 68%,#202632 70% 72%,#070a10 74%);border-radius:50%;box-shadow:0 0 0 1px #829dbb55,inset 0 0 5px #000}
:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-track{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.4;margin:0;color:#fff;font-size:14px;text-shadow:0 1px 4px #12245c}
:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-track small{color:#d8e7ff;font:9px monospace;letter-spacing:.1em}
.difficulty-track strong{font-weight:750;letter-spacing:.08em}
.difficulty-divider{position:absolute;bottom:0;left:0;width:100%;height:24px;overflow:visible;fill:none;stroke:#61ffef;stroke-width:2;filter:drop-shadow(0 0 4px #00ffeccc);pointer-events:none}
.difficulty-divider .divider-glow{stroke-width:7;opacity:.3}
.difficulty-selector{margin-top:2px}
@media(max-height:680px){
 .difficulty-disc-zone{width:calc(100% + 22px);margin:-4px -11px 0;padding:8px 0 24px;gap:5px}
 .difficulty-disc-zone .disc-label small{font-size:5px}.difficulty-disc-zone .disc-label b{font-size:20px}
 :is(#viewport,.difficulty-transition-cover) #overlay .difficulty-track{font-size:12px;gap:6px}.difficulty-divider{height:21px}
}

/* Glow lives outside the masked center hole; only the iridescence moves. */
@property --disc-flow{syntax:"<angle>";initial-value:0deg;inherits:true}
@keyframes disc-iridescence{from{--disc-flow:0deg}to{--disc-flow:360deg}}
.difficulty-disc-halo{position:relative;display:grid;place-items:center;flex:none;border-radius:50%;filter:drop-shadow(0 0 3px #dcffffcc) drop-shadow(0 0 9px var(--chip-accent)) drop-shadow(0 0 20px color-mix(in srgb,var(--chip-accent) 60%,transparent))}
.difficulty-disc-zone .difficulty-disc{animation:disc-iridescence 20s linear infinite}
@media(prefers-reduced-motion:reduce){.difficulty-disc-zone .difficulty-disc{animation:none;--disc-flow:0deg}}

/* One album card: title, disc and attached lower corner controls. */
.difficulty-media-card{align-self:center;width:calc(100% + 28px);display:flex;flex-direction:column;background:linear-gradient(155deg,var(--disc-top),var(--disc-bottom));border-bottom:1px solid var(--chip-accent);box-shadow:0 3px 10px color-mix(in srgb,var(--chip-accent) 30%,transparent)}
.difficulty-media-card .difficulty-heading{width:100%;clip-path:none;border-bottom:1px solid #ffffff44}
.difficulty-media-card .difficulty-disc-zone{width:100%;margin:0;padding-bottom:12px;background:transparent;clip-path:none}
.difficulty-media-card .difficulty-divider{display:none}
.difficulty-media-card .difficulty-selector{width:100%;gap:0;margin:0;min-height:42px;background:#080e1de6;border-top:1px solid var(--chip-accent)}
:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-media-card .difficulty-selector button{align-self:stretch;width:44px;height:auto;min-height:42px;margin:0;padding:0;border:1px solid var(--chip-accent);border-bottom:0;border-radius:0;clip-path:none;background:linear-gradient(180deg,color-mix(in srgb,var(--chip-accent) 35%,#102333),#0b1c2b);color:#ddffff;box-shadow:inset 0 0 12px color-mix(in srgb,var(--chip-accent) 30%,transparent);font-size:28px}
.difficulty-media-card .difficulty-selector button:first-child{border-left:0}
.difficulty-media-card .difficulty-selector button:last-child{border-right:0}
@media(max-height:680px){.difficulty-media-card{width:calc(100% + 22px)}.difficulty-media-card .difficulty-disc-zone{padding-bottom:8px}.difficulty-media-card .difficulty-selector{min-height:34px}:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-media-card .difficulty-selector button{width:36px;min-height:34px}}

/* The title shares the album surface; the launch action closes the card edge. */
.difficulty-media-card .difficulty-heading{background:transparent;border-bottom:0;animation:none}
:is(#viewport,.difficulty-transition-cover) #overlay .difficulty-media-card .difficulty-heading h2{color:#eafaff;text-shadow:0 1px 5px #071a45}
:is(#viewport,.difficulty-transition-cover).title-screen #overlay .difficulty-panel #start{align-self:center;width:calc(100% + 28px);margin:0 0 -13px;min-height:58px;border-radius:0;clip-path:none;border-left:0;border-right:0;border-bottom:0;padding-left:14px;padding-right:14px}
@media(max-height:680px){:is(#viewport,.difficulty-transition-cover).title-screen #overlay .difficulty-panel #start{width:calc(100% + 22px);margin-bottom:-9px;min-height:48px;padding-left:12px;padding-right:12px}}

.difficulty-media-card .difficulty-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
#overlay .difficulty-heading .delete-save{margin:0;padding:6px 8px;min-width:0;font-size:12px;line-height:1.2;letter-spacing:0;color:#ffd1d1;background:#28141f;border:1px solid #bc6e83}
.difficulty-play-icon{display:block;width:28px;height:28px;flex:none}