* {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #05070a;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        canvas {
            touch-action: none;
            display: block;
            width: 100vw;
            height: 100vh;
        }

        /* Title / Start Screen Overlay */
        #start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, #0f172a 0%, #05070a 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 50;
            color: #fff;
            text-align: center;
            padding: 20px;
        }
        #start-screen h1 {
            font-size: 38px;
            margin: 0 0 10px 0;
            color: #00d2d3;
            text-shadow: 0 0 20px rgba(0, 210, 211, 0.6);
            letter-spacing: 2px;
        }
        #start-screen p {
            color: #94a3b8;
            font-size: 14px;
            max-width: 300px;
            margin-bottom: 30px;
            line-height: 1.5;
        }
        #play-game-btn {
            background: linear-gradient(135deg, #00d2d3, #2e86de);
            color: #fff;
            border: none;
            padding: 16px 42px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: 0 0 25px rgba(0, 210, 211, 0.5);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            touch-action: auto;
        }
        #play-game-btn:active {
            transform: scale(0.95);
        }

        #hud {
            position: absolute;
            top: 15px;
            left: 15px;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            pointer-events: none;
            text-shadow: 0 0 5px rgba(0,0,0,0.9);
            z-index: 5;
            display: none;
        }
        .bar-container {
            width: 190px;
            height: 14px;
            background: rgba(20, 20, 30, 0.8);
            border-radius: 8px;
            overflow: hidden;
            margin-top: 4px;
            margin-bottom: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
        }
        .bar-fill {
            height: 100%;
            width: 100%;
            transition: width 0.1s ease;
        }
        #hp-fill { background: linear-gradient(90deg, #ff4757, #ff6b81); box-shadow: 0 0 8px #ff4757; }
        #exp-fill { background: linear-gradient(90deg, #2ed573, #7bed9f); box-shadow: 0 0 8px #2ed573; }
        
        #equipped-hud {
            margin-top: 10px;
            padding: 8px 10px;
            width: 220px;
            background: rgba(10, 14, 22, 0.82);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 8px;
            font-size: 11px;
            line-height: 1.6;
        }
        .gear-label { color: #94a3b8; font-size: 10px; letter-spacing: 1px; }
        #equipped-hud span { overflow-wrap: anywhere; }
        @media (max-width: 600px) {
            #menu-hud { flex-direction: column; gap: 5px; }
            #hud { font-size: 12px; }
            .bar-container { width: 155px; }
            #equipped-hud { width: 175px; }
            .ui-btn { padding: 8px; font-size: 11px; }
        }
        #menu-hud {
            position: absolute;
            top: 15px;
            right: 15px;
            display: none;
            gap: 8px;
            z-index: 5;
        }
        .ui-btn {
            background: rgba(15, 22, 36, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.25);
            color: #fff;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            backdrop-filter: blur(4px);
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            touch-action: auto;
        }
        .ui-btn:active { transform: scale(0.95); }
        .ui-btn.upgrade-ready {
            border-color: #ffa502;
            box-shadow: 0 0 12px #ffa502;
            animation: pulse-border 1s infinite alternate;
        }

        #potion-btn {
            position: absolute;
            bottom: 30px;
            left: 30px;
            width: 75px;
            height: 75px;
            border-radius: 50%;
            background: rgba(20, 25, 35, 0.85);
            border: 2px solid #ff4757;
            color: #fff;
            font-size: 11px;
            font-weight: bold;
            display: none;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 0 0 15px rgba(255, 71, 87, 0.4);
            z-index: 10;
            transition: transform 0.1s ease, box-shadow 0.2s ease;
        }
        #potion-btn:active { transform: scale(0.9); }
        #potion-btn.has-potion {
            background: radial-gradient(circle, #ff4757, #2f3542);
            box-shadow: 0 0 20px #ff4757;
        }

        #pause-modal {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 320px;
            background: rgba(10, 14, 22, 0.95);
            border: 2px solid #00d2d3;
            border-radius: 12px;
            padding: 20px;
            color: #fff;
            text-align: center;
            box-shadow: 0 0 30px rgba(0, 210, 211, 0.3);
            z-index: 25;
            touch-action: auto;
        }
        #pause-modal h2 { margin: 0 0 15px 0; color: #00d2d3; }
        .pause-btn {
            width: 100%;
            padding: 10px;
            margin-top: 8px;
            border-radius: 6px;
            border: none;
            font-weight: bold;
            cursor: pointer;
        }
        #resume-btn { background: #2ed573; color: #fff; }

        #inventory-modal { max-height: 94dvh; overflow-y: auto; }
        #inventory-modal, #inventory-modal * { touch-action: pan-y; }
        .character-sheet {
            display:grid; grid-template-columns:1fr 110px 1fr; gap:10px;
            align-items:center; padding:12px 0; background:radial-gradient(ellipse,#25303e,#0c1018);
            border:1px solid #594b31; border-radius:10px; margin-bottom:12px;
        }
        .equipment-slot { min-height:105px; padding:10px 6px; background:#151c29;
            border:2px solid #746344; border-radius:8px; color:#d8c398;
            font-size:11px; cursor:pointer; text-align:center; }
        .equipment-slot.selected { border-color:#f8d779; background:#343023; }
        .equipment-slot strong { display:block; margin:5px 0; font-size:20px; }
        .character-portrait { width:110px; height:180px; }
        #sheet-stats { color:#cbd5e1; font-size:12px; text-align:center; line-height:1.6; margin:8px 0; }
        .supply-slots { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0; }
        .supply-slots .equipment-slot { min-height:80px; }
        #menu-hud { flex-wrap:wrap;justify-content:flex-end;max-width:460px; }
        @media(max-width:1000px){#menu-hud{max-width:350px}}
        @media(max-width:600px){#menu-hud{flex-direction:row;width:145px;gap:4px}.ui-btn{flex:1 1 auto}}
        .realm-modal { display:none;position:absolute;z-index:35;top:50%;left:50%;transform:translate(-50%,-50%);
            width:min(94%,760px);max-height:92dvh;overflow-y:auto;background:linear-gradient(145deg,#1d2934,#0b131c);
            border:1px solid #bda16b;border-radius:14px;padding:18px;color:#e2e8f0; }
        .realm-modal,.realm-modal * { touch-action:pan-y; }
        .realm-modal h2 { color:#f8d779;text-align:center;margin:0 0 12px; }
        .realm-map { width:100%;height:auto;max-height:310px;background:#1d3440;border-radius:10px; }
        .realm-map text { font-family:Georgia,serif; }
        .travel-cards,.building-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0; }
        .realm-card { padding:12px;background:#172433;color:#e2e8f0;border:1px solid #52647b;border-radius:9px;text-align:left;min-height:98px;cursor:pointer;font-size:12px;line-height:1.5; }
        .realm-card b { color:#f8d779;font-size:13px; }
        .realm-card:disabled { opacity:.5;cursor:default; }
        .realm-card small { color:#a7b7ca; }
        .realm-close { width:100%;padding:12px;border:0;border-radius:8px;background:#af894b;color:white;font-weight:bold; }
        .resource-line { display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:10px;background:#0b1622;border-radius:8px;font-size:12px; }
        #realm-status,#settlement-status { text-align:center;color:#cbd5e1;font-size:12px;line-height:1.6;margin:10px 0; }
        #interact-btn { position:absolute;bottom:30px;left:120px;display:none;z-index:10;border:1px solid #d1b378;
            border-radius:12px;background:#263d30;color:#f3e5bd;padding:15px 12px;font-weight:bold;touch-action:manipulation; }
        @media(max-width:600px){.travel-cards,.building-cards{grid-template-columns:repeat(2,1fr)}#interact-btn{bottom:120px;left:24px}}
        #death-modal { display:none;position:absolute;inset:0;z-index:45;background:rgba(5,7,10,.9);
            color:#e2e8f0;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px; }
        #death-modal h1 { color:#ff6b81; }
        #death-modal p { max-width:390px;line-height:1.6; }
        #respawn-btn { padding:14px 22px;border:1px solid #c8a565;border-radius:8px;background:#7a5e2e;color:white;font-weight:bold; }
        @media(max-width:600px){.skill-branches{grid-template-columns:repeat(2,1fr)!important}}
        #equipment-help { color:#f8d779; text-align:center; font-size:11px; min-height:28px; }
        .inv-slot.selected { border:2px solid #f8d779; box-shadow:0 0 10px #8e6a32; }
        #skills-modal { display:none; position:absolute; z-index:30; top:50%;left:50%;transform:translate(-50%,-50%);
            width:min(94%,680px);max-height:92dvh;overflow-y:auto;padding:18px;border-radius:14px;
            border:1px solid #aa8b53;background:linear-gradient(160deg,#202432,#0b101b);color:#e2e8f0; }
        #skills-modal,#skills-modal * { touch-action:pan-y; }
        #skills-modal h2 { margin:0;color:#f8d779;text-align:center; }
        #skill-summary { text-align:center;font-size:12px;margin:10px 0 16px;color:#aab8cf; }
        .skill-branches { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
        .skill-branch { padding:10px;border:1px solid #3a475d;border-radius:10px;background:#101726; }
        .skill-branch h3 { margin:0 0 12px;font-size:13px;text-align:center;color:#f8d779; }
        .skill-node { width:100%;padding:10px 7px;min-height:92px;border:1px solid #5b6271;border-radius:8px;
            background:#202d40;color:#e2e8f0;cursor:pointer;font-size:11px;line-height:1.4; }
        .skill-xp-track{height:12px;border:1px solid #887652;border-radius:8px;background:#111b20;overflow:hidden;margin:9px 0 5px;}.skill-xp-fill{height:100%;background:linear-gradient(90deg,#688471,#cfbb7a);transition:width .2s;}.skill-benefit{margin-top:5px;line-height:1.4;}.skill-node small{color:#c5b99b;}
        .skill-node:disabled { opacity:.45;cursor:default; }
        .skill-node.learned { border-color:#d3ad60;background:#3a3423; }
        .tree-link { height:16px;width:2px;background:#aa8b53;margin:auto; }
        .style-select { display:flex;justify-content:center;gap:8px;margin:16px 0;flex-wrap:wrap; }
        .style-select button { padding:9px 14px;background:#202d40;color:white;border:1px solid #63738e;border-radius:7px; }
        .style-select button.active { border-color:#f8d779;background:#665028; }
        .style-select button:disabled { opacity:.4; }
        #close-skills-btn { width:100%;padding:12px;background:#b58a42;border:0;border-radius:7px;font-weight:bold; }
        #minimap { position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:84px;height:100px;
            border:1px solid #a68b5c;background:#080d16;opacity:.85;display:none;pointer-events:none;z-index:6; }
        @media(max-width:420px){.skill-branches{gap:5px}.skill-branch{padding:6px}.skill-node{font-size:10px}.character-sheet{grid-template-columns:1fr 90px 1fr}.character-portrait{width:90px}}
        #inventory-modal {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 400px;
            background: rgba(10, 14, 22, 0.95);
            border: 2px solid rgba(0, 210, 211, 0.5);
            border-radius: 12px;
            padding: 16px;
            color: #fff;
            box-shadow: 0 0 30px rgba(0, 210, 211, 0.3);
            z-index: 20;
            touch-action: auto;
        }
        #inventory-modal h2 {
            margin: 0 0 12px 0;
            font-size: 18px;
            color: #00d2d3;
            text-align: center;
        }
        .inv-section-title {
            font-size: 12px;
            color: #888;
            margin-bottom: 6px;
            text-transform: uppercase;
        }
        .equip-group {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }
        .equip-card {
            flex: 1;
            padding: 8px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            font-size: 11px;
            text-align: center;
        }
        .inv-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            max-height: 180px;
            overflow-y: auto;
        }
        .inv-slot {
            aspect-ratio: 1;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            cursor: pointer;
            padding: 4px;
            text-align: center;
            position: relative;
        }
        .inv-slot.empty {
            border-style: solid;
            color: #444;
        }
        .item-count-badge {
            position: absolute;
            bottom: 2px;
            right: 4px;
            font-size: 10px;
            font-weight: bold;
            color: #2ed573;
        }
        #close-inv-btn {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            background: #ff4757;
            border: none;
            color: #fff;
            border-radius: 6px;
            font-weight: bold;
        }

        #block-btn {
            position: absolute; bottom: 125px; right: 30px;
            width: 85px; height: 64px; border-radius: 14px;
            border: 2px solid #7dd3fc; background: rgba(15,23,42,.9);
            color: #e0f2fe; font-weight: bold; display: none; z-index: 10;
            touch-action: none;
        }
        #block-btn:disabled {opacity:.4;cursor:default;}
        #block-btn.active { background: #2563eb; box-shadow: 0 0 18px #7dd3fc; }
        #castle-win {
            display:none; position:absolute; inset:0; z-index:40;
            background:rgba(5,7,10,.92); align-items:center; justify-content:center;
            flex-direction:column; text-align:center; color:#f8d779; padding:24px;
        }
        #castle-win p { max-width:380px; color:#e2e8f0; line-height:1.6; }
        #castle-win button { margin:8px; padding:14px 24px; border-radius:8px; cursor:pointer; }
        #ult-btn {
            position: absolute;
            bottom: 30px;
            right: 30px;
            width: 85px;
            height: 85px;
            border-radius: 50%;
            background: rgba(20, 25, 35, 0.8);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #888;
            font-size: 12px;
            font-weight: bold;
            display: none;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 0 0 15px rgba(0,0,0,0.7);
            transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
            z-index: 10;
        }
        #ult-btn.ready {
            background: radial-gradient(circle, #ffa502, #ff4757);
            border-color: #fff;
            color: #fff;
            text-shadow: 0 0 5px rgba(0,0,0,0.8);
            box-shadow: 0 0 25px #ffa502;
            animation: pulse 1.2s infinite alternate;
        }
        #ult-btn:active { transform: scale(0.9); }

        @keyframes pulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
        }
        @keyframes pulse-border {
            0% { border-color: #ffa502; }
            100% { border-color: #fff; }
        }
    
        /* Dedicated map viewport with separate status and control rails. */
        #gameCanvas {position:absolute;top:170px;left:50%;transform:translateX(-50%);width:min(100vw, calc((100dvh - 270px)*.84));height:calc(100dvh - 270px);}
        #hud {top:6px;left:8px;font-size:11px;max-width:48vw;max-height:160px;overflow:auto;}
        #menu-hud {top:6px;right:8px;width:48vw;max-width:440px;flex-direction:row;gap:3px;max-height:160px;overflow:auto;}
        .ui-btn {padding:6px;font-size:11px;}
        #potion-btn,#block-btn,#ult-btn,#interact-btn {bottom:8px;top:auto;height:70px;width:22vw;max-width:95px;min-width:0;font-size:11px;}
        #potion-btn {left:2vw;right:auto;} #interact-btn {left:26vw;right:auto;} #block-btn {left:50vw;right:auto;} #ult-btn {left:74vw;right:auto;}
        #minimap {display:none!important;}
        #gameCanvas {border:2px solid #716348;border-radius:5px;box-shadow:0 8px 40px #0009;background:#1d2923;}
        body {background:radial-gradient(ellipse at top,#293345,#111722 65%);}
        .ui-btn {background:linear-gradient(#364151,#202937);border-color:#817357;box-shadow:inset 0 1px #ffffff18;}
        #level-progress{position:absolute;bottom:84px;left:2%;width:96%;height:22px;border:1px solid #b59b61;border-radius:7px;background:#111b29;overflow:hidden;z-index:6;pointer-events:none;}#level-progress-fill{height:100%;background:linear-gradient(90deg,#52669a,#8faae0);transition:width .2s;}#level-progress-label{position:absolute;inset:0;text-align:center;line-height:20px;color:#fff;font-size:12px;font-weight:bold;text-shadow:0 1px 3px #000;}
#workshop-overlay,#story-overlay{position:absolute;inset:0;z-index:60;background:#070d17cc;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}.story-card{width:min(90vw,560px);padding:30px;background:linear-gradient(145deg,#253344,#111b2b);border:2px solid #a98b55;border-radius:15px;color:#ead9b3;text-align:center;box-shadow:0 20px 70px #0009}.story-card{max-height:88vh;overflow-y:auto;touch-action:pan-y}.story-card p{line-height:1.65;font-size:17px}.story-card button{padding:12px 18px;margin:5px;background:#bd9a5b;border:0;border-radius:6px;color:#162133;font-weight:bold}.ruin-art{font-size:90px;filter:sepia(.6);animation:ruin-pan 8s ease-in-out infinite alternate}@keyframes ruin-pan{from{transform:scale(.85) translateY(5px);opacity:.55}to{transform:scale(1.1) translateY(-5px);opacity:1}}
#gameCanvas{filter:saturate(.68) contrast(1.04);}.ui-btn,.realm-card{background:linear-gradient(145deg,#3d4347,#212b31);border-color:#93846a;}.story-card{background:linear-gradient(145deg,#343b3e,#172129);}

/* Champion HUD: weathered slate, brass trim and readable equipment details. */
#hud{top:6px;left:8px;width:46vw;max-width:440px;max-height:none;overflow:visible;padding:10px 12px;background:linear-gradient(145deg,#343b3e,#172129);border:1px solid #a18b65;border-radius:8px;color:#eadcbb;font-size:12px;font-weight:normal;text-shadow:none;box-shadow:inset 0 1px #ffffff15,0 4px 14px #0005;}
.champion-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#e8d5a7;font-weight:bold;letter-spacing:.8px;font-size:13px;}
#location-hud{margin:4px 0 8px;color:#b9b7a9;font-size:11px;overflow-wrap:anywhere;}
.champion-bars{display:grid;grid-template-columns:1fr;gap:10px;}.champion-bars>div{min-width:0;}
.meter-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 6px;font-size:10px;color:#c4bca8;font-variant-numeric:tabular-nums;}
#hud .bar-container{width:100%;height:8px;margin:4px 0 7px;border:1px solid #74664d;border-radius:3px;background:#111a20;}
#hp-fill{background:linear-gradient(90deg,#7d3538,#b76d66);box-shadow:none;}#exp-fill{background:linear-gradient(90deg,#796842,#c3a16b);box-shadow:none;}
#stats-txt{font-size:11px;color:#c5cbd0;margin-bottom:6px;}
#equipped-hud{width:auto;padding:6px 0 0;margin:0;border:0;border-top:1px solid #80715266;background:none;border-radius:0;font-size:12px;line-height:1.45;}
#equipped-hud .gear-label{font-size:9px;color:#b6a482;letter-spacing:1px;margin-bottom:3px;}
.hud-gear-row{display:grid;grid-template-columns:18px minmax(0,1fr);gap:5px;margin:3px 0;}.hud-gear-row>span:last-child{white-space:normal;overflow-wrap:anywhere;}.gear-symbol{color:#c3a16b;}
#menu-hud{max-height:none;overflow:visible;display:none;flex-wrap:wrap;}#level-progress{display:none!important;}
@media(max-width:899px){#hud{left:6px;width:calc(100% - 12px);max-width:none;padding:8px 10px;}.champion-bars{gap:12px;}#menu-hud{left:6px;right:auto;width:calc(100% - 12px);max-width:none;display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;}#menu-hud .ui-btn{min-width:0;padding:7px 4px;font-size:11px;line-height:1.25;overflow-wrap:anywhere;min-height:34px;}#upgrade-ult-btn{grid-column:span 2;}#menu-hud[style*="flex"]{display:grid!important;}}


#pause-modal{max-height:90dvh;overflow-y:auto;touch-action:pan-y;background:linear-gradient(145deg,#343b3e,#172129);border-color:#a18b65;color:#eadcbb;box-shadow:0 12px 40px #0008;}#pause-modal h2{color:#e8d5a7;}#pause-modal *{touch-action:pan-y;}.pause-hotkeys{text-align:left;margin-top:14px;border-top:1px solid #807152;padding-top:12px;font-size:12px;}.pause-hotkeys summary{cursor:pointer;font-weight:bold;color:#d6c296;}.pause-hotkeys dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;margin:12px 0;}.pause-hotkeys dt{color:#ddc58e;font-weight:bold;}.pause-hotkeys dd{margin:0;overflow-wrap:anywhere;}

#quests-modal{display:none;max-width:720px;}#town-quest-log p{padding:12px;background:#26312f;border:1px solid #75674d;border-radius:7px;line-height:1.5;margin:10px 0;}

.cinematic-card{max-width:640px;padding:18px;background:linear-gradient(145deg,#343b3e,#172129);}.cinematic-card #story-art{overflow:hidden;border:1px solid #8f7d5b;border-radius:7px;margin-bottom:14px;background:#35473b;}.cinematic-card svg{display:block;width:100%;height:auto;}.cinematic-card p{font-size:15px;line-height:1.65;color:#ded6bf;}.cinematic-card h2{color:#e8d5a7;margin:10px 0;}.cinematic-card small{letter-spacing:2px;color:#bca87b;}.cinematic-pan{transform-origin:center;animation:cinematic-drift 12s ease-in-out infinite alternate;}.cinematic-champion{animation:cinematic-breathe 2.5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center bottom;}.cinematic-tree{animation:cinematic-sway 4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center bottom;}@keyframes cinematic-drift{from{transform:scale(1.01) translateX(-3px)}to{transform:scale(1.07) translateX(3px)}}@keyframes cinematic-breathe{to{opacity:.9}}@keyframes cinematic-sway{to{opacity:.85}}@media(prefers-reduced-motion:reduce){.cinematic-pan,.cinematic-champion,.cinematic-tree{animation:none;}}

.item-art{display:block;width:64px;height:64px;margin:3px auto;filter:drop-shadow(0 3px 3px #0008);}.equipment-slot{min-height:120px;}.equipment-slot small{display:block;font-size:9px;letter-spacing:.6px;}.item-name{display:block;font-size:11px;line-height:1.3;}.item-stats{display:block;font-size:10px;color:#d6c8a7;margin-top:4px;}.item-tier-2{background:radial-gradient(ellipse at center,#263b5322,#151c29);}.item-tier-3{box-shadow:inset 0 0 16px #aa76d322;}.item-tier-4{box-shadow:inset 0 0 22px #e7bc4c33,0 0 7px #e7bc4c22;}
#equipped-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;} .hud-item{pointer-events:auto;touch-action:manipulation;position:relative;border:1px solid #6b6556;border-radius:6px;background:#17221f;padding:0;min-width:0;color:#c9bd9e;cursor:pointer;}.hud-item .item-art{width:34px;height:34px;margin:0 auto;}.hud-item small{display:block;font-size:8px;line-height:11px;padding-bottom:2px;}.hud-item.empty{opacity:.45;}.hud-item.current{outline:1px solid #e4cf8f;}@media(max-width:899px){#equipped-grid{grid-template-columns:repeat(10,minmax(0,1fr));}.hud-item .item-art{width:27px;height:27px;}.hud-item small{font-size:7px;}.item-art{width:52px;height:52px;}}@media(max-width:430px){#equipped-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
#champion-thought{margin:6px 0;padding:7px 9px;border-left:2px solid #b9a16f;background:#c0a5710c;color:#dbcfb2;font-size:11px;font-style:italic;line-height:1.45;}#champion-thought.new-thought{animation:thought-arrival 1.1s ease-out 2;}@keyframes thought-arrival{0%,100%{background:#c0a5710c;box-shadow:none;}40%{background:#c0a57130;box-shadow:inset 0 0 0 1px #c9ad79,0 0 10px #c9ad7933;}}#champion-thought::before{content:'“';color:#c3a16b;font-size:16px;}
#inventory-modal .equipment-slot{min-height:76px;padding:5px 4px;}#inventory-modal .item-art{width:36px;height:36px;margin:1px auto;}#inventory-modal .item-name{font-size:9px;line-height:1.2;}#inventory-modal .item-stats{font-size:9px;margin-top:2px;}#inventory-modal .inv-slot{min-height:75px;padding:5px;}#inventory-modal .character-portrait{max-height:215px;}#inventory-modal .character-sheet{gap:6px;align-items:start;}.equipment-slot:empty{min-height:65px;}
#skill-level-toast{display:none;position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:35;max-width:85vw;padding:12px 22px;border:1px solid #d4bb7d;border-radius:9px;background:linear-gradient(135deg,#263b32,#1b2827);color:#f2dfaa;font-size:15px;font-weight:bold;text-align:center;box-shadow:0 6px 22px #0007;pointer-events:none;animation:skill-celebrate .3s ease-out;}@keyframes skill-celebrate{from{opacity:0;translate:0 8px;}to{opacity:1;translate:0 0;}}
#champion-thought{visibility:hidden;height:62px;box-sizing:border-box;overflow:auto;}#compass-hud{height:26px;white-space:nowrap;overflow:hidden;}
#world-modal{max-width:880px;background:linear-gradient(145deg,#343b35,#172321);border:1px solid #b39b6c;}#world-modal h2{font-size:20px;letter-spacing:2px;color:#e1c997;}#illustrated-world-map{border:2px solid #9d825b;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 25px #392a22,0 4px 16px #0005;}#illustrated-world-map svg{display:block;width:100%;height:auto;}.world-destination{cursor:pointer;outline:none;}.world-destination:focus .map-pin,.world-destination:hover .map-pin{stroke:#fff1c4;stroke-width:4;}.world-destination.locked{cursor:not-allowed;}#world-modal .realm-card{background:linear-gradient(145deg,#35443a,#1c2c27);border:1px solid #8c7b5b;border-radius:8px;padding:10px;font-size:12px;text-align:left;}#world-modal .realm-card.current{border-color:#e2c58a;box-shadow:inset 0 0 14px #cfac5930;}#realm-status{padding:9px;color:#d0c1a1;font-size:12px;}
#item-tooltip{display:none;position:fixed;z-index:1000;width:240px;max-width:calc(100vw - 20px);padding:12px;border:1px solid #b9a16f;border-radius:9px;background:linear-gradient(145deg,#344139,#14231f);box-shadow:0 7px 25px #0009;color:#e6ddc7;pointer-events:none;font-size:12px;line-height:1.5;}#item-tooltip .item-art{width:56px;height:56px;float:left;margin:0 9px 4px 0;}#item-tooltip h3{margin:0;font-size:14px;line-height:1.3;}#item-tooltip .tooltip-details{clear:both;margin-top:8px;padding-top:7px;border-top:1px solid #a4905e66;}#item-tooltip .tooltip-stat{color:#cdddba;}#item-tooltip small{color:#b8ad92;}
#inventory-modal .equipment-slot,#inventory-modal .inv-slot{position:relative;background:linear-gradient(145deg,#343d38,#182521 65%);border-style:solid;border-radius:7px;box-shadow:inset 0 1px 0 #c9b48744,inset 0 -3px 6px #07110e99,0 2px 3px #0004;}#inventory-modal .equipment-slot::after,#inventory-modal .inv-slot::after{content:'';position:absolute;inset:3px;border:1px solid #b49b6b26;border-radius:4px;pointer-events:none;}#inventory-modal .equipment-slot small{color:#baab88;font-size:9px;letter-spacing:1px;}#inventory-modal .equipment-slot:hover,#inventory-modal .equipment-slot:focus-visible{background:linear-gradient(145deg,#465247,#22372e);outline:1px solid #c9b077;outline-offset:1px;}#inventory-modal .inv-slot.empty{background:linear-gradient(145deg,#26312d,#101c18);color:#7d8d7e;border-color:#65705d;}#inventory-modal .item-tier-3{box-shadow:inset 0 0 18px #b478d222,inset 0 1px 0 #d9bcec55;}#inventory-modal .item-tier-4{box-shadow:inset 0 0 22px #ddb55233,inset 0 1px 0 #f2d69577,0 0 6px #e2b85a22;}

#potion-btn,#block-btn,#interact-btn{padding:4px;border-radius:10px;background:linear-gradient(145deg,#34463e,#172924);border:1px solid #b9a06d;color:#eadcba;box-shadow:inset 0 1px #dcc79344,0 3px 8px #0005;}
.action-face{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none;}.action-icon{width:36px;height:36px;display:block;filter:drop-shadow(0 2px 2px #0005);}.action-label{font-size:9px;line-height:11px;font-weight:bold;letter-spacing:.4px;}.action-key{position:absolute;top:3px;right:4px;border:1px solid #a58e65;border-radius:3px;padding:1px 3px;background:#17231fe6;color:#e8d3a4;font:9px sans-serif;pointer-events:none;}#potion-count-txt{font-size:9px;line-height:10px;}#potion-btn.has-potion{background:linear-gradient(145deg,#4b3c3b,#263a30);box-shadow:inset 0 1px #dfb98d44,0 3px 8px #0005;}#block-btn.active{background:linear-gradient(145deg,#546756,#253d33);box-shadow:inset 0 0 0 1px #e6cc8c,0 0 10px #c9ad7933;}@media(prefers-reduced-motion:reduce){#champion-thought.new-thought{animation:none;border-color:#f1d38e;background:#c0a57125;}}

.key-preset-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}.key-preset-tools input,.key-preset-tools select,.key-preset-tools button,.keybinding-row button{min-height:34px;background:#22352c;color:#eadcba;border:1px solid #a58e65;border-radius:5px;padding:6px 9px;max-width:100%;}.key-preset-tools input{width:150px;}.keybinding-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #a58e6533;}.keybinding-row button{min-width:94px;cursor:pointer;}#keybinding-status{color:#eed294;min-height:20px;}


/* One quick-view header, one navigation row, and a larger centered playfield. */
#hud{top:10px;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:1200px;padding:8px 12px;}
.champion-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;}#gold-hud{display:inline-flex;align-items:center;gap:5px;color:#edd38a;font-size:14px;font-weight:bold;}#gold-hud svg{width:20px;height:20px;}#location-hud{font-size:10px;margin:0 0 3px;}.champion-bars{display:block;}#hud .bar-container{margin:3px 0 5px;height:7px;}.quick-status{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:20px;}#stats-txt{margin:0;font-size:11px;}#compass-hud{height:auto;min-height:0;font-size:10px;}#equipped-hud{padding-top:4px;margin-top:3px;}#equipped-hud .gear-label{display:none;}#equipped-grid{grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;}.hud-item .item-art{width:27px;height:27px;}.hud-item small{font-size:8px;line-height:10px;}
#menu-hud{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 24px);max-width:1200px;flex-direction:row;flex-wrap:nowrap;gap:5px;overflow:visible;}#menu-hud .ui-btn{flex:1;min-width:0;min-height:34px;padding:6px 8px;font-size:11px;}#upgrade-ult-btn{grid-column:auto;}
#gameCanvas{left:50%;transform:translateX(-50%);}
#champion-thought{position:absolute;z-index:12;left:50%;bottom:94px;transform:translateX(-50%);width:min(520px,calc(100% - 24px));height:58px;margin:0;padding:10px 14px;border:1px solid #a89161;border-radius:8px;background:#182b25ef;color:#eadbbb;font-size:12px;pointer-events:none;box-shadow:0 4px 15px #0006;}
.pause-utilities{display:flex;justify-content:center;gap:8px;margin:12px 0;}
@media(min-width:900px){#potion-btn,#interact-btn,#block-btn,#ult-btn{width:84px;max-width:none;}#potion-btn{left:calc(50% - 186px);}#interact-btn{left:calc(50% - 90px);}#block-btn{left:calc(50% + 6px);}#ult-btn{left:calc(50% + 102px);}}
@media(max-width:899px){#hud{top:6px;left:50%;width:calc(100% - 12px);padding:6px 8px;}#menu-hud{left:50%;width:calc(100% - 12px);grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;}#menu-hud .ui-btn{padding:5px 3px;font-size:10px;min-height:30px;}#equipped-grid{grid-template-columns:repeat(11,minmax(0,1fr));gap:2px;}.hud-item .item-art{width:23px;height:23px;}.hud-item small{font-size:7px;}#gold-hud{font-size:12px;}}
@media(max-width:430px){#equipped-grid{grid-template-columns:repeat(6,minmax(0,1fr));}.hud-item .item-art{width:24px;height:24px;}#champion-thought{font-size:11px;}}

#town-gate-notice{display:none;position:fixed;left:50%;bottom:94px;transform:translateX(-50%);z-index:40;width:max-content;max-width:calc(100% - 24px);padding:12px 16px;border:1px solid #c5aa70;border-radius:9px;background:linear-gradient(145deg,#344139,#14231f);color:#eadbb8;font-size:13px;text-align:center;box-shadow:0 5px 16px #0007;pointer-events:none;}
#resource-quick-view{margin-top:5px;padding-top:5px;border-top:1px solid #a58e6533;}.resource-quick-heading{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#bdac87;letter-spacing:.5px;margin-bottom:3px;}.resource-quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}.resource-quick-item{padding:3px 6px;background:#10241c66;border:1px solid #a58e6522;border-radius:5px;display:flex;align-items:center;justify-content:space-between;gap:5px;}.resource-quick-name{font-size:10px;color:#cfc4a9;white-space:nowrap;}.resource-quick-amount{font-size:11px;color:#b9c3a7;white-space:nowrap;}.resource-quick-amount b{color:#eedcb3;font-weight:600;}@media(max-width:899px){.resource-quick-item{flex-direction:column;gap:1px;padding:3px 1px;}.resource-quick-grid{gap:3px;}.resource-quick-name{font-size:9px;}.resource-quick-amount{font-size:10px;}}
#workshop-overlay .workshop-card{max-width:650px;width:calc(100% - 24px);padding:18px 24px;border-radius:15px;background:radial-gradient(ellipse at top,#415246,#172921 70%);border:1px solid #a58f64;}#workshop-art{margin:-18px -24px 12px;border-radius:15px 15px 0 0;overflow:hidden;}#workshop-art svg{width:100%;height:auto;display:block;max-height:180px;}#workshop-description{font-size:12px;line-height:1.5;color:#bfbea6;margin:5px 0 12px;}#workshop-title{margin:8px 0;font-size:22px;color:#ead7ac;}.shop-services{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:12px 0;}.shop-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #b9a06d33;margin-top:10px;padding-top:10px;}#workshop-overlay .shop-icon-action{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;background:transparent;border:0;padding:6px 3px;margin:0;color:#e1d7ba;min-width:0;cursor:pointer;}#workshop-overlay .shop-icon-action:hover .shop-action-art,#workshop-overlay .shop-icon-action:focus-visible .shop-action-art{transform:translateY(-3px);box-shadow:0 0 15px #dfc78444;}#workshop-overlay .shop-icon-action:disabled{opacity:.4;cursor:default;}#workshop-overlay .shop-icon-action:disabled .shop-action-art{transform:none;box-shadow:none;}.shop-action-art{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#536450,#1a3026 72%);box-shadow:inset 0 0 0 1px #c3ac7855;transition:transform .15s,box-shadow .15s;}.shop-action-art svg{width:53px;height:53px;}.shop-icon-action strong{font-size:12px;margin-top:6px;}.shop-icon-action small{font-size:10px;line-height:1.4;color:#c2b591;font-weight:normal;margin-top:3px;}#workshop-talk.shop-icon-action{flex-direction:row;gap:10px;margin:6px auto;}#workshop-talk .shop-action-art{width:44px;height:44px;}#workshop-talk .shop-action-art svg{width:28px;height:28px;}#workshop-talk strong{margin:0;}#npc-quest{border:0;margin:10px 0;padding:8px 0;border-top:1px solid #b9a06d33;color:#e3d9bd;font-size:13px;line-height:1.6;}#npc-quest button{border-radius:20px;}@media(max-width:480px){#workshop-overlay .workshop-card{padding:14px;}#workshop-art{margin:-14px -14px 10px;}.shop-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.shop-action-art{width:60px;height:60px;}#workshop-talk.shop-icon-action{flex-wrap:wrap;justify-content:center;}}
#shop-stock-status{color:#ecd391;font-size:12px;margin:8px 0;}#shop-trade-feedback{color:#d3dbb3;font-size:12px;line-height:1.5;min-height:18px;}#merchant-trade h3,#merchant-inventory h3{font-size:15px;color:#dcca9f;margin:18px 0 9px;}#merchant-inventory>p{font-size:11px;line-height:1.5;color:#b9baa4;}.trade-controls{display:flex;justify-content:center;gap:8px;margin-bottom:8px;}.trade-controls input,.trade-controls select{padding:7px;background:#20392b;border:1px solid #9b8b63;border-radius:5px;color:#e2d6b5;max-width:100%;}.trade-controls input{width:65px;}.resource-trade-row{display:flex;align-items:center;gap:6px;text-align:left;padding:8px 0;border-bottom:1px solid #b9a06d22;}.resource-trade-row>span{flex:1;font-size:11px;}.resource-trade-row button{font-size:10px;padding:6px 8px;border-radius:18px;}#merchant-inventory .merchant-equipped{grid-template-columns:repeat(4,minmax(0,1fr));opacity:.85;}.merchant-equipped .shop-action-art{width:48px;height:48px;}.merchant-equipped .shop-action-art svg{width:37px;height:37px;}#forge-services .shop-icon-action small{color:#c8caaa;}@media(max-width:480px){.resource-trade-row{flex-wrap:wrap;justify-content:center;}.resource-trade-row>span{flex-basis:100%;text-align:center;}#merchant-inventory .merchant-equipped{grid-template-columns:repeat(3,minmax(0,1fr));}}

.account-controls {margin:12px auto 0;max-width:340px;color:#cbd5e1;font-size:13px;line-height:1.5;}
.account-controls button {margin:8px 4px;}
.account-controls small {display:block;color:#94a3b8;font-size:11px;}
#start-screen {overflow-y:auto;}
#pause-modal {max-height:92dvh;overflow-y:auto;}

/* Five separate touch actions; map taps only move or interact. */
#attack-btn {display:none;position:absolute;bottom:8px;height:70px;z-index:10;align-items:center;justify-content:center;padding:4px;border-radius:10px;background:linear-gradient(145deg,#67443b,#302323);border:1px solid #c6a26c;color:#f7dfb8;touch-action:none;cursor:pointer;}
#attack-btn:active {background:#865447;transform:scale(.96);}
#attack-btn {display:none!important;}
#move-stick {display:none;position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:104px;height:104px;border-radius:50%;background:#302b25cc;border:2px solid #c6a26c;z-index:10;touch-action:none;user-select:none;align-items:center;justify-content:center;}
#move-knob {width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#aa885d,#59412c);border:2px solid #e4c58e;pointer-events:none;}
.touch-controls #move-stick.active {display:flex;}
.touch-controls #attack-btn.active {display:flex!important;width:76px;max-width:none;height:76px;left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));border-radius:50%;}
.touch-controls #potion-btn,.touch-controls #interact-btn,.touch-controls #block-btn,.touch-controls #ult-btn {width:54px;max-width:none;height:44px;right:auto;bottom:12px;}
.touch-controls #potion-btn,.touch-controls #block-btn {left:calc(50% - 60px);}
.touch-controls #interact-btn,.touch-controls #ult-btn {left:calc(50% + 4px);}
.touch-controls #block-btn,.touch-controls #ult-btn {bottom:64px;}
.touch-controls .action-icon {font-size:22px;}
.touch-controls .action-label {font-size:9px;}

.touch-controls kbd,.touch-controls .pause-hotkeys {display:none!important;}

.touch-layout-option {display:none;}
.touch-controls .touch-layout-option {display:block;margin:12px 0;}
.touch-layout-option select {display:block;max-width:100%;margin:8px auto;padding:10px;background:#302b25;color:#f7dfb8;border:1px solid #c6a26c;border-radius:6px;}
.touch-controls.attack-left #move-stick {left:auto;right:max(12px,env(safe-area-inset-right));}
.touch-controls.attack-left #attack-btn.active {right:auto;left:max(12px,env(safe-area-inset-left));}

.touch-controls button,.touch-controls [role="button"],.touch-controls select,.touch-controls .ui-btn {touch-action:manipulation;}
.touch-controls canvas {touch-action:none;}