@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: telas do celular servidas pelo PC (lista de PCs, janelas do jogo, ajustes e o jogo em si).
   Os nomes de classe (uok-*) vêm dos scripts e não aparecem para o jogador; o visual é todo deste arquivo. */
: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.uok, html.uok body { margin: 0; height: 100%; background: #050706; color: var(--text); font-family: var(--ui); overflow: hidden; -webkit-tap-highlight-color: transparent; }
.uok-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; }
.uok-bg::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--jade), transparent); opacity: .55; }
.uok-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); }
.uok-icons { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; }
.uok-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 16px 0 2px; overflow-y: auto; }

/* Botões de ícone: losango dourado (não círculo) */
.uok-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; }
.uok-icon:active { background: var(--jade-soft); border-color: var(--jade); }
.uok-icon svg { display: block; width: 100%; height: 100%; fill: var(--gold); }
.uok-title { margin: 0; font: 600 21px var(--title); letter-spacing: .12em; color: var(--gold); text-shadow: 0 2px 10px #000; }
.uok-center { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 10px; padding: 8px 0; }

/* Cartão: moldura dupla com cantos ornamentados */
.uok-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; }
.uok-card::before, .uok-card::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--gold); pointer-events: none; }
.uok-card::before { left: -7px; top: -7px; border-right: 0; border-bottom: 0; }
.uok-card::after { right: -7px; bottom: -7px; border-left: 0; border-top: 0; }
.uok-card h2 { margin: 0; font: 600 21px var(--title); letter-spacing: .1em; color: var(--gold); }
.uok-rule { position: relative; width: 120px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--gold-deep), transparent); }
.uok-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); }
.uok-card p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); white-space: pre-line; }

/* Botões: o principal brilha em esmeralda, como o PLAY do launcher */
.uok-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; }
.uok-button:active { background: #00E78933; }
.uok-button.ghost { background: transparent; color: var(--gold); border-color: var(--gold-line); box-shadow: none; margin-left: 8px; }
.uok-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; }
.uok-field:focus { outline: none; border-color: var(--jade); }
.uok-field::placeholder { color: #8F918E; }
.uok-pin { margin-top: 14px; font: 600 38px var(--title); letter-spacing: .2em; color: var(--gold); }
.uok-scan { display: block; width: 100%; max-height: 42vh; margin-top: 12px; border-radius: 6px; background: #000; object-fit: cover; }
.uok-error { color: #FF9A8A !important; }

/* PC: brasão hexagonal com runa de status */
.uok-pc { width: 190px; padding: 18px; border: 0; background: none; color: inherit; cursor: pointer; }
.uok-pc-circle { position: relative; width: 124px; height: 124px; margin: 0 auto; box-sizing: border-box; padding: 34px; }
.uok-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); }
.uok-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); }
.uok-pc-circle svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; fill: var(--gold); }
.uok-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; }
.uok-badge svg { transform: rotate(-45deg); }
.uok-badge.gold { background: var(--jade); box-shadow: 0 0 12px #00E789AA; }
.uok-badge.gold svg { fill: #050706; }
.uok-badge.gray { background: #4A4D4B; }
.uok-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; }

/* Janelas do jogo: faixas de largura cheia (não cartões) com a runa esmeralda à esquerda */
.uok-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); }
.uok-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); }
.uok-apps-head .uok-icon { position: absolute; top: 12px; }
.uok-apps-head h1 { margin: 0; font: 600 21px var(--title); letter-spacing: .12em; white-space: nowrap; color: var(--gold); text-align: center; }
.uok-grid { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px; }
.uok-app { position: relative; width: min(560px, 100%); height: 78px; padding: 0; flex: none; box-sizing: border-box; border: 0; background: none; cursor: pointer; }
.uok-app img, .uok-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; }
.uok-app::before { content: ""; position: absolute; z-index: 1; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--gold-deep); }
.uok-app.active::before { background: var(--jade); box-shadow: 0 0 10px var(--jade); }
.uok-app.active img, .uok-app.active .uok-app-fill { border-color: var(--jade); }
.uok-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; }
.uok-app-text small { font: 500 13px var(--ui); letter-spacing: 0; color: var(--muted); }
.uok-app-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

/* Menus, avisos e esperas */
.uok-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #000000B0; }
.uok-menu { min-width: 260px; padding: 6px 0; border-radius: 6px; border: 1px solid var(--gold-line); background: #0B0F0DF5; }
.uok-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; }
.uok-menu button:active { background: var(--jade-soft); }
.uok-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; }
.uok-veil { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: #000C; }
.uok-install { align-self: center; margin: 6px 0 calc(10px + env(safe-area-inset-bottom)); min-height: 44px; font-size: 13px; }
.uok-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; }
.uok-spinner { width: 46px; height: 46px; box-sizing: border-box; border: 3px solid var(--jade-soft); border-top-color: var(--jade); border-radius: 50%; animation: uok-spin .9s linear infinite; }
@keyframes uok-spin { to { transform: rotate(360deg); } }

/* Celular em pé: ícones numa linha em cima, o PC no meio */
@media (orientation: portrait) {
    .uok-screen { flex-direction: column; }
    .uok-icons { flex-direction: row; justify-content: center; gap: 12px; padding: 12px 10px 4px; overflow: visible; }
    .uok-main { padding: 10px 16px 0; align-items: stretch; }
    .uok-title { font-size: 19px; text-align: center; }
    .uok-center { padding-bottom: 64px; }
    .uok-pc { width: 210px; }
    .uok-pc-circle { width: 144px; height: 144px; padding: 40px; }
    .uok-pc-name { font-size: 17px; }
}
@media (max-width: 640px) and (orientation: portrait) {
    .uok-apps-head { min-height: 0; padding: 66px 12px 8px; }
    .uok-apps-head h1 { font-size: clamp(16px, 5.2vw, 21px); letter-spacing: .08em; }
}

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

/* Página do jogo: o painel do Moonlight fica escondido; a saída e o teclado estão nos controles (uok-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; }
.uok-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; }

/* Só no portal */
.uok-back { left: 10px; }
.uok-beta { margin: 16px 0 0 !important; font-size: 13px !important; line-height: 1.45; color: var(--muted) !important; text-align: center; }
.uok-beta a { color: var(--gold); }
.uok-steps { margin: 14px 0 0; padding: 0 0 0 22px; text-align: left; color: var(--text); font-size: 15px; line-height: 1.5; }
.uok-steps li { margin: 6px 0; }
.uok-steps li::marker { color: var(--jade); font-weight: 700; }
.uok-pc-state { margin-top: 4px; font: 700 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #8F918E; }