@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#eef0f8;background:#10121d;font-size:14px;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 30%,#22213b,transparent 55%)}button,input{font:inherit}button{cursor:pointer;border:1px solid #424459;border-radius:12px;background:#272a3c;color:#fff;padding:12px 18px;font-weight:600}button:hover{filter:brightness(1.18)}button:disabled{opacity:.4;cursor:default}header{max-width:1360px;margin:auto;display:flex;align-items:center;gap:24px;padding:28px 36px;border-bottom:1px solid #ffffff10}.brand{font-size:21px;font-weight:800;text-decoration:none;color:#fff}.brand span{color:#c4b2ff;margin-left:5px}.tag,.eyebrow{font-size:11px;letter-spacing:2px;color:#a29bb8;font-weight:700}header #leave{margin-left:auto}main{max-width:1300px;margin:auto;padding:42px 30px}#welcome{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:center;min-height:70vh}h1{font-size:clamp(38px,4.5vw,65px);line-height:1.17;letter-spacing:-3px;margin:22px 0}h1 em{font-style:normal;color:#c4b2ff}p{color:#aeb1c5;line-height:1.8}.hero p{max-width:460px;font-size:16px}.panel{background:#1b1e2e;border:1px solid #ffffff13;border-radius:22px;padding:26px}.entrance{max-width:440px;width:100%;box-shadow:0 20px 60px #0003}h2{font-size:24px;margin:0 0 14px}h3{margin-top:0}label{display:block;color:#c0c3d3;font-size:12px;margin:20px 0 10px}input:not([type=checkbox]){display:block;width:100%;border:1px solid #424459;background:#121522;color:#fff;border-radius:12px;padding:14px;margin-top:9px;outline:none}input:focus{border-color:#b9a0ff}.entrance button{width:100%;margin-top:10px}.primary{background:#c4b2ff;color:#21183b;border:0}.primary span{float:right}.divider{text-align:center;color:#888ca3;font-size:11px;margin:25px 0 5px}small{display:block;color:#979db7;line-height:1.7;font-size:11px;margin-top:16px}.showcase{display:flex;margin:40px 0 20px;padding-left:24px;gap:15px}.card{width:94px;height:140px;flex-shrink:0;border-radius:15px;border:5px solid #eeeffa;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:40px;position:relative;box-shadow:0 8px 15px #0005;color:white;text-shadow:0 2px 2px #0003}.card:before{content:'';position:absolute;inset:12px 8px;border:2px solid #ffffff55;border-radius:50% 30%;transform:rotate(20deg)}.card:after{content:attr(data-label);position:absolute;top:5px;left:6px;font-size:13px}.red{background:#ed5264}.yellow{background:#edb844;color:#34250c}.green{background:#34ac86}.blue{background:#498aea}.wild{background:conic-gradient(#498aea,#34ac86,#edb844,#ed5264,#498aea)}.tilt{transform:rotate(-13deg)}.tilt2{transform:rotate(13deg)}
.room-bar{display:flex;align-items:center;gap:25px;margin-bottom:24px}.room-bar h2{letter-spacing:5px;margin:7px 0 0}.room-bar #occupancy{margin-left:auto;color:#a6acc4}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}.layout>*{min-width:0}.players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:22px}.player{padding:14px 8px;background:#1c2031;border:1px solid #ffffff15;border-radius:15px;text-align:center;min-width:0}.player.active{border-color:#c4b2ff;box-shadow:0 0 0 2px #c4b2ff25}.avatar{margin:auto auto 8px;width:32px;height:32px;display:grid;place-items:center;background:#39344d;color:#cbbaff;border-radius:50%;font-weight:700}.player strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.player small{margin:5px 0}.player button{font-size:10px;padding:5px 8px}.lobby{text-align:center;padding:60px 20px}.controls{display:flex;gap:12px;justify-content:center;margin-top:22px}.table{min-height:335px;border-radius:26px;background:radial-gradient(ellipse,#2a304d,#1c2032);border:1px solid #ffffff12;text-align:center;padding:25px}.stacks{display:flex;justify-content:center;align-items:center;gap:45px;margin:25px 0}.back{background:repeating-linear-gradient(45deg,#292c48,#292c48 6px,#343952 6px,#343952 9px);flex-direction:column;font-size:40px}.back small{color:white;font-size:9px;margin:6px 0}.uno{background:#ed5264}.hand-title{display:flex;align-items:center;justify-content:space-between;margin:28px 0 16px;gap:10px}.hand-title h3{margin:0}.check{margin:0;font-size:11px}.hand{display:flex;gap:9px;overflow-x:auto;padding:8px 8px 24px;min-height:170px}.hand .card{width:82px;height:123px;font-size:32px}.hand .card:disabled{opacity:.48}.hand .card:not(:disabled):hover{transform:translateY(-8px)}aside .panel{margin-bottom:18px}#log{font-size:12px;color:#b3b8cf;line-height:1.8}#log p{margin:8px 0;padding-bottom:8px;border-bottom:1px solid #ffffff0a}details ul{padding-left:18px;font-size:12px;color:#aeb1c5;line-height:1.9}summary{cursor:pointer;font-weight:700}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#eef0fa;color:#242436;padding:14px 24px;border-radius:14px;box-shadow:0 8px 30px #0007;z-index:9;width:max-content;max-width:90vw}dialog{border:1px solid #55516c;background:#202338;color:#fff;border-radius:22px;padding:30px;max-width:95vw}dialog::backdrop{background:#080916bb}.color-options{display:flex;gap:10px;margin:25px 0}.color-options button{border:0}footer{text-align:center;color:#666e88;font-size:10px;padding:30px}[hidden]{display:none!important}
@media(max-width:900px){#welcome{gap:30px}.layout{grid-template-columns:minmax(0,1fr)}aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px}.tag{display:none}}
@media(max-width:600px){header{padding:18px}main{padding:26px 16px}#welcome{grid-template-columns:minmax(0,1fr);gap:24px}h1{letter-spacing:-2px}.hero p{font-size:14px}.showcase{margin:25px 0}.entrance{max-width:none}.players{grid-template-columns:repeat(3,minmax(0,1fr))}.room-bar{flex-wrap:wrap;gap:12px}.room-bar #occupancy{font-size:12px}.room-bar button{font-size:11px}aside{display:block}.hand-title{align-items:flex-start;flex-direction:column}.color-options{display:grid;grid-template-columns:1fr 1fr}.table{padding:22px 10px}.card{width:85px;height:128px}}
/* Galaxy arena */
:root{background:#060817;color:#edf3ff}body{background:transparent;min-height:100vh}.cosmos{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 10% 20%,#142353 0,transparent 50%),radial-gradient(ellipse at 90% 65%,#36145b 0,transparent 50%),#060817}.nebula{position:absolute;inset:-25%;background:radial-gradient(ellipse at 35% 35%,#6437b038,transparent 40%),radial-gradient(ellipse at 70% 65%,#098db638,transparent 35%);filter:blur(40px);animation:nebula-drift 32s ease-in-out infinite alternate}.starfield{position:absolute;inset:-150px;background-image:radial-gradient(1px 1px at 20px 35px,#e5f7ff 95%,transparent),radial-gradient(2px 2px at 140px 90px,#a1c4ff 95%,transparent),radial-gradient(1px 1px at 70px 170px,#c7a7ff 95%,transparent),radial-gradient(1px 1px at 230px 120px,#fff 95%,transparent);background-size:270px 220px,490px 350px,330px 290px,390px 310px;opacity:.6;animation:star-drift 80s linear infinite}.planet{position:absolute;border-radius:50%;box-shadow:inset -30px -25px 50px #030414cc,0 0 80px #9f61ff25}.planet-one{width:260px;height:260px;right:-90px;top:12%;background:linear-gradient(150deg,#9d87da,#55319b 45%,#211348)}.planet-two{width:100px;height:100px;left:3%;bottom:10%;background:linear-gradient(130deg,#7be0ed,#236b99 40%,#142145)}.shooting-star{position:absolute;top:15%;left:15%;width:180px;height:2px;background:linear-gradient(90deg,transparent,#a8c8ff);transform:rotate(-30deg);animation:meteor 10s linear infinite}header{background:#0a102355;border-bottom-color:#ad8cff25;backdrop-filter:blur(16px)}.brand{letter-spacing:1px;font-size:19px;text-shadow:0 0 25px #be88ff80}.brand span{color:#73eaff}.tag{color:#7ebacb}.eyebrow{color:#82dce9}h1{font-weight:800;text-shadow:0 0 70px #8073ff33}h1 em{background:linear-gradient(100deg,#87f5ff,#b79aff 65%,#ff9cdc);background-clip:text;color:transparent}.panel{background:linear-gradient(145deg,#192144d9,#141329d9);border-color:#9282cf30;box-shadow:0 16px 55px #0003;backdrop-filter:blur(18px)}.entrance{border-color:#a49cf04d;box-shadow:0 0 70px #6549d525,0 24px 60px #0005}.primary{background:linear-gradient(110deg,#91efff,#b8a2ff);box-shadow:0 0 25px #8d86fc35;color:#101531}button{transition:filter .2s,box-shadow .2s,transform .2s;border-color:#a491e538;background-color:#292343}button:hover:not(:disabled){box-shadow:0 0 22px #8ea7ff40;transform:translateY(-2px)}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #8ef1ff;outline-offset:4px}.showcase{padding:20px 20px 25px;gap:22px}.showcase .card{width:106px;height:155px;animation:hero-float 5s ease-in-out infinite}.showcase .card:nth-child(2){animation-delay:-1.5s}.showcase .card:nth-child(3){animation-delay:-3s}.avatar-label{display:flex;justify-content:space-between;color:#c4c6dd;font-size:12px;margin-top:20px}.avatar-label span{color:#86e8ff}.avatar-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 22px}.avatar-option{padding:8px 4px;background:#14192d;border-radius:14px;min-width:0;position:relative}.avatar-option[aria-pressed=true]{border-color:#8cf2ff;background:#214158;box-shadow:0 0 20px #60d9ed33}.avatar-art{width:48px;height:48px;display:grid;place-items:center;font-size:31px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#d7c0ff55,#5a3ca94d 55%,#131b39);border:1px solid #c3b0ff55;box-shadow:inset 0 0 12px #9f77ff28,0 0 18px #8f5fff20;margin:auto}.avatar-option .avatar-art{width:42px;height:42px;font-size:27px}.room-bar{flex-wrap:wrap}.room-bar h2{color:#cff7ff;text-shadow:0 0 20px #89dfff66}.player{position:relative;background:linear-gradient(160deg,#22264bdd,#13182be6);border-color:#877cb738;padding:15px 8px;border-radius:18px;transition:border-color .3s,box-shadow .3s}.avatar{width:50px;height:50px;background:transparent;margin-bottom:9px}.player.active{border-color:#9deaff;box-shadow:0 0 28px #53d7f633,inset 0 0 25px #4aabff12}.player.active:after{content:'✦';position:absolute;top:7px;right:10px;color:#85efff;animation:twinkle 1.5s ease-in-out infinite}.player.winner{border-color:#ffd383;box-shadow:0 0 35px #ffc75a55}.player.hit{animation:hit .5s ease-out 2;border-color:#ff678e}.player .uno-badge{color:#ffd283;font-weight:800;text-shadow:0 0 8px #ffca70}.table{position:relative;isolation:isolate;overflow:hidden;min-height:380px;border-radius:100px 100px 45px 45px;border:1px solid #a9c8ff55;background:radial-gradient(ellipse at center,#33407088,#12152de6 70%);box-shadow:inset 0 0 70px #6973dc28,0 0 50px #745ff51c,0 30px 50px #0004;padding:30px 20px}.arena-caption{font-size:9px;letter-spacing:4px;color:#96a9da;display:block;margin-bottom:10px}.arena-orbit{position:absolute;inset:32px 20px;border:1px solid #919ff721;border-radius:50%;z-index:-1;pointer-events:none}.orbit-two{inset:60px -35px;transform:rotate(-13deg);border-color:#87eaff15}.arena-orbit:after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#9ef7ff;top:50%;left:0;box-shadow:0 0 15px #8cf7ff}#turn-label{font-size:17px;font-weight:700;color:#d8f5ff}.stacks{gap:60px;margin:30px 0 22px}.card{border:2px solid #f2f2ffcc;overflow:hidden;box-shadow:inset 0 0 0 4px #ffffff20,0 12px 20px #0007,0 0 20px #7477d926;letter-spacing:-1px}.card:before{inset:18px 8px;border:2px solid #fff8;border-radius:50% 35%;background:linear-gradient(130deg,#fff2,transparent 65%)}.card:after{top:8px;left:9px;font-size:14px}.red{background:linear-gradient(145deg,#ff768e,#d62e61 65%,#8a1d53)}.yellow{background:linear-gradient(145deg,#ffe390,#e5a232 65%,#b26b24)}.green{background:linear-gradient(145deg,#78f2c7,#20af97 65%,#135a73)}.blue{background:linear-gradient(145deg,#8cceff,#5376ed 65%,#3b359e)}.wild{background:conic-gradient(from 45deg,#5b7dff,#36d6b5,#ffd25f,#fd609c,#8a6bf5,#5b7dff)}.back{background:radial-gradient(circle,#765ace55,transparent 60%),repeating-linear-gradient(45deg,#181c39,#181c39 8px,#24284d 8px,#24284d 10px);text-shadow:0 0 20px #bfb0ff;color:#c2adff}.back:before{border-color:#bfa3ff80}.uno{background:linear-gradient(130deg,#ffbd72,#ef5489);font-weight:800;box-shadow:0 0 25px #fa648544}.hand-title h3{color:#e5e2ff}.hand{padding-top:16px}.hand .card:not(:disabled){box-shadow:0 0 18px #81ddff40,0 10px 20px #0005;border-color:#b1efff}.hand .card:disabled{opacity:.65;filter:saturate(.8)}#color-label{font-size:12px;color:#adb7de}#log p:first-child{color:#a5edff}dialog{background:linear-gradient(150deg,#202b50,#221735);border-color:#a890ff66;box-shadow:0 0 100px #8252dd35}.result{text-align:center;margin-top:20px;position:relative;overflow:hidden;border-color:#ae8bff66;animation:result-reveal .8s cubic-bezier(.16,1,.3,1)}.result.win{background:radial-gradient(ellipse at top,#97724066,#242139);border-color:#ffd47f88;box-shadow:0 0 45px #eab25425}.result.loss{background:radial-gradient(ellipse at top,#733e8266,#171b39)}.result-icon{font-size:55px;margin-bottom:12px;filter:drop-shadow(0 0 22px #b796ff)}.result h2{margin-top:10px;font-size:30px}.result p{margin-bottom:0}.result.win h2{color:#ffdc8c}#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}.flying-card{position:fixed;pointer-events:none;transform-origin:center}.spark{position:fixed;width:6px;height:6px;border-radius:50%;background:#a7f6ff;box-shadow:0 0 14px currentColor}.confetti{position:fixed;width:8px;height:16px;border-radius:2px}.shockwave{position:fixed;width:100px;height:100px;border:2px solid #8eedff;border-radius:50%;box-shadow:0 0 30px #b397ff88}#event-banner{position:fixed;left:50%;top:20%;transform:translateX(-50%);z-index:35;text-align:center;pointer-events:none;min-width:230px;max-width:90vw;padding:18px 32px;border:1px solid #b4adff88;border-radius:20px;background:#181735ef;box-shadow:0 0 70px #8750dd66;animation:banner-in .35s ease-out}#event-banner strong{display:block;font-size:38px;background:linear-gradient(100deg,#8cfaff,#ffa4e8);background-clip:text;color:transparent}#event-banner span{display:block;font-size:12px;color:#e0d6ef;margin-top:6px}#event-banner.penalty{border-color:#ff8aa9;box-shadow:0 0 80px #ff3e7844}#event-banner.penalty strong{background:none;color:#ff9db5}#table.impact{animation:hit .4s ease-out}#discard.land{animation:card-land .45s ease-out}.new-card{animation:card-arrive .65s ease-out}.lobby{background:radial-gradient(ellipse at center,#32457744,#151b35dd);border-color:#8aeaff33}
@keyframes star-drift{to{transform:translateY(150px)}}@keyframes nebula-drift{to{transform:rotate(15deg) scale(1.1)}}@keyframes meteor{0%,75%{opacity:0;transform:translate(-300px,-100px) rotate(-30deg)}80%{opacity:1}95%,100%{opacity:0;transform:translate(1000px,450px) rotate(-30deg)}}@keyframes hero-float{50%{translate:0 -14px}}@keyframes twinkle{50%{opacity:.4;scale:.7}}@keyframes hit{20%,60%{translate:-5px 0}40%,80%{translate:5px 0}}@keyframes card-land{0%{transform:scale(1.3) rotate(12deg);filter:brightness(1.6)}100%{transform:scale(1) rotate(0)}}@keyframes card-arrive{from{opacity:0;transform:translateY(-35px) rotate(-12deg)}to{opacity:1;transform:none}}@keyframes result-reveal{from{opacity:0;transform:translateY(45px) scale(.9)}to{opacity:1;transform:none}}@keyframes banner-in{from{opacity:0;translate:0 20px;scale:.8}to{opacity:1;translate:0 0;scale:1}}
@media(min-width:1100px){main{padding-top:30px}.layout{grid-template-columns:minmax(0,1fr) 265px}.players{gap:12px}.table{min-height:360px}}@media(max-width:600px){.table{border-radius:45px;min-height:340px}.avatar-art{width:43px;height:43px;font-size:27px}.avatar{width:43px;height:43px}.player{padding:10px 5px}.showcase{gap:12px;padding-left:10px}.showcase .card{width:88px;height:130px}.room-bar{gap:10px}.room-bar #occupancy{margin-left:0}.stacks{gap:40px}.result h2{font-size:24px}.planet-one{width:180px;height:180px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Holographic collector cards and beginner codex */
.premium-card{width:112px;height:164px;display:block;padding:0;border:1px solid #ffffffb3;border-radius:17px;position:relative;text-align:center;isolation:isolate;box-shadow:inset 0 0 0 5px #080a2529,inset 0 0 0 6px #ffffff29,0 14px 24px #0006,0 0 22px #9085ff35}.premium-card:before{inset:10px;border:1px solid #ffffff45;border-radius:10px;transform:none;background:radial-gradient(1px 1px at 15% 18%,#fff,transparent),radial-gradient(1px 1px at 82% 38%,#fff,transparent),radial-gradient(1px 1px at 24% 76%,#fff,transparent);background-size:40px 45px}.premium-card:after{content:none}.card-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(120deg,transparent 15%,#ffffff1c 35%,#ffffff52 36%,transparent 38%,transparent 67%,#aefaff24 80%,transparent);mix-blend-mode:screen}.card-orbit{position:absolute;width:80px;height:80px;left:50%;top:43%;translate:-50% -50%;border:1px solid #ffffff80;border-radius:50%;box-shadow:0 0 0 6px #ffffff0d,0 0 0 12px #ffffff0a,inset 0 0 25px #0002;transform:rotate(-25deg)}.card-orbit:after{content:'✧';position:absolute;right:-5px;top:10px;font-size:12px;color:white}.card-face{position:absolute;top:43%;left:50%;translate:-50% -50%;font-size:52px;font-weight:800;line-height:1;letter-spacing:-3px;text-shadow:0 3px 0 #0003,0 0 22px #ffffff45}.card-corner{position:absolute;top:11px;left:13px;font-size:15px;line-height:1;letter-spacing:-1px}.card-corner.bottom{top:auto;left:auto;bottom:11px;right:13px;transform:rotate(180deg)}.card-name{position:absolute;top:73%;left:8px;right:8px;line-height:1.2;font-size:9px;font-weight:800;letter-spacing:.2px;text-transform:uppercase}.card-subtitle{position:absolute;top:84%;left:6px;right:6px;font-size:6px;font-weight:600;letter-spacing:.7px;line-height:1.3;opacity:.9}.special-card .card-orbit{border:2px solid #fff8;background:radial-gradient(circle,#ffffff2b,transparent 70%);transform:rotate(-20deg);border-radius:28% 50% 28% 50%}.special-card .card-face{font-size:48px}.type-skip2 .card-face{font-size:76px;top:40%}.type-again .card-face{font-size:65px}.type-all1 .card-face{font-size:60px}.type-plus2 .card-orbit,.type-plus4 .card-orbit{transform:rotate(45deg);border-radius:18%;width:62px;height:62px}.type-wild .card-orbit{background:conic-gradient(#4bd9ff60,#d680ff60,#ffbb4c60,#5df9b060);border-radius:50%}.number-card .card-face{font-size:61px}.yellow.premium-card{color:#322009;text-shadow:none}.card-slot{width:104px;flex:0 0 104px;position:relative}.hand .premium-card{width:104px;height:154px;font-size:40px}.hand .premium-card:disabled{opacity:.75;filter:saturate(.8)}.hand .premium-card:not(:disabled){border-color:#d1faff;box-shadow:0 0 0 1px #91e6ff88,0 0 25px #5cbcff55,0 12px 20px #0008}.hand .premium-card:not(:disabled):hover{transform:translateY(-9px) rotate(-2deg);filter:brightness(1.15)}.card-help{display:block;width:100%;padding:8px 2px;margin-top:8px;font-size:9px;font-weight:500;color:#b7d8ef;background:#111b3088;border:1px solid #88b0d326;border-radius:9px;white-space:normal;min-height:33px}.card-help:hover{color:#e7faff;background:#253b5d}.hand-hint{font-size:11px;color:#a3c4d9;margin:-6px 0 0}.hand{gap:12px;min-height:215px}.card-inspector h3{font-size:15px;margin:13px 0 8px;color:#dbf4ff}.card-inspector p{font-size:12px;line-height:1.8;margin:0 0 16px}.card-inspector button{padding:10px;font-size:11px;width:100%}.guide-link{font-size:12px;color:#b2ebff;background:#142039b3;margin-bottom:20px}.showcase .premium-card{width:112px;height:164px}.showcase .premium-card .card-name{font-size:9px}.guide-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.guide-heading h2{margin:9px 0}.guide-heading button{padding:8px 13px;align-self:flex-start}.guide-intro,.guide-note{font-size:12px;line-height:1.8}.guide-note{padding:14px;border-radius:12px;background:#8db6ff12;color:#b3e4f4;border:1px solid #a4cdff25}#card-guide{width:950px;max-width:94vw;max-height:90vh;padding:28px}#card-detail{width:420px;max-height:90vh}#detail-card{display:flex;justify-content:center;margin:20px}#detail-card .premium-card{width:140px;height:205px}#detail-card .card-face{font-size:65px}#detail-card .card-name{font-size:12px}#detail-card .card-subtitle{font-size:8px}#detail-description{font-size:14px;line-height:1.9}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}.guide-item{display:flex;gap:18px;padding:18px;border:1px solid #a7b1ec24;border-radius:18px;background:#0b102b88;align-items:center}.guide-item .premium-card{width:86px;height:128px;flex-shrink:0;pointer-events:none}.guide-item .card-orbit{width:58px;height:58px}.guide-item .card-face{font-size:40px}.guide-item .card-name{font-size:7px}.guide-item .card-subtitle{font-size:5px}.guide-item .card-corner{font-size:11px;left:11px;top:11px}.guide-item h3{font-size:14px;margin:0 0 8px;color:#e1f4ff}.guide-item p{font-size:11px;line-height:1.8;margin:0}.guide-item small{font-size:10px;margin-top:8px;color:#94b1ce}.new-badge{display:inline-block;padding:3px 7px;border:1px solid #d9b26a55;border-radius:5px;font-size:8px;letter-spacing:1px;color:#ffdaa0;margin-bottom:7px}.premium-card.back .card-name{font-size:8px}.premium-card.back .card-name:after{content:'RÚT BÀI';display:block}.premium-card.back .card-subtitle{display:none}.premium-card.back .card-name{font-size:0}.premium-card.back .card-name:after{font-size:8px}
@media(max-width:700px){.guide-grid{grid-template-columns:minmax(0,1fr)}#card-guide{padding:18px}.guide-item{gap:14px;padding:14px}.showcase{gap:13px}.showcase .premium-card{width:96px;height:144px}.showcase .card-face{font-size:46px}.showcase .card-orbit{width:65px;height:65px}.showcase .card-name{font-size:8px}.card-slot{width:99px;flex-basis:99px}.hand .premium-card{width:99px;height:148px}}
.premium-card .card-corner.bottom{top:11px;bottom:auto;right:12px;left:auto;transform:none;font-size:11px;opacity:.65}.guide-item .card-corner.bottom{font-size:9px}.hand .card-slot.new-card{animation:card-arrive .65s ease-out}
.premium-card .card-name{top:72%}.premium-card .card-subtitle{top:90%;letter-spacing:.3px}.guide-item .card-name{font-size:6.5px}.guide-item .card-subtitle{font-size:4.5px}