/* from css/001_inline.css */ :root{ --bg:#0d0c19; --bg2:#151326; --panel:#171526; --panel2:#201d35; --line:#393451; --text:#fff8fd; --muted:#aaa4bd; --pink:#ff70ae; --pink2:#ff9bc9; --violet:#9a72ff; --blue:#70b8ff; --yellow:#ffd76b; --green:#75e5b5; --danger:#ff7488; --shadow:0 18px 48px rgba(0,0,0,.35); --r:22px; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;min-height:100%;background:#080710;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif} body{overflow-x:hidden} button,input{font:inherit} button{border:0;color:inherit;cursor:pointer} input{color:inherit} #app{ position:relative; width:min(100%,430px); min-height:100svh; margin:0 auto; overflow:hidden; background: radial-gradient(circle at 50% -10%,rgba(255,92,171,.22),transparent 36%), radial-gradient(circle at 10% 48%,rgba(134,93,255,.15),transparent 30%), linear-gradient(180deg,#141225 0%,#0d0c19 55%,#0a0914 100%); box-shadow:0 0 70px rgba(0,0,0,.55); } #app::before{ content:""; position:absolute;inset:0;pointer-events:none;opacity:.32; background-image: radial-gradient(circle at 18px 18px,rgba(255,142,194,.22) 0 2px,transparent 3px), radial-gradient(circle at 7px 5px,rgba(167,127,255,.14) 0 1.5px,transparent 2px); background-size:72px 72px,53px 53px; mask-image:linear-gradient(to bottom,#000,transparent 55%); } .page{display:none;position:relative;z-index:1;min-height:100svh;animation:pageIn .22s ease} .page.active{display:flex;flex-direction:column} @keyframes pageIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}} .safeTop{height:max(16px,env(safe-area-inset-top))} .screen{padding:10px 16px calc(24px + env(safe-area-inset-bottom));flex:1} .noBottom .screen{padding-bottom:24px} .appbar{height:55px;display:flex;align-items:center;justify-content:space-between;gap:10px} .appbar h1{font-size:21px;margin:0;font-weight:950;letter-spacing:-.04em} .appbar .subhead{font-size:11px;color:var(--muted);margin-top:1px} .iconBtn{ width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);font-size:20px;display:grid;place-items:center } .logo{ text-align:center;font-weight:1000;letter-spacing:-.055em;font-size:33px;line-height:1; color:#fff;text-shadow:0 0 15px rgba(255,100,176,.45) } .logo span{color:#ff83b8} .logoSmall{font-size:25px;text-align:left} .logoSub{text-align:center;font-size:10px;letter-spacing:.12em;color:#dcb9d0;margin-top:6px} .paw{color:var(--pink)} .card{ background:linear-gradient(180deg,rgba(29,27,48,.97),rgba(18,17,32,.98)); border:1px solid rgba(170,148,210,.25); border-radius:var(--r);box-shadow:var(--shadow) } .primary{ min-height:55px;border-radius:18px;width:100%;font-weight:950;font-size:17px; background:linear-gradient(135deg,#ff83bc,#ff559e); border:1px solid #ffc0dc; box-shadow:0 0 0 2px rgba(255,100,170,.16),0 10px 28px rgba(255,65,143,.24),inset 0 1px rgba(255,255,255,.45) } .primary:active{transform:translateY(1px)} .secondary{ min-height:48px;border-radius:16px;background:#1a182b;border:1px solid var(--line); color:#eee9fa;font-weight:850 } .muted{color:var(--muted)} .hidden{display:none!important} /* splash */ #splashPage{background: radial-gradient(circle at 50% 40%,rgba(255,125,188,.28),transparent 36%), radial-gradient(circle at 35% 70%,rgba(124,92,255,.18),transparent 34%), linear-gradient(180deg,#151326,#0c0b17)} .splashContent{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:18px 24px 28px} .splashMascot{ width:min(90%,355px);height:430px;display:flex;align-items:center;justify-content:center; position:relative;margin-top:-10px } .splashMascot::before{ content:"";position:absolute;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,#ffb7d7 0%,rgba(255,108,176,.22) 45%,transparent 72%); filter:blur(7px) } .splashMascot img{ position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain; filter:drop-shadow(0 22px 25px rgba(0,0,0,.32));border-radius:28px; box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 36px rgba(255,105,177,.18) } .splashTitle{font-size:47px;margin-top:-24px;transform:rotate(-2deg)} .splashTitle span{-webkit-text-stroke:1px rgba(255,255,255,.45)} .splashMini{font-size:13px;font-weight:800;color:#ead8e5;letter-spacing:.03em;margin-top:8px} .splashStart{margin-top:28px} /* bottom nav */ .bottomNav{ position:absolute;z-index:20;bottom:0;left:0;right:0; height:calc(70px + env(safe-area-inset-bottom));padding:7px 24px env(safe-area-inset-bottom); background:rgba(18,16,31,.96);border-top:1px solid rgba(174,151,211,.18); display:flex;justify-content:space-between;backdrop-filter:blur(18px) } .bottomNav button{width:86px;background:transparent;color:#8f899f;font-size:11px;font-weight:800} .bottomNav b{display:block;font-size:23px;line-height:27px;font-weight:500} .bottomNav button.active{color:#ff93bf} /* home */ .homeHeader{padding:3px 0 13px} .homeHeader .logo{font-size:32px} .featured{ width:100%;display:block;text-align:left; min-height:155px;padding:14px 14px 14px 16px;position:relative;overflow:hidden; border-color:#ff77b4;box-shadow:0 0 0 1px rgba(255,103,175,.3),0 0 25px rgba(255,76,158,.16) } .featured::before{ content:"";position:absolute;inset:0; background: radial-gradient(circle at 12% 20%,rgba(255,216,111,.18),transparent 22%), radial-gradient(circle at 80% 40%,rgba(255,102,176,.24),transparent 35%), linear-gradient(135deg,#43213e,#201d45); } .featuredText{position:relative;z-index:2;width:59%;padding-top:6px} .gameTag{display:inline-flex;align-items:center;gap:6px;color:#ffd9e9;font-size:11px;font-weight:900} .featured h2{font-size:39px;line-height:.9;margin:14px 0 8px;color:#fff;font-weight:1000;letter-spacing:-.04em;text-shadow:0 3px 0 #8e3461} .featured p{font-size:12px;color:#f6d8e8;margin:0;line-height:1.35} .featuredMascot{ position:absolute;z-index:2;right:-5px;bottom:-7px;width:47%;height:145px; display:flex;align-items:flex-end;justify-content:center } .featuredMascot img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;border-radius:25px;opacity:.96;mix-blend-mode:screen} .featuredArrow{position:absolute;z-index:4;right:12px;bottom:12px;width:29px;height:29px;border-radius:50%;background:#ffffff17;border:1px solid #ffffff28;display:grid;place-items:center} .gameList{display:flex;flex-direction:column;gap:10px;margin-top:13px} .listCard{display:flex;align-items:center;min-height:75px;padding:10px 12px;gap:12px} .listIcon{ width:55px;height:55px;border-radius:15px;display:grid;place-items:center;font-size:27px; background:linear-gradient(145deg,#3b3357,#24213a);border:1px solid #4c4568 } .listInfo{flex:1} .listInfo h3{font-size:15px;margin:0 0 4px} .listInfo p{font-size:11px;margin:0;color:#938da3} .chev{font-size:24px;color:#8e879e} .disabledGame{opacity:.55} /* config */ .sectionTitle{font-size:14px;font-weight:950;margin:16px 0 9px} .segment{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .segBtn{ height:43px;border-radius:12px;background:#1c1a2d;border:1px solid #443d5c;color:#bcb5ca;font-weight:900 } .segBtn.active{ color:#3c2232;background:linear-gradient(135deg,#ffafd0,#ff76b3);border-color:#ffd0e4; box-shadow:0 0 18px rgba(255,104,176,.2) } .nickList{display:flex;flex-direction:column;gap:8px} .nickRow{display:flex;align-items:center;gap:10px} .catDot{ width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px; background:#27223a;border:1px solid #443b5c } .nickRow:nth-child(2) .catDot{background:#1d3147} .nickRow:nth-child(3) .catDot{background:#493a20} .nickRow:nth-child(4) .catDot{background:#31303b} .nickRow input{ flex:1;height:43px;border-radius:11px;border:1px solid #47405f;background:#141321;padding:0 13px;outline:none } .nickRow input:focus{border-color:#ff78b1;box-shadow:0 0 0 3px rgba(255,91,160,.12)} .nickRow input.errorInput{border-color:#ff657c} .sizeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .sizeCard{ min-height:99px;border-radius:16px;background:#1b192a;border:1px solid #423c58; display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px } .sizeCard.active{border-color:#ff7bb5;box-shadow:0 0 0 1px #ff7bb5,0 0 18px rgba(255,86,164,.19)} .miniGrid{display:grid;grid-template-columns:repeat(3,9px);gap:4px} .miniGrid i{width:9px;height:9px;background:#aaa4bd;border-radius:2px} .sizeCard.active .miniGrid i{background:#ff8abd} .sizeCard b{font-size:15px}.sizeCard small{color:#aaa4bd} .formError{min-height:20px;color:#ff8a9b;font-size:12px;margin-top:10px;font-weight:750} .configCTA{margin-top:10px} /* arrange */ .playerTabs{display:flex;gap:7px;overflow-x:auto;padding:3px 0 12px;scrollbar-width:none} .playerTabs::-webkit-scrollbar{display:none} .playerTab{ flex:0 0 auto;min-width:83px;height:54px;padding:3px 7px;border-radius:13px;background:#1d1a2c; border:1px solid #413a57;color:#aea8ba } .playerTab.active{background:linear-gradient(135deg,#ffd0e1,#ff94bd);color:#3a2230;border-color:#fff0f6} .playerTab b{display:block;font-size:13px}.playerTab small{font-size:10px} .boardPanel{padding:10px;border-radius:19px;background:#151321;border:1px solid #403850} .board{display:grid;gap:5px} .boardCell{ aspect-ratio:1;border-radius:10px;background:linear-gradient(145deg,#ffe1ed,#f6c6da); color:#282030;border:1px solid #fff0f6;font-size:clamp(18px,6vw,25px);font-weight:1000; box-shadow:inset 0 -2px rgba(117,66,91,.12) } .boardCell.selected{outline:3px solid #ff55a0;transform:scale(.96);background:#ffacd0} .arrangeHelp{font-size:11px;color:#aba4b8;line-height:1.45;margin:10px 4px} .dualBtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px} .randomBtn{background:linear-gradient(135deg,#835ef0,#b653f2);border-color:#c69aff} .arrangeCTA{margin-top:12px} /* game */ .gamePageBg{ background: radial-gradient(circle at 50% 17%,rgba(54,111,255,.18),transparent 26%), radial-gradient(circle at 50% 34%,rgba(255,79,169,.13),transparent 33%) } .drawZone{text-align:center;padding:3px 0 14px} .orb{ width:155px;height:155px;border-radius:50%;margin:2px auto 10px;display:grid;place-items:center;position:relative; background:radial-gradient(circle at 48% 38%,#294b8a 0%,#101d42 45%,#080a19 72%); border:5px solid #70d9ff;box-shadow:0 0 14px #3da5ff,0 0 30px rgba(239,79,255,.38),inset 0 0 25px #050a1b } .orb::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(255,99,198,.75);box-shadow:0 0 18px rgba(255,68,181,.45)} .drawNum{font-size:70px;font-weight:1000;text-shadow:0 0 18px #57bcff} .drawReady{font-size:28px} .countText{font-size:13px;font-weight:800;color:#ddd5e7} .progress{width:180px;height:5px;background:#242039;border-radius:999px;margin:9px auto 0;overflow:hidden} .progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#74d4ff,#ff66b5)} .gameBoards{display:grid;grid-template-columns:1fr;gap:10px} .gameBoards.multi{grid-template-columns:repeat(2,1fr)} .playerBoardCard{padding:8px;border-radius:15px;background:#171525;border:1px solid #423a58} .playerBoardCard.p1{border-color:#ff6eae}.playerBoardCard.p2{border-color:#6bacff}.playerBoardCard.p3{border-color:#ffd262}.playerBoardCard.p4{border-color:#9e7cff} .playerBoardHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .playerBoardHead b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%} .bingoCount{font-size:10px;font-weight:900;color:#ff9ac4} .gameBoard{display:grid;gap:3px} .gameCell{ aspect-ratio:1;border-radius:5px;background:#252235;border:1px solid #48405f;display:grid;place-items:center; color:#f0ebf5;font-weight:900;font-size:clamp(11px,4vw,17px);position:relative;overflow:hidden } .gameCell.marked{background:linear-gradient(135deg,#ffbfd9,#ff8fbe);color:#3b2430;border-color:#ffd7e8} .gameCell > span{position:relative;z-index:2} .gameCell.marked::before{content:"๐Ÿพ";position:absolute;inset:0;display:grid;place-items:center;font-size:1.45em;opacity:.32;z-index:1;transform:translateY(1px);filter:drop-shadow(0 1px 1px rgba(255,255,255,.2));} .historyTitle{font-size:12px;font-weight:900;margin:13px 0 7px} .historyChips{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none} .historyChips::-webkit-scrollbar{display:none} .numChip{ flex:0 0 29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#211e33;border:1px solid #49415e;color:#c8c1d0;font-size:11px;font-weight:900 } .numChip.latest{background:#ff75b0;color:#fff;border-color:#ffbdd8} /* win */ #winPage{ background: radial-gradient(circle at 50% 35%,rgba(255,123,190,.38),transparent 33%), radial-gradient(circle at 25% 60%,rgba(255,200,91,.15),transparent 25%), linear-gradient(180deg,#24162d,#100e1d 70%) } .winScreen{padding:25px 20px 24px;align-items:center;justify-content:center;text-align:center} .winImage{ width:100%;max-width:370px;min-height:300px;position:relative;display:flex;align-items:center;justify-content:center } .winImage::before{content:"";position:absolute;width:310px;height:250px;background:radial-gradient(ellipse,#ffb5d5,rgba(255,91,171,.16) 55%,transparent 70%);filter:blur(5px)} .winImage img{position:relative;z-index:2;width:100%;max-height:330px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.32));} .winnerWord{ font-size:58px;font-weight:1000;line-height:.88;color:#ffe680;letter-spacing:-.05em;margin:-5px 0 12px; -webkit-text-stroke:2px #c66c26;text-shadow:0 6px 0 #823957,0 0 24px rgba(255,220,87,.28);transform:rotate(-2deg) } .winnerName{font-size:24px;font-weight:1000;color:#ffacd0;margin-bottom:7px} .winMessage{font-size:13px;color:#eee0e9;margin-bottom:22px} .winBtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%} /* toast */ .toast{ position:absolute;z-index:50;left:50%;bottom:90px;transform:translateX(-50%) translateY(14px); min-width:210px;max-width:90%;padding:11px 15px;border-radius:14px;background:#2a2439;border:1px solid #554969; box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:12px;font-weight:800;text-align:center;opacity:0;pointer-events:none;transition:.2s } .toast.show{opacity:1;transform:translateX(-50%)} /* desktop preview */ @media(min-width:700px){ body{padding:24px 0;background:radial-gradient(circle at 50% 10%,#242036,#090810 62%)} #app{min-height:calc(100svh - 48px);height:min(860px,calc(100svh - 48px));border-radius:30px;border:1px solid #332e46} .page{min-height:100%} .splashContent{min-height:100%} } /* mascot idle animation */ @keyframes catIdle{ 0%,100%{transform:translateY(0) rotate(-1deg) scale(1)} 25%{transform:translateY(-4px) rotate(.3deg) scale(1.008)} 50%{transform:translateY(-9px) rotate(1deg) scale(1.016)} 75%{transform:translateY(-4px) rotate(-.2deg) scale(1.008)} } @keyframes catCardSway{ 0%,100%{transform:translateY(0) rotate(-1.2deg)} 50%{transform:translateY(-5px) rotate(1.2deg)} } @keyframes catWin{ 0%,100%{transform:translateY(0) rotate(-1deg) scale(1)} 20%{transform:translateY(-12px) rotate(1deg) scale(1.025)} 42%{transform:translateY(0) rotate(-.7deg) scale(.99)} 68%{transform:translateY(-7px) rotate(.5deg) scale(1.012)} } @keyframes catPoke{ 0%{transform:translateY(0) scale(1)} 35%{transform:translateY(-18px) scale(1.04) rotate(2deg)} 65%{transform:translateY(2px) scale(.985) rotate(-1deg)} 100%{transform:translateY(0) scale(1)} } @keyframes twinkle{ 0%,100%{opacity:.35;transform:scale(.8) rotate(0deg)} 50%{opacity:1;transform:scale(1.2) rotate(15deg)} } .splashMascot img{ animation:catIdle 3.5s ease-in-out infinite; transform-origin:50% 85%; will-change:transform; } .featuredMascot img{ animation:catCardSway 3s ease-in-out infinite; transform-origin:50% 90%; will-change:transform; } .winImage img{ animation:catWin 1.8s ease-in-out infinite; transform-origin:50% 90%; will-change:transform; } .splashMascot.poked img{} .splashMascot::after{ content:"โœฆ"; position:absolute; z-index:4; right:13%; top:11%; font-size:28px; color:#ffe0ef; text-shadow:0 0 14px #ff66ad; animation:twinkle 1.55s ease-in-out infinite; } @media(prefers-reduced-motion:reduce){ .splashMascot img,.featuredMascot img,.winImage img, .splashMascot::after{animation:none!important} } .countNum{display:inline-block;min-width:1ch;text-align:center} .countNum.pop{animation:bingoCountPop .42s cubic-bezier(.2,.9,.25,1.25)} @keyframes bingoCountPop{ 0%{transform:scale(1)} 35%{transform:scale(1.72)} 70%{transform:scale(.9)} 100%{transform:scale(1)} } .comingCard{justify-content:flex-start} .comingCard .listIcon{font-size:29px;background:linear-gradient(145deg,#3e3657,#24213a)} .comingCard .listInfo h3{font-size:22px;margin:0;line-height:1} .comingCard .listInfo p{display:none} .comingCard .chev{display:none} .floatDeco{position:absolute;z-index:3;pointer-events:none;user-select:none} .floatDeco.heart{font-size:44px;color:#ffb6d4;text-shadow:0 0 18px rgba(255,121,185,.38)} .floatDeco.spark{font-size:26px;color:#ffe68e;text-shadow:0 0 14px rgba(255,221,120,.35)} .h1{left:18px;top:34px;animation:floatHeartA 2.5s ease-in-out infinite} .h2{right:14px;bottom:58px;font-size:34px;animation:floatHeartB 2.9s ease-in-out infinite} .s1{right:34px;top:26px;animation:floatSparkA 1.8s ease-in-out infinite} .s2{left:50px;bottom:20px;font-size:28px;animation:floatSparkB 2.2s ease-in-out infinite} .s3{left:12px;top:150px;font-size:22px;animation:floatSparkC 2s ease-in-out infinite} @keyframes floatHeartA{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.08)} } @keyframes floatHeartB{ 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(-8px) rotate(8deg)} } @keyframes floatSparkA{ 0%,100%{transform:translateY(0) rotate(0) scale(1);opacity:.75} 50%{transform:translateY(-6px) rotate(16deg) scale(1.18);opacity:1} } @keyframes floatSparkB{ 0%,100%{transform:translateY(0) scale(.92);opacity:.7} 50%{transform:translateY(-12px) scale(1.25);opacity:1} } @keyframes floatSparkC{ 0%,100%{transform:translateX(0) rotate(0deg);opacity:.7} 50%{transform:translateX(5px) translateY(-8px) rotate(12deg);opacity:1} } .homeHeaderRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .homeHeaderRow .homeTitleWrap{ flex:1; text-align:center; padding-left:40px; } .homeReturnBtn{ flex:0 0 40px; font-size:22px; } /* ===== v4.3 Sakura Theme ===== */ :root{ --bg:#fff7f9; --bg2:#fdeef3; --panel:#fffafb; --panel2:#fce8ef; --line:#efcbd8; --text:#5a3f4c; --muted:#9d7f8c; --pink:#f48eb6; --pink2:#f8adc9; --violet:#cbb6ea; --blue:#b8d8f3; --yellow:#f6d99f; --green:#bfe5d2; --danger:#e8798f; --shadow:0 14px 34px rgba(177,110,137,.16); } html,body{ background:#f8eaf0; color:var(--text); } #app{ background: radial-gradient(circle at 50% -12%,rgba(255,190,216,.72),transparent 34%), radial-gradient(circle at 12% 42%,rgba(235,214,255,.45),transparent 28%), linear-gradient(180deg,#fff9fb 0%,#fff3f6 58%,#fcecf2 100%); box-shadow:0 0 65px rgba(171,112,139,.22); } #app::before{ opacity:.44; background-image: radial-gradient(circle at 18px 18px,rgba(243,157,190,.26) 0 2px,transparent 3px), radial-gradient(circle at 7px 5px,rgba(201,179,231,.22) 0 1.5px,transparent 2px); } #splashPage{ background: radial-gradient(circle at 50% 35%,rgba(255,203,224,.68),transparent 34%), radial-gradient(circle at 25% 72%,rgba(230,214,250,.5),transparent 32%), linear-gradient(180deg,#fffafb,#fdeff4); } .logo{ color:#7c5266; text-shadow:0 3px 14px rgba(240,142,181,.2); } .logo span{color:#ec78a6} .logoSub,.splashMini{color:#a27689} .card{ background:linear-gradient(180deg,rgba(255,252,253,.98),rgba(255,243,247,.98)); border-color:#efceda; box-shadow:var(--shadow); } .primary{ color:#fff; background:linear-gradient(135deg,#f7a9c6,#ef7fa9); border-color:#ffd4e3; box-shadow:0 0 0 2px rgba(239,127,169,.08),0 10px 24px rgba(222,120,159,.18),inset 0 1px rgba(255,255,255,.56); } .secondary{ background:#fff8fa; border-color:#e8cbd6; color:#765565; } .iconBtn{ background:rgba(255,255,255,.62); border-color:#eccfd9; color:#80586a; } .muted{color:#aa8796} /* Featured Bingo */ .featured{ border-color:#ef9fbd; box-shadow:0 0 0 1px rgba(240,145,182,.15),0 12px 26px rgba(215,139,167,.15); } .featured::before{ background: radial-gradient(circle at 12% 20%,rgba(255,220,177,.38),transparent 22%), radial-gradient(circle at 80% 40%,rgba(255,182,210,.42),transparent 35%), linear-gradient(135deg,#ffe8f0,#efdff5); } .gameTag{color:#8f6073} .featured h2{ color:#c95f8b; text-shadow:0 2px 0 rgba(255,255,255,.9); } .featured p{color:#815d6c} .featuredArrow{ color:#815d6c; background:#ffffffa8; border-color:#efd0dc; } .listCard{color:#634a56} .listIcon{ background:linear-gradient(145deg,#fbeaf1,#eee4f7); border-color:#e6cdd9; } .listInfo p{color:#a18491} .chev{color:#b693a2} .disabledGame{opacity:.72} /* Config */ .segBtn{ background:#fff8fa; border-color:#e5cad5; color:#9b7c89; } .segBtn.active{ color:#72485b; background:linear-gradient(135deg,#ffd8e7,#f6a8c6); border-color:#f3b4cc; box-shadow:0 0 15px rgba(239,139,179,.15); } .nickRow input{ background:#fffdfd; border-color:#e7ccd7; color:#5a3f4c; } .nickRow input:focus{ border-color:#ef95b8; box-shadow:0 0 0 3px rgba(239,149,184,.12); } .catDot{ background:#fbe9f0; border-color:#e8cbd7; } .nickRow:nth-child(2) .catDot{background:#edf4fb} .nickRow:nth-child(3) .catDot{background:#fff5dd} .nickRow:nth-child(4) .catDot{background:#f1eafd} .sizeCard{ background:#fff9fb; border-color:#e6cbd6; color:#765765; } .sizeCard.active{ border-color:#ee93b7; box-shadow:0 0 0 1px #ee93b7,0 0 16px rgba(239,139,179,.14); } .miniGrid i{background:#c7aeb9} .sizeCard.active .miniGrid i{background:#ed8fb3} /* Arrange */ .playerTab{ background:#fff8fa; border-color:#e6cbd6; color:#9b7d89; } .playerTab.active{ background:linear-gradient(135deg,#ffe6ef,#f6b0cb); color:#70485a; border-color:#efb4cb; } .boardPanel{ background:#fffafb; border-color:#e9cdd8; } .boardCell{ background:linear-gradient(145deg,#fff7fa,#f8dce7); color:#654957; border-color:#f0d1dc; } .boardCell.selected{ outline-color:#ed87af; background:#f8b7d0; } .arrangeHelp{color:#a08290} .randomBtn{ background:linear-gradient(135deg,#d8c2ef,#c8a9e4); border-color:#d9c3eb; color:#5d476a; } /* Game */ .gamePageBg{ background: radial-gradient(circle at 50% 16%,rgba(247,174,204,.38),transparent 28%), radial-gradient(circle at 50% 36%,rgba(219,202,243,.35),transparent 34%), linear-gradient(180deg,#fff7fa,#fdeef4); } .orb{ background:radial-gradient(circle at 48% 38%,#fffefd 0%,#ffe5ef 52%,#f4c7dc 78%); border-color:#f4a7c6; box-shadow:0 0 14px rgba(239,139,181,.36),0 0 30px rgba(205,177,235,.28),inset 0 0 24px rgba(255,255,255,.9); } .orb::before{ border-color:rgba(202,178,234,.78); box-shadow:0 0 16px rgba(202,178,234,.25); } .drawNum{ color:#cc6790; text-shadow:0 2px 10px rgba(255,255,255,.9); } .countText{color:#8b6a78} .progress{background:#ead7df} .progress i{background:linear-gradient(90deg,#d8c1ef,#ef8fb6)} .playerBoardCard{ background:#fffafb; border-color:#e7cbd7; } .playerBoardCard.p1{border-color:#ee99ba} .playerBoardCard.p2{border-color:#b6cfe9} .playerBoardCard.p3{border-color:#e8ce91} .playerBoardCard.p4{border-color:#c9b1e9} .bingoCount{color:#d86e99} .gameCell{ background:#fff8fa; border-color:#e6ccd6; color:#674b58; } .gameCell.marked{ background:linear-gradient(135deg,#ffdce9,#f3a8c4); color:#5b3e4b; border-color:#efb4ca; } .historyTitle{color:#765665} .numChip{ background:#fff9fb; border-color:#e7ccd7; color:#907482; } .numChip.latest{ background:#ef94b8; color:#fff; border-color:#ef94b8; } /* Winner */ #winPage{ background: radial-gradient(circle at 50% 35%,rgba(255,190,216,.55),transparent 34%), radial-gradient(circle at 25% 65%,rgba(246,218,159,.24),transparent 25%), linear-gradient(180deg,#fff9fb,#fcecf3 72%); } .winnerWord{ color:#e7a8ba; -webkit-text-stroke:2px #c96f91; text-shadow:0 5px 0 #f8dce6,0 0 22px rgba(232,152,183,.22); } .winnerName{color:#cf6f97} .winMessage{color:#80616f} .toast{ background:#fff8fa; border-color:#e7cbd6; color:#684b59; box-shadow:0 12px 26px rgba(156,104,128,.18); } /* home mascot placement */ .splashMascot{ transform:translateY(-28px); margin-bottom:-4px; overflow:visible; } .splashTitle{ margin-top:-4px !important; } .splashMascot img{ object-fit:contain; object-position:center center; } .featuredMascot img{ object-fit:contain; object-position:center bottom; mix-blend-mode:normal; border-radius:0; } #openBingo .featuredMascot{width:53%;height:158px;right:-8px;bottom:-8px} #openBingo .featuredMascot img{transform:scale(1.06);transform-origin:50% 90%} /* click heart effect */ .heartBurst{ position:absolute; left:50%; top:42%; z-index:8; pointer-events:none; font-size:34px; color:#ef8fb6; text-shadow:0 0 13px rgba(239,143,182,.42); animation:heartBurstMove .78s cubic-bezier(.15,.8,.25,1) forwards; } @keyframes heartBurstMove_legacy{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.45) rotate(0deg); } 18%{ opacity:1; transform:translate(calc(-50% + var(--hx1)),calc(-50% + var(--hy1))) scale(1.12) rotate(var(--hr1)); } 100%{ opacity:0; transform:translate(calc(-50% + var(--hx2)),calc(-50% + var(--hy2))) scale(.78) rotate(var(--hr2)); } } @media(min-width:700px){ body{ background:radial-gradient(circle at 50% 10%,#f8e5ed,#eadde7 68%); } #app{border-color:#e6cbd5} } /* ===== v4.4 Responsive Home ===== */ html,body{ min-height:100%; } body{ min-height:100dvh; } /* ์•ฑ์€ ๋ชจ๋ฐ”์ผ ๋น„์œจ์„ ์œ ์ง€ํ•˜๋˜ ์ฐฝ์ด ์ข์•„์ง€๋ฉด ๊ฐ™์ด ์ถ•์†Œ */ #app{ width:min(100vw,430px); min-height:100dvh; height:auto; overflow-x:hidden; overflow-y:visible; } .page{ min-height:100dvh; } /* ํ™ˆ ํƒ€์ดํ‹€ ํ™”๋ฉด์€ ๋ธŒ๋ผ์šฐ์ € ๋†’์ด์— ๋งž์ถฐ ๊ฐ ์˜์—ญ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆ */ .splashContent{ min-height:calc(100dvh - max(16px,env(safe-area-inset-top))); justify-content:center; gap:clamp(6px,1.6dvh,16px); padding: clamp(8px,1.8dvh,18px) clamp(14px,5vw,24px) clamp(14px,2.6dvh,28px); } /* 1145x1374 PNG ๋น„์œจ์— ๋งž์ถฐ ๋„ˆ๋น„/๋†’์ด ๋ชจ๋‘ viewport ๊ธฐ์ค€์œผ๋กœ ์ œํ•œ */ .splashMascot{ width:min(84vw,355px,calc(47dvh * 0.8333)); height:auto; aspect-ratio:1145 / 1374; max-height:47dvh; min-height:0; flex:0 1 auto; margin-top:0; margin-bottom:0; transform:none; } .splashMascot img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; box-shadow:none; border-radius:0; } /* ์ด๋ฏธ์ง€๊ฐ€ ์ค„์–ด๋“ค๋ฉด ๋กœ๊ณ /๋ฒ„ํŠผ๋„ ๊ฐ™์ด ์ค„์–ด๋“ฆ */ .splashTitle{ margin-top:0 !important; font-size:clamp(31px,10vw,47px); flex:0 0 auto; } .splashMini{ margin-top:0; font-size:clamp(10px,3.1vw,13px); } .splashStart{ margin-top:clamp(5px,1.4dvh,18px); min-height:clamp(46px,7.2dvh,55px); font-size:clamp(14px,4vw,17px); flex:0 0 auto; } /* ์•„์ฃผ ๋‚ฎ์€ ์ฐฝ์—์„œ๋Š” ๋” ๊ณต๊ฒฉ์ ์œผ๋กœ ์ถ•์†Œ */ @media (max-height:680px){ .splashMascot{ width:min(72vw,300px,calc(39dvh * 0.8333)); max-height:39dvh; } .splashContent{ gap:5px; padding-top:6px; padding-bottom:10px; } .splashStart{margin-top:4px} } /* ๊ธฐ์กด ๋ฐ์Šคํฌํ†ฑ ๋ฏธ๋ฆฌ๋ณด๊ธฐ์˜ ๊ณ ์ • ๋†’์ด๋ฅผ ์ œ๊ฑฐ */ @media(min-width:700px){ body{ padding:0; display:flex; justify-content:center; min-height:100dvh; } #app{ min-height:100dvh; height:auto; border-radius:0; } .page{ min-height:100dvh; } .splashContent{ min-height:calc(100dvh - max(16px,env(safe-area-inset-top))); } } /* ===== v4.4 Mascot Interaction ===== */ /* ํ‰์ƒ์‹œ idle */ .splashMascot img{ animation:catIdle 3.5s ease-in-out infinite; transform-origin:50% 85%; } /* ํด๋ฆญ ์ค‘์—๋Š” idle ์™„์ „ ์ค‘์ง€ ํ›„ ํด๋ฆญ ๋ชจ์…˜๋งŒ ์‹คํ–‰ */ .splashMascot.is-clicking img{ animation:catPoke .58s ease-out 1 both !important; } /* ํด๋ฆญ ๋ชจ์…˜์ด ๋๋‚œ ์งํ›„ ์›์ ์œผ๋กœ ์ž ๊น ๋ณต๊ท€ */ .splashMascot.is-resetting img{ animation:none !important; transform:translateY(0) rotate(-1deg) scale(1) !important; } /* ํ•˜ํŠธ๋Š” JS์—์„œ ์ •ํ•œ '์บ๋ฆญํ„ฐ ์™ธ๊ณฝ ์ขŒํ‘œ'์—์„œ ์‹œ์ž‘ */ .heartBurst{ position:absolute; z-index:9; pointer-events:none; font-size:clamp(24px,8vw,35px); color:#ef8fb6; text-shadow:0 0 13px rgba(239,143,182,.42); transform-origin:center; animation:heartOuterBurst .82s cubic-bezier(.15,.8,.25,1) forwards; } @keyframes heartOuterBurst{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.42) rotate(var(--rot0)); } 18%{ opacity:1; transform: translate( calc(-50% + var(--dx1)), calc(-50% + var(--dy1)) ) scale(1.12) rotate(var(--rot1)); } 100%{ opacity:0; transform: translate( calc(-50% + var(--dx2)), calc(-50% + var(--dy2)) ) scale(.72) rotate(var(--rot2)); } } /* ===== v4.7.1 Paw Speech Bubble ===== */ .mascotSpeech{ position:absolute; z-index:12; top:5%; left:50%; width:min(84%,292px); min-height:66px; padding:15px 44px 15px 18px; border-radius:24px; background:linear-gradient(180deg,rgba(255,253,254,.985),rgba(255,246,249,.985)); border:2px solid #efb5cb; box-shadow: 0 12px 26px rgba(191,117,146,.18), inset 0 1px rgba(255,255,255,.92); color:#704d5d; font-size:clamp(12px,3.6vw,15px); line-height:1.45; font-weight:850; text-align:center; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-10px) scale(.93); transition: opacity .24s ease, transform .28s cubic-bezier(.2,.85,.25,1.12), visibility 0s linear .28s; } .mascotSpeech.show{ opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); transition: opacity .24s ease, transform .28s cubic-bezier(.2,.85,.25,1.12), visibility 0s; } .speechText{ display:block; position:relative; z-index:4; } .speechPaw{ position:absolute; right:12px; bottom:9px; z-index:4; font-size:26px; transform-origin:50% 70%; filter:drop-shadow(0 2px 2px rgba(196,114,146,.14)); animation:speechPawWiggle 1.8s ease-in-out infinite; } @keyframes speechPawWiggle{ 0%,100%{transform:rotate(-10deg) translateY(0)} 50%{transform:rotate(7deg) translateY(-2px)} } @media(max-height:680px){ .mascotSpeech{ top:2%; width:min(80%,258px); min-height:56px; padding:12px 40px 12px 14px; font-size:12px; } .speechPaw{ right:10px; bottom:7px; font-size:22px; } } @media(prefers-reduced-motion:reduce){ .speechPaw{animation:none!important} } /* ===== v4.8.9 temporary self-diagnostic UI ===== */ .diagFloatBtn{ position:absolute;z-index:70; top:max(14px,calc(env(safe-area-inset-top) + 8px));right:14px; width:42px;height:42px;border-radius:15px; border:1px solid #efb5cb; background:rgba(255,250,252,.94); box-shadow:0 8px 20px rgba(190,112,145,.16); color:#9d5875;font-size:19px;font-weight:950; display:flex;align-items:center;justify-content:center; backdrop-filter:blur(10px) } .diagFloatBtn:active{transform:scale(.96)} .diagFloatBtn::after{ content:"";position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%; background:#75c98d;box-shadow:0 0 0 2px #fff7fa } .diagOverlay{ position:absolute;inset:0;z-index:140;display:none;align-items:center;justify-content:center; padding:calc(20px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom)); background:rgba(70,45,57,.28);backdrop-filter:blur(7px) } .diagOverlay.show{display:flex} .diagCard{ width:min(100%,390px);max-height:86dvh;overflow:auto; border-radius:26px;border:1px solid #efc7d6; background:linear-gradient(180deg,#fffafb,#fff3f7); box-shadow:0 20px 48px rgba(116,64,85,.24); padding:20px;color:#5a3f4c } .diagTitleRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .diagTitle{font-size:20px;font-weight:950} .diagClose{width:34px;height:34px;border-radius:12px;border:1px solid #efd1dc;background:#fff;color:#8b6476;font-size:18px} .diagSub{font-size:12px;line-height:1.5;color:#927283;margin-bottom:12px} .diagStatus{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px} .diagChip{padding:6px 9px;border-radius:999px;background:#fbe2ec;border:1px solid #f2c6d6;font-size:11px;font-weight:900;color:#965d74} .diagChip.ok{background:#edf9f0;border-color:#c9e8d0;color:#4b8059} .diagLogBox{ width:100%;height:260px;resize:none;border-radius:16px;border:1px solid #eed0dc; background:#fffdfd;color:#5b4650;padding:12px;font:11px/1.48 ui-monospace,SFMono-Regular,Consolas,monospace; outline:none;white-space:pre;overflow:auto } .diagBtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px} .diagBtn{min-height:44px;border-radius:14px;border:1px solid #efc7d6;background:#fff;color:#795365;font-weight:900;font-size:13px} .diagBtn.primaryDiag{background:linear-gradient(135deg,#f7a6c5,#f18ab5);color:white;border-color:#ed91b5} .diagBtn.dangerDiag{color:#a85b70;background:#fff5f7} .diagFoot{margin-top:10px;font-size:10px;line-height:1.45;color:#a28390} /* ===== v4.8.11 Settings / Exit + diagnostics ===== */ .mobileSettingsBtn{ display:none;position:absolute;z-index:72; top:max(14px,calc(env(safe-area-inset-top) + 8px));left:14px; width:42px;height:42px;border-radius:15px; align-items:center;justify-content:center; border:1px solid #efb5cb;background:rgba(255,250,252,.94); color:#9d5875;font-size:21px;font-weight:900; box-shadow:0 8px 20px rgba(190,112,145,.15);backdrop-filter:blur(10px) } .mobileSettingsBtn:active{transform:scale(.95)} @media (max-width:600px),(pointer:coarse){.mobileSettingsBtn{display:flex}} .appModalOverlay{ position:absolute;inset:0;z-index:190;display:none;align-items:center;justify-content:center; padding:calc(22px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); background:rgba(70,44,57,.30);backdrop-filter:blur(7px) } .appModalOverlay.show{display:flex;animation:exitFadeIn .18s ease-out both} .appModalCard{ width:min(100%,350px);border-radius:28px;padding:22px 20px 20px; background:linear-gradient(180deg,#fffafb,#fff0f5);border:2px solid #efbfd1; box-shadow:0 24px 55px rgba(130,72,96,.24),inset 0 1px rgba(255,255,255,.95); color:#684655;text-align:center;position:relative; animation:exitPop .22s cubic-bezier(.2,.85,.25,1.15) both } .appModalClose{ position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:12px; background:transparent;color:#aa7288;font-size:22px;font-weight:900 } .settingsPaw{font-size:38px;margin:2px 0 6px;filter:drop-shadow(0 3px 3px rgba(196,114,146,.12))} .appModalTitle{font-size:22px;font-weight:1000;color:#714b5c;margin-bottom:8px} .appModalDesc{font-size:13px;line-height:1.6;color:#9b7887;font-weight:750;margin:0 4px 18px} .settingsExitBtn{ width:100%;min-height:52px;border-radius:17px;border:1px solid #eeafc8; background:linear-gradient(135deg,#ffdbe8,#ffc9dc);color:#9a476a;font-size:15px;font-weight:950; box-shadow:0 8px 18px rgba(210,119,155,.12) } .exitFace{font-size:46px;line-height:1;margin:2px 0 10px} .exitActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px} .exitCancelBtn,.exitLeaveBtn{min-height:49px;border-radius:16px;font-size:14px;font-weight:950} .exitCancelBtn{background:#fff;border:1px solid #e8cbd6;color:#8c6c79} .exitLeaveBtn{background:linear-gradient(135deg,#f49abb,#ec7dab);border:1px solid #ef91b5;color:white;box-shadow:0 8px 18px rgba(221,95,145,.18)} @keyframes exitFadeIn{from{opacity:0}to{opacity:1}} @keyframes exitPop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}} /* ===== v4.8.12 splash touch/click navigation ===== */ #splashPage{ cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .splashMascot, .mobileSettingsBtn{ cursor:pointer; } .splashGoText{ margin-top:clamp(8px,1.8dvh,18px); flex:0 0 auto; color:rgba(111,73,91,.72); font-size:clamp(15px,4.3vw,20px); font-weight:900; letter-spacing:.14em; line-height:1.25; text-align:center; text-shadow:0 2px 9px rgba(255,255,255,.95),0 1px 16px rgba(220,133,168,.22); user-select:none; pointer-events:none; animation:splashGoBreathe 2.6s ease-in-out infinite; } @keyframes splashGoBreathe{ 0%,100%{opacity:.58;transform:translateY(0)} 50%{opacity:.88;transform:translateY(-1px)} } @media (hover:hover) and (pointer:fine){ #splashPage{cursor:pointer} .splashMascot,.mobileSettingsBtn{cursor:pointer} } @media (prefers-reduced-motion:reduce){ .splashGoText{animation:none!important;opacity:.76} } /* ===== v4.8.14 Colosseum ===== */ .colCard{border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));} .colIcon{font-size:28px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));} .colHint{margin-top:8px;color:var(--muted);font-size:12px;text-align:center} .stepPill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:12px;color:#ffe9ff;margin:0 auto 14px} .playerCountWrap{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);margin-bottom:16px} .playerCountNum{min-width:64px;text-align:center;font-size:28px;font-weight:900;color:#fff1ff} .playerCountRange{flex:1;accent-color:#ff9bd8} .jobGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .jobCard{position:relative;padding:14px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);text-align:left;display:flex;gap:12px;align-items:flex-start;transition:transform .16s ease,border-color .16s ease,background .16s ease} .jobCard.active{border-color:#ffb3df;background:linear-gradient(180deg,rgba(255,179,223,.18),rgba(255,255,255,.08));transform:translateY(-2px)} .jobEmoji{font-size:26px;line-height:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))} .jobMeta b{display:block;font-size:15px;margin-bottom:3px} .jobMeta small{display:block;color:var(--muted);font-size:11px;line-height:1.35} .colCta{margin-top:18px} .rouletteArena,.bracketCard,.battleCard,.championCard{border-radius:24px;padding:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 48px rgba(0,0,0,.22)} .ballRack{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:18px 0 10px} .seedBall{width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.92),rgba(255,255,255,.18) 34%,rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 30px rgba(0,0,0,.22);font-weight:900;text-align:center;padding:6px;position:relative} .seedBall.spin{animation:spinBall 1.1s linear infinite} .seedBall .seedRank{position:absolute;top:6px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:999px;background:rgba(13,11,24,.66);font-size:10px;color:#ffd5ef} .seedBall .seedFace{font-size:22px;line-height:1;margin-bottom:4px} .seedBall .seedName{font-size:11px;line-height:1.15;color:#fff1ff;word-break:keep-all} .seedOrderList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px} .seedOrderItem{padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.18);display:flex;align-items:center;gap:10px;font-size:12px} .seedOrderItem .badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:900} .bracketList{display:flex;flex-direction:column;gap:12px;margin-top:14px} .matchRow{padding:14px;border-radius:18px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)} .matchTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#fcd8ef;font-size:11px} .duelNames{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800} .duelNames .duelSlot{flex:1;padding:10px;border-radius:14px;background:rgba(255,255,255,.06);text-align:center} .duelNames .duelVs{font-size:13px;opacity:.82} .duelWinner{margin-top:10px;font-size:12px;color:#a6ffd2;font-weight:700} .bracketAction{margin-top:16px} .vsStage{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center} .vsCard{position:relative;overflow:hidden;width:100%;border-radius:28px;padding:28px;background:linear-gradient(135deg,rgba(13,11,24,.9),rgba(58,25,45,.72));border:1px solid rgba(255,255,255,.12)} .vsSplit{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center} .vsSplit:before{content:"";position:absolute;left:50%;top:-18%;width:5px;height:136%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,198,221,.86),rgba(255,255,255,0));transform:translateX(-50%) rotate(18deg);box-shadow:0 0 24px rgba(255,180,211,.5)} .vsFighter{text-align:center;padding:12px;border-radius:20px;background:rgba(255,255,255,.04)} .vsFighter .face{font-size:50px;margin-bottom:10px} .vsFighter .name{font-size:18px;font-weight:900} .vsFighter .seed{font-size:12px;color:#ffd7ee;margin-top:6px} .bigVs{font-size:44px;font-weight:1000;color:#fff4fb;text-shadow:0 0 18px rgba(255,167,212,.46)} .battleWrap{display:flex;flex-direction:column;gap:14px} .hpBoard{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end} .hpLane{padding:14px;border-radius:20px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)} .hpLane.right{text-align:right} .hpHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12px;color:#ffd7ee} .hpLane.right .hpHead{flex-direction:row-reverse} .hpName{font-weight:900;color:#fff6fb;font-size:15px} .hpBar{height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .hpBar > i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#76ffb7,#ffd27d,#ff7cc4);transition:width .35s ease} .hpNum{margin-top:7px;font-size:12px;color:#fff0f8;font-weight:800} .centerHud{padding:14px 10px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);text-align:center;min-width:122px} .hudVs{font-size:18px;font-weight:900;letter-spacing:1px} .hudTimer{font-size:32px;font-weight:1000;line-height:1;margin:6px 0;color:#fff0fa} .hudSub{font-size:11px;color:#ffd8ef;line-height:1.35} .revealGrid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch} .revealCard{padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);min-height:98px} .revealCard.right{text-align:right} .actionTag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:800;margin-bottom:8px} .revealValue{font-size:30px;font-weight:1000} .revealPending{opacity:.52;filter:blur(.5px)} .animPanel{display:flex;align-items:center;justify-content:center;min-height:72px;padding:12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);font-size:14px;text-align:center} .animPanel.slash{box-shadow:0 0 28px rgba(255,112,136,.22) inset} .animPanel.guard{box-shadow:0 0 28px rgba(120,196,255,.18) inset} .battleControls{padding:16px;border-radius:20px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)} .choiceRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .choiceBtn,.diceBtn{border:none;border-radius:16px;padding:14px 12px;background:rgba(255,255,255,.08);color:#fff6fb;font-weight:900} .choiceBtn.active,.diceBtn.active{background:linear-gradient(180deg,rgba(255,176,222,.32),rgba(255,255,255,.1));box-shadow:0 0 0 1px rgba(255,191,229,.35) inset} .diceBtn{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px} .dicePip{font-size:28px} .battleHint{font-size:12px;color:var(--muted);line-height:1.4} .battleNotice{font-size:12px;color:#ffe0f0;margin-bottom:8px;font-weight:700} .hiddenAiNotice{text-align:center;font-size:12px;color:#ffd7ee;padding:8px 0} .championCard{text-align:center} .championFace{font-size:64px;line-height:1;margin-bottom:12px} .championTitle{font-size:28px;font-weight:1000;margin-bottom:8px} .championSub{font-size:13px;color:#ffd8ef;line-height:1.45} .championBtns{display:flex;gap:10px;margin-top:18px} .championBtns > button{flex:1} @keyframes spinBall{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @media (max-width:420px){ .seedBall{width:68px;height:68px} .seedOrderList{grid-template-columns:1fr} .vsSplit{grid-template-columns:1fr;gap:12px} .hpBoard,.revealGrid{grid-template-columns:1fr} .centerHud{min-width:0} } /* ===== v4.8.15 Colosseum UI polish ===== */ /* Home: Colosseum receives the same premium card treatment as Bingo. */ .colFeatured{margin:0;min-height:155px;border-color:#d2b46f;box-shadow:0 0 0 1px rgba(191,156,79,.20),0 15px 32px rgba(116,83,117,.16)} .colFeatured::before{background:radial-gradient(circle at 16% 18%,rgba(255,231,170,.58),transparent 24%),radial-gradient(circle at 82% 38%,rgba(181,203,255,.38),transparent 38%),linear-gradient(135deg,#fff1dc,#e7e3f8)} .colFeatured .gameTag{color:#6c5870} .colFeatured h2{font-size:34px;color:#755b86;text-shadow:0 2px 0 rgba(255,255,255,.92);letter-spacing:-.045em} .colFeatured p{color:#65556d} .colFeaturedMascot img{filter:drop-shadow(0 12px 18px rgba(85,63,98,.18));mix-blend-mode:multiply;opacity:.88} .colSwordMark{position:absolute;z-index:3;right:91px;top:13px;font-size:28px;color:#856b47;filter:drop-shadow(0 4px 7px rgba(98,72,36,.20));transform:rotate(-8deg)} .colFeatured .featuredArrow{color:#654f72;background:rgba(255,255,255,.72);border-color:#d7cbe4} /* Colosseum palette: no low-contrast pink text on Sakura backgrounds. */ #colosseumSetupPage,#colosseumOrderPage,#colosseumBracketPage,#colosseumBattlePage,#colosseumChampionPage{--col-ink:#463c55;--col-sub:#72677f;--col-accent:#6b5d96;--col-gold:#a17739;--col-line:#d8d0e1} #colosseumSetupPage .appbar h1,#colosseumOrderPage .appbar h1,#colosseumBracketPage .appbar h1,#colosseumBattlePage .appbar h1{color:#463c55} #colosseumSetupPage .subhead,#colosseumOrderPage .subhead,#colosseumBracketPage .subhead,#colosseumBattlePage .subhead{color:#756a81} #colosseumSetupPage .stepPill,#colosseumOrderPage .stepPill,#colosseumBracketPage .stepPill,#colosseumBattlePage .stepPill{background:#fffdf9;border-color:#d7ccbc;color:#695c51;font-weight:900;box-shadow:0 5px 16px rgba(91,75,63,.07)} #colosseumSetupPage .sectionTitle,#colosseumOrderPage .sectionTitle,#colosseumBracketPage .sectionTitle{color:#463c55} #colosseumSetupPage .muted{color:#766b80} .playerCountWrap{background:linear-gradient(180deg,#fffdfd,#f6f1fa);border-color:#d8cfe1} .playerCountNum{color:#5d4f86;text-shadow:none} .playerCountRange{accent-color:#7561a6} .jobCard{background:linear-gradient(180deg,#fffdfd,#f8f3f8);border-color:#ded5e3;color:#4e4358;box-shadow:0 7px 18px rgba(90,70,95,.07)} .jobCard.active{border-color:#8f7ab5;background:linear-gradient(180deg,#f4effd,#eee8fa);box-shadow:0 0 0 2px rgba(119,96,166,.08),0 9px 20px rgba(82,64,104,.10)} .jobMeta small{color:#786d82} .colHint{color:#776d80} /* Draw tokens: jewel/medal tokens instead of blank white eyeballs. */ .rouletteArena{background:linear-gradient(180deg,#fffdfb,#f6f1f8);border-color:#d9d0df;box-shadow:0 18px 38px rgba(83,62,91,.12)} #colOrderStatus{color:#5d5369!important;font-weight:850} .seedBall{width:78px;height:78px;background:radial-gradient(circle at 30% 24%,#fff9d9 0 10%,#dfc683 11% 31%,#8f7aaa 32% 63%,#493f5d 64% 100%);border:3px solid rgba(255,255,255,.92);box-shadow:0 10px 22px rgba(67,56,78,.18),inset 0 0 0 3px rgba(53,44,66,.22);color:#fff} .seedBall.spin{animation:tokenFloat .72s ease-in-out infinite alternate,tokenTwist 1.35s linear infinite} .seedTokenCore{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.88);color:#7762a3;font-size:22px;box-shadow:0 3px 10px rgba(0,0,0,.16)} .seedBall .seedName{color:#fff;font-weight:900;text-shadow:0 1px 5px rgba(0,0,0,.45)} .seedBall .seedRank{background:#40364f;color:#fff0bf} .seedOrderItem{background:#fff;border:1px solid #ddd4e3;color:#4d4258;box-shadow:0 5px 14px rgba(75,59,85,.07)} .seedOrderItem .badge{background:#5d4f7d;color:#fff} @keyframes tokenFloat{from{translate:0 -3px}to{translate:0 4px}} @keyframes tokenTwist{from{rotate:0deg}to{rotate:360deg}} /* Bracket: cleaner tournament board, clearer status labels, no pink-on-black text. */ .bracketCard{background:linear-gradient(160deg,#272333,#1d1a28);border-color:#554b66;box-shadow:0 22px 50px rgba(37,29,44,.24);color:#f8f4fb} #colosseumBracketPage .bracketCard .stepPill{background:#393244;border-color:#5f526b;color:#fff4d4;box-shadow:none} #colBracketRoundTitle{display:flex;flex-direction:column;gap:3px;margin:8px 0 16px!important;color:#fff} .roundKicker{font-size:10px;letter-spacing:.18em;color:#d5c28d;font-weight:1000} #colBracketRoundTitle strong{font-size:27px;line-height:1;color:#fff} #colBracketRoundTitle small{font-size:11px;color:#bdb4c7;font-weight:700} .bracketList{gap:14px} .matchRow{position:relative;padding:14px 14px 15px 17px;background:linear-gradient(180deg,#332d3d,#292432);border:1px solid #51465c;box-shadow:0 10px 24px rgba(0,0,0,.16);overflow:hidden} .matchRow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#c8aa62,#75639a)} .matchRow.currentMatch{border-color:#a88b54;box-shadow:0 0 0 1px rgba(224,188,112,.16),0 12px 28px rgba(0,0,0,.22)} .matchTop{margin-bottom:11px;color:#eee9f3} .matchNo{font-size:11px;letter-spacing:.12em;font-weight:1000;color:#e9e3ef} .matchStatus{padding:4px 8px;border-radius:999px;font-size:9px;font-weight:1000;letter-spacing:.08em;background:#494151;color:#e9e2ef} .matchStatus.next{background:#b18b49;color:#211a0e} .matchStatus.complete{background:#466c5a;color:#e9fff2} .matchStatus.wait{background:#484250;color:#d6d0dd} .matchStatus.byeStatus{background:#5a5275;color:#f6f1ff} .bracketPair{display:grid;grid-template-columns:1fr 44px 1fr;gap:8px;align-items:center} .bracketPair.single{grid-template-columns:1fr} .bracketFighter{position:relative;min-height:74px;border-radius:15px;padding:10px 8px;background:#211d29;border:1px solid #484052;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#f7f2fa} .bracketFighter.winner{border-color:#ad915b;background:linear-gradient(180deg,#342d35,#28232c)} .seedChip{position:absolute;top:7px;left:7px;font-size:9px;color:#cfc5d8;background:#3a3443;padding:2px 6px;border-radius:999px} .fighterAvatar{font-size:28px;line-height:1} .fighterName{font-size:12px;font-weight:900;text-align:center;color:#fff} .winnerMark{position:absolute;right:7px;top:7px;color:#ffe4a3;font-size:8px;font-weight:1000;letter-spacing:.08em} .bracketVs{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#726287,#3f364a);border:1px solid #8f7ca0;box-shadow:0 0 0 4px rgba(255,255,255,.03)} .bracketVs span{font-size:11px;font-weight:1000;color:#fff7db} .duelWinner{margin-top:10px;padding-top:9px;border-top:1px solid #484052;color:#e8d39c;font-size:11px;font-weight:900;text-align:center} #colNextMatchBtn{background:linear-gradient(135deg,#9b7d47,#665783);border-color:#d4bf8d} /* VS screen: larger fighters and aggressive diagonal impact crack. */ #colosseumVsPage{background:radial-gradient(circle at 50% 48%,rgba(195,159,86,.15),transparent 27%),linear-gradient(160deg,#17141d,#251b27 48%,#15131c)} .vsStage{min-height:calc(100svh - 34px)} .vsCard{min-height:520px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#211924 0 47%,#171720 53% 100%);border:1px solid #594a5e;box-shadow:0 24px 55px rgba(0,0,0,.38);animation:vsImpact .48s cubic-bezier(.2,.9,.25,1)} .vsCard::before{content:"";position:absolute;z-index:2;left:49%;top:-14%;width:24px;height:132%;background:linear-gradient(90deg,transparent,#fff5d4 36%,#b89055 50%,#fff 64%,transparent);transform:rotate(20deg);clip-path:polygon(42% 0,100% 7%,54% 20%,96% 34%,35% 48%,83% 61%,30% 76%,70% 87%,20% 100%,0 100%,28% 83%,0 71%,48% 57%,8% 43%,57% 28%,17% 14%);filter:drop-shadow(0 0 10px rgba(255,231,184,.55))} .vsCard::after{content:"";position:absolute;z-index:1;left:50%;top:47%;width:170%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,233,192,.75),transparent);transform:translate(-50%,-50%) rotate(-18deg);box-shadow:0 0 18px rgba(255,211,148,.45)} .vsSplit{position:relative;z-index:3;grid-template-columns:1fr 72px 1fr;gap:10px} .vsSplit:before{display:none} .vsFighter{min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 0 35px rgba(255,255,255,.025)} .vsFighter .face{font-size:88px;filter:drop-shadow(0 14px 15px rgba(0,0,0,.35));transform:scale(1.08)} .vsFighter .name{font-size:20px;color:#fff;font-weight:1000} .vsFighter .seed{color:#e4d5ae;font-weight:900} .bigVs{font-size:48px;color:#fff4ce;text-shadow:0 0 18px rgba(220,180,104,.5),0 3px 0 #4f3e2b} #colosseumVsPage .stepPill{position:absolute;z-index:4;top:18px;left:50%;transform:translateX(-50%);background:#27212d;border-color:#584c5e;color:#f6e8c5} @keyframes vsImpact{0%{opacity:0;transform:scale(.92)}55%{opacity:1;transform:scale(1.025)}100%{transform:scale(1)}} /* Battle: readable neutral/gold text and controls immediately below HP. */ #colosseumBattlePage .battleCard{background:linear-gradient(180deg,#282331,#201c28);border-color:#554a61;box-shadow:0 20px 45px rgba(52,41,59,.22);color:#f8f4fb} #colosseumBattlePage .hpLane{background:#332d3c;border-color:#574c63;color:#f8f4fb} #colosseumBattlePage .hpHead{color:#d6cfdd} #colosseumBattlePage .hpName{color:#fff} #colosseumBattlePage .hpNum{color:#eee7f2} #colosseumBattlePage .centerHud{background:#3a3241;border-color:#62556d;color:#fff} #colosseumBattlePage .hudTimer{color:#fff4cf} #colosseumBattlePage .hudSub{color:#d9d0e0;font-weight:850} #colosseumBattlePage .battleControls{order:2;margin-top:0;padding:13px;background:#302a38;border-color:#554a61} #colosseumBattlePage .revealGrid{order:3} #colosseumBattlePage .choiceBtn,#colosseumBattlePage .diceBtn{background:#453c4d;border:1px solid #64576f;color:#fff} #colosseumBattlePage .choiceBtn.active,#colosseumBattlePage .diceBtn.active{background:linear-gradient(180deg,#75618a,#564664);box-shadow:0 0 0 1px #a08bb1 inset} #colosseumBattlePage .battleNotice{color:#fff3cf} #colosseumBattlePage .battleHint{color:#cbc2d1} #colosseumBattlePage .hiddenAiNotice{color:#e5d9bd} #colosseumBattlePage .revealCard{background:#312b39;border-color:#554a61;color:#fff} #colosseumBattlePage .actionTag{background:#494151;color:#eee8f2} #colosseumBattlePage .animPanel{background:#302a38;border-color:#554a61;color:#f3edf5} #colosseumBattlePage .animPanel.slash{box-shadow:inset 0 0 30px rgba(197,99,85,.19)} #colosseumBattlePage .animPanel.guard{box-shadow:inset 0 0 30px rgba(91,138,177,.18)} /* Champion uses readable plum/bronze instead of pale pink. */ #colosseumChampionPage .championCard{background:linear-gradient(180deg,#fffdfb,#f2edf5);border-color:#d8cfdf;color:#4b4056} #colosseumChampionPage .championTitle{color:#6a557b} #colosseumChampionPage .winnerName{color:#8a672f} #colosseumChampionPage .championSub{color:#6f6478} @media (max-width:420px){ .colFeatured h2{font-size:31px} .colFeatured .featuredText{width:61%} .colSwordMark{right:82px;font-size:25px} .vsCard{min-height:480px;padding:22px 14px} .vsSplit{grid-template-columns:1fr 56px 1fr!important;gap:7px} .vsFighter{min-height:250px;padding:8px} .vsFighter .face{font-size:74px} .vsFighter .name{font-size:15px} .bigVs{font-size:37px} #colosseumBattlePage .hpBoard{grid-template-columns:1fr 94px 1fr!important;gap:7px} #colosseumBattlePage .hpLane{padding:10px} #colosseumBattlePage .centerHud{min-width:0;padding:10px 5px} #colosseumBattlePage .hudTimer{font-size:28px} #colosseumBattlePage .revealGrid{grid-template-columns:1fr 88px 1fr!important;gap:7px} #colosseumBattlePage .revealCard{padding:10px;min-height:88px} #colosseumBattlePage .revealValue{font-size:27px} .bracketFighter{min-height:68px;padding:9px 5px} .fighterAvatar{font-size:25px} } /* ===== v4.8.20 Sakura Colosseum VS + History + Patch Notes ===== */ #homePage .screen{display:flex;flex-direction:column} .homeVersion{margin-top:auto;padding-top:14px;align-self:flex-end;font-size:10px;font-weight:850;letter-spacing:.08em;color:#aa8d9a;opacity:.82} .splashVersion{position:absolute;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));font-size:10px;font-weight:850;letter-spacing:.08em;color:#aa8d9a;opacity:.82;pointer-events:none} /* Settings patch-note accordion */ #settingsModal .appModalCard{max-height:calc(100svh - 70px);overflow-y:auto;overscroll-behavior:contain} .settingsPatchBtn{width:100%;min-height:50px;border-radius:17px;border:1px solid #e7cada;background:linear-gradient(135deg,#fffafd,#f7effa);color:#765468;font-size:14px;font-weight:950;display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin-bottom:10px;box-shadow:0 7px 16px rgba(187,120,150,.08)} .settingsPatchBtn:active{transform:translateY(1px)} .patchChevron{font-size:18px;color:#a77a8f} .settingsPatchPanel{display:none;text-align:left;margin:2px 0 12px;padding:8px;border-radius:18px;background:#fff;border:1px solid #ecd4df;box-shadow:inset 0 1px rgba(255,255,255,.9)} .settingsPatchPanel.open{display:block;animation:patchDrop .18s ease-out both} .patchVersion{border-radius:14px;background:#fff8fb;border:1px solid #f0dce5;margin:6px 0;overflow:hidden} .patchVersion summary{list-style:none;cursor:pointer;min-height:42px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;color:#704f60;font-size:13px;font-weight:1000} .patchVersion summary::-webkit-details-marker{display:none} .patchVersion summary::after{content:'๏ผ‹';font-size:14px;color:#ae7d92;margin-left:auto} .patchVersion[open] summary::after{content:'โˆ’'} .patchVersion summary small{margin-left:8px;margin-right:auto;padding:2px 7px;border-radius:999px;background:#f5b6ce;color:#7a4259;font-size:8px;letter-spacing:.08em} .patchVersion ul{margin:0;padding:0 14px 11px 28px;color:#8b6c79;font-size:11px;line-height:1.55;font-weight:750} .patchVersion li+li{margin-top:3px} @keyframes patchDrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* Colosseum overall: return to Hu nyang's soft Sakura visual language. */ #colosseumSetupPage,#colosseumOrderPage,#colosseumBracketPage,#colosseumVsPage,#colosseumBattlePage,#colosseumChampionPage{ background: radial-gradient(circle at 15% 18%,rgba(255,203,224,.45),transparent 27%), radial-gradient(circle at 85% 62%,rgba(223,213,250,.46),transparent 30%), linear-gradient(180deg,#fff9fb 0%,#fff1f6 64%,#fbedf4 100%); color:#604857; } #colosseumSetupPage .stepPill,#colosseumOrderPage .stepPill,#colosseumBracketPage .stepPill{ background:linear-gradient(135deg,#fff8fb,#f7eefc);border:1px solid #ead4e1;color:#806171; border-radius:999px;box-shadow:0 6px 14px rgba(182,116,145,.08) } #colosseumOrderPage .seedBall{background:radial-gradient(circle at 29% 23%,#fffdf4 0 12%,#ffdce8 13% 34%,#dbcdf0 35% 66%,#a687b0 67% 100%);border-color:#fff;box-shadow:0 10px 22px rgba(164,105,140,.13),inset 0 0 0 3px rgba(255,255,255,.30)} #colosseumOrderPage .seedBall .seedRank{background:#80617e;color:#fff8e8} /* Bracket: cute tournament card instead of a dark board. */ .bracketCard{background:linear-gradient(180deg,#fffdfd,#fff4f8);border:1px solid #eccfdb;box-shadow:0 18px 38px rgba(179,108,137,.14);color:#604857;border-radius:28px} #colosseumBracketPage .bracketCard .stepPill{background:linear-gradient(135deg,#fff9fc,#f3edf9);border-color:#ead6e2;color:#75596a;box-shadow:0 5px 14px rgba(178,119,146,.07)} #colBracketRoundTitle{color:#684d5b!important} .roundKicker{color:#b07a90} #colBracketRoundTitle strong{color:#654855} #colBracketRoundTitle small{color:#9d7e8d} .matchRow{background:linear-gradient(180deg,#fff,#fff8fb);border:1px solid #ead2dd;box-shadow:0 8px 19px rgba(171,104,132,.09);border-radius:20px;color:#634b58} .matchRow::before{width:5px;background:linear-gradient(#f2a8c3,#cdb9eb)} .matchRow.currentMatch{border-color:#eda7c1;box-shadow:0 0 0 2px rgba(239,157,189,.10),0 11px 23px rgba(176,103,132,.12)} .matchTop{color:#775c69} .matchNo{color:#704f60} .matchStatus{background:#f2e9f0;color:#856c78} .matchStatus.next{background:#ffe1eb;color:#934f6b} .matchStatus.complete{background:#dff4e9;color:#4f7562} .matchStatus.wait{background:#eee8f3;color:#75687e} .matchStatus.byeStatus{background:#e9e0f7;color:#6e5b86} .bracketFighter{background:linear-gradient(180deg,#fffafd,#f9edf3);border:1px solid #ead3de;color:#614a56;border-radius:18px} .bracketFighter.winner{border-color:#edb0c6;background:linear-gradient(180deg,#fff7fb,#ffeaf2);box-shadow:0 0 0 2px rgba(241,172,197,.08)} .seedChip{background:#f0e4ed;color:#8a6879} .fighterName{color:#634a57} .winnerMark{color:#c66f94} .bracketVs{background:linear-gradient(145deg,#ffd7e6,#e6d9f5);border-color:#e8c9da;box-shadow:0 0 0 4px rgba(247,174,204,.09)} .bracketVs span{color:#795567} .duelWinner{border-top-color:#edd7e1;color:#a95f7d} #colNextMatchBtn{background:linear-gradient(135deg,#f7a7c5,#d9bee9);border-color:#f4c4d6;color:#fff;text-shadow:0 1px rgba(123,72,96,.15)} /* VS: Sakura arena, only the jagged slash remains. */ #colosseumVsPage{background: radial-gradient(circle at 50% 47%,rgba(255,229,170,.34),transparent 26%), radial-gradient(circle at 20% 32%,rgba(255,188,215,.46),transparent 33%), radial-gradient(circle at 82% 65%,rgba(216,204,248,.58),transparent 34%), linear-gradient(155deg,#fff9fb,#fbeef5 48%,#f3edfb)} .vsStage{min-height:calc(100svh - 34px)} .vsCard{min-height:500px;background:linear-gradient(135deg,#ffe9f2 0 48%,#eee7fb 52% 100%);border:2px solid rgba(236,190,210,.88);box-shadow:0 22px 50px rgba(178,108,138,.18),inset 0 1px rgba(255,255,255,.95);border-radius:34px} .vsCard::before{left:49%;top:-14%;width:28px;height:132%;background:linear-gradient(90deg,transparent,#fff 31%,#f4cf87 48%,#fff 67%,transparent);filter:drop-shadow(0 0 9px rgba(214,159,86,.38));opacity:.98} .vsCard::after{display:none!important} .vsFighter{min-height:300px;background:rgba(255,255,255,.58);border:1px solid rgba(223,188,207,.80);box-shadow:0 11px 25px rgba(175,111,140,.08),inset 0 1px rgba(255,255,255,.9);border-radius:24px} .vsFighter .face{font-size:92px;filter:drop-shadow(0 12px 13px rgba(120,79,99,.16));transform:scale(1.08)} .vsFighter .name{color:#604553} .vsFighter .seed{color:#9a7486} .bigVs{color:#bd678b;text-shadow:0 3px 0 rgba(255,255,255,.9),0 0 16px rgba(233,142,181,.24)} /* Battle: soft cards, strong readability, controls close to HP. */ #colosseumBattlePage .battleCard{background:linear-gradient(180deg,#fffdfd,#fff5f8);border:1px solid #ebcfda;box-shadow:0 18px 39px rgba(178,109,138,.14);color:#604857;border-radius:28px} #colosseumBattlePage .hpLane{background:linear-gradient(180deg,#fff,#fff7fa);border:1px solid #ead3dd;color:#604857;border-radius:20px} #colosseumBattlePage .hpHead{color:#846a77} #colosseumBattlePage .hpName{color:#5f4552} #colosseumBattlePage .hpNum{color:#755966} #colosseumBattlePage .centerHud{background:linear-gradient(180deg,#fff8ed,#fff3f7);border:1px solid #ead3d2;color:#72515e;border-radius:22px;box-shadow:0 7px 16px rgba(179,111,137,.08)} #colosseumBattlePage .hudTimer{color:#b46784;text-shadow:0 2px #fff} #colosseumBattlePage .hudSub{color:#8f7280} #colosseumBattlePage .battleControls{background:linear-gradient(180deg,#fff,#fff7fb);border:1px solid #ead1dc;border-radius:22px;box-shadow:0 8px 18px rgba(177,111,137,.07)} #colosseumBattlePage .battleNotice{color:#7b5969} #colosseumBattlePage .battleHint{color:#9c7e8c} #colosseumBattlePage .hiddenAiNotice{color:#8d6f7c} #colosseumBattlePage .choiceBtn,#colosseumBattlePage .diceBtn{color:#674b58;border-radius:18px;font-weight:1000;box-shadow:0 6px 14px rgba(171,110,136,.08)} #colosseumBattlePage #colAttackBtn{background:linear-gradient(135deg,#ffe4ec,#ffc5d6);border:1px solid #efb4c8} #colosseumBattlePage #colDefendBtn{background:linear-gradient(135deg,#e8f8f0,#ccebdc);border:1px solid #badfce} #colosseumBattlePage #colDiceBtn{background:linear-gradient(135deg,#f1eafb,#e0d4f3);border:1px solid #d3c3ea} #colosseumBattlePage .choiceBtn.active,#colosseumBattlePage .diceBtn.active{color:#5c4050;box-shadow:0 0 0 3px rgba(224,140,174,.16),0 7px 16px rgba(178,111,139,.09);transform:translateY(-1px)} #colosseumBattlePage .revealGrid{grid-template-columns:1fr 68px 1fr!important;gap:9px;align-items:stretch} #colosseumBattlePage .revealCard{background:linear-gradient(180deg,#fff9fc,#fbeef4);border:1px solid #ead1dc;color:#664c58;border-radius:20px;box-shadow:0 7px 15px rgba(175,108,136,.07)} #colosseumBattlePage .revealCard.right{background:linear-gradient(180deg,#faf8ff,#f1ecfb);border-color:#ddd1ee} #colosseumBattlePage .actionTag{background:#f2e6ed;color:#765866} .revealVsCore{display:grid;place-items:center;min-height:88px;border-radius:20px;background:linear-gradient(180deg,#fff8f1,#fff0f6);border:1px solid #ead2d9;box-shadow:0 7px 15px rgba(173,108,134,.07)} .revealVsCore span{font-size:22px;font-weight:1000;color:#b56785;text-shadow:0 2px #fff} #colosseumBattlePage .animPanel.battleLogBar{order:4;width:100%;min-height:48px;margin-top:-2px;padding:12px 14px;border-radius:18px;background:linear-gradient(90deg,#fff8fb,#f8f0fc);border:1px solid #e8d2df;color:#725765;box-shadow:0 7px 15px rgba(174,108,136,.07);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:850;display:flex;align-items:center;justify-content:center;text-align:center} #colosseumBattlePage .animPanel.battleLogBar.slash{background:linear-gradient(90deg,#fff2f3,#ffe9ee);box-shadow:0 7px 15px rgba(190,105,125,.08)} #colosseumBattlePage .animPanel.battleLogBar.guard{background:linear-gradient(90deg,#eef9f5,#eff6ff);box-shadow:0 7px 15px rgba(104,154,155,.08)} /* Champion stays celebratory and light. */ #colosseumChampionPage .championCard{background:linear-gradient(180deg,#fffdfd,#fff0f6);border:2px solid #efc8d8;box-shadow:0 20px 44px rgba(183,109,141,.15);border-radius:32px} #colosseumChampionPage .championTitle{color:#b45f82} #colosseumChampionPage .winnerName{color:#72516a} #colosseumChampionPage .championSub{color:#927483} @media (max-width:420px){ .vsCard{min-height:470px;padding:18px 12px} .vsFighter{min-height:245px} .vsFighter .face{font-size:76px} #colosseumBattlePage .revealGrid{grid-template-columns:1fr 58px 1fr!important;gap:7px} .revealVsCore{min-height:88px} .revealVsCore span{font-size:20px} #colosseumBattlePage .animPanel.battleLogBar{font-size:10px;padding-inline:10px} } /* ===== v4.8.18 Battle UX hotfix ===== */ /* The round message must belong to the same soft Sakura family, never the old dark arena panel. */ #colosseumBattlePage .animPanel{ background:linear-gradient(90deg,#fff8fb,#f7f1fc); border:1px solid #ead3df; color:#725765; box-shadow:0 7px 16px rgba(176,110,139,.07); } #colosseumBattlePage .animPanel.battleLogBar{ min-height:52px; background:linear-gradient(90deg,#fff9fc,#f8f1fc); border-color:#ead2df; color:#6f5361; } #colosseumBattlePage .animPanel.battleLogBar.slash{ background:linear-gradient(90deg,#fff1f4,#ffe8ee); color:#7a4b5c; } #colosseumBattlePage .animPanel.battleLogBar.guard{ background:linear-gradient(90deg,#eef9f5,#f1f7ff); color:#526b6c; } /* Clear selection state: pressed tone + translucent paw + check mark. */ #colosseumBattlePage .choiceBtn, #colosseumBattlePage .diceBtn{ position:relative; isolation:isolate; overflow:hidden; min-height:68px; transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,background .12s ease; opacity:1; } #colosseumBattlePage .choiceBtn > *, #colosseumBattlePage .diceBtn > *{ position:relative; z-index:3; } #colosseumBattlePage .choiceBtn::before, #colosseumBattlePage .diceBtn::before{ content:'๐Ÿพ'; position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-48%) scale(.78); font-size:62px; line-height:1; opacity:0; filter:grayscale(.18); pointer-events:none; transition:opacity .12s ease,transform .12s ease; } #colosseumBattlePage .choiceBtn::after, #colosseumBattlePage .diceBtn::after{ content:'โœ“'; position:absolute; z-index:4; right:10px; top:8px; width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:#fff; color:#9b5674; border:1px solid rgba(155,86,116,.22); box-shadow:0 3px 8px rgba(126,78,98,.12); font-size:14px; font-weight:1000; opacity:0; transform:scale(.7); pointer-events:none; transition:opacity .12s ease,transform .12s ease; } #colosseumBattlePage .choiceBtn.active::before, #colosseumBattlePage .diceBtn.active::before{ opacity:.18; transform:translate(-50%,-48%) scale(1); } #colosseumBattlePage .choiceBtn.active::after, #colosseumBattlePage .diceBtn.active::after{ opacity:1; transform:scale(1); } #colosseumBattlePage #colAttackBtn.active{ background:linear-gradient(135deg,#efb8c8,#e7a4ba); border-color:#d894ab; color:#543944; box-shadow:inset 0 3px 7px rgba(104,54,72,.12),0 0 0 3px rgba(224,140,174,.15); transform:translateY(2px); } #colosseumBattlePage #colDefendBtn.active{ background:linear-gradient(135deg,#bfe3d3,#a9d5c2); border-color:#91c5ae; color:#385a4c; box-shadow:inset 0 3px 7px rgba(50,101,80,.12),0 0 0 3px rgba(112,190,155,.13); transform:translateY(2px); } #colosseumBattlePage #colDiceBtn.active{ background:linear-gradient(135deg,#d8c8ee,#c7b3e5); border-color:#b6a0d7; color:#51405f; box-shadow:inset 0 3px 7px rgba(82,59,107,.12),0 0 0 3px rgba(164,134,205,.13); transform:translateY(2px); } #colosseumBattlePage .choiceBtn:disabled, #colosseumBattlePage .diceBtn:disabled{ cursor:default; filter:saturate(.78); opacity:.58; } #colosseumBattlePage .choiceBtn.active:disabled, #colosseumBattlePage .diceBtn.active:disabled{ opacity:1; filter:none; } #colosseumBattlePage .choiceText{ color:inherit; text-shadow:0 1px rgba(255,255,255,.65); } #colosseumBattlePage .diceBtn.rolling .dicePip{ animation:colDiceWiggle .34s ease-in-out infinite alternate; } @keyframes colDiceWiggle{ from{transform:rotate(-14deg) scale(.94)} to{transform:rotate(14deg) scale(1.08)} } /* ===== v4.8.19 Colosseum UI / flow fixes ===== */ /* Action controls keep a fixed footprint whether selected or not. */ #colosseumBattlePage .choiceRow{ width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); } #colosseumBattlePage .choiceBtn, #colosseumBattlePage .diceBtn{ width:100%; min-width:0; max-width:100%; box-sizing:border-box; } #colosseumBattlePage #colDiceBtn{ width:100%; margin:0 0 16px 0; } #colosseumBattlePage .battleHint{ margin-top:2px; } /* Pressed state may move vertically only. Never scale or change horizontal size. */ #colosseumBattlePage #colAttackBtn.active, #colosseumBattlePage #colDefendBtn.active, #colosseumBattlePage #colDiceBtn.active{ width:100%; transform:translateY(2px); } /* ===== v4.8.20 VS composition + battle history ===== */ /* VS: remove the rounded fighter tiles and use the broad diagonal arena. */ #colosseumVsPage .vsCard{ min-height:520px; overflow:hidden; } #colosseumVsPage .vsSplit{ position:relative; min-height:470px; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); align-items:center; gap:2px; z-index:2; } #colosseumVsPage .vsFighter{ min-height:0; padding:10px 2px; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; position:relative; z-index:2; } #colosseumVsPage .vsFighterLeft{transform:translateY(-58px)} #colosseumVsPage .vsFighterRight{transform:translateY(58px)} #colosseumVsPage .vsFighter .face{ font-size:104px; margin-bottom:8px; filter:drop-shadow(0 13px 14px rgba(120,79,99,.18)); } #colosseumVsPage .vsFighter .name{ padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.54); box-shadow:0 4px 12px rgba(164,105,134,.08); font-size:18px; line-height:1.2; } #colosseumVsPage .vsFighter .seed{margin-top:6px;font-size:12px} #colosseumVsPage .bigVs{ position:relative; width:64px; height:230px; display:block; font-size:0; z-index:4; pointer-events:none; } #colosseumVsPage .bigVs span{ position:absolute; left:50%; transform:translateX(-50%) rotate(-7deg); font-size:48px; line-height:1; font-weight:1000; color:#bd678b; text-shadow:0 3px 0 rgba(255,255,255,.95),0 0 16px rgba(233,142,181,.25); } #colosseumVsPage .vsLetterV{top:36px;margin-left:-9px} #colosseumVsPage .vsLetterS{bottom:34px;margin-left:9px} /* Battle history: newest result stays on top, older rounds scroll below. */ #colosseumBattlePage .battleHistoryPanel{ order:5; width:100%; margin-top:2px; padding:12px; border-radius:20px; background:linear-gradient(180deg,#fffdfd,#fff5f9); border:1px solid #ead1dc; box-shadow:0 8px 18px rgba(177,111,137,.07); color:#674e5a; } #colosseumBattlePage .battleHistoryHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; font-size:12px; font-weight:1000; color:#704f60; } #colosseumBattlePage .battleHistoryHead small{ color:#a17e8d; font-size:9px; font-weight:800; } #colosseumBattlePage .battleHistoryList{ max-height:148px; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:7px; padding-right:2px; scrollbar-width:thin; } #colosseumBattlePage .battleHistoryEmpty{ padding:13px 10px; text-align:center; color:#a18692; font-size:10px; border-radius:14px; background:#fbf2f6; } #colosseumBattlePage .battleHistoryItem{ padding:10px 11px; border-radius:14px; background:#fbf2f6; border:1px solid #efdee6; color:#6b5360; font-size:10px; line-height:1.45; font-weight:780; word-break:keep-all; } #colosseumBattlePage .battleHistoryItem.latest{ background:linear-gradient(135deg,#ffeaf2,#f1eafb); border-color:#edc4d5; box-shadow:0 0 0 2px rgba(233,155,187,.08); color:#604553; } #colosseumBattlePage .battleHistoryRound{ display:inline-flex; align-items:center; justify-content:center; min-width:31px; margin-right:6px; padding:2px 6px; border-radius:999px; background:#fff; color:#a75e7d; font-size:9px; font-weight:1000; vertical-align:1px; } @media (max-width:420px){ #colosseumVsPage .vsCard{min-height:500px;padding:14px 8px} #colosseumVsPage .vsSplit{min-height:450px;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)} #colosseumVsPage .vsFighterLeft{transform:translateY(-52px)} #colosseumVsPage .vsFighterRight{transform:translateY(52px)} #colosseumVsPage .vsFighter .face{font-size:88px} #colosseumVsPage .vsFighter .name{font-size:15px;padding:4px 8px} #colosseumVsPage .bigVs{width:54px;height:210px} #colosseumVsPage .bigVs span{font-size:42px} #colosseumVsPage .vsLetterV{top:31px;margin-left:-7px} #colosseumVsPage .vsLetterS{bottom:30px;margin-left:7px} #colosseumBattlePage .battleHistoryList{max-height:132px} } /* ===== v4.8.30 RPG progression / fate / stat dice ===== */ .rpgFeatured{margin:0;min-height:155px;border-color:#cdb991;box-shadow:0 0 0 1px rgba(143,118,79,.18),0 15px 32px rgba(92,76,116,.14)} .rpgFeatured::before{background:radial-gradient(circle at 15% 18%,rgba(255,239,183,.72),transparent 25%),radial-gradient(circle at 83% 42%,rgba(187,221,199,.52),transparent 38%),linear-gradient(135deg,#fff4d9,#e8efe0 54%,#e6ddf5)} .rpgFeatured .gameTag{color:#6c5b6e} .rpgFeatured h2{font-size:39px;color:#66547f;text-shadow:0 2px 0 rgba(255,255,255,.95);letter-spacing:-.045em} .rpgFeatured p{color:#62586b;font-weight:780} .rpgFeaturedMascot{right:-2px;bottom:-4px;width:45%;height:150px;align-items:center;justify-content:center;overflow:visible} .rpgFeaturedHero{position:relative;z-index:2;font-size:82px;line-height:1;filter:drop-shadow(0 12px 13px rgba(81,65,89,.20));transform:translateY(5px)} .rpgFeaturedSpark{position:absolute;z-index:3;font-size:23px;filter:drop-shadow(0 4px 6px rgba(85,70,96,.14))} .rpgSparkOne{right:16px;top:19px;transform:rotate(12deg)} .rpgSparkTwo{left:8px;bottom:22px;font-size:27px;transform:rotate(-18deg)} .rpgFeatured .featuredArrow{color:#615474;background:rgba(255,255,255,.72);border-color:#d8cde2} @media(max-width:365px){.rpgFeaturedHero{font-size:72px}.rpgFeatured p{font-size:11px}.rpgFeatured h2{font-size:35px}} #rpgNamePage,#rpgGenderPage,#rpgStatsPage,#rpgAiPage,#rpgVillagePage,#rpgStatusPage,#rpgCharStatsPage,#rpgCharSkillsPage,#rpgInventoryPage,#rpgInnPage,#rpgPrayerPage,#rpgShopSelectPage,#rpgShopPage,#rpgGeneralShopPage,#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgFormationPage,#rpgFieldPage,#rpgBattlePage{ background:radial-gradient(circle at 18% 12%,rgba(255,222,202,.55),transparent 29%),radial-gradient(circle at 83% 58%,rgba(221,210,250,.50),transparent 32%),linear-gradient(180deg,#fffaf8 0%,#fff3f7 62%,#f8edf5 100%);color:#5d4855 } .rpgHeadTitle{color:#604a58!important}.rpgSub{color:#977784!important} .rpgPanel{margin:10px 0 14px;padding:17px;border-radius:24px;background:linear-gradient(180deg,#fff,#fff8fb);border:1px solid #ecd6df;box-shadow:0 14px 32px rgba(165,106,132,.11)} .rpgKicker{font-size:9px;font-weight:1000;letter-spacing:.12em;color:#b07a91;margin-bottom:5px}.rpgBig{font-size:25px;font-weight:1000;color:#654d5c;line-height:1.15}.rpgDesc{margin-top:8px;color:#8d7380;font-size:12px;font-weight:720;line-height:1.58} .rpgTextInput{width:100%;height:54px;border-radius:17px;border:1px solid #e6cdd8;background:#fff;color:#604a58;padding:0 15px;font-size:17px;font-weight:900;outline:none;box-shadow:inset 0 2px 5px rgba(125,78,100,.04)} .rpgTextInput:focus{border-color:#d699b3;box-shadow:0 0 0 3px rgba(226,152,184,.12)} .rpgError{min-height:20px;margin:6px 3px 2px;color:#bd617c;font-size:10px;font-weight:850} .rpgChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.rpgGenderBtn,.rpgStatBtn{min-height:80px;border-radius:20px;border:1px solid #e9d3dd;background:#fff9fc;color:#684f5d;font-weight:1000;box-shadow:0 8px 19px rgba(171,104,132,.08)} .rpgGenderBtn{font-size:15px}.rpgGenderBtn span{display:block;font-size:27px;margin-bottom:4px}.rpgGenderBtn.active{background:linear-gradient(180deg,#ffe9f1,#f3eafd);border-color:#dca4ba;box-shadow:0 0 0 2px rgba(218,152,181,.10),0 9px 20px rgba(155,99,127,.10)} .rpgDiceStage{text-align:center;padding:18px 10px}.rpgDice{width:96px;height:96px;margin:4px auto 12px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#f5e7ef);border:1px solid #e6ced9;box-shadow:0 16px 28px rgba(143,91,116,.14);font-size:48px;font-weight:1000;color:#74566a}.rpgDice.rolling{animation:rpgDiceShake .13s linear infinite}@keyframes rpgDiceShake{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-3px)}} .rpgStatCell{position:relative} .rpgStatHead{display:flex;align-items:center;justify-content:center;gap:4px;min-height:18px} .rpgStatHelp{width:16px;height:16px;padding:0;border-radius:50%;border:1px solid #dfc5d1;background:#fff6fa;color:#9a7184;font-size:9px;font-weight:1000;line-height:14px} .rpgStatTip{position:absolute;z-index:15;left:50%;top:26px;width:176px;transform:translateX(-50%);padding:9px 10px;border-radius:12px;background:#5f4c58;color:#fff;font-size:9px;font-weight:800;line-height:1.45;box-shadow:0 8px 22px rgba(74,47,61,.25);display:none} .rpgStatCell.tipOpen .rpgStatTip{display:block} .rpgStatCell:first-child .rpgStatTip{left:0;transform:none} .rpgStatCell:last-child .rpgStatTip{left:auto;right:0;transform:none} .rpgStatTip::before{content:'';position:absolute;top:-5px;left:50%;width:10px;height:10px;background:#5f4c58;transform:translateX(-50%) rotate(45deg)} .rpgStatCell:first-child .rpgStatTip::before{left:20px;transform:rotate(45deg)} .rpgStatCell:last-child .rpgStatTip::before{left:auto;right:20px;transform:rotate(45deg)} .rpgStatValueBtn{display:block;width:100%;margin-top:4px;padding:2px 0;border-radius:10px;background:transparent;color:#5b4754;font-size:18px;font-weight:1000} .rpgStatValueBtn.assignable{background:linear-gradient(135deg,#ffe5ef,#efe2ff);box-shadow:0 0 0 2px rgba(214,145,176,.14);animation:rpgStatValuePulse .75s ease-in-out infinite alternate} @keyframes rpgStatValuePulse{to{transform:scale(1.08)}} .rpgStatDiceStage{padding:10px 4px 12px} .rpgDiceRow{display:flex;align-items:center;justify-content:center;gap:10px;min-height:128px} .rpgDiceRoller{position:relative;width:118px;height:118px;padding:0;border:0;background:transparent;border-radius:28px;display:grid;place-items:center;filter:drop-shadow(0 13px 18px rgba(143,91,116,.17));transition:transform .12s ease} .rpgDiceRoller:active:not(:disabled){transform:scale(.95)} .rpgDiceRoller:disabled{cursor:default} .rpgDiceImg{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none} .rpgDiceRoller.spinning{animation:none} .rpgDiceRoller.spinning .rpgDiceImg{animation:rpgImageDiceSpin .28s linear infinite;filter:blur(.3px)} @keyframes rpgImageDiceSpin{0%{transform:rotate(0deg) scale(.94)}50%{transform:rotate(180deg) scale(1.04)}100%{transform:rotate(360deg) scale(.94)}} .rpgDiceNumber{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;font-weight:1000;color:#674c59;text-shadow:0 2px 0 rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.9);pointer-events:none} .rpgDiceClickHint{min-width:54px;color:#c36e91;font-size:12px;font-weight:1000;text-align:left;animation:rpgDiceHintBlink .75s ease-in-out infinite alternate} .rpgDiceClickHint.waiting{animation:none;color:#9b7e8b;font-size:10px} @keyframes rpgDiceHintBlink{from{opacity:.3;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}} .rpgJobResult{min-height:66px;text-align:center}.rpgJobName{font-size:23px;font-weight:1000;color:#624b59}.rpgJobName.hiddenJob{color:#8c62a7;text-shadow:0 2px 10px rgba(137,91,172,.14)}.rpgJobDesc{margin-top:5px;color:#937986;font-size:11px;font-weight:760} .rpgMap{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.rpgMap div{padding:8px 4px;border-radius:12px;background:#f8eef4;border:1px solid #ead9e1;text-align:center;color:#876d79;font-size:9px;font-weight:900}.rpgMap div:last-child{grid-column:2/3} .rpgStatBoard{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:10px 0}.rpgStatCell{padding:9px 2px;border-radius:14px;background:#fff;border:1px solid #ead5df;text-align:center}.rpgStatCell b{display:block;color:#715667;font-size:9px}.rpgStatCell strong{display:block;margin-top:4px;color:#5b4754;font-size:18px}.rpgStatAssign{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:10px 0}.rpgStatBtn{min-height:52px;padding:5px 1px;font-size:10px}.rpgStatBtn:disabled{opacity:.42}.rpgStatBtn:not(:disabled):active{transform:translateY(2px);background:#f7eaf1} .rpgRollHistory{min-height:34px;padding:8px 10px;border-radius:14px;background:#fbf4f8;color:#967786;font-size:9px;font-weight:800;line-height:1.5}.rpgCurrentRoll{text-align:center;font-size:12px;font-weight:900;color:#846676;margin:8px 0}.rpgCurrentRoll strong{font-size:24px;color:#624b59} .rpgPartyCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.rpgPartyCard{min-width:0;padding:12px 8px 11px;border-radius:17px;background:linear-gradient(180deg,#fffafd,#fff2f7);border:1px solid #e9d5df;text-align:center;box-shadow:0 5px 13px rgba(108,73,91,.07)}.rpgPartyCard .who{font-size:9px;color:#a27d8f;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rpgPartyCard .name{font-size:clamp(14px,3.8vw,17px);line-height:1.18;color:#634b59;font-weight:1100;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.04em}.rpgPartyCard .name.long{font-size:clamp(12px,3.25vw,15px)}.rpgPartyCard .name.xlong{font-size:clamp(10.5px,2.8vw,13px)}.rpgPartyCard .job{font-size:10px;line-height:1.3;color:#8d7080;font-weight:900;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rpgAiRolling{text-align:center;padding:13px;border-radius:16px;background:#f9eff6;color:#8b6d7d;font-size:11px;font-weight:900}.rpgAiRolling.active::after{content:' ยท';animation:rpgDots 1s steps(3,end) infinite}@keyframes rpgDots{0%{content:' ยท'}33%{content:' ยทยท'}66%,100%{content:' ยทยทยท'}} .rpgStoryBox{padding:18px;border-radius:24px;background:linear-gradient(180deg,#fffdfb,#fff7f9);border:1px solid #ecd7de;box-shadow:0 14px 30px rgba(151,99,120,.10);font-family:Georgia,"Noto Serif KR",serif}.rpgStoryBox h2{margin:0 0 10px;color:#644c59;font-size:21px}.rpgStoryBox p{margin:8px 0;color:#765e6a;font-size:13px;line-height:1.75;font-weight:650}.rpgNpcLine{margin:10px 0;padding:13px 15px;border-left:4px solid #e4adc2;border-radius:0 16px 16px 0;background:#fff7fb;color:#725765;font-size:12px;line-height:1.6;font-weight:760} .rpgActionStack{display:grid;gap:8px;margin-top:14px}.rpgActionBtn{width:100%;min-height:54px;border-radius:17px;border:1px solid #e8cfda;background:linear-gradient(180deg,#fff,#fff7fb);color:#674e5b;font-size:12px;font-weight:950;padding:10px 13px;text-align:left;box-shadow:0 7px 17px rgba(160,103,128,.07)}.rpgActionBtn:active{transform:translateY(2px);background:#f9edf3}.rpgActionBtn.primaryChoice{text-align:center;background:linear-gradient(135deg,#f7bfd3,#d9c7f0);border-color:#ddadc2;color:#684b5b} .rpgDialogueChoices{display:grid;gap:9px;margin:12px 0}.rpgDialogueChoice{width:100%;min-height:62px;border-radius:18px;border:1px solid #ead3dd;background:#fff;color:#644d5a;padding:12px 14px;text-align:left;font-size:12px;line-height:1.45;font-weight:850;box-shadow:0 8px 18px rgba(160,103,128,.07)}.rpgDialogueChoice:active{transform:translateY(2px);background:#f9edf4}.rpgDialogueChoice[disabled]{opacity:.55} .rpgQuestGradeRow{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0}.rpgGrade{min-width:31px;padding:6px 7px;border-radius:10px;text-align:center;background:#f7edf3;border:1px solid #e7d3dc;color:#846b77;font-size:9px;font-weight:1000}.rpgGrade.high{background:#f0e7fa;color:#6f5a86}.rpgQuestCard{padding:15px;border-radius:21px;background:linear-gradient(145deg,#fffaf2,#fff7fb);border:1px solid #e8d1c7;box-shadow:0 10px 22px rgba(150,102,95,.09)}.rpgQuestCard .grade{display:inline-flex;padding:5px 8px;border-radius:999px;background:#e9d7bd;color:#705b3e;font-size:9px;font-weight:1000}.rpgQuestCard h3{margin:8px 0 5px;color:#654f58;font-size:17px}.rpgQuestCard p{margin:4px 0;color:#8d747e;font-size:11px;line-height:1.55;font-weight:740}.rpgQuestRules{margin:10px 0;padding:12px;border-radius:16px;background:#fbf3f7;color:#876d79;font-size:10px;line-height:1.6;font-weight:780} .rpgAcceptedIcon{text-align:center;font-size:62px;margin:12px 0 4px}.rpgAcceptedTitle{text-align:center;color:#624a58;font-size:24px;font-weight:1000}.rpgAcceptedSub{text-align:center;color:#917683;font-size:11px;font-weight:780;line-height:1.6;margin:7px 0 14px} /* ===== v4.8.22 RPG formation / field / battle ===== */ .rpgFormationLegend{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:11px 0 5px;text-align:center;font-size:9px;font-weight:1000;color:#947783} .rpgFormationLegend span:first-child{color:#7b75a0}.rpgFormationLegend span:last-child{color:#a96275} .rpgMemberPicker{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0} .rpgMemberChip{flex:1;min-width:128px;padding:10px 12px;border-radius:16px;border:1px solid #e7d1dc;background:#fff9fc;color:#654e5b;text-align:left;font-weight:950} .rpgMemberChip.active{background:linear-gradient(135deg,#ffe0ec,#eee2fb);border-color:#d89ab5;box-shadow:0 0 0 2px rgba(214,145,176,.12)} .rpgMemberChip small{display:block;color:#997b89;font-size:8px;margin-top:3px} .rpgFormationGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px;border-radius:22px;background:linear-gradient(90deg,#f1effc,#fff8fb 50%,#fff0ef);border:1px solid #ead4df} .rpgFormationCell{position:relative;min-height:76px;border-radius:17px;border:1px dashed #d9c5d0;background:rgba(255,255,255,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9a7f8b;font-size:8px;font-weight:900;overflow:hidden} .rpgFormationCell.front{background:rgba(255,238,238,.75)}.rpgFormationCell.rear{background:rgba(242,240,255,.78)} .rpgFormationCell.occupied{border-style:solid;border-color:#dbadbf;background:#fff} .rpgFormationAvatar{font-size:25px;line-height:1}.rpgFormationName{margin-top:4px;font-size:9px;color:#664d59;font-weight:1000} .rpgDerivedBox{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0} .rpgDerivedStat{padding:8px 5px;border-radius:13px;background:#fff;border:1px solid #ead6df;text-align:center} .rpgDerivedStat b{display:block;font-size:8px;color:#967987}.rpgDerivedStat strong{display:block;margin-top:3px;font-size:13px;color:#604a56} .rpgRouteWrap{margin:9px 0 8px;padding:10px 8px;border-radius:20px;background:rgba(255,255,255,.82);border:1px solid #e9d7df;overflow-x:auto} .rpgRouteTrack{display:flex;align-items:flex-start;min-width:max-content;padding:0 4px} .rpgRouteStep{position:relative;width:58px;text-align:center;flex:0 0 58px;color:#9b808d;font-size:7px;font-weight:900} .rpgRouteStep:not(:last-child)::after{content:'';position:absolute;top:17px;left:40px;width:36px;height:3px;border-radius:9px;background:#eadce3} .rpgRouteDot{position:relative;z-index:2;width:35px;height:35px;margin:0 auto 5px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #ddc9d3;font-size:15px;color:#8d7481} .rpgRouteStep.done .rpgRouteDot{background:#e8c7d7;border-color:#d79ab4;color:#fff}.rpgRouteStep.current .rpgRouteDot{background:#fff0f6;border-color:#c97e9f;box-shadow:0 0 0 4px rgba(220,145,176,.13)} .rpgRouteLabel{max-width:56px;line-height:1.2}.rpgRouteStep.done:not(.current) .rpgRouteLabel{color:#b08195} .rpgScene{position:relative;min-height:250px;border-radius:25px;overflow:hidden;border:1px solid #d9d9c9;background:linear-gradient(180deg,#cae7ff 0 45%,#dff3ca 46% 68%,#abd582 69%);box-shadow:0 13px 28px rgba(92,113,83,.10)} .rpgScene.noon{background:linear-gradient(180deg,#bfe8ff 0 44%,#eef7c9 45% 67%,#a7d578 68%)} .rpgScene.night{background:linear-gradient(180deg,#343956 0 46%,#566b65 47% 67%,#3d6048 68%);color:#fff} .rpgScene.dawn{background:linear-gradient(180deg,#7f769d 0 28%,#e8aeb2 29% 48%,#d9d6a5 49% 67%,#65875e 68%);color:#fff} .rpgSceneDecor{position:absolute;inset:0;pointer-events:none}.rpgSceneDecor .cloud{position:absolute;top:16px;left:10%;font-size:34px;opacity:.75}.rpgSceneDecor .mount{position:absolute;top:72px;right:5%;font-size:72px;opacity:.38}.rpgSceneDecor .grass{position:absolute;bottom:10px;left:0;right:0;font-size:30px;letter-spacing:14px;white-space:nowrap;opacity:.65} .rpgSceneTitle{position:absolute;left:12px;top:10px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.78);color:#69545e;font-size:9px;font-weight:1000} .rpgCombatFormation{position:absolute;top:50px;bottom:22px;width:42%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;padding:6px;opacity:0;pointer-events:none;transition:opacity .2s ease} .rpgCombatFormation.show{opacity:1;pointer-events:auto}.rpgCombatFormation.party{left:5px}.rpgCombatFormation.enemy{right:5px} .rpgCombatUnit{position:relative;border-radius:12px;background:rgba(255,255,255,.82);border:1px solid rgba(112,86,101,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:3px} .rpgCombatUnit.empty{background:rgba(255,255,255,.18);border-style:dashed}.rpgCombatUnit.targetable{outline:3px solid rgba(219,90,117,.42);cursor:pointer;animation:rpgTargetPulse .8s ease-in-out infinite alternate} @keyframes rpgTargetPulse{to{transform:scale(1.04)}} .rpgUnitIcon{font-size:21px;line-height:1}.rpgUnitName{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:7px;font-weight:1000;color:#5e4b55} .rpgMiniHp{width:90%;height:5px;border-radius:99px;background:#e7d9de;overflow:hidden;margin-top:3px}.rpgMiniHp i{display:block;height:100%;background:#df7897;border-radius:99px} .rpgUnitStatus{min-height:9px;font-size:6px;color:#856d78;margin-top:2px} .rpgDamageFloat{position:absolute;z-index:9;top:-10px;left:50%;transform:translateX(-50%);font-size:16px;font-weight:1000;color:#bb3459;text-shadow:0 2px 0 #fff;pointer-events:none;animation:rpgDamageUp .75s ease-out forwards} .rpgDamageFloat.heal{color:#4c9e6a} @keyframes rpgDamageUp{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px) scale(1.08)}} .rpgFieldControls{display:grid;grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);gap:7px;margin:8px 0;align-items:stretch} .rpgBattleBox,.rpgPartyStatusBox{min-height:170px;border-radius:18px;border:1px solid #ead4de;background:#fff9fc;padding:8px} .rpgBattleActions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.rpgBattleAction{min-height:42px;border-radius:11px;border:1px solid #e6d1da;background:#fff;color:#6b5360;font-size:9px;font-weight:1000;padding:4px} .rpgBattleAction:active:not(:disabled){transform:translateY(2px);background:#f7eaf1}.rpgBattleAction:disabled{opacity:.38} .rpgBattleHint{margin-top:7px;font-size:8px;line-height:1.4;color:#9a7e8b;font-weight:800} .rpgCenterActions{display:flex;flex-direction:column;gap:6px;justify-content:center} .rpgCenterBtn{width:100%;min-height:74px;border-radius:19px;border:1px solid #d9b9c7;background:linear-gradient(180deg,#ffe4ef,#f1def7);color:#694f5d;font-size:12px;font-weight:1000;box-shadow:0 8px 16px rgba(153,99,124,.10)} .rpgCenterBtn:active:not(:disabled){transform:translateY(3px) scale(.98);box-shadow:0 3px 7px rgba(153,99,124,.10)}.rpgCenterBtn:disabled{opacity:.48} .rpgCenterBtn.danger{background:linear-gradient(180deg,#ffdcd8,#f6c6cb);border-color:#dea6ab}.rpgCenterBtn.safe{background:linear-gradient(180deg,#e7f5e5,#cfe8d1);border-color:#b9d2bc} .rpgPartyStatus{padding:6px 4px;border-bottom:1px solid #f0e1e7}.rpgPartyStatus:last-child{border-bottom:0}.rpgStatusTop{display:flex;justify-content:space-between;gap:4px;font-size:8px;font-weight:1000;color:#684f5c} .rpgBar{height:7px;margin-top:4px;border-radius:99px;background:#eadfe4;overflow:hidden}.rpgBar i{display:block;height:100%;border-radius:99px}.rpgBar.hp i{background:#df7897}.rpgBar.mp i{background:#8f91d8} .rpgStatusEffect{min-height:11px;margin-top:4px;font-size:7px;color:#957b88;font-weight:800} .rpgHistory{padding:9px;border-radius:17px;background:#faf2f6;border:1px solid #ead7df;overflow:hidden}.rpgHistory #rpgFieldHistory{max-height:116px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d79bb4 #f6e7ee;padding-right:3px}.rpgHistory #rpgFieldHistory::-webkit-scrollbar{width:7px}.rpgHistory #rpgFieldHistory::-webkit-scrollbar-track{background:#f6e7ee;border-radius:99px}.rpgHistory #rpgFieldHistory::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ebb0c8,#cd86a4);border:2px solid #f6e7ee;border-radius:99px} .rpgHistoryTitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:9px;font-weight:1000;color:#79606c} .rpgHistoryRow{padding:6px 7px;border-radius:10px;background:#fff;margin-bottom:5px;color:#806875;font-size:8px;font-weight:800;line-height:1.45}.rpgHistoryRow:first-of-type{background:#fff1f6;color:#6c4e5c;border:1px solid #edd0dc} .rpgFieldSummary{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0}.rpgFieldSummary span{padding:5px 8px;border-radius:999px;background:#f8edf3;color:#846a77;font-size:8px;font-weight:1000} .rpgQuestDone{padding:13px;border-radius:17px;background:linear-gradient(135deg,#fff0c9,#f4e2ff);border:1px solid #ead3b2;color:#715d55;font-size:10px;font-weight:900;line-height:1.55;margin:8px 0} @media(max-width:365px){.rpgFieldControls{grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);gap:5px}.rpgBattleBox,.rpgPartyStatusBox{padding:6px}.rpgBattleAction{font-size:8px}.rpgCenterBtn{font-size:10px}.rpgRouteStep{width:52px;flex-basis:52px}.rpgRouteStep:not(:last-child)::after{width:30px}} @media(max-width:365px){.rpgStatCell strong{font-size:15px}.rpgStatCell b,.rpgStatBtn{font-size:8px}.rpgPanel{padding:14px}.rpgBig{font-size:22px}} /* ===== v4.8.23 village / mobile continuity ===== */ html,body{overscroll-behavior-y:none!important;overscroll-behavior-x:none} body{touch-action:pan-y pinch-zoom} #rpgVillagePage .screen,#rpgStatusPage .screen,#rpgNpcPage .screen{padding-bottom:28px} .rpgVillageHero{padding:18px;border-radius:25px;background:linear-gradient(145deg,#fff9f1,#f6f2df 48%,#f1e5ef);border:1px solid #ead8d4;box-shadow:0 12px 26px rgba(126,94,94,.09);margin-bottom:12px} .rpgVillageScene{min-height:210px;border-radius:21px;background:#dcecff center/cover no-repeat;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:16px;margin-top:10px;box-shadow:inset 0 0 0 1px rgba(102,78,90,.10)} .rpgVillageScene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(40,24,34,.08));pointer-events:none}.rpgVillageScene .villageSky,.rpgVillageScene .villageTown{display:none} .rpgVillageTop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:7px 0 12px}.rpgVillageGold{padding:7px 11px;border-radius:999px;background:#fff2c7;border:1px solid #ead39a;color:#756039;font-size:10px;font-weight:1000}.rpgVillageClock{padding:7px 11px;border-radius:999px;background:#f4ebf4;border:1px solid #e3d2e0;color:#735e6b;font-size:10px;font-weight:1000} .rpgVillageGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.rpgVillageAction{min-height:78px;border-radius:18px;border:1px solid #e5d1da;background:linear-gradient(180deg,#fff,#fff7fa);color:#684f5d;font-size:12px;font-weight:1000;padding:10px;box-shadow:0 7px 15px rgba(148,101,120,.07)}.rpgVillageAction:active{transform:translateY(2px);background:#f9edf3}.rpgVillageAction strong{display:block;font-size:22px;margin-bottom:4px}.rpgVillageAction.wide{grid-column:1/-1} .rpgStatusParty{display:grid;gap:10px}.rpgStatusSheet{padding:13px;border-radius:20px;background:#fff;border:1px solid #ead7df}.rpgStatusSheetHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;font-weight:1000;color:#644e59}.rpgStatusSheetHead span:first-child{font-size:15px}.rpgStatusRaw{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.rpgStatusRaw div,.rpgStatusDerived div{padding:7px 3px;border-radius:11px;background:#faf1f5;text-align:center}.rpgStatusRaw b,.rpgStatusDerived b{display:block;font-size:7px;color:#9b7c8a}.rpgStatusRaw strong,.rpgStatusDerived strong{display:block;margin-top:3px;font-size:12px;color:#624c58}.rpgStatusDerived{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}.rpgGrowthPoints{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 8px}.rpgGrowthChip{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:#f8edf3;border:1px solid #ead4de;color:#765c69;font-size:8px;font-weight:1000}.rpgGrowthChip strong{font-size:10px;color:#5f4955}.rpgStatInvest{position:relative;padding-bottom:27px!important}.rpgStatPlus{position:absolute;left:5px;right:5px;bottom:5px;height:18px;border:0;border-radius:8px;background:#e9bfd0;color:#5f4050;font-size:12px;font-weight:1000;line-height:18px}.rpgStatPlus:disabled{background:#eee6ea;color:#baa9b1}.rpgSkillPanel{margin-top:9px;padding-top:9px;border-top:1px dashed #e7d4dc}.rpgSkillTitle{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;color:#654f5b;font-size:10px;font-weight:1000}.rpgSkillTitle small{font-size:8px;color:#9a7d8a}.rpgSkillList{display:grid;gap:6px}.rpgSkillRow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 9px;border-radius:13px;background:#fbf3f7;border:1px solid #f0dee6}.rpgSkillInfo{min-width:0}.rpgSkillName{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:1000;color:#624b58}.rpgSkillDesc{margin-top:2px;font-size:7px;font-weight:800;line-height:1.35;color:#9a7c89}.rpgSkillInvest{min-width:64px;height:34px;border:0;border-radius:11px;background:#dca2ba;color:#fff;font-size:8px;font-weight:1000;padding:0 8px}.rpgSkillInvest:disabled{background:#e9e0e4;color:#b8a7af}.rpgGrowthHint{margin-top:7px;font-size:7px;font-weight:800;line-height:1.45;color:#a08390;text-align:center} .rpgNpcTalkCard{margin-top:16px;padding:20px 18px;border-radius:24px;background:#fff9fc;border:1px solid #ead1dc;text-align:center;cursor:pointer}.rpgNpcFace{font-size:54px}.rpgNpcName{font-size:13px;font-weight:1000;color:#674f5c;margin:8px 0}.rpgNpcSpeech{padding:14px;border-radius:18px;background:#f8edf3;color:#705965;font-size:12px;font-weight:900;line-height:1.6}.rpgNpcTap{margin-top:10px;color:#9b7d8b;font-size:8px;font-weight:900} .rpgTravelTicker{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:9px 0;padding:9px 11px;border-radius:17px;background:#fff8fb;border:1px solid #e8d4dd;color:#806574;font-size:9px;font-weight:1000}.rpgTravelDots{display:flex;gap:5px}.rpgTravelDots i{width:10px;height:10px;border-radius:50%;background:#e4d6dd;border:1px solid #d2bec8}.rpgTravelDots i.on{background:#d58eaa;border-color:#c87597} #rpgFieldPage .content{width:min(calc(100% - 34px),640px);margin:0 auto;padding-left:0!important;padding-right:0!important} #rpgFieldPage .rpgScene{min-height:225px}#rpgFieldPage .rpgFieldControls{margin-left:0;margin-right:0} .rpgRewardCard{max-width:390px}.rpgRewardIcon{font-size:46px;text-align:center}.rpgRewardTitle{text-align:center;font-size:18px;font-weight:1000;color:#674f5c;margin:4px 0 12px}.rpgRewardLoot{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.rpgRewardLoot div{padding:10px 5px;border-radius:14px;background:#fbf1f5;text-align:center}.rpgRewardLoot b{display:block;font-size:8px;color:#987a88}.rpgRewardLoot strong{display:block;margin-top:4px;font-size:14px;color:#624b58}.rpgLevelSheet{display:none;margin-top:10px}.rpgLevelSheet.show{display:block}.rpgLevelWho{text-align:center;font-size:14px;font-weight:1000;color:#624b58;margin-bottom:8px}.rpgLevelStats{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.rpgLevelStats div{padding:9px 2px;border-radius:12px;background:#f6edf6;text-align:center}.rpgLevelStats b{display:block;font-size:7px;color:#967987}.rpgLevelStats strong{font-size:13px;color:#5f4a55}.gwAiStatGain61{display:inline-block;margin-left:2px;color:#d36e99;font-size:9px;font-style:normal;font-weight:1000}.rpgRewardNote{margin-top:8px;font-size:8px;color:#957987;text-align:center;font-weight:800;line-height:1.45} @media(max-width:390px){.rpgVillageGrid{gap:7px}.rpgVillageAction{min-height:70px;font-size:10px}.rpgVillageAction strong{font-size:19px}#rpgFieldPage .content{width:calc(100% - 24px)}.rpgRewardLoot{gap:5px}.rpgLevelStats{gap:4px}} /* ===== v4.8.34 Town NPC / shop presentation ===== */ @keyframes rpgNpcPop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(4px) scale(.985,1.015)}58%{transform:translateY(-9px) scale(1.035,.97)}78%{transform:translateY(-2px) scale(.995,1.008)}100%{transform:translateY(0) scale(1)}} .rpgNpcBounce{animation:rpgNpcPop .38s cubic-bezier(.2,.8,.35,1)} .rpgTownNpcStage,.rpgMerchantStage{position:relative;margin:12px 0 16px;padding:92px 8px 10px;text-align:center;min-height:500px;overflow:visible} .rpgTownNpcArt,.rpgMerchantArt{display:block;width:min(100%,410px);max-height:470px;object-fit:contain;margin:0 auto;cursor:pointer;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 13px 20px rgba(75,49,61,.13));transform-origin:50% 82%} .rpgTownNpcName,.rpgMerchantName{display:inline-block;margin-top:5px;padding:7px 13px;border-radius:999px;background:#fff7fa;border:1px solid #e8d2dc;color:#674f5c;font-size:12px;font-weight:1000;box-shadow:0 6px 14px rgba(117,77,96,.08)} .rpgTownNpcBubble,.rpgMerchantBubble{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:min(calc(100% - 26px),540px);padding:15px 17px;border-radius:21px;background:rgba(255,255,255,.98);border:1px solid #ddbfcd;box-shadow:0 10px 24px rgba(99,62,80,.14);color:#654d59;font-size:12px;font-weight:900;line-height:1.65;z-index:5;cursor:pointer} .rpgTownNpcBubble::after,.rpgMerchantBubble::after{content:'';position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg);border-right:1px solid #ddbfcd;border-bottom:1px solid #ddbfcd} .rpgTownNpcHint{margin:5px 0 0;color:#9c7f8c;font-size:8px;font-weight:900;text-align:center} .rpgShopChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.rpgShopChoice{min-height:132px;border-radius:23px;border:1px solid #e5d1da;background:linear-gradient(180deg,#fff,#fff6fa);box-shadow:0 10px 22px rgba(134,87,108,.09);color:#654d59;font-weight:1000;padding:16px}.rpgShopChoice strong{display:block;font-size:34px;margin-bottom:9px}.rpgShopChoice b{display:block;font-size:15px}.rpgShopChoice small{display:block;margin-top:6px;font-size:9px;color:#987b88;line-height:1.45}.rpgShopChoice:active{transform:translateY(2px) scale(.99)} .rpgGeneralShopComing{margin:8px 0 20px;padding:18px;border-radius:21px;background:#fff8fb;border:1px solid #ead5df;text-align:center;color:#755d69;font-size:11px;font-weight:900;line-height:1.6} @media(max-width:390px){.rpgTownNpcStage,.rpgMerchantStage{min-height:430px;padding-top:88px}.rpgTownNpcArt,.rpgMerchantArt{max-height:395px}.rpgShopChoiceGrid{gap:8px}.rpgShopChoice{min-height:116px;padding:12px}.rpgShopChoice strong{font-size:28px}} /* ===== v4.8.30 RPG save slots ===== */ #rpgSavePage{background:radial-gradient(circle at 18% 10%,rgba(255,222,202,.55),transparent 30%),radial-gradient(circle at 84% 60%,rgba(221,210,250,.48),transparent 34%),linear-gradient(180deg,#fffaf8,#fff2f7 60%,#f8edf5);color:#5d4855} .rpgSaveIntro{margin:4px 0 12px;color:#8f7380;font-size:11px;font-weight:760;line-height:1.55} .rpgSaveList{display:grid;gap:11px;padding-bottom:18px} .rpgSaveSlot{position:relative;min-height:154px;border-radius:23px;overflow:hidden;border:1px solid #ead5df;background:linear-gradient(135deg,#fffdfa,#fff5f9);box-shadow:0 12px 28px rgba(151,99,120,.10)} .rpgSaveSlot.theme-noon{background:linear-gradient(135deg,#fff7d8,#fff7fb)}.rpgSaveSlot.theme-night{background:linear-gradient(135deg,#393b59,#66586b);color:#fff}.rpgSaveSlot.theme-dawn{background:linear-gradient(135deg,#8b769c,#e9aeb4 55%,#f5dfc7);color:#fff} .rpgSaveScenery{position:absolute;inset:0;background-image:var(--save-bg);background-size:cover;background-position:center;opacity:1;pointer-events:none;filter:saturate(.96);-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.10) 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.10) 100%)} .rpgSaveShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.68) 50%,rgba(255,255,255,.92));pointer-events:none}.rpgSaveSlot.theme-night .rpgSaveShade{background:linear-gradient(90deg,rgba(24,26,45,.12),rgba(36,35,57,.58) 48%,rgba(45,42,59,.9))} .rpgSaveBody{position:relative;z-index:2;padding:13px 14px 12px 18px;min-height:154px;display:flex;flex-direction:column;justify-content:space-between} .rpgSaveTop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.rpgSaveNo{font-size:8px;font-weight:1000;letter-spacing:.12em;color:#ad7e91}.theme-night .rpgSaveNo{color:#e4c7d5}.rpgSaveTime{font-size:8px;font-weight:900;color:#927482}.theme-night .rpgSaveTime{color:#eadce4} .rpgSaveParty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;flex-wrap:nowrap;margin:7px 0}.rpgSaveMember{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.82);color:#654e5b;font-size:9px;font-weight:950;box-shadow:0 4px 10px rgba(110,75,91,.08)}.theme-night .rpgSaveMember{background:rgba(255,255,255,.15);color:#fff} .rpgSaveMeta{font-size:9px;font-weight:850;color:#826875}.theme-night .rpgSaveMeta{color:#f0e6eb}.rpgSaveMeta b{font-size:11px;color:#634d59}.theme-night .rpgSaveMeta b{color:#fff} .rpgSaveActions{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}.rpgSaveBtn{min-height:34px;padding:7px 10px;border-radius:11px;border:1px solid #e5ccd7;background:#fff;color:#725765;font-size:9px;font-weight:1000}.rpgSaveBtn.continue{background:linear-gradient(135deg,#f8c9db,#e5d6f5);border-color:#d8afc1}.rpgSaveBtn.delete{color:#ae6073}.theme-night .rpgSaveBtn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25);color:#fff} .rpgSaveEmpty{display:grid;place-items:center;min-height:154px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(252,240,247,.92));border:1px dashed #dbc5cf;cursor:pointer}.rpgSavePlus{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:rgba(207,164,184,.18);color:rgba(126,91,108,.52);font-size:50px;font-weight:300}.rpgSaveEmptyText{margin-top:7px;text-align:center;color:#9d7e8d;font-size:9px;font-weight:900} .rpgModeButtons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.rpgModeBtn{min-height:72px;border-radius:17px;border:1px solid #ead2dd;background:#fff7fb;color:#6a505d;font-weight:1000}.rpgModeBtn span{display:block;font-size:24px;margin-bottom:4px}.rpgDeleteSlotName{font-weight:1000;color:#6b5260} .rpgFeaturedMascot.rpgFeaturedImage{right:-3px;bottom:-20px;width:47%;height:126%;display:flex;align-items:flex-end;justify-content:flex-end;overflow:visible}.rpgFeaturedMascot.rpgFeaturedImage img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 15px rgba(160,78,121,.18))} /* ===== v4.8.38 SAVE card polish / party portraits ===== */ .rpgSaveEmpty>div{display:flex;flex-direction:column;align-items:center;justify-content:center} .rpgSavePlus{ transform:translateY(-4px); line-height:1; padding-bottom:5px; box-sizing:border-box; } .rpgSaveEmptyText{ width:100%; margin-top:5px; text-align:center; transform:none; } .rpgSaveTime{ font-size:10px; line-height:1.25; font-weight:1000; color:#785c6a; letter-spacing:.01em; text-shadow: -1px -1px 0 rgba(255,255,255,.96), 1px -1px 0 rgba(255,255,255,.96), -1px 1px 0 rgba(255,255,255,.96), 1px 1px 0 rgba(255,255,255,.96), 0 2px 3px rgba(91,56,72,.18); } .rpgSaveMeta{ font-size:10.5px; line-height:1.42; font-weight:950; color:#735866; text-shadow: -1px -1px 0 rgba(255,255,255,.96), 1px -1px 0 rgba(255,255,255,.96), -1px 1px 0 rgba(255,255,255,.96), 1px 1px 0 rgba(255,255,255,.96), 0 2px 3px rgba(91,56,72,.16); } .rpgSaveMeta b{ font-size:13px; line-height:1.3; font-weight:1100; color:#59424f; } .rpgSaveSlot.theme-night .rpgSaveTime, .rpgSaveSlot.theme-night .rpgSaveMeta, .rpgSaveSlot.theme-night .rpgSaveMeta b{ color:#fff; text-shadow: -1px -1px 0 rgba(54,38,51,.72), 1px -1px 0 rgba(54,38,51,.72), -1px 1px 0 rgba(54,38,51,.72), 1px 1px 0 rgba(54,38,51,.72), 0 2px 4px rgba(0,0,0,.28); } .rpgSaveParty{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; flex-wrap:nowrap; margin:8px 0 7px; } .rpgSaveMember{ min-width:0; min-height:39px; padding:4px 6px 4px 4px; border-radius:14px; gap:5px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,241,247,.93)); border:1px solid rgba(225,187,204,.82); box-shadow:0 5px 12px rgba(145,88,113,.12),inset 0 1px 0 rgba(255,255,255,.96); font-size:10px; font-weight:1000; color:#604754; } .rpgSaveMemberAvatar{ width:29px; height:29px; flex:0 0 29px; border-radius:50%; position:relative; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg,#fff8fb,#f5dce8); border:2px solid #efb8cf; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 3px 8px rgba(169,93,126,.16); } .rpgSaveMemberAvatar::after{ content:""; position:absolute; inset:2px; border-radius:50%; border:1px dashed rgba(224,145,178,.42); pointer-events:none; } .rpgSaveMemberAvatar img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .rpgSaveMemberAvatar.fallback{ font-size:18px; line-height:1; } .rpgSaveMemberText{ display:flex; min-width:0; flex:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:8px; line-height:1.08; } .rpgSaveMemberText b{ display:inline-flex; align-items:center; min-height:19px; padding:1px 5px; border-radius:999px; background:#fff; border:1px solid #efd4df; color:#a25f7b; font-size:8.5px; font-weight:1100; } .theme-night .rpgSaveMember{ background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.30); color:#fff; } .theme-night .rpgSaveMemberText b{ background:rgba(255,255,255,.90); color:#7b5366; } .rpgSaveActions{ gap:8px; margin-top:9px; } .rpgSaveBtn{ min-height:38px; padding:8px 13px; border-radius:999px; font-size:9.5px; font-weight:1100; transition:transform .12s ease,box-shadow .12s ease,filter .12s ease; } .rpgSaveBtn:active{ transform:translateY(1px) scale(.98); } .rpgSaveBtn.delete{ color:#b65f7f; border:1px solid #e7b7ca; background:linear-gradient(180deg,#fffafd,#fff0f6); box-shadow:0 4px 10px rgba(189,104,139,.10),inset 0 1px 0 #fff; } .rpgSaveBtn.continue{ color:#fff; border:1px solid #df8eb0; background:linear-gradient(135deg,#f6b5cf,#e99abb); box-shadow:0 5px 12px rgba(206,107,149,.20),inset 0 1px 0 rgba(255,255,255,.48); } @media(hover:hover) and (pointer:fine){ .rpgSaveBtn:hover{filter:brightness(1.025);box-shadow:0 6px 14px rgba(189,104,139,.18)} } @media(max-width:390px){ .rpgSaveMember{min-height:37px;padding:3px 5px 3px 3px} .rpgSaveMemberAvatar{width:27px;height:27px;flex-basis:27px} .rpgSaveMeta b{font-size:12px} .rpgSaveTime{font-size:9.5px} } /* ===== v4.8.38 global page slide + cute button theme ===== */ /* ํŽ˜์ด์ง€ ์ „ํ™˜์€ showPage()๊ฐ€ ๋ฐฉํ–ฅ ํด๋ž˜์Šค๋ฅผ ์ž ๊น ๋ถ™์—ฌ ์‚ฌ์šฉํ•œ๋‹ค. */ .page{ animation:none!important; } .page.huSlideForward{ animation:huPageSlideForward .22s cubic-bezier(.22,.72,.28,1) both!important; } .page.huSlideBack{ animation:huPageSlideBack .22s cubic-bezier(.22,.72,.28,1) both!important; } @keyframes huPageSlideForward{ from{opacity:.72;transform:translateX(38px)} to{opacity:1;transform:translateX(0)} } @keyframes huPageSlideBack{ from{opacity:.72;transform:translateX(-38px)} to{opacity:1;transform:translateX(0)} } /* ๊ณตํ†ต ์•ฑ ๋ฒ„ํŠผ ํ†ค. ๊ฒŒ์ž„ํŒ ์…€/์ธ๋ฒคํ† ๋ฆฌ ์นธ์ฒ˜๋Ÿผ ์ž์ฒด ๋””์ž์ธ์ด ํ•„์š”ํ•œ UI๋Š” ์•„๋ž˜ ์„ ํƒ์ž์— ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค. */ .iconBtn, .primary, .secondary, .rpgVillageAction, .rpgCharacterMenu button, .rpgInventoryTab, .rpgShopTab, .rpgItemBtn, .rpgMaterialCard button, .rpgBulkSellBar button, .rpgDialogueChoice, .rpgGuildNpcChoices button, .rpgInnActions button, .rpgMiniModalActions button, .rpgItemDetailActions button, .rpgModeBtn, .exitActions button, .settingsPatchBtn, .rpgFormationAction, .rpgQuestAction, .rpgQuestAcceptBtn, .rpgQuestCompleteBtn{ border-radius:16px!important; border:1px solid #edc5d6!important; color:#6d5060!important; background:linear-gradient(180deg,#fffafd 0%,#fff0f6 100%)!important; box-shadow: 0 6px 14px rgba(183,100,135,.10), inset 0 1px 0 rgba(255,255,255,.94)!important; transition:transform .12s ease,filter .12s ease,box-shadow .12s ease!important; } .primary, .rpgItemBtn:not(.secondary), .rpgBulkSellBar button, .rpgMiniModalActions .ok, .rpgItemDetailActions .equip, .rpgQuestAcceptBtn, .rpgQuestCompleteBtn{ color:#fff!important; border-color:#e692b4!important; background:linear-gradient(135deg,#f7b8d0 0%,#ea91b4 100%)!important; box-shadow: 0 7px 16px rgba(207,105,148,.18), inset 0 1px 0 rgba(255,255,255,.46)!important; } .secondary, .rpgItemBtn.secondary, .rpgMiniModalActions .cancel, .rpgItemDetailActions .close, .exitCancelBtn{ color:#9f627c!important; background:linear-gradient(180deg,#fffafd,#fff3f8)!important; border-color:#ebc4d4!important; } .exitLeaveBtn{ color:#fff!important; background:linear-gradient(135deg,#ef9fbd,#de789f)!important; border-color:#d96f99!important; } .iconBtn{ width:40px!important; height:40px!important; border-radius:14px!important; background:rgba(255,250,253,.92)!important; color:#9b687e!important; border-color:#ecc7d7!important; box-shadow:0 4px 10px rgba(169,95,126,.10)!important; } .rpgVillageAction{ background:linear-gradient(180deg,#fff,#fff5f9)!important; } .rpgVillageAction strong, .rpgCharacterMenu strong{ filter:drop-shadow(0 2px 2px rgba(191,104,143,.08)); } .rpgInventoryTab.active, .rpgShopTab.active{ color:#fff!important; background:linear-gradient(135deg,#f5b1ca,#e78dac)!important; border-color:#dc84a7!important; } button:active{ transform:translateY(1px) scale(.985); } @media(hover:hover) and (pointer:fine){ .iconBtn:hover, .primary:hover, .secondary:hover, .rpgVillageAction:hover, .rpgCharacterMenu button:hover, .rpgInventoryTab:hover, .rpgShopTab:hover, .rpgItemBtn:hover, .rpgMaterialCard button:hover, .rpgDialogueChoice:hover, .rpgGuildNpcChoices button:hover, .rpgInnActions button:hover, .exitActions button:hover{ filter:brightness(1.02); box-shadow:0 8px 18px rgba(183,100,135,.15)!important; } } /* ์‚ญ์ œ ํ™•์ธ ํŒ์—… */ .rpgDeleteMascot{ width:150px; height:122px; object-fit:contain; display:block; margin:-8px auto 4px; filter:drop-shadow(0 7px 10px rgba(182,101,136,.13)); } #rpgDeleteModal .appModalCard{ background:linear-gradient(180deg,#fffafd,#fff2f7); border:1px solid #efc8d8; } #rpgDeleteModal .exitActions{ gap:9px; } #rpgDeleteModal .exitActions button{ min-height:45px; border-radius:999px!important; font-weight:1000; } #rpgDeleteYesBtn{ order:2; color:#fff!important; background:linear-gradient(135deg,#ef9fbd,#df789f)!important; border-color:#d96f99!important; } #rpgDeleteNoBtn{ order:1; color:#a66681!important; background:linear-gradient(180deg,#fffafd,#ffedf5)!important; border-color:#eabacc!important; } /* ์‚ญ์ œ ์™„๋ฃŒ ํ† ์ŠคํŠธ์˜ ๊ธด ๋ฌธ๊ตฌ๊ฐ€ ๋ชจ๋ฐ”์ผ์—์„œ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ณด์ด๊ฒŒ */ #toast.rpgDeleteToast{ max-width:min(92vw,390px); height:auto; min-height:46px; padding:11px 16px; line-height:1.45; white-space:normal; text-align:center; font-size:11px; font-weight:950; border-radius:17px; } @media(prefers-reduced-motion:reduce){ .page.huSlideForward, .page.huSlideBack{ animation:none!important; } } /* ===== v4.8.38 dedicated 2.5D battle page ===== */ #rpgBattlePage{ background:linear-gradient(180deg,#fff7fa 0%,#fcecf4 100%); } #rpgBattlePage .content{ width:min(calc(100% - 22px),430px); margin:0 auto; padding:10px 0 20px; } .rpgBattleTopBar{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:8px; margin-bottom:8px; } .rpgBattleTopBar .rpgBattlePlace{ text-align:center; min-width:0; } .rpgBattleTopBar .rpgBattlePlace h1{ margin:0; font-size:18px; line-height:1.1; color:#5f4352; } .rpgBattleTopBar .rpgBattlePlace small{ display:block; margin-top:3px; font-size:9px; color:#a3788b; font-weight:800; } .rpgBattleTopMeta{ padding:7px 10px; border:1px solid #efc9d9; border-radius:999px; background:#fff9fc; color:#8a6174; font-size:9px; font-weight:1000; white-space:nowrap; } .rpgBattleProgress{ display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:7px 10px; border:1px solid #efc9d9; border-radius:15px; background:rgba(255,255,255,.82); box-shadow:0 5px 12px rgba(178,98,132,.08); } .rpgBattleProgress b{ font-size:10px; color:#8b6074; } .rpgBattleProgressTrack{ flex:1; display:flex; align-items:center; justify-content:center; gap:5px; } .rpgBattleProgressTrack i{ width:8px; height:8px; border-radius:50%; background:#eadbe2; border:1px solid #dcc4cf; } .rpgBattleProgressTrack i.on{ background:#ee9fbd; border-color:#dc789f; } .rpgBattleAuto{ min-width:72px; height:31px; border-radius:999px!important; font-size:9px!important; font-weight:1000!important; } .rpgBattleStage{ position:relative; min-height:388px; overflow:hidden; border-radius:24px; border:1px solid #e9c3d3; background:#dfefff center/cover no-repeat; box-shadow:0 12px 26px rgba(148,82,112,.13); } .rpgBattleStage::after{ content:""; position:absolute; inset:auto 0 0; height:36%; background:linear-gradient(180deg,transparent,rgba(86,47,64,.13)); pointer-events:none; } .rpgBattleFieldTitle{ position:absolute; z-index:8; top:9px; left:10px; padding:6px 9px; border-radius:999px; background:rgba(255,252,254,.90); border:1px solid rgba(234,194,211,.92); font-size:9px; font-weight:1000; color:#765466; } .rpgBattleGridPlane{ position:absolute; z-index:1; left:4%; right:4%; top:84px; height:236px; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(3,1fr); gap:3px; transform:perspective(520px) rotateX(54deg) rotateZ(-5deg); transform-origin:center center; } .rpgBattleGridCell{ position:relative; border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(107,76,91,.10); } .rpgBattleGridCell.partyZone{ background:rgba(124,220,218,.12); border-color:rgba(148,229,226,.64); } .rpgBattleGridCell.enemyZone{ background:rgba(255,135,157,.12); border-color:rgba(255,168,183,.66); } .rpgBattleGridCell.centerGap{ background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.18); } .rpgBattleLineTag{ position:absolute; z-index:4; font-size:8px; font-weight:1000; color:#715363; padding:3px 6px; border-radius:999px; background:rgba(255,250,253,.90); border:1px solid rgba(235,199,214,.92); pointer-events:none; } .rpgBattleLineTag.party.rear{left:3px;top:84px} .rpgBattleLineTag.party.mid{left:3px;top:155px} .rpgBattleLineTag.party.front{left:3px;top:225px} .rpgBattleLineTag.enemy.front{right:3px;top:84px} .rpgBattleLineTag.enemy.mid{right:3px;top:155px} .rpgBattleLineTag.enemy.rear{right:3px;top:225px} .rpgBattleUnit2D{ position:absolute; z-index:6; width:68px; min-height:80px; transform:translate(-50%,-50%); text-align:center; pointer-events:none; transition:transform .16s ease,filter .16s ease,opacity .16s ease; } .rpgBattleUnit2D.enemy.targetable{ pointer-events:auto; cursor:pointer; } .rpgBattleUnit2D.enemy.targetable::before{ content:""; position:absolute; left:8px; right:8px; bottom:10px; height:22px; border:2px solid #ff779b; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.55); animation:rpgTargetPulse .9s ease-in-out infinite alternate; } @keyframes rpgTargetPulse{ from{transform:scale(.92);opacity:.58} to{transform:scale(1.08);opacity:1} } .rpgBattleUnit2D.ready{ filter:drop-shadow(0 0 8px rgba(255,207,72,.72)); } .rpgBattleUnit2D.dead{ opacity:.25; filter:grayscale(1); } .rpgBattleUnitSprite{ position:relative; z-index:2; height:51px; display:flex; align-items:flex-end; justify-content:center; } .rpgBattleUnitSprite img{ max-width:58px; max-height:52px; object-fit:contain; filter:drop-shadow(0 5px 4px rgba(69,45,56,.25)); } .rpgBattleUnitSprite .allyFace{ width:49px; height:49px; border-radius:16px; display:grid; place-items:center; font-size:28px; background:rgba(255,255,255,.91); border:2px solid rgba(255,255,255,.88); box-shadow:0 5px 10px rgba(68,46,56,.18); } .rpgBattleUnit2D .shadow{ position:absolute; z-index:1; left:14px; right:14px; bottom:27px; height:10px; border-radius:50%; background:rgba(51,38,43,.25); filter:blur(2px); } .rpgBattleUnitName2D{ position:relative; z-index:3; max-width:78px; margin:0 auto 2px; padding:2px 4px; border-radius:7px; background:rgba(255,255,255,.82); color:#624653; font-size:7.5px; font-weight:1000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rpgBattleMiniBars{ position:relative; z-index:3; display:grid; gap:2px; width:58px; margin:0 auto; } .rpgBattleMiniBars span{ height:4px; overflow:hidden; border-radius:99px; background:rgba(92,67,79,.22); border:1px solid rgba(255,255,255,.72); } .rpgBattleMiniBars i{ display:block; height:100%; border-radius:inherit; } .rpgBattleMiniBars .hp i{background:#eb7899} .rpgBattleMiniBars .atb i{background:#e8bd4d} .rpgBattleLower{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:8px; } .rpgBattleLogPanel{ border:1px solid #e8c6d4; border-radius:17px; background:rgba(255,255,255,.78); overflow:hidden; } .rpgBattleLogHead{ display:flex; align-items:center; justify-content:space-between; padding:7px 10px 5px; color:#7b5969; font-size:9px; font-weight:1000; } #rpgBattleLog{ max-height:72px; overflow:auto; padding:0 9px 7px; } #rpgBattleLog .rpgHistoryRow{ min-height:20px; padding:4px 6px; margin-top:3px; border-radius:8px; background:rgba(255,246,250,.92); font-size:8px; } .rpgBattlePartyStrip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .rpgBattlePartyCard{ min-width:0; padding:7px; border:1px solid #e9c8d6; border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 5px 12px rgba(177,97,132,.08); } .rpgBattlePartyCard.empty{ opacity:.35; } .rpgBattlePartyCardHead{ display:flex; align-items:center; gap:5px; min-width:0; } .rpgBattlePartyFace{ width:32px; height:32px; flex:0 0 32px; border-radius:11px; background:#fff3f8; border:1px solid #efc6d8; display:grid; place-items:center; font-size:19px; } .rpgBattlePartyCardHead b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#654a57; } .rpgBattlePartyCardHead small{ display:block; color:#aa8193; font-size:7px; margin-top:1px; } .rpgBattlePartyVitals{ margin-top:5px; display:grid; gap:3px; } .rpgBattlePartyVitals label{ display:grid; grid-template-columns:19px 1fr; align-items:center; gap:3px; color:#866272; font-size:7px; font-weight:900; } .rpgBattlePartyVitals span{ height:5px; overflow:hidden; border-radius:99px; background:#eadfe4; } .rpgBattlePartyVitals i{display:block;height:100%} .rpgBattlePartyVitals .hp i{background:#eb7899} .rpgBattlePartyVitals .mp i{background:#7eaae9} .rpgBattlePartyVitals .atb i{background:#e7bd4b} .rpgBattleCommandPanel{ padding:7px; border-radius:18px; border:1px solid #e6c3d2; background:rgba(255,255,255,.82); } #rpgBattlePageActions{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; } #rpgBattlePageActions.skillMode{ grid-template-columns:repeat(2,minmax(0,1fr)); } .rpgBattleCmd{ min-height:52px; padding:5px 2px!important; border-radius:14px!important; font-size:9px!important; line-height:1.25; font-weight:1000!important; } .rpgBattleCmd small{ font-size:7px; font-weight:800; } .rpgBattleCmd.attack{background:linear-gradient(180deg,#ffc0d3,#ee89ae)!important;color:white!important} .rpgBattleCmd.skill{background:linear-gradient(180deg,#e5c8ff,#c99ae9)!important} .rpgBattleCmd.defend{background:linear-gradient(180deg,#d8ebff,#a8caf0)!important} .rpgBattleCmd.item{background:linear-gradient(180deg,#fff0c9,#f2d18a)!important} .rpgBattleCmd.run{background:linear-gradient(180deg,#e9def7,#c8b5df)!important} .rpgBattleHint2{ min-height:20px; padding:5px 7px 0; color:#8c6879; font-size:8px; font-weight:900; text-align:center; } .rpgBattleTransition{ position:absolute; z-index:100000; inset:0; width:100%; height:100%; overflow:hidden; border-radius:inherit; pointer-events:none; visibility:hidden; } .rpgBattleTransition.active{visibility:visible} .rpgBattleTransition .slice{ position:absolute; left:-6%; width:112%; height:16.9%; background:#09080a; box-shadow:0 0 0 1px rgba(255,126,168,.16),0 0 12px rgba(255,110,156,.26); transform:translateX(var(--out)); } .rpgBattleTransition .slice:nth-child(1){top:0;--out:-110%} .rpgBattleTransition .slice:nth-child(2){top:16.6%;--out:110%} .rpgBattleTransition .slice:nth-child(3){top:33.2%;--out:-110%} .rpgBattleTransition .slice:nth-child(4){top:49.8%;--out:110%} .rpgBattleTransition .slice:nth-child(5){top:66.4%;--out:-110%} .rpgBattleTransition .slice:nth-child(6){top:83%;--out:110%} .rpgBattleTransition.closing .slice{ animation:rpgBattleSliceIn .29s cubic-bezier(.22,.72,.25,1) forwards; } .rpgBattleTransition.opening .slice{ transform:translateX(0); animation:rpgBattleSliceOut .31s cubic-bezier(.22,.72,.25,1) forwards; } @keyframes rpgBattleSliceIn{ from{transform:translateX(var(--out))} to{transform:translateX(0)} } @keyframes rpgBattleSliceOut{ from{transform:translateX(0)} to{transform:translateX(var(--out))} } @media(prefers-reduced-motion:reduce){ .rpgBattleTransition .slice{animation-duration:.01ms!important} .rpgBattleUnit2D.enemy.targetable::before{animation:none} } @media(max-width:365px){ #rpgBattlePage .content{width:calc(100% - 14px)} .rpgBattleStage{min-height:360px} .rpgBattleGridPlane{top:80px;height:218px} .rpgBattleUnit2D{width:62px} .rpgBattleUnitSprite img{max-width:52px;max-height:48px} #rpgBattlePageActions{gap:4px} .rpgBattleCmd{min-height:49px;font-size:8px!important} } /* ===== v4.8.38 Battle UI Fix2 ===== */ /* SAVE ๋ฒˆํ˜ธ/๋นˆ ์Šฌ๋กฏ ๋ผ๋ฒจ ๊ฐ€์‹œ์„ฑ */ .rpgSaveNo{ display:inline-flex!important; align-items:center; min-height:20px; padding:3px 7px!important; border-radius:999px; color:#704c5e!important; background:rgba(255,255,255,.86); border:1px solid rgba(229,190,207,.88); font-size:9px!important; letter-spacing:.10em!important; text-shadow: -1px -1px 0 rgba(255,255,255,.98), 1px -1px 0 rgba(255,255,255,.98), -1px 1px 0 rgba(255,255,255,.98), 1px 1px 0 rgba(255,255,255,.98), 0 2px 3px rgba(89,52,69,.16)!important; box-shadow:0 3px 8px rgba(126,76,99,.10); } .theme-night .rpgSaveNo{ color:#fff!important; background:rgba(49,37,51,.56); border-color:rgba(255,255,255,.32); text-shadow:0 2px 4px rgba(0,0,0,.48)!important; } .rpgSaveEmptyText{ display:inline-block; padding:4px 9px; border-radius:999px; color:#755266!important; background:rgba(255,255,255,.76); border:1px solid rgba(229,195,210,.82); font-size:9.5px!important; font-weight:1000!important; text-shadow:0 1px 0 #fff,0 2px 4px rgba(103,61,82,.14); } /* ์‚ฌ๋ƒฅํ„ฐ/์ „ํˆฌ ํŽ˜์ด์ง€ ์ „์ฒด๊ฐ€ ์ง€์—ญ ๋ฐฐ๊ฒฝ์„ ์‚ฌ์šฉ */ #rpgFieldPage, #rpgBattlePage{ background-color:#1d151a!important; background-image:var(--rpg-meadow-page-bg)!important; background-size:cover!important; background-position:center top!important; background-repeat:no-repeat!important; color:#fff; } #rpgFieldPage .content, #rpgBattlePage .content{ position:relative; z-index:1; } /* ์ „ํˆฌ/์‚ฌ๋ƒฅํ„ฐ ๋ฐ•์Šค ์•ˆ์— ๋ณ„๋„ ๋ฐฐ๊ฒฝ์„ ๋‘์ง€ ์•Š์Œ */ #rpgFieldPage .rpgScene, #rpgBattlePage .rpgBattleStage{ background:transparent!important; border-color:rgba(255,255,255,.22)!important; box-shadow:none!important; } #rpgFieldPage .rpgScene::after, #rpgBattlePage .rpgBattleStage::after{ content:none!important; } /* ํŽ˜์ด์ง€ ์•„๋ž˜์ชฝ์„ ์–ด๋‘ก๊ฒŒ ์žก์•„ UI ๋Œ€๋น„ ํ™•๋ณด */ #rpgFieldPage .content::after, #rpgBattlePage .content::after{ content:""; position:absolute; z-index:-1; left:-18px; right:-18px; top:46%; bottom:-28px; background:linear-gradient( 180deg, rgba(12,8,10,0) 0%, rgba(12,8,10,.24) 12%, rgba(10,7,9,.72) 34%, rgba(8,5,7,.90) 62%, rgba(7,4,6,.97) 100% ); pointer-events:none; } /* ์‚ฌ๋ƒฅํ„ฐ ์ชฝ ๊ธฐ์กด ์นด๋“œ๋„ ์–ด๋‘์šด ๋ฐ˜ํˆฌ๋ช… ์œ ๋ฆฌํ†ค */ #rpgFieldPage .rpgBattleBox, #rpgFieldPage .rpgPartyStatusBox, #rpgFieldPage .rpgHistory{ background:rgba(22,15,19,.58)!important; border-color:rgba(255,255,255,.16)!important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 8px 22px rgba(0,0,0,.18)!important; } #rpgFieldPage .rpgKicker, #rpgFieldPage .rpgHistoryTitle, #rpgFieldPage .rpgStatusTop, #rpgFieldPage .rpgBattleHint, #rpgFieldPage .rpgStatusEffect{ color:#fff!important; text-shadow:0 1px 3px rgba(0,0,0,.65); } #rpgFieldPage .rpgHistoryRow{ background:rgba(255,255,255,.10)!important; color:#fff!important; border-color:rgba(255,255,255,.10)!important; } /* ์ „ํˆฌ ์ „์žฅ */ .rpgBattleStage{ min-height:405px!important; border-radius:23px!important; overflow:hidden!important; } .rpgBattleFieldTitle, .rpgBattleLineTag{ display:none!important; } /* 7x3 ๋…ผ๋ฆฌ ๊ฒฉ์ž, ์‹œ๊ฐ์ ์œผ๋กœ๋Š” 3x3 + ๊ณต๋ฐฑ + 3x3 */ .rpgBattleGridPlane{ left:8%!important; right:8%!important; top:112px!important; height:218px!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)) .48fr repeat(3,minmax(0,1fr))!important; grid-template-rows:repeat(3,minmax(0,1fr))!important; gap:0!important; transform:perspective(680px) rotateX(47deg) rotateZ(-17deg) scale(1.07)!important; transform-origin:center center!important; filter:drop-shadow(0 12px 9px rgba(0,0,0,.14)); } .rpgBattleGridCell{ border:1px solid rgba(255,255,255,.48)!important; background:rgba(255,255,255,.055)!important; box-shadow:inset 0 0 10px rgba(255,255,255,.035)!important; } .rpgBattleGridCell.partyZone{ background:rgba(112,224,221,.075)!important; border-color:rgba(159,242,237,.62)!important; } .rpgBattleGridCell.enemyZone{ background:rgba(255,115,146,.075)!important; border-color:rgba(255,167,187,.67)!important; } .rpgBattleGridCell.centerGap{ visibility:hidden!important; } /* ๋‘ 3x3 ํŒ์˜ ์™ธ๊ณฝ์„  ๊ฐ•์กฐ */ .rpgBattleGridCell.gridTop{border-top-width:3px!important} .rpgBattleGridCell.gridBottom{border-bottom-width:3px!important} .rpgBattleGridCell.gridLeft{border-left-width:3px!important} .rpgBattleGridCell.gridRight{border-right-width:3px!important} /* ์ „์žฅ ์œ ๋‹›์˜ ์นด๋“œ/๋ฒ„ํŠผ ๋ฐฐ๊ฒฝ ์ œ๊ฑฐ */ .rpgBattleUnit2D, .rpgBattleUnit2D.party, .rpgBattleUnit2D.enemy{ appearance:none!important; -webkit-appearance:none!important; background:none!important; background-color:transparent!important; border:0!important; outline:0!important; box-shadow:none!important; padding:0!important; min-width:0!important; } .rpgBattleUnitSprite .allyFace{ background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; } .rpgBattleUnitName2D{ background:rgba(13,8,11,.56)!important; border:1px solid rgba(255,255,255,.18); color:#fff!important; text-shadow:0 1px 3px rgba(0,0,0,.75); } .rpgBattleUnit2D .shadow{ background:rgba(0,0,0,.30)!important; } /* ๋กœ๊ทธ๋ฅผ ์ „์žฅ ์ƒ๋‹จ์— ์ง์ ‘ ํ‘œ์‹œ */ .rpgBattleStage .rpgBattleLogPanel{ position:absolute; z-index:12; top:8px; left:10px; right:10px; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; pointer-events:none; } .rpgBattleStage .rpgBattleLogHead{ display:none!important; } .rpgBattleStage #rpgBattleLog{ max-height:70px!important; overflow:hidden!important; padding:0!important; } .rpgBattleStage #rpgBattleLog .rpgHistoryRow{ width:max-content; max-width:88%; min-height:0!important; margin:0 0 3px!important; padding:3px 7px!important; border:0!important; border-radius:8px!important; background:rgba(12,7,10,.46)!important; color:#fff!important; font-size:7.5px!important; line-height:1.35!important; font-weight:850!important; text-shadow:0 1px 3px rgba(0,0,0,.72); backdrop-filter:blur(3px); } /* ํ•˜๋‹จ UI๋Š” ๊ฒ€์ • ๊ทธ๋ผ๋ฐ์ด์…˜ ์œ„ ์œ ๋ฆฌํ†ค */ #rpgBattlePage .rpgBattlePartyCard, #rpgBattlePage .rpgBattleCommandPanel{ background:rgba(25,16,21,.62)!important; border-color:rgba(255,255,255,.16)!important; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); box-shadow:0 8px 20px rgba(0,0,0,.18)!important; } #rpgBattlePage .rpgBattlePartyCardHead b, #rpgBattlePage .rpgBattlePartyCardHead small, #rpgBattlePage .rpgBattlePartyVitals label, #rpgBattlePage .rpgBattleHint2{ color:#fff!important; text-shadow:0 1px 3px rgba(0,0,0,.72); } #rpgBattlePage .rpgBattlePartyFace{ background:rgba(255,255,255,.10)!important; border-color:rgba(255,255,255,.18)!important; } /* ์ƒ๋‹จ ์ •๋ณด๋„ ๋ฐฐ๊ฒฝ ์œ„์—์„œ ์ฝํžˆ๊ฒŒ */ #rpgBattlePage .rpgBattlePlace h1, #rpgBattlePage .rpgBattlePlace small{ color:#fff!important; text-shadow:0 2px 5px rgba(0,0,0,.62); } #rpgBattlePage .rpgBattleTopMeta, #rpgBattlePage .rpgBattleProgress{ background:rgba(21,14,18,.48)!important; border-color:rgba(255,255,255,.18)!important; color:#fff!important; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); } #rpgBattlePage .rpgBattleProgress b{ color:#fff!important; } /* ์ž๋™์ „ํˆฌ ON ์‹œ global .primary ๋•Œ๋ฌธ์— ๋Š˜์–ด๋‚˜๋Š” ๋ฌธ์ œ ๊ฐ•์ œ ์ฐจ๋‹จ */ #rpgBattleAutoBtn, #rpgBattleAutoBtn.primary, #rpgBattleAutoBtn.secondary{ width:78px!important; min-width:78px!important; max-width:78px!important; flex:0 0 78px!important; height:31px!important; min-height:31px!important; padding:0 7px!important; margin:0!important; border-radius:999px!important; font-size:8.5px!important; line-height:1!important; white-space:nowrap!important; } #rpgBattleAutoBtn.primary{ color:#fff!important; background:linear-gradient(135deg,#ed9bbb,#dc769d)!important; border-color:#d66f97!important; } #rpgBattleAutoBtn.secondary{ color:#fff!important; background:rgba(255,255,255,.12)!important; border-color:rgba(255,255,255,.24)!important; } /* ์‚ฌ๋ƒฅํ„ฐ ์ƒ๋‹จ: ์ˆ˜์ •๋ณธ ๊ธฐ์ค€ ์ด์ค‘ ํ…Œ๋‘๋ฆฌ + ๊ธˆ๋น› ์›”๊ณ„ ์žฅ์‹ */ #rpgFieldPage .appbar{justify-content:center!important;align-items:center!important;position:relative;min-height:76px!important;height:auto!important;padding:7px 0 2px!important} #rpgFieldPage .appbar>div:first-child{display:none!important} #rpgFieldPage .appbar>div:nth-child(2){position:relative;margin:0 auto!important;min-width:min(292px,86vw);max-width:92%;padding:10px 54px 9px!important;text-align:center!important;border-radius:20px;background:linear-gradient(180deg,rgba(255,253,249,.99),rgba(255,241,247,.98));border:2px solid #efb7ca;box-shadow:0 0 0 4px rgba(255,255,255,.92),0 0 0 5px rgba(239,183,202,.7),0 8px 18px rgba(98,61,80,.10),inset 0 0 0 1px rgba(255,255,255,.95)} #rpgFieldPage .appbar>div:nth-child(2)::before,#rpgFieldPage .appbar>div:nth-child(2)::after{content:"โ˜™ ยท โง";position:absolute;top:50%;color:#c8952f;font-size:19px;line-height:1;letter-spacing:-1px;text-shadow:0 1px 0 #fff5c8,0 2px 4px rgba(119,82,26,.15)} #rpgFieldPage .appbar>div:nth-child(2)::before{left:12px;transform:translateY(-50%) rotate(-8deg)} #rpgFieldPage .appbar>div:nth-child(2)::after{right:12px;transform:translateY(-50%) rotate(8deg) scaleX(-1)} #rpgFieldPage .rpgHeadTitle{color:#634b59!important;text-shadow:none!important;font-size:23px!important;line-height:1.05!important} #rpgFieldPage .rpgSub{color:#957684!important;text-shadow:none!important;font-weight:950!important;margin-top:3px} #rpgFieldPage .rpgTravelTicker{justify-content:center!important;text-align:center!important;background:linear-gradient(180deg,rgba(255,250,253,.96),rgba(255,239,246,.94))!important;border:1px solid #e7cbd7!important;color:#775d6a!important;box-shadow:0 6px 14px rgba(112,71,90,.08)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} #rpgFieldPage .rpgTravelTicker>span:first-child,#rpgFieldPage .rpgTravelTicker>span:last-child{flex:1;text-align:center} #rpgFieldPage .rpgFieldSummary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;background:transparent!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;margin:8px 0 10px!important} #rpgFieldPage .rpgFieldSummary span{display:flex;align-items:center;justify-content:center;min-height:43px;padding:8px 9px!important;border-radius:15px!important;background:linear-gradient(180deg,#fffafd,#fff0f6)!important;border:1px solid #e6cad6!important;color:#604754!important;box-shadow:0 5px 12px rgba(112,71,90,.07)!important;font-size:12px!important;font-weight:1100!important;text-align:center} @media(max-width:365px){ .rpgBattleGridPlane{ left:7%!important; right:7%!important; top:108px!important; height:205px!important; transform:perspective(620px) rotateX(47deg) rotateZ(-17deg) scale(1.04)!important; } .rpgBattleStage{min-height:382px!important} } /* ===== v4.8.38 Battle UI Fix3 ===== */ /* 1) ๋นˆ SAVE ์Šฌ๋กฏ์˜ NEW GAME ํ…์ŠคํŠธ๋Š” ์นด๋“œ ์ œ๊ฑฐ, ํ…์ŠคํŠธ ๋Œ€๋น„๋งŒ ์œ ์ง€ */ .rpgSaveEmptyText{ display:block!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:#9f6c82!important; font-size:9.5px!important; font-weight:1000!important; text-shadow: -1px -1px 0 rgba(255,255,255,.96), 1px -1px 0 rgba(255,255,255,.96), -1px 1px 0 rgba(255,255,255,.96), 1px 1px 0 rgba(255,255,255,.96), 0 2px 3px rgba(103,61,82,.13)!important; } /* 2,4,5) ์ „์ฒด ์ง€์—ญ ๋ฐฐ๊ฒฝ + ํ•˜๋‹จ ์ „์šฉ ๊ทธ๋ผ๋ฐ์ด์…˜. content ๋†’์ด๊ฐ€ ๋Š˜์–ด๋‚˜๋„ ํŽ˜์ด์ง€ ๋๊นŒ์ง€ ๊ณ„์† ์ด์–ด์ง„๋‹ค. */ #rpgFieldPage, #rpgBattlePage{ position:relative!important; isolation:isolate; min-height:100vh!important; background-color:#1c1519!important; background-image:var(--rpg-meadow-page-bg)!important; background-size:cover!important; background-position:center top!important; background-repeat:no-repeat!important; } #rpgFieldPage::before, #rpgBattlePage::before{ content:""; position:absolute; z-index:0; inset:0; min-height:100%; pointer-events:none; background:linear-gradient( 180deg, rgba(7,4,6,0) 0%, rgba(7,4,6,0) var(--rpg-gradient-start,58%), rgba(7,4,6,.14) calc(var(--rpg-gradient-start,58%) + 7%), rgba(7,4,6,.40) calc(var(--rpg-gradient-start,58%) + 17%), rgba(7,4,6,.68) calc(var(--rpg-gradient-start,58%) + 28%), rgba(7,4,6,.90) calc(var(--rpg-gradient-start,58%) + 38%), rgba(7,4,6,.97) 100% ); } #rpgFieldPage .content, #rpgBattlePage .content{ position:relative!important; z-index:1!important; min-height:100%; } #rpgFieldPage .content::after, #rpgBattlePage .content::after{ content:none!important; } /* ์‚ฌ๋ƒฅํ„ฐ ํ•˜๋‹จ ๋ณด์กฐ ๊ทธ๋ผ๋ฐ์ด์…˜: ์ „ํˆฌ ํ™”๋ฉด์—์„œ๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ */ #rpgFieldPage .rpgFieldControls{ position:relative; } #rpgFieldPage .rpgFieldControls::before{ content:""; position:absolute; z-index:-1; left:-18px; right:-18px; top:-28px; bottom:-70px; pointer-events:none; background:linear-gradient( 180deg, rgba(7,4,6,0) 0%, rgba(7,4,6,.22) 24%, rgba(7,4,6,.50) 58%, rgba(7,4,6,.78) 100% ); } /* 2,6) ๊ท€์—ฌ์šด ์•ฑ ํ…Œ๋งˆ ์นด๋“œ UI ๋ณต์› */ #rpgFieldPage .rpgBattleBox, #rpgFieldPage .rpgPartyStatusBox, #rpgFieldPage .rpgHistory, #rpgBattlePage .rpgBattlePartyCard, #rpgBattlePage .rpgBattleCommandPanel{ background:linear-gradient(180deg,rgba(255,250,253,.96),rgba(255,238,246,.94))!important; border:1px solid rgba(236,194,212,.92)!important; box-shadow: 0 8px 18px rgba(43,20,31,.16), inset 0 1px 0 rgba(255,255,255,.94)!important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } /* ์‚ฌ๋ƒฅํ„ฐ ๊ธฐ๋ก๋งŒ ์กฐ๊ธˆ ๋” ํˆฌ๋ช…ํ•˜๊ฒŒ, ํ•˜์ง€๋งŒ ์•ฑ ํ…Œ๋งˆ ์œ ์ง€ */ #rpgFieldPage .rpgHistory{ background:linear-gradient(180deg,rgba(255,250,253,.90),rgba(255,240,247,.88))!important; } /* ์นด๋“œ ์•ˆ ๊ธ€์”จ ๊ฐ€๋…์„ฑ */ #rpgFieldPage .rpgKicker, #rpgFieldPage .rpgHistoryTitle, #rpgFieldPage .rpgStatusTop, #rpgFieldPage .rpgBattleHint, #rpgFieldPage .rpgStatusEffect, #rpgBattlePage .rpgBattlePartyCardHead b, #rpgBattlePage .rpgBattlePartyCardHead small, #rpgBattlePage .rpgBattlePartyVitals label, #rpgBattlePage .rpgBattleHint2{ color:#654858!important; text-shadow:none!important; } #rpgFieldPage .rpgKicker, #rpgFieldPage .rpgHistoryTitle, #rpgBattlePage .rpgBattlePartyCardHead b{ font-weight:1100!important; } #rpgFieldPage .rpgStatusTop, #rpgBattlePage .rpgBattlePartyCardHead b{ font-size:9.5px!important; } #rpgFieldPage .rpgStatusEffect, #rpgBattlePage .rpgBattlePartyCardHead small, #rpgBattlePage .rpgBattlePartyVitals label, #rpgBattlePage .rpgBattleHint2{ font-size:7.5px!important; font-weight:900!important; color:#8d6577!important; } /* ์‚ฌ๋ƒฅํ„ฐ ๋กœ๊ทธ ํ–‰๋„ ๋‹ค์‹œ ๋ฐ๊ฒŒ */ #rpgFieldPage .rpgHistoryRow{ background:rgba(255,255,255,.84)!important; color:#6e5060!important; border:1px solid rgba(238,207,220,.76)!important; text-shadow:none!important; } /* ํŒŒํ‹ฐ ์–ผ๊ตด ์นด๋“œ๋„ ์•ฑ ํ…Œ๋งˆ์— ๋งž๊ฒŒ */ #rpgBattlePage .rpgBattlePartyFace{ background:linear-gradient(180deg,#fffafd,#ffeef5)!important; border:1px solid #efc5d7!important; color:#6f4e5f!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important; } /* ํ•˜๋‹จ ๋ช…๋ น ํŒจ๋„์€ ํฐ ์นด๋“œ ์œ„์— ๊ธฐ์กด ์ปฌ๋Ÿฌ ๋ฒ„ํŠผ ์œ ์ง€ */ #rpgBattlePage .rpgBattleCommandPanel{ padding:8px!important; } /* 3) ๋ชจ๋ฐ”์ผ ๋ฒ„ํŠผ ํƒญ ์‹œ ๋ธŒ๋ผ์šฐ์ € ํ™•๋Œ€/์—ฐ์† ํ™•๋Œ€ ์–ต์ œ */ #rpgFieldPage button, #rpgBattlePage button, #rpgFieldPage .rpgCenterBtn, #rpgFieldPage .rpgVillageAction{ touch-action:manipulation!important; -webkit-tap-highlight-color:transparent; } #rpgFieldPage .rpgCenterBtn:active, #rpgFieldPage .rpgCenterBtn:hover, #rpgFieldPage .rpgCenterBtn:focus{ transform:none!important; } /* ์ด๋™/๋งˆ์„๊ท€ํ™˜ ์นด๋“œ ์ž์ฒด๋Š” ์•ฑ ํ…Œ๋งˆ ๋ณต์› */ #rpgFieldPage .rpgCenterBtn, #rpgFieldPage .rpgBattleBox, #rpgFieldPage .rpgPartyStatusBox{ border-radius:18px!important; } #rpgFieldPage .rpgBattleBox{display:flex;flex-direction:column} #rpgFieldPage .rpgBattleActions{display:flex!important;flex:1;min-height:0} #rpgFieldPage .gwFieldQuestCard61{display:flex;flex:1;width:100%;flex-direction:column;justify-content:center;gap:6px;padding:10px 8px;border-radius:13px;background:#fff;border:1px solid #edd7e1;color:#674e5b;text-align:center} #rpgFieldPage .gwFieldQuestCard61 b{font-size:10px;line-height:1.35} #rpgFieldPage .gwFieldQuestCard61 span{font-size:8.5px;color:#927482;font-weight:900} #rpgFieldPage .gwFieldQuestCard61 i{display:block;height:6px;border-radius:99px;overflow:hidden;background:#eee1e7} #rpgFieldPage .gwFieldQuestCard61 i em{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e79ab8,#c98ee2)} #rpgFieldPage .gwFieldQuestCard61.free{min-height:104px} /* ์‚ฌ๋ƒฅํ„ฐ ํŒŒํ‹ฐ ์นด๋“œ: ๋ ˆ๋ฒจ/EXP ์„ธ๋กœ ์ •๋ณด + HP/MP ์ˆ˜์น˜, ATB๋Š” ํ‘œ์‹œํ•˜์ง€ ์•Š์Œ */ #rpgFieldPage .gwPartyHead62{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px} #rpgFieldPage .gwPartyName62{min-width:0;display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:1100;color:#654858} #rpgFieldPage .gwPartyName62 .rpgSaveMemberAvatar{width:25px;height:25px;flex:0 0 25px;border-width:1.5px;box-shadow:0 0 0 1px rgba(255,255,255,.85),0 2px 6px rgba(169,93,126,.13)} #rpgFieldPage .gwPartyName62 .rpgSaveMemberAvatar.fallback{font-size:15px} #rpgFieldPage .gwPartyNameText63{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #rpgFieldPage .gwPartyLevel62{display:flex;flex-direction:column;align-items:flex-end;line-height:1.12;color:#806473} #rpgFieldPage .gwPartyLevel62 b{font-size:8.5px} #rpgFieldPage .gwPartyLevel62 small{font-size:6.8px;font-weight:900;white-space:nowrap;color:#a17c8d} #rpgFieldPage .gwPartyVital62{display:flex;justify-content:space-between;gap:5px;margin-top:4px;font-size:7.2px;font-weight:1000;color:#826574} #rpgFieldPage .gwPartyPresence64{display:flex;align-items:center;justify-content:flex-start;min-height:15px;margin-top:5px;font-size:7.4px;font-weight:1000;color:#8c6d7c} #rpgFieldPage .gwPresenceDot64{display:inline-grid;place-items:center;width:13px;height:13px;flex:0 0 13px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(58,34,45,.22)} #rpgFieldPage .gwPresenceDot64.online{background:#42c96f} #rpgFieldPage .gwPresenceDot64.offline{background:#e65d68} #rpgFieldPage .gwPresenceDot64.pending{background:#a9a1a6;animation:gwPresencePulse64 1.2s ease-in-out infinite} #rpgFieldPage .gwPresenceDot64.ai{width:17px;height:17px;flex-basis:17px;background:#4f9fe8;color:#fff;font-size:5.6px;letter-spacing:-.2px} @keyframes gwPresencePulse64{0%,100%{opacity:.55}50%{opacity:1}} #rpgBattlePage .rpgBattlePartyVitals span, #rpgFieldPage .rpgBar{background:#eadfe5!important} #rpgBattlePage .rpgBattlePartyVitals .hp i, #rpgFieldPage .rpgBar.hp i{background:#e9779a!important} #rpgBattlePage .rpgBattlePartyVitals .mp i, #rpgFieldPage .rpgBar.mp i{background:#7ea9e8!important} #rpgBattlePage .rpgBattlePartyVitals .atb i{background:linear-gradient(90deg,#e2b441,#f1d36e)!important} /* ์ „ํˆฌ ๋กœ๊ทธ๋Š” ์ „์žฅ ์œ„ ์˜ค๋ฒ„๋ ˆ์ด ์œ ์ง€ */ #rpgBattlePage .rpgBattleStage .rpgBattleLogPanel{ background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; } #rpgBattlePage .rpgBattleStage #rpgBattleLog .rpgHistoryRow{ background:rgba(12,7,10,.52)!important; color:#fff!important; border:0!important; text-shadow:0 1px 3px rgba(0,0,0,.75)!important; } /* ํ•˜๋‹จ ์—ฌ๋ฐฑ์ด ๋งŽ์€ ํ•ด์ƒ๋„์—์„œ๋„ ๋ฐฐ๊ฒฝ/๊ทธ๋ผ๋ฐ์ด์…˜์ด ๋Š๊ธฐ์ง€ ์•Š๋„๋ก */ #rpgFieldPage, #rpgBattlePage{ padding-bottom:max(20px,env(safe-area-inset-bottom))!important; } /* ์ž‘์€ ํ™”๋ฉด์—์„œ ์นด๋“œ ๊ฐ„๊ฒฉ ์กฐ๊ธˆ ์••์ถ• */ @media(max-width:365px){ #rpgBattlePage .rpgBattlePartyCard{ padding:6px!important; } #rpgBattlePage .rpgBattleCommandPanel{ padding:6px!important; } } /* ===== v4.8.38 battle input + ATB visual smoothing fix ===== */ #rpgBattlePage button, #rpgBattlePage [data-battle-enemy]{ touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; user-select:none; -webkit-user-select:none; } #rpgBattlePage button:focus, #rpgBattlePage [data-battle-enemy]:focus{ outline:none; } #rpgBattlePage .rpgBattleUnit2D.enemy.targetable{ pointer-events:auto!important; cursor:pointer; } #rpgBattlePage .rpgBattleUnit2D.enemy:not(.targetable){ pointer-events:none!important; } /* ===== v4.8.38 stable full-page gradient fix ===== */ /* ๊ธฐ์กด ๋™์  ๊ทธ๋ผ๋ฐ์ด์…˜ ๊ณ„์‚ฐ์„ ํ๊ธฐํ•˜๊ณ  ํŽ˜์ด์ง€ ์ „์ฒด ๋‹จ์ผ ๋ ˆ์ด์–ด๋กœ ๊ณ ์ • */ #rpgFieldPage, #rpgBattlePage{ position:relative!important; isolation:isolate!important; min-height:100vh!important; background-color:#171014!important; background-image:var(--rpg-meadow-image)!important; background-size:cover!important; background-position:center top!important; background-repeat:no-repeat!important; } /* ์‹ค์ œ ํŽ˜์ด์ง€ ๋†’์ด๋ฅผ ๊ทธ๋Œ€๋กœ ๋”ฐ๋ผ๊ฐ€๋Š” ๋‹จ์ผ ๊ทธ๋ผ๋ฐ์ด์…˜ */ #rpgFieldPage::before, #rpgBattlePage::before{ content:""!important; position:absolute!important; z-index:0!important; inset:0!important; width:100%!important; height:100%!important; min-height:100%!important; pointer-events:none!important; } /* ์‚ฌ๋ƒฅํ„ฐ: ํŒŒํ‹ฐ/์กฐ์ž‘ UI ๋ถ€๊ทผ๋ถ€ํ„ฐ ์–ด๋‘์›Œ์ง */ #rpgFieldPage::before{ background:linear-gradient( to bottom, rgba(7,4,6,0) 0%, rgba(7,4,6,0) 48%, rgba(7,4,6,.10) 56%, rgba(7,4,6,.30) 65%, rgba(7,4,6,.53) 74%, rgba(7,4,6,.72) 83%, rgba(7,4,6,.86) 91%, rgba(7,4,6,.94) 100% )!important; } /* ์ „ํˆฌ: ์ „์žฅ๊นŒ์ง€๋Š” ๊นจ๋—ํ•˜๊ฒŒ, ํŒŒํ‹ฐ ์นด๋“œ๋ถ€ํ„ฐ ํ•˜๋‹จ์œผ๋กœ ์ ์  ์–ด๋‘ก๊ฒŒ */ #rpgBattlePage::before{ background:linear-gradient( to bottom, rgba(7,4,6,0) 0%, rgba(7,4,6,0) 50%, rgba(7,4,6,.08) 57%, rgba(7,4,6,.25) 65%, rgba(7,4,6,.48) 74%, rgba(7,4,6,.68) 83%, rgba(7,4,6,.84) 92%, rgba(7,4,6,.94) 100% )!important; } #rpgFieldPage .content, #rpgBattlePage .content{ position:relative!important; z-index:1!important; } /* Fix3์—์„œ ๋„ฃ์—ˆ๋˜ ๋ณด์กฐ ๋ ˆ์ด์–ด๋Š” ์™„์ „ํžˆ ์ œ๊ฑฐ */ #rpgFieldPage .content::after, #rpgBattlePage .content::after, #rpgFieldPage .rpgFieldControls::before, #rpgBattlePage .rpgBattleLower::before{ content:none!important; display:none!important; } /* ํŽ˜์ด์ง€ ์ „ํ™˜ transform ์ค‘์—๋„ ๋ฐฐ๊ฒฝ/๊ทธ๋ผ๋ฐ์ด์…˜์˜ ํ•ฉ์„ฑ์ธต์„ ์•ˆ์ •ํ™” */ #rpgFieldPage, #rpgBattlePage{ backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-style:flat; } #rpgFieldPage.huSlideForward, #rpgFieldPage.huSlideBack, #rpgBattlePage.huSlideForward, #rpgBattlePage.huSlideBack{ will-change:transform,opacity; } /* ํ•˜๋‹จ์ด ๋นˆ ํ™”๋ฉด์œผ๋กœ ๋Š˜์–ด๋‚˜๋„ ๋ฐฐ๊ฒฝ์ด ๋Š๊ธฐ์ง€ ์•Š๋„๋ก */ #rpgFieldPage .content, #rpgBattlePage .content{ min-height:100vh!important; padding-bottom:max(28px,env(safe-area-inset-bottom))!important; } /* ===== v4.8.34 RPG equipment / quest / polish ===== */ #rpgFormationPage .content{width:min(calc(100% - 36px),640px);margin:0 auto;padding-left:0!important;padding-right:0!important} #rpgFieldPage .rpgSceneDecor .grass{display:none!important} .rpgQuestGradeRow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0} .rpgGrade{appearance:none;min-width:0;padding:11px 8px;border-radius:13px;text-align:center;background:#f7edf3;border:1px solid #e7d3dc;color:#846b77;font-size:12px;font-weight:1000;box-shadow:0 2px 0 rgba(95,65,80,.04);transition:.12s transform,.12s box-shadow,.12s border-color} .rpgGrade:active,.rpgGrade.active{transform:translateY(2px);box-shadow:inset 0 3px 8px rgba(95,65,80,.16);border-color:#b990a3} .rpgGrade.rank-b{background:#edf5ff;color:#4e6f9d;border-color:#c7dcf5}.rpgGrade.rank-a{background:#fff0f0;color:#a5535b;border-color:#f2c8cc}.rpgGrade.rank-s{background:#ffe4e5;color:#9b3441;border-color:#ebaab0}.rpgGrade.rank-ss{background:#ffcfd2;color:#7f1828;border:2px solid #c83c4d;font-weight:1100;box-shadow:0 0 0 2px rgba(200,60,77,.08)} .rpgQuestListTitle{margin-top:18px}.rpgQuestList{display:grid;gap:9px;max-height:330px;overflow:auto;padding:2px 3px 12px}.rpgQuestCard.compact{padding:13px}.rpgQuestCard .questActions{display:flex;justify-content:flex-end;margin-top:10px}.rpgQuestTake{border:0;border-radius:12px;background:#d998b2;color:#fff;padding:8px 12px;font-size:10px;font-weight:1000;cursor:pointer}.rpgQuestTake:disabled{opacity:.45;cursor:not-allowed} .rpgAcceptedQuestBox{margin:13px 0;padding:14px;border-radius:18px;background:#fff8fb;border:1px solid #ead0db;color:#715866;font-size:11px;line-height:1.65}.rpgAcceptedQuestBox h3{margin:0 0 7px;font-size:15px;color:#604854}.rpgAcceptedNpcLine{display:none;margin:10px 0;padding:13px 14px;border-radius:16px;background:#f8edf3;color:#725866;font-size:11px;line-height:1.6;font-weight:800} #rpgShopPage .screen{padding-bottom:28px}.rpgShopTabs{display:flex;gap:7px;margin:10px 0}.rpgShopTab{flex:1;border:1px solid #e4cbd6;background:#fff7fb;border-radius:12px;padding:9px;font-weight:1000;color:#806572}.rpgShopTab.active{background:#f0dbe5;border-color:#d7a8bc}.rpgEquipSummary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.rpgEquipSlot{padding:12px;border-radius:16px;background:#fff9fc;border:1px solid #ead6df;font-size:10px;color:#806875;min-height:68px}.rpgEquipSlot b{display:block;color:#684f5b;margin-bottom:4px}.rpgShopList,.rpgInventoryList{display:grid;gap:8px;max-height:390px;overflow:auto;padding-bottom:10px}.rpgItemCard{padding:12px;border-radius:17px;background:#fff;border:1px solid #ead9df;box-shadow:0 7px 16px rgba(128,86,104,.06)}.rpgItemCard.rare{border:2px solid #6ea9e8}.rpgItemCard.elite{border:2px solid #9a68d4}.rpgItemTop{display:flex;align-items:center;justify-content:space-between;gap:8px}.rpgItemName{font-size:12px;font-weight:1000;color:#624b57}.rpgItemMeta{font-size:9px;color:#927a86;margin-top:3px}.rpgItemStats{font-size:10px;color:#755d69;line-height:1.55;margin-top:7px}.rpgItemActions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}.rpgItemBtn{border:0;border-radius:10px;padding:7px 10px;font-size:9px;font-weight:1000;background:#d99ab3;color:white}.rpgItemBtn.secondary{background:#eee2e8;color:#765e69}.rpgGoldBadge{padding:6px 9px;border-radius:999px;background:#fff4d7;color:#8b6c27;font-size:10px;font-weight:1000} @media(max-width:390px){#rpgFormationPage .content{width:calc(100% - 24px)}.rpgQuestGradeRow{gap:6px}.rpgGrade{padding:10px 5px}.rpgEquipSummary{grid-template-columns:1fr}} /* ===== v4.8.30 RPG ATB / slime / field themes ===== */ #rpgFieldPage .rpgScene{overflow:hidden} .rpgStatusDerivedWide{grid-template-columns:repeat(3,1fr)!important} .rpgSlimeSprite{display:block;width:42px;height:42px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 4px 4px rgba(70,45,55,.14))} .rpgCombatUnit .rpgUnitIcon{min-height:44px;display:flex;align-items:center;justify-content:center} .rpgAtbGauge{height:4px;margin-top:4px;border-radius:999px;background:#dfe7df;overflow:hidden;border:1px solid rgba(93,126,93,.18)} .rpgAtbGauge i{display:block;height:100%;background:linear-gradient(90deg,#8fcf93,#4daf66);transition:width .09s linear} .rpgAtbGauge.party{height:5px;margin-top:4px} .rpgCombatUnit.ready .rpgAtbGauge i{background:linear-gradient(90deg,#77d67d,#29a948)} .rpgCombatUnit.ready{box-shadow:inset 0 0 0 1px rgba(61,169,79,.42),0 0 0 2px rgba(92,205,108,.10)} .rpgCombatUnit.ready .rpgUnitStatus{color:#288a3c;font-weight:1000} @media(max-width:390px){.rpgSlimeSprite{width:34px;height:34px}.rpgCombatUnit .rpgUnitIcon{min-height:36px}.rpgStatusDerivedWide{grid-template-columns:repeat(2,1fr)!important}} /* ===== v4.8.34 Receptionist / quest flow ===== */ .rpgReceptionStage{position:relative;margin:10px 0 14px;padding:56px 12px 14px;border-radius:24px;background:linear-gradient(180deg,#fffafc,#f8edf3);border:1px solid #ead4df;overflow:visible;text-align:center;min-height:390px} .rpgReceptionArt{display:block;width:min(82%,420px);max-height:340px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 14px 18px rgba(94,58,74,.12));cursor:pointer} .rpgReceptionName{font-size:12px;font-weight:1000;color:#654d59;margin-top:6px} .rpgSpeechBubble{position:absolute;left:50%;top:12px;bottom:auto;transform:translate(-50%,-8px);width:calc(100% - 34px);padding:12px 14px;border-radius:17px;background:rgba(255,255,255,.97);border:1px solid #dfc3d0;box-shadow:0 10px 24px rgba(99,62,80,.14);color:#654d59;font-size:11px;font-weight:850;line-height:1.55;opacity:0;pointer-events:none;transition:.22s ease;z-index:7} .rpgSpeechBubble.show{opacity:1;transform:translate(-50%,0)} .rpgSpeechBubble::after{content:'';position:absolute;left:50%;bottom:-7px;width:13px;height:13px;background:#fff;transform:translateX(-50%) rotate(45deg);border-right:1px solid #dfc3d0;border-bottom:1px solid #dfc3d0} .rpgDialogueReceptionStage{position:relative;margin:10px 0 14px;padding:62px 10px 12px;text-align:center;min-height:380px} .rpgDialogueReceptionArt{display:block;width:min(84%,430px);max-height:330px;object-fit:contain;margin:0 auto;cursor:pointer;filter:drop-shadow(0 14px 18px rgba(94,58,74,.12))} .rpgDialogueSpeech{top:10px} .rpgAcceptedReceptionStage{position:relative;margin:2px 0 10px;padding-top:58px;text-align:center;min-height:350px;background:transparent;border:0;overflow:visible} .rpgAcceptedReceptionArt{width:min(88%,430px);height:300px;object-fit:contain;display:block;margin:auto;transition:opacity .18s ease;filter:drop-shadow(0 14px 18px rgba(94,58,74,.10))} .rpgAcceptedMoodEmoji{position:absolute;top:58px;font-size:30px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12));opacity:0;z-index:8;pointer-events:none} .rpgAcceptedMoodEmoji.show.left{left:10%;animation:rpgMoodRiseLeft 2.2s ease-out forwards} .rpgAcceptedMoodEmoji.show.right{right:10%;animation:rpgMoodRiseRight 2.2s ease-out forwards} @keyframes rpgMoodRiseLeft{0%{opacity:0;transform:translate(0,18px) rotate(-12deg) scale(.75)}20%{opacity:1}65%{opacity:1;transform:translate(10px,-28px) rotate(8deg) scale(1.1)}100%{opacity:0;transform:translate(-4px,-62px) rotate(-6deg) scale(.9)}} @keyframes rpgMoodRiseRight{0%{opacity:0;transform:translate(0,18px) rotate(12deg) scale(.75)}20%{opacity:1}65%{opacity:1;transform:translate(-10px,-28px) rotate(-8deg) scale(1.1)}100%{opacity:0;transform:translate(4px,-62px) rotate(6deg) scale(.9)}} .rpgAcceptedSpeech{top:6px;bottom:auto} #rpgAcceptedTalkBtn,#rpgGoFormationBtn{width:100%;min-height:48px} .rpgQuestBubble{position:absolute;right:0;bottom:calc(100% + 8px);min-width:180px;max-width:260px;padding:9px 11px;border-radius:13px;background:#674e5b;color:#fff;font-size:10px;font-weight:900;line-height:1.4;box-shadow:0 8px 18px rgba(69,42,54,.22);z-index:20;opacity:0;transform:translateY(5px);transition:.18s ease;pointer-events:none} .rpgQuestBubble.show{opacity:1;transform:translateY(0)} .rpgQuestBubble::after{content:'';position:absolute;right:22px;bottom:-6px;width:12px;height:12px;background:#674e5b;transform:rotate(45deg)} .questActions{position:relative} .rpgQuestTake.done{background:#d9d1d5!important;color:#9b8b93!important;border-color:#d0c4c9!important;box-shadow:none!important;cursor:default;opacity:.72} .rpgQuestChangeCard .appModalDesc{line-height:1.6} @media(max-width:390px){.rpgReceptionStage{min-height:350px}.rpgReceptionArt{max-height:300px}.rpgDialogueReceptionStage{min-height:340px}.rpgDialogueReceptionArt{max-height:290px}.rpgAcceptedReceptionStage{min-height:320px}.rpgAcceptedReceptionArt{height:270px}} /* ===== v4.8.38 Battle / Party / Equipment UI ===== */ #rpgEquipmentPage,#rpgPartyStatusPage{background:radial-gradient(circle at 18% 12%,rgba(255,222,202,.55),transparent 29%),radial-gradient(circle at 83% 58%,rgba(221,210,250,.50),transparent 32%),linear-gradient(180deg,#fffaf8 0%,#fff3f7 62%,#f8edf5 100%);color:#5d4855} .rpgEquipmentStage{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:14px;align-items:center;margin:12px 0 16px;padding:14px;border:1px solid #ead7df;border-radius:22px;background:#fff9fc}.rpgEquipmentAvatarWrap{min-height:350px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.rpgEquipmentAvatarWrap img{display:block;width:100%;max-height:390px;object-fit:contain}.rpgEquipmentSlots{display:flex;flex-direction:column;gap:12px}.rpgEquipmentSlot{min-height:104px;border:1px solid #e0cbd4;border-radius:18px;background:#fff;color:#6b5360;padding:10px 6px;font-weight:900}.rpgEquipmentSlot span{display:block;font-size:28px}.rpgEquipmentSlot small{display:block;color:#a18491;font-size:9px;margin:3px 0}.rpgEquipmentSlot b{display:block;font-size:10px;line-height:1.25;word-break:keep-all}.rpgEquipGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.rpgInvGridFull{grid-template-columns:repeat(5,1fr)!important}.rpgInvCell{position:relative}.rpgItemEmoji{display:block;font-size:20px;line-height:1.05;margin-bottom:2px}.rpgItemTinyName{display:block;font-size:6px;line-height:1.12;max-height:2.3em;overflow:hidden}.rpgItemEquippedMark{position:absolute;right:2px;top:2px;font-size:7px;background:#684f5d;color:white;border-radius:999px;padding:2px 4px} .rpgItemDetailCard{max-width:430px}.rpgItemDetailIcon{font-size:48px;text-align:center;margin-bottom:6px}.rpgItemDetailMeta{text-align:center;font-size:10px;font-weight:900;color:#9b7b89;margin:4px 0 12px}.rpgItemDetailBody{padding:12px;border-radius:16px;background:#fff7fa;border:1px solid #ead6df;font-size:11px;font-weight:800;color:#745c68;line-height:1.7;white-space:normal}.rpgItemDetailBody b{color:#5e4654}.rpgItemDetailActions{display:flex;gap:8px;margin-top:14px}.rpgItemDetailActions button{flex:1;min-height:44px;border-radius:13px;border:1px solid #dfc7d2;font-weight:1000}.rpgItemDetailActions .equip{background:#f6dce8;color:#6a4d5b}.rpgItemDetailActions .unequip{background:#fff0df;color:#795b45}.rpgItemDetailActions .close{background:#f3edf1;color:#745d68}.rpgItemDetailActions button:disabled{opacity:.38} .rpgPartyMemberList{display:grid;gap:10px;margin:12px 0}.rpgPartyMemberCard{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;text-align:left;width:100%;border:1px solid #ead6df;border-radius:20px;background:#fff9fc;padding:10px;color:#674f5c}.rpgPartyMemberCard img{width:92px;height:110px;object-fit:contain}.rpgPartyMemberCard h3{margin:0 0 3px;font-size:16px}.rpgPartyMemberMeta{font-size:9px;font-weight:850;line-height:1.65;color:#8d7380}.rpgPartyMemberBars{display:grid;gap:4px;margin-top:6px}.rpgPartyMemberBar{height:8px;border-radius:99px;background:#eadfe4;overflow:hidden}.rpgPartyMemberBar i{display:block;height:100%;border-radius:99px}.rpgPartyMemberBar.hp i{background:#df7897}.rpgPartyMemberBar.mp i{background:#8f91d8}.rpgPartyDetail{margin:10px 0 20px}.rpgPartyDetailGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}.rpgPartyDetailGrid div{padding:8px;border-radius:12px;background:#fff;border:1px solid #eddce4;font-size:8px}.rpgPartyDetailGrid b{display:block;color:#9b7b88;margin-bottom:2px}.rpgPartyDetailGrid strong{font-size:11px;color:#634c59}.rpgPartyReadOnly{margin-top:8px;padding:8px;border-radius:12px;background:#f7eef3;color:#8e7280;font-size:8px;font-weight:900} .rpgAutoBattleRow{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;padding:6px 7px;border-radius:12px;border:1px solid #e6d2dc;background:#fff8fb;color:#806471;font-size:8px;font-weight:1000}.rpgAutoSwitch{position:relative;width:38px;height:22px;border:0;padding:0;border-radius:99px;background:#d9cbd1}.rpgAutoSwitch i{position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(60,40,50,.22);transition:.16s}.rpgAutoSwitch.on{background:#d886a6}.rpgAutoSwitch.on i{left:19px}.rpgCombatUnit.targetable{touch-action:manipulation}.rpgBattleAction{touch-action:manipulation} @media(max-width:420px){.rpgEquipmentStage{grid-template-columns:minmax(0,1fr) 92px}.rpgEquipmentAvatarWrap{min-height:300px}.rpgEquipmentAvatarWrap img{max-height:340px}.rpgPartyMemberCard{grid-template-columns:76px 1fr}.rpgPartyMemberCard img{width:76px;height:94px}} /* ===== v4.8.38 battle floor + foreground objects ===== */ .rpgBattleStage{ background:transparent!important; } .rpgBattleStage::after{ height:42%!important; background:linear-gradient(180deg,rgba(16,10,14,0) 0%,rgba(16,10,14,.10) 36%,rgba(16,10,14,.22) 70%,rgba(16,10,14,.34) 100%)!important; } .rpgBattleFloorWrap{ position:absolute; z-index:1; left:50%; bottom:10px; width:96%; height:64%; transform:translateX(-50%); pointer-events:none; display:flex; align-items:flex-end; justify-content:center; } #rpgBattleFloorAsset{ width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 18px 18px rgba(0,0,0,.18)); user-select:none; } .rpgBattleGridPlane{ z-index:3!important; left:9%!important; right:9%!important; top:96px!important; height:212px!important; gap:4px!important; transform:perspective(520px) rotateX(58deg) rotateZ(-8deg)!important; transform-origin:center center!important; } .rpgBattleGridCell{ background:rgba(255,255,255,.07)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important; } .rpgBattleGridCell.partyZone{background:rgba(122,227,230,.07)!important} .rpgBattleGridCell.enemyZone{background:rgba(255,135,157,.07)!important} #rpgBattleUnits{ position:absolute; inset:0; z-index:4; } .rpgBattleDecorLayer{ position:absolute; inset:0; z-index:5; pointer-events:none; } .rpgBattleDecorItem{ position:absolute; bottom:8px; width:38%; max-width:176px; pointer-events:none; user-select:none; filter:drop-shadow(0 10px 18px rgba(0,0,0,.26)); } .rpgBattleDecorItem.left{left:-8px} .rpgBattleDecorItem.right{right:-10px} .rpgBattleDecorItem img{ width:100%; height:auto; display:block; } .rpgBattleDecorItem.scale-lg{width:42%;max-width:188px} .rpgBattleDecorItem.scale-md{width:34%;max-width:158px} .rpgBattleDecorItem.lift-sm{bottom:18px} .rpgBattleDecorItem.lift-md{bottom:32px} .rpgBattleDecorItem.push-in{transform:translateX(8px)} .rpgBattleDecorItem.push-in-right{transform:translateX(-8px)} @media(max-width:390px){ .rpgBattleFloorWrap{width:98%;height:60%} .rpgBattleGridPlane{left:7%!important;right:7%!important;top:104px!important;height:198px!important} .rpgBattleDecorItem.scale-lg{width:40%;max-width:164px} .rpgBattleDecorItem.scale-md{width:32%;max-width:146px} } /* ===== v4.8.38 battle floor size/placement pass 1 ===== */ .rpgBattleStage{ min-height:420px!important; overflow:hidden!important; } /* ์ „ํˆฌ ๋ฐ”๋‹ฅ์„ ํ™”๋ฉด ์•ˆ์—์„œ ํ›จ์”ฌ ํฌ๊ฒŒ ์‚ฌ์šฉ */ .rpgBattleFloorWrap{ left:50%!important; bottom:-8px!important; width:126%!important; height:82%!important; transform:translateX(-50%)!important; align-items:flex-end!important; } #rpgBattleFloorAsset{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center bottom!important; transform:scale(1.06)!important; transform-origin:center bottom!important; filter:drop-shadow(0 20px 22px rgba(0,0,0,.20))!important; } /* ๊ฒฉ์ž๋Š” ํ™•๋Œ€๋œ ๋ฐ”๋‹ฅ์˜ ์‹ค์ œ ํ”Œ๋ ˆ์ด ๊ณต๊ฐ„ ์œ„์— ์•ˆ์ฐฉ */ .rpgBattleGridPlane{ left:8%!important; right:8%!important; top:112px!important; height:216px!important; gap:4px!important; transform:perspective(560px) rotateX(58deg) rotateZ(-8deg) scale(1.03)!important; transform-origin:center center!important; } /* ์ „๊ฒฝ ์˜ค๋ธŒ์ ํŠธ๋Š” ํŒŒํ‹ฐ UI ์ƒ๋‹จ์„ ๊ฐ์‹ธ๋Š” ํ”„๋ ˆ์ž„ ์—ญํ•  */ .rpgBattleDecorItem{ bottom:-2px!important; filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))!important; } .rpgBattleDecorItem.left{ left:-18px!important; } .rpgBattleDecorItem.right{ right:-20px!important; } .rpgBattleDecorItem.scale-lg{ width:47%!important; max-width:205px!important; } .rpgBattleDecorItem.scale-md{ width:38%!important; max-width:174px!important; } .rpgBattleDecorItem.lift-sm{ bottom:12px!important; } .rpgBattleDecorItem.lift-md{ bottom:24px!important; } .rpgBattleDecorItem.push-in{ transform:translateX(12px)!important; } .rpgBattleDecorItem.push-in-right{ transform:translateX(-12px)!important; } /* ์˜ค๋ธŒ์ ํŠธ๊ฐ€ ์œ ๋‹›์„ ๋„ˆ๋ฌด ๊ฐ€๋ฆฌ์ง€ ์•Š๊ฒŒ ๊ฐ€์šด๋ฐ ์˜์—ญ์€ ๋น„์šฐ๋Š” ๋Š๋‚Œ */ .rpgBattleDecorLayer{ overflow:visible!important; } /* ๋ชจ๋ฐ”์ผ ์†Œํ˜• ํญ ๋ณด์ • */ @media(max-width:390px){ .rpgBattleStage{ min-height:402px!important; } .rpgBattleFloorWrap{ width:132%!important; height:80%!important; bottom:-10px!important; } #rpgBattleFloorAsset{ transform:scale(1.08)!important; } .rpgBattleGridPlane{ left:6%!important; right:6%!important; top:114px!important; height:202px!important; transform:perspective(520px) rotateX(58deg) rotateZ(-8deg) scale(1.02)!important; } .rpgBattleDecorItem.scale-lg{ width:45%!important; max-width:182px!important; } .rpgBattleDecorItem.scale-md{ width:36%!important; max-width:158px!important; } } /* ===== v4.8.38 full-floor background pass ===== */ /* ์‚ฌ๋ƒฅํ„ฐ/์ „ํˆฌ ํŽ˜์ด์ง€๋Š” ํ•˜๋Š˜ ํ’๊ฒฝ ๋Œ€์‹  ์‹œ๊ฐ„๋Œ€๋ณ„ ์ „์žฅ ๋ฐ”๋‹ฅ ์ž์ฒด๋ฅผ ๋ฐฐ๊ฒฝ์œผ๋กœ ์‚ฌ์šฉ */ #rpgFieldPage, #rpgBattlePage{ --rpg-full-floor:none; background-color:#416d55!important; background-image: linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(12,9,11,.03) 46%,rgba(8,5,7,.30) 72%,rgba(7,4,6,.82) 100%), var(--rpg-full-floor)!important; background-size:100% 100%, cover!important; background-position:center top, center center!important; background-repeat:no-repeat!important; } /* ๊ธฐ์กด ํ’๊ฒฝ ๋ฐฐ๊ฒฝ ๋ณ€์ˆ˜๋Š” ์ด๋ฒˆ ํŽ˜์ด์ง€๋“ค์—์„œ๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ */ #rpgFieldPage, #rpgBattlePage{ --rpg-meadow-image:none!important; } /* ์ „ํˆฌ ํŽ˜์ด์ง€์˜ ๋ณ„๋„ ๋ฐ”๋‹ฅ ๋ ˆ์ด์–ด๋Š” ์ œ๊ฑฐ: ๋ฐฐ๊ฒฝ ์ž์ฒด๊ฐ€ ์ „์žฅ ๋ฐ”๋‹ฅ */ #rpgBattlePage .rpgBattleFloorWrap{ display:none!important; } /* ์‚ฌ๋ƒฅํ„ฐ ๋‚ด๋ถ€ ์žฅ๋ฉด ๋ฐ•์Šค๋„ ๋ณ„๋„ ํ’๊ฒฝ ์—†์ด ํŽ˜์ด์ง€ ๋ฐฐ๊ฒฝ์ด ๊ทธ๋Œ€๋กœ ๋ณด์ด๊ฒŒ */ #rpgFieldPage .rpgScene{ background:rgba(255,255,255,.025)!important; border-color:rgba(255,255,255,.22)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* ์ „ํˆฌ ์˜์—ญ๋„ ์™„์ „ ํˆฌ๋ช… */ #rpgBattlePage .rpgBattleStage{ background:transparent!important; border-color:rgba(255,255,255,.20)!important; } /* ์ƒˆ ์ „์žฅ ๋ฐฐ๊ฒฝ์˜ ์ค‘์•™ ํ‰์ง€์— ๋งž์ถ˜ 7x3 ๊ฒฉ์ž */ #rpgBattlePage .rpgBattleGridPlane{ left:7%!important; right:7%!important; top:112px!important; height:220px!important; grid-template-columns:repeat(3,minmax(0,1fr)) .48fr repeat(3,minmax(0,1fr))!important; transform:perspective(620px) rotateX(54deg) rotateZ(-7deg) scale(1.04)!important; transform-origin:center center!important; } #rpgBattlePage .rpgBattleGridCell{ background:rgba(255,255,255,.055)!important; border-color:rgba(255,255,255,.55)!important; } #rpgBattlePage .rpgBattleGridCell.partyZone{ background:rgba(101,223,226,.065)!important; border-color:rgba(150,239,236,.66)!important; } #rpgBattlePage .rpgBattleGridCell.enemyZone{ background:rgba(255,121,151,.065)!important; border-color:rgba(255,161,181,.70)!important; } /* ์ „๊ฒฝ ์˜ค๋ธŒ์ ํŠธ๋Š” ์œ ์ง€ํ•˜๋˜ ์ „์žฅ ๊ฐ€์žฅ์ž๋ฆฌ ํ”„๋ ˆ์ž„์ฒ˜๋Ÿผ ๋ฐฐ์น˜ */ #rpgBattlePage .rpgBattleDecorItem{ bottom:-6px!important; } #rpgBattlePage .rpgBattleDecorItem.left{ left:-20px!important; } #rpgBattlePage .rpgBattleDecorItem.right{ right:-22px!important; } #rpgBattlePage .rpgBattleDecorItem.scale-lg{ width:44%!important; max-width:196px!important; } #rpgBattlePage .rpgBattleDecorItem.scale-md{ width:36%!important; max-width:166px!important; } /* ํ•˜๋‹จ UI ์‹œ์ž‘๋ถ€ํ„ฐ ์–ด๋‘์›Œ์ง€๊ณ  ๋๊นŒ์ง€ ์ด์–ด์ง€๊ฒŒ */ #rpgFieldPage::before, #rpgBattlePage::before{ background:linear-gradient( 180deg, rgba(7,4,6,0) 0%, rgba(7,4,6,0) 54%, rgba(7,4,6,.10) 61%, rgba(7,4,6,.30) 70%, rgba(7,4,6,.55) 80%, rgba(7,4,6,.76) 90%, rgba(7,4,6,.91) 100% )!important; } /* ์ž‘์€ ๋ชจ๋ฐ”์ผ์—์„œ ๋ฐฐ๊ฒฝ์ด ๋„ˆ๋ฌด ํ™•๋Œ€๋˜์–ด ์ค‘์•™์ด ์ž˜๋ฆฌ์ง€ ์•Š๋„๋ก */ @media(max-width:390px){ #rpgFieldPage, #rpgBattlePage{ background-size:100% 100%, auto 100%!important; background-position:center top, center top!important; } #rpgBattlePage .rpgBattleGridPlane{ left:5%!important; right:5%!important; top:114px!important; height:204px!important; transform:perspective(560px) rotateX(54deg) rotateZ(-7deg) scale(1.02)!important; } } /* ===== v4.8.38 full-floor visible-panel fix ===== */ /* ํŽ˜์ด์ง€ ์ž์ฒด๋Š” ์•ฑ ๋ฐฐ๊ฒฝ๋งŒ ๋‹ด๋‹น */ #rpgFieldPage, #rpgBattlePage{ background:#f8e9ef!important; background-image:none!important; } /* ์‹ค์ œ ๋ณด์ด๋Š” ์‚ฌ๋ƒฅํ„ฐ/์ „ํˆฌ ๋ฐ•์Šค์— ์‹œ๊ฐ„๋Œ€๋ณ„ ์ „์žฅ ์ด๋ฏธ์ง€๋ฅผ ์ง์ ‘ ์ ์šฉ */ #rpgFieldPage .rpgScene, #rpgBattlePage .rpgBattleStage{ position:relative!important; background-color:#4f7a61!important; background-image:var(--rpg-full-floor)!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; overflow:hidden!important; } /* ์ดˆ๋ก fallback์ด ์ด๋ฏธ์ง€ ์œ„๋ฅผ ๋ฎ์ง€ ์•Š๋„๋ก ๊ฐ•์ œ ์ œ๊ฑฐ */ #rpgFieldPage .rpgScene{ box-shadow:none!important; } #rpgBattlePage .rpgBattleStage{ box-shadow:none!important; } /* ๋ณ„๋„ ์ „ํˆฌ ๋ฐ”๋‹ฅ ๋ ˆ์ด์–ด๋Š” ๊ณ„์† ๋น„ํ™œ์„ฑํ™” */ #rpgBattlePage .rpgBattleFloorWrap{ display:none!important; } /* ์ „ํˆฌ/์‚ฌ๋ƒฅํ„ฐ ๋ฐ•์Šค ์•ˆ์ชฝ ํ•˜๋‹จ์—๋งŒ ๊ทธ๋ผ๋ฐ์ด์…˜ */ #rpgFieldPage .rpgScene::after, #rpgBattlePage .rpgBattleStage::after{ content:""!important; display:block!important; position:absolute!important; z-index:2!important; left:0!important; right:0!important; bottom:0!important; height:48%!important; pointer-events:none!important; background:linear-gradient( 180deg, rgba(7,4,6,0) 0%, rgba(7,4,6,.08) 28%, rgba(7,4,6,.22) 52%, rgba(7,4,6,.46) 74%, rgba(7,4,6,.72) 100% )!important; } /* ๊ฒฉ์ž์™€ ์œ ๋‹›์€ ๋ฐฐ๊ฒฝ/๊ทธ๋ผ๋ฐ์ด์…˜ ์œ„ */ #rpgBattlePage .rpgBattleGridPlane{ z-index:4!important; } #rpgBattlePage #rpgBattleUnits{ z-index:5!important; } #rpgBattlePage .rpgBattleDecorLayer{ z-index:6!important; } #rpgBattlePage .rpgBattleLogPanel{ z-index:7!important; } /* ์ƒˆ ์ „์žฅ ์ค‘์•™ ํ‰์ง€์— ๋งž์ถฐ ๊ฒฉ์ž ์žฌ์•ˆ์ฐฉ */ #rpgBattlePage .rpgBattleGridPlane{ left:7%!important; right:7%!important; top:112px!important; height:220px!important; transform:perspective(620px) rotateX(54deg) rotateZ(-7deg) scale(1.04)!important; transform-origin:center center!important; } /* ์‚ฌ๋ƒฅํ„ฐ ์ชฝ๋„ ๋ฐ”๋‹ฅ ์ด๋ฏธ์ง€๊ฐ€ ์ž˜ ๋ณด์ด๋„๋ก */ #rpgFieldPage .rpgScene{ min-height:300px!important; } /* ์ „ํˆฌ ์Šคํ…Œ์ด์ง€๋Š” ์‚ด์ง ๋” ํฌ๊ฒŒ */ #rpgBattlePage .rpgBattleStage{ min-height:420px!important; } @media(max-width:390px){ #rpgFieldPage .rpgScene{ min-height:285px!important; background-size:auto 100%!important; background-position:center center!important; } #rpgBattlePage .rpgBattleStage{ min-height:404px!important; background-size:auto 100%!important; background-position:center center!important; } #rpgBattlePage .rpgBattleGridPlane{ left:5%!important; right:5%!important; top:114px!important; height:204px!important; transform:perspective(560px) rotateX(54deg) rotateZ(-7deg) scale(1.02)!important; } } /* ===== v4.8.38 floor background IMG-layer hard fix ===== */ #rpgFieldPage .rpgScene, #rpgBattlePage .rpgBattleStage{ position:relative!important; background:#263c31!important; background-image:none!important; overflow:hidden!important; isolation:isolate; } .rpgFloorBackgroundImage{ position:absolute; z-index:0; left:50%; top:50%; width:100%; height:100%; object-fit:cover; object-position:center center; transform:translate(-50%,-50%) scale(1.20); transform-origin:center center; pointer-events:none; user-select:none; -webkit-user-drag:none; filter:saturate(.98) contrast(1.02); } /* ์‚ฌ๋ƒฅํ„ฐ๋Š” ์ง€ํ˜•์„ ๋” ํฌ๊ฒŒ ์žก์•„ ๋นˆ ํˆฌ๋ช… ์™ธ๊ณฝ ์ตœ์†Œํ™” */ #rpgFieldFloorBg{ transform:translate(-50%,-50%) scale(1.36); } /* ์ „ํˆฌ ํ™”๋ฉด์€ ๊ฒฉ์ž์™€ ๋งž๋„๋ก ์•ฝ๊ฐ„ ๋œ ํ™•๋Œ€ */ #rpgBattleFloorBg{ transform:translate(-50%,-50%) scale(1.28); } /* ๋ฐฐ๊ฒฝ๋ณด๋‹ค ๋ชจ๋“  ์‹ค์ œ UI๋ฅผ ์œ„๋กœ */ #rpgFieldPage .rpgCombatFormation{z-index:5!important} #rpgBattlePage .rpgBattleLogPanel{z-index:8!important} #rpgBattlePage .rpgBattleGridPlane{z-index:4!important} #rpgBattlePage #rpgBattleUnits{z-index:5!important} #rpgBattlePage .rpgBattleDecorLayer{z-index:6!important} /* ๊ธฐ์กด CSS ๋ณ€์ˆ˜ ๋ฐฐ๊ฒฝ ๊ฐ•์ œ ์ฐจ๋‹จ */ #rpgFieldPage .rpgScene, #rpgBattlePage .rpgBattleStage{ --rpg-full-floor:none!important; } /* ํ•˜๋‹จ ์Œ์˜์€ ์ด๋ฏธ์ง€ ์œ„, ์œ ๋‹›/๊ฒฉ์ž ์•„๋ž˜ */ #rpgFieldPage .rpgScene::after, #rpgBattlePage .rpgBattleStage::after{ z-index:2!important; } /* ์ „ํˆฌ ์ „์šฉ ๋ณ„๋„ ๋ฐ”๋‹ฅ ๋ ˆ์ด์–ด๋Š” ๊ณ„์† ์ œ๊ฑฐ */ #rpgBattlePage .rpgBattleFloorWrap{display:none!important} @media(max-width:390px){ #rpgFieldFloorBg{ width:112%; height:112%; transform:translate(-50%,-50%) scale(1.34); } #rpgBattleFloorBg{ width:108%; height:108%; transform:translate(-50%,-50%) scale(1.26); } } /* ===== v4.8.38 Field1 full-screen background ===== */ #rpgFieldPage, #rpgBattlePage{ position:relative!important; isolation:isolate!important; min-height:100vh!important; background:transparent!important; background-color:transparent!important; background-image:none!important; } .rpgFullPageFieldBg{ position:absolute; z-index:-2; top:0;left:0;right:0; width:100%; height:100svh; min-height:100svh; max-height:100svh; object-fit:cover; object-position:center center; pointer-events:none; user-select:none; -webkit-user-drag:none; } #rpgFieldFloorBg, #rpgBattleFloorBg, #rpgBattleFloorWrap{ display:none!important; } #rpgFieldPage .rpgScene, #rpgBattlePage .rpgBattleStage{ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; --rpg-full-floor:none!important; --rpg-meadow-image:none!important; } #rpgFieldPage .content, #rpgBattlePage .content{ position:relative!important; z-index:1!important; } #rpgFieldPage::before, #rpgBattlePage::before{ z-index:-1!important; background:linear-gradient( 180deg, rgba(8,5,7,0) 0%, rgba(8,5,7,0) 52%, rgba(8,5,7,.08) 60%, rgba(8,5,7,.26) 70%, rgba(8,5,7,.48) 80%, rgba(8,5,7,.70) 90%, rgba(8,5,7,.86) 100% )!important; } #rpgFieldPage .rpgScene::after, #rpgBattlePage .rpgBattleStage::after{ content:none!important; display:none!important; } #rpgBattlePage .rpgBattleGridPlane{z-index:3!important} #rpgBattlePage #rpgBattleUnits{z-index:4!important} #rpgBattlePage .rpgBattleDecorLayer{z-index:5!important} #rpgBattlePage .rpgBattleLogPanel{z-index:7!important} #rpgFieldPage .rpgScene{min-height:300px!important} #rpgBattlePage .rpgBattleStage{min-height:420px!important} @media(max-width:480px){ .rpgFullPageFieldBg{ object-fit:cover; object-position:center center; } } /* ===== v4.8.38 male adventurer battle art sample ===== */ .rpgBattleUnit2D.playerBattleArt{ width:96px!important; min-height:124px!important; } .rpgBattleUnit2D.playerBattleArt .rpgBattleUnitSprite{ height:92px!important; overflow:visible!important; align-items:flex-end!important; } .rpgPlayerBattleSpriteWrap{ position:relative; width:90px; height:96px; display:flex; align-items:flex-end; justify-content:center; transform:rotateY(0deg); transform-origin:50% 60%; transform-style:preserve-3d; will-change:transform; } .rpgPlayerBattleSprite{ display:block; width:auto!important; height:auto!important; max-width:92px!important; max-height:96px!important; object-fit:contain!important; object-position:center bottom!important; filter:drop-shadow(0 7px 5px rgba(35,20,27,.30))!important; backface-visibility:hidden; -webkit-backface-visibility:hidden; pointer-events:none; user-select:none; } .rpgBattleUnit2D.playerBattleArt .shadow{ left:20px!important; right:20px!important; bottom:29px!important; height:9px!important; } .rpgBattleUnit2D.playerBattleArt .rpgBattleUnitName2D{ margin-top:-2px!important; } .rpgPlayerBattleSpriteWrap.attackFlash{ filter:drop-shadow(0 0 10px rgba(122,197,255,.55)); } @media(max-width:390px){ .rpgBattleUnit2D.playerBattleArt{width:88px!important;min-height:116px!important} .rpgPlayerBattleSpriteWrap{width:82px;height:88px} .rpgPlayerBattleSprite{max-width:84px!important;max-height:88px!important} } /* ===== v4.8.38 female adventurer + grid anchor fix ===== */ .rpgBattleUnit2D.playerBattleArt{width:82px!important;min-height:112px!important} .rpgBattleUnit2D.playerBattleArt .rpgBattleUnitSprite{height:82px!important} .rpgPlayerBattleSpriteWrap{width:80px!important;height:86px!important} .rpgPlayerBattleSprite{max-width:82px!important;max-height:86px!important} .rpgBattleUnit2D{width:62px!important} .rpgBattleUnitName2D{max-width:68px!important} .rpgBattleMiniBars{width:54px!important} #rpgBattlePage .rpgBattleGridPlane{ grid-template-columns:repeat(3,minmax(0,1fr)) .72fr repeat(3,minmax(0,1fr))!important; } @media(max-width:390px){ .rpgBattleUnit2D.playerBattleArt{width:76px!important;min-height:105px!important} .rpgPlayerBattleSpriteWrap{width:74px!important;height:80px!important} .rpgPlayerBattleSprite{max-width:76px!important;max-height:80px!important} } /* Wolf PNG in-battle overlays v4.9.36 */ /* v4.9.39: Preserve absolute battlefield unit coordinates; overlays use the unit as positioning context. */ #rpgBattleUnits [data-battle-enemy],#rpgBattleUnits [data-party-unit]{position:absolute!important} #rpgBattleUnits .gwWolfBoss4935{position:absolute!important} #rpgBattleUnits .gwWolfSprite4936{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:190px!important;height:190px!important;max-width:none!important;max-height:none!important;object-fit:contain!important;transform:translate(-50%,-50%)!important;animation:gwWolfSpriteFade4939 .24s ease-out both!important} @keyframes gwWolfSpriteFade4939{from{opacity:.5}to{opacity:1}} #rpgBattleUnits .gwWolfHit4936{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:120px!important;height:120px!important;transform:translate(-50%,-50%)!important} /* removed misplaced relative positioning on enemy units v4.9.39 */ .gwWolfSprite4936{position:absolute;inset:-10%;width:120%;height:120%;object-fit:contain;z-index:5;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(0,0,0,.22));animation:gwWolfSpritePop4936 .3s ease-out both} /* removed misplaced relative positioning on party units v4.9.39 */ .gwWolfHit4936{position:absolute;inset:-32%;width:164%;height:164%;object-fit:contain;z-index:12;pointer-events:none;animation:gwWolfHitPop4936 .5s ease-out both} @keyframes gwWolfHitPop4936{0%{opacity:0;transform:scale(.55)}25%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.22)}} @keyframes gwWolfSpritePop4936{0%{opacity:.5;transform:translateX(9px) scale(.97)}100%{opacity:1;transform:none}} /* v4.9.41: exclusive Wolf King illustration; legacy image is hidden, not drawn beneath motion */ #rpgBattleUnits [data-battle-enemy].gwWolfSingleArt4941 .rpgBattleUnitSprite{display:none!important} #rpgBattleUnits [data-battle-enemy].gwWolfSingleArt4941 > .gwWolfSprite4936{visibility:visible!important;z-index:8!important} #rpgBattleUnits [data-battle-enemy].gwWolfSingleArt4941 .shadow{opacity:.28} /* v4.9.43: replace image inside original sprite slot, no overlay */ #rpgBattleUnits [data-battle-enemy].gwWolfBoss4935 .rpgBattleUnitSprite{display:flex!important;visibility:visible!important;opacity:1!important} #rpgBattleUnits [data-battle-enemy].gwWolfBoss4935 .rpgBattleUnitSprite img{display:block!important;visibility:visible!important;opacity:1!important;object-fit:contain!important} #rpgBattleUnits [data-battle-enemy] > .gwWolfSprite4936{display:none!important} @keyframes gwWolfStep4943{0%{transform:translateX(0) scale(1)}35%{transform:translateX(-14px) scale(1.055)}65%{transform:translateX(-14px) scale(1.055)}100%{transform:translateX(0) scale(1)}} /* from css/002_inline.css */ /* ===== v4.8.38 Character / Inventory / Inn ===== */ .rpgGenderArtGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.rpgGenderArtBtn{position:relative;min-height:260px;border-radius:20px;border:1px solid #e9d3dd;background:#fff9fc;overflow:hidden;padding:0;color:#684f5d;font-weight:1000}.rpgGenderArtBtn img{width:100%;height:220px;object-fit:contain;display:block;padding:8px}.rpgGenderArtBtn b{display:block;padding:8px}.rpgGenderArtBtn.active{background:#f7e7ef;border-color:#d79eb6;box-shadow:0 0 0 2px rgba(215,158,182,.16)} .rpgCharacterMenu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.rpgCharacterMenu button{min-height:110px;border:1px solid #ead6df;border-radius:20px;background:#fff8fb;font-size:14px;font-weight:1000;color:#674f5b}.rpgCharacterMenu strong{display:block;font-size:30px;margin-bottom:7px} .rpgInventoryTabs{display:flex;gap:8px;margin:10px 0}.rpgInventoryTab{flex:1;border:1px solid #e5d2db;border-radius:12px;background:#fff8fb;padding:10px;font-weight:1000;color:#755d69}.rpgInventoryTab.active{background:#efd8e3;border-color:#d49ab2}.rpgInventoryLayout{display:grid;grid-template-columns:42% 1fr;gap:10px;align-items:start}.rpgAvatarEquip{position:relative;border:1px solid #ead7df;border-radius:20px;background:#fff8fb;min-height:390px;padding:10px;overflow:hidden}.rpgAvatarEquip img{width:100%;height:340px;object-fit:contain}.rpgEquipMiniSlots{position:absolute;right:8px;top:8px;display:grid;gap:7px}.rpgEquipMiniSlot{width:58px;height:58px;border-radius:13px;border:1px solid #d8bdc8;background:rgba(255,255,255,.94);font-size:8px;font-weight:1000;color:#715966;padding:4px}.rpgEquipMiniSlot b{display:block;font-size:17px}.rpgInvGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.rpgInvCell{aspect-ratio:1;border-radius:10px;border:1px solid #e5d4dc;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:3px;font-size:6px;font-weight:900;color:#6e5662;overflow:hidden}.rpgInvCell.filled{background:#fff7fb;border-color:#d7b7c4;cursor:pointer}.rpgInvCell.rare{border:2px solid #6ea9e8}.rpgInvCell.elite{border:2px solid #9a68d4}.rpgInvHint{font-size:8px;color:#947985;text-align:center;margin-top:8px;line-height:1.5}.rpgCurrentHp{font-size:10px;font-weight:1000;color:#745966;margin-bottom:8px}.rpgShopRebuy{max-height:390px;overflow:auto}.rpgShopTab[data-shop-tab="rebuy"]{flex:.85}.rpgMerchantStage .rpgMerchantName{display:none}.rpgInnStage{position:relative;min-height:480px;padding-top:100px;display:flex;align-items:flex-end;justify-content:center}.rpgInnArt{max-width:100%;max-height:430px;object-fit:contain}.rpgInnBubble{position:absolute;top:20px;left:8%;right:8%;padding:14px 16px;border-radius:19px;background:#fff;border:1px solid #e5d1da;box-shadow:0 8px 20px rgba(90,60,75,.13);font-weight:1000;color:#654e59;text-align:center;z-index:2}.rpgInnActions{display:grid;gap:9px;margin:12px 0}.rpgInnActions button{padding:13px;border:0;border-radius:14px;background:#df9eb7;color:white;font-weight:1000}.rpgInnActions button.secondary{background:#eee3e8;color:#735c67}.rpgMiniModal{position:fixed;inset:0;background:rgba(30,20,26,.45);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}.rpgMiniModal.show{display:flex}.rpgMiniModalCard{width:min(390px,100%);background:#fff;border-radius:22px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.25);color:#644f5a}.rpgMiniModalCard h3{margin:0 0 8px}.rpgMiniModalActions{display:flex;gap:8px;margin-top:14px}.rpgMiniModalActions button{flex:1;padding:11px;border:0;border-radius:12px;font-weight:1000}.rpgMiniModalActions .ok{background:#d996b1;color:#fff}.rpgMiniModalActions .cancel{background:#eee5e9;color:#6d5862} @media(max-width:390px){.rpgGenderArtBtn{min-height:220px}.rpgGenderArtBtn img{height:180px}.rpgInventoryLayout{grid-template-columns:1fr}.rpgAvatarEquip{min-height:330px}.rpgAvatarEquip img{height:290px}.rpgInvGrid{grid-template-columns:repeat(5,1fr)}} /* ===== v4.8.38 guild relationships / shops / settings ===== */ .homeHeaderActions{display:flex;align-items:center;gap:8px}.homeSettingsBtn{display:flex} .settingsSection{margin:0 0 12px;padding:12px;border-radius:18px;background:#fff;border:1px solid #ecd4df;text-align:left}.settingsSectionTitle{font-size:12px;font-weight:1000;color:#8e6175;letter-spacing:.06em;margin-bottom:6px}.settingsOptionRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 4px}.settingsOptionRow b{display:block;color:#684b59;font-size:13px}.settingsOptionRow small{display:block;margin-top:3px;color:#a1818f;font-size:9px;font-weight:700}.settingsSwitch{width:48px;height:28px;padding:3px;border-radius:999px;border:1px solid #e0c6d1;background:#eadfe4;position:relative}.settingsSwitch i{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(93,61,76,.20);transform:translateX(0);transition:transform .16s ease}.settingsSwitch.on{background:#ef9abb;border-color:#e988af}.settingsSwitch.on i{transform:translateX(20px)}body.diagHidden #diagFloatBtn{display:none!important} .rpgSmithChoice{grid-column:1/-1}.rpgGuildInterior{margin:4px 0 12px;border-radius:22px;overflow:hidden;border:1px solid #ead5df;background:#eee}.rpgGuildInterior img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.rpgGuildTalkMain{margin-top:10px;width:100%} .rpgGuildNpcModalCard{width:min(520px,calc(100% - 24px));max-height:calc(100svh - 44px);overflow:auto}.rpgGuildNpcPicker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.rpgGuildNpcPick{width:100%;min-height:82px;border-radius:18px;border:1px solid #e9d3dd;background:#fff8fb;color:#684f5d;font-weight:1000}.rpgGuildNpcPick b{display:block;font-size:18px}.rpgGuildNpcPick small{display:block;margin-top:4px;color:#a1818f}.rpgGuildNpcPick:disabled{opacity:.45}.rpgGuildNpcDailyNote{min-height:30px;margin:7px 5px 0;color:#9a7888;font-size:9px;line-height:1.45;text-align:center;font-weight:800} .rpgGuildNpcStage{position:relative;margin:10px 0 12px;padding-top:74px;min-height:430px;border-radius:22px;background:linear-gradient(180deg,#fff9fc,#f7edf3);overflow:hidden}.rpgGuildNpcArt{display:block;width:100%;height:430px;object-fit:contain;object-position:center bottom}.rpgGuildNpcSpeech{position:absolute!important;left:14px;right:14px;top:58px;z-index:3;margin:0!important}.rpgGuildNpcName{text-align:center;font-size:15px;font-weight:1000;color:#684f5d;padding:8px 0 12px;background:rgba(255,255,255,.88)}.rpgGuildNpcChoices{display:grid;gap:8px;margin:12px 0}.rpgGuildNpcChoices button{min-height:52px;border-radius:14px;border:1px solid #e6ced8;background:#fff;color:#684f5d;font-weight:900;padding:9px 12px;text-align:left;line-height:1.45} .rpgNpcRelationRow{display:flex;align-items:center;gap:9px;margin:4px 36px 4px 4px}.rpgRelationHeart{font-size:28px;line-height:1;transform-origin:center;animation:rpgHeartBeat 1.2s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.13));transition:color .5s ease}.rpgRelationHeart.burst{animation:rpgHeartBurst .7s ease-out 1,rpgHeartBeat 1.05s ease-in-out .7s infinite}.rpgRelationTrack{height:14px;border-radius:99px;background:#e9e0e4;overflow:hidden;position:relative;flex:1}.rpgRelationTrack i{display:block;height:100%;width:50%;border-radius:99px;transition:width .75s cubic-bezier(.2,.8,.2,1),background-color .55s ease}.rpgRelationTrack em{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.8);transform:translateX(-1px)}@keyframes rpgHeartBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.07)}60%{transform:scale(1)}}@keyframes rpgHeartBurst{0%{transform:scale(1)}25%{transform:scale(1.34)}52%{transform:scale(.94)}75%{transform:scale(1.18)}100%{transform:scale(1)}} .rpgShopItemClickable{cursor:pointer}.rpgShopItemClickable:active{transform:translateY(1px)}.rpgMaterialCard{padding:13px;border-radius:18px;border:1px solid #ead5df;background:#fff9fc;margin-bottom:8px;color:#684f5d}.rpgMaterialTop{display:flex;justify-content:space-between;gap:8px;align-items:center}.rpgMaterialCard button{margin-top:8px;width:100%;min-height:38px;border:0;border-radius:11px;background:#f1dce6;color:#684f5d;font-weight:1000} @media(prefers-reduced-motion:reduce){.rpgRelationHeart{animation:none!important}.rpgRelationTrack i{transition:none}} /* from css/003_v4838-followup-fixes.css */ /* settings alignment / hit area */ .homeSettingsBtn{display:grid!important;place-items:center!important;text-align:center!important;padding:0!important} .homeHeaderActions{flex:0 0 88px;justify-content:flex-end} .homeHeaderRow .homeTitleWrap{padding-left:88px} #settingsModal .settingsPaw{font-size:36px;line-height:1;margin:3px 0 8px} #settingsModal .appModalCard{position:relative} #settingsModal .appModalClose{position:sticky!important;top:0!important;right:auto!important;float:right;z-index:30;margin:-4px -4px -34px 0;width:38px;height:38px;display:grid;place-items:center;line-height:1;cursor:pointer} /* sale quantity controls */ .rpgSellQtyRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid #f0dfe6} .rpgSellQtyControl{display:grid;grid-template-columns:34px minmax(46px,66px) 34px;align-items:center;gap:4px} .rpgSellQtyControl button{width:34px!important;min-height:32px!important;margin:0!important;padding:0!important;border:1px solid #e3cad5!important;border-radius:9px!important;background:#fff!important;color:#725766!important;font-size:17px!important;font-weight:1000!important} .rpgSellQtyInput{width:100%;height:32px;border:1px solid #e3cad5;border-radius:9px;background:#fff9fc;color:#654e5a;text-align:center;font-weight:1000;font-size:13px;padding:0 4px;box-sizing:border-box} .rpgSellQtyAction{display:flex;gap:6px;align-items:center}.rpgSellQtyAction button{margin:0!important;width:auto!important;min-height:34px!important;padding:0 12px!important} .rpgBulkSellBar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 11px;margin:0 0 9px;border-radius:14px;background:#fff3f8;border:1px solid #e9cfd9;color:#755c68;font-size:10px;font-weight:850} .rpgBulkSellBar button{border:0;border-radius:10px;background:#d994b0;color:#fff;font-weight:1000;min-height:36px;padding:0 13px} /* dedicated guild adventurer page */ #rpgGuildNpcPage .screen{padding-bottom:24px} .rpgGuildNpcPageScene{position:relative;min-height:650px;border-radius:24px;overflow:hidden;background:#d9c9c5 center/cover no-repeat;border:1px solid #e5ccd6;box-shadow:0 14px 30px rgba(120,78,97,.14)} .rpgGuildNpcPageShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,27,32,.06),rgba(35,21,28,.25));pointer-events:none} .rpgGuildNpcPageContent{position:relative;z-index:2;min-height:650px;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end} #rpgGuildNpcPage #rpgGuildNpcSelect,#rpgGuildNpcPage #rpgGuildNpcTalk{background:rgba(255,249,252,.88);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.8);border-radius:20px;padding:13px;box-shadow:0 12px 26px rgba(41,23,31,.18)} #rpgGuildNpcPage .rpgGuildNpcPicker{align-items:end} #rpgGuildNpcPage .rpgGuildNpcPick{min-height:300px;position:relative;overflow:hidden;padding:0 8px 12px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,247,251,.94));text-shadow:0 1px #fff} #rpgGuildNpcPage .rpgGuildNpcPick img{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:150%;height:260px;object-fit:contain;object-position:center bottom;pointer-events:none;z-index:0} #rpgGuildNpcPage .rpgGuildNpcPick b,#rpgGuildNpcPage .rpgGuildNpcPick small{position:relative;z-index:2} #rpgGuildNpcPage .rpgGuildNpcDailyNote{color:#7a5564;text-shadow:0 1px rgba(255,255,255,.85);font-weight:900} #rpgGuildNpcPage .rpgNpcRelationRow{margin:2px 2px 8px} #rpgGuildNpcPage .rpgGuildNpcStage{min-height:455px;padding-top:86px;margin:0;background:transparent!important;overflow:visible} #rpgGuildNpcPage .rpgGuildNpcArt{height:390px;max-height:52vh;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 9px 7px rgba(30,18,23,.28));position:relative;z-index:1} #rpgGuildNpcPage .rpgGuildNpcSpeech{display:block!important;visibility:visible!important;opacity:1!important;top:8px!important;left:8px!important;right:8px!important;z-index:8!important;background:rgba(255,255,255,.96)!important;box-shadow:0 8px 20px rgba(65,38,50,.17)!important;min-height:48px} #rpgGuildNpcPage .rpgGuildNpcName{position:relative;z-index:4;border-radius:0 0 14px 14px} #rpgGuildNpcPage .rpgGuildNpcChoices{position:relative;z-index:5} #rpgGuildNpcPage #rpgGuildNpcBackToSelect{background:rgba(255,255,255,.9);color:#684f5d;border-color:#dfc5d1} #rpgGuildNpcModal{display:none!important;pointer-events:none!important} /* quest complete modal */ .rpgQuestCompleteRewardCard{width:min(390px,calc(100% - 28px))}.rpgQuestRewardGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rpgQuestRewardGrid>div{padding:12px;border-radius:15px;background:#fff7fb;border:1px solid #edd6e0;text-align:center}.rpgQuestRewardGrid .wide{grid-column:1/-1}.rpgQuestRewardGrid b{display:block;font-size:9px;color:#9a7888;margin-bottom:5px}.rpgQuestRewardGrid strong{font-size:14px;color:#684d5b} @media(max-width:390px){.homeHeaderRow .homeTitleWrap{padding-left:78px}.homeHeaderActions{flex-basis:78px}#rpgGuildNpcPage .rpgGuildNpcPick{min-height:250px}#rpgGuildNpcPage .rpgGuildNpcPick img{height:215px}.rpgGuildNpcPageScene,.rpgGuildNpcPageContent{min-height:580px}} /* from css/004_gwFieldEntrySafetyFixStyle.css */ /* ์‚ฌ๋ƒฅํ„ฐ ์กฐ์šฐ์šฉ ๊ตฌํ˜• ํฌ์ง€์…˜ ์…€์€ ๋” ์ด์ƒ ๋ Œ๋”๋งํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ „ํˆฌ 7x3 ๊ฒฉ์ž๋Š” ์˜ํ–ฅ ์—†์Œ. */ #rpgCombatParty, #rpgCombatEnemy{ display:none!important; visibility:hidden!important; pointer-events:none!important; } /* from css/005_v4894-npc-bg-clean-style.css */ #rpgNpcPage{background:none!important;background-color:#d9e7ef!important;} #rpgNpcPage>.screen{background:transparent!important;background-image:none!important;} /* from css/006_gwV4927StatsPrayerStyle.css */ .gwPlayerStatsSheet4927{overflow:visible!important}.gwPlayerIdentity4927{display:flex!important;align-items:center;gap:8px;min-width:0}.gwPlayerJobIcon4927{width:36px;height:36px;flex:0 0 36px;border-radius:11px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#f7eaf1);border:1px solid #e7cad7;box-shadow:0 4px 10px rgba(112,73,91,.10)}.gwPlayerJobIcon4927 img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.gwPlayerJobIcon4927.fallback{font-size:21px}.gwDerivedTitle4927{margin:13px 2px 7px;color:#765967;font-size:10px;font-weight:1000;letter-spacing:.08em}.gwStatList4927{display:grid;gap:6px;overflow:visible}.gwStatRow4927{position:relative;overflow:visible}.gwStatRowMain4927{min-height:42px;padding:8px 9px 8px 11px;border-radius:13px;background:#fbf3f7;border:1px solid #eedce5;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;align-items:center;gap:8px}.gwStatRowMain4927 b{font-size:10px;color:#7a5d6c}.gwStatRowMain4927 strong{font-size:13px;color:#5f4855}.gwStatHelp4927{width:24px;height:24px;border:1px solid #ddbccb;border-radius:50%;background:#fff;color:#a36883;font-size:11px;font-weight:1000;padding:0}.gwStatFormula4927{display:none;position:absolute;z-index:90;right:4px;top:calc(100% - 2px);max-width:min(310px,calc(100vw - 70px));padding:9px 11px;border-radius:12px;background:#5b4955;color:#fff;font-size:9px;font-weight:850;line-height:1.5;box-shadow:0 10px 25px rgba(62,37,51,.28)}.gwStatFormula4927.show{display:block}.gwStatFormula4927::before{content:'';position:absolute;right:11px;top:-5px;width:10px;height:10px;background:#5b4955;transform:rotate(45deg)} .gwPrayerRootActions4927{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 8px}.gwPrayerRootActions4927 button,.gwPrayerChoice4927 button{min-height:58px;border:1px solid #e7cbd8;border-radius:16px;background:linear-gradient(180deg,#fff,#fff4f8);color:#654c5a;box-shadow:0 7px 15px rgba(123,76,99,.09);padding:9px 8px}.gwPrayerRootActions4927 button strong,.gwPrayerChoice4927 button strong{display:block;font-size:11px;font-weight:1000}.gwPrayerRootActions4927 button small,.gwPrayerChoice4927 button small{display:block;margin-top:4px;font-size:8px;font-weight:800;color:#9a7888;line-height:1.35}.gwPrayerChoice4927{display:none;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px}.gwPrayerChoice4927.show{display:grid}.gwPrayerChoice4927 button:disabled{opacity:.45;filter:grayscale(.15)} /* from css/007_v4838-guild-cinematic-ui.css */ /* ===== v4.8.38 guild adventurer cinematic dialogue refinement ===== */ #rpgGuildNpcPage .screen{padding-bottom:18px} .rpgGuildNpcPageScene{min-height:650px;background-position:center center!important} .rpgGuildNpcPageShade{background:linear-gradient(180deg,rgba(30,20,26,.04) 0%,rgba(30,20,26,.10) 52%,rgba(22,14,18,.44) 100%)} .rpgGuildNpcPageContent{min-height:650px;padding:10px 12px 14px;justify-content:center!important} /* selection: no cards, character itself is the control */ #rpgGuildNpcPage #rpgGuildNpcSelect{background:transparent!important;backdrop-filter:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;width:100%} .guildNpcSelectScene{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;min-height:540px;padding:18px 8px 8px;box-sizing:border-box} .guildNpcPortraitPick{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end} .guildNpcPortraitBtn{position:relative;width:100%;height:455px;border:0;background:transparent;padding:0;cursor:pointer;overflow:visible;display:flex;align-items:flex-end;justify-content:center} .guildNpcPortraitBtn img{display:block;width:min(118%,310px);height:445px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 12px rgba(27,17,22,.32));transition:transform .18s ease,filter .18s ease;pointer-events:none} .guildNpcPortraitBtn:not(:disabled):active img{transform:scale(.985)} @media(hover:hover) and (pointer:fine){.guildNpcPortraitBtn:not(:disabled):hover img{transform:translateY(-4px) scale(1.025);filter:drop-shadow(0 16px 16px rgba(27,17,22,.38))}} .guildNpcPortraitBtn:disabled{cursor:default;filter:grayscale(.36);opacity:.68} .guildNpcPickName{margin-top:-8px;padding:7px 15px;border-radius:999px;background:rgba(36,24,30,.70);backdrop-filter:blur(5px);color:#fff;font-size:14px;font-weight:1000;text-shadow:0 1px 3px rgba(0,0,0,.35);box-shadow:0 5px 14px rgba(0,0,0,.16)} .guildNpcPickName small{font-size:10px;font-weight:850;opacity:.84;margin-left:4px} #rpgGuildNpcPage .rpgGuildNpcDailyNote{min-height:28px;margin:7px 6px 0;color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.65)!important;font-size:9px;font-weight:900;text-align:center} .guildNpcSelectHint{text-align:center;color:#fff;font-size:10px;font-weight:900;text-shadow:0 2px 5px rgba(0,0,0,.5);margin-top:3px} /* talk: no panel/card shell */ #rpgGuildNpcPage #rpgGuildNpcTalk{position:relative;background:transparent!important;backdrop-filter:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;width:100%;min-height:590px;overflow:hidden} .guildNpcTalkCanvas{position:relative;min-height:590px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 8px 12px;box-sizing:border-box} #rpgGuildNpcPage .rpgNpcRelationRow{position:absolute;z-index:20;top:8px;right:8px;width:min(190px,42%);margin:0!important;padding:6px 9px;border-radius:999px;background:rgba(26,19,23,.52);backdrop-filter:blur(6px);box-shadow:0 5px 16px rgba(0,0,0,.18)} #rpgGuildNpcPage .rpgRelationHeart{font-size:25px} #rpgGuildNpcPage .rpgRelationTrack{height:11px;background:rgba(255,255,255,.32)} #rpgGuildNpcPage .rpgGuildNpcStage{position:relative;width:100%;min-height:535px!important;padding:76px 0 0!important;margin:0!important;display:flex;align-items:flex-start;justify-content:center;background:transparent!important;overflow:hidden!important} #rpgGuildNpcPage .rpgGuildNpcSpeech{position:absolute!important;top:17px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(82%,520px)!important;box-sizing:border-box;display:block!important;visibility:visible!important;opacity:1!important;z-index:24!important;background:rgba(255,255,255,.96)!important;color:#604b56!important;border-radius:18px!important;box-shadow:0 8px 22px rgba(51,31,40,.22)!important;min-height:52px;padding:11px 15px!important;text-align:center!important;font-size:12px!important;line-height:1.5!important;font-weight:900!important} #rpgGuildNpcPage .rpgGuildNpcSpeech::after{content:'';position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-top:11px solid rgba(255,255,255,.96)} .guildNpcPortraitStage{position:relative;width:100%;height:475px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden} #rpgGuildNpcPage .rpgGuildNpcArt{position:relative!important;z-index:3!important;width:min(94%,550px)!important;height:470px!important;max-height:none!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 12px 12px rgba(24,15,19,.32))!important;margin:0!important} .rpgGuildNpcArtBlur{position:absolute;z-index:4;left:50%;bottom:0;transform:translateX(-50%);width:min(94%,550px);height:470px;object-fit:contain;object-position:center bottom;filter:blur(7px);opacity:.52;clip-path:inset(58% 0 0 0);-webkit-mask-image:linear-gradient(to bottom,transparent 53%,rgba(0,0,0,.35) 65%,#000 90%);mask-image:linear-gradient(to bottom,transparent 53%,rgba(0,0,0,.35) 65%,#000 90%);pointer-events:none} .guildNpcLowerFade{position:absolute;z-index:6;left:0;right:0;bottom:0;height:48%;background:linear-gradient(180deg,rgba(28,19,23,0) 0%,rgba(28,19,23,.30) 34%,rgba(23,15,19,.79) 82%,rgba(23,15,19,.93) 100%);pointer-events:none} #rpgGuildNpcPage .rpgGuildNpcName{position:absolute!important;z-index:12!important;left:50%;bottom:122px;transform:translateX(-50%);width:auto!important;min-width:130px;padding:7px 15px!important;border-radius:999px!important;background:rgba(30,20,25,.72)!important;color:#fff!important;font-size:12px!important;font-weight:1000!important;text-align:center!important;text-shadow:0 1px 3px rgba(0,0,0,.45);box-shadow:0 4px 14px rgba(0,0,0,.16)} /* three speech-like player choices in triangular layout */ #rpgGuildNpcPage .rpgGuildNpcChoices{position:absolute!important;z-index:15!important;left:50%;bottom:54px;transform:translateX(-50%);width:min(96%,610px);height:146px;margin:0!important;pointer-events:none} #rpgGuildNpcPage .rpgGuildNpcChoices button{position:absolute;pointer-events:auto;width:46%;min-height:58px;margin:0!important;padding:10px 12px;border:1px solid rgba(255,255,255,.80);border-radius:18px;background:rgba(255,250,252,.94);backdrop-filter:blur(7px);color:#614c57;font-size:10px;line-height:1.38;font-weight:900;text-align:center;box-shadow:0 7px 18px rgba(26,16,21,.21);transition:transform .12s ease,background .12s ease} #rpgGuildNpcPage .rpgGuildNpcChoices button:nth-child(1){top:0;left:27%} #rpgGuildNpcPage .rpgGuildNpcChoices button:nth-child(2){bottom:0;left:1%} #rpgGuildNpcPage .rpgGuildNpcChoices button:nth-child(3){bottom:0;right:1%} #rpgGuildNpcPage .rpgGuildNpcChoices button:active{transform:scale(.975);background:#fff} #rpgGuildNpcPage .rpgGuildNpcChoices button::before{content:'โ€œ';font-size:14px;color:#c78ca5;margin-right:2px} #rpgGuildNpcPage .rpgGuildNpcChoices button::after{content:'โ€';font-size:14px;color:#c78ca5;margin-left:2px} .guildNpcReturnBtn{position:absolute;z-index:30;left:10px;bottom:8px;min-height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.68);border-radius:13px;background:rgba(34,23,28,.68);backdrop-filter:blur(7px);color:#fff;font-size:10px;font-weight:1000;box-shadow:0 5px 15px rgba(0,0,0,.18)} .guildNpcReturnBtn:active{transform:translateY(1px)} /* receptionist: keep click interaction, remove bounce animation */ #rpgReceptionArt.rpgNpcBounce,#rpgDialogueReceptionArt.rpgNpcBounce{animation:none!important;transform:none!important} @media(max-width:520px){ .rpgGuildNpcPageScene,.rpgGuildNpcPageContent{min-height:600px!important} .guildNpcSelectScene{min-height:500px;padding-top:5px} .guildNpcPortraitBtn{height:405px}.guildNpcPortraitBtn img{height:400px;width:128%} #rpgGuildNpcPage #rpgGuildNpcTalk,.guildNpcTalkCanvas{min-height:545px} #rpgGuildNpcPage .rpgGuildNpcStage{min-height:500px!important;padding-top:72px!important} .guildNpcPortraitStage{height:440px} #rpgGuildNpcPage .rpgGuildNpcArt,.rpgGuildNpcArtBlur{height:438px;width:108%!important} #rpgGuildNpcPage .rpgGuildNpcSpeech{top:14px!important;width:88%!important;font-size:11px!important} #rpgGuildNpcPage .rpgNpcRelationRow{top:6px;right:5px;width:38%;padding:5px 7px} #rpgGuildNpcPage .rpgRelationHeart{font-size:21px} #rpgGuildNpcPage .rpgGuildNpcName{bottom:118px} #rpgGuildNpcPage .rpgGuildNpcChoices{bottom:49px;height:141px;width:99%} #rpgGuildNpcPage .rpgGuildNpcChoices button{width:47.5%;font-size:9px;padding:8px 7px} #rpgGuildNpcPage .rpgGuildNpcChoices button:nth-child(1){left:26.25%} } @media(max-width:370px){ .guildNpcPortraitBtn{height:365px}.guildNpcPortraitBtn img{height:360px} #rpgGuildNpcPage .rpgGuildNpcChoices button{font-size:8.5px} #rpgGuildNpcPage .rpgNpcRelationRow{width:35%} } @media(prefers-reduced-motion:reduce){.guildNpcPortraitBtn img,#rpgGuildNpcPage .rpgGuildNpcChoices button{transition:none!important}} /* from css/008_v4838-guild-cinematic-ui-hotfix.css */ /* ===== v4.8.38 cinematic dialogue layout hotfix ===== */ #rpgGuildNpcPage #rpgGuildNpcTalk{overflow:visible!important} .guildNpcTalkCanvas{padding:0!important;min-height:590px!important} /* Relation meter stays visible above the NPC speech bubble. */ #rpgGuildNpcPage .rpgNpcRelationRow{ top:8px!important;right:12px!important;left:auto!important; width:145px!important;z-index:40!important; padding:6px 9px!important; background:rgba(24,18,22,.66)!important; border:1px solid rgba(255,255,255,.28)!important; box-shadow:0 5px 16px rgba(0,0,0,.22)!important; } #rpgGuildNpcPage .rpgRelationHeart{font-size:25px!important;line-height:1!important;flex:0 0 auto} #rpgGuildNpcPage .rpgRelationTrack{height:11px!important;min-width:82px} /* Move NPC speech below the relation meter and keep it centered over the portrait. */ #rpgGuildNpcPage .rpgGuildNpcStage{ min-height:560px!important; padding:72px 0 0!important; overflow:hidden!important; } #rpgGuildNpcPage .rpgGuildNpcSpeech{ top:48px!important;left:50%!important;right:auto!important; width:min(76%,460px)!important; transform:translateX(-50%)!important; z-index:35!important; min-height:48px!important; padding:10px 14px!important; } /* Reset the inherited square speech-tail box, then draw one clean triangle. */ #rpgGuildNpcPage .rpgGuildNpcSpeech::after{ content:''!important;position:absolute!important;left:50%!important;bottom:-9px!important; width:0!important;height:0!important;background:transparent!important; transform:translateX(-50%)!important; border-left:9px solid transparent!important;border-right:9px solid transparent!important; border-top:10px solid rgba(255,255,255,.96)!important;border-bottom:0!important; } /* Let the lower shade span the entire scene width all the way to the bottom. */ .guildNpcPortraitStage{height:488px!important;overflow:visible!important} .guildNpcLowerFade{display:none!important} #rpgGuildNpcPage .rpgGuildNpcStage::after{ content:'';position:absolute;z-index:8;left:0;right:0;bottom:0;height:56%;pointer-events:none; background:linear-gradient(180deg, rgba(22,14,18,0) 0%, rgba(22,14,18,.12) 18%, rgba(22,14,18,.42) 43%, rgba(18,12,15,.72) 70%, rgba(15,10,13,.92) 100%); } #rpgGuildNpcPage .rpgGuildNpcArt{height:485px!important;z-index:3!important} .rpgGuildNpcArtBlur{height:485px!important;z-index:4!important;clip-path:inset(61% 0 0 0)!important;opacity:.42!important;filter:blur(6px)!important} /* Name first, then triangular player choices beneath it. */ #rpgGuildNpcPage .rpgGuildNpcName{ bottom:164px!important;z-index:18!important; background:rgba(25,17,21,.68)!important; } #rpgGuildNpcPage .rpgGuildNpcChoices{ bottom:10px!important;height:146px!important;z-index:20!important;width:min(96%,610px)!important; } #rpgGuildNpcPage .rpgGuildNpcChoices button{z-index:21!important} /* The header Back control is enough. */ #rpgGuildNpcBackToGuild,.guildNpcReturnBtn{display:none!important} @media(max-width:520px){ #rpgGuildNpcPage .rpgNpcRelationRow{top:7px!important;right:8px!important;width:132px!important} #rpgGuildNpcPage .rpgGuildNpcSpeech{top:46px!important;width:82%!important;font-size:10.5px!important} #rpgGuildNpcPage .rpgGuildNpcStage{min-height:535px!important;padding-top:70px!important} .guildNpcPortraitStage{height:465px!important} #rpgGuildNpcPage .rpgGuildNpcArt,.rpgGuildNpcArtBlur{height:462px!important;width:108%!important} #rpgGuildNpcPage .rpgGuildNpcName{bottom:158px!important} #rpgGuildNpcPage .rpgGuildNpcChoices{bottom:8px!important;height:143px!important;width:99%!important} } /* from css/009_v4838-guild-spacing-gradient-fix.css */ /* ===== v4.8.38 relation/speech spacing + full-scene lower gradient ===== */ #rpgGuildNpcPage .rpgGuildNpcPageScene{ position:relative!important; overflow:hidden!important; } /* Full guild-background-width lower shade. */ #rpgGuildNpcPage .rpgGuildNpcPageScene::after{ content:''; position:absolute; z-index:3; left:0;right:0;bottom:0; width:100%; height:46%; pointer-events:none; background:linear-gradient(180deg, rgba(14,10,13,0) 0%, rgba(14,10,13,.08) 18%, rgba(14,10,13,.26) 38%, rgba(13,9,12,.52) 62%, rgba(11,8,10,.78) 82%, rgba(10,7,9,.92) 100%); } /* Keep all interactive/content layers above the scene-wide fade. */ #rpgGuildNpcPage .rpgGuildNpcPageContent{position:relative!important;z-index:4!important} /* Disable the old stage-width fade so only the background-wide fade remains. */ #rpgGuildNpcPage .rpgGuildNpcStage::after{display:none!important;content:none!important} /* Give the relation meter and NPC speech visible breathing room. */ #rpgGuildNpcPage .rpgNpcRelationRow{ top:12px!important; } #rpgGuildNpcPage .rpgGuildNpcSpeech{ top:72px!important; } #rpgGuildNpcPage .rpgGuildNpcStage{ padding-top:98px!important; } @media(max-width:520px){ #rpgGuildNpcPage .rpgNpcRelationRow{top:10px!important} #rpgGuildNpcPage .rpgGuildNpcSpeech{top:68px!important} #rpgGuildNpcPage .rpgGuildNpcStage{padding-top:94px!important} #rpgGuildNpcPage .rpgGuildNpcPageScene::after{height:48%} } /* from css/010_v4838-save-newgame-return-ui.css */ /* ===== v4.8.38 save/new-game polish + dialogue return hint ===== */ .rpgSaveEmpty>div{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .rpgSavePlus{line-height:1;transform:translateY(-3px);margin-inline:auto} .rpgSaveEmptyText{display:block;width:100%;margin:7px auto 0!important;text-align:center!important;padding:0!important;transform:none!important} .rpgSaveTitle{display:flex;align-items:center;justify-content:center;gap:6px} .rpgSaveTitleIcon{width:1em;height:1em;object-fit:contain;object-position:center;display:inline-block;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(118,71,94,.15))} #rpgModeModal .rpgModeHero{width:106px;height:106px;margin:0 auto 2px;display:flex;align-items:center;justify-content:center;overflow:visible} #rpgModeModal .rpgModeHero img{display:block;width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(195,105,148,.22))} #rpgModeModal .rpgModeButtons{align-items:stretch} #rpgModeModal .rpgModeBtn{min-height:132px;padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px} #rpgModeModal .rpgModeArt{height:88px;width:100%;margin:0!important;display:flex!important;align-items:flex-end;justify-content:center;font-size:0!important;overflow:visible} #rpgModeModal .rpgModeArt img{display:block;max-width:100%;width:auto;height:88px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(111,75,93,.14))} #rpgModeModal .rpgModeCancelCute{display:block;width:100%;min-height:44px;margin-top:10px!important;border:1px solid #efafc8!important;border-radius:15px!important;background:linear-gradient(180deg,#ffd7e7,#f7b8d0)!important;color:#744f60!important;font-weight:1000!important;box-shadow:0 5px 12px rgba(211,125,159,.14)!important} #rpgModeModal .rpgModeCancelCute:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(151,79,108,.12)!important} #rpgGuildNpcPage .guildNpcReturnHint{position:absolute;left:50%;bottom:139px;transform:translateX(-50%);z-index:30;display:none;white-space:nowrap;color:#fff4f8;font-size:10px;font-weight:1000;letter-spacing:.04em;text-shadow:0 2px 5px rgba(0,0,0,.65);pointer-events:none} #rpgGuildNpcPage .guildNpcReturnHint.show{display:block;animation:guildReturnPulse 1.05s ease-in-out infinite} @keyframes guildReturnPulse{0%,100%{opacity:.42}50%{opacity:1;text-shadow:0 0 8px rgba(255,193,218,.75),0 2px 5px rgba(0,0,0,.65)}} #rpgGuildNpcPage.return-ready .rpgGuildNpcPageScene{cursor:pointer} @media(max-width:520px){#rpgGuildNpcPage .guildNpcReturnHint{bottom:135px;font-size:9px}} @media(prefers-reduced-motion:reduce){#rpgGuildNpcPage .guildNpcReturnHint.show{animation:none;opacity:1}} /* from css/011_gwPartyIconExactFixStyle.css */ /* ์‚ฌ๋ƒฅํ„ฐ ์กฐ์šฐ ์‹œ ๊ธฐ์กด 3x3 ์…€์€ ์™„์ „ํžˆ ์ œ๊ฑฐ. ์ „ํˆฌ ํŽ˜์ด์ง€ 7x3 ๊ฒฉ์ž๋Š” ์˜ํ–ฅ ์—†์Œ */ #rpgFieldPage .rpgCombatFormation{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important} #rpgFieldPage #rpgCombatParty,#rpgFieldPage #rpgCombatEnemy{display:none!important} .rpgBattlePartyFace.gwExactPartyIcon{padding:0!important;overflow:hidden!important;background:#fff!important} .rpgBattlePartyFace.gwExactPartyIcon img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:50%!important} .gwFieldPartyIcon{width:22px!important;height:22px!important;object-fit:cover!important;border-radius:50%!important;display:inline-block!important;vertical-align:middle!important;margin-right:5px!important;background:#fff!important;border:1px solid rgba(205,145,169,.55)!important} /* from css/012_gwBattleSpriteAtbStableFixStyle.css */ .rpgBattleUnit2D.playerBattleArt{width:82px!important;min-height:112px!important} .rpgBattleUnit2D.playerBattleArt .rpgBattleUnitSprite{height:82px!important;overflow:visible!important;align-items:flex-end!important} .rpgPlayerBattleSpriteWrap{position:relative;width:80px!important;height:86px!important;display:flex;align-items:flex-end;justify-content:center;transform:rotateY(0deg);transform-origin:50% 60%;transform-style:preserve-3d;will-change:transform} .rpgPlayerBattleSprite{display:block;max-width:82px!important;max-height:86px!important;width:auto!important;height:auto!important;object-fit:contain!important;object-position:center bottom!important;pointer-events:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 6px 5px rgba(35,20,27,.28))} @media(max-width:390px){.rpgBattleUnit2D.playerBattleArt{width:76px!important;min-height:104px!important}.rpgPlayerBattleSpriteWrap{width:74px!important;height:80px!important}.rpgPlayerBattleSprite{max-width:76px!important;max-height:80px!important}} /* from css/013_gwV4840HitFxStyle.css */ #rpgBattleUnits .rpgBattleUnit2D{ overflow:visible!important; } .gwHitFx{ position:absolute; width:28px; height:28px; object-fit:contain; pointer-events:none; z-index:40; transform:translate(-50%,-50%) scale(.72) rotate(var(--gwfxrot,0deg)); opacity:0; animation:gwHitFxIn .11s ease-out forwards; filter:drop-shadow(0 2px 3px rgba(255,126,24,.35)); } @keyframes gwHitFxIn{ from{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(var(--gwfxrot,0deg))} to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--gwfxrot,0deg))} } .gwHitFx.gwOut{ animation:gwHitFxOut .12s ease-in forwards!important; } @keyframes gwHitFxOut{ from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--gwfxrot,0deg))} to{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(var(--gwfxrot,0deg))} } /* from css/014_gwV4855VillageUtilityStyle.css */ /* save-card party row */ .rpgSaveParty{grid-template-columns:repeat(3,minmax(0,1fr))!important;flex-wrap:nowrap!important} .rpgSaveMember{min-width:0!important} .rpgSaveMemberText{max-width:100%;overflow:hidden;text-overflow:ellipsis} /* prayer hall */ #rpgPrayerPage .screen{padding-bottom:28px} .gwPrayerHero55{display:flex;align-items:center;gap:13px;margin:8px 0 15px;padding:15px;border-radius:22px;background:linear-gradient(135deg,#fffdf6,#fff3f8);border:1px solid #ead6df;box-shadow:0 12px 28px rgba(156,103,126,.10)} .gwPrayerIcon55{width:74px;height:74px;flex:0 0 74px;border-radius:22px;display:grid;place-items:center;font-size:42px;background:linear-gradient(145deg,#fff,#f5e5ef);box-shadow:inset 0 0 0 1px #ead5df,0 8px 18px rgba(153,95,121,.10)} .gwPrayerParty55{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:12px} .gwPrayerMember55{min-width:0;padding:9px 8px;border:1px solid #ead6df;border-radius:15px;background:#fff;color:#69515e} .gwPrayerMember55.dead{background:#f2edf0;filter:saturate(.65)} .gwPrayerMemberHead55{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:8px;font-weight:1000} .gwPrayerMemberHead55 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gwPrayerMemberHead55 span{font-size:6.5px;white-space:nowrap;color:#9a7184} .gwPrayerStat55{margin-top:6px;font-size:7px;font-weight:900;color:#876977} .gwPrayerStat55 i{display:block;height:5px;margin-top:2px;border-radius:99px;overflow:hidden;background:#eadfe4} .gwPrayerStat55 i b{display:block;height:100%;border-radius:99px;background:#df7897} .gwPrayerStat55.mp i b{background:#82aee2} .gwPrayerActions55{display:grid;gap:8px} .gwPrayerActions55 button{min-height:62px;padding:10px 12px;border:1px solid #e3c4d1;border-radius:17px;background:linear-gradient(135deg,#fff,#fff1f7);color:#684f5d;text-align:left;box-shadow:0 7px 16px rgba(143,91,116,.08)} .gwPrayerActions55 button strong{display:block;font-size:12px} .gwPrayerActions55 button small{display:block;margin-top:4px;color:#947684;font-size:8px;font-weight:850} .gwPrayerActions55 button:disabled{opacity:.42;filter:grayscale(.35)} .gwPrayerNote55{margin-top:9px;text-align:center;color:#947684;font-size:8px;font-weight:850} /* from css/015_gwV4856FormationStyle.css */ #rpgFormationPage .rpgPanel{margin-bottom:12px} #rpgFormationPage .rpgFormationGrid{margin-top:9px} #rpgFormationPage .gwFormationAvatar56{width:38px;height:38px;display:grid;place-items:center;padding:0;overflow:hidden;border-radius:50%;background:#fff;border:1px solid rgba(218,164,186,.70);box-shadow:0 3px 8px rgba(121,74,95,.11)} #rpgFormationPage .gwFormationAvatar56 img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%} #rpgFormationPage .gwFormationGlyph56{font-size:26px;line-height:1} #rpgFormationPage .gwFormationParty56{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:8px 0 7px} #rpgFormationPage .gwFormationMember56{min-width:0;min-height:76px;position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:7px;padding:8px 18px 8px 7px;border:1px solid #ead2dd;border-radius:17px;background:linear-gradient(180deg,#fffafd,#fff3f8);color:#684f5d;text-align:left;box-shadow:0 6px 14px rgba(149,92,118,.07)} #rpgFormationPage .gwFormationMember56.open{border-color:#d995b2;background:linear-gradient(145deg,#ffe8f1,#f3e9ff);box-shadow:0 0 0 2px rgba(218,145,176,.12),0 8px 18px rgba(149,92,118,.09)} #rpgFormationPage .gwFormationCardFace56,#rpgFormationPage .gwFormationDetailFace56{width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#fff;border:1px solid rgba(218,164,186,.65)} #rpgFormationPage .gwFormationCardFace56 img,#rpgFormationPage .gwFormationDetailFace56 img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} #rpgFormationPage .gwFormationCardText56{min-width:0;display:flex;flex-direction:column;gap:1px} #rpgFormationPage .gwFormationCardText56 small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a07d8d;font-size:6.5px;font-weight:900} #rpgFormationPage .gwFormationCardText56 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#624a57;font-size:10px;font-weight:1000} #rpgFormationPage .gwFormationCardText56 em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#927482;font-size:7px;font-style:normal;font-weight:850} #rpgFormationPage .gwFormationChevron56{position:absolute;right:7px;top:50%;transform:translateY(-50%);color:#b17a91;font-size:10px;font-weight:1000} #rpgFormationPage .gwFormationDetail56{display:none;margin:0 0 11px} #rpgFormationPage .gwFormationDetail56.open{display:block} #rpgFormationPage .gwFormationDetailPanel56{padding:11px;border-radius:18px;border:1px solid #ead4de;background:linear-gradient(180deg,#fffafd,#fff6fa);box-shadow:0 8px 18px rgba(151,99,120,.07)} #rpgFormationPage .gwFormationDetailHead56{display:flex;align-items:center;gap:9px;margin-bottom:9px} #rpgFormationPage .gwFormationDetailHead56 b{display:block;color:#624b57;font-size:12px} #rpgFormationPage .gwFormationDetailHead56 small{display:block;margin-top:2px;color:#997987;font-size:7.5px;font-weight:850} #rpgFormationPage .gwFormationRaw56{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} #rpgFormationPage .gwFormationRaw56 div,#rpgFormationPage .gwFormationDerived56 div{min-width:0;padding:7px 3px;border-radius:11px;background:#faeef4;text-align:center} #rpgFormationPage .gwFormationRaw56 b,#rpgFormationPage .gwFormationDerived56 b{display:block;color:#9b7b89;font-size:7px} #rpgFormationPage .gwFormationRaw56 strong,#rpgFormationPage .gwFormationDerived56 strong{display:block;margin-top:3px;color:#624b57;font-size:11px} #rpgFormationPage .gwFormationDerived56{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:6px} #rpgFormationPage #rpgJourneyStartBtn{margin-top:4px} @media(max-width:390px){#rpgFormationPage .gwFormationParty56{gap:5px}#rpgFormationPage .gwFormationMember56{min-height:70px;grid-template-columns:32px minmax(0,1fr);gap:5px;padding:6px 15px 6px 5px;border-radius:14px}#rpgFormationPage .gwFormationCardFace56{width:32px;height:32px}#rpgFormationPage .gwFormationCardText56 b{font-size:9px}#rpgFormationPage .gwFormationCardText56 small{font-size:6px}} /* from css/016_gwV4858EncounterStyle.css */ #rpgFieldPage .gwEncounterShowcase58{position:absolute;inset:38px 8px 8px;z-index:2;display:none;align-items:flex-end;justify-content:center;gap:0;pointer-events:none;overflow:hidden} #rpgFieldPage .gwEncounterShowcase58.show{display:flex} #rpgFieldPage .gwEncounterShowcase58 img{position:relative;display:block;max-width:none;width:44%;height:84%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 7px rgba(40,25,28,.28));transform-origin:center bottom} #rpgFieldPage .gwEncounterShowcase58[data-count="1"] img{width:61%;height:90%} #rpgFieldPage .gwEncounterShowcase58[data-count="2"] img{width:48%;height:86%;margin:0 -5%} #rpgFieldPage .gwEncounterShowcase58[data-count="3"] img{width:39%;height:81%;margin:0 -6%} #rpgFieldPage .gwEncounterShowcase58[data-count="4"] img{width:33%;height:76%;margin:0 -6%} #rpgFieldPage .gwEncounterShowcase58 img:nth-child(2n){transform:translateY(-5px) scale(.94)} #rpgFieldPage .gwEncounterShowcase58 img:nth-child(3){transform:translateY(3px) scale(.9)} #rpgFieldPage .rpgCombatFormation{z-index:5} /* from css/017_gwV4855BattleStyle.css */ /* v4.8.55: scroll-safe battle + synchronous cell snap */ #rpgBattlePage{height:auto!important;min-height:max(100svh,932px)!important;max-height:none!important;overflow:visible!important;padding-bottom:0!important;background:transparent!important} #rpgBattlePage::before{display:none!important;content:none!important} #rpgBattlePage .content{width:min(100%,430px)!important;height:auto!important;min-height:932px!important;margin:0 auto!important;padding:6px 0 0!important;display:grid!important;grid-template-rows:46px 424px auto!important;gap:0!important;overflow:visible!important} #rpgBattlePage .rpgBattleTopBar{grid-row:1!important;height:46px!important;margin:0!important;padding:0 10px!important;z-index:90!important} #rpgBattlePage .rpgBattleTopMeta,#rpgBattlePage .rpgBattleProgress,#rpgBattlePage #rpgBattleEnemyCount,#rpgBattlePage #rpgBattleProgressTrack,#rpgBattlePage #rpgBattleAutoBtn{display:none!important} #rpgBattlePage .rpgBattlePlace h1,#rpgBattlePage .rpgBattlePlace small{color:#fff!important;text-shadow:0 2px 5px rgba(0,0,0,.64)!important} #rpgBattlePage .rpgBattleStage{grid-row:2!important;position:relative!important;width:100%!important;height:424px!important;min-height:424px!important;margin:0!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;z-index:5!important} #rpgBattlePage .rpgBattleStage::after{display:none!important;content:none!important} #rpgBattlePage .rpgBattleFloorWrap{display:none!important} /* Exact 7x3: rear / middle / front / gap / front / middle / rear */ #rpgBattlePage #rpgBattleGridPlane{position:absolute!important;left:6%!important;right:6%!important;top:170px!important;height:180px!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:7px 6px!important;transform:none!important;z-index:3!important;pointer-events:none!important} #rpgBattlePage .rpgBattleGridCell{border:1.5px solid rgba(255,255,255,.82)!important;background:rgba(255,255,255,.05)!important;box-shadow:inset 0 0 0 1px rgba(57,42,48,.10)!important;border-radius:3px!important;transform:skewX(-10deg) scaleY(.70)!important;transform-origin:center!important} #rpgBattlePage .rpgBattleGridCell.partyZone{border-color:rgba(87,223,226,.94)!important;background:rgba(81,224,226,.09)!important} #rpgBattlePage .rpgBattleGridCell.enemyZone{border-color:rgba(255,140,164,.95)!important;background:rgba(255,127,151,.09)!important} #rpgBattlePage .rpgBattleGridCell.centerGap{border-color:transparent!important;background:transparent!important;box-shadow:none!important} #rpgBattlePage #rpgBattleUnits{position:absolute!important;inset:0!important;z-index:8!important;overflow:visible!important} #rpgBattlePage .rpgBattleUnit2D,#rpgBattlePage .rpgBattleUnitSprite,#rpgBattlePage .rpgPlayerBattleSpriteWrap{overflow:visible!important} #rpgBattlePage #rpgBattleUnits [data-battle-enemy]{pointer-events:none!important;cursor:default!important} #rpgBattlePage .rpgBattleUnit2D.enemy.targetable::before{display:none!important} #rpgBattlePage .rpgBattleMiniBars{display:none!important} /* Ally left ATB / enemy right ATB */ #rpgBattlePage .gwSideAtb54{position:absolute;top:50%;width:7px;height:56px;transform:translateY(-50%);overflow:hidden;z-index:15;border-radius:999px;background:rgba(34,28,31,.30);border:1px solid rgba(255,255,255,.86);box-shadow:0 2px 7px rgba(31,20,25,.23);pointer-events:none} #rpgBattlePage .rpgBattleUnit2D.party .gwSideAtb54{left:-10px} #rpgBattlePage .rpgBattleUnit2D.enemy .gwSideAtb54{right:-10px} #rpgBattlePage .gwSideAtb54 i{position:absolute;left:0;right:0;bottom:0;height:0;display:block;border-radius:999px;background:linear-gradient(180deg,#ffe780,#e5b739);transition:height .08s linear} #rpgBattlePage .gwAtbReady54 .gwSideAtb54{box-shadow:0 0 9px rgba(255,221,91,.96),0 0 0 2px rgba(255,238,151,.22)} /* Top: log + Auto only. No enemy HUD here. */ #rpgBattlePage .rpgBattleLogPanel{position:absolute!important;top:6px!important;left:14px!important;right:116px!important;z-index:55!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;pointer-events:none!important} #rpgBattlePage .rpgBattleLogHead{display:none!important} #rpgBattlePage #rpgBattleLog{max-height:116px!important;padding:0!important;overflow:hidden!important} #rpgBattlePage #rpgBattleLog .rpgHistoryRow{width:max-content!important;max-width:100%!important;min-height:20px!important;margin:3px 0 0!important;padding:4px 7px!important;border:0!important;border-radius:8px!important;background:rgba(30,24,26,.68)!important;color:#fff!important;font-size:7.5px!important;font-weight:850!important;line-height:1.35!important;text-shadow:0 1px 3px rgba(0,0,0,.72)!important} #rpgBattlePage .gwBattleHud53{position:absolute;top:7px;right:9px;z-index:140;pointer-events:auto!important} #rpgBattlePage .gwAutoRow53{display:flex;align-items:center;justify-content:flex-end;gap:7px} #rpgBattlePage .gwAutoLabel53{min-width:58px;text-align:right;color:#fff;font-size:9px;font-weight:1000;text-shadow:0 1px 4px rgba(0,0,0,.72)} #rpgBattlePage .gwAutoSwitch53{position:relative;width:52px;height:28px;padding:0;border:1px solid rgba(255,255,255,.94);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(61,32,45,.30);touch-action:manipulation;cursor:pointer} #rpgBattlePage .gwAutoSwitch53::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(79,40,58,.32);transition:transform .16s ease} #rpgBattlePage .gwAutoSwitch53.on{background:linear-gradient(135deg,#f39bbb,#dc6d99);border-color:#d75f8e} #rpgBattlePage .gwAutoSwitch53.on::after{transform:translateX(24px)} /* Pink lower panel */ #rpgBattlePage .rpgBattleLower{grid-row:3!important;position:relative!important;z-index:30!important;width:100%!important;height:auto!important;min-height:462px!important;margin:0!important;padding:10px 12px max(18px,env(safe-area-inset-bottom))!important;display:flex!important;flex-direction:column!important;gap:7px!important;overflow:visible!important;background:linear-gradient(180deg,#fff3f7 0%,#f9e8f0 100%)!important;border:0!important;border-radius:24px 24px 0 0!important;box-shadow:0 -7px 18px rgba(191,116,150,.15)!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important} #rpgBattlePage .rpgBattleLower::after{display:none!important;content:none!important} #rpgBattlePage [class^="gwBattlePinkBottom"],#rpgBattlePage [class*=" gwBattlePinkBottom"]{display:none!important} /* Enemy cards: fixed 4x2 = 8 slots */ #rpgBattlePage .gwEnemyCards53{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,48px);gap:5px;flex:0 0 101px} #rpgBattlePage .gwEnemyCard53{position:relative;min-width:0;height:48px;padding:5px 6px;border:1px solid #e8c7d5;border-radius:11px;background:rgba(255,255,255,.82);color:#684a59;text-align:left;overflow:hidden;transition:transform .1s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease} #rpgBattlePage button.gwEnemyCard53{cursor:default} #rpgBattlePage .gwEnemyCard53.empty{opacity:.30;background:rgba(255,255,255,.43);border-style:dashed} #rpgBattlePage .gwEnemyCard53.dead{opacity:.35;filter:grayscale(.75)} #rpgBattlePage .gwEnemyCard53.selectable{cursor:pointer;border-color:#efa2bd;background:#fff9fc} #rpgBattlePage .gwEnemyCard53.selectable:active{transform:scale(.97)} #rpgBattlePage .gwEnemyCard53.selected{border:2px solid #ef6f9d;box-shadow:0 0 0 2px rgba(255,255,255,.72),0 0 10px rgba(236,99,148,.30);background:#fff3f8} #rpgBattlePage .gwEnemyCardHead53{display:flex;justify-content:space-between;align-items:center;gap:3px;font-size:6.6px;font-weight:1000;line-height:1.1} #rpgBattlePage .gwEnemyCardHead53 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px} #rpgBattlePage .gwEnemyHpText53{margin-top:3px;font-size:6px;font-weight:900;color:#987083;text-align:right;white-space:nowrap} #rpgBattlePage .gwEnemyHpTrack53{height:4px;margin-top:3px;border-radius:99px;background:#eadde3;overflow:hidden} #rpgBattlePage .gwEnemyHpTrack53 i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e97898,#ef9ab2);transition:width .1s linear} /* Party cards + command panel */ #rpgBattlePage .rpgBattlePartyStrip{width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;flex:0 0 auto!important;visibility:visible!important;opacity:1!important;min-height:88px!important} #rpgBattlePage .rpgBattlePartyCard{min-width:0!important} #rpgBattlePage .rpgBattleCommandPanel{width:100%!important;flex:0 0 auto!important;padding:8px!important;border:1px solid rgba(237,199,216,.95)!important;border-radius:18px!important;background:rgba(255,255,255,.75)!important;box-shadow:0 6px 14px rgba(171,96,129,.08)!important} #rpgBattlePage #rpgBattlePageActions{width:100%!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important} #rpgBattlePage #rpgBattlePageActions.skillMode{grid-template-columns:repeat(2,minmax(0,1fr))!important} #rpgBattlePage #rpgBattlePageActions .rpgBattleCmd{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:6px 2px!important;position:relative} /* Attack target mode toggle */ #rpgBattlePage #rpgBattleAtkBtn.gwAttackArmed53{overflow:visible!important;box-shadow:0 0 11px rgba(241,101,151,.38)!important} #rpgBattlePage #rpgBattleAtkBtn.gwAttackArmed53::after{content:"";position:absolute;inset:-5px;border:2px dashed #ef6d9d;border-radius:15px;pointer-events:none;animation:gwAttackArmedPulse53 .72s ease-in-out infinite alternate} @keyframes gwAttackArmedPulse53{from{opacity:.45;filter:drop-shadow(0 0 1px rgba(255,116,166,.25))}to{opacity:1;filter:drop-shadow(0 0 6px rgba(255,116,166,.70))}} @media(max-width:390px){ #rpgBattlePage .content{grid-template-rows:46px 416px auto!important;min-height:932px!important} #rpgBattlePage .rpgBattleStage{height:416px!important;min-height:416px!important} #rpgBattlePage #rpgBattleGridPlane{top:166px!important;height:176px!important;gap:6px 5px!important} #rpgBattlePage .gwEnemyCards53{grid-template-rows:repeat(2,46px);flex-basis:97px} } /* Foreground rocks/grass stay behind the pink UI and no longer cover the cells. */ #rpgBattlePage .rpgBattleDecorLayer{z-index:14!important;pointer-events:none!important} #rpgBattlePage .rpgBattleDecorItem{bottom:-116px!important} #rpgBattlePage .rpgBattleDecorItem.lift-sm{bottom:-101px!important} #rpgBattlePage .rpgBattleDecorItem.lift-md{bottom:-91px!important} /* from css/018_gwV4865BossPatchStyle.css */ .rpgCombatUnit.bossCore{background:linear-gradient(180deg,rgba(255,251,240,.96),rgba(255,241,233,.94));border-color:rgba(188,110,125,.42);box-shadow:0 7px 18px rgba(177,104,120,.14)} .rpgCombatUnit.bossGhost{background:linear-gradient(180deg,rgba(255,248,240,.62),rgba(255,236,231,.56));border:1px dashed rgba(188,110,125,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .rpgCombatUnit.bossGhost .rpgUnitName{font-size:8px;color:#9d7586} .rpgCombatUnit.bossGhost .rpgMiniHp,.rpgCombatUnit.bossGhost .rpgAtbGauge{opacity:.55} .rpgCombatUnit .rpgBossBadge{display:inline-flex;align-items:center;justify-content:center;margin-top:2px;padding:1px 6px;border-radius:999px;background:rgba(190,84,108,.12);color:#a14f69;font-size:7px;font-weight:1000;letter-spacing:.04em} .rpgSlimeSprite.bossEcho{width:34px;height:34px;opacity:.84;filter:drop-shadow(0 2px 4px rgba(90,58,67,.18))} .rpgBattleUnit2D.enemy.boss{z-index:12} .rpgBattleUnit2D.enemy.boss .rpgBattleUnitSprite img{width:190px;height:190px;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(35,25,36,.25))} .rpgBattleUnit2D.enemy.boss .rpgBattleUnitName2D{background:rgba(255,248,250,.92);border:1px solid rgba(181,92,121,.32);box-shadow:0 8px 16px rgba(164,94,121,.12)} .rpgBattleUnit2D.enemy.boss .shadow{transform:translate(-50%,10px) scale(1.6);opacity:.26} .rpgBossTag2D{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:3px 8px;border-radius:999px;background:linear-gradient(180deg,#fff4f6,#ffe4ea);border:1px solid rgba(191,104,127,.34);font-size:9px;font-weight:1000;color:#ad5673;letter-spacing:.06em;box-shadow:0 7px 16px rgba(158,87,111,.14)} #rpgBattleGridPlane .rpgBattleGridCell.bossOccupied{background:rgba(231,138,164,.10);box-shadow:inset 0 0 0 1px rgba(206,112,139,.16)} #rpgBattleGridPlane .rpgBattleGridCell.bossCore{background:rgba(231,138,164,.16);box-shadow:inset 0 0 0 2px rgba(206,112,139,.25)} /* from css/019_gwV4870QuestBoardStyle.css */ #rpgQuestGuidePage .rpgQuestTypeTabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 12px} #rpgQuestGuidePage .rpgQuestTypeTabs button{min-height:42px;border:1px solid #ead4de;border-radius:12px;background:#fff8fb;color:#816875;font-size:9px;font-weight:1000;padding:6px 3px} #rpgQuestGuidePage .rpgQuestTypeTabs button.active{background:#efd9e4;border-color:#d9a8bc;color:#654c59;box-shadow:inset 0 0 0 1px rgba(213,145,173,.16)} #rpgQuestGuidePage .rpgQuestCard{position:relative;overflow:hidden} #rpgQuestGuidePage .rpgQuestCard .gwQuestTop70{display:flex;align-items:center;justify-content:space-between;gap:8px} #rpgQuestGuidePage .gwQuestClass70{display:inline-flex;padding:5px 8px;border-radius:999px;background:#f3e6ec;color:#745866;font-size:9px;font-weight:1000} #rpgQuestGuidePage .gwQuestClass70.elite{background:#eee4fb;color:#6f5990}#rpgQuestGuidePage .gwQuestClass70.strong{background:#ffe3e0;color:#994a45}#rpgQuestGuidePage .gwQuestClass70.promotion{background:#fff0c9;color:#806328} #rpgQuestGuidePage .gwSkulls70{font-size:12px;letter-spacing:-1px;white-space:nowrap;filter:grayscale(.1)} #rpgQuestGuidePage .gwQuestReward70{margin-top:7px;padding:7px 9px;border-radius:11px;background:#fbf1f5;color:#745c68;font-size:9px;font-weight:900;line-height:1.5} #rpgQuestGuidePage .gwQuestLocked70{opacity:.62} #rpgQuestGuidePage .gwQuestEmpty70{padding:24px 14px;border:1px dashed #dfcbd4;border-radius:18px;text-align:center;color:#9a7f8c;font-size:10px;font-weight:900;background:#fffafd} #rpgQuestGuidePage .rpgQuestCard.compact h3{font-size:15px} @media(max-width:390px){#rpgQuestGuidePage .rpgQuestTypeTabs{grid-template-columns:repeat(3,1fr)}#rpgQuestGuidePage .rpgQuestTypeTabs button{font-size:8px}} #rpgQuestChoice70 .gwChoiceGrid70{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:320px;overflow:auto;margin-top:12px}#rpgQuestChoice70 .gwChoiceGrid70 button{min-height:42px;border:1px solid #e4ccd7;border-radius:12px;background:#fff8fb;color:#684f5c;font-size:9px;font-weight:1000;padding:7px} #rpgQuestChangeModal .modalActions{display:flex!important;gap:10px!important;align-items:stretch!important} #rpgQuestChangeModal .modalActions>button{flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:46px!important;margin:0!important;padding:11px 12px!important;border-radius:14px!important;font-size:11px!important;font-weight:1000!important} /* from css/020_gwV4875ForgeStyle.css */ #rpgBlacksmithPage{background:radial-gradient(circle at 18% 10%,rgba(255,219,166,.38),transparent 30%),linear-gradient(180deg,#fff9f5 0%,#f9edf2 100%);color:#604b55} #rpgBlacksmithPage .content{width:min(calc(100% - 22px),430px);margin:0 auto;padding:10px 0 28px} .gwSmithHero75{position:relative;min-height:220px;border:1px solid #e6cfd8;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#4b3933,#9a6545 48%,#e5a860);box-shadow:0 12px 26px rgba(87,54,45,.16);display:flex;align-items:flex-end;justify-content:center;margin:8px 0 12px} .gwSmithHero75 img{display:block;max-width:84%;max-height:210px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.28))} .gwSmithHero75 .tag{position:absolute;left:12px;top:12px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.88);font-size:9px;font-weight:1000;color:#71554d} .gwSmithTabs75{display:flex;gap:8px;margin:10px 0}.gwSmithTabs75 button{flex:1;min-height:42px;border:1px solid #e2cbd5;border-radius:13px;background:#fff8fb;color:#765c69;font-weight:1000}.gwSmithTabs75 button.active{background:#ead4de;border-color:#cf9eb1;color:#654c58} .gwSmithPanel75{display:grid;gap:9px}.gwSmithRecipe75,.gwSmithEquip75{border:1px solid #ead6df;border-radius:17px;background:#fff;padding:11px;box-shadow:0 7px 16px rgba(118,77,93,.06)} .gwSmithRecipe75 summary{cursor:pointer;font-weight:1000;color:#684f5b;list-style:none}.gwSmithRecipe75 summary::-webkit-details-marker{display:none}.gwSmithRecipe75 summary::after{content:'๏ผ‹';float:right;color:#a47b8d}.gwSmithRecipe75[open] summary::after{content:'๏ผ'} .gwSmithRecipeBody75{padding-top:9px;font-size:10px;color:#826b76;line-height:1.6}.gwSmithCost75{margin:7px 0;padding:8px;border-radius:11px;background:#faf1f5;font-weight:900}.gwSmithBtn75{width:100%;min-height:40px;border:0;border-radius:12px;background:#d78fa9;color:white;font-weight:1000}.gwSmithBtn75:disabled{background:#ddd3d8;color:#9e8e95} .gwSmithEquip75{position:relative;overflow:hidden}.gwSmithEquip75 h3{margin:0 0 4px;font-size:13px}.gwSmithEquip75 small{font-size:9px;color:#947985}.gwSmithEquip75 .stats{margin:8px 0;font-size:10px;line-height:1.55;color:#725a66}.gwSmithEquip75.glow3{box-shadow:0 0 18px rgba(247,196,65,.55),0 7px 16px rgba(118,77,93,.06)}.gwSmithEquip75.glow4{box-shadow:0 0 20px rgba(72,161,255,.52),0 7px 16px rgba(118,77,93,.06)}.gwSmithEquip75.glow5{animation:gwForgeGlow75 1.35s ease-in-out infinite alternate} @keyframes gwForgeGlow75{0%{box-shadow:0 0 22px rgba(247,196,65,.68),0 0 8px rgba(72,161,255,.2)}100%{box-shadow:0 0 26px rgba(72,161,255,.68),0 0 10px rgba(247,196,65,.25)}} .gwEnhanceGauge75{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:8px 0}.gwEnhanceGauge75 i{height:5px;border-radius:999px;background:#eadde3}.gwEnhanceGauge75 i.on{background:#dca0b8}.gwSmithEmpty75{padding:26px 14px;text-align:center;border:1px dashed #d9c3cc;border-radius:17px;color:#927985;font-size:10px;background:#fff9fc} .gwForgeNotice75{position:fixed;z-index:12000;left:50%;top:18%;transform:translate(-50%,-12px);width:min(88vw,380px);padding:13px 15px;border-radius:16px;background:rgba(32,24,29,.94);color:#fff;text-align:center;font-weight:1000;font-size:11px;line-height:1.5;opacity:0;pointer-events:none;transition:.22s ease;box-shadow:0 12px 30px rgba(0,0,0,.28)}.gwForgeNotice75.show{opacity:1;transform:translate(-50%,0)}.gwForgeNotice75.success{border:1px solid rgba(245,207,86,.8)}.gwForgeNotice75.fail{border:1px solid rgba(130,171,255,.7)} /* from css/021_gwV4876QolStyle.css */ /* merchant NPCs: reduce portrait footprint so the shop begins higher */ #rpgShopPage .rpgMerchantStage,#rpgGeneralShopPage .rpgMerchantStage{min-height:360px!important;padding-top:72px!important;margin-bottom:6px!important} #rpgShopPage .rpgMerchantArt,#rpgGeneralShopPage .rpgMerchantArt{max-height:320px!important;width:min(82%,340px)!important} @media(max-width:390px){#rpgShopPage .rpgMerchantStage,#rpgGeneralShopPage .rpgMerchantStage{min-height:330px!important;padding-top:68px!important}#rpgShopPage .rpgMerchantArt,#rpgGeneralShopPage .rpgMerchantArt{max-height:290px!important;width:min(80%,310px)!important}} /* blacksmith temporary portrait: match merchant framing instead of stretching */ .gwSmithHero75{min-height:190px!important;background:linear-gradient(160deg,#5a443b,#9f6d50 48%,#e0ae72)!important} .gwSmithHero75 img{width:auto!important;height:178px!important;max-width:82%!important;max-height:178px!important;object-fit:contain!important;object-position:center bottom!important} .gwSmithHero75 .tag{display:none!important} /* presence status text */ #rpgFieldPage .gwPartyPresence64{display:flex!important;align-items:center!important;gap:5px!important;width:auto!important;min-width:0!important} #rpgFieldPage .gwPresenceText76{font-size:8px;font-weight:1000;color:rgba(255,255,255,.9);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.55)} /* from css/022_gwV4877ChapelForgeStyle.css */ #rpgBlacksmithPage{width:100%!important;min-height:100dvh!important} #rpgBlacksmithPage .content{width:100%!important;max-width:430px!important;margin:0 auto!important;padding:10px 16px calc(28px + env(safe-area-inset-bottom))!important} .gwSmithHero75.gwSmithHero77,.gwPrayerHero55.gwPrayerHero77{position:relative!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow:hidden!important;border:1px solid #ead4dd!important;border-radius:24px!important;background:linear-gradient(180deg,#fffaf8,#fff0f5)!important;box-shadow:0 12px 28px rgba(117,75,91,.12)!important} .gwSmithHero75.gwSmithHero77{height:300px!important;min-height:300px!important;margin:8px 0 12px!important} .gwPrayerHero55.gwPrayerHero77{height:320px!important;min-height:320px!important;margin:8px 0 15px!important;padding:0!important} .gwSmithHero77 img,.gwPrayerArt77{display:block!important;width:auto!important;height:auto!important;max-width:92%!important;max-height:270px!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 10px 12px rgba(59,39,48,.16));transition:opacity .18s ease,transform .24s ease,filter .24s ease!important} .gwPrayerArt77{max-height:292px!important} .gwSmithSpeech77,.gwPrayerSpeech77{position:absolute;z-index:6;left:14px;right:14px;top:10px;min-height:42px;padding:9px 12px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid #efd4df;color:#694e5c;font-size:10px;font-weight:900;line-height:1.45;text-align:center;box-shadow:0 6px 16px rgba(94,58,74,.10)} .gwForgeSlot77{position:absolute;z-index:7;right:12%;bottom:19%;width:48px;height:48px;border:2px dashed rgba(255,224,155,.9);border-radius:10px;background:rgba(60,38,31,.32);display:grid;place-items:center;color:#fff7d4;font-size:24px;font-weight:1000;opacity:0;transform:scale(.84);transition:.2s ease;box-shadow:0 0 0 3px rgba(255,255,255,.15),0 0 18px rgba(255,190,68,.26)} .gwSmithHero77.forging .gwForgeSlot77{opacity:1;transform:scale(1);animation:gwForgeSlotPulse77 .4s ease-in-out infinite alternate} .gwForgeSpark77{position:absolute;z-index:8;right:7%;bottom:12%;width:92px;height:92px;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,244,169,.95) 0 5%,rgba(255,181,56,.52) 6% 16%,transparent 46%);filter:blur(.2px)} .gwSmithHero77.forging .gwForgeSpark77{animation:gwForgeSpark77 .75s ease-out 2} @keyframes gwForgeSlotPulse77{to{box-shadow:0 0 0 3px rgba(255,255,255,.2),0 0 28px rgba(255,207,88,.7);transform:scale(1.08)}} @keyframes gwForgeSpark77{0%{opacity:0;transform:scale(.35) rotate(0)}28%{opacity:1}100%{opacity:0;transform:scale(1.45) rotate(35deg)}} .gwPrayerGlow77{position:absolute;z-index:5;left:50%;bottom:6%;width:72%;height:68%;transform:translateX(-50%);border-radius:50%;opacity:0;pointer-events:none;filter:blur(16px)} .gwPrayerHero77.praying-heal .gwPrayerGlow77{animation:gwPrayerHealGlow77 1.15s ease-out} .gwPrayerHero77.praying-revive .gwPrayerGlow77{animation:gwPrayerReviveGlow77 1.2s ease-out} @keyframes gwPrayerHealGlow77{0%{opacity:0;background:radial-gradient(circle,rgba(163,255,164,.78),rgba(214,255,132,.26) 46%,transparent 72%)}35%{opacity:.95}100%{opacity:0;transform:translateX(-50%) scale(1.18)}} @keyframes gwPrayerReviveGlow77{0%{opacity:0;background:radial-gradient(circle,rgba(255,239,127,.9),rgba(255,207,98,.34) 48%,transparent 74%)}35%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.22)}} .gwPrayerHero77.praying-heal .gwPrayerArt77,.gwPrayerHero77.praying-revive .gwPrayerArt77{animation:gwPrayerLift77 1.1s ease-in-out} @keyframes gwPrayerLift77{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px);filter:drop-shadow(0 0 20px rgba(238,224,123,.55))}} @media(max-width:390px){.gwSmithHero75.gwSmithHero77{height:276px!important;min-height:276px!important}.gwPrayerHero55.gwPrayerHero77{height:294px!important;min-height:294px!important}.gwSmithHero77 img{max-height:248px!important}.gwPrayerArt77{max-height:266px!important}.gwSmithSpeech77,.gwPrayerSpeech77{font-size:9px}.gwForgeSlot77{right:10%;bottom:18%;width:44px;height:44px}} /* from css/023_gwV4878BattleQueueStyle.css */ #rpgBattlePageActions{position:relative} .rpgBattleCmd{position:relative;overflow:hidden} .rpgBattleCmd.skill{background:linear-gradient(180deg,#cdb2ff,#986fd5)!important;color:#fff!important;text-shadow:0 1px 1px rgba(65,42,96,.24)} .rpgBattleCmd.gwQueued78,.gwBattleOption78.gwQueued78{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 15px rgba(255,193,224,.65)!important;transform:translateY(-1px)} .rpgBattleCmd.gwQueued78::after,.gwBattleOption78.gwQueued78::after{content:"";position:absolute;inset:2px;border:2px dashed rgba(255,255,255,.98);border-radius:11px;pointer-events:none;animation:gwQueueDash78 .58s linear infinite alternate} @keyframes gwQueueDash78{0%{opacity:.35;filter:drop-shadow(0 0 1px rgba(255,255,255,.2))}100%{opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.95))}} .gwBattleSubPanel78{grid-column:1/-1;display:grid;gap:6px;padding:7px;border:1px solid #d9bed0;border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(249,237,246,.96));box-shadow:0 7px 16px rgba(107,69,91,.09)} .gwBattleSubHead78{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#6d5361;font-size:9px;font-weight:1000;padding:0 2px} .gwBattleSubHead78 button{border:0;border-radius:999px;background:#efe3ea;color:#775e6a;font-size:8px;font-weight:1000;padding:5px 9px} .gwBattleSkillList78,.gwBattleItemList78,.gwBattleTargetList78{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .gwBattleOption78{position:relative;min-width:0;min-height:52px;border-radius:12px;border:1px solid #d7c0d1;padding:7px 8px;text-align:left;font-size:8px;font-weight:900;line-height:1.35;color:#664d5c;background:#fff;overflow:hidden} .gwBattleOption78.skill{background:linear-gradient(145deg,#f3eaff,#e7d6fb);border-color:#cdb4e8;color:#684d82} .gwBattleOption78.item{background:linear-gradient(145deg,#fff8dc,#f6e5a8);border-color:#e1ca7d;color:#715b24} .gwBattleOption78.target{background:linear-gradient(145deg,#eff8f5,#dcefe7);border-color:#badbce;color:#4f6d61} .gwBattleOption78 b{display:block;font-size:10px;margin-bottom:2px}.gwBattleOption78 small{display:block;font-size:7px;opacity:.82}.gwBattleOption78:disabled{opacity:.38} .gwQueueBadge78{display:inline-flex;align-items:center;gap:4px;margin-left:5px;padding:2px 5px;border-radius:999px;background:#6f5062;color:#fff;font-size:6px;font-weight:1000;vertical-align:middle} @media(max-width:365px){.gwBattleSkillList78,.gwBattleItemList78,.gwBattleTargetList78{grid-template-columns:1fr 1fr}.gwBattleOption78{padding:6px;min-height:49px}} /* from css/024_gwV4879Style.css */ #rpgNpcPage,#rpgShopSelectPage,#rpgShopPage,#rpgGeneralShopPage{background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important;background-attachment:scroll!important} #rpgNpcPage::before,#rpgShopSelectPage::before,#rpgShopPage::before,#rpgGeneralShopPage::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,250,252,.10),rgba(255,247,250,.42) 62%,rgba(255,245,249,.72));z-index:0} #rpgNpcPage .screen,#rpgShopSelectPage .screen,#rpgShopPage .screen,#rpgGeneralShopPage .screen,#rpgShopSelectPage .content,#rpgShopPage .content,#rpgGeneralShopPage .content{position:relative;z-index:1} #rpgNpcPage .rpgTownNpcBubble,#rpgNpcPage .rpgTownNpcName{backdrop-filter:blur(7px)} #rpgShopPage .rpgMerchantStage,#rpgGeneralShopPage .rpgMerchantStage,#rpgShopSelectPage .rpgShopChoiceGrid{background:rgba(255,250,252,.64)!important;backdrop-filter:blur(4px);border-radius:22px} .guildNpcPortraitPick{position:relative} .gwClassQuestBang79{position:absolute;z-index:30;top:7px;left:50%;transform:translateX(-50%);width:42px;height:42px;border:2px solid #fff6cd;border-radius:50%;background:linear-gradient(180deg,#ffd84f,#f0a51d);color:#6c4310;font-size:25px;font-weight:1000;line-height:1;box-shadow:0 7px 18px rgba(93,59,11,.28),0 0 0 4px rgba(255,255,255,.34);animation:gwBang79 1s ease-in-out infinite;display:none} .gwClassQuestBang79.show{display:grid;place-items:center} .gwClassQuestBang79::after{content:"";position:absolute;bottom:-7px;left:50%;width:12px;height:12px;background:#f0a51d;transform:translateX(-50%) rotate(45deg);border-right:2px solid #fff6cd;border-bottom:2px solid #fff6cd} @keyframes gwBang79{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-5px) scale(1.06)}} .gwWeaponHit79{position:absolute;z-index:60;left:50%;top:46%;width:40px;height:40px;object-fit:contain;pointer-events:none;transform:translate(-50%,-50%) scale(.28);opacity:0;filter:drop-shadow(0 0 9px rgba(255,223,116,.85));animation:gwWeaponHit79 .48s ease-out forwards} @keyframes gwWeaponHit79{0%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(-8deg)}16%{opacity:1}72%{opacity:.96;transform:translate(-50%,-50%) scale(1.22) rotate(5deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.58) rotate(9deg)}} .gwClassQuestStatus79{margin-top:8px;padding:9px 11px;border-radius:14px;background:rgba(255,248,235,.94);border:1px solid #ead4a7;color:#725836;font-size:10px;font-weight:900;line-height:1.5} .gwClassQuestStatus79.complete{background:rgba(236,255,237,.95);border-color:#b8dcb9;color:#3b6c43} .gwWeaponSkillTag79{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:999px;background:#fff1c8;color:#8a631c;font-size:8px;font-weight:1000;vertical-align:middle} @media(max-width:390px){.gwClassQuestBang79{width:36px;height:36px;font-size:21px;top:3px}} /* from css/025_gwV4880UnifiedUxStyle.css */ /* 2-choice class dialogue: side by side */ #rpgGuildNpcPage .rpgGuildNpcChoices.gwTwoChoice80{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;height:auto!important;bottom:18px!important;pointer-events:auto!important} #rpgGuildNpcPage .rpgGuildNpcChoices.gwTwoChoice80 button{position:relative!important;inset:auto!important;width:100%!important;min-height:58px!important} #rpgGuildNpcPage .gwClassQuestBang79{top:92px!important} @media(max-width:390px){#rpgGuildNpcPage .gwClassQuestBang79{top:76px!important}} /* unified quest rows */ .gwQuestList80{display:grid;gap:7px;margin:9px 0 12px} .gwQuestRow80{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;border:1px solid #ead5df;background:linear-gradient(180deg,rgba(255,252,253,.96),rgba(255,242,248,.96));color:#674d5a;box-shadow:0 5px 12px rgba(102,65,83,.07)} .gwQuestRow80 .tag{padding:4px 7px;border-radius:999px;background:#edd8e3;font-size:7px;font-weight:1000;white-space:nowrap}.gwQuestRow80 b{font-size:9px}.gwQuestRow80 small{font-size:7px;color:#947484;font-weight:900}.gwQuestRow80.complete{border-color:#b8dcb9;background:#f1fff2}.gwQuestRow80.classq .tag{background:#ffedbc;color:#7a5b13} #rpgFieldSummary .gwFieldQuestList80{display:grid!important;gap:4px!important;align-content:center!important;text-align:left!important} #rpgFieldSummary .gwFieldQuestList80 b{font-size:8px!important}.gwFieldQuestLine80{font-size:7px!important;line-height:1.35!important;white-space:normal!important} #gwClassQuestGuild79,#gwClassQuestField79{display:none!important} /* queued state only after a target/recipient is locked; no ์˜ˆ์•ฝ badge */ .gwQueueBadge78{display:none!important} /* Village and prayer are true full-page backgrounds */ #rpgVillagePage,#rpgPrayerPage{background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important;background-attachment:scroll!important} #rpgVillagePage::before,#rpgPrayerPage::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,248,251,.08),rgba(255,244,249,.32) 58%,rgba(255,242,247,.55));z-index:0} #rpgVillagePage .screen,#rpgPrayerPage .screen{position:relative;z-index:1} /* equipment/general shop backgrounds intentionally cleared for replacement later */ #rpgShopPage,#rpgGeneralShopPage{background-image:none!important;background:#fff5f8!important} #rpgShopPage::before,#rpgGeneralShopPage::before{display:none!important} /* remove translucent art/shop wrappers */ #rpgShopSelectPage .rpgShopChoiceGrid,#rpgShopPage .rpgMerchantStage,#rpgGeneralShopPage .rpgMerchantStage,.gwSmithHero75.gwSmithHero77,.gwPrayerHero55.gwPrayerHero77{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:transparent!important;box-shadow:none!important} /* shop list scrollbars use app theme */ #rpgShopPage .rpgShopList,#rpgShopPage .rpgInventoryList,#rpgShopPage .rpgShopRebuy,#rpgGeneralShopPage .rpgShopList,#rpgGeneralShopPage .rpgInventoryList{scrollbar-width:thin;scrollbar-color:#d996b1 #f8eaf1} #rpgShopPage .rpgShopList::-webkit-scrollbar,#rpgShopPage .rpgInventoryList::-webkit-scrollbar,#rpgShopPage .rpgShopRebuy::-webkit-scrollbar,#rpgGeneralShopPage .rpgShopList::-webkit-scrollbar,#rpgGeneralShopPage .rpgInventoryList::-webkit-scrollbar{width:7px} #rpgShopPage .rpgShopList::-webkit-scrollbar-track,#rpgShopPage .rpgInventoryList::-webkit-scrollbar-track,#rpgShopPage .rpgShopRebuy::-webkit-scrollbar-track,#rpgGeneralShopPage .rpgShopList::-webkit-scrollbar-track,#rpgGeneralShopPage .rpgInventoryList::-webkit-scrollbar-track{background:#f8eaf1;border-radius:99px} #rpgShopPage .rpgShopList::-webkit-scrollbar-thumb,#rpgShopPage .rpgInventoryList::-webkit-scrollbar-thumb,#rpgShopPage .rpgShopRebuy::-webkit-scrollbar-thumb,#rpgGeneralShopPage .rpgShopList::-webkit-scrollbar-thumb,#rpgGeneralShopPage .rpgInventoryList::-webkit-scrollbar-thumb{background:#d996b1;border-radius:99px} /* unify RPG title bars with field title ornament */ section.page[id^="rpg"] .appbar{justify-content:center!important;align-items:center!important;position:relative!important;min-height:76px!important;height:auto!important;padding:7px 0 2px!important} section.page[id^="rpg"] .appbar>div:nth-child(2){position:relative!important;margin:0 auto!important;min-width:min(292px,76vw)!important;max-width:82%!important;padding:10px 46px 9px!important;text-align:center!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(255,253,249,.99),rgba(255,241,247,.98))!important;border:2px solid #efb7ca!important;box-shadow:0 0 0 4px rgba(255,255,255,.92),0 0 0 5px rgba(239,183,202,.7),0 8px 18px rgba(98,61,80,.10),inset 0 0 0 1px rgba(255,255,255,.95)!important} section.page[id^="rpg"] .appbar>div:nth-child(2)::before,section.page[id^="rpg"] .appbar>div:nth-child(2)::after{content:"โ˜™ ยท โง";position:absolute;top:50%;color:#c8952f;font-size:17px;line-height:1;letter-spacing:-1px;text-shadow:0 1px 0 #fff5c8,0 2px 4px rgba(119,82,26,.15)} section.page[id^="rpg"] .appbar>div:nth-child(2)::before{left:10px;transform:translateY(-50%) rotate(-8deg)}section.page[id^="rpg"] .appbar>div:nth-child(2)::after{right:10px;transform:translateY(-50%) rotate(8deg) scaleX(-1)} section.page[id^="rpg"] .appbar .rpgHeadTitle{color:#634b59!important;text-shadow:none!important;font-size:22px!important;line-height:1.05!important}section.page[id^="rpg"] .appbar .rpgSub{color:#957684!important;text-shadow:none!important;font-weight:950!important;margin-top:3px!important} @media(max-width:390px){section.page[id^="rpg"] .appbar>div:nth-child(2){min-width:min(260px,72vw)!important;padding-left:38px!important;padding-right:38px!important}section.page[id^="rpg"] .appbar .rpgHeadTitle{font-size:19px!important}} /* from css/026_gwV4881FixStyle.css */ /* v4.8.81: all RPG appbar titles share field-title vertical center without colliding with side controls */ section.page[id^="rpg"] .appbar{ position:relative!important;min-height:76px!important;height:76px!important; display:flex!important;align-items:center!important;justify-content:center!important; padding:7px 0 2px!important;box-sizing:border-box!important; } section.page[id^="rpg"] .appbar>div:nth-child(2){ position:absolute!important;left:50%!important;top:7px!important;transform:translateX(-50%)!important; width:min(292px,calc(100% - 116px))!important;min-width:0!important;max-width:none!important; min-height:58px!important;box-sizing:border-box!important;margin:0!important;padding:10px 34px 9px!important; text-align:center!important;border-radius:20px!important; background:linear-gradient(180deg,rgba(255,253,249,.99),rgba(255,241,247,.98))!important; border:2px solid #efb7ca!important; box-shadow:0 0 0 4px rgba(255,255,255,.92),0 0 0 5px rgba(239,183,202,.7),0 8px 18px rgba(98,61,80,.10),inset 0 0 0 1px rgba(255,255,255,.95)!important; z-index:1!important;pointer-events:none!important; } section.page[id^="rpg"] .appbar>div:nth-child(2)::before,section.page[id^="rpg"] .appbar>div:nth-child(2)::after{font-size:16px!important;top:50%!important} section.page[id^="rpg"] .appbar>div:nth-child(2)::before{left:8px!important} section.page[id^="rpg"] .appbar>div:nth-child(2)::after{right:8px!important} section.page[id^="rpg"] .appbar>button:first-child, section.page[id^="rpg"] .appbar>.iconBtn:first-child{position:absolute!important;left:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:4!important} section.page[id^="rpg"] .appbar>*:last-child:not(:nth-child(2)){position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:4!important} #rpgFieldPage .appbar>div:nth-child(2){width:min(292px,86vw)!important;padding:10px 54px 9px!important} @media(max-width:390px){ section.page[id^="rpg"] .appbar>div:nth-child(2){width:min(252px,calc(100% - 104px))!important;padding-left:28px!important;padding-right:28px!important} #rpgFieldPage .appbar>div:nth-child(2){width:min(272px,86vw)!important;padding-left:46px!important;padding-right:46px!important} } /* chapel / blacksmith portraits: closer to equipment-shop composition */ .gwSmithHero75.gwSmithHero77{height:338px!important;min-height:338px!important} .gwPrayerHero55.gwPrayerHero77{height:350px!important;min-height:350px!important} .gwSmithHero77 img{max-width:100%!important;max-height:315px!important;transform:translateY(10px)!important} .gwPrayerArt77{max-width:100%!important;max-height:326px!important;transform:translateY(10px)!important} .gwSmithSpeech77,.gwPrayerSpeech77{top:14px!important;left:12px!important;right:12px!important;z-index:9!important} @media(max-width:390px){ .gwSmithHero75.gwSmithHero77{height:312px!important;min-height:312px!important} .gwPrayerHero55.gwPrayerHero77{height:326px!important;min-height:326px!important} .gwSmithHero77 img{max-height:292px!important}.gwPrayerArt77{max-height:302px!important} } /* from css/027_gwV4882FixStyle.css */ /* v4.8.82: keep chapel / blacksmith portraits fully inside the stage and lower the composition slightly */ .gwSmithHero75.gwSmithHero77{height:390px!important;min-height:390px!important;margin-top:18px!important;overflow:hidden!important} .gwPrayerHero55.gwPrayerHero77{height:402px!important;min-height:402px!important;margin-top:18px!important;overflow:hidden!important} .gwSmithHero77 img{max-height:350px!important;max-width:100%!important;transform:translateY(7px)!important;object-position:center bottom!important} .gwPrayerArt77{max-height:362px!important;max-width:100%!important;transform:translateY(7px)!important;object-position:center bottom!important} .gwSmithSpeech77,.gwPrayerSpeech77{top:18px!important;left:12px!important;right:12px!important} /* prayer actions: larger targets and stronger hierarchy */ .gwPrayerActions55{gap:11px!important;margin-top:4px!important} .gwPrayerActions55 button{min-height:80px!important;padding:14px 15px!important;border-radius:20px!important} .gwPrayerActions55 button strong{font-size:14px!important;line-height:1.25!important} .gwPrayerActions55 button small{font-size:9px!important;line-height:1.45!important;margin-top:6px!important} /* craftable refine recipes float to the top and glow instead of showing a text badge */ .gwSmithRecipe75.craftable82{position:relative;border-color:rgba(242,185,85,.88)!important;box-shadow:0 0 0 1px rgba(255,237,161,.75),0 0 18px rgba(255,209,92,.42),0 8px 20px rgba(122,86,35,.10)!important;animation:gwCraftableGlow82 1.6s ease-in-out infinite alternate} .gwSmithRecipe75.craftable82>summary{background:linear-gradient(90deg,rgba(255,250,226,.96),rgba(255,239,184,.92),rgba(255,250,226,.96))!important} @keyframes gwCraftableGlow82{from{filter:brightness(1);box-shadow:0 0 0 1px rgba(255,237,161,.65),0 0 10px rgba(255,209,92,.26),0 8px 18px rgba(122,86,35,.08)}to{filter:brightness(1.035);box-shadow:0 0 0 2px rgba(255,240,174,.95),0 0 24px rgba(255,205,75,.58),0 9px 22px rgba(122,86,35,.12)}} @media(max-width:390px){ .gwSmithHero75.gwSmithHero77{height:360px!important;min-height:360px!important} .gwPrayerHero55.gwPrayerHero77{height:372px!important;min-height:372px!important} .gwSmithHero77 img{max-height:326px!important}.gwPrayerArt77{max-height:336px!important} .gwPrayerActions55 button{min-height:76px!important;padding:13px 14px!important} } /* from css/028_gwV4883LayoutFixStyle.css */ /* v4.8.83: exact field-title vertical baseline for hub/service pages. Field page starts its appbar at page Y=0, so remove legacy safeTop + screen top padding here. */ :root{--gw83-title-top:0px;--gw83-title-h:76px} #rpgSavePage>.safeTop,#rpgVillagePage>.safeTop,#rpgStatusPage>.safeTop,#rpgCharStatsPage>.safeTop,#rpgCharSkillsPage>.safeTop,#rpgEquipmentPage>.safeTop,#rpgInventoryPage>.safeTop,#rpgShopSelectPage>.safeTop,#rpgShopPage>.safeTop,#rpgGeneralShopPage>.safeTop,#rpgGuildPage>.safeTop,#rpgPartyStatusPage>.safeTop,#rpgInnPage>.safeTop,#rpgPrayerPage>.safeTop,#rpgNpcPage>.safeTop{height:0!important;min-height:0!important} #rpgSavePage>.screen,#rpgVillagePage>.screen,#rpgStatusPage>.screen,#rpgCharStatsPage>.screen,#rpgCharSkillsPage>.screen,#rpgEquipmentPage>.screen,#rpgInventoryPage>.screen,#rpgShopSelectPage>.screen,#rpgShopPage>.screen,#rpgGeneralShopPage>.screen,#rpgGuildPage>.screen,#rpgPartyStatusPage>.screen,#rpgInnPage>.screen,#rpgPrayerPage>.screen,#rpgNpcPage>.screen{padding-top:0!important} #rpgSavePage .appbar,#rpgVillagePage .appbar,#rpgStatusPage .appbar,#rpgCharStatsPage .appbar,#rpgCharSkillsPage .appbar,#rpgEquipmentPage .appbar,#rpgInventoryPage .appbar,#rpgShopSelectPage .appbar,#rpgShopPage .appbar,#rpgGeneralShopPage .appbar,#rpgGuildPage .appbar,#rpgPartyStatusPage .appbar,#rpgInnPage .appbar,#rpgPrayerPage .appbar,#rpgNpcPage .appbar{ margin-top:var(--gw83-title-top)!important;height:var(--gw83-title-h)!important;min-height:var(--gw83-title-h)!important; } /* lock side controls to the same Y center as the title ornament */ #rpgSavePage .appbar>button:first-child,#rpgVillagePage .appbar>button:first-child,#rpgStatusPage .appbar>button:first-child,#rpgCharStatsPage .appbar>button:first-child,#rpgCharSkillsPage .appbar>button:first-child,#rpgEquipmentPage .appbar>button:first-child,#rpgInventoryPage .appbar>button:first-child,#rpgShopSelectPage .appbar>button:first-child,#rpgShopPage .appbar>button:first-child,#rpgGeneralShopPage .appbar>button:first-child,#rpgPartyStatusPage .appbar>button:first-child,#rpgInnPage .appbar>button:first-child,#rpgPrayerPage .appbar>button:first-child,#rpgNpcPage .appbar>button:first-child, #rpgSavePage .appbar>*:last-child:not(:nth-child(2)),#rpgVillagePage .appbar>*:last-child:not(:nth-child(2)),#rpgStatusPage .appbar>*:last-child:not(:nth-child(2)),#rpgCharStatsPage .appbar>*:last-child:not(:nth-child(2)),#rpgCharSkillsPage .appbar>*:last-child:not(:nth-child(2)),#rpgEquipmentPage .appbar>*:last-child:not(:nth-child(2)),#rpgInventoryPage .appbar>*:last-child:not(:nth-child(2)),#rpgShopSelectPage .appbar>*:last-child:not(:nth-child(2)),#rpgShopPage .appbar>*:last-child:not(:nth-child(2)),#rpgGeneralShopPage .appbar>*:last-child:not(:nth-child(2)),#rpgPartyStatusPage .appbar>*:last-child:not(:nth-child(2)),#rpgInnPage .appbar>*:last-child:not(:nth-child(2)),#rpgPrayerPage .appbar>*:last-child:not(:nth-child(2)),#rpgNpcPage .appbar>*:last-child:not(:nth-child(2)){top:38px!important} /* Village: background art + presentation box removed; keep only compact status chips, then menu immediately. */ #rpgVillagePage .rpgVillageHero{padding:0!important;margin:0 0 2px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important} #rpgVillagePage .rpgVillageScene{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important} #rpgVillagePage .rpgVillageHero>.rpgKicker,#rpgVillagePage .rpgVillageHero>.rpgBig{display:none!important} #rpgVillagePage .rpgVillageTop{margin:2px 0 5px!important} #rpgVillagePage .rpgVillageGrid{margin-top:3px!important} @media(max-width:390px){#rpgVillagePage .rpgVillageTop{margin-bottom:4px!important}#rpgVillagePage .rpgVillageGrid{margin-top:2px!important}} /* from css/029_gwV4884PrayerFixStyle.css */ /* v4.8.84: chapel composition. Do not translate the portrait below its clipping box. */ #rpgPrayerPage .gwPrayerHero55.gwPrayerHero77{ height:440px!important; min-height:440px!important; margin-top:30px!important; margin-bottom:18px!important; padding:0 0 10px!important; overflow:visible!important; } #rpgPrayerPage .gwPrayerArt77{ max-height:402px!important; max-width:100%!important; transform:none!important; object-fit:contain!important; object-position:center bottom!important; } #rpgPrayerPage .gwPrayerSpeech77{ top:12px!important; left:12px!important; right:12px!important; } @media(max-width:390px){ #rpgPrayerPage .gwPrayerHero55.gwPrayerHero77{height:414px!important;min-height:414px!important;margin-top:26px!important} #rpgPrayerPage .gwPrayerArt77{max-height:378px!important;transform:none!important} } /* from css/030_gwV4887GiantSlimeBossStyle.css */ /* ===== v4.8.87 giant slime live boss patterns ===== */ #rpgBattleStage{position:relative} #gwGSNotice87{position:absolute;left:50%;top:10px;transform:translateX(-50%) translateY(-8px);z-index:90;width:min(88%,360px);min-height:42px;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(69,29,48,.96),rgba(35,20,39,.97));border:1px solid rgba(255,143,174,.82);color:#fff1f6;font-size:12px;font-weight:1000;text-align:center;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 10px 28px rgba(32,10,24,.30)} #gwGSNotice87.show{opacity:1;transform:translateX(-50%) translateY(0)} #gwGSBreak87{position:absolute;left:50%;top:56px;transform:translateX(-50%);z-index:88;width:min(72%,300px);padding:7px 10px;border-radius:13px;background:rgba(18,24,43,.91);border:1px solid rgba(255,218,132,.72);box-shadow:0 7px 20px rgba(0,0,0,.22);display:none} #gwGSBreak87.show{display:block} #gwGSBreak87 .head{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;color:#ffe9b4;font-size:9px;font-weight:1000} #gwGSBreak87 .track{height:9px;border-radius:99px;overflow:hidden;background:#070c18;border:1px solid rgba(255,255,255,.25)} #gwGSBreak87 .track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff819f,#ffd96e);transition:width .12s linear} #gwGSChain87{display:none;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 8px} #gwGSChain87.show{display:grid} #gwGSChain87 button{min-height:48px;border-radius:14px;border:1px solid rgba(255,220,151,.72);background:linear-gradient(180deg,#344a73,#1a2948);color:#fff4d2;font-size:11px;font-weight:1000;box-shadow:0 6px 14px rgba(0,0,0,.12)} #gwGSChain87 button.def{border-color:rgba(131,239,191,.75);color:#ebfff5;background:linear-gradient(180deg,#2d5d5a,#183d42)} #gwGSChain87 button:active{transform:translateY(1px)} #gwGSBossBuff87{position:absolute;z-index:89;display:none;padding:4px 8px;border-radius:999px;background:#244567;border:1px solid rgba(158,224,255,.78);color:#f1fbff;font-size:8px;font-weight:1000;pointer-events:none;white-space:nowrap;box-shadow:0 5px 12px rgba(0,0,0,.18)} #gwGSBossBuff87.show{display:block;animation:gwGSBuffFloat87 .8s ease-in-out infinite alternate} @keyframes gwGSBuffFloat87{to{translate:0 -4px}} #rpgBattleUnits .gwGSBoss87{overflow:visible!important;will-change:translate} #rpgBattleUnits .gwGSBoss87 .rpgBattleUnitSprite img{width:142px!important;height:142px!important;max-width:none!important;object-fit:contain!important;transform-origin:50% 76%;filter:drop-shadow(0 10px 9px rgba(10,24,42,.30)) drop-shadow(0 0 15px rgba(92,215,255,.26))} #rpgBattleUnits .gwGSBoss87.gwGSFlip87 .rpgBattleUnitSprite img{transform:scaleX(-1)} /* 4.9.78a: fix facing before first attack / AOE animation frame; keep matching facing throughout */ #rpgBattleUnits .gwGSBoss87:is(.gwGSAttack87,.gwGSAoe87) .rpgBattleUnitSprite img{backface-visibility:hidden} #rpgBattleUnits .gwGSBoss87.gwGSAttack87{animation:gwGSAttack87 .78s cubic-bezier(.18,.8,.24,1)} #rpgBattleUnits .gwGSBoss87.gwGSAttack87 .rpgBattleUnitSprite img{animation:gwGSAttackBody87 .78s cubic-bezier(.2,.75,.25,1)} @keyframes gwGSAttack87{0%{translate:0 0}28%{translate:-20px 5px}52%{translate:-48px -5px}75%{translate:-24px 4px}100%{translate:0 0}} @keyframes gwGSAttackBody87{0%{transform:scaleX(-1)}25%{transform:scaleX(-1) scale(1.13,.84)}50%{transform:scaleX(-1) scale(.94,1.12)}100%{transform:scaleX(-1)}} #rpgBattleUnits .gwGSBoss87.gwGSSplit87 .rpgBattleUnitSprite img{animation:gwGSSplit87 .72s ease-in-out infinite alternate} @keyframes gwGSSplit87{0%{transform:scale(.92,1.08);filter:brightness(1.05)}100%{transform:scale(1.15,.86);filter:brightness(1.55) drop-shadow(0 0 22px rgba(142,239,255,.7))}} #rpgBattleUnits .gwGSBoss87.gwGSGuard87 .rpgBattleUnitSprite img{transform:translateY(12px) scale(1.08,.83)!important;filter:drop-shadow(0 0 22px rgba(93,210,255,.55))} #rpgBattleUnits .gwGSBoss87.gwGSAoe87{animation:gwGSAoe87 1.22s cubic-bezier(.2,.8,.22,1)} #rpgBattleUnits .gwGSBoss87.gwGSAoe87 .rpgBattleUnitSprite img{animation:gwGSAoeBody87 1.22s ease} @keyframes gwGSAoe87{0%{translate:0 0}22%{translate:0 14px}45%{translate:-35px -165px}58%{translate:-70px -240px}68%{translate:-75px -240px}86%{translate:-35px 12px}100%{translate:0 0}} @keyframes gwGSAoeBody87{0%{transform:scaleX(-1)}22%{transform:scaleX(-1) scale(1.12,.78)}48%{transform:scaleX(-1) scale(.86)}68%{transform:scaleX(-1) scale(.68);opacity:.15}86%{transform:scaleX(-1) scale(1.13,.78);opacity:1}100%{transform:scaleX(-1)}} #rpgBattleUnits .gwGSBoss87.gwGSWipe87 .rpgBattleUnitSprite img{animation:gwGSWipeCharge87 .75s ease-in-out infinite alternate} @keyframes gwGSWipeCharge87{to{transform:scale(1.08);filter:brightness(1.35) drop-shadow(0 0 28px rgba(255,228,160,.65))}} #rpgBattleUnits .gwGSBoss87.gwGSExplode87 .rpgBattleUnitSprite img{animation:gwGSExplode87 1.15s ease-in-out} @keyframes gwGSExplode87{0%{transform:scale(1);opacity:1}35%{transform:scale(.82,1.18);filter:brightness(1.8)}52%{transform:scale(1.62);filter:brightness(3);opacity:.28}66%{transform:scale(2.1);opacity:0}82%{transform:scale(.25);opacity:0}100%{transform:scale(1);opacity:1}} #rpgBattleUnits .gwGSBoss87.gwGSStun87 .rpgBattleUnitSprite img{animation:gwGSStun87 .16s linear infinite alternate;filter:brightness(.75) saturate(.72)} @keyframes gwGSStun87{from{transform:translateX(-4px) rotate(-2deg)}to{transform:translateX(4px) rotate(2deg)}} #rpgBattleUnits .gwGSHit87{animation:gwGSHit87 .45s ease} @keyframes gwGSHit87{20%{translate:-8px 0;filter:brightness(1.45)}52%{translate:5px 0}100%{translate:0 0;filter:none}} #rpgBattleStage .gwGSSplash87{position:absolute;z-index:85;width:170px;height:170px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.96) 0 8%,rgba(122,221,255,.60) 10% 27%,rgba(84,185,255,.14) 34%,transparent 58%);opacity:0;transform:translate(-50%,-50%) scale(.18)} #rpgBattleStage .gwGSSplash87.show{animation:gwGSSplash87 .9s ease-out} @keyframes gwGSSplash87{0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.1)}} /* from css/031_gwV4926ChainCinematicStyle.css */ /* ===== v4.9.26 chain attack / defense cinematic ===== */ #rpgBattleStage .gwChainCine4926{position:absolute;inset:0;z-index:126;overflow:hidden;pointer-events:none;display:none} #rpgBattleStage .gwChainCine4926.active{display:block} #rpgBattleStage .gwChainCine4926 .dim{position:absolute;inset:0;background:rgba(8,13,28,.52);backdrop-filter:brightness(.72);opacity:0;animation:gwChainDim4926 .72s ease both} #rpgBattleStage .gwChainCine4926 .title{position:absolute;left:50%;top:14px;translate:-50% 0;z-index:12;padding:8px 22px;border-radius:999px;background:rgba(21,29,50,.72);border:1px solid rgba(255,255,255,.44);box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:20px;font-weight:1000;letter-spacing:.12em;color:#fff4d4;text-shadow:0 2px 10px rgba(255,208,96,.54);white-space:nowrap;opacity:0;animation:gwChainTitle4926 .72s ease both} #rpgBattleStage .gwChainCine4926.defense .title{color:#eaf7ff;text-shadow:0 2px 10px rgba(130,210,255,.70)} #rpgBattleStage .gwChainCine4926 .portrait{position:absolute;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));backface-visibility:hidden;will-change:transform,opacity} #rpgBattleStage .gwChainCine4926 .portrait.left{width:49%;height:61%;left:-18%;top:9%;z-index:3;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.14) 0%,rgba(0,0,0,.8) 6%,#000 14%,#000 100%);mask-image:linear-gradient(to right,rgba(0,0,0,.14) 0%,rgba(0,0,0,.8) 6%,#000 14%,#000 100%);animation:gwChainLeft4926 .70s .02s cubic-bezier(.18,.82,.2,1) both} #rpgBattleStage .gwChainCine4926 .portrait.leader{width:67%;height:81%;left:16.5%;top:18.5%;z-index:5;animation:gwChainLeader4926 .70s .04s cubic-bezier(.18,.82,.2,1) both} #rpgBattleStage .gwChainCine4926 .portrait.right{width:49%;height:61%;right:-18%;top:9%;z-index:4;-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.14) 0%,rgba(0,0,0,.8) 6%,#000 14%,#000 100%);mask-image:linear-gradient(to left,rgba(0,0,0,.14) 0%,rgba(0,0,0,.8) 6%,#000 14%,#000 100%);animation:gwChainRight4926 .70s .06s cubic-bezier(.18,.82,.2,1) both} @keyframes gwChainDim4926{0%{opacity:0}18%,76%{opacity:1}100%{opacity:0}} @keyframes gwChainTitle4926{0%{opacity:0;transform:translateY(-12px) scale(.9)}20%,76%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-5px) scale(1.02)}} @keyframes gwChainLeft4926{0%{opacity:0;transform:translateX(-90%) scale(.86)}22%,76%{opacity:1;transform:translateX(0) scale(1.03)}100%{opacity:0;transform:translateX(-14%) scale(1.05)}} @keyframes gwChainLeader4926{0%{opacity:0;transform:translateY(24%) scale(.92)}22%,76%{opacity:1;transform:translateY(0) scale(1.12)}100%{opacity:0;transform:translateY(2%) scale(1.14)}} @keyframes gwChainRight4926{0%{opacity:0;transform:translateX(90%) scaleX(-1) scale(.86)}22%,76%{opacity:1;transform:translateX(0) scaleX(-1) scale(1.03)}100%{opacity:0;transform:translateX(14%) scaleX(-1) scale(1.05)}} #rpgBattleStage .gwChainSlash4926{position:absolute;z-index:145;pointer-events:none;opacity:0;left:var(--gw-chain-x,72%);top:var(--gw-chain-y,42%);width:min(60vw,244px);aspect-ratio:1/1;translate:-50% -50%;background-position:center;background-size:contain;background-repeat:no-repeat;mix-blend-mode:screen;filter:saturate(1.38) brightness(1.16) contrast(1.08) drop-shadow(0 10px 18px rgba(108,190,255,.46))} #rpgBattleStage .gwChainSlash4926.one{background-image:url('../assets/images/0098_a103cc720d.png')} #rpgBattleStage .gwChainSlash4926.two{background-image:url('../assets/images/0099_0c6d41d9de.png')} #rpgBattleStage .gwChainSlash4926.show{animation:gwChainSlashPop4926 .28s ease-out both} @keyframes gwChainSlashPop4926{0%{opacity:0;transform:scale(.44) rotate(-10deg)}26%{opacity:1;transform:scale(1.12) rotate(0deg)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}} #rpgBattleStage .gwChainShield4926{position:absolute;z-index:144;pointer-events:none;opacity:0;left:var(--gw-shield-x,34%);top:var(--gw-shield-y,62%);width:var(--gw-shield-w,304px);aspect-ratio:1.206/1;translate:-50% -50%;background:url('../assets/images/0100_1e1679739b.png') center/contain no-repeat;filter:drop-shadow(0 14px 24px rgba(91,160,255,.32)) saturate(1.08) brightness(1.06)} #rpgBattleStage .gwChainShield4926.show{animation:gwChainShield4926 .62s ease-out both} @keyframes gwChainShield4926{0%{opacity:0;transform:scale(.48)}34%{opacity:1;transform:scale(1.04)}76%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.06)}} /* from css/032_gwV4888ResumeStateFixStyle.css */ /* from css/033_gwV4889BattleEnterFixStyle.css */ /* from css/034_gwV4890ContinuePolicyStyle.css */ /* from css/035_gwV4891BackgroundFixStyle.css */ /* v4.8.91: village background must cover the full page with no white side gutters. */ #rpgVillagePage{ position:relative!important; min-height:100vh!important; width:100%!important; max-width:none!important; background-size:cover!important; background-position:center top!important; background-repeat:no-repeat!important; background-color:#d9e7ef!important; overflow-x:hidden!important; } #rpgVillagePage>.screen{ width:100%!important; max-width:none!important; min-height:100vh!important; margin:0!important; background:transparent!important; } /* If legacy screen/card layers carry an opaque background, keep the full-page art visible. */ #rpgVillagePage .content, #rpgVillagePage .rpgVillageHero, #rpgVillagePage .rpgVillageGrid{ background-color:transparent!important; } /* NPC page uses the same full-page cover rules as the village. */ #rpgNpcPage{ position:relative!important; min-height:100vh!important; width:100%!important; max-width:none!important; background-size:cover!important; background-position:center top!important; background-repeat:no-repeat!important; background-color:#d9e7ef!important; overflow-x:hidden!important; } #rpgNpcPage>.screen{ width:100%!important; max-width:none!important; min-height:100vh!important; margin:0!important; background:transparent!important; } /* from css/036_gwV4892NpcBgForceStyle.css */ #rpgNpcPage{ background-color:#d9e7ef!important; background-size:cover!important; background-position:center top!important; background-repeat:no-repeat!important; background-attachment:scroll!important; } #rpgNpcPage>.screen{ background:transparent!important; background-image:none!important; } /* from css/037_gwV4895BattleUxStyle.css */ /* v4.8.95 battle UX + boss follow-up */ #rpgBattleUnits .gwEliteSlime95{z-index:10!important} #rpgBattleUnits .gwEliteSlime95 .rpgBattleUnitSprite img{filter:drop-shadow(0 8px 8px rgba(68,12,22,.32)) drop-shadow(0 0 10px rgba(255,83,105,.28));} #rpgBattleUnits .rpgBattleUnit2D.enemy.boss.gwGSDevourHeal97{z-index:13!important} #rpgBattleUnits .rpgBattleUnit2D.enemy.boss.gwGSDevourHeal97::after{content:'';position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,rgba(122,255,177,.30) 0%,rgba(99,240,157,.18) 38%,rgba(72,214,132,.10) 58%,rgba(72,214,132,0) 74%);pointer-events:none;animation:gwGSDevourPulse97 .9s ease-out forwards} #rpgBattleUnits .rpgBattleUnit2D.enemy.boss.gwGSDevourHeal97 .rpgBattleUnitSprite img{filter:drop-shadow(0 0 18px rgba(95,235,152,.62)) drop-shadow(0 0 34px rgba(105,255,171,.34)) brightness(1.07) saturate(1.08)!important} @keyframes gwGSDevourPulse97{0%{opacity:0;transform:scale(.72)}18%{opacity:1}100%{opacity:0;transform:scale(1.18)}} .gwCardFx95{display:inline-flex;align-items:center;gap:3px;margin-top:5px;padding:3px 6px;border-radius:999px;background:rgba(45,50,72,.10);border:1px solid rgba(77,72,101,.16);font-size:7px;font-weight:1000;color:#665463;line-height:1;cursor:pointer;position:relative;z-index:4} .gwCardFx95 .buff{color:#297965}.gwCardFx95 .debuff{color:#b64f67} .gwBattlePartyNumbers95{margin-top:4px;font-size:7px;font-weight:950;color:#725c68;line-height:1.35;white-space:nowrap} #gwEffectPop95{position:fixed;z-index:99999;display:none;min-width:150px;max-width:min(280px,80vw);padding:10px 11px;border-radius:13px;background:rgba(30,28,42,.96);border:1px solid rgba(255,255,255,.20);box-shadow:0 12px 30px rgba(0,0,0,.30);color:#fff;font-size:9px;font-weight:850;line-height:1.55;pointer-events:auto} #gwEffectPop95.show{display:block} #gwEffectPop95 .ttl{font-size:9px;font-weight:1000;color:#fff4d2;margin-bottom:5px} #gwEffectPop95 .row{display:flex;gap:7px;align-items:flex-start;padding:3px 0;border-top:1px solid rgba(255,255,255,.07)} #gwEffectPop95 .row:first-of-type{border-top:0}.gwFxBuff95{color:#8ff0ce}.gwFxDebuff95{color:#ff9db2} .gwPenaltyDelta95{display:inline-block;margin-left:4px;color:#df5579!important;font-size:9px!important;font-style:normal;font-weight:1000;white-space:nowrap} .gwPenaltyText95{color:#c55470;font-weight:1000} .gwEncounterArm95{opacity:.62!important} #rpgFormationPage .gwFormationMember56{padding-bottom:17px!important} #rpgFormationPage .gwFormationPenalty96{position:absolute;left:52px;right:16px;bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c55070;font-size:6.5px;font-weight:950;line-height:1.1;text-align:left} #rpgFormationPage .gwFormationPenaltyDetail96{display:flex;flex-wrap:wrap;gap:5px;margin:-1px 0 8px} #rpgFormationPage .gwFormationPenaltyDetail96 span{display:inline-flex;align-items:center;padding:5px 7px;border:1px solid rgba(217,83,114,.25);border-radius:999px;background:rgba(255,229,236,.78);color:#b13e5d;font-size:7px;font-weight:950} #rpgFormationPage .gwPenaltyDelta95{display:inline-block;margin-left:4px;color:#d64769!important;font-size:.78em!important;font-style:normal;font-weight:1000} @media(max-width:390px){#rpgFormationPage .gwFormationPenalty96{left:43px;right:13px;font-size:6px}} /* from css/038_gwV4900Style.css */ #rpgFieldPage #rpgFieldSummary{grid-template-columns:1fr!important}#rpgFieldPage #rpgFieldSummary>span:nth-child(2){display:none!important} #rpgFieldPage #rpgBattleActions{display:grid!important;gap:6px!important}.gwQuestList4900{display:grid;gap:6px;width:100%}.gwQuestRow4900{display:grid;gap:4px;padding:8px 10px;border:1px solid #ecd4df;border-radius:12px;background:rgba(255,250,252,.96);text-align:left;color:#664f5a}.gwQuestRow4900 b{font-size:9px}.gwQuestRow4900 span{font-size:8px;color:#91717f;font-weight:900}.gwQuestRow4900 i{display:block;height:5px;border-radius:99px;background:#eee1e7;overflow:hidden}.gwQuestRow4900 i em{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e79ab8,#c98ee2)}.gwQuestRow4900.classQuest{border-color:#e3d4b5;background:rgba(255,251,240,.96)} #rpgVillagePage{background-size:106% auto!important;background-position:center top!important} section.page[id^="rpg"]>.safeTop{height:0!important;min-height:0!important}section.page[id^="rpg"] .appbar{position:relative!important;margin-top:0!important;height:76px!important;min-height:76px!important;padding:7px 0 2px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}section.page[id^="rpg"] .appbar>div:nth-child(2){position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(72%,300px)!important;text-align:center!important}#rpgBattlePage .rpgBattleTopBar{min-height:46px!important;height:46px!important;margin:0!important;padding:0 10px!important;box-sizing:border-box!important;align-items:center!important} #rpgBattleUnits .rpgBattleUnit2D.party.gwSkillMotion4900 .rpgBattleUnitSprite{animation:gwSkillMotion4900 .48s cubic-bezier(.2,.9,.25,1);transform-origin:center bottom}@keyframes gwSkillMotion4900{0%{transform:translate(0,0) scale(1)}32%{transform:translate(8px,-3px) scale(1.035)}62%{transform:translate(3px,0) scale(1.015)}100%{transform:translate(0,0) scale(1)}} #gwSmithDismantle4900{display:grid;gap:9px}.gwDismantle4900{border:1px solid #ead6df;border-radius:17px;background:#fff;padding:11px;box-shadow:0 7px 16px rgba(118,77,93,.06)}.gwDismantle4900 h3{margin:0 0 4px;font-size:13px;color:#674f5a}.gwDismantle4900 small{display:block;font-size:9px;color:#947985;margin-bottom:8px}.gwDismantleReward4900{padding:8px;border-radius:11px;background:#faf1f5;color:#725a66;font-size:9px;font-weight:900;line-height:1.5;margin-bottom:8px}.gwDismantle4900 button{width:100%;min-height:40px;border:0;border-radius:12px;background:#c88ea8;color:#fff;font-weight:1000}.gwDismantle4900 button:disabled{background:#ddd3d8;color:#9e8e95} /* from css/039_gwV4901Style.css */ /* ===== v4.9.01 Bulk dismantle / bulk sell ===== */ #gwSmithDismantle4900 .gwDismantleToolbar4901{ display:flex;align-items:center;justify-content:space-between;gap:8px; position:sticky;top:0;z-index:8;padding:8px;border-radius:14px; background:rgba(255,247,250,.96);border:1px solid #ead4df;backdrop-filter:blur(6px) } .gwDismantleToolbar4901 .left,.gwDismantleToolbar4901 .right{display:flex;align-items:center;gap:7px} .gwDismantleToolbar4901 button{min-height:38px!important;padding:0 12px!important;border:0!important;border-radius:11px!important;font-weight:1000!important} .gwDismantleToolbar4901 .mode{background:#efe0e7!important;color:#745a67!important} .gwDismantleToolbar4901 .execute{background:#c888a4!important;color:#fff!important} .gwDismantleToolbar4901 .execute:disabled{background:#ddd2d7!important;color:#9d8e95!important} .gwDismantleCount4901{font-size:9px;font-weight:1000;color:#886b78;white-space:nowrap} .gwDismantleCard4901{transition:.15s ease;cursor:pointer} .gwDismantleCard4901.batch-mode{cursor:pointer} .gwDismantleCard4901.selected{ border:2px solid #d17ca4!important; background:linear-gradient(180deg,#fff8fb,#fff0f6)!important; box-shadow:0 0 0 3px rgba(209,124,164,.14),0 8px 18px rgba(118,77,93,.10)!important; transform:translateY(-1px) } .gwDismantleCard4901.selected::before{ content:"โœ“ ์„ ํƒ๋จ";display:inline-flex;margin-bottom:7px;padding:3px 7px;border-radius:99px; background:#d17ca4;color:#fff;font-size:8px;font-weight:1000 } .gwDismantleHint4901{font-size:8px;color:#927582;text-align:center;padding:4px 0 1px} /* Replace old per-item sale row with 5-step control. */ .rpgSellQtyRow.gwSaleRow4901{ display:grid!important;grid-template-columns:minmax(0,1fr);gap:6px!important; padding-top:9px!important } .gwSaleCtrl4901{ display:grid;grid-template-columns:40px 34px minmax(44px,1fr) 34px 40px;gap:4px;align-items:center } .gwSaleCtrl4901 button{ width:100%!important;min-height:34px!important;padding:0!important;margin:0!important; border:1px solid #e3cad5!important;border-radius:9px!important;background:#fff!important; color:#725766!important;font-size:12px!important;font-weight:1000!important } .gwSaleQty4901{ height:34px;display:flex;align-items:center;justify-content:center; border:1px solid #e3cad5;border-radius:9px;background:#fff9fc; color:#654e5a;font-size:13px;font-weight:1000 } .rpgBulkSellBar.gwBulkSell4901{ display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important; position:sticky;bottom:0;z-index:9;padding:8px!important;margin-top:4px; background:rgba(255,247,250,.96)!important;backdrop-filter:blur(6px); border:1px solid #ead4df!important;border-radius:14px!important } .gwBulkGold4901{ min-width:76px;height:38px;padding:0 10px;border-radius:11px; display:flex;align-items:center;justify-content:center; background:#fff4d7;border:1px solid #efdba6;color:#8b6c27;font-size:11px;font-weight:1000 } .gwBulkSell4901 button{ min-height:38px!important;padding:0 14px!important;border:0!important;border-radius:11px!important; background:#d592ad!important;color:#fff!important;font-weight:1000!important } .gwBulkSell4901 button:disabled{background:#d8cfd3!important;color:#9b8f94!important} /* from css/040_gwV4902FieldQuestStyle.css */ #rpgFieldPage .rpgFieldControls{ grid-template-columns:82px minmax(0,1fr)!important; grid-template-areas: "quest quest" "center party"!important; gap:7px!important; } #rpgFieldPage .rpgBattleBox{ grid-area:quest!important; min-height:0!important; padding:8px 10px!important; } #rpgFieldPage .rpgCenterActions{grid-area:center!important} #rpgFieldPage .rpgPartyStatusBox{grid-area:party!important;min-height:170px!important} #rpgFieldPage #rpgBattleActions{display:block!important;width:100%!important} #rpgFieldPage .gwQuestList4900{display:grid!important;gap:5px!important;width:100%!important} #rpgFieldPage .gwQuestRow4900{ display:grid!important; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 92px!important; align-items:center!important; gap:8px!important; min-height:42px!important; padding:7px 9px!important; } #rpgFieldPage .gwQuestRow4900 b, #rpgFieldPage .gwQuestRow4900 span{white-space:normal!important;overflow-wrap:anywhere!important} #rpgFieldPage .gwQuestRow4900 i{width:92px!important;margin:0!important} #rpgFieldPage #rpgBattleHint{margin-top:5px!important;text-align:left!important} @media(max-width:365px){ #rpgFieldPage .rpgFieldControls{grid-template-columns:68px minmax(0,1fr)!important} #rpgFieldPage .gwQuestRow4900{grid-template-columns:minmax(0,1fr) 76px!important} #rpgFieldPage .gwQuestRow4900 span{grid-column:1/2!important} #rpgFieldPage .gwQuestRow4900 i{grid-column:2/3!important;grid-row:1/3!important;width:76px!important} } /* from css/041_gwV4903Style.css */ /* 3. Fixed 430x932 art, scroll UI inside viewport instead of growing the page. */ section.page[id^="rpg"]{ height:100dvh!important;max-height:100dvh!important;overflow:hidden!important; overscroll-behavior:none; } section.page[id^="rpg"]>.content, section.page[id^="rpg"]>.screen{ height:100dvh!important;max-height:100dvh!important; overflow-y:auto!important;overflow-x:hidden!important; box-sizing:border-box!important; scrollbar-width:thin;scrollbar-color:#dba7bd rgba(255,244,249,.38); overscroll-behavior:contain; } section.page[id^="rpg"]>.content::-webkit-scrollbar, section.page[id^="rpg"]>.screen::-webkit-scrollbar{width:5px} section.page[id^="rpg"]>.content::-webkit-scrollbar-track, section.page[id^="rpg"]>.screen::-webkit-scrollbar-track{background:rgba(255,244,249,.32);border-radius:99px} section.page[id^="rpg"]>.content::-webkit-scrollbar-thumb, section.page[id^="rpg"]>.screen::-webkit-scrollbar-thumb{background:linear-gradient(#efbfd2,#cd8eaa);border-radius:99px} #rpgFieldPage .rpgFullPageFieldBg,#rpgBattlePage .rpgFullPageFieldBg{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; object-fit:cover!important;object-position:center top!important; } /* 4/5. Quest -> buttons -> party, all full width. */ #rpgFieldPage .rpgFieldControls{ grid-template-columns:1fr!important; grid-template-areas:"center" "quest" "party"!important; gap:7px!important; } #rpgFieldPage .rpgCenterActions{ grid-area:center!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:7px!important;position:relative!important;min-height:58px!important; } #rpgFieldPage .rpgCenterBtn{ width:100%!important;min-width:0!important;min-height:56px!important; padding:7px 4px!important;border-radius:15px!important; } #rpgFieldPage .rpgBattleBox{grid-area:quest!important} #rpgFieldPage .rpgPartyStatusBox{ grid-area:party!important;min-height:0!important;padding:8px 9px!important; } #rpgFieldPage #rpgPartyStatus{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important; } #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus{ min-width:0!important;margin:0!important;padding:8px 7px!important;border-radius:13px!important; } #rpgFieldPage .gwPartyHead62{gap:4px!important;align-items:center!important} #rpgFieldPage .gwPartyName62{min-width:0!important} #rpgFieldPage .gwPartyNameText63{font-size:9px!important;max-width:54px!important} #rpgFieldPage .gwPartyLevel62 b{font-size:8px!important} #rpgFieldPage .gwPartyLevel62 small{font-size:6.5px!important} #rpgFieldPage .gwPartyVital62{font-size:6.8px!important;gap:3px!important;flex-wrap:wrap!important} #rpgFieldPage .rpgBar{height:5px!important;margin-top:3px!important} #rpgFieldPage .gwPartyPresence64{margin-top:5px!important;font-size:6.5px!important} #rpgFieldPage .gwPresenceText76{font-size:6.5px!important} /* 6. Field item bubble */ .gwFieldItemBubble4903{ position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px); padding:10px;border-radius:16px;border:1px solid #e5cbd7; background:rgba(255,248,251,.98);box-shadow:0 12px 28px rgba(82,49,65,.22); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .gwFieldItemHead4903{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .gwFieldItemHead4903 b{font-size:10px;color:#654f5a} .gwFieldItemHead4903 button{border:0;background:#f0dce5;color:#765d69;border-radius:9px;padding:5px 8px;font-weight:1000} .gwFieldItemGrid4903{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .gwFieldItem4903,.gwFieldItemEmpty4903{ min-height:58px;border:1px solid #ead7df;border-radius:11px;background:#fff;padding:5px 3px;text-align:center } .gwFieldItem4903{color:#6e5662;font-size:7px;font-weight:900} .gwFieldItem4903 strong{display:block;font-size:19px;line-height:1.1} .gwFieldItem4903 small{display:block;font-size:6.5px;margin-top:2px;color:#9b7b89} .gwFieldItemEmpty4903{opacity:.42;background:#f9f3f6} .gwFieldItemUse4903{display:grid;gap:7px} .gwFieldItemUse4903 .selected{padding:8px;border-radius:11px;background:#fff;border:1px solid #ead7df;font-size:9px;color:#705966} .gwFieldItemUse4903 .useBtn{min-height:38px;border:0;border-radius:11px;background:#d78eae;color:#fff;font-weight:1000} .gwFieldTargetGrid4903{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .gwFieldTargetGrid4903 button{min-height:48px;border:1px solid #e3ccd6;border-radius:11px;background:#fff;color:#6c5360;font-weight:1000;font-size:8px} /* 7. Move progress */ #rpgMoveBtn.gwMoving4903{position:relative;overflow:hidden;opacity:.92} #rpgMoveBtn.gwMoving4903::after{ content:"";position:absolute;left:0;bottom:0;height:5px;width:100%; transform-origin:left center;background:linear-gradient(90deg,#e88eb3,#b88ee8); animation:gwMoveProgress4903 var(--gwMoveMs,1500ms) linear forwards } @keyframes gwMoveProgress4903{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* 8. encounter notice */ .gwEncounterNotice4903{ position:absolute;z-index:45;left:50%;top:11px;transform:translateX(-50%); max-width:86%;padding:8px 14px;border-radius:999px; background:rgba(49,34,42,.88);border:1px solid rgba(255,255,255,.54); color:#fff;font-size:10px;font-weight:1000;text-align:center; box-shadow:0 8px 18px rgba(0,0,0,.24);pointer-events:none; animation:gwEncounterNotice4903 2.2s ease forwards; } @keyframes gwEncounterNotice4903{0%{opacity:0;translate:0 -8px}12%,75%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -5px}} /* 9. v4.9.12: legacy auto-toggle hitbox override removed. */ /* 13/14. Never move the positioned unit itself during skill animation. */ #rpgBattleUnits .rpgBattleUnit2D.party.gwSkillMotion4900{animation:none!important} #rpgBattleUnits .rpgBattleUnit2D.party.gwSkillMotion4900 .rpgBattleUnitSprite{ filter:none!important;animation:gwSkillMotion4900 .48s cubic-bezier(.2,.9,.25,1)!important } /* from css/042_gwV4904Style.css */ /* 1. Prayer-style field party cards */ #rpgFieldPage .rpgPartyStatusBox{ min-height:0!important;padding:9px!important;border-radius:18px!important; background:rgba(255,249,252,.96)!important;border:1px solid #ead6df!important; } #rpgFieldPage #rpgPartyStatus{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important; } #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus{ min-width:0!important;padding:9px 8px!important;margin:0!important; border:1px solid #ead6df!important;border-radius:15px!important;background:#fff!important; color:#69515e!important;box-shadow:none!important; } #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyHead62{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:4px!important; } #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwFormationAvatar56, #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .rpgMemberAvatar{ width:30px!important;height:30px!important;flex:0 0 30px!important; } #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyLevel62{margin-left:auto!important;text-align:right!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyVital62{ margin-top:6px!important;display:block!important;font-size:7px!important;line-height:1.55!important; } #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyVital62 span{display:block!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .rpgBar{height:5px!important;margin-top:2px!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyPresence64{margin-top:6px!important} /* 2. Field scrolling allowed, scrollbar invisible */ #rpgFieldPage>.content,#rpgFieldPage>.screen{ scrollbar-width:none!important;-ms-overflow-style:none!important; } #rpgFieldPage>.content::-webkit-scrollbar,#rpgFieldPage>.screen::-webkit-scrollbar{display:none!important;width:0!important;height:0!important} /* 3. Encounter buttons centered */ #rpgFieldPage #rpgCenterActions:has(#rpgEngageBtn){ display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important; } #rpgFieldPage #rpgCenterActions:has(#rpgEngageBtn) .rpgCenterBtn{ width:min(42%,150px)!important;flex:0 1 150px!important;min-height:54px!important; } /* 4. Normal wolf larger than slimes */ #rpgBattleUnits .rpgBattleUnit2D.enemy.gwWolf4904 .rpgBattleUnitSprite img{ width:78px!important;height:72px!important;max-width:none!important;max-height:none!important;object-fit:contain!important; filter:drop-shadow(0 7px 6px rgba(39,33,36,.22))!important; } @media(max-width:390px){ #rpgBattleUnits .rpgBattleUnit2D.enemy.gwWolf4904 .rpgBattleUnitSprite img{width:68px!important;height:64px!important} } /* 5. v4.9.12: legacy row-level auto-toggle override removed. */ /* 6. Victory overlay */ .gwVictory4904{ position:fixed;z-index:99990;inset:0;display:flex;align-items:center;justify-content:center;touch-action:manipulation; background:radial-gradient(circle at 50% 48%,rgba(255,247,219,.12),rgba(20,14,18,.54) 65%,rgba(15,10,13,.72)); cursor:pointer;user-select:none;-webkit-user-select:none; } .gwVictoryBox4904{text-align:center;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.55)} .gwVictoryTitle4904{ font-size:42px;font-weight:1000;letter-spacing:5px; animation:gwVictoryPop4904 .55s cubic-bezier(.2,.9,.25,1); } .gwVictoryTap4904{ margin-top:18px;font-size:11px;font-weight:1000;letter-spacing:1px; animation:gwVictoryBlink4904 .9s ease-in-out infinite alternate; } @keyframes gwVictoryPop4904{0%{opacity:0;transform:scale(.65)}70%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}} @keyframes gwVictoryBlink4904{from{opacity:.28}to{opacity:1}} /* 7. Completed stage-1 mentor marker */ #rpgGuildNpcPage .gwClassQuestBang79.gwStage2Ready4904{ display:grid!important;place-items:center!important; animation:gwBang79 1s ease-in-out infinite!important; } /* from css/043_gwV4905Style.css */ /* 1. Encounter buttons: horizontal row, centered as a pair. */ #rpgFieldPage #rpgCenterActions:has(#rpgEngageBtn){ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:center!important; gap:10px!important; min-height:60px!important; } #rpgFieldPage #rpgCenterActions:has(#rpgEngageBtn) #rpgEngageBtn, #rpgFieldPage #rpgCenterActions:has(#rpgEngageBtn) #rpgAvoidBtn{ position:relative!important; inset:auto!important; width:min(42%,150px)!important; flex:0 1 150px!important; min-height:54px!important; margin:0!important; } /* 2. Hide scrollbars globally while keeping scrolling functional. */ html,body, section.page, section.page>.content, section.page>.screen, [class*="scroll"], [class*="Scroll"]{ scrollbar-width:none!important; -ms-overflow-style:none!important; } html::-webkit-scrollbar,body::-webkit-scrollbar, section.page::-webkit-scrollbar, section.page>.content::-webkit-scrollbar, section.page>.screen::-webkit-scrollbar, [class*="scroll"]::-webkit-scrollbar, [class*="Scroll"]::-webkit-scrollbar{ display:none!important;width:0!important;height:0!important; } /* 3. Victory text floats directly over the battle background. */ .gwVictory4904{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .gwVictoryBox4904{ padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } .gwVictoryTitle4904{ color:#fff7dc!important; font-size:44px!important; letter-spacing:2px!important; text-shadow: 0 2px 0 rgba(112,71,31,.82), 0 0 12px rgba(255,218,119,.86), 0 5px 18px rgba(0,0,0,.46)!important; } .gwVictoryTap4904{ color:#fff!important; text-shadow:0 2px 6px rgba(0,0,0,.72)!important; } /* 4. Never display the old class bang once stage 2+ is accepted. */ #rpgGuildNpcPage .gwClassQuestBang79.gwStageLocked4905{display:none!important} /* 5. One narrative choice at the bottom, instead of generic ๊ณ„์†. */ #rpgGuildNpcPage .rpgGuildNpcChoices.gwStage2Choice4905{ position:absolute!important; left:50%!important; bottom:28px!important; transform:translateX(-50%)!important; width:min(88%,520px)!important; height:auto!important; display:block!important; pointer-events:auto!important; } #rpgGuildNpcPage .rpgGuildNpcChoices.gwStage2Choice4905 button{ position:relative!important; inset:auto!important; width:100%!important; min-height:58px!important; padding:11px 14px!important; border-radius:17px!important; } /* from css/044_gwV4906Style.css */ /* 3. Field history: exactly three visible rows, no internal scroll needed. */ #rpgFieldPage .rpgHistory #rpgFieldHistory{ max-height:none!important;height:auto!important;overflow:hidden!important;padding-right:0!important; } #rpgFieldPage .rpgHistory #rpgFieldHistory .rpgHistoryRow:nth-child(n+4){display:none!important} /* 4. v4.9.12: legacy transparent auto-toggle layer fully removed. */ /* 5. Enemy cards taller so effect badges don't clip. */ #rpgBattlePage .gwEnemyCards53{ grid-template-rows:repeat(2,68px)!important; flex:0 0 141px!important; } #rpgBattlePage .gwEnemyCard53{ height:68px!important; padding:6px 6px!important; overflow:visible!important; } #rpgBattlePage .gwEnemyCard53 .gwCardFx95{ margin-top:5px!important; max-width:100%!important; } #rpgBattlePage .gwEnemyCard53.dead .gwCardFx95{display:none!important} #rpgBattlePage .rpgBattleLower{min-height:500px!important} /* 7. Battle title is true viewport/container center, independent of side spacers. */ #rpgBattlePage .rpgBattleTopBar{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; } #rpgBattlePage .rpgBattleTopBar>div:first-child{position:absolute!important;left:0!important} #rpgBattlePage .rpgBattlePlace{ position:absolute!important; left:50%!important;top:50%!important; transform:translate(-50%,-50%)!important; width:min(72%,300px)!important; margin:0!important;text-align:center!important; } /* 8. Hide every scrollbar, including viewport/responsive resizes. */ *{ scrollbar-width:none!important; -ms-overflow-style:none!important; } *::-webkit-scrollbar{ display:none!important; width:0!important;height:0!important; background:transparent!important; } html,body{overflow-x:hidden!important} /* from css/045_gwV4908Styles.css */ #rpgFieldPage .gwFieldLeaderStage94{position:absolute;left:0;top:28px;bottom:8px;width:48%;display:none;align-items:flex-end;justify-content:flex-start;padding-left:8px;pointer-events:none;overflow:hidden;z-index:2} #rpgFieldPage .gwFieldLeaderStage94.show{display:flex} #rpgFieldPage .gwFieldLeaderStage94 img{display:block;max-width:none;width:86%;height:92%;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 14px 18px rgba(34,22,30,.25));transform-origin:left bottom} #rpgFieldPage .gwFieldLeaderStage94.moving img{animation:gwLeaderWalk94 1.45s ease-in-out infinite} #rpgFieldPage .gwFieldLeaderStage94.encounter img{animation:gwLeaderIdle94 2.4s ease-in-out infinite} #rpgFieldPage .gwFieldLeaderStage94::after{content:"MOVE";position:absolute;left:12px;top:10px;display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:22px;padding:0 10px;border-radius:999px;background:linear-gradient(180deg,rgba(255,251,253,.96),rgba(255,235,244,.92));border:1px solid rgba(228,182,201,.96);box-shadow:0 6px 14px rgba(80,54,67,.10);color:#8c6072;font-size:10px;font-weight:1100;letter-spacing:.8px} #rpgFieldPage .gwFieldLeaderStage94.encounter::after{content:"READY"} #rpgFieldPage .gwEncounterShowcase58.gwEncounterRight94{left:42%;right:8px;top:36px;bottom:8px;justify-content:flex-end;padding-right:4px} #rpgFieldPage .gwEncounterShowcase58.gwEncounterRight94 img{filter:drop-shadow(0 12px 10px rgba(40,25,28,.30))} #rpgFieldPage .gwLeaderBadge94{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:linear-gradient(180deg,#ffe89b,#ffc96a);border:1px solid rgba(181,127,28,.45);box-shadow:0 2px 6px rgba(99,62,18,.16);color:#7a4d00;font-size:10px;font-weight:1200;line-height:1;flex:0 0 auto} #rpgFieldPage .gwLeaderCard94{box-shadow:0 0 0 1px rgba(255,215,110,.32),0 0 0 3px rgba(255,245,186,.22),0 8px 16px rgba(111,78,31,.08)} @keyframes gwLeaderWalk94{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-4px) translateX(2px)}} @keyframes gwLeaderIdle94{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}} /* from css/046_gwV4912ConsolidationStyle.css */ #rpgFieldPage .gwPartyLevel62{display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:center!important} #rpgFieldPage .gwPartyLevel62 .gwLeaderBadge94{margin-top:3px!important;align-self:flex-end!important;min-width:18px!important;height:16px!important;padding:0 5px!important;font-size:9px!important} .gwBuyRow4912{display:grid;grid-template-columns:36px 36px minmax(42px,1fr) 36px 36px;gap:5px;align-items:center;margin:9px 0 7px} .gwBuyRow4912 button{height:32px;border:1px solid #e1c3d0;border-radius:10px;background:#fff7fb;color:#705665;font-weight:1000} .gwBuyQty4912{height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #ecd3de;border-radius:10px;background:#fff;color:#654b59;font-size:12px} .gwBuyExec4912{width:100%!important} #rpgBattlePage .rpgBattleTopBar{min-height:46px!important;height:46px!important;padding:0 10px!important} #rpgBattlePage .gwBattleHud53{z-index:140!important;pointer-events:auto!important} #rpgBattlePage .gwAutoRow53{pointer-events:auto!important} #rpgBattlePage #gwAutoSwitch53{pointer-events:auto!important;cursor:pointer!important;touch-action:manipulation!important} #rpgBattlePage #gwAutoSwitch53::after{pointer-events:none!important} #rpgBattlePage .gwAutoHit4906{display:none!important;pointer-events:none!important} /* from css/047_gwV4915FieldSmithStyle.css */ /* Blacksmith: batch button should look actionable, not disabled. */ #rpgBlacksmithPage .gwDismantleToolbar4901 .mode{ border:1px solid #e5a9c1!important; background:linear-gradient(180deg,#fff7fb,#f5d7e5)!important; color:#785163!important; box-shadow:0 5px 12px rgba(151,89,116,.12)!important; } #rpgBlacksmithPage .gwDismantleToolbar4901 .mode.active{ border-color:#cf789e!important; background:linear-gradient(180deg,#e99aba,#cc789d)!important; color:#fff!important; box-shadow:0 6px 14px rgba(151,74,108,.22)!important; } #rpgBlacksmithPage .gwDismantleToolbar4901 .mode:active{transform:translateY(1px)} /* Blacksmith portrait: give the artwork a little more room and stop clipping the feet. */ #rpgBlacksmithPage .content{padding-top:16px!important} #rpgBlacksmithPage .gwSmithHero75.gwSmithHero77{height:386px!important;min-height:386px!important;margin-top:14px!important;padding-bottom:18px!important} #rpgBlacksmithPage .gwSmithHero77 img{max-height:342px!important;transform:translateY(0)!important;object-position:center bottom!important;filter:none!important} @media(max-width:390px){ #rpgBlacksmithPage .gwSmithHero75.gwSmithHero77{height:368px!important;min-height:368px!important;padding-bottom:16px!important} #rpgBlacksmithPage .gwSmithHero77 img{max-height:330px!important;transform:translateY(0)!important;filter:none!important} } /* Party cards: reserve the same right-side leader slot on every card. */ #rpgFieldPage .gwPartyLevel62{display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:center!important} #rpgFieldPage .gwPartyLevel62 .gwLeaderBadge94{display:none!important} #rpgFieldPage .gwPartyVital62{display:grid!important;grid-template-columns:minmax(0,1fr) 20px!important;align-items:center!important;column-gap:4px!important;min-height:30px!important} #rpgFieldPage .gwPartyVitalText4913{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:0!important} #rpgFieldPage .gwPartyVitalText4913>span{display:block!important;white-space:nowrap!important} #rpgFieldPage .gwLeaderSlot4913{width:20px!important;height:20px!important;display:flex!important;align-items:center!important;justify-content:center!important} #rpgFieldPage .gwLeaderSlot4913 .gwLeaderBadge94{display:inline-flex!important;min-width:18px!important;width:18px!important;height:18px!important;padding:0!important;margin:0!important;font-size:9px!important} #rpgFieldPage .gwLeaderSlot4913 .gwLeaderBadge94.ghost{visibility:hidden!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus{min-height:126px!important;height:126px!important} /* Field leader: idle is the battle-ready pose; only actual move delay uses walking art. */ #rpgFieldPage .gwFieldLeaderStage94.idle::after{content:"WAIT"!important} #rpgFieldPage .gwFieldLeaderStage94.moving::after{content:"MOVE"!important} #rpgFieldPage .gwFieldLeaderStage94.encounter::after{content:"READY"!important} #rpgFieldPage .gwFieldLeaderStage94.idle img{animation:gwLeaderIdle94 2.4s ease-in-out infinite!important} /* from css/048_gwV4916LeaderBadgeStyle.css */ /* v4.9.16: leader badge is visually anchored to the card, not the HP/MP layout. */ #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus{ position:relative!important; } #rpgFieldPage .gwPartyVital62{ display:block!important; min-height:30px!important; padding-right:0!important; } #rpgFieldPage .gwPartyVitalText4913{ display:flex!important; flex-direction:column!important; gap:1px!important; width:100%!important; min-width:0!important; } #rpgFieldPage .gwLeaderSlot4913{ position:absolute!important; right:10px!important; top:43px!important; width:22px!important; height:22px!important; display:flex!important; align-items:center!important; justify-content:center!important; z-index:4!important; pointer-events:none!important; } #rpgFieldPage .gwLeaderSlot4913 .gwLeaderBadge94{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:22px!important; width:22px!important; height:22px!important; padding:0!important; margin:0!important; border-radius:50%!important; font-size:10px!important; line-height:1!important; } #rpgFieldPage .gwLeaderSlot4913 .gwLeaderBadge94.ghost{ display:none!important; } /* from css/049_gwV4917LeaderGlyphStyle.css */ #rpgFieldPage .gwLeaderSlot4913 .gwLeaderBadge94{ display:block!important; box-sizing:border-box!important; text-align:center!important; text-indent:0!important; letter-spacing:0!important; width:22px!important; min-width:22px!important; height:22px!important; line-height:20px!important; padding:0!important; margin:0!important; font-family:Arial,Helvetica,sans-serif!important; font-size:10px!important; font-weight:900!important; } /* from css/050_gwV4920InputLockStyle.css */ html,body,#app,.page,.screen,*{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important} img,svg,canvas{-webkit-user-drag:none!important;user-drag:none!important} input,textarea{cursor:text} /* from css/051_gwV4921PartyStableStyle.css */ #rpgPartyStatusPage .rpgPartyMemberCard{transition:border-color .12s ease,box-shadow .12s ease,background .12s ease} #rpgPartyStatusPage .rpgPartyMemberCard.selected{border-color:#e2a8bf;box-shadow:0 0 0 2px rgba(235,171,198,.18);background:#fffafd} /* from css/052_gwV4922MobileScrollStyle.css */ html,body{overscroll-behavior-y:none!important} section.page[id^="rpg"]>.content, section.page[id^="rpg"]>.screen{ -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; overscroll-behavior-y:contain!important; } /* from css/053_gwV4923BossMechanicStyle.css */ #gwGSTime87{ position:absolute;left:50%;top:56px;transform:translateX(-50%);z-index:88; width:min(72%,300px);padding:7px 10px;border-radius:13px; background:rgba(28,20,44,.93);border:1px solid rgba(192,151,255,.78); box-shadow:0 7px 20px rgba(0,0,0,.22);display:none } #gwGSTime87.show{display:block} #gwGSTime87 .head{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;color:#f0ddff;font-size:9px;font-weight:1000} #gwGSTime87 .track{height:9px;border-radius:99px;overflow:hidden;background:#0a0712;border:1px solid rgba(255,255,255,.24)} #gwGSTime87 .track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c68cff,#ff8fc6);transition:width .08s linear} #gwGSChain87{ display:none!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; width:min(92%,360px)!important; margin:8px auto 10px!important; padding:0!important; position:relative!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; z-index:12!important } #gwGSChain87.show{display:grid!important} #gwGSChain87 button{min-height:46px!important} @media(max-width:520px){ #gwGSChain87{width:calc(100% - 28px)!important;margin:7px auto 9px!important} } /* from css/054_gwV4932Style.css */ /* Seria chapel mission */ #rpgPrayerPage .gwPrayerHero55{position:relative} #gwSeriaName932{position:absolute;left:12px;top:12px;z-index:8;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid rgba(73,157,147,.28);font-size:11px;font-weight:1000;color:#347b73;box-shadow:0 4px 12px rgba(34,92,86,.12)} #gwSeriaQuest932{position:absolute;z-index:10;left:50%;top:32px;transform:translateX(-50%);width:42px;height:42px;border:0;border-radius:50%;background:linear-gradient(180deg,#fff7a6,#ffcb43);color:#765100;font-size:27px;font-weight:1000;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 24px rgba(255,205,61,.8);animation:gwQuestBob932 1s ease-in-out infinite alternate;display:none} #gwSeriaQuest932.show{display:block}@keyframes gwQuestBob932{to{transform:translateX(-50%) translateY(-7px)}} #gwSeriaMissionModal932{position:fixed;z-index:16000;inset:0;background:rgba(14,19,25,.55);display:none;align-items:center;justify-content:center;padding:20px} #gwSeriaMissionModal932.show{display:flex}.gwSeriaMissionCard932{width:min(92vw,390px);padding:18px;border-radius:20px;background:#fff;color:#4e5a61;box-shadow:0 22px 60px rgba(0,0,0,.32);border:1px solid #bfe3df}.gwSeriaMissionCard932 h3{margin:0 0 10px;color:#317a72}.gwSeriaMissionCard932 p{min-height:76px;margin:0 0 14px;line-height:1.65;font-size:13px}.gwSeriaMissionCard932 button{width:100%;min-height:42px;border:0;border-radius:12px;background:#55a99f;color:white;font-weight:1000} /* Wolf King */ #gwWolfNotice932{position:absolute;z-index:135;left:12px;right:12px;top:80px;padding:9px 11px;border-radius:13px;background:rgba(28,27,31,.9);color:#fff;font-size:11px;font-weight:900;line-height:1.45;text-align:center;opacity:0;pointer-events:none;transition:.18s}#gwWolfNotice932.show{opacity:1} #gwWolfAtb932,#gwWolfBreak932{position:absolute;z-index:134;left:12px;right:12px;top:116px;padding:8px 10px;border-radius:14px;background:rgba(20,24,30,.88);border:1px solid rgba(255,255,255,.14);display:none;color:#fff}#gwWolfAtb932.show,#gwWolfBreak932.show{display:block}.gwWolfHudHead932{display:flex;justify-content:space-between;font-size:10px;font-weight:1000;margin-bottom:5px}.gwWolfTrack932{height:12px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.12)}.gwWolfTrack932 i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6e8bff,#d8e8ff);transition:width .08s linear}#gwWolfBreak932 .gwWolfTrack932 i{background:linear-gradient(90deg,#ffb34f,#ff5f52)} #gwWolfParry932,#gwWolfChain932{display:none;gap:8px;width:min(calc(100% - 24px),430px);margin:8px auto 0}#gwWolfParry932.show{display:flex}#gwWolfChain932.show{display:flex}#gwWolfParry932 button,#gwWolfChain932 button{flex:1;min-height:44px;border:0;border-radius:13px;font-weight:1000}#gwWolfParry932 button{background:linear-gradient(180deg,#eaf4ff,#bcd7ff);color:#253752}#gwWolfChain932 button{background:#f1d9a7;color:#5f461e}#gwWolfChain932 button.def{background:#cfe7ff;color:#274766} .gwWolfRage1_932{filter:drop-shadow(0 0 13px rgba(255,218,65,.92))!important}.gwWolfRage2_932{filter:drop-shadow(0 0 16px rgba(255,69,48,.95))!important} .gwWolfMarked932{box-shadow:0 0 0 3px rgba(255,77,77,.72),0 0 25px rgba(255,58,58,.48)!important}.gwWolfMarked932:after{content:'๐ŸŽฏ ์‚ฌ๋ƒฅ๊ฐ';position:absolute;left:50%;top:-18px;transform:translateX(-50%);padding:3px 7px;border-radius:999px;background:#8e2727;color:white;font-size:9px;font-weight:1000;white-space:nowrap} #gwWolfParryFx932{position:absolute;z-index:35;pointer-events:none;width:210px;height:210px;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.65)}#gwWolfParryFx932.show{animation:gwParryFx932 .42s ease-out}@keyframes gwParryFx932{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}} /* from css/055_gwV4933Style.css */ /* Separate Seria conversation */ #rpgSeriaDialoguePage .screen{padding-bottom:28px!important} .gwSeriaDialogueStage933{position:relative;height:500px;margin:8px 0 14px;border:1px solid #ead4dd;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,250,252,.94),rgba(249,232,240,.96));box-shadow:0 12px 28px rgba(117,75,91,.12)} .gwSeriaDialogueStage933 img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom} .gwSeriaNameplate933{position:absolute;left:16px;top:15px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid #d9b8c7;color:#6c4e5d;font-weight:1000;font-size:12px;box-shadow:0 5px 14px rgba(90,58,72,.12)} .gwSeriaDialogueBubble933{position:absolute;left:14px;right:14px;bottom:14px;min-height:94px;padding:14px 15px;border-radius:18px;background:rgba(255,250,253,.94);border:1px solid rgba(217,184,199,.95);box-shadow:0 10px 24px rgba(98,59,76,.14);color:#654d59;font-size:12px;font-weight:850;line-height:1.65} .gwSeriaTriangle933{position:relative;height:156px;margin:2px 0 10px} .gwSeriaTriangle933 button{position:absolute;border:1px solid #ddc6d1;border-radius:17px;background:#fff9fc;color:#6b5260;box-shadow:0 7px 16px rgba(111,74,91,.08);font-weight:1000} .gwSeriaTriangle933 button strong{display:block;font-size:23px;line-height:1.1} .gwSeriaTriangle933 button span,.gwSeriaTriangle933 button small{display:block;margin-top:4px;font-size:10px} .gwSeriaDailyBtn933{left:8px;bottom:4px;width:44%;height:68px}.gwSeriaBackBtn933{right:8px;bottom:4px;width:44%;height:68px} .gwSeriaQuestBtn933{left:50%;top:0;transform:translateX(-50%);width:108px;height:72px;background:linear-gradient(180deg,#fff7a1,#ffd348)!important;border-color:#dfb22c!important;color:#765300!important;display:none} .gwSeriaQuestBtn933.show{display:block;animation:gwSeriaQuestBob933 .9s ease-in-out infinite alternate}@keyframes gwSeriaQuestBob933{to{transform:translateX(-50%) translateY(-5px)}} #gwSeriaQuest932{display:none!important} /* prayer entry speech is transient */ #gwPrayerSpeech77:empty{display:none!important} /* Encounter bosses larger */ #rpgFieldPage .gwEncounterShowcase58.gwEncounterRight94[data-count="1"] img[alt="๋Š‘๋Œ€์™•"],#rpgFieldPage .gwEncounterShowcase58.gwEncounterRight94[data-count="1"] img[alt="๊ฑฐ๋Œ€ ์Šฌ๋ผ์ž„"]{width:86%!important;height:108%!important;transform:translateY(7%) scale(1.14)!important;object-position:right bottom!important} /* Wolf notice: light app theme and only used by rage/qualification */ #gwWolfNotice932{left:18px!important;right:18px!important;top:60px!important;padding:8px 11px!important;border-radius:13px!important;background:rgba(255,249,252,.94)!important;color:#694d5b!important;border:1px solid #e6cbd7!important;box-shadow:0 7px 18px rgba(104,65,82,.12)!important;text-shadow:none!important;font-size:10px!important} #gwWolfAtb932,#gwWolfBreak932{left:18px!important;right:18px!important;top:96px!important;padding:10px 12px!important;border-radius:15px!important;background:rgba(255,250,253,.95)!important;color:#674d5b!important;border:1px solid #e3c7d3!important;box-shadow:0 8px 20px rgba(100,64,80,.13)!important} .gwWolfHudHead932{font-size:12px!important;margin-bottom:7px!important}.gwWolfTrack932{height:18px!important;background:#eadde4!important;border:1px solid #dcc0cc!important} #gwWolfAtb932 .gwWolfTrack932 i{background:linear-gradient(90deg,#9bc2ff,#5c85f2 76%,#ffd96f 94%,#ff9a68)!important} #gwWolfParry932,#gwWolfChain932{width:100%!important;margin:0 0 7px!important;position:relative!important;z-index:70!important} #gwWolfParry932.show,#gwWolfChain932.show{display:flex!important}#gwWolfParry932 button{min-height:50px!important;background:linear-gradient(180deg,#ff8c8c,#e85164)!important;color:white!important;box-shadow:0 7px 16px rgba(197,63,84,.22)!important;font-size:15px!important} /* larger prey mark */ .gwWolfMarked932{box-shadow:0 0 0 4px rgba(255,69,69,.85),0 0 34px rgba(255,53,53,.62)!important} .gwWolfMarked932:after{content:'๐ŸŽฏ ์‚ฌ๋ƒฅ๊ฐ'!important;top:-38px!important;padding:6px 11px!important;border-radius:999px!important;background:#b62f3c!important;font-size:13px!important;box-shadow:0 4px 14px rgba(153,32,45,.35)!important;z-index:180!important} .gwWolfMarked932:before{content:'โ—Ž'!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;color:#ff3c4f!important;font-size:72px!important;font-weight:300!important;text-shadow:0 0 14px rgba(255,45,66,.72)!important;z-index:175!important;pointer-events:none!important} .gwWolfCardMarked933{position:relative!important;box-shadow:0 0 0 2px rgba(229,68,80,.72),0 5px 16px rgba(198,56,74,.14)!important} .gwWolfCardMarked933:after{content:'๐ŸŽฏ ํ‘œ์‹'!important;position:absolute;right:5px;top:4px;padding:3px 6px;border-radius:999px;background:#b72f3d;color:white;font-size:8px;font-weight:1000;z-index:20} /* wolf debuff chips under card badges */ .gwWolfDebuffLine933{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}.gwWolfDebuffLine933 span{padding:2px 5px;border-radius:999px;background:#fff0f2;border:1px solid #e8b8bf;color:#ad3d4c;font-size:6.5px;font-weight:1000} /* low resolution battle scrolling */ #rpgBattlePage>.content{height:100dvh!important;max-height:100dvh!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;grid-template-rows:46px 416px minmax(500px,auto)!important;align-content:start!important;padding-bottom:max(28px,env(safe-area-inset-bottom))!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;overscroll-behavior-y:contain!important} @media(max-height:760px){#rpgBattlePage>.content{grid-template-rows:46px 390px minmax(500px,auto)!important}#rpgBattlePage .rpgBattleStage{height:390px!important;min-height:390px!important}} /* from css/056_gwV4935Style.css */ /* v4.9.35 canonical replacement for v4.9.34 UI fixes. No wolf motion assets here. */ #gwSeriaName932{left:50%!important;right:auto!important;top:auto!important;bottom:10px!important;transform:translateX(-50%)!important;background:rgba(255,255,255,.94)!important;padding:5px 13px!important} #rpgPrayerPage .sectionTitle{display:inline-flex!important;align-items:center!important;margin:5px 0 6px!important;padding:6px 11px!important;border-radius:999px!important;background:rgba(255,255,255,.92)!important;border:1px solid #ead2dd!important;color:#684f5b!important;box-shadow:0 5px 13px rgba(91,57,72,.09)!important} #rpgPrayerParty{padding:10px!important;border-radius:18px!important;background:rgba(255,250,253,.92)!important;border:1px solid #e7ccd8!important;box-shadow:0 8px 20px rgba(94,59,75,.10)!important} #rpgPrayerParty .gwPrayerMember55{background:rgba(255,255,255,.86)!important} .gwPrayerDebuff935{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.gwPrayerDebuff935 span{display:inline-flex;padding:2px 6px;border-radius:999px;background:#fff0f2;border:1px solid #e7b7bf;color:#a83e4d;font-size:7px;font-weight:1000} #rpgSeriaDialoguePage{background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important;background-attachment:scroll!important} #rpgSeriaDialoguePage .screen{padding-bottom:28px!important} #rpgSeriaDialoguePage .appbar{grid-template-columns:40px 1fr 40px!important} .gwSeriaDialogueStage933{position:relative!important;height:520px!important;margin:0 0 8px!important;border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important} .gwSeriaDialogueStage933 img{position:absolute!important;left:50%!important;right:auto!important;top:92px!important;bottom:auto!important;width:92%!important;height:420px!important;transform:translateX(-50%)!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 12px 18px rgba(43,27,34,.20))!important} .gwSeriaDialogueBubble933{position:absolute!important;z-index:5!important;left:12px!important;right:12px!important;top:6px!important;bottom:auto!important;min-height:82px!important;padding:13px 15px!important;border-radius:20px!important;background:rgba(255,252,253,.96)!important;border:1px solid rgba(219,187,201,.96)!important;box-shadow:0 9px 22px rgba(91,55,72,.14)!important;color:#654d59!important;font-size:12px!important;font-weight:850!important;line-height:1.55!important} .gwSeriaDialogueBubble933:after{content:"";position:absolute;left:56%;bottom:-12px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:13px solid rgba(255,252,253,.96)} .gwSeriaNameplate933{left:50%!important;top:auto!important;bottom:4px!important;transform:translateX(-50%)!important;padding:6px 15px!important} .gwSeriaTriangle933.noQuest{height:82px!important;margin-top:0!important}.gwSeriaTriangle933.noQuest .gwSeriaDailyBtn933{left:8px!important;top:0!important;bottom:auto!important;height:68px!important}.gwSeriaTriangle933.noQuest .gwSeriaBackBtn933{right:8px!important;top:0!important;bottom:auto!important;height:68px!important} /* Battle background: full-page battlefield stays visible; only lower command area is opaque. */ #rpgBattlePage>.content{background:transparent!important;padding-bottom:max(72px,env(safe-area-inset-bottom))!important} #rpgBattlePage .rpgBattleLower{background:#fbeaf1!important;min-height:560px!important;padding-bottom:max(92px,env(safe-area-inset-bottom))!important;box-shadow:0 -1px 0 rgba(224,188,203,.45)!important} #rpgBattlePage #rpgBattleFullBg{display:block!important;opacity:1!important} @media(max-height:760px){#rpgBattlePage .rpgBattleLower{min-height:620px!important}} /* Keep Wolf King unit anchor aligned; legacy base sprite is retired while mapped PNG drives visual. */ #rpgBattleUnits .gwWolfBoss4935{transform:translate(-50%,-50%) translateY(24px)!important;overflow:visible!important} #rpgBattleUnits .gwWolfBoss4935 .rpgBattleUnitSprite{overflow:visible!important;align-items:flex-end!important;justify-content:center!important} /* retired legacy base sprite visibility override; exclusive dynamic sprite renderer owns display */ #gwWolfParryJudge935{display:none;margin-top:7px;padding:5px 9px;border-radius:10px;text-align:center;font-size:12px;font-weight:1000;letter-spacing:.2px} #gwWolfParryJudge935.show{display:block;animation:gwWolfJudge935 .55s ease}#gwWolfParryJudge935.perfect{background:#fff2bd;color:#a56300;border:1px solid #f4c84f}#gwWolfParryJudge935.parry{background:#e5f0ff;color:#3c64a0;border:1px solid #a9c8ef}#gwWolfParryJudge935.fail{background:#ffe5e9;color:#a83749;border:1px solid #e8abb4}#gwWolfParryJudge935.input{background:#f5eef8;color:#765777;border:1px solid #d8c3dd}@keyframes gwWolfJudge935{0%{opacity:0;transform:translateY(-3px)}20%,75%{opacity:1;transform:none}100%{opacity:.25}} .gwWolfDebuffLine933 span{font-size:8px!important;padding:3px 6px!important} /* from css/057_inline.css */ @keyframes gwWolfAdvance4940{0%,100%{transform:translate(-50%,-50%) scale(1)}30%,70%{transform:translate(-64%,-50%) scale(1.045)}} #rpgBattlePage .rpgBattleLower{background:#fbeaf1!important;min-height:calc(100dvh - 210px)!important;} #gwWolfParryFx932:not(.show){opacity:0!important;animation:none!important;visibility:hidden!important} .gwStage3Bang52{position:absolute;z-index:30;top:7px;left:50%;transform:translateX(-50%);width:42px;height:42px;border:2px solid #fff6cd;border-radius:50%;background:linear-gradient(180deg,#ffd84f,#f0a51d);color:#6c4310;font-size:25px;font-weight:1000;line-height:1;box-shadow:0 7px 18px rgba(93,59,11,.28),0 0 0 4px rgba(255,255,255,.34);animation:gwBang79 1s ease-in-out infinite;display:none} .gwStage3Bang52{display:none;cursor:pointer;top:92px!important} .gwStage3Bang52.show{display:grid;place-items:center} .gwStage3Bang52::after{content:"";position:absolute;bottom:-7px;left:50%;width:12px;height:12px;background:#f0a51d;transform:translateX(-50%) rotate(45deg);border-right:2px solid #fff6cd;border-bottom:2px solid #fff6cd} @media(max-width:390px){.gwStage3Bang52{top:76px!important;width:36px;height:36px}} /* v4.9.53: keep relation status readable on mentor dialogues */ #rpgGuildNpcPage #rpgGuildNpcTalk .rpgNpcRelationRow{display:flex!important;visibility:visible!important;opacity:1!important;z-index:65!important} #rpgGuildNpcPage .rpgGuildNpcSpeech{text-wrap:pretty;word-break:keep-all;overflow-wrap:break-word} #rpgTravelDots.gwTravel52 i.gwTravelPlayer52{color:#80566a} /* v4.9.54: maintain party-facing wipe illustration */ #rpgBattleUnits .gwGSBoss87.gwGSWipe87 .rpgBattleUnitSprite img{animation:gwGSWipeCharge54 .75s ease-in-out infinite alternate!important;transform:scaleX(-1)!important} @keyframes gwGSWipeCharge54{to{transform:scaleX(-1) scale(1.08);filter:brightness(1.35) drop-shadow(0 0 28px rgba(255,228,160,.65))}} #rpgGeneralShopList .gwBuyQty4912,#rpgGeneralShopList .gwBuyQty4912 button{display:flex;align-items:center;justify-content:center;text-align:center}#rpgGeneralShopList [data-gw-buy-qty],#rpgGeneralShopList [data-general-qty]{text-align:center;line-height:1.2} #rpgFormationPage .gwPositionHelp54{border:1px solid #e8c6d6;border-radius:999px;background:#fff9fc;color:#91617b;min-width:25px;min-height:25px;font-weight:900;margin-left:6px} /* v4.9.54 general shop quantity alignment */ #rpgGeneralShopList .gwBuyRow4912{align-items:center} #rpgGeneralShopList .gwBuyRow4912 .gwBuyQty4912{display:flex;align-items:center;justify-content:center;line-height:1;min-height:32px;box-sizing:border-box} /* v4.9.55 Seria branching narrative */ #gwSeriaPriest54{left:50%!important;right:auto!important;top:0!important;bottom:auto!important;transform:translateX(-50%)!important;width:132px!important;height:70px!important;background:linear-gradient(180deg,#eafff7,#9be2d0)!important;border-color:#4aa794!important;color:#247c69!important;z-index:5} #rpgSeriaDialoguePage .gwSeriaTriangle933:has(#gwSeriaPriest54:not([style*="display: none"])) {height:156px!important} #rpgSeriaDialoguePage .gwSeriaTriangle933:has(#gwSeriaPriest54:not([style*="display: none"])) .gwSeriaDailyBtn933{top:auto!important;bottom:4px!important;left:8px!important} #rpgSeriaDialoguePage .gwSeriaTriangle933:has(#gwSeriaPriest54:not([style*="display: none"])) .gwSeriaBackBtn933{top:auto!important;bottom:4px!important;right:8px!important} .gwPriestStory55{display:flex;flex-direction:column;gap:15px;padding-bottom:25px}.gwPriestScene55{position:relative;overflow:hidden;border-radius:22px;max-height:280px;box-shadow:0 12px 24px #75435c39}.gwPriestScene55 img{width:100%;max-height:280px;object-fit:cover;display:block;mask-image:radial-gradient(ellipse at center,black 46%,transparent 99%)}.gwPriestScene55 span{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:white;text-shadow:0 2px 5px #301d37;font-weight:900}.gwPriestScene55:not(.visible){display:none}.gwPriestText55{background:#fffbfe;border:1px solid #ead0e2;border-radius:20px;padding:22px 16px;line-height:1.85;min-height:135px;color:#594359;font-weight:650;white-space:pre-line}.gwPriestChoices55{display:flex;flex-direction:column;gap:10px}.gwPriestChoices55 button{padding:15px 12px;border-radius:14px;border:1px solid #eac5d8;background:linear-gradient(#fffbff,#fae8f2);color:#795269;font-weight:850;text-align:center} #rpgFormationPage .rpgFormationLegend{position:relative;justify-content:center;align-items:center}#rpgFormationPage .gwPositionHelp54{margin-left:0!important;display:inline-flex;align-items:center;justify-content:center;text-align:center} .gwGuideBackdrop55{position:fixed;inset:0;background:#1d1628a8;z-index:100050;display:flex;align-items:center;justify-content:center;padding:16px}.gwGuideCard55{max-width:470px;width:100%;background:#fffafa;border-radius:24px;padding:22px 16px;color:#634d5c;text-align:center;box-shadow:0 20px 50px #0003}.gwGuideCard55 table{width:100%;border-collapse:collapse;margin:14px auto}.gwGuideCard55 th,.gwGuideCard55 td{border:1px solid #e8cfdd;padding:8px 3px;text-align:center;font-size:12px}.gwGuideCard55 button{border:0;border-radius:12px;padding:12px 22px;background:#eeb8d0;font-weight:bold;color:#6c3f55} #rpgBattlePage .rpgBattleUnit2D.enemy:not(.boss):not(.gwGSBoss87):not(.gwWolf4904) .rpgBattleUnitSprite img{width:105px!important;height:105px!important;max-width:none!important;max-height:none!important;object-fit:contain} /* v4.9.64: local prayer/dialog consistency and leader travel glyph */ #rpgTravelDots.gwTravel52 i.gwTravelPlayer52{display:grid;place-items:center;overflow:visible} #rpgTravelDots .gwTravelLeader64{display:block;width:35px;height:35px;max-width:none;max-height:none;object-fit:cover;object-position:center;border:2px solid #fff;border-radius:50%;background:#fbe8ed;box-shadow:0 1px 5px rgba(72,42,61,.3)} #rpgSeriaRequest64{background-size:cover;background-position:center;background-attachment:scroll} #rpgSeriaRequest64 .appbar{display:flex;align-items:center;justify-content:space-between;text-align:center} #rpgSeriaRequest64 .gwSeriaRequestTitle64{text-align:center;flex:1} #rpgSeriaRequest64 .gwSeriaRequestArt64{position:relative;display:flex;align-items:flex-end;justify-content:center;height:min(46dvh,410px);min-height:230px;margin:12px 0 10px} #rpgSeriaRequest64 .gwSeriaRequestArt64 img{height:100%;max-width:96%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 14px rgba(67,38,56,.22))} #rpgSeriaRequest64 .gwSeriaRequestArt64 span{position:absolute;left:10px;bottom:8px;border-radius:999px;background:#fff9fc;color:#6b5161;padding:7px 15px;border:1px solid #e1bdcd;font-weight:900} #rpgSeriaRequest64 .gwSeriaRequestSpeech64{min-height:96px;padding:18px;border:1px solid #ddbecd;border-radius:20px;background:rgba(255,250,253,.96);color:#644b58;line-height:1.75;font-weight:750;box-shadow:0 6px 18px rgba(76,45,63,.11);word-break:keep-all} #rpgSeriaRequest64 .gwSeriaRequestChoices64{display:grid;gap:9px;margin:12px 0 28px} #rpgSeriaRequest64 .gwSeriaChoiceBtn64{width:100%;min-height:53px;text-align:left;padding:12px 17px;border-radius:16px;border:1px solid #ddc2cf;background:linear-gradient(180deg,#fffdfd,#f9ebf1);color:#694f5d;font-size:14px;font-weight:850;cursor:pointer} #rpgSeriaRequest64 .gwSeriaChoiceBtn64:active{background:#ecd9e3;transform:scale(.99)} @media(max-width:390px){#rpgTravelDots .gwTravelLeader64{width:29px;height:29px}#rpgSeriaRequest64 .gwSeriaRequestArt64{height:35dvh}} /* v4.9.65: seria request and priest story presentation refresh + formation help row */ #rpgSeriaRequest64 .gwSeriaRequestArt64{position:relative!important;height:520px!important;min-height:360px!important;margin:0 0 10px!important;overflow:visible!important} #rpgSeriaRequest64 .gwSeriaRequestArt64 img{position:absolute!important;left:50%!important;bottom:38px!important;transform:translateX(-50%)!important;height:420px!important;max-width:92%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 12px 18px rgba(43,27,34,.20))!important} #rpgSeriaRequest64 .gwSeriaRequestArt64 span{left:50%!important;bottom:0!important;transform:translateX(-50%)!important;padding:6px 15px!important;background:rgba(255,255,255,.94)!important} #rpgSeriaRequest64 .gwSeriaRequestSpeech64{position:absolute!important;z-index:5!important;left:12px!important;right:12px!important;top:6px!important;bottom:auto!important;min-height:82px!important;padding:13px 15px!important;border-radius:20px!important;background:rgba(255,252,253,.96)!important;border:1px solid rgba(219,187,201,.96)!important;box-shadow:0 9px 22px rgba(91,55,72,.14)!important;color:#654d59!important;font-size:12px!important;font-weight:850!important;line-height:1.55!important} #rpgSeriaRequest64 .gwSeriaRequestSpeech64:after{content:"";position:absolute;left:56%;bottom:-12px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:13px solid rgba(255,252,253,.96)} #rpgSeriaRequest64 .gwSeriaRequestChoices64{position:relative!important;height:156px!important;margin:2px 0 20px!important;display:block!important} #rpgSeriaRequest64 .gwSeriaChoiceBtn64{position:absolute!important;border:1px solid #ddc6d1!important;border-radius:17px!important;background:#fff9fc!important;color:#6b5260!important;box-shadow:0 7px 16px rgba(111,74,91,.08)!important;font-weight:1000!important;text-align:center!important;padding:10px 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1.35!important;min-height:68px!important;font-size:13px!important} #rpgSeriaRequest64 .gwSeriaChoiceBtn64.gwChoiceTop64{left:50%!important;top:0!important;transform:translateX(-50%)!important;width:108px!important;height:72px!important;background:linear-gradient(180deg,#fff7d7,#ffe6ef)!important} #rpgSeriaRequest64 .gwSeriaChoiceBtn64.gwChoiceLeft64{left:8px!important;bottom:4px!important;width:44%!important;height:68px!important} #rpgSeriaRequest64 .gwSeriaChoiceBtn64.gwChoiceRight64{right:8px!important;bottom:4px!important;width:44%!important;height:68px!important} #rpgSeriaRequest64 .gwSeriaChoiceBtn64.gwChoiceFull64{left:8px!important;right:8px!important;bottom:4px!important;width:auto!important;height:68px!important} #rpgSeriaRequest64 .gwSeriaChoiceBtn64.gwChoiceWideTop64{left:8px!important;right:8px!important;top:0!important;width:auto!important;height:68px!important} #rpgPriestStory55{background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important;background-attachment:scroll!important} #rpgPriestStory55 .screen{padding-bottom:28px!important} #rpgPriestStory55 .appbar{grid-template-columns:40px 1fr 40px!important} #rpgPriestStory55 .gwPriestStage55{position:relative!important;height:520px!important;margin:0 0 10px!important;overflow:visible!important} #rpgPriestStory55 .gwPriestStage55:before{content:"";position:absolute;inset:0;border-radius:24px;background:linear-gradient(180deg,rgba(255,249,252,.18),rgba(255,249,252,.08) 45%,rgba(255,249,252,.18));pointer-events:none} #rpgPriestStory55 .gwPriestStage55 img{position:absolute!important;left:50%!important;bottom:38px!important;transform:translateX(-50%)!important;height:420px!important;max-width:92%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 12px 18px rgba(43,27,34,.20))!important} #rpgPriestStory55 .gwPriestBubble55{position:absolute!important;z-index:5!important;left:12px!important;right:12px!important;top:6px!important;bottom:auto!important;min-height:82px!important;padding:13px 15px!important;border-radius:20px!important;background:rgba(255,252,253,.96)!important;border:1px solid rgba(219,187,201,.96)!important;box-shadow:0 9px 22px rgba(91,55,72,.14)!important;color:#654d59!important;font-size:12px!important;font-weight:850!important;line-height:1.55!important;white-space:pre-line!important;word-break:keep-all!important} #rpgPriestStory55 .gwPriestBubble55:after{content:"";position:absolute;left:56%;bottom:-12px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:13px solid rgba(255,252,253,.96)} #rpgPriestStory55 .gwPriestName55{position:absolute;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;padding:6px 15px!important;border-radius:999px;background:rgba(255,255,255,.94)!important;border:1px solid #d9b8c7;color:#6c4e5d;font-weight:1000;font-size:12px;box-shadow:0 5px 14px rgba(90,58,72,.12);z-index:5} #rpgPriestStory55 .gwPriestSceneBadge55{position:absolute;right:10px;bottom:44px;max-width:64%;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid #d9b8c7;color:#6c4e5d;font-weight:900;font-size:11px;box-shadow:0 5px 14px rgba(90,58,72,.12);z-index:5;text-align:center} #rpgPriestStory55 .gwPriestChoices55{position:relative!important;height:156px!important;margin:2px 0 24px!important;display:block!important} #rpgPriestStory55 .gwPriestChoices55 button{position:absolute!important;border:1px solid #ddc6d1!important;border-radius:17px!important;background:#fff9fc!important;color:#6b5260!important;box-shadow:0 7px 16px rgba(111,74,91,.08)!important;font-weight:1000!important;text-align:center!important;padding:10px 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1.35!important;min-height:68px!important;font-size:13px!important} #rpgPriestStory55 .gwPriestChoices55 button.gwChoiceTop64{left:50%!important;top:0!important;transform:translateX(-50%)!important;width:108px!important;height:72px!important;background:linear-gradient(180deg,#fff7d7,#ffe6ef)!important} #rpgPriestStory55 .gwPriestChoices55 button.gwChoiceLeft64{left:8px!important;bottom:4px!important;width:44%!important;height:68px!important} #rpgPriestStory55 .gwPriestChoices55 button.gwChoiceRight64{right:8px!important;bottom:4px!important;width:44%!important;height:68px!important} #rpgPriestStory55 .gwPriestChoices55 button.gwChoiceFull64{left:8px!important;right:8px!important;bottom:4px!important;width:auto!important;height:68px!important} #rpgPriestStory55 .gwPriestChoices55 button.gwChoiceWideTop64{left:8px!important;right:8px!important;top:0!important;width:auto!important;height:68px!important} #rpgFormationPage .rpgFormationLegend{gap:8px 6px!important} #rpgFormationPage .gwPositionHelp54{grid-column:1/-1!important;width:100%!important;min-height:38px!important;border-radius:14px!important;padding:0 12px!important;margin-top:6px!important;font-size:13px!important;font-weight:900!important;background:linear-gradient(180deg,#fffdfd,#f7eef4)!important;justify-content:center!important} @media(max-width:390px){#rpgSeriaRequest64 .gwSeriaRequestArt64,#rpgPriestStory55 .gwPriestStage55{height:470px!important;min-height:320px!important}#rpgSeriaRequest64 .gwSeriaRequestArt64 img,#rpgPriestStory55 .gwPriestStage55 img{height:370px!important}#rpgSeriaRequest64 .gwSeriaChoiceBtn64.gwChoiceTop64,#rpgPriestStory55 .gwPriestChoices55 button.gwChoiceTop64{width:118px!important}} /* v4.9.70 Bellmorne scene: foreground reveal, tap bottom dialogue to return */ #rpgPriestStory55 .gwPriestStage55 .gwBelmorneForeground70[hidden]{display:none!important} #rpgPriestStory55 .gwPriestStage55 .gwBelmorneForeground70{position:absolute!important;inset:0!important;z-index:20!important;display:block!important;overflow:hidden!important;border-radius:22px!important;background:#191622!important;box-shadow:0 10px 24px rgba(20,13,32,.22)!important} #rpgPriestStory55 .gwPriestStage55 .gwBelmorneForeground70 .gwBelmorneLandscape70{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;left:0!important;bottom:auto!important;transform:none!important;object-fit:cover!important;object-position:center 45%!important;filter:none!important;border:0!important} #rpgPriestStory55 .gwBelmorneForeground70:after{content:"";position:absolute;inset:48% 0 0;pointer-events:none;background:linear-gradient(0deg,rgba(17,10,24,.70),transparent)} #rpgPriestStory55 .gwBelmorneSpeech70{position:absolute!important;z-index:2!important;bottom:15px!important;left:13px!important;right:13px!important;width:calc(100% - 26px)!important;display:flex!important;flex-direction:column!important;gap:9px!important;padding:14px 16px!important;min-height:84px!important;text-align:left!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.86)!important;background:rgba(255,251,255,.96)!important;color:#614b5e!important;font-size:12px!important;font-weight:800!important;line-height:1.5!important;white-space:pre-line!important;box-shadow:0 7px 28px rgba(0,0,0,.2)!important;touch-action:manipulation!important} #rpgPriestStory55 .gwBelmorneSpeech70 small{font-size:10px!important;text-align:right!important;color:#a76a88!important;font-weight:900!important} #rpgPriestStory55.gwBelmorneViewing70 .gwPriestChoices55{visibility:hidden!important;pointer-events:none!important} #rpgPriestStory55.gwBelmorneViewing70 #gwPriestText55{visibility:hidden!important} /* v4.9.71: keep giant slime chain actions visible above battle commands */ #rpgBattlePage .rpgBattleLower #gwGSChain87{ display:none!important;position:relative!important;bottom:auto!important;z-index:100!important; width:min(96%,430px)!important;margin:10px auto!important;padding:9px!important; grid-template-columns:1fr 1fr!important;gap:9px!important; border:2px solid #edc174!important;border-radius:16px!important; background:rgba(23,32,56,.98)!important;box-shadow:0 6px 22px rgba(0,0,0,.4)!important; } #rpgBattlePage .rpgBattleLower #gwGSChain87.show{display:grid!important} #rpgBattlePage .rpgBattleLower #gwGSChain87 button{min-height:54px!important;font-size:14px!important;touch-action:manipulation} /* v4.9.72 targeted layout; keep existing button aesthetics */ #rpgVillagePage .rpgVillageGrid #rpgVillageHuntBtn{order:20;grid-column:1} #rpgVillagePage .rpgVillageGrid #gwDungeonBtn4972{order:21;grid-column:2} #rpgVillagePage .rpgVillageGrid #rpgVillageNpcBtn{order:19;grid-column:1/-1} #rpgVillagePage .rpgVillageGrid #rpgVillagePrayerBtn{order:0;grid-column:auto} #rpgVillagePage .rpgVillageGrid #rpgVillageInnBtn{order:0} #rpgVillagePage .rpgVillageGrid #rpgVillageGuildBtn{order:0} #gwTrainingBtn4972[hidden]{display:none!important} #gwDungeonBtn4972.gwGuide4972{animation:gwPulse4972 1.25s ease-in-out infinite;position:relative;z-index:3} #gwDungeonBtn4972.gwGuide4972::after{content:'๐Ÿ‘†';position:absolute;right:8px;top:4px;font-size:23px;animation:gwTap4972 .8s ease-in-out infinite;pointer-events:none} @keyframes gwPulse4972{50%{box-shadow:0 0 20px 5px rgba(255,201,83,.85)}} @keyframes gwTap4972{50%{transform:translateY(9px) scale(.92)}} .gwNpcChoices4972{display:flex;flex-direction:column;gap:8px;margin:0 12px 30px} .gwNpcChoices4972 button,.gwChoices4972 button{border:1px solid #e1bdce;background:rgba(255,248,251,.95);border-radius:14px;color:#644254;font-weight:800;min-height:48px;padding:10px 14px;width:100%} .gwScene4972{background-position:center;background-size:cover;background-repeat:no-repeat;background-color:#192436} /* Training/dungeon screen is a flex child: an auto horizontal margin with auto width used to collapse this container to intrinsic (even zero) width once all content became position:absolute. Keep it stretched across the app. */ .gwScene4972 .gwSceneScreen4972{position:relative;width:100%;min-width:0;min-height:100dvh;max-width:650px;margin:0 auto;background:transparent;box-sizing:border-box} #gwTrainingPage4972{background-image:url('../assets/images/training4972.png')} #gwDungeonPage4972,#gwSanctumPage4972{background-image:url('../assets/images/dungeon_entrance4972.png')} .gwScene4972 .appbar{position:relative;z-index:5} .gwScene4972 .rpgHeadTitle,.gwScene4972 .rpgSub{color:white;text-shadow:0 2px 5px #16222d} .gwDungeonList4972{padding:18px 14px} .gwDungeonCard4972{display:block;width:100%;min-height:230px;border:1px solid rgba(240,237,215,.6);border-radius:17px;background:linear-gradient(0deg,rgba(5,15,35,.78),transparent 78%),url('../assets/images/sanctum_card4972.png') center 44%/cover no-repeat;color:white;text-shadow:0 2px 4px black;text-align:left;padding:90px 17px 15px;overflow:hidden} .gwDungeonCard4972 b{display:block;font-size:20px}.gwDungeonCard4972 strong{display:block;font-size:15px;margin-top:6px}.gwDungeonCard4972 small{display:block;margin-top:6px;font-size:12px} .gwDungeonEmpty4972{margin-top:25vh;text-align:center;color:white;font-size:18px;font-weight:900;text-shadow:0 3px 7px #000} .gwSanctumText4972{margin-top:55vh;background:linear-gradient(transparent,rgba(2,8,18,.82));padding:30px 20px;color:white;text-align:center;font-weight:900;text-shadow:0 2px 4px black} .gwSanctumText4972 small{display:block;font-weight:500;margin-top:12px} @media(prefers-reduced-motion:reduce){#gwDungeonBtn4972.gwGuide4972,#gwDungeonBtn4972.gwGuide4972::after{animation:none!important;transition:none!important}} /* v4.9.74 - unified guild/quest/training/dungeon UI. Replaces, not stacks, v4.9.73 rules. */ /* Shared fullscreen guild background: five guild pages + adventurer conversation. */ #rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage{ background-image:url('../assets/images/guild_bright4973.png')!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:scroll!important; } #rpgGuildPage.gwGuildNight4973,#rpgReceptionPage.gwGuildNight4973,#rpgDialoguePage.gwGuildNight4973,#rpgQuestGuidePage.gwGuildNight4973,#rpgQuestAcceptedPage.gwGuildNight4973,#rpgGuildNpcPage.gwGuildNight4973{background-image:url('../assets/images/guild_dark4973.png')!important;} #rpgGuildPage>.screen,#rpgReceptionPage>.screen,#rpgDialoguePage>.screen,#rpgQuestGuidePage>.screen,#rpgQuestAcceptedPage>.screen,#rpgGuildNpcPage>.screen{background:transparent!important;min-height:100dvh!important;position:relative!important;box-sizing:border-box!important;} /* Gradients belong to the full screen rather than a miniature card. */ #rpgGuildPage>.screen::before,#rpgReceptionPage>.screen::before,#rpgDialoguePage>.screen::before,#rpgQuestGuidePage>.screen::before,#rpgQuestAcceptedPage>.screen::before{ content:'';position:absolute;inset:45% 0 0;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(17,11,16,.68));} #rpgGuildPage>.screen>*,#rpgReceptionPage>.screen>*,#rpgDialoguePage>.screen>*,#rpgQuestGuidePage>.screen>*,#rpgQuestAcceptedPage>.screen>*{position:relative;z-index:1;} /* v4.9.81b: ONE authoritative guild-family header, normal document flow. Removes former absolute-position header, fake screen padding, translated back button and horizontally shifted training header that overlapped the guild story panel. */ :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972)>.safeTop{height:0!important;min-height:0!important} :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972)>.screen{padding-top:0!important} :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar{ position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important; transform:none!important;float:none!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) 48px!important; align-items:center!important;justify-items:stretch!important;gap:8px!important; width:100%!important;box-sizing:border-box!important;margin:12px 0 12px!important; padding:0 10px!important;height:84px!important;min-height:84px!important; background:none!important;border:0!important;box-shadow:none!important;z-index:55!important; } :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar>div:nth-child(2){ position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important; float:none!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; box-sizing:border-box!important;width:min(100%,340px)!important;max-width:340px!important;min-width:0!important; height:72px!important;min-height:72px!important;max-height:72px!important;flex:none!important; justify-self:center!important;margin:0!important;padding:8px 10px!important; border-radius:20px!important;border:3px double #cba065!important; background:rgba(255,248,250,.96)!important;box-shadow:0 3px 11px #30202955,inset 0 0 0 2px #fff!important; text-align:center!important; } :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar>.iconBtn{ position:relative!important;inset:auto!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important; transform:none!important;float:none!important;margin:0!important;align-self:center!important;justify-self:start!important; width:42px!important;height:42px!important;min-width:42px!important;z-index:65!important; border-radius:13px!important;background:rgba(255,247,250,.95)!important; border:1px solid #d9adbd!important;color:#9c5a76!important; } :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar>div:last-child{width:42px!important;min-width:0!important;justify-self:end!important} :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar .rpgHeadTitle{margin:0!important;max-width:100%!important;color:#7d3d55!important; text-shadow:0 1px 0 #fff!important;font-weight:1000!important;font-size:clamp(15px,4vw,20px)!important; line-height:1.18!important;white-space:normal!important;overflow-wrap:break-word!important;text-align:center!important} :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar .rpgSub{margin:3px 0 0!important;color:#81556a!important;font-size:clamp(10px,2.3vw,12px)!important; line-height:1.2!important;text-shadow:none!important;white-space:normal!important;text-align:center!important} /* v4.9.81c: guild/dungeon header controls occupy the SAME row as title, not a separate 38px/19px offset. */ :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar>button.iconBtn:first-child{ grid-column:1!important;grid-row:1!important; position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important; transform:none!important;align-self:center!important;justify-self:start!important; } :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar>div:nth-child(2){grid-column:2!important;grid-row:1!important} :is(#rpgGuildPage,#rpgReceptionPage,#rpgDialoguePage,#rpgQuestGuidePage,#rpgQuestAcceptedPage,#rpgGuildNpcPage,#gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972) .appbar>div:last-child{grid-column:3!important;grid-row:1!important;position:relative!important;top:auto!important;left:auto!important;transform:none!important} /* Guild main: deliberately add a visible, readable center story card, unlike previous patch. */ #rpgGuildPage .rpgStoryBox{background:rgba(35,23,32,.77)!important;border:1px solid rgba(249,203,140,.74)!important;border-radius:18px!important;box-shadow:0 9px 20px #120c1a5e!important;padding:18px!important;} #rpgGuildPage .rpgStoryBox,#rpgGuildPage .rpgStoryBox *{color:#fff8ed!important;text-shadow:0 1px 3px #070307!important;} /* Receptionist and speech: remove opaque white stage/card, preserve the image silhouette. */ #rpgReceptionPage .rpgReceptionStage,#rpgDialoguePage .rpgDialogueReceptionStage,#rpgQuestAcceptedPage .rpgAcceptedReceptionStage{ background:none!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;} #rpgReceptionPage .rpgReceptionStage{margin:3px 0 4px!important;padding:58px 0 5px!important;min-height:370px!important;} #rpgReceptionPage .rpgReceptionArt,#rpgDialoguePage .rpgDialogueReceptionArt,#rpgQuestAcceptedPage .rpgAcceptedReceptionArt{background:none!important;border:0!important;box-shadow:none!important;object-fit:contain!important;} #rpgReceptionPage .rpgReceptionName,#rpgDialoguePage .rpgReceptionName{display:block!important;color:#fff!important;text-shadow:0 2px 5px #170712!important;} #rpgReceptionPage .rpgActionStack{position:relative;z-index:4;} #rpgDialoguePage .rpgPanel{background:transparent!important;box-shadow:none!important;border:0!important;} #rpgQuestGuidePage .rpgPanel,#rpgQuestAcceptedPage .rpgPanel{background:rgba(31,25,43,.76)!important;box-shadow:0 7px 23px rgba(0,0,0,.22)!important;border:1px solid rgba(255,238,218,.6)!important;border-radius:20px!important;padding:15px!important;margin:12px 0 18px!important;} #rpgQuestGuidePage .rpgQuestRules{background:rgba(255,248,251,.94)!important;color:#67475a!important;text-shadow:none!important;font-size:11px!important;line-height:1.58!important;} #rpgQuestAcceptedPage .rpgAcceptedTitle{background:rgba(255,249,251,.96)!important;border-radius:12px!important;padding:11px!important;text-align:center!important;color:#654255!important;text-shadow:none!important;} #rpgQuestAcceptedPage .rpgAcceptedQuestBox{font-size:12px!important;line-height:1.6!important;} #rpgQuestGuidePage .rpgBig,#rpgQuestGuidePage .rpgKicker,#rpgQuestGuidePage .sectionTitle{color:#fffaf4!important;text-shadow:0 2px 4px #16101b!important;} /* Guild adventurer conversation: remove scene's secondary small background: parent page has full background. */ #rpgGuildNpcPage .rpgGuildNpcPageScene{position:absolute!important;inset:0!important;min-height:100dvh!important;height:auto!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;background-image:none!important;overflow:hidden!important;} #rpgGuildNpcPage .rpgGuildNpcPageScene::after{content:''!important;position:absolute!important;inset:43% 0 0!important;width:100%!important;height:auto!important;z-index:3!important;pointer-events:none!important;background:linear-gradient(180deg,transparent,rgba(13,9,14,.86))!important;} #rpgGuildNpcPage .rpgGuildNpcPageShade{display:none!important;} #rpgGuildNpcPage .rpgGuildNpcPageContent{position:relative!important;z-index:4!important;min-height:100dvh!important;box-sizing:border-box!important;padding:100px 12px 18px!important;} #rpgGuildNpcPage .rpgGuildNpcStage::after{display:none!important;} /* Training: scene spans the whole page. Back/title float over it. Portrait fades without a box. */ #gwTrainingPage4972,#gwDungeonPage4972,#gwSanctumPage4972{background-size:cover!important;background-position:center center!important;} #gwTrainingPage4972>.screen,#gwDungeonPage4972>.screen,#gwSanctumPage4972>.screen{min-height:100dvh!important;background:transparent!important;position:relative!important;box-sizing:border-box!important;} #gwTrainingPage4972>.screen{padding-top:0!important;overflow:hidden!important;} #gwTrainingPage4972>.screen::after{content:'';position:absolute;z-index:2;pointer-events:none;inset:43% 0 0;background:linear-gradient(180deg,transparent,rgba(8,8,15,.15) 22%,rgba(8,8,15,.87));} #gwTrainingPage4972 .gwDialogArea4972{position:absolute!important;inset:0!important;height:100%!important;min-height:100dvh!important;max-width:none!important;margin:0!important;background:transparent!important;overflow:visible!important;isolation:auto!important;} #gwTrainingPage4972 .gwDialogArea4972::before{display:none!important;content:none!important;} #gwTrainingPage4972 .gwPortrait4972{z-index:3!important;position:absolute!important;left:50%!important;bottom:125px!important;width:min(99%,540px)!important;max-width:99%!important;height:min(72dvh,680px)!important;object-fit:contain!important;object-position:center bottom!important;transform:translateX(-50%)!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 8px 12px #15101840)!important;opacity:0;transition:opacity .26s ease!important;} #gwTrainingPage4972 .gwPortrait4972.gwActive4975{opacity:1!important;} #gwTrainingPage4972 .gwSpeech4972{z-index:6!important;position:absolute!important;left:16px!important;right:16px!important;top:119px!important;bottom:auto!important;box-sizing:border-box!important;width:auto!important;min-height:0!important;max-height:30dvh!important;overflow:visible!important;padding:12px 14px!important;border-radius:19px!important;border:1px solid #e7c6d0!important;background:rgba(255,251,253,.96)!important;box-shadow:0 5px 15px #27132145!important;color:#694659!important;text-shadow:none!important;font-size:13px!important;line-height:1.52!important;word-break:keep-all!important;overflow-wrap:anywhere!important;transition:opacity .20s ease!important;opacity:1!important;} #gwTrainingPage4972 .gwSpeech4972.gwTextFading4975{opacity:0!important;} #gwTrainingPage4972 .gwSpeech4972::after{content:'';position:absolute;left:51%;top:calc(100% - 1px);border:12px solid transparent;border-top-color:#fff8fa;pointer-events:none;} #gwTrainingPage4972 .gwSpeaker4972{z-index:6!important;position:absolute!important;left:50%!important;right:auto!important;bottom:111px!important;transform:translateX(-50%)!important;min-width:98px!important;text-align:center!important;font-size:13px!important;color:#fff!important;text-shadow:0 1px 3px #09040c!important;} #gwTrainingPage4972 .gwChoices4972{z-index:7!important;position:absolute!important;left:16px!important;right:16px!important;bottom:19px!important;display:flex!important;justify-content:center!important;gap:8px!important;} #gwTrainingPage4972 .gwChoices4972 button{width:100%!important;min-height:57px!important;max-width:none!important;padding:10px 12px!important;border-radius:15px!important;font-size:13px!important;line-height:1.4!important;white-space:normal!important;box-sizing:border-box!important;} #gwDungeonPage4972 .gwDungeonList4972{padding:8px 16px 32px!important;} /* Seria prayer and dialogue: identical portrait height, name badge and color. */ #rpgPrayerPage .gwPrayerHero77 .gwPrayerArt77,#rpgSeriaDialoguePage .gwSeriaDialogueStage933 #gwSeriaDialogueArt933{height:min(43dvh,400px)!important;max-height:400px!important;width:auto!important;max-width:96%!important;object-fit:contain!important;object-position:center bottom!important;} #rpgPrayerPage .gwPrayerHero77{position:relative!important;min-height:340px!important;display:flex!important;justify-content:center!important;align-items:flex-end!important;} #rpgPrayerPage .gwPrayerName4974,#rpgSeriaDialoguePage .gwSeriaNameplate933,#rpgPriestStory55 .gwPriestName55{ position:absolute!important;left:50%!important;right:auto!important;bottom:4px!important;top:auto!important;transform:translateX(-50%)!important;min-width:67px!important;text-align:center!important;box-sizing:border-box!important;background:rgba(255,247,251,.95)!important;color:#6c4057!important;border:1px solid #d5acbd!important;padding:6px 13px!important;border-radius:999px!important;font-weight:900!important;font-size:12px!important;box-shadow:0 4px 12px #33202e44!important;z-index:7!important;} #rpgSeriaDialoguePage .gwSeriaDialogueStage933 img{top:90px!important;height:min(43dvh,400px)!important;} #rpgPriestStory55 #gwPriestPortrait55{height:min(43dvh,400px)!important;max-height:400px!important;} /* Bellmorne establishing shot: caption plus three interactive choices. Not a click-to-close overlay. */ #rpgPriestStory55 .gwBelmorneForeground70{overflow:hidden!important;} #rpgPriestStory55 .gwBelmorneSpeech70{z-index:3!important;bottom:157px!important;max-height:160px!important;overflow:auto!important;text-align:left!important;cursor:default!important;pointer-events:none!important;} #rpgPriestStory55 .gwBelmorneChoices4974{position:absolute;z-index:8;left:13px;right:13px;bottom:12px;display:grid;grid-template-columns:1fr;gap:5px;max-height:152px;overflow:auto;} #rpgPriestStory55 .gwBelmorneChoices4974 button{min-height:42px;border:1px solid #d3a3b8;border-radius:12px;background:rgba(255,249,252,.97);color:#694156;font-size:12px;font-weight:800;padding:8px 10px;text-align:center;cursor:pointer;} #rpgPriestStory55.gwBelmorneViewing70 #gwPriestText55{visibility:hidden!important;} #rpgPriestStory55.gwBelmorneViewing70 #gwPriestChoices55{visibility:hidden!important;pointer-events:none!important;} @media(max-width:375px){#gwTrainingPage4972 .gwSpeech4972{font-size:12px!important;top:105px!important}#gwTrainingPage4972 .gwPortrait4972{height:67dvh!important}} @media(prefers-reduced-motion:reduce){#gwTrainingPage4972 .gwPortrait4972{transition:none!important}} /* v4.9.77: field party card readable vertical layout; only one authoritative override block */ #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus{min-height:192px!important;padding:10px 7px!important;display:flex!important;flex-direction:column!important;gap:3px!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyHead62{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;min-width:0!important;min-height:30px!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyName62{flex:1 1 auto!important;min-width:0!important;gap:4px!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyNameText63{max-width:none!important;min-width:0!important;flex:1 1 auto!important;font-size:10px!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.17!important;overflow:visible!important;text-overflow:clip!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyLevel62{display:flex!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important;margin:4px 0 3px!important;gap:3px!important;min-width:0!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyLevel62 b{font-size:9px!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyLevel62 small{font-size:8px!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.18!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyVital62{display:block!important;min-height:15px!important;margin:3px 0 1px!important;padding:0!important;font-size:8px!important;line-height:1.3!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwLeaderSlot4913{position:static!important;inset:auto!important;width:auto!important;height:auto!important;flex:0 0 auto!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .gwPartyPresence64{margin-top:auto!important;font-size:7px!important;min-height:17px!important} #rpgFieldPage #rpgPartyStatus>.rpgPartyStatus .rpgBar{height:5px!important;min-height:5px!important;margin:1px 0!important} /* Keep the training background and header, without showing departed adventurers. */ #gwTrainingPage4972 .gwDialogArea4972[hidden],#gwTrainingPage4972 .gwTrainingUnavailable4978[hidden]{display:none!important} #gwTrainingPage4972 .gwTrainingUnavailable4978{position:relative;z-index:8;margin:clamp(175px,32vh,290px) 20px 0;padding:24px 16px;border-radius:18px;border:1px solid #dcc4d0;background:rgba(255,250,252,.94);box-shadow:0 6px 20px #23182135;text-align:center;color:#75465d;display:flex;flex-direction:column;gap:10px;line-height:1.5} #gwTrainingPage4972 .gwTrainingUnavailable4978 strong{font-size:16px} #gwTrainingPage4972 .gwTrainingUnavailable4978 small{font-size:12px;opacity:.78}