Files
HexTrails/style.css
T

99 lines
21 KiB
CSS

:root{font-family:'Arial Rounded MT Bold','Nunito','PingFang SC','Microsoft YaHei',sans-serif;color:#414877;font-synthesis:none;--purple:#8772ed;--line:#d4d9f0;--muted:#8c94b3}*{box-sizing:border-box}body{margin:0;min-height:100dvh}button,input,select{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s,filter .12s}button:hover:enabled{filter:brightness(1.05)}button:active:enabled{transform:translateY(3px)}button:disabled{opacity:.38;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffc64d;outline-offset:3px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.game-shell{position:relative;width:min(100%,440px);margin:0 auto;min-height:100dvh;padding:6px 17px 0;isolation:isolate;}.game-top{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.game-icon{width:43px;height:43px;display:grid;place-items:center;color:#8391b7}.game-logo{position:relative;width:144px;height:96px;overflow:hidden}.game-logo img{width:144px;height:144px;position:absolute;top:-22px;left:0}.workspace{display:block}.level-heading{text-align:center;position:relative;margin:2px 0 13px}.level-ribbon{font-weight:900;font-size:24px;letter-spacing:1px;color:#444d86;}.level-heading h1{font-size:12px;font-weight:600;margin:4px 0;color:#8d96b9;letter-spacing:1px}.difficulty-pill{font-size:9px;position:absolute;right:0;top:3px;display:flex;gap:4px;padding:6px 7px;color:#8c92b4}.hud{display:flex;justify-content:space-between;align-items:center;padding:0 8px;margin-bottom:1px;gap:14px}.hud-pill{display:flex;align-items:center;gap:9px;min-width:97px;padding:9px 11px;}.hud-symbol{font-size:25px;color:#69bcea;}.hud-pill>div>span{display:block;font-size:8px;color:#929bb8;margin-bottom:2px}.hud-pill strong{font-size:18px;font-weight:800;line-height:1.2;color:#566188}.hud-pill small{font-size:10px;color:#99a3bf}.turn-counter .hud-symbol{color:#9b85ea;font-size:30px}.turn-counter{min-width:105px}.moves-bubble{width:87px;height:79px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;position:relative;z-index:2}.moves-bubble>span{font-size:9px;font-weight:600;color:#8a9fc0;margin:0 0 3px}.moves-bubble strong{font-size:33px;line-height:1;font-weight:900;color:#5c75b1;}.game-card{position:relative}.canvas-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;margin-top:3px}.canvas-wrap:before{content:'';position:absolute;inset:16px 7px 14px;z-index:-1}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}.board-toast{position:absolute;bottom:12px;left:50%;transform:translate(-50%,5px);color:white;padding:9px 12px;font-size:10px;opacity:0;pointer-events:none;transition:.2s;text-align:center;width:max-content;max-width:93%;z-index:4}.board-toast.visible{opacity:1;transform:translate(-50%,0)}.board-instruction{font-size:10px;font-weight:600;color:#8792b6;display:flex;justify-content:center;align-items:center;gap:5px;margin:1px 0 13px;min-height:18px;text-align:center;line-height:1.5}.pulse-dot{width:4px;height:4px;}.rotation-controls{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:9px;padding:0 11px}.rotate-button{display:flex;align-items:center;justify-content:center;gap:7px;position:relative;min-height:54px;color:white;}.rotate-button>span{font-size:32px;line-height:1}.rotate-button b{font-size:16px;letter-spacing:1px}.rotate-button small{position:absolute;bottom:-14px;font-size:8px;padding:2px 6px;color:#9a8cc0;}.rotation-caption{text-align:center;transform:rotate(-7deg)}.rotation-caption b{display:block;color:#9279bf;font-size:14px}.rotation-caption span{display:block;color:#b0a0c4;font-size:10px;margin-top:2px}.rotate-button.hinted{outline:4px solid #ffd667;outline-offset:3px;animation:hint-bounce .7s infinite alternate}.board-tools{display:flex;justify-content:center;gap:39px;padding:27px 0 18px}.board-tools>button{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:61px;font-size:10px;color:#7986a9}.tool-icon{position:relative;width:57px;height:52px;display:grid;place-items:center;color:white;}.tool-icon svg{width:27px;height:27px;stroke-width:2.6;filter:drop-shadow(0 2px 0 #0002)}.tool-icon.blue{--shade:#328fc6}.tool-icon.pink{--shade:#b96391}.tool-icon.gold{--shade:#d2942b}.tool-icon small{position:absolute;right:-9px;top:-10px;padding:2px 4px;font-size:7px;}.game-bottom{display:flex;align-items:center;justify-content:space-between;padding:10px 21px max(13px,env(safe-area-inset-bottom));margin:0 -3px;color:#8d99bb}.game-bottom>button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;min-width:58px;min-height:43px;}.game-bottom>button.active{color:#638ac6}.game-bottom svg{height:24px;width:24px}.journey-badge{font-size:19px;color:#f0b950;display:flex;align-items:center;gap:7px;position:relative;padding-bottom:9px;}.journey-badge b{font-size:12px;color:#8b97b6}.journey-badge small{position:absolute;bottom:-3px;left:24px;color:#a6b1ca;font-size:7px}.return-editor{display:block;margin:3px auto 14px;font-size:11px;padding:11px 18px}.win-overlay{position:absolute;inset:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px;z-index:5}.result-emblem{font-size:57px;color:#ffbf3e;}.win-overlay .eyebrow{font-size:8px;color:#a4afd1;letter-spacing:1px;margin:9px 0}.win-overlay h3{font-size:24px;margin:5px 0;color:#5e70a9}.win-overlay p{font-size:11px;line-height:1.8;color:#939fbf;margin:10px 0}.primary{color:white;padding:12px 23px;min-height:45px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px}.win-overlay .primary{margin-top:7px}.text-button{font-size:10px;color:#99a6c5;padding:14px}.win-overlay .text-button{margin-top:8px}dialog{max-width:425px;width:calc(100% - 32px);max-height:85dvh;color:#566490;padding:32px 25px;}dialog::backdrop{backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:12px;top:12px;width:34px;height:34px;}.eyebrow{font-size:9px;color:#9ca8c9;letter-spacing:1px;font-weight:700}h2{font-size:23px;margin:11px 0 19px}dialog p,dialog li{font-size:11px;line-height:1.9;color:#8d9abb}dialog ul{padding-left:18px}.dialog-note{padding:12px;}.level-dialog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 10px}.level-btn{height:60px;color:#7a8fbf;font-size:17px;font-weight:800}.level-btn.current{color:white;}.level-btn small{display:block;font-size:7px;font-weight:500;margin-top:4px}.metric-row{display:grid;grid-template-columns:65px 1fr 32px;gap:10px;align-items:center;font-size:9px;color:#95a1c0;margin:10px 0}.metric-track{height:6px;overflow:hidden}.metric-track i{display:block;height:100%;}.metric-row:nth-child(2) i{}.metric-row:nth-child(3) i{}.metric-row:nth-child(4) i{}.metric-row:nth-child(5) i{}.editor-panel{margin:18px 0;padding:20px;}.editor-panel h3{margin:8px 0;font-size:18px}.muted{color:#9ba7c5;font-size:10px;line-height:1.7}.field{display:flex;flex-direction:column;gap:7px;font-size:10px;color:#8d9abb;margin:13px 0}.field input,.field select{min-height:40px;width:100%;color:#627198;padding:9px;font-size:13px}.field-row{display:flex;gap:11px}.field-row>*{flex:1;min-width:0}.section-label{font-size:10px;color:#8e9ab9;margin:13px 0 9px}.tool-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.tool-palette button{height:57px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:21px}.tool-palette span{font-size:8px}.tool-palette button.active{color:white;}.directions{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.directions button{height:35px;font-size:18px}.directions button.active{color:white}.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:2px 5px}.swatches button{height:30px;}.swatches button.active{outline:2px solid #8b78cf}.selection-info{font-size:9px;padding:10px;color:#98a4c2}.editor-analysis{padding:13px}.editor-analysis>div:first-child{display:flex;align-items:center;justify-content:space-between}.editor-analysis>div>span{font-size:11px;color:#708ec0}.editor-analysis strong{font-size:25px}.editor-analysis small{font-size:10px;color:#9daacd}.editor-analysis p{font-size:9px;line-height:1.8;color:#8e9ec0}.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:11px 8px;margin-top:17px}.editor-actions button{min-height:41px;font-size:10px}.editor-footnote{font-size:9px;line-height:1.7;color:#a7b2cc}.editor-board-tools{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:20px 7px}.editor-board-tools button{font-size:11px}.error{color:#d37a8e!important}.editing .rotation-controls{display:none}.editing .game-bottom{margin-top:15px}.hint-banner{}.hinted{animation:hint-bounce .6s infinite alternate}@keyframes hint-bounce{to{transform:translateY(-3px)}}
@media(min-width:700px){body{padding:15px}.game-shell{min-height:calc(100dvh - 30px);overflow:hidden;}.editing .game-shell{width:900px}.editing .workspace{display:grid;grid-template-columns:1fr 340px;gap:30px;padding:0 16px}.editing .game-top{max-width:415px}.editing .editor-panel{margin-top:0}.editing .game-column{min-width:0}.editing .game-bottom{justify-content:center;gap:75px}.editing .game-shell{background-size:cover}.editing .level-heading .difficulty-pill{font-size:8px}}
@media(max-width:380px){.game-shell{padding:3px 12px 0}.game-top{height:82px}.game-logo{height:82px}.game-logo img{top:-26px}.level-heading{margin-bottom:9px}.hud{gap:8px}.hud-pill{min-width:87px;padding:8px}.moves-bubble{width:77px;height:70px}.turn-counter{min-width:92px}.rotation-controls{padding:0 6px;grid-template-columns:1fr 49px 1fr}.rotate-button{min-height:49px}.board-tools{padding-top:25px;padding-bottom:12px}.game-bottom{padding-top:8px}}
@media(max-height:780px) and (max-width:699px){.game-top{height:74px}.game-logo{height:74px}.game-logo img{top:-30px}.level-heading{margin-bottom:8px}.level-ribbon{font-size:21px}.moves-bubble{height:64px;width:74px;}.moves-bubble strong{font-size:28px}.canvas-wrap{width:min(100%,calc(100dvh - 386px));margin:4px auto 0}.board-tools{padding:22px 0 13px}.tool-icon{width:51px;height:45px}.rotation-controls{padding:0 12px}.rotate-button{min-height:46px}.game-bottom{padding-top:8px}}
@media(max-width:699px){body.editing{padding-bottom:83px}.editing .tool-palette{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:10px;right:10px;z-index:12;grid-template-columns:repeat(6,1fr);gap:4px;padding:7px;}.editing .tool-palette button{height:45px;font-size:18px}.editing .tool-palette span{font-size:7px}.field input,.field select{font-size:16px}.editor-panel{scroll-margin-top:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(min-width:381px) and (max-width:699px){.game-top{height:82px}.game-logo{height:82px}.game-logo img{top:-26px}.moves-bubble{height:72px}.board-tools{padding:23px 0 16px}.canvas-wrap{width:min(100%,max(310px,calc(100dvh - 499px)));margin:4px auto 0}}
@media(min-width:381px) and (max-width:699px){.game-logo img{width:120px;height:120px;top:-18px;left:12px}.game-bottom{color:#657cac}}
.editor-rotation{display:flex;gap:9px;margin:8px 0 15px}.editor-rotation button{flex:1;padding:10px 4px;color:#7f6eb8;font-size:11px;}
@media(min-width:700px){.editing .game-shell{width:min(100%,900px)}}
@media(min-width:700px) and (max-width:800px){.editing .game-shell{width:500px;max-width:100%}.editing .workspace{display:block;padding:0}.editing .game-top{max-width:none}.editing .game-bottom{gap:0;justify-content:space-between}}
/* Image-only skins. CSS controls layout; every visible surface is a PNG SpriteFrame. */
body{background:#d8ddf9 url('assets/background-candy-v2.png') center/cover fixed}button,input,select,dialog{border:0;background:transparent}button{padding:4px 8px}.game-shell{background:url('assets/background-candy-v2.png') center/cover}.canvas-wrap:before{inset:0;background:url('assets/board-tray.png') center/100% 100% no-repeat}
[data-skin]{position:relative;isolation:isolate;background:none!important;box-shadow:none!important;border:0!important}.ui-plate{position:absolute;inset:0;display:grid;grid-template-columns:var(--cap,15px) minmax(0,1fr) var(--cap,15px);grid-template-rows:var(--cap,15px) minmax(0,1fr) var(--cap,15px);z-index:-1;pointer-events:none}.sprite-crop{position:relative;display:block;overflow:hidden;min-width:0;min-height:0;width:100%;height:100%}.sprite-crop img{position:absolute;max-width:none;pointer-events:none;user-select:none}.ui-icon{display:inline-block;width:26px;height:26px;flex-shrink:0;vertical-align:middle;pointer-events:none}.game-icon .ui-icon{width:29px;height:29px}.rotate-button>.ui-icon{width:31px;height:31px}.tool-icon .ui-icon{width:32px;height:32px}.hud-symbol{width:25px;height:27px}.result-emblem{display:flex;justify-content:center;gap:5px}.result-emblem .ui-icon{width:58px;height:58px}.tool-palette .ui-icon{width:23px;height:23px}.directions .ui-icon{width:24px;height:24px}.editor-actions .ui-icon,.editor-rotation .ui-icon,.editor-board-tools .ui-icon{width:20px;height:20px}.level-btn .ui-icon{width:14px;height:14px}.journey-badge .ui-icon{width:25px;height:25px}.game-bottom{--cap:20px}.game-bottom>button{padding:7px 14px}.win-overlay,dialog,.editor-panel{--cap:27px}.board-toast{color:white}.tool-icon small,.rotate-button small,.difficulty-pill{--cap:6px}.metric-track,.metric-track i{--cap:2px}.metric-track{display:block}.input-skin{display:block;--cap:10px}.input-skin input,.input-skin select{position:relative;appearance:none;background:transparent;border:0}.pulse-dot{display:none}.swatches button{background:none!important}.board-tools button{padding:0}.editor-board-tools button{padding:12px}.tool-palette button.active,.directions button.active{color:white}.ui-plate~.ui-plate{display:none}
.difficulty-pill,.board-toast,.win-overlay,.dialog-close,.tool-icon small,.rotate-button small{position:absolute}.canvas-wrap canvas{position:relative;z-index:1}.hud-pill .ui-plate{display:grid}.hud-pill>.ui-icon{display:inline-block}.hud-pill .ui-icon{margin:0}.rotate-button small{bottom:-14px}.game-bottom{min-height:65px}
.game-icon{--cap:10px}.tool-palette button{--cap:10px}.editor-actions button,.directions button,.swatches button{--cap:8px}.editor-board-tools button{--cap:12px}.tool-icon{--cap:15px}.game-bottom>button{--cap:12px}.level-btn{--cap:14px}.editing .tool-palette{position:fixed}.game-logo{margin:auto}
/* No decorative circular tray beneath the playable hexagonal cells. */
.canvas-wrap:before{display:none}
/* Calm matte solid backdrop, no decorative pattern or glow. */
body,.game-shell{background:#98aec3!important}.board-instruction,.level-heading h1{color:#777368}.level-ribbon{color:#645f70}
/* Minimal play layout: only level and moves above the board. */
.game-top,.game-bottom,.level-heading h1,.difficulty-pill,.hud-pill,.rotation-caption{display:none!important}
.game-shell{padding:28px 17px 18px;min-height:100dvh}
.game-column{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:20px}
.level-heading{grid-column:1;margin:0;text-align:left;padding-left:15px}
.level-ribbon{font-size:27px;letter-spacing:1px}
.hud{grid-column:2;justify-content:flex-end;padding:0 15px 0 0;margin:0}
.moves-bubble{width:auto;height:66px;align-items:center;min-width:74px}
.moves-bubble>span{font-size:11px;color:#53657b}.moves-bubble strong{font-size:32px;color:#405772}
.game-card,.return-editor{grid-column:1 / -1}
.canvas-wrap{width:100%;margin:20px auto 0;aspect-ratio:1}
.rotation-controls{display:flex;justify-content:space-evenly;gap:45px;padding:0 25px;margin:8px 0 0}
.rotate-button{display:flex;flex-direction:column;gap:7px;min-height:100px;min-width:90px;padding:4px 12px;color:#4d6076;outline:none}
.rotate-button>.ui-icon{width:64px;height:64px}.rotate-button b{font-size:14px;letter-spacing:2px}
.rotate-button.hinted{outline:none;filter:brightness(1.18)}
.board-instruction{margin:3px 0 7px;font-size:10px;min-height:18px}
.board-tools{padding:22px 0 12px;gap:40px}
@media(max-height:700px){.game-shell{padding-top:12px}.canvas-wrap{width:min(100%,calc(100dvh - 290px));margin-top:8px}.rotate-button{min-height:77px}.rotate-button>.ui-icon{width:49px;height:49px}.board-tools{padding-top:12px}}
/* Centered level header with the two utility controls restored. */
.game-top{display:flex!important;position:absolute;left:21px;right:21px;top:26px;height:43px;padding:0;justify-content:space-between;z-index:3;pointer-events:none}
.game-top>button{pointer-events:auto}
.game-column{grid-template-columns:1fr;column-gap:0}
.level-heading{grid-column:1;text-align:center;padding:0 58px;margin:0}
.hud{grid-column:1;justify-content:center;padding:0;margin:9px 0 0}
.moves-bubble{height:62px;min-width:74px}
.game-card,.return-editor{grid-column:1}
.canvas-wrap{margin-top:12px}
@media(max-height:700px){.game-top{top:12px}.hud{margin-top:5px}.moves-bubble{height:53px}.canvas-wrap{margin-top:5px}}
/* Prevent mobile WebKit's rectangular canvas tap/callout highlight. */
canvas,.canvas-wrap{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}canvas:focus{outline:none}
/* Matte PNG color samples with clean rounded silhouettes. */
.ui-plate{display:block!important;border-radius:14px;overflow:hidden}.ui-plate>.sprite-crop{width:100%;height:100%}
.tool-icon .ui-icon img,.game-icon .ui-icon img,.rotate-button .ui-icon img{filter:brightness(0) invert(1)}
.game-icon,.tool-icon{box-shadow:none!important}.game-icon .ui-plate{border-radius:12px}
button{transition:transform .15s,filter .15s}button:active:enabled{transform:scale(.94)}
.win-overlay{position:fixed;inset:0;margin:auto;width:calc(100% - 42px);max-width:365px;height:fit-content;max-height:85dvh;padding:32px 24px;overflow:auto;display:none}
.win-overlay[open]{display:flex;animation:modal-arrive .42s cubic-bezier(.22,1,.36,1) both}
dialog[open]{animation:modal-arrive .42s cubic-bezier(.22,1,.36,1) both}
dialog::backdrop{background:rgba(34,48,66,.48);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:veil-in .25s ease-out}
dialog>.ui-plate{border-radius:24px}.win-overlay .result-emblem{min-height:62px}
.win-overlay[open] .result-emblem>.ui-icon{animation:star-pop .4s cubic-bezier(.2,1.5,.5,1) both;animation-delay:.3s}
.win-overlay[open] .result-emblem>.ui-icon:nth-child(2){animation-delay:.49s}
.win-overlay[open] .result-emblem>.ui-icon:nth-child(3){animation-delay:.68s}
.win-overlay[open] h3,.win-overlay[open] p{animation:content-in .3s .2s both}
.win-overlay[open] button{animation:content-in .3s .65s both}
body:has(dialog[open]){overflow:hidden}
@keyframes modal-arrive{from{opacity:0;transform:translateY(-60px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes star-pop{from{opacity:0;transform:scale(.25) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes content-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog::backdrop,.win-overlay[open] *{animation:none!important}}
.game-icon,.tool-icon{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.game-icon .ui-icon{width:32px;height:32px;margin:0;display:block}.game-icon .ui-icon img{filter:brightness(0);opacity:.55}
.tool-icon .ui-icon{width:37px;height:37px;display:block;margin:0}
.ui-icon{line-height:0}.result-emblem .ui-icon img,.journey-badge .ui-icon img{filter:brightness(0) saturate(100%) invert(75%) sepia(90%) saturate(700%) hue-rotate(350deg)}
.tool-icon small{line-height:1.4}.dialog-close .ui-icon{width:27px;height:27px}
.rotate-button>.ui-icon{width:80px;height:80px}.rotate-button{min-height:112px}
.level-btn:not(.current)>.ui-plate{filter:brightness(.94)}
.primary>.ui-plate{filter:saturate(.7) brightness(.83)}
.win-overlay p,dialog p,dialog li{color:#69778e}.win-overlay h3{color:#52658b}
@media(max-height:700px){.rotate-button>.ui-icon{width:58px;height:58px}.rotate-button{min-height:88px}}
/* Chapter navigation for the production campaign; scoped to its map controls. */
.campaign-page-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;color:#667593;font-size:12px}
.campaign-page-controls button,.campaign-jump button{min-height:42px;padding:8px 12px;font-size:12px}
.campaign-jump{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px}
.campaign-jump .field{flex:1;min-width:90px;margin:0}
.campaign-jump>button{margin-top:19px}
#campaign-jump-feedback{width:100%;font-size:11px;color:#aa536b}
.level-dialog-grid .level-btn{position:relative;min-width:0}
.level-dialog-grid .level-btn>.ui-icon{position:absolute;left:3px;top:3px;width:13px;height:13px}
#info-dialog:has(.campaign-picker){background:#f6f8f2!important;border-radius:20px}
#info-dialog:has(.campaign-picker)>#dialog-content{position:relative;z-index:1}