:root{color-scheme:light;--bg-ink: #0c1116;--bg-deep: #111a21;--bg-soft: #1a2530;--accent-sun: #f6c177;--accent-sea: #5cc8ff;--accent-ember: #ff6b4a;--accent-moss: #7bd389;--text-main: #f5f5f0;--text-muted: #b8c3cc;--panel: rgba(17, 26, 33, .88);--border: rgba(255, 255, 255, .08);--shadow: 0 20px 50px rgba(0, 0, 0, .35)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,sans-serif;color:var(--text-main);background:radial-gradient(circle at 20% 20%,rgba(92,200,255,.25),transparent 45%),radial-gradient(circle at 80% 10%,rgba(255,107,74,.25),transparent 40%),radial-gradient(circle at 50% 80%,rgba(123,211,137,.25),transparent 50%),var(--bg-ink);min-height:100vh}button,input{font-family:inherit}.app{min-height:100vh;padding:32px clamp(20px,4vw,48px);display:flex;flex-direction:column;gap:24px}.app--game{background:#3ea8f4;padding:20px clamp(20px,5vw,72px) 32px;gap:24px;color:#fff}.app--lobby{background:#3ea8f4;color:#fff;padding:28px clamp(20px,5vw,72px) 60px}.app__header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px}.app__header h1{margin:0;font-size:clamp(2.2rem,4vw,3.4rem);font-family:Sora,sans-serif;letter-spacing:-.03em}.app__tagline{margin:8px 0 0;color:var(--text-muted)}.auth-panel{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px 16px;background:#0c111699;border:1px solid var(--border);border-radius:16px}.auth-input{background:transparent;border:1px solid var(--border);padding:8px 12px;border-radius:10px;color:var(--text-main);min-width:180px}.auth-label,.auth-status{font-size:.85rem;color:var(--text-muted)}.error-banner{background:#ff6b4a33;border:1px solid rgba(255,107,74,.5);padding:12px 16px;border-radius:12px}.lobby{display:flex;justify-content:center;width:100%}.lobby__content{width:min(760px,100%);display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:8px}.lobby__title{margin:0;font-size:clamp(2rem,4vw,2.6rem);letter-spacing:.14em;text-transform:uppercase;font-family:Sora,sans-serif}.lobby__subtitle{margin:10px 0 6px;font-size:1.2rem;font-weight:500}.lobby__form{width:100%;display:flex;flex-direction:column;gap:16px}.lobby__label{font-size:1.05rem;letter-spacing:.02em}.lobby__input{width:100%;border:none;border-radius:6px;padding:12px 14px;font-size:1rem;color:#fff;background:linear-gradient(120deg,#2c8fd6,#1f7fc1);box-shadow:inset 0 0 0 1px #ffffff40}.lobby__input::placeholder{color:#ffffffb3}.lobby__buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.lobby__button{border:none;border-radius:6px;padding:12px 10px;background:#1f7fc1;color:#fff;font-size:1rem;cursor:pointer;box-shadow:inset 0 0 0 1px #fff3}.lobby__button:disabled{opacity:.6;cursor:not-allowed}.lobby__room{display:grid;grid-template-columns:1fr 160px;gap:16px;align-items:center}.lobby__button--join{text-transform:uppercase;letter-spacing:.08em;font-weight:600}.lobby__status{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#0000002e;border-radius:8px;padding:10px 12px;font-size:.9rem}.lobby__link{border:none;background:transparent;color:#fff;text-decoration:underline;cursor:pointer;padding:0}.lobby__button--how-to-play{margin-top:6px;text-transform:uppercase;letter-spacing:.1em;font-weight:400;background:#00000038;box-shadow:inset 0 0 0 1px #ffffff4d}.lobby__button--how-to-play:hover:not(:disabled){background:#0000004d}.how-to-play-dialog{border:none;border-radius:12px;padding:0;width:min(920px,92vw);max-height:88vh;background:linear-gradient(160deg,#2c8fd6,#1a6ba8);color:#fff;box-shadow:0 0 0 1px #fff3,0 24px 48px #00000059}.how-to-play-dialog::backdrop{background:#0f3c64a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.how-to-play-dialog__content{display:flex;flex-direction:column;gap:20px;padding:24px 28px 20px;max-height:88vh;overflow:auto}.how-to-play-dialog__title{margin:0;font-size:1.35rem;font-family:Sora,sans-serif;letter-spacing:.06em;text-transform:uppercase;line-height:1.25}.how-to-play-dialog__body{display:flex;flex-direction:column;gap:14px;font-size:.95rem;line-height:1.55;color:#fffffff2}.how-to-play-dialog__body p{margin:0}.how-to-play-dialog__body strong{color:#fff}.how-to-play-dialog__actions{display:flex;justify-content:flex-end;padding-top:4px}.lobby__button--how-to-play-close{text-transform:uppercase;letter-spacing:.08em;font-weight:600;background:#1f7fc1}.panel{width:min(720px,100%);background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:28px;box-shadow:var(--shadow)}.panel h2{margin:0 0 8px;font-size:1.8rem;font-family:Sora,sans-serif}.panel__subtitle{margin:0 0 20px;color:var(--text-muted)}.input-label{display:block;margin-bottom:6px;color:var(--text-muted);font-size:.9rem}.text-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0c111699;color:var(--text-main);margin-bottom:16px}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}.room-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.primary-button,.secondary-button,.ghost-button{border:none;padding:12px 18px;border-radius:14px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.primary-button{background:linear-gradient(120deg,var(--accent-sea),var(--accent-moss));color:#061017;box-shadow:0 8px 24px #5cc8ff59}.secondary-button{background:linear-gradient(120deg,#f6c177e6,#ff6b4ae6);color:#1b0f09}.ghost-button{background:transparent;border:1px solid var(--border);color:var(--text-main)}.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled),.ghost-button:hover:not(:disabled){transform:translateY(-2px)}.status-panel{margin-top:16px;background:#0c111699;border:1px solid var(--border);padding:12px 16px;border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.outer_board{display:flex;flex-direction:row}.board{width:min(1100px,100%);margin:0 auto;display:flex;flex-direction:column;gap:18px;color:#fff}.board__top{position:relative;text-align:center;padding:2px 0;min-height:20px;z-index:2}.board__title{margin:0;font-size:clamp(1.8rem,3.5vw,2.6rem);letter-spacing:.12em;text-transform:uppercase;font-family:Sora,sans-serif}.quit-button{position:absolute;right:0;top:0;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;color:#fff;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;cursor:pointer;box-sizing:border-box}.quit-button img{display:block;pointer-events:none}.quit-button:hover{opacity:.85}.quit-dialog{border:none;border-radius:16px;padding:0;background:var(--bg-soft);color:var(--text-main);width:min(460px,92vw);box-shadow:var(--shadow)}.quit-dialog::backdrop{background:#070c12b3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.quit-dialog__content{display:flex;flex-direction:column;gap:16px;padding:22px 24px 20px}.quit-dialog__title{margin:0;font-size:1.35rem;font-family:Sora,sans-serif;letter-spacing:-.01em}.quit-dialog__text{margin:0;color:var(--text-muted);line-height:1.5}.quit-dialog__actions{display:flex;justify-content:flex-end;gap:12px}.quit-dialog__button{border:none;border-radius:8px;padding:10px 14px;font-weight:600;cursor:pointer}.quit-dialog__button--cancel{background:#ffffff1f;color:#fff}.quit-dialog__button--confirm{background:var(--accent-ember);color:#1b0f09}.round-result-popup{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);display:flex;align-items:center;justify-content:center;padding:clamp(12px,2.5vw,20px) clamp(20px,4vw,32px);background:#ffffff1f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:12px;box-shadow:var(--shadow);z-index:10}.round-result-popup__text{font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:600;font-family:Sora,sans-serif;color:var(--text-main)}.board__round{display:flex;flex-direction:column;align-items:center;gap:8px}.board__round-text{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:500}.board__turn-pill{padding:clamp(4px,.8vw,6px) clamp(18px,3vw,26px);border-radius:999px;background:#fff3;font-size:clamp(.78rem,1.4vw,.9rem);font-weight:600}.board__turn-pill.is-active{background:#ffffff52}.board__players{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,220px) minmax(0,1fr);gap:28px;align-items:stretch}.player-column{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}.player-header{display:flex;gap:12px;align-items:center;color:#fff}.player-meta{display:flex;flex-direction:column;gap:2px}.player-name{font-size:clamp(.9rem,1.6vw,1.05rem);font-weight:600}.player-cards{font-size:clamp(.7rem,1.2vw,.8rem);opacity:.85}.board__center{display:flex;flex-direction:row;align-items:center}.tie-stack{width:clamp(45px,12vw,80px);height:clamp(80px,12vw,110px);border-radius:16px;border:2px dashed rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;font-size:clamp(.72rem,1.2vw,.85rem);padding:12px;position:relative}.tie-stack__count{position:absolute;right:0;bottom:0;transform:translate(40%,40%);min-width:20px;height:25px;padding:0 6px;border-radius:5px;background:#fff;color:#1b1b1b;font-weight:700;font-size:.72rem;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000040}.countdown-ring{--size: 60px;--progress: 0;--ring: 4px;width:var(--size);height:var(--size);border-radius:16px;display:grid;place-items:center;background:transparent;padding:var(--ring)}.countdown-ring.is-active{background:conic-gradient(#fff calc(var(--progress) * 1turn),#ffffff59 0)}.countdown-ring__inner{width:100%;height:100%;border-radius:12px;display:grid;place-items:center}.card{perspective:1200px;width:clamp(240px,28vw,320px);max-width:100%;--card-hero: #1d5fa8;--card-hero-dark: #0f3968;--card-text: #f8fbff}.card__inner{position:relative;width:100%;height:auto;aspect-ratio:4 / 7;transform-style:preserve-3d;transition:transform .8s ease}.card.is-revealed .card__inner{transform:rotateY(180deg)}.card__face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:10px;border:1px solid #1a1a1a;background:var(--card-hero);overflow:hidden;display:flex;flex-direction:column}.card__front{transform:rotateY(180deg)}.card__back{background:linear-gradient(140deg,#1d5fa8,#0f3968);display:flex;align-items:center;justify-content:center}.card__back-text{font-family:Sora,sans-serif;font-size:1.3rem;letter-spacing:.08em;color:var(--card-text)}.card__hero-area{background:var(--card-hero);color:var(--card-text);padding:14px 16px 0;display:flex;flex-direction:column;gap:8px}.card__top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.card__heading{display:flex;flex-direction:column;gap:4px}.card__player-name{font-size:clamp(.9rem,1.6vw,1.05rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase}.card__player-role{font-size:clamp(.6rem,1.1vw,.72rem);letter-spacing:.24em;text-transform:uppercase;opacity:.9}.card__flag{width:clamp(40px,5vw,54px);height:clamp(26px,3.2vw,34px);border-radius:4px;border:1px solid rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 6px #00000040}.card__flag-image{width:100%;height:100%;object-fit:cover;display:block}.card__hero{display:flex;justify-content:center;align-items:flex-end;padding:4px 0 8px;min-height:clamp(110px,18vw,170px)}.card__player-photo{width:85%;max-width:240px;height:clamp(110px,18vw,170px);object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.2))}.card__stats-grid{background:#d9d9d9;display:flex;flex-direction:column;color:#151515;flex:1;border-top:1px solid #b6b6b6;border-bottom:1px solid #b6b6b6}.stat-row{display:grid;grid-template-columns:1fr 1fr}.stat-row+.stat-row{border-top:1px solid #b6b6b6}.stat-cell{padding:clamp(6px,1.2vw,10px) clamp(8px,1.6vw,12px);border:none;background:transparent;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:clamp(.72rem,1.2vw,.85rem)}.stat-cell--left{border-right:1px solid #b6b6b6}.stat-cell--selectable{cursor:pointer}@media (hover: hover) and (pointer: fine){.stat-cell--selectable:hover:not(:disabled){background:#ececec}}.stat-cell--win{background:#44f214}.stat-cell--loss{background:#d73b3b}.stat-cell--tie{background:#6b7280}.stat-cell:disabled{color:#3a3a3a;opacity:.85;cursor:default}.stat-label{font-size:clamp(.72rem,1.2vw,.85rem);color:#1e1e1e;font-weight:500}.stat-value{font-weight:700}.avatar{width:var(--avatar-size, 50px);height:var(--avatar-size, 50px);border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:.95rem;color:#fff;letter-spacing:.06em}.avatar--sun,.avatar--sea,.avatar--earth,.avatar--night{background:#5a8cf5}.board__footer{display:flex;justify-content:center;padding-top:12px}@keyframes pulse{0%{box-shadow:0 0 #ffffff1a}50%{box-shadow:0 0 18px #ffffff40}to{box-shadow:0 0 #ffffff1a}}@keyframes tieGather{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes collect{0%{transform:translateY(0)}50%{transform:translateY(8px) scale(.98)}to{transform:translateY(0)}}@keyframes slideToWinner{0%{transform:translateY(0) scale(1)}60%{transform:translateY(10px) scale(.95)}to{transform:translateY(0) scale(1)}}@media (max-width: 800px){.board__players{grid-template-columns:1fr}.player-column--opponent{order:1}.player-column--you{order:2}.room-row{grid-template-columns:1fr}.board__top{display:flex;flex-direction:column;align-items:center;gap:12px}.lobby__buttons,.lobby__room{grid-template-columns:1fr}}@media (max-width: 640px){.app--game{min-height:100dvh;height:100dvh;padding:10px 12px 12px;gap:8px;overflow:hidden}.board{height:100%;gap:8px}.board__title{font-size:clamp(1.6rem,6vw,2.2rem)}.board__players{gap:12px;align-items:center}.board__center{padding:0;flex-direction:row;align-items:center}.board__round{align-items:flex-start;gap:4px}.board__round-text{font-size:.92rem}.board__turn-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 14px;font-size:.72rem;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.tie-stack{width:clamp(45px,12vw,80px);height:clamp(45px,12vw,80px);border-radius:12px;transform:translateY(-50%);font-size:.62rem;padding:8px}.tie-stack__count{right:0;bottom:0;transform:translate(40%,40%);min-width:16px;height:16px;padding:0 4px;font-size:.6rem}.player-column{width:min(360px,100%);justify-self:center;transform:translate(-8%);gap:6px}.player-header{gap:8px}.player-meta{min-width:0}.player-name{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-cards{font-size:.7rem;white-space:nowrap}.card{width:min(74vw,26vh);max-width:280px}.card__inner{aspect-ratio:4 / 6}.card__hero-area{padding:8px 10px 0;gap:4px}.card__player-name{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__player-role{font-size:.5rem;letter-spacing:.18em}.card__flag{width:32px;height:20px}.card__hero{min-height:clamp(20px,12vh,95px);padding:2px 0 6px}.card__player-photo{height:clamp(20px,12vh,95px);width:82%}.stat-cell{padding:3px 6px;font-size:.55rem}.stat-label{font-size:.55rem;white-space:nowrap}.stat-value{font-size:.58rem}.card__back-text{font-size:1rem}}@media (max-width: 640px) and (max-height: 700px){.board{gap:6px}.card{width:min(68vw,22vh)}.board__title{font-size:clamp(1.4rem,5.4vw,2rem)}.board__players{gap:8px}.board__round-text{font-size:.86rem}.board__turn-pill{font-size:.68rem}.card__hero{min-height:clamp(20px,10vh,85px)}.card__player-photo{height:clamp(20px,10vh,85px)}.tie-stack{width:clamp(50px,14vw,64px);height:clamp(50px,14vw,64px);font-size:.58rem}.tie-stack__count{right:0;bottom:0;transform:translate(40%,40%);min-width:14px;height:14px;padding:0 4px;font-size:.56rem}.player-header{gap:6px}.countdown-ring{--size: 50px !important}.avatar{--avatar-size: 36px !important}.stat-cell{padding:2px 6px;font-size:.52rem}.stat-label{font-size:.52rem}.stat-value{font-size:.55rem}}.card__hero-area{padding:var(--cv-hero-pad-top) var(--cv-hero-pad-x) 0;gap:var(--cv-hero-gap)}.card__top-row{gap:var(--cv-top-row-gap)}.card__heading{gap:var(--cv-heading-gap);min-width:0}.card__player-name{font-size:var(--cv-name-size);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15}.card__player-role{font-size:var(--cv-role-size);letter-spacing:var(--cv-role-letter-spacing);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.card__flag{width:var(--cv-flag-width);height:var(--cv-flag-height);border-radius:var(--cv-flag-radius);flex-shrink:0;box-shadow:0 var(--cv-flag-shadow) #00000040}.card__hero{min-height:var(--cv-hero-min-height);padding-bottom:var(--cv-hero-pad-bottom)}.card__player-photo{height:var(--cv-photo-height);max-width:var(--cv-photo-max-width);width:85%}.stat-row{flex:1 1 0;min-height:0}.stat-cell{padding:var(--cv-stat-cell-pad-y) var(--cv-stat-cell-pad-x);font-size:var(--cv-stat-font-size);gap:var(--cv-stat-gap);min-height:0}.stat-label{font-size:var(--cv-stat-font-size);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-value{font-size:var(--cv-stat-font-size)}.card__back-text{font-size:var(--cv-back-text-size)}