/* Shared design tokens and component styles for all kiosk pages. */

/* Font stacks (single source of truth; also referenced from tailwind-config.js).
   Serif = project titles + log H1 (EB Garamond for Latin; generic `serif` gives a
   CJK serif for ja/ko). Everything else uses the sans stack. */
:root {
  --kiosk-serif: "EB Garamond", "Source Serif 4", serif;
  --kiosk-sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --kiosk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  background-color: #000000;
  color: #e2e2e2;
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Top-right language dropdown (injected by shared/i18n.js). */
#lang-switch {
  position: fixed; top: 16px; right: 16px; z-index: 50;
  font-family: var(--kiosk-sans); font-size: 13px; letter-spacing: 0.03em;
  padding: 5px 34px 5px 12px; background-color: #0e0e0e; color: #e2e2e2;
  border: 1px solid #444748; border-radius: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1.5 2L6 6.5L10.5 2' fill='none' stroke='%238e9192' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 9px 6px;
}
#lang-switch:hover { border-color: #ffffff; color: #ffffff; }
#lang-switch:focus { outline: none; border-color: #ffffff; }

/* Hairline frames used for gallery cards and the gameplay panel. */
.ghost-border { border: 1px solid #222222; }
.ghost-border:hover { border-color: #ffffff; }
.ghost-border-active { border: 1px solid #ffffff; }

/* Global thin scrollbar. */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #333333; }
::-webkit-scrollbar-thumb:hover { background: #444444; }

/* Opt-in scrollbar for inner scroll areas (e.g. Prompt Log). */
.custom-scrollbar::-webkit-scrollbar { display: block !important; width: 6px !important; }
.custom-scrollbar::-webkit-scrollbar-track { background: #000000 !important; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #333333 !important; border-radius: 10px; }

/* Project Detail layout. */
.custom-container {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

.gameplay-viewport {
  width: 1920px;
  height: 1080px;
}

@media (max-width: 1920px) {
  .gameplay-viewport {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}

/* Pre-rendered Markdown prose for the Prompt Log (plain HTML, no utility classes). */
.prompt-md { color: #e2e2e2; font-family: var(--kiosk-sans); font-size: 16px; line-height: 1.6; }
.prompt-md > :first-child { margin-top: 0; }
.prompt-md h1 { font-family: var(--kiosk-serif); font-size: 32px; line-height: 1.2; color: #ffffff; margin: 0 0 16px; }
.prompt-md h2 { font-family: var(--kiosk-sans); font-size: 18px; line-height: 1.3; color: #ffffff; margin: 40px 0 16px; padding-top: 24px; border-top: 1px solid #353535; }
.prompt-md h3 { font-family: var(--kiosk-sans); font-size: 20px; line-height: 1.3; color: #ffffff; margin: 24px 0 8px; }
.prompt-md h4, .prompt-md h5, .prompt-md h6 { font-family: var(--kiosk-sans); color: #ffffff; margin: 20px 0 8px; }
.prompt-md p { margin: 12px 0; }
.prompt-md ul, .prompt-md ol { margin: 12px 0; padding-left: 24px; }
.prompt-md li { margin: 4px 0; }
.prompt-md ul { list-style: disc; }
.prompt-md ol { list-style: decimal; }
.prompt-md strong { color: #ffffff; font-weight: 700; }
.prompt-md em { font-style: italic; }
.prompt-md a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.prompt-md hr { border: 0; border-top: 1px solid #353535; margin: 24px 0; }
.prompt-md blockquote { margin: 12px 0; padding-left: 16px; border-left: 2px solid #444748; color: #c4c7c8; }
.prompt-md code { font-family: var(--kiosk-mono); font-size: 0.875em; background: #1b1b1b; padding: 2px 6px; border-radius: 4px; }
.prompt-md pre { background: #0e0e0e; border: 1px solid #353535; border-radius: 4px; padding: 16px; margin: 16px 0; overflow-x: auto; }
.prompt-md pre code { background: none; padding: 0; border-radius: 0; font-size: 13px; line-height: 1.5; color: #e2e2e2; }
.prompt-md table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.prompt-md th, .prompt-md td { border: 1px solid #353535; padding: 8px 12px; text-align: left; }
.prompt-md img { max-width: 100%; height: auto; }

/* Embedded Unity Player (scoped to the gameplay panel). */
#unity-container { position: absolute; inset: 0; }
#unity-canvas { width: 100%; height: 100%; display: block; background: #231f20; }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }
#unity-progress-bar-empty { width: 200px; height: 6px; background: #333333; }
#unity-progress-bar-full { width: 0%; height: 100%; background: #ffffff; }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%, 0); background: #ffffff; color: #000000; padding: 10px; display: none; z-index: 10; }

/* "Click to Play" overlay — defers Unity loading until clicked. */
#unity-poster { position: absolute; inset: 0; z-index: 6; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 0; background: #0e0e0e; color: #e2e2e2; cursor: pointer; }
/* Looping preview video behind the prompt: slight blur + darken. scale() hides the
   transparent edges that blur() produces. */
#unity-poster .poster-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(4px) brightness(0.55); transform: scale(1.03); }
#unity-poster .material-symbols-outlined { position: relative; font-size: 64px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); transition: color 0.2s; }
#unity-poster .unity-poster-label { position: relative; font-family: var(--kiosk-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); transition: color 0.2s; }
#unity-poster:hover .material-symbols-outlined, #unity-poster:hover .unity-poster-label { color: #ffffff; }