cabinw
e92cccba82
Restore v0.1 and v0.2 archives with separate progress, publish the curved v0.3 campaign, and document the original 24-level design with reproducible evidence. Refine board presentation and movement, and keep video lab tooling within its own directory.
118 lines
8.5 KiB
CSS
118 lines
8.5 KiB
CSS
/* Semantic role bindings. Layout remains in style.css; colors come from tokens.css. */
|
|
:root{color:var(--color-text-primary)}
|
|
body,.game-shell{background:var(--color-background)!important;color:var(--color-text-primary)}
|
|
button,input,select,dialog{color:var(--color-text-primary)}
|
|
.level-ribbon,.moves-bubble strong,h1,h2,h3,.win-overlay h3,.hud-pill strong{color:var(--color-text-primary)}
|
|
.moves-bubble>span,.level-heading h1,.board-instruction,.rotation-caption,.rotate-button,
|
|
.board-tools>button,.field,.section-label,.metric-row,.muted,.eyebrow,.editor-footnote,
|
|
.editor-footnote a,.editor-footnote a:visited,.selection-info,.editor-analysis p,.editor-analysis small,
|
|
.editor-analysis>div>span,.editor-footnote,.dialog-note,.win-overlay p,dialog p,dialog li,
|
|
.editor-panel .muted,.level-btn small,.tool-palette button,.directions button,.editor-rotation button,
|
|
.editor-actions button,.editor-board-tools button,.text-button,.return-editor,.hud-pill small,
|
|
.hud-pill>div>span{color:var(--color-text-secondary)}
|
|
.board-instruction{font-size:12px;line-height:1.5;min-height:20px}
|
|
.moves-bubble>span,.board-tools>button{font-size:12px}
|
|
.win-overlay p,dialog p,dialog li{font-size:13px;line-height:1.75}
|
|
.eyebrow{font-size:11px;letter-spacing:1px}
|
|
.level-btn small{font-size:10px}
|
|
[data-skin=secondary]{color:var(--color-text-primary)}
|
|
button[data-skin=primary],[data-skin=primary],.primary,.level-btn.current,.level-btn.current small,
|
|
.tool-palette button.active,.directions button.active{color:var(--color-on-primary)}
|
|
button[data-skin=utility],[data-skin=utility]{color:var(--color-on-utility)}
|
|
[data-skin=warning],.error{color:var(--color-warning)!important}
|
|
.ui-plate{filter:none!important;box-shadow:none!important}
|
|
.ui-icon img{filter:none!important;opacity:1!important}
|
|
.game-icon{width:44px;height:44px;flex-shrink:0}
|
|
.game-icon .ui-icon{width:28px;height:28px;margin:0;align-self:center}
|
|
.game-icon.help-trigger .ui-icon{width:30px;height:30px}
|
|
.tool-icon{width:56px;height:52px}
|
|
.tool-icon .ui-icon{width:28px;height:28px}
|
|
.rotate-button{color:var(--color-text-primary);min-width:92px;min-height:102px;gap:8px}
|
|
.rotate-button>.ui-icon{width:62px;height:62px;filter:drop-shadow(0 1px 1px var(--color-utility))}
|
|
.rotate-button b{font-size:13px}
|
|
.rotate-button.hinted{filter:none;animation:hint-bounce .7s infinite alternate}
|
|
.tool-icon small{color:var(--color-text-primary);font-size:9px;line-height:1.4;padding:3px 5px}
|
|
.result-emblem .ui-icon{width:54px;height:54px;filter:drop-shadow(0 1px 1px var(--color-reward))}
|
|
.level-btn .ui-icon{filter:drop-shadow(0 1px 1px var(--color-utility))}
|
|
button:hover:enabled{filter:none}
|
|
button:active:enabled{filter:brightness(.96);transform:scale(.94)}
|
|
button:disabled{opacity:.55;cursor:default}
|
|
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
|
|
.primary{min-height:48px;font-size:14px}
|
|
.text-button{min-height:44px;font-size:12px}
|
|
.level-btn{min-height:60px;font-size:18px}
|
|
.dialog-close{width:36px;height:36px}
|
|
.dialog-close .ui-icon{width:22px;height:22px}
|
|
#sound-toggle{min-height:44px;padding:10px 14px;font-size:13px;margin-bottom:12px}
|
|
.board-toast{font-size:12px;line-height:1.5}
|
|
@media(min-width:700px){.editing .tool-palette{position:relative}}
|
|
dialog::backdrop{background:var(--color-scrim);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
|
|
@media(max-height:700px){.rotate-button>.ui-icon{width:52px;height:52px}.rotate-button{min-height:88px}.board-instruction{font-size:11px}}
|
|
@media(prefers-reduced-motion:reduce){.rotate-button.hinted{animation:none}}
|
|
|
|
/* V2 scenes: environmental ink is independent of modal/utility ink. */
|
|
.level-ribbon,.moves-bubble strong,.moves-bubble>span,.board-instruction,.rotate-button,.board-tools>button,.theme-caption{color:var(--scene-ink,var(--color-text-primary))}
|
|
.theme-caption{grid-column:1;text-align:center;font-size:11px;letter-spacing:1px;margin-top:8px}
|
|
.swatches{grid-template-columns:repeat(4,1fr);padding:0;gap:7px}
|
|
.swatches button{min-height:36px}
|
|
.pigment-swatch>.ui-plate{background:var(--pigment)}
|
|
.pigment-swatch>.ui-plate>.sprite-crop{display:none}
|
|
.canvas-wrap{overflow:visible}
|
|
@media(max-height:700px){.canvas-wrap{width:min(100%,max(270px,calc(100dvh - 380px)))}}
|
|
.canvas-wrap{overflow:hidden}.board-zoom{display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 0;position:relative;z-index:2;color:var(--scene-ink,var(--color-text-primary))}.canvas-wrap{aspect-ratio:auto}.canvas-wrap canvas{aspect-ratio:1;height:auto}.board-zoom button{min-width:38px;min-height:36px;font-size:13px}.board-zoom span{font-size:10px}
|
|
/* Board-first play screen: HUD, a tall viewport, one compact action row. */
|
|
.board-zoom{display:none!important}
|
|
body:not(.editing) .game-shell{height:100dvh;min-height:0;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
|
|
body:not(.editing) .workspace,body:not(.editing) .game-column{height:100%;min-height:0}
|
|
body:not(.editing) .game-column{display:grid;grid-template-rows:52px minmax(0,1fr);gap:0}
|
|
body:not(.editing) .level-heading,body:not(.editing) .theme-caption,body:not(.editing) .board-instruction{display:none}
|
|
body:not(.editing) .hud{grid-row:1;margin:0;padding:0}
|
|
body:not(.editing) .moves-bubble{height:48px;display:flex;flex-direction:row;gap:8px}
|
|
body:not(.editing) .moves-bubble strong{font-size:28px}
|
|
body:not(.editing) .game-top{top:10px;left:14px;right:14px}
|
|
body:not(.editing) .game-card{grid-row:2;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:minmax(0,1fr) 64px;gap:0}
|
|
body:not(.editing) .canvas-wrap{grid-column:1/-1;grid-row:1;width:100%;height:100%;min-height:0;margin:0;aspect-ratio:auto}
|
|
body:not(.editing) .canvas-wrap canvas{width:100%;height:100%;aspect-ratio:auto}
|
|
body:not(.editing) .rotation-controls,body:not(.editing) .board-tools{display:contents}
|
|
body:not(.editing) .rotate-button,body:not(.editing) .board-tools>button{grid-row:2;min-width:0;min-height:44px;padding:6px 0 0;margin:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
|
|
body:not(.editing) .rotate-button>.ui-icon{width:34px;height:34px}
|
|
body:not(.editing) .rotate-button b,body:not(.editing) .board-tools b{font-size:11px;letter-spacing:0}
|
|
body:not(.editing) .tool-icon{width:40px;height:36px}
|
|
body:not(.editing) .tool-icon .ui-icon{width:24px;height:24px}
|
|
body:not(.editing) .tool-icon small{display:none}
|
|
body:not(.editing) .return-editor{position:absolute;top:12px;right:12px;margin:0;z-index:4}
|
|
@media(min-width:700px){body:not(.editing) .game-shell{height:calc(100dvh - 30px)}}
|
|
/* Restore navigation and float rotation controls over the tall board. */
|
|
body:not(.editing) .game-column{grid-template-rows:44px 44px minmax(0,1fr)}
|
|
body:not(.editing) .level-heading{display:block;grid-row:1;align-self:center;margin:0;padding:0 60px}
|
|
body:not(.editing) .level-ribbon{font-size:24px}
|
|
body:not(.editing) .hud{grid-row:2}
|
|
body:not(.editing) .moves-bubble{height:40px}
|
|
body:not(.editing) .game-card{grid-row:3;grid-template-columns:repeat(3,1fr);position:relative}
|
|
body:not(.editing) .rotation-controls{display:flex;position:absolute;left:0;right:0;bottom:76px;justify-content:space-around;margin:0;padding:0 24px;gap:50px;z-index:3;pointer-events:none}
|
|
body:not(.editing) .rotate-button{pointer-events:auto;min-width:80px;min-height:84px;gap:7px;padding:4px}
|
|
body:not(.editing) .rotate-button>.ui-icon{width:58px;height:58px}
|
|
body:not(.editing) .rotate-button b{font-size:13px}
|
|
|
|
/* Expanded foldables, tablets and desktop windows share a height-aware stage. */
|
|
@media(min-width:600px){
|
|
body:not(.editing){padding:16px}
|
|
body:not(.editing) .game-shell{width:min(100%,960px,calc(100dvh + 80px));height:calc(100dvh - 32px);max-height:1200px;padding:12px 20px 16px;margin:auto}
|
|
body:not(.editing) .game-column{grid-template-rows:48px 44px minmax(0,1fr)}
|
|
body:not(.editing) .game-top{top:14px;left:28px;right:28px}
|
|
body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 72px}
|
|
body:not(.editing) .rotation-controls{bottom:88px;left:4%;right:4%;justify-content:space-between}
|
|
body:not(.editing) .board-tools>button{justify-self:center;width:96px}
|
|
body:not(.editing) .level-ribbon{font-size:28px}
|
|
}
|
|
@media(min-width:600px) and (max-height:600px){
|
|
body:not(.editing){padding:6px}
|
|
body:not(.editing) .game-shell{height:calc(100dvh - 12px);padding:4px 12px}
|
|
body:not(.editing) .game-column{grid-template-rows:40px 32px minmax(0,1fr)}
|
|
body:not(.editing) .game-top{top:4px}
|
|
body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 56px}
|
|
body:not(.editing) .rotation-controls{bottom:66px;left:0;right:0}
|
|
body:not(.editing) .rotate-button>.ui-icon{width:46px;height:46px}
|
|
}
|
|
body:not(.editing) .game-card{align-self:stretch}
|