html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

body{
background:linear-gradient(
180deg,
#0b1830,
#13274f,
#0b1830
);
margin:0;
font-family:Arial, sans-serif;
text-align:center;
color:white;
padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
padding-left:env(safe-area-inset-left,0px);
padding-right:env(safe-area-inset-right,0px);
}

header{

width:100%;
max-width:520px;
margin:0 auto;
padding:0 12px;
box-sizing:border-box;

}

.header-auth-corner{

position:fixed;
top:max(8px,env(safe-area-inset-top));
right:max(12px,env(safe-area-inset-right));
z-index:200000;
isolation:isolate;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
max-width:min(320px,calc(100vw - 24px));
pointer-events:none;

}

.header-auth-corner .header-user-info{

pointer-events:auto;

}

.header-user-info{

margin:0;
padding:10px 14px;
max-width:min(240px,calc(100vw - 32px));
font-size:0.9rem;
font-weight:700;
color:#e2e8f0;
text-align:right;
background:rgba(15,23,42,0.92);
border:1px solid rgba(251,191,36,0.35);
border-radius:12px;
box-shadow:0 4px 16px rgba(0,0,0,0.35);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
box-sizing:border-box;

}

/* LOADER  */
.loader{

position:fixed;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:70px;
height:70px;

border:7px solid rgba(255,255,255,0.2);
border-top:7px solid #ffd700;

border-radius:50%;

animation:spin 1s linear infinite;

z-index:999;

}   

@keyframes spin{

0%{transform:translate(-50%,-50%) rotate(0deg);}
100%{transform:translate(-50%,-50%) rotate(360deg);}

}

.hidden{
display:none;
}

/* LOGO */

.logo{
width:clamp(168px,48vw,248px);
height:auto;
margin-top:0;
display:block;
}

/* Logo centered; daily quest compact panel left (same row) */
.logo-quest-row{

display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:start;
width:100%;
max-width:520px;
gap:6px 8px;
box-sizing:border-box;

}

.logo-quest-row-logo{

grid-column:2;
display:flex;
justify-content:center;
min-width:0;

}

.logo-quest-row .daily-quest-dock{

grid-column:1;
justify-self:start;
align-self:start;

}

/* PACK BUTTON */

.pack-area{

display:flex;

justify-content:center;

width:100%;

}

.booster{

position:relative;
overflow:hidden;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.03) 35%,
transparent 52%
),
radial-gradient(
ellipse 130% 90% at 32% -8%,
rgba(253,230,138,0.2) 0%,
transparent 52%
),
linear-gradient(
165deg,
#4a6fc4 0%,
#3557a8 28%,
#243a72 62%,
#152447 100%
);

color:#fff;

border:2px solid rgba(255,212,59,0.9);

padding:14px 32px;

font-size:16px;
font-weight:800;

border-radius:16px;

cursor:pointer;

letter-spacing:0.06em;

text-shadow:
0 1px 2px rgba(0,0,0,0.45),
0 0 18px rgba(255,212,59,0.25);

box-shadow:
0 0 0 1px rgba(255,255,255,0.07) inset,
0 1px 0 rgba(255,255,255,0.14) inset,
0 6px 0 #0c1424,
0 10px 28px rgba(0,0,0,0.5),
0 0 32px rgba(255,212,59,0.16);

transition:
transform 0.2s ease,
box-shadow 0.22s ease,
border-color 0.2s ease,
filter 0.2s ease;

}

.booster:hover{

transform:translateY(-2px);

border-color:#fde68a;

filter:brightness(1.05);

box-shadow:
0 0 0 1px rgba(255,255,255,0.09) inset,
0 1px 0 rgba(255,255,255,0.16) inset,
0 7px 0 #0a121f,
0 14px 36px rgba(0,0,0,0.55),
0 0 40px rgba(253,230,138,0.28);

}

.booster:active{

transform:translateY(4px);

filter:brightness(0.98);

box-shadow:
0 0 0 1px rgba(0,0,0,0.25) inset,
0 2px 0 #070c14,
0 6px 18px rgba(0,0,0,0.45),
0 0 20px rgba(255,212,59,0.12);

}

.booster:disabled,
.booster[disabled]{

opacity:0.48;
cursor:not-allowed;
transform:none;
filter:grayscale(0.12) brightness(0.92);
border-color:rgba(255,255,255,0.18);
color:#94a3b8;
text-shadow:none;
box-shadow:
0 3px 0 #1a2744,
0 4px 14px rgba(0,0,0,0.35);

}

.booster:focus-visible{

outline:2px solid #fde68a;
outline-offset:4px;

}

.booster.booster--login-prompt{

background:#fff;
color:#1a1a1a;
border:2px solid rgba(60,60,60,0.28);
text-shadow:none;
letter-spacing:0.02em;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
box-shadow:
0 0 0 1px rgba(0,0,0,0.06) inset,
0 4px 0 #c5c5c5,
0 8px 24px rgba(0,0,0,0.35);

}

.booster.booster--login-prompt:hover{

transform:translateY(-2px);
filter:brightness(1.02);
border-color:rgba(40,40,40,0.45);
box-shadow:
0 0 0 1px rgba(0,0,0,0.08) inset,
0 5px 0 #b0b0b0,
0 12px 28px rgba(0,0,0,0.4);

}

.booster.booster--login-prompt:active{

transform:translateY(3px);
filter:brightness(0.98);
box-shadow:
0 0 0 1px rgba(0,0,0,0.12) inset,
0 2px 0 #9ca3af,
0 4px 14px rgba(0,0,0,0.3);

}

.booster.booster--login-prompt:focus-visible{

outline:2px solid #4285f4;
outline-offset:4px;

}


/* CARD AREA (booster pack — 5 cards must fit viewport width) */

.cards{
position:relative;
display:flex;
flex-flow:row wrap;
justify-content:center;
align-content:flex-start;
align-items:flex-start;
gap:10px;
width:100%;
max-width:min(920px,calc(100vw - 16px));
margin-left:auto;
margin-right:auto;
min-width:0;
min-height:200px;
height:auto;
margin-top:clamp(8px,2vh,16px);
padding:0 8px 12px;
box-sizing:border-box;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
}

/* CARD STACK */

.card-container{
position:relative;
perspective:1000px;
flex:1 1 0;
min-width:0;
max-width:160px;
box-sizing:border-box;
}

/* CARD 3D */

.card-inner{
width:100%;
height:auto;
aspect-ratio:2 / 3;
position:relative;
transform-style:preserve-3d;
transition:transform 0.6s;
}

.card-container.flip .card-inner{
transform:rotateY(180deg);
}

.card-container.flip .card-inner{
transform:rotateY(180deg);
}

.card-front,
.card-back{
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
}

.card-front img{
width:100%;
height:100%;
border-radius:12px;
}

.card-back{
transform:rotateY(180deg);
}

.cards .card-back > div{
width:100%;
height:100%;
min-height:0;
box-sizing:border-box;
}

/* MINI CARD */

.mtg-card-mini{

width:160px;
height:240px;

background:#e9dcc0;

border:6px solid #5b3a1f;
border-radius:12px;

box-shadow:0 8px 20px rgba(0,0,0,0.5);

padding:6px;

display:flex;
flex-direction:column;
justify-content:space-between;

font-size:12px;
color:black;
}

/* Pack row: mini card fills scaled .card-inner (not fixed 160×240) */
.cards .mtg-card-mini{
width:100%;
height:100%;
max-width:none;
min-height:0;
box-sizing:border-box;
border-width:clamp(3px,1.2vw,6px);
padding:clamp(3px,1vw,6px);
font-size:clamp(8px,2.8vw,12px);
}

.cards .mtg-title-mini{
font-size:clamp(8px,2.8vw,12px);
padding:2px 4px;
}

.cards .mtg-art-mini{
margin:clamp(2px,1vw,6px) 0;
min-height:0;
flex:1 1 0;
}

.cards .mtg-art-mini img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:cover;
display:block;
}

.cards .mtg-rarity-mini{
font-size:clamp(7px,2.2vw,11px);
padding:2px;
}

.card-detail{
box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

/* TITLE */

.mtg-title-mini{

font-weight:bold;
font-size:12px;

background:#d8caa4;

padding:4px;

border-radius:4px;

text-align:center;

}

/* IMAGE */

.mtg-art-mini{

flex:1;

display:flex;
align-items:center;
justify-content:center;

margin:6px 0;

}

.mtg-art-mini img{

max-width:100%;
max-height:120px;

object-fit:cover;

border:3px solid #7b5c3a;

}

/* RARITY */

.mtg-rarity-mini{

text-align:center;

background:#d8caa4;

border-radius:4px;

font-weight:bold;

padding:3px;

}

/* RARITY FRAME */

.mtg-card-mini.SSR{
border-color:gold;
box-shadow:0 0 15px gold;
}

.mtg-card-mini.SR{
border-color:#ea580c;
box-shadow:0 0 12px rgba(234,88,12,0.35);
}

.mtg-card-mini.UC{
border-color:#7c3aed;
}

.mtg-card-mini.C{
border-color:#5b3a1f;
}

/* SSR GLOW */

.ssr-glow{
animation:ssrGlow 2s infinite alternate;
}

@keyframes ssrGlow{

0%{
box-shadow:0 0 10px gold;
}

100%{
box-shadow:0 0 25px gold;
}

}

/* DETAIL CARD */

.card-detail{

width:320px;

background:#f6f0dc;
border-radius:18px;

padding:12px;
border:6px solid #b89c6a;
box-shadow:0 10px 30px rgba(0,0,0,0.4);

font-family:serif;
margin:auto;

}

/* TITLE */

.card-title{

background:#d8caa4;
padding:6px 10px;

border-radius:6px;

font-weight:bold;

display:flex;
justify-content:space-between;

color:black;

}

.card-detail .card-text{
margin-top:8px;
padding:10px 12px;
border-radius:8px;
line-height:1.45;
font-size:14px;
font-family:Arial,sans-serif;
text-align:left;
background:#f3ead4;
color:#1a1520;
}

/* IMAGE */

.card-art{

height:320px;

display:flex;
align-items:center;
justify-content:center;

background:#111;

border:4px solid #7b5c3a;

overflow:hidden;

}

.card-art img{

max-width:100%;
max-height:100%;

object-fit:contain;

}

/* STATS */

.card-stats{

margin-top:8px;

background:#d8caa4;

padding:6px;

border-radius:6px;

text-align:center;

font-weight:bold;
color:black;

}

.card-detail-actions{
margin-top:12px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
text-align:center;
}

.card-detail-actions > a:first-of-type{
color:#1d4ed8;
font-weight:600;
font-size:14px;
font-family:Arial,sans-serif;
}

.card-share-fb{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 20px;
border-radius:10px;
border:none;
background:#1877f2;
color:#fff;
font-size:14px;
font-weight:700;
font-family:Arial,sans-serif;
cursor:pointer;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
box-shadow:0 2px 8px rgba(24,119,242,0.35);
}

.card-share-fb:hover{
background:#166fe5;
color:#fff;
}

.card-share-fb:active{
opacity:0.92;
}


/* ===== FACTION BACKGROUND ONLY ===== */

.card-detail.person{
background:#dbeafe;
}

.card-detail.place{
background:#dcfce7;
}

.card-detail.food{
background:#ffedd5;
}

.card-detail.history{
background:#fef9c3;
}

.card-detail.culture{
background:#fce7f3;
}

.card-detail.company{
background:#e0e7ff;
}

.card-detail.event{
background:#fee2e2;
}

.card-detail.others{
background:#e5e7eb;
}

/* ===== TEXT PANEL COLOR ===== */.card-detail.person .card-text{
background:#bfdbfe;
color:#111827;
}

.card-detail.place .card-text{
background:#bbf7d0;
color:#064e3b;
}

.card-detail.food .card-text{
background:#fed7aa;
color:#7c2d12;
}

.card-detail.history .card-text{
background:#fef08a;
color:#713f12;
}

.card-detail.culture .card-text{
background:#fbcfe8;
color:#831843;
}

.card-detail.company .card-text{
background:#c7d2fe;
color:#1e3a8a;
}

.card-detail.event .card-text{
background:#fecaca;
color:#7f1d1d;
}

.card-detail.others .card-text{
background:#d1d5db;
color:#1f2933;
}

/* RARITY BADGE */

.rarity{

font-size:12px;

padding:2px 8px;

border-radius:8px;

background:#444;

color:white;

}

.rarity.SSR{
background:gold;
color:black;
}

.rarity.SR{
background:linear-gradient(135deg,#fb923c,#ea580c);
color:#1a0a00;
font-weight:800;
}

.rarity.Uncommon{
background:#0d9488;
color:#ecfdf5;
font-weight:700;
}

.rarity.UC{
background:#7c3aed;
}

.rarity.C{
background:#777;
}

.rarity.Common{
background:#4b5563;
}

.rarity.Rare{
background:#1d4ed8;
}

.rarity.Epic{
background:#7c3aed;
}

.rarity.Legendary{
background:linear-gradient(135deg,#fde047,#ca8a04);
color:#1a1005;
font-weight:bold;
}

/* ===== DETAIL RARITY BORDER ===== */

/* viewer rarity color */

.card-detail.C{
background:#efe4cf;
}

.card-detail.UC{
background:#efe4cf;
border-color:#7d4cff;
}

.card-detail.SR{
background:#efe4cf;
border-color:#ea580c;
box-shadow:0 0 18px rgba(234,88,12,0.35);
}

.card-detail.Uncommon{
background:#efe4cf;
border-color:#0f766e;
}

.card-detail.SSR{
background:#efe4cf;
border-color:#ff3ad8;
box-shadow:0 0 25px #ff3ad8;
}

.card-detail.Common{
background:#efe4cf;
border-color:#5b3a1f;
}

.card-detail.Rare{
background:#efe4cf;
border-color:#1d4ed8;
}

.card-detail.Epic{
background:#efe4cf;
border-color:#7d4cff;
}

.card-detail.Legendary{
background:#efe4cf;
border-color:#ca8a04;
box-shadow:0 0 20px rgba(202,138,4,0.45);
}



/* ===== RARITY ===== */

.mtg-card-mini.C{
border-color:#5b3a1f;
}

.mtg-card-mini.UC{
border-color:#7c3aed;
}

.mtg-card-mini.SR{
border-color:#ea580c;
box-shadow:0 0 14px rgba(234,88,12,0.4);
}

.mtg-card-mini.Uncommon{
border-color:#0d9488;
}

.mtg-card-mini.SSR{
border-color:gold;
box-shadow:0 0 18px gold;
}

.mtg-card-mini.Common{
border-color:#5b3a1f;
}

.mtg-card-mini.Rare{
border-color:#1d4ed8;
}

.mtg-card-mini.Epic{
border-color:#7c3aed;
}

.mtg-card-mini.Legendary{
border-color:gold;
box-shadow:0 0 18px gold;
}

.faction-icon{

position:absolute;

top:6px;
left:6px;

font-size:16px;

background:white;

border-radius:50%;

width:22px;
height:22px;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 0 4px rgba(0,0,0,0.4);

}

.card-meta{

display:flex;
align-items:center;
gap:6px;

}

#factionIcon{

font-size:16px;

}


/* faction color for mini cards */

.mtg-card-mini.person{
background:#dbeafe;
}

.mtg-card-mini.place{
background:#dcfce7;
}

.mtg-card-mini.food{
background:#ffedd5;
}

.mtg-card-mini.history{
background:#fef9c3;
}

.mtg-card-mini.culture{
background:#fce7f3;
}

.mtg-card-mini.company{
background:#e0e7ff;
}

.mtg-card-mini.event{
background:#fee2e2;
}

.mtg-card-mini.others{
background:#e5e7eb;
}

.card-detail.place{
border-color:#1e7a42;
}

/* ===== CARD VIEWER ===== */

.viewer{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.7);

display:flex;
align-items:center;
justify-content:center;

z-index:2000;

}



.viewer-btn{

position:absolute;
top:50%;

transform:translateY(-50%);

font-size:60px;

background:rgba(255,255,255,0.2);

border:none;

color:white;

cursor:pointer;

padding:20px;

}

.viewer-btn.left{
left:20px;
}

.viewer-btn.right{
right:20px;
}

.viewer-close{

position:absolute;
top:20px;
right:30px;

font-size:40px;

background:none;
border:none;

color:white;

cursor:pointer;

}

.viewer{

display:none;

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.7);

align-items:center;
justify-content:center;

z-index:2000;

}

.viewer.active{
display:flex;
}

#badgeViewer{
z-index:2050;
}

#badgeViewer .card-detail{
color:#1a1520;
}

#badgeViewer .card-title,
#badgeViewer .card-title span{
color:#111 !important;
}

#badgeViewer .card-text,
#badgeViewer .card-text--fallback{
color:#111 !important;
}

#badgeViewer .badge-viewer-id{
font-size:0.78rem;
color:#64748b;
margin-top:8px;
word-break:break-all;
}

#badgeViewer .badge-viewer-detail--locked .card-art img{
opacity:0.42;
filter:grayscale(0.35);
}

.viewer-btn:hover{
background:rgba(255,255,255,0.35);
transform:translateY(-50%) scale(1.1);
}

/* ===== CARD SLIDE ANIMATION ===== */

.card-slide{

animation:slideIn 0.35s ease;

}

@keyframes slideIn{

0%{
transform:translateX(40px);
opacity:0;
}

100%{
transform:translateX(0);
opacity:1;
}

}

/* =====================
PACK SHAKE
===================== */

.pack-shake{

animation:packShake 0.6s;

}

@keyframes packShake{

0%{transform:translateX(0);}
25%{transform:translateX(-6px);}
50%{transform:translateX(6px);}
75%{transform:translateX(-6px);}
100%{transform:translateX(0);}

}


/* =====================
SSR REVEAL
===================== */

.ssr-reveal{

animation:ssrFlash 0.7s;

}

@keyframes ssrFlash{

0%{
box-shadow:0 0 0px gold;
}

50%{
box-shadow:0 0 40px gold;
}

100%{
box-shadow:0 0 0px gold;
}

}


/* =========================
SSR HOLOGRAM EFFECT
========================= */

.mtg-card-mini.SSR{

position:relative;
overflow:hidden;

}

.mtg-card-mini.SSR::before{

content:"";
position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:linear-gradient(
120deg,
transparent 30%,
rgba(255,255,255,0.4),
transparent 70%
);

animation:ssrShine 2.5s linear infinite;

pointer-events:none;

}

@keyframes ssrShine{

0%{
transform:rotate(25deg) translateX(-100%);
}

100%{
transform:rotate(25deg) translateX(100%);
}

}

/* SSR GLOW */

.mtg-card-mini.SSR{

box-shadow:
0 0 8px gold,
0 0 20px rgba(255,215,0,0.7),
0 0 40px rgba(255,215,0,0.5);

}

.card-detail.SSR{

box-shadow:
0 0 15px gold,
0 0 35px rgba(255,215,0,0.7),
0 0 60px rgba(255,215,0,0.4);

}

.hidden{
display:none;
}

.card{
width:140px;
height:200px;
background:#1b2a4a;
border-radius:12px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
font-weight:bold;
margin:10px;
}

/* .cards{
display:flex;
flex-wrap:wrap;
justify-content:center;
} */


.card{
background:#1b2a4a;
border-radius:10px;
padding:10px;
width:140px;
text-align:center;
color:white;
cursor:pointer;
transition:0.2s;
}

.card:hover{
transform:scale(1.05);
background:#243b66;
}

.card div:first-child{
font-size:18px;
letter-spacing:3px;
margin-bottom:6px;
}

.card{
background:#22345c;
border-radius:14px;
padding:14px;
width:150px;
text-align:center;
color:white;
cursor:pointer;
transition:0.25s;
}

.card:hover{
transform:scale(1.08);
box-shadow:0 8px 20px rgba(0,0,0,0.5);
}

.rarity-row{
display:flex;
align-items:flex-start;
margin:14px auto;
max-width:900px;
}

.rarity-col{
width:120px;
font-weight:bold;
font-size:18px;
text-align:right;
padding-right:20px;
color:#ffd700;
}

.card-list{
display:flex;
flex-wrap:wrap;
gap:8px;
max-width:700px;
}

.card-name{
background:#22345c;
padding:6px 10px;
border-radius:6px;
cursor:pointer;
font-size:13px;
white-space:nowrap;
}   

.card-name:hover{
background:#3a5ca0;
}

.tabs{
margin-top:10px;
}

.tabs button{

background:#eee;
border:0;
padding:6px 12px;
margin:0 3px;
border-radius:6px;
cursor:pointer;
font-weight:bold;

}

.tabs button:hover{
background:#ffd43b;
}

.wiki-btn{

display:inline-block;
margin-top:12px;
padding:8px 14px;

background:#2d7cff;
color:white;

border-radius:8px;
text-decoration:none;

font-weight:600;

}

.wiki-btn:hover{
background:#1b5ed9;
}

.tabs{
display:flex;
justify-content:center;
gap:10px;
margin-top:20px;
}

.tabs button{
background:#1f2f55;
color:white;
border:none;
padding:10px 22px;
border-radius:20px;

font-weight:bold;
font-size:14px;

cursor:pointer;

transition:all 0.25s;
box-shadow:0 4px 10px rgba(0,0,0,0.4);
}

.tabs button:hover{
background:#ffd43b;
color:black;
transform:translateY(-2px);
}

.tabs button.active{
background:#ffd43b;
color:black;
}

#topBar{

display:flex;
justify-content:center;
align-items:center;
gap:15px;

margin-top:10px;

}

#userInfo{

background:#1f2f55;

padding:6px 14px;

border-radius:12px;

font-weight:bold;

display:flex;
align-items:center;
gap:6px;

}

.main-ui{

display:flex;
flex-direction:column;

align-items:center;
justify-content:flex-start;

gap:8px;

margin-top:max(6px,env(safe-area-inset-top,0px));

}

.main-ui > .tabs:first-of-type{

margin-bottom:2px;

}


.tabs{

display:flex;

gap:14px;

justify-content:center;

}

.tabs{

display:flex;

gap:14px;

justify-content:center;

}   

body{

display:flex;

flex-direction:column;

align-items:center;

}

/* Viewer: force readable text (overrides body color:white) */

#cardViewer .card-detail{
color:#1a1520;
}

#cardViewer .card-title,
#cardViewer .card-title span{

color:#111 !important;
}

#cardViewer .card-text{

color:#111 !important;
background:#f3ead4 !important;
border:1px solid rgba(91,58,31,0.35);
}

#cardViewer .card-text--fallback{

font-style:italic;
color:#374151 !important;
background:#ede6d8 !important;
font-size:13px;
line-height:1.4;
}

#cardViewer .card-stats{
color:#111 !important;
}

#cardViewer .wiki-btn{
color:#fff !important;
}

#cardViewer .card-detail-actions{
width:100%;
max-width:320px;
margin-left:auto;
margin-right:auto;
}

#cardViewer .card-detail-actions .wiki-btn{
margin-top:0;
}

/* ===== TABS (Home / Collection) ===== */

.tab-btn{

background:#1f2f55;
color:#e2e8f0;
border:2px solid rgba(255,212,59,0.35);
padding:10px 22px;
border-radius:10px;
font-weight:bold;
cursor:pointer;
transition:background 0.2s,border-color 0.2s;

}

.tab-btn:hover{

background:#263a70;
border-color:rgba(255,212,59,0.55);

}

.tab-btn.tab-active{

background:linear-gradient(145deg,#3557a8,#1f2f55);
border-color:#ffd43b;
color:#fff;
box-shadow:0 0 12px rgba(255,212,59,0.25);

}

.tab-btn:disabled,
.tab-btn.tab-btn--locked{

opacity:0.45;
cursor:not-allowed;
border-color:rgba(255,255,255,0.12);
color:#64748b;
box-shadow:none;

}

.tab-btn:disabled:hover,
.tab-btn.tab-btn--locked:hover{

background:#1f2f55;
border-color:rgba(255,255,255,0.12);

}

.tab-btn.tab-active:disabled,
.tab-btn.tab-active.tab-btn--locked{

background:#1a2744;
border-color:rgba(255,255,255,0.1);
color:#64748b;

}

.main-ui .tabs{

flex-wrap:nowrap;
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:8px;
row-gap:6px;
column-gap:8px;
width:100%;
max-width:100%;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
padding-bottom:2px;
box-sizing:border-box;

}

.main-ui .tabs::-webkit-scrollbar{

height:4px;

}

.main-ui .tabs::-webkit-scrollbar-thumb{

background:rgba(255,255,255,0.2);
border-radius:4px;

}

.main-ui .tabs .tab-btn{

flex:0 0 auto;

}

#packLimit{

margin:20px 0 0;
font-size:0.82rem;
line-height:1.45;
color:#cbd5e1;

}

#homeOpenBooster:disabled{

opacity:0.55;
cursor:not-allowed;
filter:grayscale(0.35);

}

#homeOpenBooster.booster--login-prompt:disabled{

opacity:1;
filter:none;
cursor:pointer;

}

/* ===== COLLECTION (by rarity) ===== */

.collection-tab{

width:100%;
max-width:920px;
padding:0 16px 56px;
box-sizing:border-box;

}

.collection-page{

text-align:left;

}

.collection-page-title{

color:#fff;
font-size:1.45rem;
margin:20px 0 6px;
font-weight:bold;

}

.collection-page-sub{

color:#94a3b8;
font-size:0.88rem;
margin:0 0 18px;

}

.card-search-wrap{

max-width:420px;
margin:0 0 16px;

}

.card-search-wrap--deck{

max-width:480px;
margin:0 0 14px;

}

.card-search-input{

width:100%;
box-sizing:border-box;
padding:10px 14px;
font-size:0.95rem;
border-radius:10px;
border:1px solid rgba(148,163,184,0.45);
background:rgba(15,23,42,0.75);
color:#f1f5f9;
outline:none;
transition:border-color 0.2s,box-shadow 0.2s;

}

.card-search-input::placeholder{

color:#64748b;

}

.card-search-input:focus{

border-color:rgba(250,204,21,0.65);
box-shadow:0 0 0 2px rgba(250,204,21,0.2);

}

.collection-empty{

color:#cbd5e1;
padding:28px 16px;
text-align:center;
line-height:1.5;

}

.collection-empty code{

font-size:0.85em;
background:rgba(0,0,0,0.25);
padding:2px 6px;
border-radius:4px;

}

.total-cards-strip{

font-size:0.88rem;
color:#94a3b8;
margin:12px auto 8px;
max-width:520px;
padding:0 12px;

}

.collection-rarity-block{

margin-bottom:26px;
border:1px solid rgba(255,255,255,0.12);
border-radius:14px;
background:rgba(12,24,52,0.55);
overflow:hidden;

}

.collection-rarity-heading{

margin:0;
padding:12px 16px;
font-size:0.98rem;
letter-spacing:0.02em;
border-bottom:1px solid rgba(255,255,255,0.08);
text-align:left;

}

.collection-rarity-heading.rarity-tag-Legendary{

background:linear-gradient(90deg,rgba(202,138,4,0.4),transparent);
color:#fde68a;

}

.collection-rarity-heading.rarity-tag-Epic{

background:linear-gradient(90deg,rgba(124,58,237,0.4),transparent);
color:#ddd6fe;

}

.collection-rarity-heading.rarity-tag-Rare{

background:linear-gradient(90deg,rgba(29,78,216,0.4),transparent);
color:#bfdbfe;

}

.collection-rarity-heading.rarity-tag-Common{

background:linear-gradient(90deg,rgba(91,58,31,0.45),transparent);
color:#e2e8f0;

}

.collection-card-list{

padding:4px 0 6px;

}

.collection-card-row{

display:grid;
grid-template-columns:minmax(0,1fr) 3.2rem 3.2rem 2.25rem 4rem;
align-items:center;
gap:10px 12px;
padding:10px 16px;
border-bottom:1px solid rgba(255,255,255,0.06);
color:#e2e8f0;
font-size:0.94rem;

}

.collection-card-row:last-child{

border-bottom:none;

}

.collection-card-header{

font-size:0.8rem;
text-transform:uppercase;
letter-spacing:0.06em;
color:#94a3b8;
padding-top:12px;
padding-bottom:8px;
border-bottom:1px solid rgba(255,255,255,0.12);

}

.collection-col-name{

min-width:0;
text-align:left;

}

.collection-col-stat{

text-align:center;
font-weight:bold;
color:#fde68a;
font-variant-numeric:tabular-nums;

}

.collection-col-rps{

text-align:center;
font-size:1.15rem;
line-height:1;
color:#e2e8f0;

}

.collection-card-link{

cursor:pointer;
color:#93c5fd;
text-decoration:underline;
text-decoration-color:rgba(147,197,253,0.45);
text-underline-offset:3px;

}

.collection-card-link:hover{

color:#bfdbfe;
text-decoration-color:#bfdbfe;

}

.collection-card-link:focus{

outline:2px solid #ffd43b;
outline-offset:2px;
border-radius:4px;

}

.collection-card-count{

font-weight:bold;
color:#ffd43b;
text-align:right;
font-variant-numeric:tabular-nums;

}

.adsense-below-logo{

width:100%;
max-width:728px;
margin:14px auto 0;
min-height:0;
max-height:100px;
overflow:hidden;
text-align:center;
box-sizing:border-box;
pointer-events:none;

}

.adsense-below-logo ins.adsbygoogle{

display:block !important;
max-height:100px;
margin:0 auto;
pointer-events:auto;

}

@media(max-width:500px){

.collection-card-row{
grid-template-columns:minmax(0,1fr) 2.6rem 2.6rem 2rem 3.2rem;
gap:8px;
font-size:0.88rem;
}

}

/* ===== DECK BUILDER ===== */

.deck-tab{

width:100%;
box-sizing:border-box;
padding:0 0 48px;

}

.deck-layout{

display:flex;
flex-wrap:wrap;
gap:24px;
justify-content:center;
align-items:flex-start;
max-width:1100px;
margin:0 auto;
padding:0 16px;

}

.deck-main{

flex:1;
min-width:min(100%,300px);
max-width:720px;
text-align:left;

}

.deck-page-title{

color:#fff;
font-size:1.45rem;
margin:20px 0 8px;
font-weight:bold;

}

.deck-counter{

color:#fde68a;
font-size:1.1rem;
font-weight:bold;
margin:0 0 14px;

}

.deck-slots{

display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:12px 10px;
justify-items:center;
align-items:start;
margin:0 auto 22px;
min-height:200px;
padding-bottom:6px;
max-width:min(100%,720px);
box-sizing:border-box;

}

.deck-slot-card-wrap:nth-child(1){

grid-column:1/3;

}

.deck-slot-card-wrap:nth-child(2){

grid-column:3/5;

}

.deck-slot-card-wrap:nth-child(3){

grid-column:5/7;

}

.deck-slot-card-wrap:nth-child(4){

grid-column:2/4;

}

.deck-slot-card-wrap:nth-child(5){

grid-column:4/6;

}

.deck-slot-card-wrap{

display:flex;
justify-content:center;
align-items:stretch;
width:100%;
max-width:clamp(104px,28vw,168px);
min-width:0;
box-sizing:border-box;

}

.deck-slot-card-wrap .deck-slot-mini.mtg-card-mini{

width:clamp(112px,18vw,156px);
height:auto;
min-height:188px;
max-height:260px;
padding:5px;
font-size:10px;
box-sizing:border-box;
color:#111;
background:#e9dcc0;
visibility:visible;
opacity:1;
position:relative;
z-index:1;

}

.deck-slot-mini .mtg-title-mini{

font-size:10px;
line-height:1.15;
padding:3px;

}

.deck-slot-mini .mtg-art-mini{

margin:4px 0;

}

.deck-slot-mini .mtg-art-mini img{

max-height:72px;

}

.deck-mini-stats{

text-align:center;
font-size:9px;
font-weight:bold;
background:#d8caa4;
color:#1a1520;
padding:3px 4px;
border-radius:4px;
margin:2px 0;
line-height:1.2;
font-variant-numeric:tabular-nums;

}

.deck-slot-mini .mtg-rarity-mini{

font-size:9px;
padding:2px;

}

.deck-slot-card-wrap--clickable{

cursor:pointer;
border-radius:16px;
transition:transform 0.15s,box-shadow 0.15s;

}

.deck-slot-card-wrap--clickable:hover{

transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,0.45);

}

.deck-slot-card-wrap--clickable:focus{

outline:2px solid #ffd43b;
outline-offset:4px;

}

.deck-slot-card-wrap--empty .deck-slot-empty-inner{

width:clamp(104px,17vw,148px);
min-height:178px;
border:2px dashed rgba(255,255,255,0.22);
border-radius:14px;
background:rgba(12,24,52,0.35);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
color:#64748b;
font-size:0.78rem;
box-sizing:border-box;

}

.deck-slot-empty-num{

font-size:1.25rem;
font-weight:bold;
color:#475569;

}

.deck-slot-empty-txt{

font-style:italic;

}

.deck-actions{

margin-bottom:12px;
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;

}

.deck-clear-btn{

background:rgba(30,41,59,0.9);
color:#e2e8f0;
border:1px solid rgba(248,113,113,0.55);
padding:10px 20px;
font-size:0.95rem;
font-weight:600;
border-radius:10px;
cursor:pointer;
transition:background 0.2s,border-color 0.2s;

}

.deck-clear-btn:hover{

background:rgba(51,65,85,0.95);
border-color:rgba(248,113,113,0.85);

}

.deck-confirm-btn{

background:linear-gradient(145deg,#3557a8,#1f2f55);
color:#fff;
border:2px solid #ffd43b;
padding:12px 28px;
font-size:16px;
font-weight:bold;
border-radius:12px;
cursor:pointer;
letter-spacing:0.5px;
box-shadow:0 4px 0 #16213f,0 8px 20px rgba(0,0,0,0.35);
transition:opacity 0.2s,transform 0.15s;

}

.deck-confirm-btn:hover:not(:disabled){

transform:translateY(-2px);

}

.deck-confirm-btn:disabled{

opacity:0.42;
cursor:not-allowed;
transform:none;
box-shadow:none;

}

.deck-success-msg{

color:#86efac;
font-size:0.95rem;
margin:8px 0 20px;
min-height:1.4em;

}

.deck-section-title{

color:#fff;
font-size:1.1rem;
margin:24px 0 6px;

}

.deck-section-hint{

color:#94a3b8;
font-size:0.86rem;
margin:0 0 14px;

}

.deck-pick-empty{

color:#cbd5e1;
padding:16px 0;
text-align:center;

}

.deck-pick-block{

margin-bottom:20px;
border:1px solid rgba(255,255,255,0.1);
border-radius:12px;
overflow:hidden;
background:rgba(12,24,52,0.45);

}

.deck-pick-rarity{

margin:0;
padding:10px 14px;
font-size:0.88rem;
border-bottom:1px solid rgba(255,255,255,0.08);

}

.deck-pick-rarity.rarity-tag-Legendary{
background:linear-gradient(90deg,rgba(202,138,4,0.35),transparent);
color:#fde68a;
}

.deck-pick-rarity.rarity-tag-Epic{
background:linear-gradient(90deg,rgba(124,58,237,0.35),transparent);
color:#ddd6fe;
}

.deck-pick-rarity.rarity-tag-Rare{
background:linear-gradient(90deg,rgba(29,78,216,0.35),transparent);
color:#bfdbfe;
}

.deck-pick-rarity.rarity-tag-Common{
background:linear-gradient(90deg,rgba(91,58,31,0.4),transparent);
color:#e2e8f0;
}

.deck-pick-row{

padding:10px 12px;
border-bottom:1px solid rgba(255,255,255,0.06);
color:#e2e8f0;
font-size:0.88rem;

}

.deck-pick-row-grid{

display:grid;
grid-template-columns:minmax(0,1fr) 2.75rem 2.75rem 2.1rem 3.25rem 2.25rem;
align-items:center;
gap:8px 10px;

}

.deck-pick-row:last-child{

border-bottom:none;

}

.deck-pick-header{

font-size:0.72rem;
text-transform:uppercase;
letter-spacing:0.05em;
color:#94a3b8;
padding-top:8px;
padding-bottom:6px;
border-bottom:1px solid rgba(255,255,255,0.1);

}

.deck-pick-header.deck-pick-row{

border-bottom:1px solid rgba(255,255,255,0.1);

}

.deck-pick-col-name{

min-width:0;
text-align:left;
word-break:break-word;
line-height:1.25;

}

.deck-pick-col-stat{

text-align:center;
font-weight:bold;
font-variant-numeric:tabular-nums;
color:#fde68a;
font-size:0.86rem;

}

.deck-pick-col-h{

color:#94a3b8;
font-weight:bold;

}

.deck-pick-col-count{

text-align:right;
font-weight:bold;
color:#ffd43b;
font-variant-numeric:tabular-nums;
font-size:0.86rem;

}

.deck-pick-col-rps{

text-align:center;
font-size:1.05rem;
line-height:1;
color:#e2e8f0;

}

.deck-slot-rps{

font-size:0.95rem;
line-height:1;
vertical-align:middle;
margin-left:1px;

}

.deck-pick-col-cb{

text-align:center;
display:flex;
justify-content:center;
align-items:center;

}

.deck-pick-cb-hit{

display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
margin:0;
padding:4px;

}

.deck-pick-cb{

width:18px;
height:18px;
accent-color:#ffd43b;
cursor:pointer;
margin:0;

}

.deck-pick-cb:disabled{

cursor:not-allowed;
opacity:0.45;

}

.deck-pick-row--selected{

background:rgba(255,212,59,0.12);
box-shadow:inset 3px 0 0 #ffd43b;

}

.deck-battle-logs{

width:280px;
flex-shrink:0;
min-height:280px;
padding:16px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(12,24,52,0.55);
text-align:left;
box-sizing:border-box;

}

.deck-battle-logs-title{

margin:0 0 12px;
font-size:1rem;
color:#fff;

}

.battle-logs-body{

color:#64748b;
font-size:0.88rem;
min-height:120px;

}

.battle-logs-empty{

font-style:italic;

}

@media(max-width:900px){

.deck-layout{
flex-direction:column;
align-items:stretch;
}

.deck-battle-logs{
width:100%;
max-width:720px;
margin:0 auto;
order:-1;
min-height:120px;
}

}

@media(max-width:520px){

.deck-pick-row-grid{
grid-template-columns:minmax(0,1fr) 2.4rem 2.4rem 1.9rem 2.8rem 2rem;
gap:6px;
font-size:0.82rem;
}

.deck-slot-card-wrap .deck-slot-mini.mtg-card-mini{
width:clamp(96px,42vw,132px);
min-height:156px;
}

.deck-slot-card-wrap--empty .deck-slot-empty-inner{
width:clamp(96px,42vw,132px);
min-height:156px;
}

}

@media(max-width:400px){

.deck-pick-row-grid{
grid-template-columns:minmax(0,1fr) 2.2rem 2.2rem 1.75rem 2.5rem 1.85rem;
font-size:0.78rem;
}

}

/* ===== BATTLE ===== */

.battle-tab{

width:100%;
box-sizing:border-box;
padding:0 0 48px;

}

.battle-layout{

display:flex;
flex-wrap:wrap;
gap:24px;
justify-content:center;
align-items:flex-start;
max-width:1100px;
margin:0 auto;
padding:0 16px;

}

.battle-main{

flex:1;
min-width:min(100%,280px);
max-width:820px;
text-align:left;

}

.battle-page-title{

color:#fff;
font-size:1.45rem;
margin:20px 0 16px;
font-weight:bold;

}

.battle-gate{

background:rgba(12,24,52,0.45);
border:1px solid rgba(255,255,255,0.1);
border-radius:14px;
padding:20px 22px;
margin-bottom:20px;

}

.battle-gate-line{

color:#e2e8f0;
margin:0 0 8px;
font-size:1rem;
line-height:1.45;

}

.battle-gate-line--sub{

color:#94a3b8;
font-size:0.9rem;
margin-bottom:16px;

}

.battle-start-btn{

margin-top:4px;
padding:12px 28px;
font-size:1rem;
font-weight:bold;
cursor:pointer;
border-radius:10px;
border:2px solid #fbbf24;
background:linear-gradient(180deg,#2563eb,#1d4ed8);
color:#fff;
box-shadow:0 4px 16px rgba(37,99,235,0.35);
transition:transform 0.15s,box-shadow 0.15s;

}

.battle-start-btn:hover:not(:disabled){

transform:translateY(-2px);
box-shadow:0 8px 24px rgba(37,99,235,0.45);

}

.battle-start-btn:disabled{

opacity:0.5;
cursor:not-allowed;
transform:none;

}

.battle-opponent-picker{

margin:16px 0 18px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,0.08);

}

.battle-opponent-picker-title{

margin:0 0 6px;
font-size:1.05rem;
font-weight:800;
color:#f8fafc;

}

.battle-opponent-picker-hint{

margin:0 0 12px;
font-size:0.82rem;
line-height:1.4;
color:#94a3b8;

}

.battle-opponent-pager{

display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:10px 16px;
margin-top:12px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,0.08);

}

.battle-opponent-page-btn{

padding:8px 18px;
font-size:0.88rem;
font-weight:700;
cursor:pointer;
border-radius:8px;
border:1px solid rgba(148,163,184,0.45);
background:rgba(30,41,59,0.85);
color:#e2e8f0;
transition:background 0.15s,opacity 0.15s;

}

.battle-opponent-page-btn:hover:not(:disabled){

background:rgba(51,65,85,0.95);

}

.battle-opponent-page-btn:disabled{

opacity:0.4;
cursor:not-allowed;

}

.battle-opponent-page-info{

font-size:0.82rem;
color:#94a3b8;
min-width:12ch;
text-align:center;

}

.battle-opponent-list{

display:flex;
flex-direction:column;
gap:8px;
min-height:120px;
max-height:min(48vh,400px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding-right:4px;

}

.battle-opponent-row{

display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:8px 12px;
padding:10px 12px;
border-radius:10px;
background:rgba(15,30,58,0.55);
border:1px solid rgba(255,255,255,0.08);

}

.battle-opponent-row--exhausted{

opacity:0.55;
border-color:rgba(255,255,255,0.05);

}

.battle-opponent-name{

font-weight:700;
color:#e2e8f0;
flex:1;
min-width:100px;
text-align:left;

}

.battle-opponent-coins{

font-size:0.78rem;
font-weight:600;
color:#94a3b8;
white-space:nowrap;

}

.battle-opponent-row--coins-block{

border-color:rgba(251,191,36,0.12);

}

.battle-opponent-tag{

font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:#64748b;

}

.battle-opponent-battle-btn{

padding:8px 16px;
font-size:0.88rem;
font-weight:800;
cursor:pointer;
border-radius:8px;
border:1px solid rgba(251,191,36,0.45);
background:linear-gradient(180deg,#334155,#1e293b);
color:#fde68a;
flex-shrink:0;
transition:transform 0.12s,opacity 0.12s;

}

.battle-opponent-battle-btn:hover:not(:disabled){

transform:translateY(-1px);

}

.battle-opponent-battle-btn:disabled,
.battle-opponent-battle-btn--exhausted:disabled{

opacity:0.45;
cursor:not-allowed;
transform:none;

}

.battle-opponent-empty{

margin:0;
font-size:0.9rem;
color:#94a3b8;
text-align:left;

}

.battle-arena{

margin-bottom:24px;

}

.battle-arena-grid{

display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
gap:16px 12px;
align-items:start;
justify-items:center;

}

.battle-arena-grid.battle-arena-grid--duel{

display:block;
max-width:760px;
margin:0 auto;

}

.battle-duel-head{

display:grid;
grid-template-columns:1fr auto 1fr;
gap:8px 12px;
align-items:end;
margin-bottom:12px;

}

.battle-duel-head .battle-column-title{

margin:0;

}

.battle-duel-head-mid{

min-width:72px;

}

.battle-duel-rows{

display:flex;
flex-direction:column;
gap:14px;
width:100%;

}

.battle-duel-row{

display:grid;
grid-template-columns:1fr auto 1fr;
gap:10px 12px;
align-items:center;
width:100%;

}

.battle-duel-cell{

display:flex;
justify-content:center;
align-items:flex-start;

}

.battle-duel-cell--vs{

flex-direction:column;
gap:6px;
min-width:72px;
align-items:center;
justify-content:center;

}

.battle-duel-vs{

font-size:0.7rem;
font-weight:800;
color:#64748b;
letter-spacing:0.1em;
text-transform:uppercase;

}

.battle-duel-cell .mtg-card-mini{

width:clamp(100px,22vw,150px);
min-height:168px;
height:auto;
max-height:240px;
flex-shrink:0;

}

.battle-duel-slot-result{

min-height:1.5rem;
display:flex;
align-items:center;
justify-content:center;
font-size:0.88rem;
font-weight:800;
letter-spacing:0.12em;
text-transform:uppercase;
text-align:center;

}

.battle-duel-slot-result--waiting{

color:#64748b;

}

.battle-duel-slot-result--win{

color:#4ade80;

}

.battle-duel-slot-result--lose{

color:#f87171;

}

.battle-duel-slot-result--pop{

animation:battleResultPop 0.45s ease-out;

}

.battle-column-title{

color:#fde68a;
font-size:0.95rem;
margin:0 0 12px;
text-align:center;
font-weight:bold;

}

.battle-stack{

display:flex;
flex-direction:column;
align-items:center;
gap:10px;
min-height:120px;

}

.battle-stack .mtg-card-mini{

width:clamp(100px,22vw,150px);
min-height:168px;
height:auto;
max-height:240px;
flex-shrink:0;

}

.battle-stack-card--concealed{

position:relative;
overflow:hidden;

}

.battle-stack-card-back{

min-height:168px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
background:linear-gradient(160deg,#1e293b,#0f172a);
border-radius:12px;
border:6px solid #334155;
box-shadow:inset 0 0 20px rgba(0,0,0,0.4);

}

.battle-stack-card-back-q{

font-size:2.2rem;
font-weight:bold;
color:#64748b;

}

.battle-stack-card-back-t{

font-size:0.75rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:#475569;

}

.battle-stack-rps{

font-size:1rem;
line-height:1;
vertical-align:middle;
margin-left:1px;

}

.battle-detail-rps{

font-size:1.15rem;
text-align:center;
margin:4px 0 2px;

}

.battle-detail-reason{

font-size:0.9rem;
font-weight:600;
text-align:center;
margin:6px 0 4px;
color:#e2e8f0;

}

.battle-detail-reason-tag{

font-weight:500;
opacity:0.75;
font-size:0.8rem;

}

.battle-stack-card--reveal{

animation:battleRevealCard 0.55s ease-out;

}

@keyframes battleRevealCard{

0%{
opacity:0.35;
transform:scale(0.92)rotateY(12deg);
filter:blur(2px);
}

100%{
opacity:1;
transform:scale(1)rotateY(0);
filter:none;

}

}

.battle-stack-card--round-win{

animation:battleWinPulse 0.65s ease-out;
box-shadow:0 0 0 2px #22c55e,0 0 24px rgba(34,197,94,0.55);

}

@keyframes battleWinPulse{

0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.7); }
70%{ box-shadow:0 0 0 10px rgba(34,197,94,0); }
100%{ box-shadow:0 0 0 2px #22c55e,0 0 24px rgba(34,197,94,0.55); }

}

.battle-column--vs{

display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:14px;
padding-top:36px;

}

.battle-vs-badge{

font-size:1.6rem;
font-weight:900;
color:#fff;
text-shadow:0 0 20px rgba(251,191,36,0.6);
letter-spacing:0.06em;

}

.battle-round-result{

min-height:2.5rem;
display:flex;
align-items:center;
justify-content:center;
font-size:1.25rem;
font-weight:800;
letter-spacing:0.12em;
text-transform:uppercase;
color:#94a3b8;
transition:color 0.25s,transform 0.25s;

}

.battle-round-result--win{

color:#4ade80;

}

.battle-round-result--lose{

color:#f87171;

}

.battle-round-result--pop{

animation:battleResultPop 0.45s ease-out;

}

@keyframes battleResultPop{

0%{ transform:scale(0.6);opacity:0; }
55%{ transform:scale(1.08);opacity:1; }
100%{ transform:scale(1); }

}

.battle-summary{

margin-top:20px;
padding:18px 20px;
border-radius:14px;
text-align:center;
font-size:1.05rem;
color:#e2e8f0;
border:1px solid rgba(255,255,255,0.08);
background:rgba(15,23,42,0.5);
opacity:0;
transform:translateY(8px);
transition:opacity 0.4s,transform 0.4s;
display:none;

}

.battle-summary--done{

display:block;
opacity:1;
transform:translateY(0);

}

.battle-summary--victory{

border-color:rgba(74,222,128,0.35);
box-shadow:0 0 28px rgba(74,222,128,0.15);

}

.battle-summary--defeat{

border-color:rgba(248,113,113,0.35);
box-shadow:0 0 28px rgba(248,113,113,0.12);

}

.battle-summary-score{

font-size:1.35rem;
font-weight:bold;
margin-bottom:6px;
color:#fff;

}

.battle-summary-final{

font-size:1.1rem;
font-weight:600;
color:#fde68a;

}

.home-booster-section{

display:block;

}

.battle-step-footer{

margin-top:18px;
padding:16px 18px;
border-radius:14px;
border:1px solid rgba(251,191,36,0.22);
background:rgba(15,23,42,0.75);
text-align:left;
display:flex;
flex-direction:column;
gap:14px;
align-items:stretch;
max-width:540px;
margin-left:auto;
margin-right:auto;
box-sizing:border-box;

}

.battle-round-detail{

font-size:0.95rem;
line-height:1.55;
color:#e2e8f0;

}

.battle-detail-round{

font-size:0.72rem;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:#94a3b8;
margin-bottom:8px;

}

.battle-detail-compare{

margin-bottom:6px;

}

.battle-detail-compare-muted{

font-size:0.86rem;
color:#94a3b8;
margin-bottom:6px;

}

.battle-detail-note{

font-size:0.75rem;
color:#64748b;
margin-bottom:8px;
line-height:1.4;

}

.battle-detail-score{

font-size:0.92rem;
font-weight:700;
color:#fde68a;

}

.battle-detail-win{

color:#4ade80;
font-weight:800;

}

.battle-detail-lose{

color:#f87171;
font-weight:800;

}

.battle-step-btn{

align-self:center;
padding:12px 32px;
font-size:1rem;
font-weight:800;
cursor:pointer;
border-radius:10px;
border:2px solid #fbbf24;
background:linear-gradient(180deg,#2563eb,#1d4ed8);
color:#fff;
box-shadow:0 4px 16px rgba(37,99,235,0.35);
transition:transform 0.15s,opacity 0.15s;

}

.battle-step-btn:hover:not(:disabled){

transform:translateY(-2px);

}

.battle-step-btn:disabled{

opacity:0.45;
cursor:wait;

}

.battle-logs-aside{

width:280px;
flex-shrink:0;
min-height:280px;
padding:16px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(12,24,52,0.55);
text-align:left;
box-sizing:border-box;

}

.battle-logs-aside-title{

margin:0 0 12px;
font-size:1rem;
color:#fff;

}

.battle-logs-body{

color:#cbd5e1;
font-size:0.85rem;
line-height:1.45;
max-height:min(60vh,420px);
overflow-y:auto;
min-height:120px;

}

.battle-log-line{

margin:0 0 10px;
padding-bottom:8px;
border-bottom:1px solid rgba(255,255,255,0.06);

}

@media(max-width:900px){

.battle-layout{
flex-direction:column;
align-items:stretch;
}

.battle-arena-grid:not(.battle-arena-grid--duel){
grid-template-columns:1fr;
gap:20px;
}

.battle-column--vs{
flex-direction:row;
justify-content:center;
padding-top:0;
width:100%;
}

.battle-logs-aside{
width:100%;
max-width:820px;
margin:0 auto;
order:-1;
min-height:100px;
}

}

/* ===== DAILY QUESTS (top-left, same row as logo) ===== */

.daily-quest-dock{

position:relative;
z-index:5;
flex-direction:column;
align-items:stretch;
gap:0;
width:100%;
max-width:min(200px,42vw);
min-width:0;
padding:0;
box-sizing:border-box;
text-align:left;
display:none;

}

.daily-quest-dock:has(#dailyQuestHub:not(.hidden)),
.daily-quest-dock:has(#questCoinsStrip:not(.hidden)){

display:flex;

}

.daily-quest-dock.daily-quest-dock--off-home{

display:none !important;

}

.daily-quest-dock > *{

width:100%;
max-width:none;
margin:0;

}

.daily-quest-hub{

margin:0;
max-width:none;
padding:8px 8px 6px;
border-radius:12px 12px 0 0;
background:rgba(15,23,42,0.9);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(251,191,36,0.28);
border-bottom:1px solid rgba(255,255,255,0.06);
box-shadow:
0 4px 18px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.06);
animation:dailyQuestHubIn 0.45s ease-out;

}

.daily-quest-hub:not(.hidden):has(+ .quest-coins-strip.hidden){

border-radius:14px;
border-bottom:1px solid rgba(251,191,36,0.28);

}

.daily-quest-hub.hidden + .quest-coins-strip:not(.hidden){

border-radius:14px;
border-top:1px solid rgba(251,191,36,0.28);

}

@keyframes dailyQuestHubIn{

0%{ opacity:0;transform:translateY(12px); }
100%{ opacity:1;transform:translateY(0); }

}

.daily-quest-hub-title{

font-size:0.72rem;
font-weight:800;
letter-spacing:0.06em;
text-transform:uppercase;
color:#fde68a;
margin:0 0 6px;

}

.daily-quest-row{

display:grid;
grid-template-columns:1fr auto;
grid-template-rows:auto auto;
gap:2px 8px;
align-items:center;
margin-bottom:6px;

}

.daily-quest-row-label{

grid-column:1;
font-size:0.72rem;
color:#e2e8f0;

}

.daily-quest-row-prog{

grid-column:2;
font-size:0.7rem;
font-weight:700;
color:#94a3b8;
font-variant-numeric:tabular-nums;

}

.daily-quest-row-prog--claimed{

color:#4ade80;

}

.daily-quest-row-bar{

grid-column:1/-1;
height:6px;
border-radius:99px;
background:rgba(255,255,255,0.08);
overflow:hidden;

}

.daily-quest-row-bar-fill{

height:100%;
width:0;
border-radius:99px;
background:linear-gradient(90deg,#6366f1,#a855f7);
transition:width 0.35s ease-out;

}

.daily-quest-row-bar-fill--done{

background:linear-gradient(90deg,#22c55e,#4ade80);

}

.daily-quest-claim-row{

margin-top:6px;
text-align:center;

}

.daily-quest-open-claims-btn{

padding:6px 10px;
font-size:0.75rem;
font-weight:700;
cursor:pointer;
border-radius:8px;
border:1px solid rgba(251,191,36,0.5);
background:rgba(251,191,36,0.12);
color:#fde68a;
transition:background 0.2s,transform 0.15s;

}

.daily-quest-open-claims-btn:hover{

background:rgba(251,191,36,0.22);
transform:translateY(-1px);

}

.quest-coins-strip{

display:flex;
align-items:center;
justify-content:center;
gap:4px;
flex-wrap:wrap;
margin:0;
padding:5px 8px 7px;
border-radius:0 0 12px 12px;
font-size:0.68rem;
color:#cbd5e1;
background:rgba(12,19,36,0.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(251,191,36,0.28);
border-top:none;
box-shadow:0 4px 16px rgba(0,0,0,0.28);

}

.quest-coins-strip-label{

opacity:0.85;

}

.quest-coins-strip-value{

font-weight:800;
color:#fde68a;
font-variant-numeric:tabular-nums;

}

.quest-claim-floating{

position:fixed;
right:16px;
bottom:16px;
z-index:12000;
max-width:min(100vw - 32px,340px);
animation:questFloatIn 0.4s ease-out;

}

@keyframes questFloatIn{

0%{ opacity:0;transform:translateY(16px)scale(0.96); }
100%{ opacity:1;transform:translateY(0)scale(1); }

}

.quest-claim-floating-inner{

position:relative;
padding:16px 16px 14px;
border-radius:14px;
background:linear-gradient(165deg,rgba(30,41,59,0.97),rgba(15,23,42,0.98));
border:1px solid rgba(251,191,36,0.35);
box-shadow:0 12px 40px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.04)inset;

}

.quest-claim-floating-close{

position:absolute;
top:8px;
right:10px;
width:32px;
height:32px;
border:none;
border-radius:8px;
background:rgba(255,255,255,0.06);
color:#94a3b8;
font-size:1.25rem;
line-height:1;
cursor:pointer;
transition:background 0.15s,color 0.15s;

}

.quest-claim-floating-close:hover{

background:rgba(255,255,255,0.12);
color:#fff;

}

.quest-claim-floating-title{

font-size:1rem;
font-weight:800;
color:#fff;
margin:0 0 12px;
padding-right:28px;

}

.quest-claim-floating-list{

display:flex;
flex-direction:column;
gap:10px;

}

.quest-claim-item{

display:flex;
flex-direction:column;
gap:8px;
padding:10px;
border-radius:10px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.06);

}

.quest-claim-item-text{

font-size:0.85rem;
color:#e2e8f0;
line-height:1.35;

}

.quest-claim-btn{

align-self:flex-start;
padding:6px 14px;
font-size:0.8rem;
font-weight:700;
cursor:pointer;
border-radius:8px;
border:1px solid #4ade80;
background:rgba(74,222,128,0.15);
color:#4ade80;
transition:background 0.2s,transform 0.15s;

}

.quest-claim-btn:hover:not(:disabled){

background:rgba(74,222,128,0.28);
transform:translateY(-1px);

}

.quest-claim-btn:disabled{

opacity:0.5;
cursor:wait;

}

#homeTab{

width:100%;
max-width:920px;
margin:0 auto;
padding:0 12px 6px;
box-sizing:border-box;

}

/* Short viewports on wider screens only — avoid shrinking phones (already narrow) */
@media(max-height:740px) and (min-width:600px){

.logo{

width:clamp(140px,40vw,200px);
margin-top:0;

}

.main-ui{

gap:5px;
margin-top:6px;

}

.booster{

padding:11px 24px;
font-size:15px;
border-radius:14px;

}

.cards{

min-height:200px;
height:auto;
margin-top:6px;
gap:10px;

}

.tab-btn{

padding:8px 16px;
font-size:0.88rem;

}

.adsense-below-logo{

max-height:72px;

}

}

@media(max-width:400px){

header,
#homeTab{

padding-left:8px;
padding-right:8px;

}

.logo-quest-row{

grid-template-columns:1fr;
justify-items:stretch;

}

.logo-quest-row-logo{

grid-column:1;
order:2;

}

.logo-quest-row .daily-quest-dock{

grid-column:1;
justify-self:stretch;
max-width:none;
order:1;

}

}

/* ===================== PROFILE TAB ===================== */

.profile-tab{

width:100%;
max-width:520px;
margin:0 auto;
padding:0 12px 24px;
box-sizing:border-box;
text-align:left;

}

.profile-page{

padding-bottom:32px;

}

.profile-page-title{

font-size:1.35rem;
margin:16px 0 12px;
text-align:center;

}

.profile-login-gate{

background:rgba(15,30,58,0.85);
border:1px solid rgba(255,212,59,0.25);
border-radius:12px;
padding:16px;
text-align:center;

}

.profile-login-gate-text{

margin:0;
color:#cbd5e1;
font-size:0.95rem;
line-height:1.45;

}

.profile-section{

margin-top:22px;
padding:14px 14px 16px;
background:rgba(15,30,58,0.75);
border:1px solid rgba(255,255,255,0.08);
border-radius:12px;

}

.profile-section-title{

font-size:1.05rem;
margin:0 0 12px;
color:#f8fafc;

}

.profile-field{

margin:0 0 10px;
font-size:0.92rem;
line-height:1.45;

}

.profile-label{

color:#94a3b8;
font-size:0.82rem;

}

.profile-value{

color:#f1f5f9;
word-break:break-word;

}

.profile-value--muted{

color:#94a3b8;
font-size:0.88rem;

}

.profile-hint{

margin:0 0 10px;
font-size:0.82rem;
color:#94a3b8;
line-height:1.4;

}

.profile-hint--small{

margin-top:-4px;
margin-bottom:0;
font-size:0.78rem;

}

.profile-code{

font-size:0.78em;
background:rgba(0,0,0,0.25);
padding:1px 5px;
border-radius:4px;

}

.profile-display-row{

display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;

}

.profile-display-input{

flex:1;
min-width:160px;
padding:10px 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.2);
background:#0f1a33;
color:#fff;
font-size:1rem;
box-sizing:border-box;

}

.profile-save-btn{

padding:10px 18px;
border-radius:10px;
border:2px solid rgba(255,212,59,0.45);
background:linear-gradient(145deg,#3557a8,#1f2f55);
color:#fff;
font-weight:bold;
cursor:pointer;

}

.profile-save-btn:hover{

border-color:#ffd43b;

}

.profile-save-btn:disabled{

opacity:0.5;
cursor:not-allowed;

}

.profile-logout-row{

margin-top:14px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,0.08);

}

.profile-logout-btn{

padding:10px 18px;
border-radius:10px;
border:2px solid rgba(248,113,113,0.45);
background:rgba(30,41,59,0.9);
color:#fecaca;
font-weight:700;
font-size:0.95rem;
cursor:pointer;
transition:border-color 0.15s,background 0.15s,color 0.15s;

}

.profile-logout-btn:hover{

border-color:#f87171;
background:rgba(127,29,29,0.35);
color:#fff;

}

.profile-logout-btn:focus-visible{

outline:2px solid #f87171;
outline-offset:3px;

}

.profile-error{

min-height:1.2em;
margin:6px 0 0;
font-size:0.85rem;
color:#fca5a5;

}

.profile-stats-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:10px;

}

.profile-stat-card{

background:rgba(0,0,0,0.2);
border-radius:10px;
padding:12px;
display:flex;
flex-direction:column;
gap:4px;

}

.profile-stat-card--wide{

grid-column:1 / -1;

}

.profile-stat-label{

font-size:0.78rem;
color:#94a3b8;
text-transform:uppercase;
letter-spacing:0.04em;

}

.profile-stat-value{

font-size:1.25rem;
font-weight:bold;
color:#fde68a;

}

.profile-badge-album{

margin-top:10px;

}

.profile-badge-empty{

margin:0;
font-size:0.88rem;
color:#94a3b8;

}

.profile-badge-grid{

display:grid;
grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
gap:12px;

}

.profile-badge-cell{

text-align:center;
cursor:pointer;

}

.profile-badge-cell:focus{

outline:2px solid rgba(255,212,59,0.75);
outline-offset:2px;

}

.profile-badge-sticker{

width:100%;
aspect-ratio:1;
max-width:104px;
margin:0 auto;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;

}

.profile-badge-cell--empty .profile-badge-sticker{

background:linear-gradient(145deg,#1a2744,#0f172a);
border:2px dashed rgba(255,255,255,0.15);

}

.profile-badge-cell--owned .profile-badge-sticker{

background:linear-gradient(160deg,#2d3f66,#1a2744);
border:2px solid rgba(255,212,59,0.35);
box-shadow:0 4px 14px rgba(0,0,0,0.35);

}

.profile-badge-cell--custom.profile-badge-cell--owned .profile-badge-sticker{

border-color:rgba(250,204,21,0.55);
box-shadow:0 0 14px rgba(250,204,21,0.2);

}

.profile-badge-caption--custom{

color:#fde68a !important;

}

.profile-badge-placeholder{

font-size:1.6rem;
color:rgba(255,255,255,0.35);

}

.profile-badge-cell--owned .profile-badge-placeholder{

color:#fde68a;

}

.profile-badge-img{

width:100%;
height:100%;
object-fit:contain;
display:block;

}

.profile-badge-caption{

margin-top:6px;
font-size:0.72rem;
color:#cbd5e1;
line-height:1.25;
max-width:104px;
margin-left:auto;
margin-right:auto;

}

.profile-badge-caption--locked{

color:#64748b;

}

/* ===== Phones & narrow touch (must be last so it overrides .logo / .booster / .tab-btn) ===== */

@media(max-width:640px){

header{
max-width:100%;
padding-left:max(8px,env(safe-area-inset-left,0px));
padding-right:max(8px,env(safe-area-inset-right,0px));
}

/* หัวหน้าแน่นขึ้น — การ์ดโผล่เร็วขึ้นโดยไม่ต้องเลื่อน */
.main-ui{
margin-top:max(2px,env(safe-area-inset-top,0px));
gap:4px;
}

.main-ui > .tabs:first-of-type{
margin-bottom:0;
}

.logo-quest-row{
max-width:100%;
gap:4px 6px;
}

.logo{
width:clamp(152px,min(64vw,260px),288px);
}

.main-ui .tabs{
gap:6px;
padding-left:0;
padding-right:0;
}

.main-ui .tabs .tab-btn{
min-height:42px;
padding:8px 11px;
font-size:0.9rem;
border-radius:10px;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}

.booster{
min-height:46px;
padding:12px 20px;
font-size:1rem;
border-radius:16px;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}

.home-booster-section{
margin-top:0;
margin-bottom:0;
}

#packLimit{
font-size:0.88rem;
margin-top:6px;
margin-bottom:0;
line-height:1.35;
}

#homeTab{
padding-left:max(8px,env(safe-area-inset-left,0px));
padding-right:max(8px,env(safe-area-inset-right,0px));
padding-top:0;
}

.cards{
max-width:100%;
gap:10px;
margin-top:4px;
min-height:0;
padding-top:2px;
padding-bottom:8px;
padding-left:max(6px,env(safe-area-inset-left,0px));
padding-right:max(6px,env(safe-area-inset-right,0px));
}

/* แบนเนอร์อยู่ใต้การ์ดแล้ว — จำกัดความสูงบนมือถือ */
.adsense-below-logo.adsense-home-after-cards{
margin:8px auto 0;
max-height:70px;
}

.adsense-home-after-cards ins.adsbygoogle{
max-height:70px;
}

/* ~2 columns of larger cards instead of five tiny strips */
.cards .card-container{
flex:1 1 calc(50% - 14px);
max-width:min(200px,calc(50vw - 22px));
min-width:min(148px,calc(50vw - 22px));
}

.collection-tab{
max-width:100%;
padding-left:max(12px,env(safe-area-inset-left,0px));
padding-right:max(12px,env(safe-area-inset-right,0px));
}

.collection-page-title{
font-size:1.55rem;
}

.card-search-input{
font-size:16px;
padding:12px 14px;
min-height:48px;
}

.profile-tab{
max-width:100%;
padding-left:max(12px,env(safe-area-inset-left,0px));
padding-right:max(12px,env(safe-area-inset-right,0px));
}

.deck-tab .deck-layout,
.battle-tab .battle-layout{
padding-left:max(12px,env(safe-area-inset-left,0px));
padding-right:max(12px,env(safe-area-inset-right,0px));
}

.deck-page-title,
.battle-page-title{
font-size:1.55rem;
}

.viewer-btn{
min-width:48px;
padding:16px 12px;
}

.viewer-close{
min-width:48px;
min-height:48px;
}

.battle-start-btn{
min-height:48px;
padding:14px 22px;
font-size:1.02rem;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}

.battle-opponent-battle-btn,
.battle-opponent-page-btn{
min-height:44px;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}

.daily-quest-hub button,
.quest-claim-btn,
.profile-save-btn,
.profile-logout-btn{
min-height:44px;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}

.daily-quest-hub{
padding:6px 6px 5px;
}

.daily-quest-hub-title{
margin-bottom:4px;
font-size:0.68rem;
}

.total-cards-strip{
margin:6px auto 4px;
padding:0 10px;
font-size:0.82rem;
}

}

/* Site footer + static legal pages (global, not inside phone media query) */
.site-footer{
margin:8px auto 16px;
max-width:520px;
padding:0 12px;
box-sizing:border-box;
}

.site-footer__nav{
font-size:0.82rem;
color:#94a3b8;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:6px 10px;
}

.site-footer__nav a{
color:#fbbf24;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}

.site-footer__nav a:hover{
text-decoration:underline;
}

.site-footer__sep{
color:#64748b;
user-select:none;
}

.legal-page{
max-width:560px;
margin:0 auto;
padding:max(16px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));
text-align:left;
box-sizing:border-box;
color:#e2e8f0;
line-height:1.55;
}

.legal-page h1{
font-size:1.45rem;
margin:0 0 12px;
color:#fff;
text-align:left;
}

.legal-page h2{
font-size:1.05rem;
margin:22px 0 8px;
color:#fbbf24;
}

.legal-page p,
.legal-page li{
font-size:0.92rem;
margin:0 0 10px;
color:#cbd5e1;
}

.legal-page ul{
padding-left:1.25em;
margin:0 0 12px;
}

.legal-back{
display:inline-block;
margin-bottom:18px;
font-size:0.9rem;
color:#fbbf24;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}

.legal-back:hover{
text-decoration:underline;
}

.legal-muted{
font-size:0.8rem;
color:#64748b;
margin-top:20px;
}

.legal-page a{
color:#fbbf24;
text-decoration:none;
}

.legal-page a:hover{
text-decoration:underline;
}

.legal-page code{
font-size:0.85em;
background:rgba(15,23,42,0.65);
padding:2px 6px;
border-radius:6px;
color:#e2e8f0;
}