:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #090b12; color: #f5f7ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 10%, #48213d 0, transparent 32%), radial-gradient(circle at 80% 0, #1b315f 0, transparent 38%), #090b12; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.brand { color: #fff; text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.nav { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; }
.nav a { color: #aeb7d1; text-decoration: none; padding: 8px 11px; border-radius: 9px; }
.nav a:hover, .nav a.active { background: #2b3349; color: #fff; }
.muted { color: #9ea8c6; }
.card { background: rgba(18, 22, 35, .9); border: 1px solid #343b55; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.3); padding: 24px; }
.login { width: min(440px, calc(100% - 32px)); margin: 10vh auto 0; }
.auth-switch { margin: 22px 0 0; text-align: center; color: #9ea8c6; }
.auth-switch a { color: #ff8da9; font-weight: 750; }
h1, h2 { margin-top: 0; }
label { display: grid; gap: 7px; margin: 14px 0; color: #cbd2e8; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #46506d; border-radius: 10px; background: #0e1220; color: #fff; padding: 11px 12px; }
textarea { resize: vertical; }
button { border: 0; border-radius: 10px; background: #ca244f; color: white; padding: 11px 16px; font-weight: 750; }
button.secondary { background: #2d354d; }
button.danger { background: #7f2638; }
button.compact { padding: 7px 10px; font-size: 13px; }
.error { min-height: 22px; color: #ff849b; }
.success { color: #72e8a7; }
.grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 22px; align-items: start; }
.users { display: grid; gap: 12px; }
.ai-access-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-bottom: 22px; }
.ai-access-card h2 { margin-bottom: 7px; }
.ai-access-card p { margin: 0; max-width: 760px; line-height: 1.55; }
.ai-access-actions { display: grid; justify-items: end; gap: 9px; }
.ai-access-actions code { padding: 10px 13px; border: 1px solid #59627d; border-radius: 8px; color: #ffe49b; background: #0e1220; font-size: 16px; user-select: all; }
.user { border: 1px solid #343b55; border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.user-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.user-actions button { padding: 8px 11px; font-size: 13px; }
.badge { display: inline-flex; border: 1px solid #495572; border-radius: 999px; padding: 3px 8px; font-size: 12px; color: #bec7df; }
#jitsi { height: min(76vh, 840px); min-height: 680px; overflow: hidden; border-radius: 16px; background: #111522; }
#jitsi-frame { display: block; width: 100%; height: min(76vh, 840px); min-height: 680px; border: 0; border-radius: 16px; background: #111522; }
.meet-status { margin-bottom: 14px; }
.meet-launch { max-width: 760px; margin: 8vh auto 0; padding: clamp(28px, 6vw, 64px); text-align: center; }
.meet-launch h1 { font-size: clamp(34px, 6vw, 60px); }
.meet-launch .lead { margin-inline: auto; }
.meet-launch-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 18px; }
.meet-launch-actions button:disabled { cursor: not-allowed; opacity: 1; color: #7f879b; border: 1px dashed #535a6b; background: repeating-linear-gradient(135deg, #242936 0, #242936 7px, #1d222e 7px, #1d222e 14px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); filter: grayscale(1); }
.meet-launch-actions button:disabled:hover, .meet-launch-actions button:disabled:active { color: #7f879b; background: repeating-linear-gradient(135deg, #242936 0, #242936 7px, #1d222e 7px, #1d222e 14px); transform: none; }
.meet-launch.conference-active { max-width: none; margin: 0 0 18px; padding: 22px; }
.meet-launch.conference-active h1 { font-size: clamp(28px, 4vw, 44px); }
.moderation-status { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #46506d; border-radius: 10px; color: #bfc9e3; background: #0e1220; }
.secondary-link { background: #2d354d; }
.turn-panel { display: grid; gap: 7px; margin: 28px 0 8px; padding: 24px; border: 2px solid #46506d; border-radius: 14px; background: #111522; transition: border-color .2s, background .2s, transform .2s; }
.turn-panel span { font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.turn-panel strong { font-size: clamp(25px, 5vw, 42px); }
.turn-panel p { margin: 0; color: #c1c8dc; }
.turn-panel.my-turn { border-color: #55d899; background: #123326; box-shadow: 0 0 36px rgba(85,216,153,.2); transform: scale(1.015); }
.turn-panel.my-turn span, .turn-panel.my-turn strong { color: #72e8a7; }
.turn-panel.dm-turn { border-color: #55d899; background: #123326; box-shadow: 0 0 36px rgba(85,216,153,.2); }
.turn-panel.dm-turn span, .turn-panel.dm-turn strong { color: #72e8a7; }
.turn-panel.other-turn { border-color: #ca244f; background: #321523; }
.turn-panel.other-turn span, .turn-panel.other-turn strong { color: #ff849b; }
.participant-list { display: grid; gap: 8px; margin-top: 14px; }
.participant { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #343b55; border-radius: 10px; }
.participant button { padding: 7px 10px; font-size: 12px; }
.eyebrow { display: block; color: #ff789a; text-transform: uppercase; font-size: 12px; font-weight: 850; letter-spacing: .14em; margin-bottom: 10px; }
.hero { padding: clamp(28px, 6vw, 70px); overflow: hidden; position: relative; }
.hero::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; right: -120px; top: -150px; background: rgba(202,36,79,.18); filter: blur(4px); pointer-events: none; }
.hero h1 { max-width: 760px; font-size: clamp(38px, 6vw, 72px); line-height: 1; margin-bottom: 20px; }
.lead { max-width: 840px; color: #dbe0f1; font-size: clamp(17px, 2.2vw, 22px); line-height: 1.65; }
.story-grid, .rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 34px 0; }
.story-grid > div, .rules-grid article { background: rgba(8,11,19,.5); border: 1px solid #343b55; border-radius: 14px; padding: 20px; }
.story-grid p, .rules-grid p, .quick-guide li { color: #bbc4dd; line-height: 1.65; }
.button-link { display: inline-block; color: #fff; background: #ca244f; text-decoration: none; border-radius: 10px; padding: 12px 17px; font-weight: 750; }
.quick-guide { margin-top: 22px; }
.quick-guide li { margin: 8px 0; }
.rules > h1 { font-size: clamp(34px, 5vw, 58px); }
.rules-grid { grid-template-columns: repeat(3, 1fr); }
.rules-grid article b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ca244f; }
.rules-grid article h2 { margin: 16px 0 7px; }
.character-form { display: grid; gap: 20px; }
.character-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.character-summary > div { display: grid; gap: 6px; }
.character-summary code { color: #dce3f7; word-break: break-all; }
.coin-balance { color: #ffd56a; font-size: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-heading p { margin: -8px 0 14px; }
.repeat-list { display: grid; gap: 10px; }
.repeat-row { border: 1px solid #343b55; border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.repeat-row label { margin: 0; }
.repeat-row .wide { grid-column: span 2; }
.repeat-row .check { display: flex; align-items: center; gap: 7px; padding-bottom: 11px; white-space: nowrap; }
.repeat-row .check input { width: auto; }
.shop-grid, .inventory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.shop-item, .inventory-item { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #343b55; border-radius: 13px; background: #101522; padding: 16px; }
.shop-item h3, .inventory-item h3 { margin: 12px 0 6px; }
.shop-item p, .inventory-item p { color: #bbc4dd; line-height: 1.45; margin: 0 0 8px; }
.shop-item small { color: #91a0c4; min-height: 36px; }
.shop-item > div { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.shop-item > div strong { color: #ffd56a; }
.inventory-item.unusable { opacity: .62; border-color: #8e3345; }
.save-row { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.meet-shell { width: min(1500px, calc(100% - 24px)); }
.meet-card { padding: 14px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, .8fr); gap: 18px; align-items: start; }
.game-left { display: grid; gap: 18px; min-width: 0; }
.game-left .meet-launch { max-width: none; margin: 0; padding: clamp(20px, 3vw, 34px); }
.game-left .meet-launch h1 { font-size: clamp(32px, 4vw, 52px); }
.meeting-roster { position: sticky; top: 16px; overflow: visible; padding: 18px; }
.meeting-roster > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.meeting-roster > header h2 { margin: 0; }
.meeting-roster > header .eyebrow { margin-bottom: 5px; }
#connected-count { display: inline-grid; place-items: center; min-width: 38px; height: 38px; border-radius: 50%; color: #10261c; background: #72e8a7; font-size: 18px; }
.connected-party { display: grid; gap: 8px; margin-top: 12px; }
.meeting-roster .meeting-member { display: grid; gap: 8px; padding: 10px; }
.meeting-character-head { position: relative; display: grid !important; grid-template-columns: 46px minmax(0, 1fr); gap: 9px !important; align-items: center !important; }
.meeting-class-image { width: 46px !important; height: 46px !important; }
.meeting-character-identity { min-width: 0; }
.meeting-character-identity h2 { overflow: hidden; margin: 0 28px 3px 0; font-size: 14px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.meeting-dice { display: flex; align-items: center; gap: 3px; min-height: 18px; margin-bottom: 3px; }
.meeting-dice-icon { flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid #7180a8; border-radius: 3px; color: #dbe3f7; background: radial-gradient(circle at 27% 27%, currentColor 0 1px, transparent 1.4px), radial-gradient(circle at 50% 50%, currentColor 0 1px, transparent 1.4px), radial-gradient(circle at 73% 73%, currentColor 0 1px, transparent 1.4px); }
.meeting-die-result { display: inline-grid; place-items: center; min-width: 20px; height: 16px; padding: 0 4px; border: 1px solid #4d5875; border-radius: 999px; color: #edf1fb; background: #20263a; font: 700 8px/1 'DM Mono', ui-monospace, monospace; }
.meeting-dice-empty { color: #6f7894; font-size: 10px; }
.meeting-health { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.meeting-health .health-progress { height: 6px; }
.meeting-health strong { color: #72e8a7; font: 700 10px/1 'DM Mono', ui-monospace, monospace; }
.meeting-resources { grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 4px; }
.meeting-resource { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px; align-items: center; }
.meeting-resource .health-progress { min-width: 0; }
.meeting-threat { padding: 3px 5px; border-radius: 999px; color: #ffd56a; background: #292417; font-size: 8px; white-space: nowrap; }
.meeting-turn-badge { position: absolute; top: 0; right: 0; padding: 3px 5px; border-radius: 999px; color: #11261c; background: #72e8a7; font-size: 8px; font-weight: 900; }
.meeting-stats { display: flex; gap: 5px; }
.meeting-stat { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 4px 3px; border-radius: 6px; background: #171c2b; }
.meeting-stat i { color: #8fa3d8; font-size: 11px; font-style: normal; }
.meeting-stat strong { font: 700 11px/1 'DM Mono', ui-monospace, monospace; }
.meeting-inventory { display: grid; gap: 6px; }
.meeting-item-icons { display: flex; flex-wrap: wrap; gap: 5px; }
.meeting-item-icon { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid #38415b; border-radius: 7px; background: #101522; }
.meeting-item-icon > .game-icon { width: 28px; height: 28px; }
.meeting-item-icon.unusable { border-color: #d84059; background: #33141d; box-shadow: inset 0 0 0 1px rgba(255,81,108,.22); }
.meeting-item-icon.unusable > .game-icon { filter: grayscale(.45) saturate(.7); opacity: .58; }
.meeting-item-icon.unusable::after { content: ''; position: absolute; width: 36px; height: 2px; transform: rotate(-45deg); background: #ff526e; box-shadow: 0 0 4px #1a060a; }
.item-quantity { position: absolute; right: -3px; bottom: -3px; min-width: 14px; padding: 2px 3px; border-radius: 999px; color: #101522; background: #e7edf8; font-size: 8px; text-align: center; }
.meeting-section-label { color: #8f9ab8; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.meeting-story-items, .meeting-effects { display: flex; flex-wrap: wrap; gap: 4px; }
.meeting-story-item { max-width: 100%; padding: 4px 7px; border: 1px solid #76539a; border-radius: 999px; color: #e7d2ff; background: #2b1b3a; font-size: 9px; font-weight: 700; line-height: 1.25; }
.meeting-story-item.unusable { border-color: #d84059; color: #ff91a4; background: #351624; text-decoration: line-through; }
.meeting-effect { display: inline-flex; align-items: center; gap: 5px; padding: 3px 3px 3px 7px; border: 1px solid #6d5e32; border-radius: 999px; color: #ffe4a2; background: #2c2819; font-size: 9px; }
.meeting-effect > b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 999px; color: #241d0d; background: #ffd56a; font-size: 8px; }
.meeting-effect .effect-tooltip { grid-template-columns: 1fr; }
.meeting-roster .rich-tooltip { right: 0; left: auto; transform: none; }
.meeting-roster .rich-tooltip::after { right: 25px; left: auto; transform: rotate(45deg); }
.meeting-presence { display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; align-items: center; padding: 13px; }
.meeting-presence small { grid-column: 2; }
.presence-dot { grid-row: 1 / 3; width: 11px; height: 11px; border-radius: 50%; background: #72e8a7; box-shadow: 0 0 12px rgba(114,232,167,.55); }
.dnd-presence { border-color: #c49539; background: #292417; }
.dnd-presence .presence-dot { background: #ffd56a; box-shadow: 0 0 12px rgba(255,213,106,.55); }
.meeting-roster .dnd-member { border-color: #c49539; background: linear-gradient(135deg, #2d2818, #171923); box-shadow: 0 0 26px rgba(255,213,106,.08); }
.dnd-avatar { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid #c49539; border-radius: 10px; color: #2b220b; background: linear-gradient(145deg, #ffe59b, #c89531); font: 900 14px/1 'DM Mono', ui-monospace, monospace; box-shadow: 0 0 18px rgba(255,213,106,.18); }
.meeting-dm-state { display: flex; align-items: center; gap: 6px; color: #e9d79e; font-size: 9px; }
.meeting-dm-state .presence-dot { width: 8px; height: 8px; background: #ffd56a; box-shadow: 0 0 10px rgba(255,213,106,.5); }
.meeting-dm-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.meeting-dm-tools span { padding: 4px; border-radius: 6px; color: #d7bd70; background: rgba(105,83,31,.25); font-size: 8px; font-weight: 900; letter-spacing: .06em; text-align: center; }
.meeting-roster .dnd-member.active-turn { border-color: #55d899; background: linear-gradient(135deg, #123326, #151d1b); box-shadow: 0 0 30px rgba(85,216,153,.2); }
.dnd-member.active-turn .dnd-avatar { border-color: #55d899; color: #10261c; background: linear-gradient(145deg, #9af4c0, #43bd7a); box-shadow: 0 0 20px rgba(85,216,153,.28); }
.dnd-member.active-turn .meeting-dm-state { color: #8aefb6; }
.dnd-member.active-turn .meeting-dm-state .presence-dot { background: #72e8a7; box-shadow: 0 0 12px rgba(114,232,167,.65); }
.dnd-member.active-turn .meeting-dm-tools span { color: #8aefb6; background: rgba(50,137,91,.24); }
.meeting-empty { padding: 20px 8px; text-align: center; line-height: 1.5; }
.character-widget { position: fixed; z-index: 50; width: min(360px, calc(100vw - 20px)); right: 26px; top: 110px; background: rgba(11,14,24,.96); border: 1px solid #59627d; border-radius: 15px; box-shadow: 0 20px 70px rgba(0,0,0,.6); overflow: hidden; backdrop-filter: blur(14px); }
.character-widget > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; background: #252c40; cursor: move; touch-action: none; }
.character-widget > header small { display: block; max-width: 240px; color: #aeb7d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-button { padding: 5px 9px; background: #3c455f; }
#widget-body { max-height: min(70vh, 700px); overflow: auto; padding: 13px; }
.character-widget.collapsed #widget-body { display: none; }
.widget-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.widget-stat { display: grid; text-align: center; background: #171c2b; border-radius: 9px; padding: 9px 4px; }
.widget-stat strong { font-size: 17px; }
.widget-stat span { color: #8f9ab8; font-size: 10px; text-transform: uppercase; }
.effect-badge { margin-top: 8px; padding: 8px 10px; color: #ffe1a6; background: #47391e; border-radius: 8px; font-size: 13px; }
.character-widget h3 { margin: 16px 0 8px; }
.widget-attributes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.widget-attributes .widget-stat { padding: 7px 2px; }
.widget-attributes .widget-stat strong { font-size: 14px; }
.widget-skills { display: grid; gap: 5px; }
.widget-skill { display: flex; justify-content: space-between; gap: 8px; background: #171c2b; border-radius: 7px; padding: 7px 9px; font-size: 13px; }
.widget-inventory { display: grid; gap: 7px; }
.widget-item { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; border-left: 3px solid #55d899; background: #171c2b; border-radius: 8px; padding: 9px; }
.widget-item span { color: #94dcb8; font-size: 11px; }
.widget-item small { grid-column: 1 / -1; color: #aeb7d1; }
.widget-item.unusable { opacity: .66; border-color: #e65068; }
.widget-item.unusable strong { text-decoration: line-through; }
.widget-item.unusable span { color: #ff8da0; }
.widget-edit { display: block; margin-top: 12px; text-align: center; color: #cbd2e8; }
@media (max-width: 1000px) { .topbar { flex-wrap: wrap; } .nav { order: 3; width: 100%; } .form-grid { grid-template-columns: repeat(2, 1fr); } .stat-inputs { grid-template-columns: repeat(3, 1fr); } .rules-grid { grid-template-columns: repeat(2, 1fr); } .shop-grid, .inventory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { .game-layout { grid-template-columns: 1fr; } .meeting-roster { position: static; max-height: none; } .connected-party { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .grid, .story-grid, .rules-grid { grid-template-columns: 1fr; } #jitsi { min-height: 72vh; } .character-widget { top: auto; bottom: 8px; right: 10px; } .repeat-row { grid-template-columns: 1fr 1fr; } .repeat-row .wide { grid-column: 1 / -1; } .character-summary { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .ai-access-card { grid-template-columns: 1fr; } .ai-access-actions { justify-items: start; } }
@media (max-width: 560px) { .shell { width: min(100% - 18px, 1180px); padding-top: 14px; } .topbar > div:last-child { width: 100%; display: flex; justify-content: space-between; } .nav { overflow-x: auto; justify-content: flex-start; } .form-grid, .stat-inputs, .shop-grid, .inventory-grid { grid-template-columns: 1fr; } .card { padding: 16px; } .hero { padding: 24px 18px; } }
@media (max-width: 680px) { .connected-party { grid-template-columns: 1fr; } #jitsi-frame { min-height: 72vh; } }

/* Kronika: omezená tvorba postavy */
.creator-page { --paper: #f3efe5; --ink: #1d2925; --forest: #23483d; --moss: #69836c; --line: #cfc8b8; --rust: #aa4d33; --gold: #bc8a35; background: var(--paper); color: var(--ink); font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif; }
.creator-page::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .32; background-image: linear-gradient(rgba(45,55,47,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(45,55,47,.025) 1px, transparent 1px); background-size: 32px 32px; }
.page-shell { position: relative; width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 70px; }
.creator-page .creator-nav { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 72px; }
.creator-page .brand { color: var(--ink); font-family: Georgia, 'Times New Roman', serif; }
.creator-page .nav a { color: #627069; }
.creator-page .nav a:hover, .creator-page .nav a.active { color: #fff; background: var(--forest); }
.creator-page .creator-nav .muted { color: #69766f; }
.creator-page button.secondary { background: #dcd6c8; color: var(--ink); }
.creator-intro { max-width: 920px; margin-bottom: 62px; }
.creator-page .eyebrow { color: var(--rust); font-weight: 800; }
.creator-intro h1 { margin: 8px 0 24px; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(46px, 7vw, 86px); line-height: .98; letter-spacing: -.045em; }
.creator-intro h1 em { color: var(--forest); font-weight: 600; }
.creator-intro .lead { color: #52615a; max-width: 760px; font-size: 19px; line-height: 1.7; }
.rule-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 28px; color: #69766f; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rule-strip span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--forest); font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; }
.state-path { color: #69766f; margin-top: 22px; font-size: 13px; }
.state-path code { color: var(--forest); font-family: 'DM Mono', ui-monospace, monospace; font-weight: 700; }
.creator { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 34px; align-items: start; }
.creator #character-form { display: grid; gap: 22px; }
.form-section { border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.62); box-shadow: 0 12px 36px rgba(38,45,39,.06); padding: 30px; }
.creator-heading { display: flex; gap: 13px; align-items: center; margin-bottom: 22px; }
.creator-heading > span { display: grid; place-items: center; flex: 0 0 34px; height: 34px; color: #fff; background: var(--forest); border-radius: 50%; font: 500 12px/1 'DM Mono', ui-monospace, monospace; }
.creator-heading h2 { margin: 0; font: 700 28px/1.1 Georgia, 'Times New Roman', serif; }
.creator-heading .points { margin-left: auto; color: var(--rust); padding: 8px 11px; border: 1px solid #d9a998; border-radius: 3px; font: 600 12px/1 'DM Mono', ui-monospace, monospace; white-space: nowrap; }
.creator-heading .points.complete { color: var(--forest); border-color: #9cb39f; background: #eef3ec; }
.creator-page label { color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.creator-page input, .creator-page textarea { border: 0; border-bottom: 1px solid #9d998d; border-radius: 0; color: var(--ink); background: transparent; padding: 11px 2px; outline: none; }
.creator-page input:focus, .creator-page textarea:focus { border-color: var(--forest); box-shadow: 0 2px 0 var(--forest); }
.creator-page input[readonly] { color: #6d7771; cursor: not-allowed; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.class-picker { border: 0; padding: 0; margin: 24px 0 0; }
.class-picker legend { margin-bottom: 12px; font-size: 13px; font-weight: 800; }
.class-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.creator-page .class-option { display: grid; gap: 6px; place-items: center; min-height: 92px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: #fbf9f3; }
.creator-page .class-option span { font-size: 27px; }
.creator-page .class-option strong { font-size: 13px; }
.creator-page .class-option:hover { border-color: var(--moss); }
.creator-page .class-option.active { color: #fff; border-color: var(--forest); background: var(--forest); box-shadow: inset 0 0 0 2px #f4efe3; }
.helper { color: #68756e; font-size: 13px; line-height: 1.55; }
.attribute-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--line); }
.attribute { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #faf8f1; padding: 15px 17px; }
.attribute > div:first-child { display: grid; gap: 3px; }
.attribute > div:first-child span { color: #77817b; font-size: 12px; }
.stepper { display: grid; grid-template-columns: 34px 42px 34px; align-items: center; }
.creator-page .stepper button { width: 34px; height: 34px; padding: 0; border: 1px solid #b8b3a6; border-radius: 50%; color: var(--forest); background: transparent; font-size: 20px; }
.creator-page .stepper button:disabled { color: #aaa69c; opacity: .45; cursor: not-allowed; }
.stepper output { text-align: center; color: var(--ink); font: 600 17px 'DM Mono', ui-monospace, monospace; }
.carry-meter { display: inline-block; margin: -6px 0 18px; color: var(--forest); font: 600 12px 'DM Mono', ui-monospace, monospace; }
.starting-kit { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 18px; padding: 15px; border-left: 3px solid var(--gold); background: #f7f1df; }
.kit-chip { padding: 6px 9px; border-radius: 999px; color: #665024; background: #e9d9ad; font-size: 12px; font-weight: 750; }
.equipment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.creator-page .creator-item { display: flex; grid-template-columns: none; flex-direction: row; align-items: center; gap: 11px; min-height: 66px; margin: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 4px; background: #fbf9f3; cursor: pointer; }
.creator-page .creator-item input { width: 18px; height: 18px; accent-color: var(--forest); box-shadow: none; }
.creator-item > span { display: grid; gap: 3px; }
.creator-item small { color: #768079; font-weight: 500; }
.creator-item:has(input:checked) { border-color: var(--forest); background: #edf2eb; }
.creator-item.not-allowed { opacity: .43; cursor: not-allowed; }
.creator-page textarea { min-height: 100px; line-height: 1.55; }
.validation { min-height: 24px; color: var(--rust); font-size: 13px; font-weight: 700; }
.save-actions { display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin-top: 16px; }
.creator-page #save-button { border-radius: 3px; color: #fff; background: var(--rust); }
.creator-page #save-button:disabled { opacity: .42; cursor: not-allowed; }
.status-ok { color: #397051; }
.status-error { color: var(--rust); }
.character-card { position: sticky; top: 20px; overflow: hidden; border: 1px solid #162f29; border-radius: 4px; color: #eef0e8; background: var(--forest); box-shadow: 0 24px 60px rgba(31,50,43,.22); }
.character-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12; background: repeating-linear-gradient(125deg, transparent 0 13px, rgba(255,255,255,.18) 14px); }
.character-card > * { position: relative; }
.card-top { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.2); color: #cad3c7; font: 500 10px 'DM Mono', ui-monospace, monospace; letter-spacing: .12em; }
.character-card > h2 { margin: 26px 24px 3px; font: 700 34px/1 Georgia, 'Times New Roman', serif; }
.character-card > #card-player { margin: 0 24px; color: #b7c5ba; font-size: 13px; }
.portrait { display: grid; place-items: center; width: 116px; height: 116px; margin: 24px auto; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.08); }
.portrait span { font-size: 52px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid rgba(255,255,255,.18); }
.stat { display: grid; gap: 5px; padding: 14px 5px; text-align: center; border-right: 1px solid rgba(255,255,255,.16); }
.stat:last-child { border-right: 0; }
.stat span { color: #b8c5bb; font-size: 10px; text-transform: uppercase; }
.stat strong { font: 600 21px 'DM Mono', ui-monospace, monospace; }
.card-block { padding: 17px 22px; border-bottom: 1px solid rgba(255,255,255,.15); }
.card-label { margin: 0 0 7px; color: #a9bbad; font: 500 10px 'DM Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.card-block > strong { color: #f0ce82; }
.card-block > p:last-child { margin: 6px 0 0; color: #c5d0c6; font-size: 12px; line-height: 1.5; }
.card-block ul { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; margin: 0; padding-left: 17px; color: #d9e0d8; font-size: 12px; }
.quick-roll > div { display: flex; gap: 8px; }
.creator-page .quick-roll input { color: #fff; border-color: rgba(255,255,255,.45); }
.creator-page .quick-roll button { padding: 7px 11px; }
.quick-roll > strong { display: block; margin-top: 9px; color: #f0ce82; font: 600 13px 'DM Mono', ui-monospace, monospace; }
.card-footer { display: flex; justify-content: space-between; padding: 16px 22px; color: #f0ce82; font: 600 13px 'DM Mono', ui-monospace, monospace; }
.enter-game { display: block; padding: 13px 22px; color: #1e362e; background: #f0ce82; text-align: center; text-decoration: none; font-weight: 800; }
@media (max-width: 1000px) { .creator { grid-template-columns: 1fr; } .character-card { position: relative; top: 0; width: min(430px, 100%); margin: 0 auto; } }
@media (max-width: 700px) { .page-shell { width: min(100% - 20px, 1240px); } .creator-page .creator-nav { margin-bottom: 42px; } .creator-intro { margin-bottom: 38px; } .form-section { padding: 20px 16px; } .field-grid, .equipment-options { grid-template-columns: 1fr; } .class-options { grid-template-columns: 1fr 1fr; } .creator-heading { flex-wrap: wrap; } .creator-heading .points { width: 100%; margin-left: 47px; } }
@media (max-width: 700px) { .profession-options { grid-template-columns: 1fr; } .profession-card { grid-template-columns: 42px minmax(0,1fr) auto; } .profession-card > button:last-child { grid-column: 2 / -1; } }

/* Tvorba postavy používá stejný tmavý vizuální systém jako zbytek webu. */
.creator-page { --paper: #090b12; --ink: #f5f7ff; --forest: #ca244f; --moss: #7180a9; --line: #343b55; --rust: #ff789a; --gold: #e8b858; background: radial-gradient(circle at 15% 10%, #48213d 0, transparent 32%), radial-gradient(circle at 80% 0, #1b315f 0, transparent 38%), #090b12; color: var(--ink); }
.creator-page::before { opacity: .16; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); }
.creator-page .creator-nav { border-color: var(--line); }
.creator-page .brand { color: #fff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.creator-page .nav a { color: #aeb7d1; }
.creator-page .nav a:hover, .creator-page .nav a.active { background: #2b3349; color: #fff; }
.creator-page .creator-nav .muted, .state-path, .creator-intro .lead, .helper { color: #aeb7d1; }
.creator-intro h1 { color: #f5f7ff; }
.creator-intro h1 em { color: #ff789a; }
.rule-strip { color: #9ea8c6; }
.rule-strip span, .creator-heading > span { background: #ca244f; }
.state-path code { color: #ff9ab2; }
.form-section { border-color: #343b55; background: rgba(18,22,35,.92); box-shadow: 0 24px 80px rgba(0,0,0,.3); border-radius: 16px; }
.creator-heading h2, .creator-page label { color: #f5f7ff; }
.creator-heading .points { color: #ff91aa; border-color: #784054; background: #241621; }
.creator-heading .points.complete { color: #72e8a7; border-color: #386b55; background: #14271f; }
.creator-page input, .creator-page textarea, .creator-page select { color: #fff; border: 1px solid #46506d; border-radius: 10px; background: #0e1220; padding: 11px 12px; }
.creator-page input:focus, .creator-page textarea:focus, .creator-page select:focus { border-color: #ca244f; box-shadow: 0 0 0 2px rgba(202,36,79,.2); }
.creator-page input[readonly] { color: #9ea8c6; background: #171b28; }
.creator-page .class-option, .attribute, .creator-page .creator-item { border-color: #343b55; color: #eef1fa; background: #101522; }
.creator-page .class-option:hover { border-color: #7783a6; }
.creator-page .class-option.active { border-color: #ca244f; background: #422134; box-shadow: inset 0 0 0 2px #ca244f; }
.creator-page .class-option small { color: #70d6a3; font: 700 10px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; }
.creator-page .class-option.class-taken { cursor: not-allowed; border-color: #3a4050; color: #747c91; background: #0b0e16; opacity: .58; filter: grayscale(1); }
.creator-page .class-option.class-taken small { color: #ff789a; }
.creator-page .class-option.class-taken:hover { border-color: #3a4050; }
.profession-options { display: grid; grid-template-columns: 1fr; gap: 9px; }
.profession-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid #343b55; border-radius: 12px; background: #101522; }
.profession-card.active { border-color: #ca244f; background: #2b1b28; box-shadow: inset 0 0 0 1px #ca244f; }
.profession-card > .game-icon { width: 46px; height: 46px; }
.profession-copy { display: grid; gap: 4px; min-width: 0; }
.profession-copy small { overflow: hidden; color: #939db9; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.profession-card .stepper { display: flex; align-items: center; gap: 5px; }
.profession-card .stepper button { width: 30px; height: 30px; padding: 0; }
.attribute-list { border-color: #343b55; background: #343b55; }
.attribute > div:first-child span, .creator-item small { color: #939db9; }
.creator-page .stepper button { color: #ff9ab2; border-color: #59627d; }
.creator-page .stepper button:disabled { color: #6e7487; }
.stepper output { color: #fff; }
.carry-meter { color: #b8c3e0; }
.starting-kit { border-color: #e8b858; background: #292417; }
.kit-chip { display: inline-flex; align-items: center; gap: 6px; color: #ffe5a2; background: #493e20; }
.creator-item:has(input:checked) { border-color: #ca244f; background: #2b1b28; }
.validation, .status-error { color: #ff849b; }
.status-ok { color: #72e8a7; }
.character-card { border-color: #59627d; color: #f5f7ff; background: rgba(11,14,24,.97); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.character-card::before { opacity: .08; }
.portrait { border-color: #59627d; background: radial-gradient(circle, #342237, #151824); }
.portrait .game-icon { width: 104px; height: 104px; }
.card-top, .stat-grid, .card-block { border-color: rgba(255,255,255,.12); }
.card-block > strong, .card-footer, .quick-roll > strong { color: #ffd56a; }
.enter-game { color: #fff; background: #ca244f; }
.enter-game:hover { background: #e03260; }
.game-icon { display: inline-block; flex: 0 0 auto; width: 38px; height: 38px; background-image: url('/assets/generated/inventory-icons-v1.png'); background-repeat: no-repeat; background-size: 400% 400%; background-position: 0 0; vertical-align: middle; }
.icon-sword { background-position: 0 0; }
.icon-shield { background-position: 33.333% 0; }
.icon-bow { background-position: 66.667% 0; }
.icon-dagger { background-position: 100% 0; }
.icon-staff { background-position: 0 33.333%; }
.icon-potion { background-position: 33.333% 33.333%; }
.icon-rope { background-position: 66.667% 33.333%; }
.icon-rations { background-position: 100% 33.333%; }
.icon-cloak { background-position: 0 66.667%; }
.icon-trap { background-position: 33.333% 66.667%; }
.icon-bomb { background-position: 66.667% 66.667%; }
.icon-focus { background-position: 100% 66.667%; }
.icon-lantern { background-position: 0 100%; }
.icon-notebook { background-position: 33.333% 100%; }
.icon-armor { background-position: 66.667% 100%; }
.icon-alchemy { background-position: 100% 100%; }
.class-option .game-icon { width: 54px; height: 54px; }
.creator-item .game-icon { width: 46px; height: 46px; }
.kit-chip .game-icon, #inventory-list .game-icon { width: 26px; height: 26px; }
#inventory-list li { display: flex; align-items: center; gap: 5px; }
#inventory-list li.unusable { color: #ff8da0; text-decoration: line-through; opacity: .68; }
.shop-section-title { grid-column: 1 / -1; margin: 14px 0 2px; color: #ffd56a; font-size: 14px; letter-spacing: .04em; }
.shop-section-title:first-child { margin-top: 0; }
.story-item-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px dashed #b998e8; border-radius: 50%; color: #e5d0ff; background: radial-gradient(circle, #50346e, #21172e); font: 900 22px/1 Georgia, serif; box-shadow: 0 0 18px rgba(165,112,223,.2); }
#inventory-list .story-item-icon { width: 26px; height: 26px; font-size: 16px; }
#inventory-list li.story-item { color: #e5d0ff; }
#inventory-list li small { display: inline-block; margin-left: 4px; padding: 2px 5px; border-radius: 999px; color: #e5d0ff; background: #3a2850; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-decoration: none; }
.secret-ability-section { border-color: #5c4174; background: linear-gradient(135deg, rgba(45,28,60,.96), rgba(18,22,35,.92)); }
.creator-heading .points.used { color: #ff8da0; border-color: #8e3345; background: #321523; }
.secret-card-block { background: linear-gradient(135deg, rgba(81,48,103,.34), transparent); }
.secret-card-block > p:nth-of-type(2) { color: #d9c5ed; }
.secret-ready, .secret-used { display: inline-block; margin-top: 9px; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.secret-ready { color: #72e8a7; background: #173426; }
.secret-used { color: #ff8da0; background: #3a1823; }
.party-item.story-item { border-color: #65467c; background: #21172e; }
.party-item.story-item span, .story-heading { color: #d6b9f2; }
.secret-power-description, .secret-effect { margin: 8px 0 0; padding: 9px 11px; border-left: 2px solid #b998e8; color: #dbc8ec !important; background: rgba(85,54,111,.24); font-size: 12px; line-height: 1.5; }

.tooltip-host { position: relative; }
.rich-tooltip, .creator-item > .rich-tooltip { position: absolute; z-index: 300; left: 50%; bottom: calc(100% + 12px); display: none; grid-template-columns: 82px minmax(0, 1fr); gap: 13px; width: min(380px, 84vw); padding: 14px; transform: translateX(-50%); border: 1px solid #697596; border-radius: 13px; color: #f5f7ff; background: rgba(8,11,19,.98); box-shadow: 0 22px 65px rgba(0,0,0,.7); text-align: left; pointer-events: none; text-decoration: none; }
.tooltip-host:hover > .rich-tooltip, .tooltip-host:focus > .rich-tooltip, .tooltip-host:focus-within > .rich-tooltip { display: grid; }
.rich-tooltip::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); border-right: 1px solid #697596; border-bottom: 1px solid #697596; background: #090c14; }
.rich-tooltip .tooltip-image { width: 82px; height: 82px; font-size: 44px; }
.tooltip-content { display: grid; gap: 5px; min-width: 0; }
.tooltip-content > strong { color: #fff; font-size: 16px; }
.tooltip-content > small { color: #ff91aa; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.tooltip-content > span:not(.tooltip-bonuses) { color: #c4cce1; font-size: 12px; line-height: 1.45; }
.tooltip-content > em { color: #eed69a; font-size: 11px; font-style: normal; }
.tooltip-bonuses { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.tooltip-bonuses b { padding: 4px 6px; border: 1px solid #386b55; border-radius: 999px; color: #72e8a7; background: #14271f; font-size: 10px; }
.character-card { overflow: visible; }
.party-item.unusable .rich-tooltip, #inventory-list li.unusable .rich-tooltip { opacity: 1; color: #f5f7ff; text-decoration: none; }
@media (max-width: 560px) { .rich-tooltip, .creator-item > .rich-tooltip { left: 0; grid-template-columns: 64px minmax(0,1fr); width: min(330px, calc(100vw - 42px)); transform: none; } .meeting-roster .rich-tooltip { right: auto; } .rich-tooltip .tooltip-image { width: 64px; height: 64px; } .rich-tooltip::after { left: 28px; } }

.health-progress { display: block; width: 100%; height: 12px; overflow: hidden; border: 0; border-radius: 999px; background: #291823; accent-color: #55d899; }
.health-progress::-webkit-progress-bar { border-radius: 999px; background: #291823; }
.health-progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #ca244f, #55d899); }
.health-progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #ca244f, #55d899); }
.resource-bars { display: grid; gap: 8px; padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.resource-row { display: grid; gap: 4px; }
.resource-row > div { display: flex; justify-content: space-between; color: #b8c5bb; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.resource-progress { display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; background: #291823; }
.resource-progress::-webkit-progress-bar { background: #291823; }
.resource-body { accent-color: #e15f64; } .resource-soul { accent-color: #6f9bea; } .resource-influence { accent-color: #d69a55; }
.resource-body::-webkit-progress-value { background: #e15f64; } .resource-soul::-webkit-progress-value { background: #6f9bea; } .resource-influence::-webkit-progress-value { background: #d69a55; }
.resource-body::-moz-progress-bar { background: #e15f64; } .resource-soul::-moz-progress-bar { background: #6f9bea; } .resource-influence::-moz-progress-bar { background: #d69a55; }
.health-block { display: grid; gap: 8px; padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.health-block > div, .party-health > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.health-block span { color: #b8c5bb; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.health-block strong { color: #72e8a7; font: 600 13px 'DM Mono', ui-monospace, monospace; }

.dm-narration { display: grid; gap: 7px; margin-top: 16px; padding: 18px 20px; border-left: 3px solid #e8b858; border-radius: 10px; background: #292417; text-align: left; }
.dm-narration > span { color: #ffd56a; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.dm-narration p { margin: 0; color: #f1e6c9; font-size: 16px; line-height: 1.55; }
.dm-narration strong { color: #ffd56a; font-size: 13px; }

.party-hero { margin-bottom: 22px; padding: clamp(24px, 5vw, 48px); }
.party-hero h1 { margin-bottom: 18px; font-size: clamp(36px, 6vw, 64px); }
.party-turn { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid #46506d; border-radius: 12px; background: #101522; }
.party-turn > strong { color: #72e8a7; font-size: clamp(22px, 4vw, 34px); }
.party-turn p { margin: 2px 0 0; color: #c6cee4; }
.party-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.party-member { display: grid; gap: 16px; }
.party-member.active-turn { border-color: #55d899; box-shadow: 0 0 34px rgba(85,216,153,.14); }
.party-member > header { display: flex; align-items: center; gap: 13px; }
.party-member > header .game-icon { width: 58px; height: 58px; }
.party-member h2 { margin: 0 0 4px; }
.party-member header p { margin: 0; }
.turn-badge { margin-left: auto; padding: 6px 9px; border-radius: 999px; color: #11261c; background: #72e8a7; font-size: 11px; font-weight: 900; }
.party-health { display: grid; gap: 8px; }
.party-health span { color: #aeb7d1; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.party-health strong { color: #72e8a7; }
.party-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.party-stats > div { display: grid; gap: 4px; padding: 10px 5px; border-radius: 9px; background: #171c2b; text-align: center; }
.party-stats span { color: #929dbb; font-size: 10px; text-transform: uppercase; }
.party-stats strong { font-size: 18px; }
.party-member h3 { margin: 4px 0 -7px; color: #dce2f2; font-size: 14px; }
.party-inventory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.party-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border: 1px solid #343b55; border-radius: 10px; background: #101522; }
.party-item .game-icon { width: 42px; height: 42px; }
.party-item > div { display: grid; min-width: 0; }
.party-item strong { overflow: hidden; text-overflow: ellipsis; }
.party-item span { color: #9ea8c6; font-size: 11px; }
.party-item.unusable { border-color: #8e3345; opacity: .68; }
.party-item.unusable strong { color: #ff8da0; text-decoration: line-through; }
.party-effects { display: flex; flex-wrap: wrap; gap: 7px; }
.party-updated { text-align: right; }

@media (max-width: 800px) { .party-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .party-inventory { grid-template-columns: 1fr; } .party-member > header { align-items: flex-start; } }

.bestiary-hero { margin-bottom: 18px; padding: clamp(24px,5vw,48px); background: radial-gradient(circle at 85% 10%, rgba(202,36,79,.22), transparent 36%), #111624; }
.bestiary-hero h1 { margin-bottom: 10px; font-size: clamp(42px,7vw,76px); }
.bestiary-controls { display: grid; grid-template-columns: minmax(0,2fr) minmax(180px,1fr); gap: 12px; margin-top: 24px; }
.bestiary-controls label { margin: 0; }
.bestiary-controls input, .bestiary-controls select { width: 100%; margin-top: 7px; color: #f5f7ff; border: 1px solid #46506d; border-radius: 10px; background: #0e1220; padding: 11px 12px; }
.bestiary-layout { display: grid; grid-template-columns: minmax(230px,.65fr) minmax(0,1.8fr); gap: 18px; align-items: start; }
.bestiary-list { position: sticky; top: 16px; display: grid; gap: 6px; max-height: calc(100vh - 32px); overflow: auto; padding: 14px; }
.bestiary-list > .eyebrow { padding: 5px 7px; }
.bestiary-list-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 9px; color: #e8ecf7; background: transparent; text-align: left; }
.bestiary-list-item:hover, .bestiary-list-item.active { border-color: #6b4860; background: #2b1b28; transform: none; }
.bestiary-list-item small { color: #929dbb; font-size: 9px; text-transform: uppercase; }
.bestiary-glyph, .bestiary-main-glyph { display: inline-grid; place-items: center; border: 1px solid #704358; border-radius: 50%; color: #ffd6df; background: radial-gradient(circle,#5a2941,#211522); font: 700 17px Georgia,serif; }
.bestiary-glyph { width: 34px; height: 34px; }
.bestiary-detail { min-height: 560px; padding: clamp(22px,4vw,42px); }
.bestiary-detail-head { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 20px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid #343b55; }
.bestiary-main-glyph { width: 92px; height: 92px; font-size: 42px; }
.bestiary-detail h2 { margin: 2px 0 8px; font-size: clamp(34px,5vw,58px); }
.bestiary-detail .lead { margin: 0; }
.bestiary-boundaries { margin-top: 22px; padding: 18px; border: 1px solid #5d4d2d; border-radius: 13px; background: linear-gradient(135deg,#292417,#171825); }
.bestiary-boundary-lead { margin-bottom: 12px; color: #ffe09a; font-size: clamp(17px,3vw,23px); font-weight: 850; }
.boundary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.boundary-card { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 2px 8px; align-items: center; padding: 11px; border: 1px solid #3b435b; border-radius: 9px; background: #101522; }
.boundary-card.best-target { border-color: #55d899; background: #14271f; box-shadow: inset 0 0 0 1px rgba(85,216,153,.25); }
.boundary-icon { grid-row: span 2; color: #9eb1e5; font-size: 19px; text-align: center; }
.boundary-card strong { color: #f4f6fc; }
.boundary-card small { color: #929dbb; font-size: 9px; line-height: 1.3; }
.boundary-card.best-target .boundary-icon, .boundary-card.best-target strong { color: #72e8a7; }
.boundary-best { grid-column: 1 / -1; margin-top: 5px; color: #72e8a7; font-size: 8px; letter-spacing: .08em; }
.boundary-note { margin: 11px 0 0; color: #aeb7d1; font-size: 11px; line-height: 1.5; }
.bestiary-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 22px 0; }
.bestiary-fact { padding: 17px; border: 1px solid #343b55; border-radius: 12px; background: #101522; }
.bestiary-fact h3 { margin: 0 0 8px; color: #ffd56a; font-size: 14px; }
.bestiary-fact p { margin: 0; color: #c6cee4; line-height: 1.55; }
.bestiary-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.scene-bestiary { margin-top: 12px; padding: 14px; border: 1px solid #5c4174; border-radius: 11px; background: linear-gradient(135deg,#25192f,#111522); }
#scene-bestiary-links { display: flex; flex-wrap: wrap; gap: 8px; }
.scene-creature { display: inline-flex; align-items: center; gap: 7px; padding: 6px 7px 6px 11px; border: 1px solid #76539a; border-radius: 999px; background: #2b1b3a; }
.scene-creature > a { color: #ead8ff; text-decoration: none; font-weight: 800; }
.scene-creature-target { padding: 3px 6px; border-radius: 999px; color: #15251d; background: #72e8a7; font-size: 9px; font-weight: 900; white-space: nowrap; }
.scene-creature button { padding: 5px 8px; font-size: 9px; }
#description-request-status { margin: 8px 2px 0; font-size: 11px; }
@media (max-width: 760px) { .bestiary-controls,.bestiary-layout,.bestiary-facts { grid-template-columns: 1fr; } .boundary-grid { grid-template-columns: 1fr; } .bestiary-list { position: relative; top: 0; max-height: 330px; } .bestiary-detail-head { grid-template-columns: 64px minmax(0,1fr); } .bestiary-main-glyph { width: 64px; height: 64px; font-size: 30px; } }