/* Harvest Tycoon on your phone (/app, 4 Oct 2026) on top of legal.css: the phone with the farm beside three short ways in (Android,
   iPhone and iPad, a computer). Phone first: one column; two columns from 760px. Logical sides, so Arabic runs
   right to left as it should. No script: our apps are marked html[data-app] by android-app.js, the App Store by data-app-store.
   On a phone the store comes first, above the fold: the farm on a phone shows from 760px (lazy, so a phone never loads it). */
.app-hero{padding-bottom:88px}
.app-card{padding-top:clamp(18px,4vw,36px)}
.app-options{display:grid;gap:14px}
.app-phone{display:none;justify-self:center;width:156px;margin:0 0 4px;padding:7px;border-radius:30px;background:#2f2c1a;box-shadow:0 18px 40px #2d2c1140,inset 0 0 0 2px #4a4530}
.app-phone img{display:block;width:100%;height:auto;border-radius:23px}
.app-option{padding:18px 18px 16px;border:1px solid #e8ded2;border-radius:20px;background:#fbf8f2}
.app-option h2{margin:0 0 6px!important;font:700 21px/1.25 'Outfit',sans-serif;color:#3d3923}
.app-option p{margin:0 0 12px}
.app-option .legal-button{margin:2px 0 0}
.app-play{display:inline-block;padding:4px 0;border-radius:10px}
.app-play img{display:block;width:auto;height:56px}
.app-steps{margin:0 0 4px!important}
.app-steps li{margin:0 0 8px;padding:11px 14px 11px 54px}
.app-steps li::before{top:10px}
[dir=rtl] .app-steps li{padding:11px 54px 11px 14px}
[dir=rtl] .app-steps li::before{left:auto;right:16px}
/* The App Store, once the iPhone app is approved: data-app-store="on" on the iPhone section shows it and puts the steps aside. */
.app-ios[data-app-store=off] .app-store-block,.app-ios[data-app-store=on] .app-home-screen{display:none}
.app-store-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 22px;border-radius:12px;background:#111;color:#fff!important;font:700 16px 'DM Sans',sans-serif;text-decoration:none}
/* Inside our Android or iPhone app: the farmer has the app; one line and the way back to the farm instead of the stores. */
.app-in-app{display:none;padding:18px;border:1px solid #cfdcb9;border-radius:20px;background:#eef4e4;color:#36521f;text-align:center}
.app-in-app p{margin:0 0 10px;font-size:17px}
.app-in-app strong{display:block;font:700 22px/1.3 'Outfit',sans-serif;color:#36521f}
html[data-app] .app-in-app{display:block}
html[data-app] .app-options{display:none}
@media(min-width:760px){
 .app-options{grid-template-columns:220px minmax(0,1fr);column-gap:28px;align-items:start}
 .app-phone{display:block;grid-row:1/span 3;grid-column:1;width:220px;position:sticky;top:20px}
 .app-option{grid-column:2}
}