@import url('./assets/fonts/fonts.css');
:root{color-scheme:dark;--ink:#111c1c;--cream:#e7dec5;--gold:#c6ac71;--muted:#9ca88c}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--cream);font:13px 'DM Sans',sans-serif;background-image:radial-gradient(ellipse at 50% 20%,#33433250,transparent 70%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:1px solid #68715377;background:#26342860;border-radius:3px;cursor:pointer;padding:10px 15px;transition:background .15s}button:hover{background:#b79d6130;border-color:#bba56c}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #e1c589;outline-offset:3px}a{color:var(--muted);text-decoration:none}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid #a3a87c22}.brand{letter-spacing:3px;font-size:10px;color:var(--cream);display:flex;align-items:center;gap:10px}.brand>span{font-size:27px;color:var(--gold)}.tools{display:flex;gap:5px}.tools button{border:0;background:none;font-size:11px}main{max-width:1420px;margin:auto;padding:22px 36px}.room-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.room-heading p,.eyebrow{letter-spacing:2px;color:var(--gold);font-size:9px}.room-heading h1{font:36px 'Libre Caslon Display',Georgia,serif;margin:5px 0}.room-heading button{font-size:10px}kbd{font:9px 'DM Sans',sans-serif;border:1px solid #89917466;border-bottom-width:2px;padding:3px 5px;border-radius:3px;color:#cbd0b4;margin:0 3px}#stage{position:relative;border:1px solid #83906b60;background:#101c1d;box-shadow:0 24px 70px #0004;aspect-ratio:16/9;max-height:calc(100svh - 290px);min-height:320px;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(90deg,#101d1ee6,#182b25e0);backdrop-filter:blur(3px);padding:20px}.overlay h2{font:64px 'Libre Caslon Display',Georgia,serif;margin:15px 0}.overlay>p:not(.eyebrow){line-height:1.9;color:#b6c0a5}.overlay small{font-size:10px;color:#9eaa8c}.overlay a{font-size:10px;margin-top:24px}.primary{display:flex;justify-content:space-between;min-width:210px;padding:15px 24px;border:0;background:#d1bc83;color:#16271e;margin:20px 0}.primary:hover{background:#e4d3a3}#endingUndo{border:0;background:none;font-size:11px}.status-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 16px;background:#26332888;border:1px solid #84906b30;border-top:0;min-height:45px;font-size:11px;color:#c8ceb6}#moves{white-space:nowrap;font-size:10px;color:var(--muted)}.below{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:10px}.legend{display:flex;gap:15px;color:var(--muted);font-size:10px}.actions{display:flex;gap:10px}.actions button{font-size:11px;border:0;background:none}#hintBox{margin-top:12px;padding:14px 18px;background:#35412c66;border-left:2px solid var(--gold);line-height:1.8;color:#d3d6ba}footer{border-top:1px solid #7f8b6825;padding:17px 0;display:flex;justify-content:space-between;color:#7e8f78;font-size:9px}footer>span:first-child{letter-spacing:2px;font-size:8px}.touch-controls{display:none}.edge-indicator{position:absolute;top:50%;padding:8px;background:#182623df;color:#dfc78c;font-size:11px;border:1px solid #9e9363;pointer-events:none}.edge-indicator.left{left:8px}.edge-indicator.right{right:8px}#overviewNote{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#14231de8;border:1px solid #92977366;padding:8px 14px;font-size:10px;text-align:center;max-width:90%;width:max-content;color:#d2d5b9}dialog{border:1px solid #999365;background:#1e3028;color:var(--cream);padding:32px;min-width:min(400px,90vw)}dialog::backdrop{background:#07100edb}dialog h2{font:36px 'Libre Caslon Display',Georgia,serif;margin:0}dialog p{font-size:12px;color:var(--muted)}#roomButtons{display:flex;flex-direction:column;gap:10px;margin:23px 0}#roomButtons button{text-align:left}dialog a{display:block;font-size:10px;margin-top:22px}[hidden]{display:none!important}@media(max-width:750px){header{height:48px;padding:0 14px}.brand{letter-spacing:1.5px;font-size:8px}.brand>span{font-size:23px}.tools button{font-size:10px;padding:8px}main{padding:12px 10px}.room-heading{margin-bottom:10px;gap:10px}.room-heading h1{font-size:27px}.room-heading p{font-size:8px;letter-spacing:1px}.room-heading button{font-size:10px;padding:9px}.room-heading kbd{display:none}#stage{height:calc(100svh - 375px);min-height:300px;max-height:none;aspect-ratio:auto}.status-row{font-size:10px;padding:10px;min-height:50px}.below{padding:7px 0;justify-content:flex-end}.legend{display:none}.touch-controls{display:flex;align-items:stretch;justify-content:center;gap:8px}.touch-controls button{min-width:43px;min-height:44px;padding:10px 12px}.dpad{display:flex;align-items:center;gap:4px}.dpad>div{display:flex;flex-direction:column;gap:4px}.touch-controls>button{align-self:center}footer{padding:12px 0;justify-content:center}footer>span:first-child{display:none}.overlay h2{font-size:42px}.overlay .eyebrow{font-size:8px;letter-spacing:1px}.overlay>p:not(.eyebrow){font-size:12px}.overlay a{margin-top:15px}.overlay small{font-size:9px}.primary{padding:12px 20px;margin:12px 0}#overviewNote{font-size:9px}}@media(max-height:550px) and (orientation:landscape){header{height:38px}.room-heading{margin-bottom:5px}.room-heading h1{font-size:22px}.room-heading p{display:none}main{padding:7px 12px}#stage{height:calc(100svh - 170px);min-height:220px;max-height:none}.touch-controls{position:fixed;bottom:10px;left:8px;right:8px;z-index:3;justify-content:space-between;pointer-events:none}.touch-controls button{pointer-events:auto;background:#15271de8}.below{padding:4px 0}footer{display:none}}@media(prefers-reduced-motion:reduce){button{transition:none}.overlay{backdrop-filter:none}}

.room-heading p{margin:0 0 5px}.room-heading h1{margin:0;line-height:1.1}.room-heading{margin-bottom:16px}main{padding-top:18px}@media(max-width:750px){main{padding-top:12px}.room-heading{margin-bottom:12px}}

/* Tablet touchscreens need controls even when their viewport is desktop-sized. */
@media (any-pointer: coarse) and (min-width: 751px) {
  #stage { max-height: calc(100svh - 390px); margin-inline: auto; }
  .legend { display: none; }
  .touch-controls { display: flex; align-items: stretch; justify-content: center; gap: 12px; }
  .touch-controls button { min-width: 56px; min-height: 50px; }
  .touch-controls > button { align-self: center; }
  .dpad { display: flex; align-items: center; gap: 6px; }
  .dpad > div { display: flex; flex-direction: column; gap: 6px; }
}