/* The page around the game (docs/web-page.md); colors from the game's panels */
@font-face { font-family: Digitek; src: url(DIGITEK.ttf); }
:root { --panel: #004770; --edge: #3f7493; --text: #e6eef4; --dim: #9fb4c2; --accent: #8cff8c; }

html, body { margin: 0; color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
body { background: #1c1c1c url(background.png); }

#stage { position: relative; display: flex; justify-content: center; padding: 8px 16px 0; }
/* The frame is around the canvas, not on it: the game's mouse coordinates are the canvas's */
#frame { padding: 8px; border-radius: 8px; background: linear-gradient(#c3d0d6, #71899a 45%, #4a6577);
         box-shadow: inset 0 1px 0 #eef4f6, 0 0 0 2px #0c1f2b, 0 8px 28px rgba(0, 0, 0, .75); }
#canvas { display: block; background: #000; outline: none; image-rendering: auto; box-shadow: 0 0 0 2px #0c1f2b; }
#status { position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); }
#status progress { display: block; margin: 8px auto 0; width: 240px; }

main { box-sizing: border-box; max-width: 960px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
section { background: var(--panel); border: 2px solid var(--edge); border-radius: 8px; padding: 16px 20px; }
h2 { margin: 0 0 8px; font: normal 24px/1.2 Digitek, monospace; letter-spacing: 1px; text-transform: uppercase; }
p { margin: 0 0 8px; }
ul.text { margin: 0; padding-left: 20px; }
ul.text li { margin-bottom: 6px; }

/* Files dropped on the game */
#frame.dragging { outline: 3px dashed var(--accent); outline-offset: 2px; }
#import-result { position: absolute; z-index: 1; left: 16px; right: 16px; top: 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; pointer-events: none; }
#import-result li { margin-bottom: 4px; padding: 4px 10px; border-radius: 4px; background: var(--panel); animation: import-result 6s forwards; }
#import-result .refused { color: #ffc0a0; animation-duration: 15s; }
@keyframes import-result { 85% { opacity: 1; } to { opacity: 0; } }

dialog { max-width: 420px; color: var(--text); background: var(--panel); border: 2px solid var(--edge); border-radius: 8px; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog .buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
dialog button { padding: 6px 14px; border: 1px solid var(--edge); border-radius: 4px; background: #00304c; color: inherit; font: inherit; cursor: pointer; }
dialog button:hover { background: var(--edge); }

a { color: inherit; }

/* The menus: pages in a frame over the canvas */
#menu { position: absolute; left: 8px; top: 8px; border: none; background: transparent; }
#frame { position: relative; }

/* The app page (play.<domain>, a home screen, ?app: shell.html): the game fills the screen between
   the notch's safe areas, and nothing scrolls, zooms, selects or opens a menu on a long press */
html.app, html.app body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #000; }
html.app body { position: fixed; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none;
                -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
html.app main { display: none; }
html.app #stage { position: fixed; top: 0; bottom: 0; left: env(safe-area-inset-left); right: env(safe-area-inset-right); padding: 0; }
html.app #frame { padding: 0; border-radius: 0; background: none; box-shadow: none; }
html.app #canvas { box-shadow: none; }
html.app #menu { left: 0; top: 0; }
/* A phone held upright: the game needs it sideways */
#turn { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  html.app #turn { display: flex; position: fixed; inset: 0; z-index: 10; align-items: center; justify-content: center;
                   padding: 32px; text-align: center; background: #000; font: 28px/1.4 Digitek, monospace; text-transform: uppercase; }
}