@font-face { font-family: Rajdhani; src: url('/assets/rajdhani-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: Rajdhani; src: url('/assets/rajdhani-600.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: NejiTitle; src: url('title.woff') format('woff'); font-weight: 700; font-display: swap; }
:root { color-scheme: dark; --cyan: #00d7e6; --text: #e0e8ee; --muted: #a8b8ca; --line: #19445e; --panel: #061d2e; --sidebar: clamp(220px, 20.5vw, 315px); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: auto 1fr; isolation: isolate; margin: 0; min-width: 320px; min-height: 100dvh; background: radial-gradient(ellipse at 50% 20%, #082338, #021522 75%); color: var(--text); font: 600 16px/1.4 Rajdhani, sans-serif; }
.sidebar { grid-column: 1; grid-row: 2; padding: 0 16px 24px; }
.sidebar::before { content: ""; position: fixed; inset: 0 auto 0 0; width: var(--sidebar); border-right: 1px solid #17394f; background: #00142166; z-index: -1; }

.tabs { display: grid; gap: 8px; }
.tabs [role="tab"] { display: block; text-decoration: none; position: relative; width: 100%; min-height: 80px; border: 0; border-radius: 8px; padding: 18px 28px; background: none; color: var(--muted); text-align: left; font: 600 25px Rajdhani, sans-serif; cursor: pointer; }
.tabs [role="tab"]:focus-visible { outline-offset: -3px; }
.tabs [role="tab"]:hover { background: #06304480; color: #fff; }
.tabs [role="tab"][aria-selected='true'] { background: #003144b3; color: #fff; }
.tabs [role="tab"][aria-selected='true']::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; border-radius: 8px 0 0 8px; background: var(--cyan); }
#support-button { display: block; width: 100%; margin-top: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 6px; background: #061d2e; color: var(--muted); font: 600 16px/1.35 Rajdhani, sans-serif; text-align: center; text-decoration: none; }
#support-button:hover, #support-button:focus-visible { color: var(--cyan); border-color: var(--cyan); }
main { grid-column: 2; grid-row: 2; min-width: 0; max-width: 1450px; padding: 0 clamp(28px, 6vw, 90px) 60px; padding-right: clamp(28px, 5vw, 76px); }
header { grid-column: 2; grid-row: 1; min-width: 0; max-width: 1450px; margin: 0 16px 24px; padding: clamp(32px, 8vh, 72px) clamp(28px, 6vw, 90px) 0; padding-right: clamp(28px, 5vw, 76px); }

h1 { margin: 0; font: 700 clamp(40px, 4.5vw, 64px)/1.25 NejiTitle, sans-serif; color: #f6f5f1; letter-spacing: .015em; transform: skew(-7deg); transform-origin: left; }
h1[lang="sv"] { font-family: Rajdhani, sans-serif; font-weight: 600; font-size: clamp(40px, 5vw, 64px); letter-spacing: .015em; transform: none; }
.subtitle { margin: 0; color: var(--muted); font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; letter-spacing: .015em; }
.panel, .about-panel { padding: 18px 20px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(135deg, #072237, #041a2b); }
#review-form > label { color: var(--text); font-size: 18px; }
#replay-link { display: block; width: 100%; height: 50px; margin-top: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; background: #041a2b; color: var(--text); font: inherit; text-overflow: ellipsis; }
#replay-link::placeholder { color: #8198ae; opacity: .8; }
#log-support { margin: 8px 0 0; color: #8198ae; font-size: 14px; font-weight: 400; }
.review-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: end; gap: 12px; margin-top: 18px; }
.point-of-view { min-width: 0; }
.point-of-view label { display: block; margin-bottom: 8px; color: var(--text); font-size: 18px; }
#starting-seat { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #041a2b; color: var(--text); font: inherit; }
#load-button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 6px; min-height: 48px; width: 100%; background: var(--cyan); color: #001726; font: 600 18px Rajdhani, sans-serif; cursor: pointer; }
#load-button:hover:not(:disabled) { background: #58eaf1; }
#load-button:disabled { cursor: progress; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
#load-button:focus-visible { outline-color: #fff; }
.spinner { width: 20px; height: 20px; border: 2px solid #00495844; border-top-color: #002b37; border-right-color: #002b37; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading { margin-top: 26px; }
progress { appearance: none; display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 8px; background: #133e5d; accent-color: var(--cyan); }
progress::-webkit-progress-bar { background: #133e5d; border-radius: 8px; }
progress::-webkit-progress-value { background: var(--cyan); border-radius: 8px; }
progress::-moz-progress-bar { background: var(--cyan); border-radius: 8px; }
progress:indeterminate { background: linear-gradient(90deg, var(--cyan) 0 26%, #133e5d 26%); }
progress:indeterminate::-webkit-progress-bar { background: transparent; }
#load-status { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
#load-error { margin: 18px 0 0; color: #ffb4b4; font-size: 16px; }
.about-panel { font-size: 18px; font-weight: 400; }
.about-panel h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
.about-panel p { margin: 0 0 22px; }
.about-panel p:last-child { margin-bottom: 0; }
.about-panel ul { margin: -10px 0 0; padding-left: 24px; }
.about-panel li + li { margin-top: 10px; }
a { color: var(--cyan); text-underline-offset: 4px; }
@media (max-width: 1100px) {
  header { padding: 40px 28px 0; }
  main { padding: 0 32px 40px; }
  .panel, .about-panel { padding: 18px; }
}
@media (max-width: 700px) {
  body { display: block; }
  .sidebar::before { display: none; }
  .sidebar { position: static; width: auto; padding: 16px; border-right: 0; border-bottom: 1px solid #17394f; }
  #support-button { width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 8px 28px; font-size: 16px; }
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .tabs [role="tab"] { border-bottom: 0; border-right: 1px solid var(--line); min-height: 48px; padding: 10px 2px; text-align: center; font-size: 15px; }
  .tabs [role="tab"]:last-child { border-right: 0; }
  .tabs [role="tab"][aria-selected='true']::before { inset: auto 0 0; width: auto; height: 3px; border-radius: 0 0 8px 8px; }
  main { padding: 0 16px 32px; }
  header { margin: 0 8px 28px; padding: 32px 16px 0; }
  h1 { font-size: clamp(40px, 9vw, 60px); }
  .subtitle { font-size: 22px; }
  .panel, .about-panel { padding: 22px 16px; }
  #replay-link { height: 50px; padding: 12px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
@media (min-width: 701px) and (max-height: 800px) {
  main { padding-bottom: 32px; }
  header { padding-top: 48px; margin-bottom: 28px; }
  h1 { font-size: 54px; }
}

header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start; }
#page-title { grid-column: 1; grid-row: 1; }
header > .subtitle { grid-column: 1 / -1; grid-row: 2; }
.header-controls { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.header-controls .language-selector { flex-wrap: nowrap; margin: 0; }

.social-links { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
.social-links a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 5px; color: var(--muted); }
.social-links a:hover { color: var(--cyan); background: #06304480; }
.social-links svg { width: 21px; height: 21px; fill: currentColor; }

@media (max-width: 950px) {
  header { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .header-controls { grid-column: 1; grid-row: 3; }
}
@media (max-width: 420px) {
  .header-controls .language-selector, .social-links { gap: 2px; }
  .header-controls .language-selector button, .social-links a { width: 24px; height: 28px; }
  .header-controls .language-selector img { width: 20px; height: 15px; }
  .social-links svg { width: 19px; height: 19px; }
}

.about-panel .decision-importance { margin-top: 0; }
.decision-importance .grading-examples { margin: 12px 0 20px; }
.grading-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.grading-examples figure { margin: 0; min-width: 0; }
.grading-examples a { display: block; cursor: zoom-in; }
#grading-image-viewer { padding: 48px 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
#grading-image-viewer::backdrop { background: #000c; }
#grading-image-viewer img { display: block; width: auto; height: auto; max-width: calc(100vw - 50px); max-height: calc(100dvh - 86px); object-fit: contain; }
#grading-image-viewer button { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; border-radius: 4px; background: none; color: var(--text); font-size: 28px; cursor: pointer; }
body:has(#grading-image-viewer[open]) { overflow: hidden; }
.grading-examples img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.grading-examples figcaption { margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.4; }