/* UOK: the look of the Android app (res/layout, res/drawable uok_*) */
@font-face { font-family: Coinage; src: url(uok/coinage.ttf); font-display: swap; }
:root { --gold: #F0B93A; --gold-soft: #E0A52688; --text: #FFFFFF; --muted: #E8EAEE; --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

html.uok, html.uok body { margin: 0; height: 100%; background: #0E0F13; color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.uok-bg { position: fixed; inset: 0; background: linear-gradient(#0B0C10D9, #0B0C10E6 50%, #0B0C10F5), url(uok/hero.webp) center / cover no-repeat; }
.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: 12px; padding: 10px; overflow-y: auto; }
.uok-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px 16px 0 2px; overflow-y: auto; }
.uok-icon { flex: none; width: 48px; height: 48px; padding: 11px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--gold-soft); background: #00000059; cursor: pointer; }
.uok-icon:active { background: #E0A52666; border-color: var(--gold); }
.uok-icon svg { display: block; width: 100%; height: 100%; fill: #fff; }
.uok-title { margin: 0; font: 22px Coinage, serif; letter-spacing: .08em; color: var(--gold); text-shadow: 0 2px 6px #000C; }
.uok-center { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 8px; padding: 8px 0; }

.uok-card { max-width: 480px; margin: 16px; padding: 22px 28px; box-sizing: border-box; border-radius: 16px; border: 1px solid var(--gold-soft); background: #101218D9; text-align: center; }
.uok-card h2 { margin: 0; font: bold 22px Coinage, serif; letter-spacing: .06em; color: var(--gold); text-shadow: 0 2px 6px #000C; }
.uok-rule { width: 64px; height: 2px; margin: 10px auto 0; background: #E0A52699; }
.uok-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); white-space: pre-line; }
.uok-button { min-height: 54px; margin-top: 20px; padding: 0 30px; border: 0; border-radius: 12px; background: var(--gold); color: #14161C; font: bold 17px Coinage, serif; cursor: pointer; }
.uok-button:active { background: #B8861C; }
.uok-button.ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold-soft); margin-left: 8px; }
.uok-field { display: block; width: 100%; box-sizing: border-box; margin-top: 12px; padding: 12px 14px; font-size: 16px; color: var(--text); background: #00000066; border: 1px solid var(--gold-soft); border-radius: 10px; }
.uok-pin { margin-top: 14px; font: bold 40px Coinage, serif; letter-spacing: .2em; color: var(--gold); }
.uok-scan { display: block; width: 100%; max-height: 42vh; margin-top: 12px; border-radius: 10px; background: #000; object-fit: cover; }
.uok-error { color: #FF8A80 !important; }

.uok-pc { width: 180px; padding: 20px; border: 0; background: none; color: inherit; cursor: pointer; }
.uok-pc-circle { position: relative; width: 120px; height: 120px; margin: 0 auto; box-sizing: border-box; padding: 30px; border-radius: 50%; border: 2px solid #E0A526AA; background: #10121899; }
.uok-pc-circle svg { display: block; width: 100%; height: 100%; fill: #fff; }
.uok-badge { position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: 50%; border: 2px solid #101218; }
.uok-badge.gold { background: var(--gold); }
.uok-badge.gold svg { fill: #14161C; }
.uok-badge.gray { background: #5A5F6B; }
.uok-pc-name { margin-top: 10px; font: 15px Coinage, serif; color: var(--text); text-shadow: 0 2px 6px #000C; overflow-wrap: anywhere; }

.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: 68px; display: flex; align-items: center; justify-content: center; padding: 0 68px; }
.uok-apps-head .uok-icon { position: absolute; top: 10px; }
.uok-apps-head h1 { margin: 0; font: bold 26px Coinage, serif; color: var(--gold); text-shadow: 0 2px 6px #000C; text-align: center; }
.uok-grid { flex: 1; overflow-y: auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
.uok-app { position: relative; width: 150px; height: 200px; padding: 10px; box-sizing: border-box; border: 0; background: none; cursor: pointer; }
.uok-app img, .uok-app-fill { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 6px; background: #10121899; object-fit: fill; }
.uok-app-text { position: absolute; inset: 10px; display: flex; align-items: flex-end; justify-content: center; padding: 8px; color: #fff; font: 18px Coinage, serif; text-shadow: 0 1px 4px #000, 0 0 8px #000; text-align: center; }
.uok-app.active img, .uok-app.active .uok-app-fill { outline: 2px solid var(--gold); }

.uok-settings { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
.uok-setting { max-width: 560px; margin: 0 auto; padding: 14px 0; border-bottom: 1px solid #FFFFFF22; }
.uok-setting label { display: block; font-size: 16px; }
.uok-setting small { display: block; margin-top: 3px; color: var(--muted); }
.uok-setting select, .uok-setting input[type=range] { width: 100%; margin-top: 8px; accent-color: var(--gold); }
.uok-setting select { padding: 10px; font-size: 16px; color: var(--text); background: #101218; border: 1px solid var(--gold-soft); border-radius: 8px; }
.uok-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.uok-check input { width: 22px; height: 22px; accent-color: var(--gold); }

.uok-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #000000A0; }
.uok-menu { min-width: 260px; padding: 6px 0; border-radius: 16px; border: 1px solid var(--gold-soft); background: #101218F2; }
.uok-menu button { display: block; width: 100%; padding: 14px 20px; border: 0; background: none; color: var(--text); font-size: 16px; text-align: left; cursor: pointer; }
.uok-menu button:active { background: #E0A52666; }
.uok-toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 86vw; padding: 10px 18px; border-radius: 22px; background: #101218E6; border: 1px solid var(--gold-soft); color: var(--text); font-size: 14px; text-align: center; }

/* Legibility: Coinage only on titles; everything meant to be read uses the system font */
.uok-button, .uok-pc-name, .uok-app-text { font-family: var(--ui); font-weight: 700; }
.uok-pc-name { font-size: 16px; }
.uok-card { background: #101218F5; }
.uok-card p { color: var(--text); font-size: 16px; }
.uok-field { background: #000000B0; }
.uok-field::placeholder { color: #C4C8D0; }
.uok-app { width: 170px; height: 130px; }
.uok-app img, .uok-app-fill { background: #181B23; border: 1px solid var(--gold-soft); box-sizing: border-box; object-fit: cover; }
.uok-app-text { flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 8px; border-radius: 6px; background: #000000A0; font-size: 19px; text-shadow: none; }
.uok-app-text small { font-size: 13px; font-weight: 500; color: var(--muted); }
.uok-settings { background: #101218F0; }
.uok-setting small { font-size: 14px; line-height: 1.35; }
.uok-setting label { font-weight: 600; }
.uok-menu button { font-weight: 600; }

/* A phone standing up: icons in a row on top, the PC in the middle of the screen */
@media (orientation: portrait) {
    .uok-screen { flex-direction: column; }
    .uok-icons { flex-direction: row; justify-content: center; gap: 14px; padding: 12px 10px 4px; overflow: visible; }
    .uok-main { padding: 10px 16px 0; align-items: stretch; }
    .uok-title { font-size: 20px; text-align: center; }
    .uok-center { padding-bottom: 64px; }
    .uok-pc { width: 200px; }
    .uok-pc-circle { width: 140px; height: 140px; padding: 34px; }
    .uok-pc-name { font-size: 17px; }
}

/* A phone lying down has little height */
@media (max-height: 480px) {
    .uok-card { margin: 6px; padding: 14px 22px; max-width: 520px; }
    .uok-card h2 { font-size: 19px; }
    .uok-card p { margin-top: 8px; font-size: 14px; line-height: 1.35; }
    .uok-button { min-height: 44px; margin-top: 10px; font-size: 15px; }
    .uok-field { margin-top: 8px; padding: 9px 12px; }
    .uok-title { font-size: 18px; }
    .uok-icons { gap: 6px; padding: 6px 10px; }
    .uok-icon { width: 42px; height: 42px; padding: 9px; }
    .uok-apps-head { min-height: 56px; }
    .uok-apps-head .uok-icon { top: 7px; }
    .uok-apps-head h1 { font-size: 20px; }
    .uok-pc { padding: 8px 12px; }
    .uok-pc-circle { width: 92px; height: 92px; padding: 22px; }
    .uok-badge { width: 32px; height: 32px; padding: 6px; }
}

.uok-back { left: 10px; }