/* Kazi's colourful compact HUD and spacious reading mode. */
:root{--bg:#15283d;--panel:#203650;--card:#2d4561;--edge:#526b86;--ink:#f6f2e5;--muted:#becfe0;--gold:#ffdc88;--mint:#94e0c0}body{background:#102037}#app{background:var(--bg);min-height:0}#page-header{flex-shrink:0}#app header,#app.header-compact header{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;padding:8px 10px;background:linear-gradient(120deg,#213a58,#24334f);min-height:60px}#app .brand,#app.header-compact .brand{grid-column:1;grid-row:1;display:flex;align-items:center;gap:7px;min-width:0;font-size:14px;letter-spacing:1px}#app .brand-logo{width:30px;height:34px;display:block;flex:0 0 auto;border-radius:8px}#app .brand-copy,#app.header-compact .brand-copy{display:block;min-width:0}#app .brand-copy b{white-space:nowrap;font-size:14px;letter-spacing:0}#app .brand-copy small,#app.header-compact .brand-copy small{display:block;font-size:9px;letter-spacing:0;line-height:1.5;color:#b9d9e2;white-space:nowrap}#player-level{grid-column:2;grid-row:1;padding:7px 6px;border:1px solid #f3cc79;background:linear-gradient(135deg,#775b43,#8d553f);color:#fff0bd;border-radius:10px;font:bold 18px/1.2 system-ui;box-shadow:0 2px 9px #ffcc6620}#app #status,#app.header-compact #status{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:0;margin:0;padding:0;min-width:38px;font-size:10px;align-items:flex-end}#app #status .currency{display:flex;gap:3px;font-size:10px;align-items:center;overflow:visible;flex-shrink:0}#status .ui-icon{width:12px;height:12px}.jade{color:#9fdbf2}#app .header-actions{display:flex;gap:8px;grid-column:4;grid-row:1}#app #settings,#app.header-compact #settings,#app #offline-button{position:static;width:40px;min-width:40px;min-height:44px;height:44px;padding:9px;grid-column:auto;grid-row:auto;border:1px solid #7285a0;background:#354e6d;border-radius:10px}#app #offline-button{background:#4f4864;border-color:#9584af}#app .journey{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:stretch;gap:8px;padding:5px 10px;background:#243e54;border-block:1px solid #51637b;min-height:48px}#app .stage-copy{align-self:center;min-width:0}#app .stage-copy small{font-size:8px;letter-spacing:0;color:#adc6dd}#app .stage-copy b{font-size:10px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#app #objective{padding:2px 5px;min-height:36px;gap:3px;display:flex;border:0;border-left:1px solid #617c87;border-radius:0;background:transparent;min-width:0;align-items:center;color:#f5df9c}#objective>span:last-child:not(:nth-child(2)){display:none}#app #objective .ui-icon{width:15px;height:15px}#app #objective small{font-size:8px;line-height:1.3}#app #objective b{font-size:10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#app #boss{padding:5px 7px;min-height:36px;font-size:10px;background:#536f64;color:#f6edbb;border-color:#9abea6}#boss .ui-icon{display:none}#combo-badge{position:absolute;left:9px;top:39px;display:flex;flex-direction:column;align-items:center;min-width:82px;transform:rotate(-4deg);padding:3px 10px 5px;border:2px solid #ffe1a0;border-radius:12px;background:linear-gradient(140deg,#793d58f0,#a85b45e8);box-shadow:0 3px 0 #392e4e,0 0 16px #ffc67840;pointer-events:none}#combo-badge[hidden]{display:none}#combo-badge span{font:bold 9px system-ui;letter-spacing:1px;color:#ffe5b4}#combo-count{font:900 28px/1 system-ui;color:#fff4b9;text-shadow:2px 2px #713e50}#app #battle-speed{left:91px;top:6px;font-size:8px;background:#234553dd}#app .arena-label{left:9px;top:8px;font-size:8px}#app .arena-label span{margin-left:2px;font-size:7px;padding:2px}#app #enemy-label{top:6px;font-size:9px;max-width:46%}#loot-status{position:absolute;bottom:26px;right:8px;font-size:8px;color:#fff2bb;background:#284a5ad9;border-radius:5px;padding:2px 5px;pointer-events:none}#loot-status:empty{display:none}#app #battle-log{font-size:8px;padding:2px 5px}#app #view-tools{padding:4px 8px;gap:7px;background:#253952}#app #view-tools button{font-size:11px;min-height:34px;padding:4px 3px;background:#344d70;border-color:#617b9b}#app #view-tools button:nth-child(2){background:#51446c;border-color:#8e76a5}.drawer{background:linear-gradient(145deg,#203650,#26394f)}#app .drawer-head{gap:7px;padding:5px 10px;min-height:34px;background:#223a52}#app .drawer-head h2{font-size:13px;letter-spacing:0;color:#ffe3a5;white-space:nowrap}#app .drawer-head small{font-size:8px;margin-left:auto;white-space:nowrap}#study-toggle{min-height:28px;padding:3px 8px;font-size:10px;background:#5a516f;border-color:#a397bb;color:#fff1d3}#app #camp-menu{padding:4px 7px;gap:5px;background:#273e59}#app #camp-menu>button{min-height:38px;background:#344b68}#app .camp-tabs{gap:7px}#app .camp-tabs button{min-height:38px;padding:6px 12px;font-size:12px;border-radius:8px;background:#35516e;border-color:#6e88a2}#app .camp-tabs button:nth-child(3n+2){background:#4f476b;border-color:#8675a0}#app .camp-tabs button:nth-child(3n){background:#42665d;border-color:#73968a}#app .camp-tabs button.selected{background:#e4c98a!important;color:#233b50!important;border-color:#fff0b4!important}#panel{padding:10px 12px 24px}#panel h3{color:#ffdf9f}#panel h4{color:#bcead8}.card{background:linear-gradient(130deg,#2c4866,#2c405c);border-color:#596e88;box-shadow:0 3px 10px #0b1b2b25;border-left:3px solid #8dbfce}.card:nth-child(3n){border-left-color:#c2a5df}.card:nth-child(3n+1){border-left-color:#ebc382}.card .hint{color:#c3d4e1}.card .primary,.primary{background:linear-gradient(120deg,#b8dfc8,#98c8c0);border-color:#d4efd9;color:#173f46}.resources{background:#3d526b;color:#ffdf9a;border-color:#7c8b9e}.talents .card{padding:8px 4px}.upgrade-actions .max-upgrade{background:#786045;color:#fff0c5;border-color:#c3a36e}.upgrade-actions button:first-child{background:#3e647c;border-color:#7b9fb1}.owner-card{display:flex;align-items:center;gap:12px}.owner-card img{flex-shrink:0;width:64px;height:84px}.owner-card h4{margin:0}.owner-card p{font-size:12px;line-height:1.6}.owner-card button{font-size:12px}#app nav{background:#192e46;border-color:#647a95}#app nav button{min-height:48px;font-size:10px;padding:4px 0}#app nav button.active{background:linear-gradient(#776447,#4e4a4e);color:#ffebbc;box-shadow:inset 0 2px #ffdf98}#app nav button:nth-child(2) .ui-icon{filter:sepia(.5) saturate(2)}#study-strip{display:none}.study-mode #study-strip{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:5px 10px;background:#334f65;color:#bcebd7;font-size:10px}.study-mode #study-strip button{min-height:32px;font-size:11px;padding:4px 10px}#app.study-mode .arena,#app.study-mode #view-tools,#app.study-mode #spell-screen{display:none}#app.study-mode .drawer{flex:1;min-height:0}.study-mode #study-toggle{display:none}#app.header-hidden #page-header{display:none}#app .menu-hidden .drawer{display:none}@media(max-width:400px){#app header,#app.header-compact header{gap:6px;padding:6px 8px}#app .brand-logo{display:none}#app .brand-copy b{font-size:13px}#app .header-actions{gap:8px}#app #status{min-width:35px}#app #settings,#app.header-compact #settings,#app #offline-button{width:44px;min-width:44px}#player-level{font-size:17px;padding:7px 5px}#app .drawer-head small{display:none}}@media(max-height:700px){#app header,#app.header-compact header{min-height:54px;padding-block:4px}#app .journey{min-height:43px;padding-block:3px}#app .drawer-head{min-height:31px;padding-block:3px}#app #camp-menu{padding-block:3px}}@media(prefers-reduced-motion:reduce){#combo-badge{transform:none}}

#app .stage-copy small{display:block!important}#study-toggle{background:#84624a;border-color:#e2c08e;color:#fff2c7;font-weight:750}#app .header-actions #settings,#app .header-actions #offline-button{border-radius:11px}@media(min-width:351px) and (max-width:400px){#app .brand-logo{display:block;width:24px;height:30px}#app .brand{gap:5px}#app .brand-copy b{font-size:12px}}
