html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; position: fixed; inset: 0; }
/* text fields stay typeable (iOS will not type into a user-select:none input) */
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, svg { -webkit-user-drag: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; filter: contrast(1.07); }
/* WebGL finishing pass sits exactly over the 2D canvas; taps pass straight through to it */
canvas#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; pointer-events: none; }
body.fx canvas#fx { display: block; }
body.fx canvas#game { opacity: 0; filter: none; }
#ui { position: fixed; inset: 0; pointer-events: none; font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; color: #c9ccd1; }

.panel { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto;
  background: radial-gradient(ellipse 65% 60% at center, rgba(4,5,6,.7) 0%, rgba(4,5,6,.45) 50%, rgba(0,0,0,.75) 100%); }
.panel.show { display: flex; animation: fadein 1.2s ease; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.sub { text-shadow: 0 0 8px #000; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; letter-spacing: .3em; padding-left: .3em; opacity: .6; margin-bottom: 2.6em; text-transform: lowercase; text-align: center; }
.menu { display: flex; flex-direction: column; align-items: center; }
.menu button { position: relative; display: block; width: max-content; margin: 0 auto; background: none; border: 0; color: #9da3aa; font: inherit; font-size: 15px; font-weight: 400;
  letter-spacing: .42em; padding: .7em 0 .7em .42em; text-transform: uppercase; cursor: pointer; text-shadow: 0 0 10px #000, 0 0 3px #000; transition: color .3s, letter-spacing .4s, padding .4s; }
.menu button::before, .menu button::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; background: #e8eaec; transform: translateY(-50%) rotate(45deg) scale(0); transition: transform .3s; box-shadow: 0 0 8px rgba(232,234,236,.6); }
.menu button::before { left: -26px; } .menu button::after { right: -22px; }
.menu button:hover, .menu button:focus { color: #f4f5f6; letter-spacing: .52em; padding-left: .52em; outline: none; }
.menu button:hover::before, .menu button:focus::before, .menu button:hover::after, .menu button:focus::after { transform: translateY(-50%) rotate(45deg) scale(1); }
.menu button:disabled { opacity: .22; cursor: default; letter-spacing: .42em; padding-left: .42em; color: #9da3aa; }
.menu button:disabled::before, .menu button:disabled::after { display: none; }
/* title card */
.logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 4.2em; text-align: center; animation: logoin 2.4s ease both; }
@keyframes logoin { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.logo-top { font-size: clamp(14px, 1.7vw, 22px); font-weight: 400; letter-spacing: 1.1em; padding-left: 1.1em; color: #b8bdc2; margin-bottom: .1em; text-shadow: 0 0 18px #000; }
.logo-main { margin: 0; font-size: clamp(64px, 12vw, 168px); font-weight: 700; line-height: .95; letter-spacing: .16em; padding-left: .16em;
  background: linear-gradient(180deg, #ffffff 0%, #dfe3e6 38%, #8e959b 72%, #5d636a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(210,220,228,.22)) drop-shadow(0 6px 14px rgba(0,0,0,.85)); }
.logo-rule { display: flex; align-items: center; gap: 18px; margin-top: .9em; width: min(560px, 80vw); }
.logo-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,206,212,0), rgba(200,206,212,.55), rgba(200,206,212,0)); }
.logo-rule em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(16px, 1.8vw, 24px); letter-spacing: .28em; padding-left: .28em; color: #c3c8cd; white-space: nowrap; text-shadow: 0 0 12px #000; }
.rows { display: flex; flex-direction: column; gap: 18px; margin-bottom: 2.4em; }
.rows label { display: flex; justify-content: space-between; align-items: center; gap: 30px; width: 300px; letter-spacing: .2em; font-size: 14px; text-transform: uppercase; }
table.keys { border-collapse: collapse; margin-bottom: 2em; font-size: 14px; letter-spacing: .08em; }
table.keys td { padding: 6px 18px; }
table.keys td:first-child { text-align: right; color: #fff; opacity: .85; }
table.keys td:last-child { opacity: .6; font-style: italic; }


/* falling title letters */
.panel .ch { display: inline-block; will-change: transform; }
.logo-main .ch { background: linear-gradient(180deg, #ffffff 0%, #dfe3e6 38%, #8e959b 72%, #5d636a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel.falling { pointer-events: none; }
.panel.falling .menu button::before, .panel.falling .menu button::after { display: none; }
.logo-rule span { display: block; will-change: transform; }

@media (max-height: 520px) { .logo { margin-bottom: 1.6em; } .menu button { padding: .45em 0 .45em .42em; font-size: 13px; } .sub { margin-bottom: 1.2em; } }