cabinwandClaude Fable 5.1
e447d1f807
- 07 macaron, referenced from Meowdoku: cream worlds, a white tray with gutters, candy tokens with white arrows, two-column 关卡/待解 HUD, white elevated tool discs (macaron-only exception to the flat rule), full-screen dark result overlay, a brick ripple on board clear, an eased glide-out and dot-lattice dissolve on exit; Resource Han Rounded subset fonts (SIL OFL) in assets/fonts with the charset and regeneration note - 06 signpost: the design.md, tokens and preview directory that earlier commits left untracked - design docs, catalog, manifest, showcase and base spec updated to seven directions; the analysis and proposal live in docs/art-proposal-macaron.html - the renderer, app, geometry and CSS sources for both directions were already carried by the level commits made from this working tree Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
191 lines
24 KiB
CSS
191 lines
24 KiB
CSS
/* Flat gameplay items: solid fills, no shadows, bevels or highlights. */
|
|
.game-tool{--item-color:#7198D0;--item-edge:#FFFFFFB8;--item-radius:50%;--item-border:2px solid var(--item-edge);--item-size:64px}
|
|
.game-tool[data-tool=restart]{--item-color:#A28ACC;}
|
|
.game-tool[data-tool=hint]{--item-color:#EABB55;}
|
|
:is(.phone .phone-tools,body:not(.editing) .board-tools,.item-samples,.guide-tools) .game-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:80px;min-height:96px;margin:0;padding:4px 0;background:none;color:inherit;border:0;box-shadow:none;border-radius:18px;line-height:1.2}
|
|
:is(.phone .phone-tools,body:not(.editing) .board-tools,.item-samples,.guide-tools) .game-tool>.item-face{position:relative;isolation:isolate;display:grid;place-items:center;width:var(--item-size);height:var(--item-size);padding:16px;flex:none;border:0;border-radius:var(--item-radius);background:none;filter:none;overflow:visible}
|
|
.game-tool .item-face::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;border:var(--item-border);background:var(--item-color);box-shadow:none}
|
|
.game-tool .item-face>.ui-plate{display:none!important}
|
|
body:not(.editing) .game-tool .item-face>.ui-icon,.game-tool .item-face>.icon{width:32px;height:32px;margin:0;filter:var(--item-icon-filter,none)}
|
|
.game-tool[data-tool=hint]{--item-icon-filter:brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(1391%) hue-rotate(357deg) brightness(93%) contrast(90%)}
|
|
:is(.phone .phone-tools,body:not(.editing) .board-tools,.item-samples,.guide-tools) .game-tool>b{font-size:13px;font-weight:650;letter-spacing:.04em;line-height:1.3}
|
|
:is(.phone .phone-tools,body:not(.editing) .board-tools) .game-tool:disabled{opacity:.5;cursor:default}
|
|
.game-tool .item-face>.item-glyph{width:32px;height:32px}.game-tool .item-face>.art-icon{filter:var(--item-icon-filter,none)}
|
|
|
|
body[data-design=vivid] .game-tool{--item-color:#00BEEA;--item-border:3px solid #30264C;--item-radius:50%}
|
|
body[data-design=vivid] .game-tool[data-tool=restart]{--item-color:#F62A83;}
|
|
body[data-design=vivid] .game-tool[data-tool=hint]{--item-color:#FFCE19;}
|
|
body[data-design=toy] .game-tool{--item-color:#187DCE;--item-border:3px solid #FFF5D9;--item-radius:24px}
|
|
body[data-design=toy] .game-tool[data-tool=restart]{--item-color:#E8523D;}
|
|
body[data-design=toy] .game-tool[data-tool=hint]{--item-color:#F5C637;}
|
|
body[data-design=animals] .game-tool{--item-color:#79945B;--item-border:3px solid #FFF9DE;--item-radius:44% 44% 36% 36%}
|
|
body[data-design=animals] .game-tool[data-tool=restart]{--item-color:#C1804C;}
|
|
body[data-design=animals] .game-tool[data-tool=hint]{--item-color:#D4B647;}
|
|
body[data-design=animals] .game-tool .item-face::after{content:'';position:absolute;top:7px;left:17px;right:17px;height:4px;border-radius:50%;border-top:2px dotted #FFFFFF95;pointer-events:none}
|
|
|
|
/* Reserve real rows for rotations and items so the canvas is truly centered
|
|
between the notification area and controls, including on short screens. */
|
|
body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 76px 108px}
|
|
body:not(.editing) .rotation-controls{position:static;grid-row:2;grid-column:1/-1;display:flex;align-items:center;justify-content:space-around;padding:0 20px;gap:32px;pointer-events:auto}
|
|
body:not(.editing) .rotation-controls .rotate-button{min-height:68px;padding:0;gap:4px}
|
|
body:not(.editing) .rotate-button>.ui-icon{width:48px;height:48px}
|
|
body:not(.editing) .board-tools>.game-tool{grid-row:3;justify-self:center;width:100%}
|
|
.phone{grid-template-rows:44px 40px 64px minmax(0,1fr) 76px 108px}
|
|
.phone .rotations{position:static;grid-row:5;grid-column:1/-1;display:flex;align-items:center;justify-content:space-around;margin:0;padding:0 12px;gap:32px;pointer-events:auto}
|
|
.phone .rotations button{min-height:68px;padding:0;gap:4px}
|
|
.phone .rotations button>span{width:48px;height:48px}
|
|
.phone .phone-tools>.game-tool{grid-row:6;justify-self:center;width:100%}
|
|
@media(min-width:600px){.game-tool{--item-size:68px}body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 80px 116px}.phone{grid-template-rows:44px 40px 64px minmax(0,1fr) 80px 116px}}
|
|
@media(max-height:600px){
|
|
.phone .game-tool,body:not(.editing) .game-tool{--item-size:56px}
|
|
body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 62px 88px}
|
|
.phone{grid-template-rows:44px 40px 64px minmax(0,1fr) 62px 88px}
|
|
body:not(.editing) .rotation-controls .rotate-button,.phone .rotations button{min-height:58px}
|
|
body:not(.editing) .rotate-button>.ui-icon,.phone .rotations button>span{width:40px;height:40px}
|
|
:is(.phone .phone-tools,body:not(.editing) .board-tools) .game-tool{min-height:84px;gap:10px}
|
|
:is(.phone .phone-tools,body:not(.editing) .board-tools) .game-tool>.item-face{padding:12px}
|
|
}
|
|
|
|
/* Future inventory examples are documentation only; gameplay has no badges. */
|
|
.item-samples,.guide-tools{display:flex;justify-content:space-evenly;align-items:center;gap:16px;padding:16px 0 10px;text-align:center;color:var(--scene-ink,var(--ink,#273B50))}
|
|
.item-badge{position:absolute;right:-7px;top:-5px;z-index:2;display:grid;place-items:center;min-width:27px;height:27px;padding:0 7px;border:2px solid #FFFCF5;border-radius:14px;background:#334B60;color:white;font:750 12px/1 system-ui,sans-serif;box-shadow:none}
|
|
.item-badge.ad{right:-12px;min-width:42px;background:#5C478C;gap:3px;display:flex;align-items:center;justify-content:center;font-size:10px}
|
|
.item-badge.ad::before{content:'▶';font-size:8px}
|
|
.item-future{margin-top:28px;border-top:1px solid #273B5020;padding-top:24px}
|
|
.item-future h3{font-size:18px;margin:8px 0}.item-future p{font-size:12px;color:#56687A}
|
|
.item-future .item-samples{border-radius:20px;background:#E9EDE5;padding:22px 8px 16px;color:#273B50}
|
|
.item-spec{font-size:12px;line-height:1.9;color:#56687A}
|
|
.item-study{padding:44px 0;border-bottom:1px solid #273B5020;scroll-margin-top:80px}
|
|
.item-study-content{max-width:640px;margin:auto}.item-study-content>.item-samples{background:var(--scene-bg,#E9EDE5);border-radius:24px;padding:24px 12px 18px}
|
|
@media(max-width:380px){.item-samples,.guide-tools{gap:4px}.component-preview{padding:16px}.game-tool{min-width:72px}}
|
|
|
|
/* 06 路标 (signpost): controls recede into the paper; rotation hangs under the board. Values: design/directions/signpost/design.md */
|
|
body[data-design=signpost]{--signpost-rotate:#8AA1AD;--signpost-label:#5C7280;--signpost-plate:#9AAEB9;--signpost-plate-ink:#22354A;--signpost-hi:rgba(255,255,255,.6);--signpost-lo:rgba(34,53,74,.28)}
|
|
body[data-design=signpost][data-theme=apricot]{--signpost-rotate:#A79378;--signpost-label:#6B5A44;--signpost-plate:#BFA98A}
|
|
body[data-design=signpost][data-theme=lavender]{--signpost-rotate:#8E9F86;--signpost-label:#56664F;--signpost-plate:#A2B398}
|
|
body[data-design=signpost][data-theme=rose]{--signpost-rotate:#A58C89;--signpost-label:#6A5453;--signpost-plate:#BC9F9B}
|
|
body[data-design=signpost][data-theme=midnight]{--signpost-rotate:#4E6376;--signpost-label:#8FA3B4;--signpost-plate:#33465A;--signpost-plate-ink:#DCE5EE;--signpost-hi:rgba(255,255,255,.14);--signpost-lo:rgba(0,0,0,.55)}
|
|
/* White atlas icons are tinted through a mask (the CSS form of tinting a white sprite); mask geometry derives from ICONS in src/ui-skin.js. Shared by 06 signpost and 07 macaron. */
|
|
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])>.sprite-crop{-webkit-mask:url(../assets/ui-icons-generated.png) no-repeat;mask:url(../assets/ui-icons-generated.png) no-repeat;background:currentColor}
|
|
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])>.sprite-crop>img{visibility:hidden}
|
|
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=left]>.sprite-crop{-webkit-mask-size:540.517% 540.517%;mask-size:540.517% 540.517%;-webkit-mask-position:4.207% 36.008%;mask-position:4.207% 36.008%}
|
|
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=right]>.sprite-crop{-webkit-mask-size:552.423% 552.423%;mask-size:552.423% 552.423%;-webkit-mask-position:36.125% 37.196%;mask-position:36.125% 37.196%}
|
|
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=grid]>.sprite-crop{-webkit-mask-size:620.792% 620.792%;mask-size:620.792% 620.792%;-webkit-mask-position:35.361% 8.270%;mask-position:35.361% 8.270%}
|
|
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=gear]>.sprite-crop{-webkit-mask-size:547.598% 547.598%;mask-size:547.598% 547.598%;-webkit-mask-position:5.659% 6.829%;mask-position:5.659% 6.829%}
|
|
body:is([data-design=signpost],[data-design=macaron]) :is(.rotate-button>.ui-icon,.game-icon>.ui-icon,.rotations button>[data-icon],.icon-button[data-icon])[data-icon=close]>.sprite-crop{-webkit-mask-size:646.392% 646.392%;mask-size:646.392% 646.392%;-webkit-mask-position:94.245% 8.679%;mask-position:94.245% 8.679%}
|
|
body[data-design=signpost] .rotations button>[data-icon],body[data-design=signpost]:not(.editing) .rotate-button>.ui-icon{color:var(--signpost-rotate);filter:drop-shadow(0 1px 0 var(--signpost-hi)) drop-shadow(0 -1px 0 var(--signpost-lo))}
|
|
body[data-design=signpost]:not(.editing) .rotate-button b{color:var(--signpost-label)}
|
|
body[data-design=signpost]:not(.editing) .game-icon>.ui-icon{color:var(--signpost-plate-ink)}
|
|
body[data-design=signpost] .icon-button[data-icon]{color:var(--signpost-plate-ink);background:var(--signpost-plate);border:0;box-shadow:none;border-radius:12px}
|
|
body[data-design=signpost]:not(.editing) .game-icon>.ui-plate{background:var(--signpost-plate);border-radius:12px}
|
|
body[data-design=signpost]:not(.editing) .game-icon>.ui-plate .sprite-crop{display:none}
|
|
body[data-design=signpost]:not(.editing) .game-tool>b{color:var(--scene-ink,#273B50)}
|
|
/* Rotation belongs to the board: app.js sets --rot-x / --rot-x2 / --rot-y from the board geometry. */
|
|
body[data-design=signpost]:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 108px}
|
|
body[data-design=signpost]:not(.editing) .board-tools>.game-tool{grid-row:2}
|
|
body[data-design=signpost]:not(.editing) .rotation-controls{position:absolute;inset:0;grid-row:1/-1;grid-column:1/-1;display:block;padding:0;margin:0;pointer-events:none;z-index:3}
|
|
body[data-design=signpost]:not(.editing) .rotate-button{position:absolute;left:var(--rot-x,25%);top:var(--rot-y,82%);margin:-41px 0 0 -42px;width:84px;min-width:0;min-height:0;padding:0;gap:2px;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
|
|
body[data-design=signpost]:not(.editing) #rotate-right{left:var(--rot-x2,75%)}
|
|
body[data-design=signpost]:not(.editing) .rotate-button>.ui-icon{width:64px;height:64px}
|
|
body[data-design=signpost]:not(.editing) .rotate-button b{font-size:12px;letter-spacing:0}
|
|
|
|
/* 07 马卡龙 (macaron): cream world, white objects with soft elevation, mauve ink, one orange action. Values: design/directions/macaron/design.md */
|
|
/* Resource Han Rounded (SIL OFL), subset to the game's own characters; see assets/fonts/README.md. */
|
|
@font-face{font-family:'Resource Han Rounded';font-weight:500;font-display:swap;src:url(../assets/fonts/ResourceHanRoundedCN-Medium.subset.woff2) format('woff2')}
|
|
@font-face{font-family:'Resource Han Rounded';font-weight:700;font-display:swap;src:url(../assets/fonts/ResourceHanRoundedCN-Bold.subset.woff2) format('woff2')}
|
|
body[data-design=macaron]{--mac-ink:#7A5560;--mac-ink-strong:#5A3A44;--mac-muted:#A98590;--mac-rotate:#B4939C;--mac-card:#FFFFFF;--mac-elev:0 4px 14px rgba(110,70,82,.14);--mac-cta:#E07416;--mac-cta-edge:#B95C0C;--mac-scrim:rgba(62,46,53,.5);font-family:'Resource Han Rounded',ui-rounded,'Arial Rounded MT Bold','Nunito','PingFang SC','Microsoft YaHei',sans-serif}
|
|
body[data-design=macaron][data-theme=apricot]{--mac-ink:#7C4E52;--mac-rotate:#BC9A97}
|
|
body[data-design=macaron][data-theme=lavender]{--mac-ink:#5F4E78;--mac-rotate:#A79BC0}
|
|
body[data-design=macaron][data-theme=rose]{--mac-ink:#7B4658;--mac-rotate:#BE9AA6}
|
|
body[data-design=macaron][data-theme=midnight]{--mac-ink:#FBEFE6;--mac-ink-strong:#FBEFE6;--mac-muted:#C4A9B0;--mac-rotate:#9E8189;--mac-elev:0 6px 18px rgba(0,0,0,.35);--mac-scrim:rgba(20,12,16,.62)}
|
|
/* Top row: two white discs at the sides, two stat columns (关卡 / 待解) in the middle, the notice bubble on the row below. */
|
|
body[data-design=macaron]:not(.editing) .game-column{grid-template-rows:64px 64px minmax(0,1fr);grid-template-columns:1fr 1fr;column-gap:40px}
|
|
body[data-design=macaron]:not(.editing) .level-heading{grid-row:1;grid-column:1;justify-self:end;align-self:center;margin:0;padding:0}
|
|
body[data-design=macaron]:not(.editing) .hud{grid-row:1;grid-column:2;justify-self:start;align-self:center;margin:0;padding:0}
|
|
body[data-design=macaron]:not(.editing) .notice-slot{grid-row:2;grid-column:1/-1}
|
|
body[data-design=macaron]:not(.editing) .game-card{grid-row:3;grid-column:1/-1}
|
|
body[data-design=macaron]:not(.editing) .level-ribbon{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:26px;line-height:1;letter-spacing:0;color:var(--mac-ink-strong)}
|
|
body[data-design=macaron]:not(.editing) .level-ribbon small{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mac-muted)}
|
|
body[data-design=macaron]:not(.editing) .level-ribbon b{font-weight:800}
|
|
body[data-design=macaron]:not(.editing) .level-ribbon b i{font-style:normal;font-size:14px;font-weight:600;color:var(--mac-muted)}
|
|
body[data-design=macaron]:not(.editing) .moves-bubble{background:none;box-shadow:none;padding:0;height:auto;flex-direction:column;align-items:center;gap:3px;min-width:0;width:auto;transform-origin:center}
|
|
body[data-design=macaron]:not(.editing) .moves-bubble>span{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mac-muted);margin:0}
|
|
body[data-design=macaron]:not(.editing) .moves-bubble strong{font-size:26px;line-height:1;font-weight:800;color:var(--mac-ink-strong)}
|
|
body[data-design=macaron] .moves-bubble.pop{animation:mac-pill-pop .42s cubic-bezier(.34,1.56,.64,1)}
|
|
@keyframes mac-pill-pop{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
|
|
body[data-design=macaron]:not(.editing) .game-icon>.ui-plate{background:var(--mac-card);border-radius:50%;box-shadow:var(--mac-elev)}
|
|
body[data-design=macaron]:not(.editing) .game-icon>.ui-plate .sprite-crop{display:none}
|
|
body[data-design=macaron]:not(.editing) .game-icon>.ui-icon{color:#5A3A44}
|
|
body[data-design=macaron] .icon-button[data-icon]{color:#5A3A44;background:var(--mac-card);border:0;box-shadow:var(--mac-elev);border-radius:50%}
|
|
/* Notices are white speech bubbles with a tail towards the stats and an orange dot instead of the "i" badge. */
|
|
body[data-design=macaron] .game-notice{position:relative;background:var(--mac-card);color:#5A3A44;border:0;border-radius:16px;box-shadow:var(--mac-elev);font-weight:600}
|
|
body[data-design=macaron] .game-notice::before{content:'';flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--mac-cta)}
|
|
body[data-design=macaron] .game-notice::after{content:'';position:absolute;left:50%;top:-6px;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom:6px solid var(--mac-card)}
|
|
/* Rotation hangs under the tray like 06; plain ink-tinted sprites, no plate. */
|
|
body[data-design=macaron] .rotations button>[data-icon],body[data-design=macaron]:not(.editing) .rotate-button>.ui-icon{color:var(--mac-rotate)}
|
|
body[data-design=macaron]:not(.editing) .rotate-button b{color:var(--mac-ink)}
|
|
/* The canvas bleeds 8px into the shell padding on each side, so the exit dissolve has room without shrinking the board. */
|
|
body[data-design=macaron]:not(.editing) .canvas-wrap{margin-inline:-8px;width:calc(100% + 16px)}
|
|
body[data-design=macaron]:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 108px}
|
|
body[data-design=macaron]:not(.editing) .board-tools>.game-tool{grid-row:2}
|
|
body[data-design=macaron]:not(.editing) .rotation-controls{position:absolute;inset:0;grid-row:1/-1;grid-column:1/-1;display:block;padding:0;margin:0;pointer-events:none;z-index:3}
|
|
body[data-design=macaron]:not(.editing) .rotate-button{position:absolute;left:var(--rot-x,25%);top:var(--rot-y,82%);margin:-41px 0 0 -42px;width:84px;min-width:0;min-height:0;padding:0;gap:2px;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
|
|
body[data-design=macaron]:not(.editing) #rotate-right{left:var(--rot-x2,75%)}
|
|
body[data-design=macaron]:not(.editing) .rotate-button>.ui-icon{width:60px;height:60px}
|
|
body[data-design=macaron]:not(.editing) .rotate-button b{font-size:12px;letter-spacing:0}
|
|
/* Tools are the reference's white discs: soft elevation, a candy-coloured glyph tinted through the atlas mask, mauve labels. */
|
|
body[data-design=macaron] .game-tool{--item-color:var(--mac-card);--item-border:0;--item-radius:50%;--item-icon-filter:none}
|
|
body[data-design=macaron] .game-tool .item-face::before{box-shadow:var(--mac-elev)}
|
|
body[data-design=macaron] .game-tool .item-face{color:#4A91D4}
|
|
body[data-design=macaron] .game-tool[data-tool=restart] .item-face{color:#D06E93}
|
|
body[data-design=macaron] .game-tool[data-tool=hint] .item-face{color:#C98A0E}
|
|
body[data-design=macaron] .game-tool .item-face :is(.ui-icon>.sprite-crop,.art-icon){-webkit-mask:url(../assets/ui-icons-generated.png) no-repeat;mask:url(../assets/ui-icons-generated.png) no-repeat;background:currentColor;filter:none}
|
|
body[data-design=macaron] .game-tool .item-face :is(.ui-icon>.sprite-crop,.art-icon)>img{visibility:hidden}
|
|
body[data-design=macaron] .game-tool[data-tool=undo] .item-face :is(.ui-icon>.sprite-crop,.art-icon){-webkit-mask-size:577.880% 577.880%;mask-size:577.880% 577.880%;-webkit-mask-position:65.574% 38.380%;mask-position:65.574% 38.380%}
|
|
body[data-design=macaron] .game-tool[data-tool=restart] .item-face :is(.ui-icon>.sprite-crop,.art-icon){-webkit-mask-size:540.517% 540.517%;mask-size:540.517% 540.517%;-webkit-mask-position:95.890% 36.008%;mask-position:95.890% 36.008%}
|
|
body[data-design=macaron] .game-tool[data-tool=hint] .item-face :is(.ui-icon>.sprite-crop,.art-icon){-webkit-mask-size:533.617% 533.617%;mask-size:533.617% 533.617%;-webkit-mask-position:4.220% 66.045%;mask-position:4.220% 66.045%}
|
|
body[data-design=macaron]:not(.editing) .game-tool>b,body[data-design=macaron] .phone-tools .game-tool>b,body[data-design=macaron] .item-samples .game-tool>b{color:var(--mac-ink)}
|
|
:is(.phone .phone-tools,body[data-design=macaron]:not(.editing) .board-tools) .game-tool:disabled{opacity:.45}
|
|
/* Result screen: the reference's dark celebration. No card; cream glowing title on the scrim, rays and confetti behind the stars, one orange pill. */
|
|
/* Full-screen result: the dialog covers the viewport, so rays, confetti and text are never clipped by a card edge. */
|
|
body[data-design=macaron] .win-overlay{background:transparent!important;box-shadow:none;position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:24px 20px;border-radius:0;overflow:hidden}
|
|
body[data-design=macaron] .win-overlay[open]{display:flex;flex-direction:column;justify-content:center;align-items:center;animation:mac-veil .32s ease-out both}
|
|
@keyframes mac-veil{from{opacity:0}to{opacity:1}}
|
|
body[data-design=macaron] .win-overlay>.ui-plate{display:none!important}
|
|
body[data-design=macaron] .win-overlay::backdrop{background:rgba(40,26,32,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
|
|
body[data-design=macaron] .win-overlay .eyebrow{color:#C9AEB6}
|
|
body[data-design=macaron] .win-overlay h3{color:#FFF3E6;font-size:25px;letter-spacing:.01em;text-shadow:0 0 22px rgba(255,214,150,.55),0 2px 0 rgba(0,0,0,.25)}
|
|
body[data-design=macaron] .win-overlay p{color:#E9D2C4}
|
|
body[data-design=macaron] .win-overlay .text-button{color:#FBEFE6;background:rgba(255,255,255,.14)!important;border-radius:999px;min-height:44px;padding:10px 26px;margin-top:12px}
|
|
body[data-design=macaron] .win-overlay .text-button>.ui-plate{display:none!important}
|
|
body[data-design=macaron] .win-overlay .result-emblem{position:relative;isolation:isolate;overflow:visible;margin-bottom:6px}
|
|
body[data-design=macaron] .win-overlay[open] .result-emblem::before{content:'';position:absolute;left:50%;top:50%;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,200,96,.40) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 60%);mask:radial-gradient(circle,#000 10%,transparent 60%);animation:mac-rays 40s linear infinite;z-index:-1;pointer-events:none}
|
|
@keyframes mac-rays{to{transform:rotate(360deg)}}
|
|
body[data-design=macaron] .win-overlay[open] .result-emblem::after{content:'';position:absolute;left:50%;top:-6px;width:7px;height:11px;border-radius:2px;background:#EE5398;box-shadow:-84px 6px 0 #578BF0,-48px -12px 0 #F7C948,-120px 16px 0 #4C9E5A,36px -10px 0 #937DE4,72px 8px 0 #E5680C,112px -2px 0 #369C94,-18px 18px 0 #C56AC4,96px 24px 0 #D06E93,-140px -4px 0 #F7C948,140px 10px 0 #EE5398;animation:mac-confetti 1.6s .3s ease-out both;pointer-events:none;z-index:-1}
|
|
@keyframes mac-confetti{from{opacity:0;transform:translateY(-40px) rotate(0)}30%{opacity:1}to{opacity:0;transform:translateY(110px) rotate(200deg)}}
|
|
body[data-design=macaron] .primary{color:#FFFFFF;font-weight:800;font-size:16px;min-height:52px;padding:12px 30px}
|
|
body[data-design=macaron] .primary>.ui-plate{background:var(--mac-cta);border-radius:999px;box-shadow:0 4px 0 var(--mac-cta-edge);filter:none}
|
|
body[data-design=macaron] .primary>.ui-plate .sprite-crop{display:none}
|
|
/* Menus and the level map: a white card with a peach title band, like the reference's settings sheet. */
|
|
body[data-design=macaron] #info-dialog::backdrop{background:var(--mac-scrim)}
|
|
body[data-design=macaron] #info-dialog>.ui-plate{background:#FFFFFF;border-radius:28px}
|
|
body[data-design=macaron] #info-dialog>.ui-plate .sprite-crop{display:none}
|
|
body[data-design=macaron] #info-dialog>#dialog-content{margin:-32px -25px 0;padding:30px 25px 0;background:linear-gradient(#FBE6DA 0,#FBE6DA 104px,transparent 104px);border-radius:28px 28px 0 0}
|
|
body[data-design=macaron] #info-dialog>#dialog-content>.eyebrow{text-align:center;display:block}
|
|
body[data-design=macaron] #info-dialog>#dialog-content>h2{text-align:center;margin:8px 0 34px}
|
|
body[data-design=macaron] dialog h2{color:#5A3A44}
|
|
body[data-design=macaron] dialog p,body[data-design=macaron] dialog li,body[data-design=macaron] dialog .eyebrow{color:#8A6670}
|
|
body[data-design=macaron] #info-dialog[open]{animation:mac-pop .38s cubic-bezier(.34,1.56,.64,1) both}
|
|
@keyframes mac-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
|
|
body[data-design=macaron] .text-button{color:var(--mac-muted)}
|
|
body[data-design=macaron] .dialog-close.game-icon{z-index:2}
|
|
body[data-design=macaron] .dialog-close.game-icon>.ui-plate{background:#FFFFFF;border-radius:50%;box-shadow:0 2px 8px rgba(110,70,82,.16)}
|
|
body[data-design=macaron] .dialog-close.game-icon>.ui-plate .sprite-crop{display:none}
|
|
body[data-design=macaron] .dialog-close.game-icon>.ui-icon{color:#7A5560}
|
|
body[data-design=macaron] .level-btn>.ui-plate{background:#F7EFE8;border-radius:16px}
|
|
body[data-design=macaron] .level-btn.done>.ui-plate{background:#E4F3EA}
|
|
body[data-design=macaron] .level-btn.current>.ui-plate{background:var(--mac-cta)}
|
|
body[data-design=macaron] .level-btn>.ui-plate .sprite-crop{display:none}
|
|
body[data-design=macaron] .level-btn{color:#7A5560}
|
|
@media(prefers-reduced-motion:reduce){body[data-design=macaron] .moves-bubble.pop,body[data-design=macaron] .win-overlay[open] .result-emblem::before,body[data-design=macaron] .win-overlay[open] .result-emblem::after{animation:none}}
|