/* Dragons Land / Figma geometry v2. Scoped to main screen only.
   Reference artboard: 506x782. No legacy game logic replaced. */
:root{--dl-gold:#f7b63e;--dl-border:#ffc75a}
html body.dl-precise{margin:0;background:#07101d;color:white;overflow-x:hidden}
html body.dl-precise #main-screen{position:relative!important;display:block!important;height:100dvh!important;min-height:580px!important;overflow:hidden!important;background:#091328!important}
html body.dl-precise .dl-precise-shell{position:relative;isolation:isolate;box-sizing:border-box;width:min(100%,506px);height:100%;margin:auto;background:url('/images/figma-original/background.png') center center/100% 100% no-repeat}
html body.dl-precise .dl-precise-shell *{box-sizing:border-box}
html body.dl-precise .dl-precise-logo{position:absolute;left:19%;top:0;width:62%;height:12.2%;background:url('/images/figma-original/logo.png') center center/contain no-repeat;pointer-events:none}
html body.dl-precise #top-panel{position:absolute!important;inset:10.8% 2.4% auto!important;transform:none!important;width:95.2%!important;height:16.7%!important;padding:0!important;margin:0!important;display:block!important;background:none!important;z-index:3}
html body.dl-precise #currency-container{position:absolute!important;inset:0 0 auto!important;transform:none!important;display:grid!important;grid-template-columns:1fr 1fr;gap:2.5%;width:100%!important;height:39%!important;margin:0!important;padding:0!important}
html body.dl-precise #ton-currency,html body.dl-precise #dc-currency{position:relative!important;display:flex!important;align-items:center!important;gap:5px!important;width:100%!important;min-width:0!important;height:100%!important;padding:3px 7px!important;margin:0!important;border:2px solid var(--dl-border)!important;border-radius:40px!important;background:rgba(9,18,33,.91)!important;box-shadow:0 0 5px #ffb43d88!important;overflow:hidden!important}
html body.dl-precise #ton-icon,html body.dl-precise #dc-icon{display:block!important;position:static!important;flex:none!important;width:clamp(23px,7vw,37px)!important;height:80%!important;object-fit:contain!important;margin:0!important}
html body.dl-precise .ton-info,html body.dl-precise .dc-info{position:static!important;display:flex!important;flex:1!important;align-items:center!important;justify-content:center!important;min-width:0!important;background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important}
html body.dl-precise #ton-count,html body.dl-precise #dc-count{color:white!important;font:500 clamp(16px,4.9vw,27px)/1.1 Arial,sans-serif!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body.dl-precise #ton-currency::after,html body.dl-precise #dc-currency::after{content:'+';display:grid;place-items:center;flex:none;width:clamp(20px,6vw,29px);height:clamp(20px,6vw,29px);border:1px solid #bd9562;border-radius:50%;background:#4b3835;color:#f8d19a;font:23px/1 Arial,sans-serif}
html body.dl-precise .income-stats{position:absolute!important;inset:46% 0 auto!important;transform:none!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;width:100%!important;height:46%!important;padding:5px 4px!important;margin:0!important;border:2px solid var(--dl-border)!important;border-radius:17px!important;background:rgba(10,18,34,.91)!important;box-shadow:0 0 5px #ffb43d77!important}
html body.dl-precise .income-item{position:relative!important;display:grid!important;grid-template-columns:30% 70%!important;grid-template-rows:50% 50%!important;align-items:center!important;justify-content:initial!important;column-gap:0!important;row-gap:0!important;width:100%!important;min-width:0!important;height:100%!important;margin:0!important;padding:0 2px!important;border:0!important;background:none!important;box-shadow:none!important}
html body.dl-precise .income-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:#bd8b4d88}
html body.dl-precise .dl-precise-income-icon{grid-column:1;grid-row:1/3;justify-self:center;width:clamp(21px,6vw,33px);height:70%;object-fit:contain}
html body.dl-precise .income-label{grid-column:2;grid-row:1;align-self:end;display:block!important;color:white!important;font:400 clamp(9px,2.7vw,13px)/1.2 Arial,sans-serif!important;white-space:nowrap!important}
html body.dl-precise .income-value{grid-column:2;grid-row:2;align-self:start;display:block!important;color:#83ff9d!important;font:500 clamp(13px,3.5vw,19px)/1.2 Arial,sans-serif!important;white-space:nowrap!important}
html body.dl-precise .main-modal-navigation{position:absolute!important;inset:27.8% 2.4% auto!important;transform:none!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2%!important;width:95.2%!important;height:12.3%!important;margin:0!important;padding:0!important;z-index:3}
html body.dl-precise .main-modal-nav-btn{position:relative!important;display:block!important;width:100%!important;min-width:0!important;height:100%!important;margin:0!important;padding:0!important;border:2px solid var(--dl-border)!important;border-radius:17px!important;background:rgba(40,60,82,.82)!important;box-shadow:0 0 5px #ffb43d88!important;overflow:hidden!important;font-size:0!important;color:transparent!important}
html body.dl-precise #dragons-btn{background:rgba(83,52,88,.86)!important}
html body.dl-precise #workers-gnomes-btn{background:rgba(70,62,53,.86)!important}
html body.dl-precise .main-modal-nav-btn::before{content:'';position:absolute;inset:6% 15%;background:var(--dl-card) center/contain no-repeat}
html body.dl-precise #main-image-container{position:absolute!important;inset:0!important;transform:none!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;background:none!important;overflow:visible!important;pointer-events:none!important;z-index:2}
html body.dl-precise #main-image-container .torn-edge-image{display:none!important}
html body.dl-precise #dc-coins-counter{position:absolute!important;left:25%!important;top:48.3%!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;width:50%!important;height:7.2%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:3px 8px!important;border:2px solid var(--dl-border)!important;border-radius:35px!important;background:rgba(8,17,31,.91)!important;box-shadow:0 0 7px #ffb43d99!important;color:#fff4db!important;font:700 clamp(23px,6.4vw,38px)/1.1 Arial,sans-serif!important;text-shadow:0 0 6px #ffe5a4!important;white-space:nowrap!important;pointer-events:auto!important}
html body.dl-precise .dl-precise-counter-icon{flex:none;width:clamp(28px,8vw,44px);height:90%;object-fit:contain}
html body.dl-precise #claim-button{position:absolute!important;left:30.5%!important;top:58.0%!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:39%!important;height:6.6%!important;margin:0!important;padding:4px 8px!important;border:2px solid #fff0a7!important;border-radius:40px!important;background:linear-gradient(#fff1a3,#ffd367 50%,#d89523)!important;box-shadow:0 0 12px #ffbd4cbb!important;color:#643a12!important;font:800 clamp(14px,4vw,20px)/1 Arial,sans-serif!important;pointer-events:auto!important}
html body.dl-precise .dl-precise-claim-icon{width:clamp(18px,5vw,26px);height:60%;object-fit:contain}
html body.dl-precise .energy-progress-container{position:absolute!important;left:5%!important;top:70.4%!important;transform:none!important;display:flex!important;flex-direction:column!important;gap:7px!important;width:90%!important;height:7.6%!important;margin:0!important;padding:6px 9px!important;border:2px solid var(--dl-border)!important;border-radius:17px!important;background:rgba(10,19,34,.88)!important;box-shadow:0 0 5px #ffb43d88!important;pointer-events:auto!important}
html body.dl-precise .dl-precise-energy-info{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:3px!important;width:100%!important;min-width:0!important;color:white!important;font:400 clamp(8px,2.4vw,12px)/1.1 Arial,sans-serif!important;white-space:nowrap!important}
html body.dl-precise .dl-precise-energy-info>span{display:flex;align-items:center;gap:2px;min-width:0}
html body.dl-precise .energy-progress-text{position:static!important;display:inline!important;width:auto!important;margin:0!important;padding:0!important;color:white!important;font:inherit!important}
html body.dl-precise .energy-reset-text{position:static!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:2px!important;width:auto!important;margin:0!important;padding:0!important;color:white!important;font:inherit!important}
html body.dl-precise .energy-progress-bar{position:relative!important;display:block!important;flex:1!important;min-height:8px!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;border:1px solid #f7c457!important;border-radius:15px!important;background:#111b2d!important;overflow:hidden!important}
html body.dl-precise #energy-progress-fill{height:100%!important;border-radius:15px!important;background:linear-gradient(90deg,#ffea9e,#ffb936)!important}
html body.dl-precise #main-workers-gnomes-container,html body.dl-precise #contest-button-clans,html body.dl-precise #market-button-container,html body.dl-precise #contest-button-container{display:none!important}
/* Navigation stays outside main-screen so old screens remain accessible. */
html body.dl-precise #menu-buttons{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:calc(1.0dvh + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:1.2%!important;width:min(98%,496px)!important;max-width:none!important;height:10.6dvh!important;min-height:60px!important;max-height:80px!important;margin:0!important;padding:5px!important;border:1px solid var(--dl-border)!important;border-radius:20px!important;background:#0b1425ed!important;box-shadow:0 0 6px #ffb43d88!important;z-index:1000!important}
html body.dl-precise #menu-buttons button{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:100%!important;min-width:0!important;height:100%!important;margin:0!important;padding:4px 1px!important;border:1px solid #555867!important;border-radius:13px!important;background:#101727!important;box-shadow:none!important;transform:none!important}
html body.dl-precise #menu-buttons button.dl-precise-active{border:2px solid var(--dl-border)!important;box-shadow:inset 0 0 14px #ffc65c77!important}
html body.dl-precise #menu-buttons .dl-precise-nav-icon{display:block!important;flex:none!important;width:clamp(21px,6vw,30px)!important;height:clamp(21px,6vw,30px)!important;color:#ffcc35!important}
html body.dl-precise #menu-buttons .dl-precise-nav-label{display:block!important;color:white!important;font:700 clamp(8px,2.35vw,11px)/1.1 Arial,sans-serif!important;white-space:nowrap!important}
@media(max-height:640px){html body.dl-precise #main-screen{min-height:540px!important}html body.dl-precise #menu-buttons{bottom:0!important}}

/* v3: coin survives dynamic textContent updates made by game logic. */
html body.dl-precise #dc-coins-counter::before{content:'';display:block;flex:0 0 clamp(27px,7.5vw,40px);height:82%;background:url('/images/figma-original/dragoncoin.png') center/contain no-repeat}
html body.dl-precise #dc-coins-counter>.dl-precise-counter-icon{display:none!important}
/* Clock icon is an actual inline SVG, not a font glyph. */
html body.dl-precise .dl-precise-clock{display:inline-block!important;width:clamp(12px,3vw,16px)!important;height:clamp(12px,3vw,16px)!important;flex:none;vertical-align:middle;color:#ffcb41}
html body.dl-precise .energy-reset-text .dl-precise-clock{position:static!important}
