:root { font: 15px/1.3 system-ui, sans-serif; background: #e8eceb; color: #182527; }
* { box-sizing: border-box; }
body { margin: 0; }
#puzzle { height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
#gamemenu { display: flex; flex-wrap: wrap; gap: .3rem; padding: .4rem; background: #263733; color: #fff; }
button, summary { font: inherit; cursor: pointer; }
#gamemenu button, summary { min-height: 34px; padding: .33rem .58rem; border: 1px solid #9daea6; border-radius: 3px; background: #f9faf7; color: #14241d; }
#gamemenu button:disabled { opacity: .55; cursor: default; }
#gamemenu button[aria-pressed="true"] { background: #ffeb91; }
details { position: relative; }
.popup { display: grid; position: absolute; inset: 100% auto auto 0; z-index: 2; min-width: max-content; max-height: 65dvh; overflow: auto; padding: .35rem; margin: .2rem 0 0; background: #263733; gap: .25rem; list-style: none; }
.popup li { list-style: none; }
.popup button { width: 100%; text-align: left; }
#puzzlecanvascontain { position: relative; display: grid; place-items: center; overflow: hidden; min-width: 0; }
canvas { display: block; touch-action: none; }
#apology { position: absolute; inset: 30% 0 auto; text-align: center; pointer-events: none; }
#statusbar { padding: 0 .45rem; text-align: center; }
#statusbar:empty { display: none; }
#dlgdimmer { position: fixed; inset: 0; z-index: 3; background: #13271db0; }
#dlgform { position: fixed; inset: 50% auto auto 50%; z-index: 4; transform: translate(-50%, -50%); width: max-content; max-width: min(94vw, 32rem); max-height: 90dvh; overflow: auto; margin: 0; padding: 1rem; background: #fff; color: #182527; border: 2px solid #263733; }
#dlgform h2 { margin: 0 0 .65rem; font-size: 1.15rem; }
#dlgform input[type="text"] { max-width: 100%; }
#alternate { display: none; }
@media (pointer: coarse), (max-width: 600px) {
  #alternate { display: inline-block; }
  body[data-puzzle="cube"] #alternate { display: none; }
}