.civilization-screen{position:fixed;inset:0;z-index:100;overflow:auto;color:#123b55;background:linear-gradient(110deg,#062b4de8 0%,#075076ba 48%,#052d4ec9 100%),url('assets/isla-panorama.png') center/cover no-repeat;font-family:'Nunito Sans',system-ui,sans-serif}
.civilization-screen.hidden{display:none}
.civilization-topbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(18px,3vw,52px);background:#062e4bdd;border-bottom:1px solid #65c4dd99;color:#fff;font:800 15px 'Barlow Condensed',sans-serif;letter-spacing:.7px}
.civilization-home{color:#fff;text-decoration:none;padding:8px 12px;border:1px solid #80cae4;border-radius:10px;background:#0a5881;font-size:17px;letter-spacing:0}
.civilization-home:hover{background:#1677a4}
.civilization-trial{color:#b6f6da}
.civilization-layout{width:min(1450px,100%);min-height:calc(100dvh - 66px);margin:auto;padding:clamp(16px,3vw,46px);display:grid;grid-template-columns:minmax(320px,.85fr) minmax(540px,1.15fr);align-items:center;gap:clamp(18px,4vw,60px)}
.civilization-story{color:#fff;max-width:560px;text-shadow:0 2px 14px #002b46a6}
.civilization-eyebrow{display:block;font:800 14px 'Barlow Condensed',sans-serif;letter-spacing:1.8px;color:#fee081}
.civilization-story h1{font:800 clamp(52px,6.2vw,96px)/.91 'Barlow Condensed',sans-serif;margin:14px 0 22px;letter-spacing:.2px}
.civilization-story h1 em{font-style:normal;color:#ffcf51}
.civilization-story>p:not(.civilization-disclaimer){font-size:clamp(18px,1.55vw,23px);line-height:1.42;max-width:540px}
.civilization-story-card{display:flex;align-items:center;gap:15px;max-width:500px;margin:28px 0;padding:16px 18px;background:#053a5edb;border:1px solid #87d9ed;border-radius:15px;box-shadow:0 12px 24px #04284080}
.civilization-story-card>span{font-size:38px;color:#ffe179}
.civilization-story-card strong{display:block;font:800 23px 'Barlow Condensed',sans-serif}
.civilization-story-card small{display:block;margin-top:4px;font:600 13px/1.4 'Nunito Sans',sans-serif}
.civilization-disclaimer{font-size:13px;line-height:1.45;color:#e2f4fb;max-width:500px}
.civilization-picker{min-width:0;max-height:min(800px,calc(100dvh - 95px));overflow:auto;padding:clamp(18px,2.25vw,32px);background:#fffaf0;border:3px solid #71c8de;border-radius:23px;box-shadow:0 12px 0 #0434527a,0 26px 55px #001e3e8c}
.civilization-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.civilization-picker .civilization-eyebrow{color:#13769a}
.civilization-picker h2{font:800 clamp(28px,2.9vw,40px)/1 'Barlow Condensed',sans-serif;margin:5px 0 0;color:#123e5e}
.civilization-count{white-space:nowrap;background:#daf3ee;color:#076844;padding:5px 9px;border-radius:20px;font:800 13px 'Barlow Condensed',sans-serif}
.civilization-picker>p{font-size:13px;line-height:1.45;color:#4d697a;margin:14px 0 17px}
.civilization-search-label{display:block;font:800 15px 'Barlow Condensed',sans-serif;margin-bottom:5px}
.civilization-search{width:100%;height:46px;padding:0 14px;border:2px solid #a7cbd2;border-radius:11px;background:#fff;color:#163f58;font:600 15px 'Nunito Sans',sans-serif}
.civilization-search:focus{outline:3px solid #ffe17a;outline-offset:1px;border-color:#218ab0}
.civilization-regions{display:flex;gap:7px;overflow-x:auto;padding:14px 0 10px;scrollbar-width:thin}
.civilization-regions button{flex:0 0 auto;padding:7px 10px;border:1px solid #9bcbd9;border-radius:20px;background:#e8f5f7;color:#22566e;font:800 14px 'Barlow Condensed',sans-serif}
.civilization-regions button[aria-pressed="true"]{background:#0b638b;color:#fff;border-color:#0b638b}
.civilization-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-height:170px;align-content:start}
.civilization-option{display:flex;align-items:center;gap:8px;min-height:66px;padding:9px 10px;border:2px solid #d2e2de;border-radius:13px;text-align:left;background:#fff;color:#17435a;box-shadow:0 2px 0 #d3e5e3;font:800 15px/1.1 'Barlow Condensed',sans-serif}
.civilization-option:hover{border-color:#40acba;background:#f4ffff}
.civilization-option[aria-pressed="true"]{border-color:#168d58;background:#e2f8e9;box-shadow:0 0 0 2px #a8e5b8}
.civilization-flag{font:30px sans-serif;line-height:1}
.civilization-empty{grid-column:1/-1;padding:25px;text-align:center;color:#48677a;background:#e9f6f5;border-radius:12px}
.civilization-footer{position:sticky;bottom:-1px;display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:15px;padding:15px 0 3px;background:#fffaf0;border-top:1px solid #c9dedc}
.civilization-selection{font:800 18px 'Barlow Condensed',sans-serif;color:#0f526d}
#startCivilizationBtn{min-height:49px;padding:8px 18px;border:2px solid #107b42;border-radius:12px;background:linear-gradient(#37c966,#0b9148);color:#fff;white-space:nowrap;font:800 21px 'Barlow Condensed',sans-serif;box-shadow:0 4px 0 #08673a}
#startCivilizationBtn:disabled{opacity:.5;box-shadow:none}
.civilization-save-note{display:block;margin-top:9px;color:#637b85;font-size:11px;line-height:1.4}
@media(max-width:950px){.civilization-layout{grid-template-columns:1fr;gap:14px;align-items:start}.civilization-story{max-width:none}.civilization-story h1{font-size:57px;margin:8px 0}.civilization-story>p:not(.civilization-disclaimer){font-size:17px;margin:0}.civilization-story-card,.civilization-disclaimer{display:none}.civilization-picker{max-height:none}}
@media(max-width:600px){.civilization-topbar{min-height:52px;padding:7px 10px;font-size:12px}.civilization-topbar>span:nth-child(2){display:none}.civilization-layout{padding:11px}.civilization-story h1{font-size:48px}.civilization-story>p:not(.civilization-disclaimer){font-size:14px}.civilization-picker{padding:16px;border-width:2px;border-radius:17px}.civilization-picker-head{display:block}.civilization-count{display:inline-block;margin-top:8px}.civilization-options{grid-template-columns:repeat(2,minmax(0,1fr))}.civilization-footer{display:block}.civilization-selection{margin-bottom:9px}#startCivilizationBtn{width:100%}}