/* Opening card uses the same fog gradient and typography as the check-in card. */
.game-intro-open{overflow:hidden}
.gi-dialog{margin:auto;box-sizing:border-box;width:min(840px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:24px 28px 22px;border:1px solid var(--am-pale);border-radius:28px;background:var(--am-white);color:var(--am-ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 28px 100px #2a1a4f26}
.gi-dialog::backdrop{background:#2a1a4f61;backdrop-filter:blur(8px)}
.gi-dialog *{box-sizing:border-box}
.gi-dialog button{cursor:pointer;font:inherit}
.gi-dialog button:focus-visible,.gi-dialog input:focus-visible,.gi-reopen:focus-visible{outline:3px solid var(--am-violet);outline-offset:4px}
.gi-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.gi-brand{min-width:0;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:400;color:var(--am-url)}
.gi-brand img{border-radius:9px;flex:none}
.gi-close{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:8px;border:1px solid var(--am-pale);border-radius:50%;background:var(--am-cream);color:var(--am-ink)}
.gi-close svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.gi-brand h1{margin:0;font-size:14px;line-height:1.6;font-weight:400;color:var(--am-ink);text-wrap:pretty}
.gi-tabs{display:flex;gap:4px;width:fit-content;max-width:100%;margin:22px auto 16px;padding:4px;background:var(--am-cream);border:1px solid #e6e3ec;border-radius:50px}
.gi-tabs button{padding:8px 25px;border:0;border-radius:50px;background:transparent;color:var(--am-url);font-size:13px;font-weight:450;min-height:38px;white-space:nowrap}
.gi-tabs button[aria-pressed=true]{background:var(--am-violet);color:var(--am-white)}
.gi-preview{min-width:0;padding:14px 20px 10px;border-radius:22px;background:var(--am-fog)}
.gi-stage{height:430px;width:100%;overflow:hidden;border-radius:16px;background:transparent}
.gi-stage[aria-busy=true]::before{content:'A·M';display:grid;place-items:center;height:100%;font-size:38px;color:var(--am-violet)}
.gi-progress{height:3px;background:#ffffff73;border-radius:3px;overflow:hidden;margin-top:8px}.gi-progress span{display:block;height:100%;width:0;background:var(--am-violet)}
.gi-player{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.gi-status{font-size:11px;line-height:1.4;font-weight:400;color:var(--am-code);margin:6px 0}
.gi-controls{display:flex;align-items:center;gap:12px;flex:none}
.gi-toggle{min-height:40px;background:transparent;border:0;color:var(--am-code);font-size:12px!important;white-space:nowrap;padding:4px}
.gi-sound{min-height:32px;padding:4px 11px;border:1px solid var(--am-violet);border-radius:20px;background:transparent;color:var(--am-code);font-size:11px!important}
.gi-sound[aria-pressed=true]{background:var(--am-violet);color:var(--am-white)}
.gi-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:18px 0 0;border:0}
.gi-preference{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:350;color:var(--am-url);cursor:pointer;min-height:40px}
.gi-preference input{width:16px;height:16px;margin:0;accent-color:var(--am-violet)}
.gi-enter{display:flex;align-items:center;justify-content:center;gap:30px;min-height:44px;border:1px solid var(--am-violet);border-radius:50px;background:var(--am-violet);color:var(--am-white);padding:0 25px;font-size:14px!important;font-weight:450!important}
.gi-reopen{display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;margin:14px auto 0;padding:5px 10px;min-height:34px;font:400 12px/1.5 system-ui,sans-serif;color:var(--am-violet);cursor:pointer}
.gi-reopen svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3}.gi-reopen svg path{fill:currentColor;stroke:none}
@media(min-width:601px) and (max-height:800px){.gi-dialog{padding-top:16px;padding-bottom:16px}.gi-tabs{margin:16px auto 12px}.gi-stage{height:360px}.gi-bottom{padding-top:12px}}
@media(max-width:600px){
 .gi-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:16px 16px 15px;border-radius:24px}
 .gi-brand{font-size:11px;gap:8px}.gi-brand img{width:28px;height:28px}.gi-close{width:34px;height:34px;padding:7px}
 .gi-brand h1{font-size:11px;line-height:1.6}
 .gi-tabs{margin:18px auto 14px}.gi-tabs button{font-size:12px;padding:7px 23px;min-height:35px}
 .gi-preview{padding:8px 10px 5px;border-radius:18px}.gi-stage{height:325px}.gi-progress{margin-top:7px}
 .gi-player{gap:6px;min-height:43px;flex-wrap:wrap}.gi-status{font-size:10px;flex:1;min-width:100px}.gi-controls{gap:9px;margin-left:auto}.gi-toggle{font-size:11px!important}.gi-sound{font-size:10px!important;padding:3px 8px}
 .gi-bottom{padding-top:16px;gap:10px}.gi-enter{font-size:12px!important;gap:18px;padding:0 17px}.gi-preference{font-size:10px;gap:6px}
}
@media(max-width:359px){.gi-dialog{padding:13px 12px}.gi-brand h1{font-size:10px}.gi-preview{padding-left:6px;padding-right:6px}.gi-stage{height:290px}.gi-bottom{flex-direction:column-reverse;gap:5px}.gi-enter{width:100%}.gi-preference{min-height:30px}.gi-status{font-size:9px;min-width:80px}.gi-controls{gap:6px}}
@media(prefers-reduced-motion:no-preference){.gi-dialog[open]{animation:gi-arrive .22s ease-out}@keyframes gi-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

/* Approved full-card fog palette. The optional white class is local comparison only. */
.gi-dialog:not(.gi-white-preview){background:var(--am-fog);border-color:var(--am-pale)}
.gi-dialog:not(.gi-white-preview) .gi-preview{background:transparent}
.gi-dialog:not(.gi-white-preview) :is(.gi-brand h1,.gi-preference){color:var(--am-code)}
.gi-dialog:not(.gi-white-preview) .gi-tabs{background:rgba(255,255,255,.48);border-color:rgba(91,61,153,.22)}
.gi-dialog:not(.gi-white-preview) .gi-tabs button:not([aria-pressed="true"]){color:var(--am-ink)}
.gi-dialog:not(.gi-white-preview) .gi-sound{background:rgba(255,255,255,.3)}
.gi-dialog:not(.gi-white-preview) .gi-sound[aria-pressed="true"]{background:var(--am-violet)}
.gi-dialog:not(.gi-white-preview) .gi-progress{background:rgba(255,255,255,.55)}