@import url('./game-v3.css');
@import url('./home-v4.css');

.event-sprite,.building-sprite{display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}
.board-events{position:absolute;left:13px;right:13px;top:125px;height:78px;display:flex;align-items:center;justify-content:space-between}.mini-event{position:relative;width:64px;height:67px;padding:0;filter:drop-shadow(0 2px 2px #385b4480)}.mini-event>small{position:absolute;bottom:-4px;left:3px;right:3px;text-align:center;background:#fff8de;border:2px solid #759b7c;border-radius:9px;color:#5e855f;line-height:16px;font-size:12px;box-shadow:0 2px 0 #42694d}.board-era{display:flex;align-items:center;gap:5px;max-width:240px;background:#477763bb;border:1px solid #def2caa0;border-radius:20px;color:#fff7d6;padding:4px 9px 4px 4px;box-shadow:0 2px 0 #3c61595e}.board-era>.ui-sprite{width:33px;height:34px}.board-era>span:not(.ui-sprite){font-size:13px}.board-era>.icon{width:13px;height:13px}
.board-screen .orders-area{top:206px;height:107px}.board-screen .order-track{padding:20px 1px 4px;gap:8px}.board-screen .order-card{height:83px;flex-basis:137px}.board-screen .customer-portrait{top:-26px;left:45px;width:45px;height:45px;z-index:2}.board-screen .order-required{top:19px;height:36px;left:5px;right:5px}.board-screen .required-item{width:39px;height:39px;padding:0;cursor:pointer}.board-screen .order-submit{height:23px;bottom:3px}.board-screen .order-submit:before{content:none}.board-screen .order-submit .icon{width:17px;height:17px}.board-screen .order-reward{width:32px}.board-screen .board-area{top:322px}.board-screen .game-toolbar{bottom:26px}
.board-screen.era-port .scene-background{background-image:linear-gradient(#f3d2a130,#fff0),url('../assets/korea-travel-map.png');background-size:100% auto;background-position:center 67%}.board-screen.era-retro .scene-background{background-image:linear-gradient(#9179c12f,#fff0),url('../assets/korea-travel-map.png');background-size:100% auto;background-position:center 38%}.board-screen.era-today .scene-background{background-image:linear-gradient(#669cc721,#fff0),url('../assets/korea-travel-map.png');background-size:100% auto;background-position:center top}
.selection-guide{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;gap:2px;padding:0}.selection-guide>.item-sprite{width:38px;height:39px}.selection-guide>b{font-size:14px;font-weight:400;color:#a6ab87}.selection-guide>.icon{width:13px;height:13px;color:#91ab85}.detail-icon{width:29px;height:35px;display:flex;align-items:center;justify-content:center;padding:3px;color:#78a1a3;flex-shrink:0}.detail-icon>.icon{width:23px;height:23px}.selected-item-copy>strong{font-size:11px;line-height:1.3}.selection-level{display:flex!important;align-items:center;gap:3px;color:#789679!important;font-size:13px!important;margin-top:2px!important}.selection-level .ui-sprite{width:21px;height:27px}.selected-item-art{width:46px;height:47px}.generator-preview{top:-2%;left:15%;width:71%;height:70%}.generator-art>.generator-box{inset:8% 1% 0;height:92%}.generator-art>small{display:none}
.travel-modal{max-height:92dvh;width:430px}.travel-modal .modal-body{padding:17px}.travel-modal .modal-header{padding:17px 39px}.travel-modal .modal-header h2{font-size:23px;line-height:1.3}.travel-modal .wide-button{margin-top:18px;min-height:46px;line-height:1.35;padding:9px 12px;gap:9px}.travel-modal .wide-button>.event-sprite{width:36px;height:36px}.travel-modal .wide-button:disabled{opacity:.5}.travel-modal .modal-footnote{line-height:1.6;margin-top:17px}.panel-subtitle{text-align:center;font-size:19px;font-weight:400;color:#6b876b;margin:12px 0 18px}.event-hero{width:164px;height:155px;margin:8px auto 16px;filter:drop-shadow(0 6px 3px #8b8b6936)}
.reward-row{display:flex;align-items:center;justify-content:center;gap:19px;margin:17px 0}.reward-token{display:inline-flex;align-items:center;justify-content:center;gap:3px;vertical-align:middle;white-space:nowrap}.reward-token>.ui-sprite{width:29px;height:30px}.reward-token>b{font-weight:400;font-size:18px}.reward-row .reward-token{color:#78905a}.xp-reward{color:#91a562;font-size:17px}.reward-row>.icon{color:#75ab62;stroke-width:4}.wide-button .reward-token>b{font-size:19px}.modal-footnote .reward-token>.ui-sprite{width:18px;height:18px}.modal-footnote .reward-token>b{font-size:12px}.built-stamp{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;color:#79a35a;padding:19px 4px;line-height:1.5;text-align:center}.built-stamp>.icon{width:26px;height:26px;stroke-width:4}
.detail-hero{width:135px;height:132px;margin:0 auto 4px;filter:drop-shadow(0 4px 3px #81896932)}.detail-level{color:#72a341;display:flex;align-items:center;justify-content:center;text-align:center;font-size:24px;margin-bottom:18px}.detail-level>.ui-sprite{width:25px;height:31px}.evolution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 13px}.evolution-step{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1.05;background:linear-gradient(#e8f0d9,#d4e4ca);border:2px solid #b2c7a7;border-radius:14px;padding:4px 4px 15px;box-shadow:0 2px 0 #a3bc9c;min-width:0}.evolution-step>.item-sprite{height:100%;width:100%}.evolution-step>small{position:absolute;left:8px;bottom:4px;font-size:10px;color:#90a482}.evolution-step>.icon{position:absolute;right:-12px;top:40%;width:16px;height:17px;color:#96b890;z-index:2;fill:#f8f1d4;stroke-width:3}.evolution-step:nth-child(3n)>.icon{right:5px;top:auto;bottom:4px;width:12px;height:12px}.evolution-step.current{border-color:#39bb91;background:linear-gradient(#e6fb93,#cae663);box-shadow:0 0 0 2px #63d9a2,0 3px 0 #509572}.evolution-step.discovered{border-color:#aec794}.merge-equation{display:flex;align-items:center;justify-content:center;gap:8px;margin:17px 0 8px;background:#e8ebd6;border-radius:11px;padding:6px}.merge-equation>.item-sprite,.merge-equation>.generator-art{width:43px;height:43px}.merge-equation>.ui-sprite{width:20px;height:28px}.merge-equation>b{font-size:17px;font-weight:400;color:#a0ac83}.merge-equation>.icon{color:#9ab48b;width:20px;height:20px}.detail-source{background:#e7ead3;margin:20px -17px -17px;padding:9px 17px 14px;text-align:center;border-top:2px solid #d4dcc1}.detail-source>h3{font-size:15px;font-weight:400;color:#8ba184;margin:0}.detail-source>button{height:69px;width:97px;margin:7px auto 0;display:flex;align-items:center;justify-content:center;gap:8px}.detail-source .generator-art{height:67px;width:67px}.detail-source>.icon{color:#a2b494}.locked-notice{display:flex;align-items:center;justify-content:center;gap:7px;color:#9caa89;font-size:12px;text-align:center;padding:15px 8px;line-height:1.6}.locked-notice .icon{width:18px;height:18px}
.collection-counter{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 18px;color:#7d9b6b}.collection-counter>.event-sprite{width:60px;height:62px}.collection-counter>strong{font-size:31px;font-weight:400}.collection-counter small{font-size:15px;color:#9eaf8c}.collection-icon-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.collection-icon-tabs>button{position:relative;aspect-ratio:1;border:1px solid #d4d9b7;background:#f2ecd4;border-radius:8px;padding:0;min-width:0}.collection-icon-tabs>button.active{border-color:#d7b65f;background:#fff1ac;box-shadow:0 2px 0 #c6a962}.collection-icon-tabs small{position:absolute;bottom:0;left:0;right:0;background:#637767bd;color:#fff8dd;border-radius:0 0 6px 6px;font-size:7px}.collection-icon-tabs .icon{width:8px;height:8px;vertical-align:0}.crate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.crate-card{position:relative;min-width:0;background:linear-gradient(#fff8df,#e2e8c9);border:2px solid #bfccaa;border-radius:12px;padding:4px 5px 8px}.crate-card>button:first-child{width:100%;padding:0;display:flex;flex-direction:column;align-items:center}.crate-card .generator-art{width:100%;height:81px}.crate-cost{display:flex;align-items:center;justify-content:center;gap:1px;color:#728d64;font-size:15px;height:24px}.crate-cost .ui-sprite{width:20px;height:24px}.crate-cost .icon{width:12px;height:12px}.crate-info{position:absolute;right:-5px;top:-5px;width:22px;height:22px;color:#629799;background:#f2ffe4;border-radius:50%;padding:1px}.crate-info>.icon{width:19px;height:19px}.crate-card.locked>button:first-child{opacity:.48}.workshop-status{margin-bottom:17px}
.building-preview{width:250px;max-width:100%;height:218px;margin:4px auto 8px;filter:drop-shadow(0 8px 4px #89937435)}.building-preview.preview-locked{filter:saturate(.4) opacity(.7)}.era-caption{text-align:center;font-size:14px;color:#9dab87}.era-list{display:flex;flex-direction:column;gap:13px}.era-card{display:flex;align-items:center;gap:12px;background:linear-gradient(#f9f5df,#e6eacb);border:2px solid #d5d9b7;border-radius:14px;padding:10px 8px;text-align:left;box-shadow:0 2px 0 #c1caa8;min-height:112px}.era-card.active{border-color:#d4b567;background:linear-gradient(#fff6ca,#f2e6b5)}.era-card>span{display:block;width:94px;height:90px;flex-shrink:0}.era-card>div{flex:1;min-width:0}.era-card small{color:#acac85;font-size:10px}.era-card strong{display:block;color:#688162;font-size:17px;font-weight:400;margin-top:4px}.era-card p{color:#9aa587;font-size:9px;margin-top:6px;line-height:1.6}.era-card>.icon{width:18px;height:18px;color:#a0b18d}.era-card:not(.unlocked)>span{filter:saturate(.25);opacity:.7}
.mini-status{display:flex;align-items:center;justify-content:space-between;background:#e9edcf;border:1px solid #d5ddba;padding:10px 15px;border-radius:10px;color:#91a078;font-size:12px;margin-bottom:17px}.mini-status>b{font-size:21px;font-weight:400;color:#799860}.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}.memory-card{display:flex;align-items:center;justify-content:center;min-width:0;aspect-ratio:.72;border-radius:11px;border:3px solid #eeda92;background:linear-gradient(135deg,#4596ba,#296e91);box-shadow:0 3px 0 #547b78,inset 0 0 0 2px #a0d6d4;padding:6px;transition:transform .15s}.memory-card.flipped{background:linear-gradient(#fff5cf,#ece2af);border-color:#cdb378;box-shadow:0 3px 0 #b2a075;transform:rotate(-1deg)}.memory-card.matched{background:linear-gradient(#eef7bc,#d5e9a3);border-color:#acc781;box-shadow:0 3px 0 #90ad77}.memory-card>.character-sprite{transform:scale(1.1)}.yut-board{width:295px;max-width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;background:radial-gradient(#fae1ac,#d7af79);border:6px solid #b68c57;border-radius:18px;padding:11px;box-shadow:inset 0 0 0 2px #feeac1,0 4px 0 #8e744e;margin:auto;position:relative}.yut-space{display:flex;align-items:center;justify-content:center;color:#bd9155;font-size:26px;background:#f7dfad;border:2px solid #d4ad70;border-radius:50%;z-index:1}.yut-space.current{background:#fff6b6;border-color:#81b567;box-shadow:0 0 0 2px #cbed93}.yut-space .character-sprite{transform:scale(1.45)}.yut-space .icon{height:18px;width:18px}.yut-center{position:absolute;left:28%;top:28%;right:28%;bottom:28%;display:flex;align-items:center;justify-content:center;flex-direction:column}.yut-center>.event-sprite{height:89px}.yut-center>b{font-size:20px;font-weight:400;color:#86673f}
.album-banner,.pass-banner{display:flex;align-items:center;justify-content:center;gap:15px;padding:4px 2px 15px}.album-banner>.event-sprite,.pass-banner>.event-sprite{width:94px;height:91px}.album-banner strong,.pass-banner strong{font-size:24px;font-weight:400;color:#8a9b64}.album-banner p,.pass-banner p{font-family:'Noto Sans KR',sans-serif;font-size:10px;color:#9ba185;line-height:1.7;margin-top:8px}.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 9px}.album-card{min-width:0;border:2px solid #ced5af;background:linear-gradient(#fff5d9,#e4e9c8);border-radius:12px;padding:5px;box-shadow:0 2px 0 #b7c399}.album-card>button:first-child{width:100%;display:flex;flex-direction:column;align-items:center;padding:0}.album-card .item-sprite{height:77px}.album-card strong{display:block;font-size:10px;font-weight:400;color:#8c966e;text-align:center;min-height:29px;line-height:1.4}.album-claim{display:flex;align-items:center;justify-content:center;height:25px;width:100%;font-size:11px;color:#8eaa7e;background:#d8e2c3;border-radius:7px;margin-top:4px;padding:2px}.album-claim .icon{width:17px;height:17px}.album-claim .reward-token>.ui-sprite{width:19px;height:20px}.album-claim .reward-token>b{font-size:12px}
.pass-banner{border:2px solid #e5c279;border-radius:14px;background:linear-gradient(130deg,#fff2c2,#f3d38b);padding:6px 8px;margin-bottom:17px}.pass-banner strong{color:#ae813f;font-size:21px}.pass-banner p{color:#b69759}.pass-head,.pass-tier{display:grid;grid-template-columns:35px 1fr 1fr;gap:8px;align-items:center}.pass-head{font-size:10px;color:#9aab80;text-align:center;margin-bottom:10px}.pass-tiers{display:flex;flex-direction:column;gap:12px}.pass-tier>b{border-radius:50%;width:31px;height:31px;line-height:29px;text-align:center;background:#e9dfb0;border:1px solid #d3c48c;color:#a39865;font-size:14px;font-weight:400}.pass-claim{min-width:0;border:2px solid #c0d0a7;background:#e5eccf;border-radius:10px;padding:8px 3px;min-height:61px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:#8d9d6e;gap:2px}.pass-claim.premium{border-color:#e3c377;background:#f8e9b3;color:#b39451}.pass-claim .reward-token>.ui-sprite{width:24px;height:27px}.pass-claim .reward-token>b{font-size:13px}.pass-claim>.icon{width:15px;height:15px}.pass-claim:disabled{opacity:.72}
.shop-balance{display:flex;justify-content:center;margin:0 0 17px}.shop-balance .reward-token>b{font-size:27px}.shop-balance .reward-token>.ui-sprite{width:37px;height:40px}.offer-list{display:flex;flex-direction:column;gap:14px}.offer-card{display:flex;align-items:center;gap:9px;background:linear-gradient(#fff5d7,#eadbb2);border:2px solid #ddc494;border-radius:14px;padding:11px 7px;min-height:103px;text-align:left}.offer-card>span{display:block;width:77px;height:78px;flex-shrink:0}.offer-card>div{flex:1;min-width:0}.offer-card strong{display:block;color:#a38650;font-size:14px;font-weight:400}.offer-rewards{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.offer-rewards .reward-token>.ui-sprite{width:22px;height:24px}.offer-rewards .reward-token>b{font-size:13px;color:#ac9666}.offer-card>b{display:flex;align-items:center;justify-content:center;min-width:48px;background:linear-gradient(#bbdc77,#83b659);border:1px solid #759d53;border-radius:9px;padding:5px 4px;color:#fff7dc;text-shadow:0 1px 0 #799753;font-weight:400}.offer-card>b .reward-token>.ui-sprite{width:21px;height:25px}.offer-card>b .reward-token>b{font-size:17px}.offer-card:disabled{opacity:.55}.setting-choice{padding:9px 12px;border:1px solid #c9d5b0;border-radius:9px;background:#e8eecf;color:#7b986b;font-size:12px}.settings-row>b{color:#90a36f;font-weight:400;font-size:20px}.character-detail h3{font-size:18px}.character-detail h3 b{font-size:13px}.character-grid{gap:8px}.character-card strong{font-size:10px}.character-card-art{height:58px;aspect-ratio:auto}.help-steps strong{font-size:14px}.help-steps p{font-size:10px}.shop-option .reward-token{color:inherit}.shop-option .reward-token>.ui-sprite{height:55px;width:45px}.shop-option>strong .reward-token>.ui-sprite{width:25px;height:28px}.shop-option .reward-token>b{font-size:25px}
@media(max-width:380px){.travel-modal .modal-header h2{font-size:20px}.travel-modal .modal-body{padding:14px}.detail-source{margin:17px -14px -14px}.detail-hero{height:105px;width:112px}.detail-level{font-size:20px;margin-bottom:13px}.evolution-grid{gap:11px 10px}.evolution-step{border-radius:10px}.evolution-step>.icon{right:-10px}.merge-equation{margin-top:13px}.collection-icon-tabs{gap:4px}.crate-grid{gap:9px}.crate-card .generator-art{height:69px}.memory-grid{gap:9px}.character-card-art{height:47px}.character-card strong{font-size:9px}.offer-card{gap:6px}.offer-card>span{width:62px;height:68px}.offer-card strong{font-size:12px}.pass-claim .reward-token>b{font-size:11px}.album-card .item-sprite{height:67px}}
.detail-sell { display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 16px;padding:8px 22px;border:1px solid #d6bc94;border-radius:12px;background:#f1e6ce;color:#776751;font-size:15px; }.detail-sell > .icon{width:20px;height:20px}.detail-sell .reward-token{font-size:17px;}

/* Center icon-only controls without the inline SVG baseline or font line box. */
.modal-close,
.crate-info {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;
}

.built .node-label {
  display: grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
}

.modal-close > .icon,
.built .node-label > .icon,
.round-button > .icon,
.detail-icon > .icon,
.crate-info > .icon,
.order-submit > .icon,
.travel-event-ribbon > .icon {
  display: block;
  flex-shrink: 0;
}

.travel-event-ribbon > .icon-check {
  width: 15px;
  height: 15px;
  stroke-width: 3.5;
}

/* Keep dialogs inside the iPhone notch and home indicator. */
.modal-backdrop{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.travel-modal{max-height:min(90dvh,calc(100dvh - max(18px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom))))}.modal-body{min-height:0}


/* Allow the game canvas to fit inside a scaled portfolio phone. */
body{min-width:0}
