@font-face { font-family: Cinzel; font-weight: 400; font-display: swap; src: url(dol/Cinzel-Regular.ttf); }
@font-face { font-family: Cinzel; font-weight: 600; font-display: swap; src: url(dol/Cinzel-SemiBold.ttf); }
/* Dynasty of Loki: the phone screens served by the PC (PC list, game windows, settings and the game itself).
   The class names (dol-*) come from the scripts and are not shown to the player; the whole look comes from this file. */
:root {
    --gold: #D8BA7D; --gold-deep: #BD9554; --gold-line: #BD955466; --gold-faint: #BD955426;
    --jade: #00E789; --jade-soft: #00E78933; --text: #ECE3D2; --muted: #A9A79F;
    --glass: linear-gradient(180deg, #161B18E6, #050706F2);
    --title: "Cinzel", Georgia, serif; --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html.dol, html.dol body { margin: 0; height: 100%; background: #050706; color: var(--text); font-family: var(--ui); overflow: hidden; -webkit-tap-highlight-color: transparent; }
.dol-bg { position: fixed; inset: 0; background:
    radial-gradient(120% 90% at 50% 40%, #05070640, #050706D9 75%),
    linear-gradient(180deg, #05070680, #050706CC),
    url(dol/hero.webp) center / cover no-repeat; }
.dol-bg::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--jade), transparent); opacity: .55; }
.dol-screen { position: fixed; inset: 0; display: flex; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.dol-icons { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; }
.dol-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 16px 0 2px; overflow-y: auto; }

/* Icon buttons: gold diamond (not a circle) */
.dol-icon { flex: none; width: 46px; height: 46px; padding: 12px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--gold-line); background: #050706B3; cursor: pointer; }
.dol-icon:active { background: var(--jade-soft); border-color: var(--jade); }
.dol-icon svg { display: block; width: 100%; height: 100%; fill: var(--gold); }
.dol-title { margin: 0; font: 600 21px var(--title); letter-spacing: .12em; color: var(--gold); text-shadow: 0 2px 10px #000; }
.dol-center { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 10px; padding: 8px 0; }

/* Card: double frame with ornamented corners */
.dol-card { position: relative; max-width: 470px; margin: 16px; padding: 26px 30px 24px; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--gold-line); outline: 1px solid var(--gold-faint); outline-offset: 5px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; }
.dol-card::before, .dol-card::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--gold); pointer-events: none; }
.dol-card::before { left: -7px; top: -7px; border-right: 0; border-bottom: 0; }
.dol-card::after { right: -7px; bottom: -7px; border-left: 0; border-top: 0; }
.dol-card h2 { margin: 0; font: 600 21px var(--title); letter-spacing: .1em; color: var(--gold); }
.dol-rule { position: relative; width: 120px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--gold-deep), transparent); }
.dol-rule::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -4px; background: #050706; border: 1px solid var(--gold); transform: rotate(45deg); }
.dol-card p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); white-space: pre-line; }

/* Buttons: the main one glows emerald, like the launcher's PLAY */
.dol-button { min-height: 52px; margin-top: 20px; padding: 0 30px; border: 1px solid var(--jade); border-radius: 8px; background: linear-gradient(180deg, #1C2620, #070A08); color: var(--text); font: 600 16px var(--title); letter-spacing: .08em; box-shadow: 0 0 18px #00E78940, inset 0 0 12px #00E7891F; cursor: pointer; }
.dol-button:active { background: #00E78933; }
.dol-button.ghost { background: transparent; color: var(--gold); border-color: var(--gold-line); box-shadow: none; margin-left: 8px; }
.dol-field { display: block; width: 100%; box-sizing: border-box; margin-top: 12px; padding: 12px 14px; font: 16px var(--ui); color: var(--text); background: #000000B3; border: 1px solid var(--gold-line); border-radius: 8px; }
.dol-field:focus { outline: none; border-color: var(--jade); }
.dol-field::placeholder { color: #8F918E; }
.dol-pin { margin-top: 14px; font: 600 38px var(--title); letter-spacing: .2em; color: var(--gold); }
.dol-scan { display: block; width: 100%; max-height: 42vh; margin-top: 12px; border-radius: 6px; background: #000; object-fit: cover; }
.dol-error { color: #FF9A8A !important; }

/* PC: hexagonal crest with a status rune */
.dol-pc { width: 190px; padding: 18px; border: 0; background: none; color: inherit; cursor: pointer; }
.dol-pc-circle { position: relative; width: 124px; height: 124px; margin: 0 auto; box-sizing: border-box; padding: 34px; }
.dol-pc-circle::before { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: linear-gradient(160deg, var(--gold), var(--gold-deep) 40%, #3A2E18); }
.dol-pc-circle::after { content: ""; position: absolute; inset: 3px; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: radial-gradient(circle at 50% 35%, #1E2A22, #050706); }
.dol-pc-circle svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; fill: var(--gold); }
.dol-badge { position: absolute; z-index: 2; right: 4px; bottom: 8px; width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 6px; transform: rotate(45deg); border: 2px solid #050706; }
.dol-badge svg { transform: rotate(-45deg); }
.dol-badge.gold { background: var(--jade); box-shadow: 0 0 12px #00E789AA; }
.dol-badge.gold svg { fill: #050706; }
.dol-badge.gray { background: #4A4D4B; }
.dol-pc-name { margin-top: 12px; font: 600 16px var(--ui); letter-spacing: .02em; color: var(--text); text-shadow: 0 2px 8px #000; overflow-wrap: anywhere; }

/* Game windows: full-width strips (not cards) with the emerald rune on the left */
.dol-apps { position: fixed; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.dol-apps-head { flex: none; position: relative; min-height: 70px; display: flex; align-items: center; justify-content: center; padding: 0 176px; border-bottom: 1px solid var(--gold-faint); }
.dol-apps-head .dol-icon { position: absolute; top: 12px; }
.dol-apps-head h1 { margin: 0; font: 600 21px var(--title); letter-spacing: .12em; white-space: nowrap; color: var(--gold); text-align: center; }
.dol-grid { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px; }
.dol-app { position: relative; width: min(560px, 100%); height: 78px; padding: 0; flex: none; box-sizing: border-box; border: 0; background: none; cursor: pointer; }
.dol-app img, .dol-app-fill { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; box-sizing: border-box; border: 1px solid var(--gold-line); background: linear-gradient(90deg, #1A221DE6, #070A08E6); object-fit: cover; opacity: .9; }
.dol-app::before { content: ""; position: absolute; z-index: 1; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--gold-deep); }
.dol-app.active::before { background: var(--jade); box-shadow: 0 0 10px var(--jade); }
.dol-app.active img, .dol-app.active .dol-app-fill { border-color: var(--jade); }
.dol-app-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 0 20px 0 22px; color: var(--text); font: 600 18px var(--title); letter-spacing: .05em; text-align: left; background: linear-gradient(90deg, #050706CC, #05070640); border-radius: 6px; }
.dol-app-text small { font: 500 13px var(--ui); letter-spacing: 0; color: var(--muted); }
.dol-app-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Settings */
.dol-settings { flex: 1; overflow-y: auto; padding: 0 16px 16px; background: #050706F0; }
.dol-setting { max-width: 560px; margin: 0 auto; padding: 15px 0; border-bottom: 1px solid var(--gold-faint); }
.dol-setting label { display: block; font: 600 16px var(--ui); }
.dol-setting small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.dol-setting select, .dol-setting input[type=range] { width: 100%; margin-top: 8px; accent-color: var(--jade); }
.dol-setting select { padding: 10px; font-size: 16px; color: var(--text); background: #0B0F0D; border: 1px solid var(--gold-line); border-radius: 6px; }
.dol-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dol-check input { width: 22px; height: 22px; accent-color: var(--jade); }
.dol-section { font: 600 17px var(--title); letter-spacing: .1em; color: var(--gold); }
.dol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dol-chip { min-width: 46px; min-height: 42px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--gold-line); background: #0B0F0D; color: var(--text); font: 600 15px var(--ui); cursor: pointer; }
.dol-chip.on { background: var(--jade-soft); border-color: var(--jade); color: #FFFFFF; }
.dol-setting .dol-button { width: 100%; margin-top: 14px; }
.dol-setting .dol-button.ghost { margin-left: 0; }

/* Menus, notices and waiting screens */
.dol-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #000000B0; }
.dol-menu { min-width: 260px; padding: 6px 0; border-radius: 6px; border: 1px solid var(--gold-line); background: #0B0F0DF5; }
.dol-menu button { display: block; width: 100%; padding: 14px 20px; border: 0; background: none; color: var(--text); font: 600 16px var(--ui); text-align: left; cursor: pointer; }
.dol-menu button:active { background: var(--jade-soft); }
.dol-toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 86vw; padding: 10px 18px; border-radius: 6px; background: #0B0F0DF0; border: 1px solid var(--gold-line); color: var(--text); font: 14px var(--ui); text-align: center; }
.dol-veil { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: #000C; }
.dol-install { align-self: center; margin: 6px 0 calc(10px + env(safe-area-inset-bottom)); min-height: 44px; font-size: 13px; }
.dol-busy { position: fixed; inset: 0; z-index: 2147483200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #050706E0; color: var(--text); font: 16px var(--ui); letter-spacing: .04em; }
.dol-spinner { width: 46px; height: 46px; box-sizing: border-box; border: 3px solid var(--jade-soft); border-top-color: var(--jade); border-radius: 50%; animation: dol-spin .9s linear infinite; }
@keyframes dol-spin { to { transform: rotate(360deg); } }

/* Phone held upright: icons in a row at the top, the PC in the middle */
@media (orientation: portrait) {
    .dol-screen { flex-direction: column; }
    .dol-icons { flex-direction: row; justify-content: center; gap: 12px; padding: 12px 10px 4px; overflow: visible; }
    .dol-main { padding: 10px 16px 0; align-items: stretch; }
    .dol-title { font-size: 19px; text-align: center; }
    .dol-center { padding-bottom: 64px; }
    .dol-pc { width: 210px; }
    .dol-pc-circle { width: 144px; height: 144px; padding: 40px; }
    .dol-pc-name { font-size: 17px; }
}
@media (max-width: 640px) and (orientation: portrait) {
    .dol-apps-head { min-height: 0; padding: 66px 12px 8px; }
    .dol-apps-head h1 { font-size: clamp(16px, 5.2vw, 21px); letter-spacing: .08em; }
}

/* A phone held sideways has little height */
@media (max-height: 480px) {
    .dol-card { margin: 8px; padding: 14px 22px; max-width: 520px; }
    .dol-card h2 { font-size: 18px; }
    .dol-card p { margin-top: 8px; font-size: 14px; line-height: 1.35; }
    .dol-button { min-height: 44px; margin-top: 10px; font-size: 14px; }
    .dol-field { margin-top: 8px; padding: 9px 12px; }
    .dol-title { font-size: 17px; }
    .dol-icons { gap: 6px; padding: 6px 10px; }
    .dol-icon { width: 40px; height: 40px; padding: 10px; }
    .dol-apps-head { min-height: 56px; }
    .dol-apps-head .dol-icon { top: 8px; }
    .dol-apps-head h1 { font-size: 19px; }
    .dol-grid { padding: 10px 14px; gap: 8px; }
    .dol-app { height: 62px; }
    .dol-pc { padding: 8px 12px; }
    .dol-pc-circle { width: 96px; height: 96px; padding: 26px; }
    .dol-badge { width: 28px; height: 28px; padding: 5px; }
}

/* Game page: the Moonlight panel stays hidden; the exit and the keyboard are in the controls (dol-controls.js) */
#sidebar-button { display: none !important; }
#sidebar-root { visibility: hidden !important; pointer-events: none !important; }
#notification-list { display: none !important; }
html.stream, body.stream { background: #000 !important; }
.dol-loading { position: fixed; inset: 0; z-index: 2147483500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; color: var(--gold); font: 600 17px var(--title); letter-spacing: .12em; background:
    radial-gradient(120% 90% at 50% 45%, #0507068C, #050706F0 70%), url(dol/hero.webp) center / cover no-repeat #050706; }
.modal-content { background: #0B0F0DF5 !important; border: 1px solid var(--gold-line) !important; border-radius: 6px !important; box-shadow: none !important; color: var(--text) !important; font-family: var(--ui) !important; }
.modal-content button { background: #0B0F0D !important; color: var(--text) !important; border: 1px solid var(--jade) !important; border-radius: 6px !important; }

/* Portal only */
.dol-back { left: 10px; }
.dol-beta { margin: 16px 0 0 !important; font-size: 13px !important; line-height: 1.45; color: var(--muted) !important; text-align: center; }
.dol-beta a { color: var(--gold); }
.dol-steps { margin: 14px 0 0; padding: 0 0 0 22px; text-align: left; color: var(--text); font-size: 15px; line-height: 1.5; }
.dol-steps li { margin: 6px 0; }
.dol-steps li::marker { color: var(--jade); font-weight: 700; }
.dol-pc-state { margin-top: 4px; font: 700 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #8F918E; }
/* Language flags (dol-lang.js) */
.dol-langs { display: flex; gap: 8px; align-items: center; }
.dol-flag { width: 32px; height: 22px; padding: 0; border: 1px solid var(--gold-line); border-radius: 4px; background: none; overflow: hidden; opacity: .45; cursor: pointer; }
.dol-flag.on { opacity: 1; border-color: var(--jade); box-shadow: 0 0 0 1px var(--jade); }
.dol-flag svg { display: block; width: 100%; height: 100%; }
.dol-apps-head .dol-langs { position: absolute; left: 66px; top: 24px; }
.dol-card .dol-langs { justify-content: center; margin: 10px 0 16px; }
.dol-icons .dol-langs { flex-direction: inherit; margin: auto; }
.dol-page-langs { position: absolute; top: 14px; right: 14px; z-index: 2; }