body.party-page [hidden], .party-promo [hidden] { display: none !important; }
body.party-page { background: #faf7fc; }
.party-page button, .party-page input, .party-page select, .party-page textarea { font-family: inherit; }
.party-page button:focus-visible, .party-page a:focus-visible, .party-page input:focus-visible, .party-page select:focus-visible, .party-page textarea:focus-visible { outline: 3px solid #e4ad43; outline-offset: 3px; }

.party-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 19px; border: 1px solid #7721ac; border-radius: 12px; background: #7620ac; box-shadow: 0 9px 19px #52147c24; color: #fff !important; font: 800 .82rem Montserrat,sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.party-button:hover:not(:disabled) { transform: translateY(-2px); background: #5f158e; box-shadow: 0 13px 24px #52147c35; }
.party-button-secondary { border-color: #d8bce9; background: #fff; box-shadow: none; color: #681993 !important; }
.party-button-secondary:hover:not(:disabled) { background: #f4e9fb; }
.party-button:disabled { opacity: .52; cursor: not-allowed; box-shadow: none; }
.party-text-button { display: inline-flex; align-items: center; gap: 9px; padding: 8px 2px; border: 0; background: transparent; color: #711e9e; font-size: .82rem; font-weight: 800; cursor: pointer; }
.party-text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.party-section-kicker { display: block; color: #8b37b7; font-size: .68rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

/* Public dice page */
.party-promo { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 28px; overflow: hidden; margin-top: 32px; padding: clamp(26px,4vw,44px); border: 1px solid #ddc1ea; border-radius: 25px; background: radial-gradient(circle at 93% 12%,#f3dfff,transparent 34%), linear-gradient(125deg,#fff,#fbf5ff); box-shadow: 0 16px 34px #41215b12; }
.party-promo:after { position: absolute; right: -35px; bottom: -75px; width: 190px; height: 190px; border: 1px solid #a970c440; border-radius: 50%; content: ''; pointer-events: none; }
.party-promo h2 { margin: 15px 0 8px; color: #352044; font-size: clamp(1.65rem,3vw,2.4rem); letter-spacing: -.04em; }
.party-promo p { max-width: 680px; margin: 0; color: #675b72; line-height: 1.65; }
.party-promo .party-promo-auth { margin-top: 13px; }
.party-promo-auth a { color: #7419a7; font-weight: 800; text-decoration: underline; }
.party-promo-actions, .party-title-actions, .party-actions, .party-dialog-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.party-promo-actions { position: relative; z-index: 1; }

/* Party hub */
.party-main { max-width: 1500px; min-height: 70vh; margin: auto; padding: 36px 24px 86px; color: #392849; }
.party-main h1, .party-main h2, .party-main h3 { color: inherit; }
.party-alert { position: sticky; z-index: 20; top: 12px; margin-bottom: 16px; padding: 15px 18px; border: 1px solid #edb3c1; border-radius: 12px; background: #fff1f5; box-shadow: 0 8px 26px #541a3712; color: #8d2849; font-size: .86rem; font-weight: 700; }
.party-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(370px,.92fr); align-items: center; min-height: 490px; overflow: hidden; border: 1px solid #d6b8eb; border-radius: 30px; background: radial-gradient(circle at 76% 16%,#8d35c780,transparent 32%),radial-gradient(circle at 16% 91%,#9b62d243,transparent 40%),linear-gradient(118deg,#321448,#551e7c 62%,#692593); box-shadow: 0 22px 54px #2c12313a; }
.party-hero-copy { position: relative; z-index: 1; padding: clamp(32px,5vw,74px) 0 clamp(32px,5vw,74px) clamp(32px,5vw,74px); }
.party-hero-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid #e9c98455; border-radius: 50px; background: #fff1ba18; color: #ffe2a2; font-size: .65rem; font-weight: 800; letter-spacing: .17em; }
.party-hero h1 { margin: 24px 0 16px; color: #fff; font-size: clamp(2.7rem,4.3vw,4.6rem); line-height: 1.05; letter-spacing: -.055em; }
.party-hero h1 em { color: #ffda79; font-style: normal; }
.party-hero p { max-width: 570px; margin: 0; color: #ecdcf3; font-size: .98rem; line-height: 1.8; }
.party-hero .party-title-actions { margin-top: 27px; }
.party-hero .party-button { border-color: #ffd87d; background: #ffda80; box-shadow: 0 12px 25px #20102b40; color: #46135f !important; }
.party-hero .party-button:hover { background: #ffe7aa; }
.party-hero .party-button-secondary { border-color: #caa9dd; background: #fff1; box-shadow: none; color: #fff !important; }
.party-hero .party-button-secondary:hover { background: #ffffff26; }
.party-hero-note { display: flex; flex-wrap: wrap; gap: 10px 23px; margin-top: 38px; color: #e1cbe9; font-size: .69rem; font-weight: 700; }
.party-hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.party-hero-note i { color: #f9d27b; }
.party-hero-art { position: relative; height: 100%; min-height: 400px; display: flex; align-items: center; justify-content: center; padding: 25px 30px 25px 5px; }
.party-hero-art:before { position: absolute; inset: 11% 5%; border: 1px solid #e5b96969; border-radius: 28px; box-shadow: 0 0 0 19px #ffffff0b; content: ''; transform: rotate(5deg); }
.party-hero-art img { position: relative; width: 100%; max-height: 425px; border: 1px solid #fbeac9c4; border-radius: 23px; background: #faf4ff; box-shadow: 0 18px 39px #1c08266b; object-fit: cover; transform: rotate(-2deg); }
.party-state { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 21px; margin-top: 26px; padding: 24px 27px; border: 1px solid #e8d8ef; border-radius: 20px; background: #fff; box-shadow: 0 11px 28px #39154b0d; }
.party-state-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 17px; background: #f3e4fb; color: #7c2aa8; font-size: 1.45rem; }
.party-state h2 { margin: 5px 0 6px; font-size: 1.18rem; }
.party-state p { margin: 0; color: #71647b; font-size: .84rem; line-height: 1.6; }
.party-state-error { border-color: #f1d6da; background: #fffafb; }
.party-state-error .party-state-icon { background: #fff0f1; color: #b44860; }
.party-state-error .party-section-kicker { color: #b44860; }
.party-welcome { display: grid; grid-template-columns: 190px minmax(0,1fr); align-items: center; gap: 28px; margin-top: 27px; padding: 35px clamp(25px,4vw,53px); border: 1px solid #e9d8ef; border-radius: 25px; background: radial-gradient(circle at 11% 47%,#f4e3fd,transparent 26%),linear-gradient(120deg,#fff,#fcf8ff); box-shadow: 0 11px 28px #39154b0d; }
.party-welcome-art { position: relative; display: grid; width: 150px; height: 150px; place-items: center; border: 1px solid #e9d2f5; border-radius: 35px; background: linear-gradient(145deg,#f7eafe,#e9d4f6); color: #8533b3; font-size: 4.6rem; transform: rotate(-6deg); }
.party-welcome-art i { filter: drop-shadow(0 10px 6px #6c2a8d28); }
.party-welcome-art span { position: absolute; right: 12px; top: 4px; color: #d7a53e; font-size: 2rem; }
.party-welcome h2 { margin: 9px 0 9px; color: #39244d; font-size: clamp(1.45rem,2.5vw,2.2rem); letter-spacing: -.04em; }
.party-welcome p { max-width: 680px; margin: 0; color: #71657b; font-size: .88rem; line-height: 1.7; }
.party-welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 21px; margin-top: 20px; }
.party-list-section { margin-top: 37px; }
.party-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.party-section-heading h2 { margin: 7px 0 0; color: #3e2952; font-size: clamp(1.2rem,2vw,1.65rem); letter-spacing: -.025em; }
.party-section-count { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #f3e6f9; color: #7724a5; font-size: .8rem; font-weight: 800; }
.party-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 18px; }
.party-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #eadcf1; border-radius: 20px; background: #fff; box-shadow: 0 12px 26px #34124911; transition: transform .2s, box-shadow .2s; }
.party-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px #3412491c; }
.party-card>img { width: 100%; height: 145px; object-fit: cover; }
.party-card-symbol { display: grid; height: 110px; place-items: center; background: radial-gradient(circle at 70% 0,#fff6cf,transparent 33%),linear-gradient(135deg,#f0dbfa,#d9b4ed); color: #74309b; font-size: 2.8rem; }
.party-card>div:nth-last-child(2) { flex: 1; padding: 20px 21px; }
.party-card span { color: #7e2da7; font-size: .69rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.party-card h3 { margin: 8px 0; color: #362548; font-size: 1.15rem; }
.party-card p { min-height: 42px; margin: 0 0 13px; color: #756a7b; font-size: .84rem; line-height: 1.55; }
.party-card small { color: #80738b; font-size: .7rem; line-height: 1.5; }
.party-card .party-button { margin: 0 20px 20px; }
.party-list-empty { padding: 24px; border: 1px dashed #e2d0ec; border-radius: 14px; background: #fff; color: #82738b; font-size: .83rem; }
.party-how { margin-top: 46px; padding: 28px 30px 32px; border: 1px solid #e7d8ed; border-radius: 25px; background: #fff; }
.party-how-heading h2 { margin: 8px 0 25px; color: #38234b; font-size: clamp(1.5rem,2.5vw,2rem); letter-spacing: -.04em; }
.party-how-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.party-how-grid article { padding: 21px; border: 1px solid #eee2f3; border-radius: 17px; background: #fcf9fe; }
.party-how-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 14px; border-radius: 12px; background: #f1e1fa; color: #7625a2; font-size: 1.05rem; }
.party-how-grid strong { display: block; color: #402b50; font-size: .87rem; }
.party-how-grid p { margin: 8px 0 0; color: #776c80; font-size: .76rem; line-height: 1.65; }

/* Shared party room */
.party-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; color: #72229c; font-size: .82rem; font-weight: 800; text-decoration: none; }
.party-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.party-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 210px; margin-bottom: 24px; padding: clamp(25px,4vw,43px); border: 1px solid #d5b6e6; border-radius: 26px; background: radial-gradient(circle at 95% 10%,#8b48b1,transparent 35%),linear-gradient(120deg,#37164f,#6b288d); box-shadow: 0 16px 34px #3c165b29; color: #fff; }
.party-detail-head h1 { margin: 12px 0 10px; color: #fff; font-size: clamp(2rem,4vw,3.6rem); letter-spacing: -.05em; }
.party-detail-head .dice-eyebrow { color: #ffdc92; }
.party-detail-head p { max-width: 750px; color: #e8d9ee; line-height: 1.65; }
.party-detail-head img { width: 220px; height: 150px; border: 3px solid #ffffff4f; border-radius: 18px; object-fit: cover; box-shadow: 0 12px 22px #1b0c253d; }
.party-meta { color: #ffe3a1; font-size: .8rem; font-weight: 800; }
.party-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 295px; align-items: start; gap: 20px; }
.party-main-column,.party-side-column { display: grid; gap: 20px; min-width: 0; }
.party-panel { min-width: 0; padding: 24px; border: 1px solid #e9dcf0; border-radius: 21px; background: #fff; box-shadow: 0 10px 25px #35164e0d; }
.party-panel h2 { margin: 0 0 16px; color: #3b2850; font-size: 1.3rem; }
.party-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.party-panel-head>span { color: #806e8c; font-size: .74rem; font-weight: 800; }
.party-actions select,.party-field input:not([type=file]),.party-field textarea,.party-field select,.party-invite input { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #e0cdea; border-radius: 10px; outline: 0; background: #fff; color: #3e2e49; font: inherit; }
.party-field input:focus,.party-field textarea:focus,.party-field select:focus { border-color: #9d59c2; box-shadow: 0 0 0 3px #ba80d52e; }
.party-actions select { width: auto; }
.party-dice { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 17px; }
.party-dice .dice-controls,.party-dice .dice-stage { position: static; padding: 16px; box-shadow: none; }
.party-dice .dice-table { height: 360px; }
.party-dice .dice-option { grid-template-columns: 32px 1fr auto; gap: 5px; padding: 5px; }
.party-dice .dice-symbol { width: 30px; height: 30px; font-size: .55rem; }
.party-dice .dice-stepper button { width: 28px; height: 28px; }
.party-dice .dice-stepper { gap: 3px; }
.party-dice .stage-heading h2 { font-size: 1.1rem; }
.party-field { display: grid; gap: 7px; margin: 16px 0; color: #5f4d6b; font-size: .8rem; font-weight: 800; }
.party-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: #5f4d6b; font-size: .82rem; font-weight: 700; }
.party-check input { width: 18px; height: 18px; }
.party-rolls,.party-members { list-style: none; margin: 0; padding: 0; }
.party-rolls li { display: grid; grid-template-columns: 135px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid #f0e8f4; }
.party-rolls li:first-child,.party-members li:first-child { border-top: 0; }
.party-rolls strong,.party-rolls span,.party-rolls small,.party-members strong,.party-members small { display: block; }
.party-rolls small,.party-members small { margin-top: 4px; color: #897b91; font-size: .7rem; line-height: 1.4; }
.party-roll-total { color: #7621a4; font-size: 1.25rem; }
.party-members li { padding: 12px 0; border-top: 1px solid #f0e8f4; }
.party-member-actions { display: flex; gap: 6px; margin-top: 8px; }
.party-member-actions button,.party-admin-actions>button,.party-invite button { padding: 8px 10px; border: 1px solid #e2cfed; border-radius: 8px; background: #faf5fd; color: #6b2695; font: 700 .7rem Montserrat,sans-serif; cursor: pointer; }
.party-admin-actions { display: grid; gap: 9px; }
.party-admin-actions>button { text-align: left; }
.party-admin-actions .danger { border-color: #f2c4cd; color: #a12748; background: #fff6f8; }
.party-invite { display: grid; gap: 9px; padding: 12px; border: 1px solid #eadbf2; border-radius: 10px; background: #faf7fc; }
.party-invite label { display: grid; gap: 5px; font-size: .7rem; font-weight: 800; }
.party-invite input { font-size: .7rem; }

/* Forms */
.party-dialog { width: min(92vw,560px); max-height: min(87vh,850px); padding: 0; overflow: auto; border: 1px solid #e4d0ed; border-radius: 24px; box-shadow: 0 27px 85px #210b3b66; background: #fff; color: #392947; }
.party-dialog::backdrop { background: #1e0e2cbc; backdrop-filter: blur(3px); }
.party-dialog form { position: relative; padding: 30px; }
.party-dialog h2 { margin: 0 35px 7px 0; color: #382348; font-size: clamp(1.45rem,3vw,1.85rem); letter-spacing: -.035em; }
.party-dialog-intro { margin: 0 0 22px; color: #7a6d83; font-size: .81rem; line-height: 1.6; }
.party-dialog-close { position: absolute; top: 23px; right: 24px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 9px; background: #f6eef9; color: #5b3d6c; font-size: 1.4rem; cursor: pointer; }
.party-dialog .party-field { margin: 18px 0; }
.party-dialog .party-field textarea { resize: vertical; }
.party-dialog-actions { justify-content: flex-end; margin-top: 25px; padding-top: 18px; border-top: 1px solid #f0e7f4; }
.party-confirm-illustration { display: flex; align-items: center; gap: 14px; margin: 23px 0 18px; padding: 16px; border: 1px solid #ead8f2; border-radius: 16px; background: linear-gradient(115deg,#fbf3ff,#fff); }
.party-confirm-illustration.is-danger { border-color: #f3d6de; background: linear-gradient(115deg,#fff3f6,#fff); }
.party-confirm-icon { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 14px; background: #ebd4f7; color: #7620a4; font-size: 1.2rem; }
.party-confirm-illustration.is-danger .party-confirm-icon { background: #ffe1e8; color: #a52b4b; }
.party-confirm-illustration>div { display: grid; gap: 4px; }
.party-confirm-kicker { color: #9469a7; font-size: .61rem; font-weight: 800; letter-spacing: .14em; }
.party-confirm-illustration strong { color: #3b2850; font-size: .95rem; }
.party-confirm-summary { margin: 0 0 16px; color: #6e5b79; font-size: .82rem; line-height: 1.7; }
.party-confirm-summary strong { color: #412850; }
.party-confirm-mail-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 17px; padding: 13px 14px; border: 1px solid #e9d8ef; border-radius: 12px; background: #fbf7fd; color: #674f75; font-size: .72rem; line-height: 1.55; }
.party-confirm-mail-note i { margin-top: 2px; color: #842fac; font-size: 1rem; }
.party-code-field input { min-height: 64px !important; border-radius: 13px !important; font-size: 1.65rem !important; font-weight: 800 !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.party-code-field input::placeholder { color: #c9afd6; }
.party-confirm-code-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: -5px; color: #88768f; font-size: .67rem; }
.party-confirm-code-footer button { padding: 4px 0; border: 0; background: transparent; color: #7524a1; font: 800 .67rem Montserrat,sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.party-confirm-code-footer button:disabled { color: #8e7c98; text-decoration: none; cursor: default; }
.party-button-danger { border-color: #a92f51 !important; background: #a92f51 !important; box-shadow: 0 9px 19px #7a203b28; }
.party-button-danger:hover:not(:disabled) { background: #8e203e !important; }
.party-upload { position: relative; display: flex; align-items: center; gap: 13px; min-height: 85px; padding: 14px; border: 1px dashed #cda7df; border-radius: 13px; background: #fbf7fd; cursor: pointer; }
.party-upload:hover { background: #f7eefb; border-color: #9d59c2; }
.party-upload:focus-within { border-color: #9d59c2; outline: 3px solid #e4ad43; outline-offset: 3px; }
.party-upload-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 11px; background: #eeddf8; color: #7c2aa5; font-size: 1.1rem; }
.party-upload-copy { display: grid; gap: 4px; min-width: 0; }
.party-upload-copy strong { color: #4c315f; font-size: .78rem; }
.party-upload-copy small { color: #8b7c95; font-size: .67rem; font-weight: 500; }
.party-upload-preview { width: 54px; height: 54px; margin-left: auto; border-radius: 9px; object-fit: cover; }
.party-upload-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; opacity: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }

@media (max-width: 1120px) { .party-hero { grid-template-columns: minmax(0,1fr) 40%; } .party-dice { grid-template-columns: 1fr; } .party-dice .dice-table { height: 400px; } }
@media (max-width: 800px) { .party-hero { grid-template-columns: 1fr; } .party-hero-copy { padding: 40px 35px 0; } .party-hero-art { min-height: 240px; max-height: 360px; padding: 15px 34px 35px; } .party-hero-art img { width: min(100%,610px); max-height: 310px; } .party-detail-grid { grid-template-columns: 1fr; } .party-how-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .party-main { padding: 16px 12px 58px; } .party-hero { border-radius: 22px; } .party-hero-copy { padding: 32px 23px 0; } .party-hero h1 { font-size: clamp(2.35rem,10vw,3.3rem); } .party-hero p { font-size: .84rem; } .party-hero .party-title-actions { display: grid; } .party-hero-note { margin-top: 24px; font-size: .63rem; } .party-hero-art { min-height: 215px; } .party-promo { grid-template-columns: 1fr; } .party-promo-actions { display: grid; } .party-state,.party-welcome { display: block; padding: 23px; } .party-state-icon { margin-bottom: 15px; } .party-state .party-button { margin-top: 17px; } .party-welcome-art { width: 88px; height: 88px; margin-bottom: 20px; border-radius: 20px; font-size: 2.8rem; } .party-welcome-art span { font-size: 1rem; } .party-welcome-actions { display: grid; justify-items: start; } .party-how { padding: 23px; } .party-detail-head { display: block; } .party-detail-head img { width: 100%; max-width: 350px; margin-top: 18px; } .party-rolls li { grid-template-columns: 1fr auto; } .party-rolls li>div:nth-child(2) { grid-column: 1/-1; grid-row: 2; } .party-roll-total { grid-column: 2; grid-row: 1; } .party-dialog form { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .party-button,.party-card { transition: none; } }

/* Party room: identity, session, members and shared table */
.party-detail { scroll-margin-top: 20px; }
.party-detail-head { position: relative; display: grid; grid-template-columns: 118px minmax(0,1fr) auto; align-items: center; gap: 26px; min-height: 230px; overflow: hidden; background: radial-gradient(circle at 85% -18%,#9d4fcb,transparent 37%),radial-gradient(circle at 10% 135%,#8c4cb1,transparent 45%),linear-gradient(112deg,#351345,#612282 73%,#77249b); }
.party-detail-head:after { position: absolute; inset: auto -105px -250px auto; width: 440px; height: 440px; border: 1px solid #f7d18638; border-radius: 50%; box-shadow: 0 0 0 42px #f7d1860b,0 0 0 85px #f7d18608; content: ''; pointer-events: none; }
.party-room-emblem { position: relative; z-index: 1; display: grid; width: 116px; height: 116px; place-items: center; overflow: hidden; border: 2px solid #ffe3a7a3; border-radius: 29px; background: linear-gradient(145deg,#a15dc4,#482065); box-shadow: 0 14px 28px #160a234f,inset 0 0 0 5px #ffffff1b; transform: rotate(-4deg); }
.party-room-emblem img { width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; object-fit: cover; transform: rotate(4deg) scale(1.1); }
.party-room-emblem span { color: #ffe5a5; font-size: 3.4rem; filter: drop-shadow(0 8px 10px #260a40a8); }
.party-room-heading { position: relative; z-index: 1; min-width: 0; }
.party-room-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.party-room-kind { display: inline-flex; align-items: center; min-height: 29px; padding: 5px 11px; border: 1px solid #e8d1f35e; border-radius: 50px; background: #ffffff19; color: #f3dcfa; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.party-role-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 5px 11px; border: 1px solid transparent; border-radius: 50px; font-size: .66rem; font-weight: 800; }
.party-role-badge.role-owner { border-color: #f1cd7980; background: #ffe4a5; color: #69400f; }
.party-role-badge.role-master { border-color: #e3c5fa; background: #f2ddff; color: #61218a; }
.party-role-badge.role-player { border-color: #baded9; background: #dff7f2; color: #145e59; }
.party-detail-head h1 { margin: 15px 0 8px; font-size: clamp(2rem,4vw,3.7rem); }
.party-detail-head p { margin: 0; color: #eadcf0; font-size: .88rem; }
.party-room-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 19px; color: #e9d6f0; font-size: .72rem; font-weight: 700; }
.party-room-meta>span { display: inline-flex; align-items: center; gap: 7px; }
.party-room-meta i { color: #ffe0a1; }
.party-room-live { display: inline-flex; align-items: center; gap: 7px; }
.party-room-live:before { width: 8px; height: 8px; border-radius: 50%; background: #cbbbd2; content: ''; }
.party-room-live.is-live:before { background: #5de5a4; box-shadow: 0 0 0 4px #5de5a42c; }
.party-room-ornament { position: relative; z-index: 1; display: grid; width: 120px; height: 120px; place-items: center; color: #f9d89430; font-size: 6rem; transform: rotate(-17deg); }
.party-room-ornament span { position: absolute; top: -8px; right: -8px; color: #ffe3a591; font-size: 1.3rem; }
.party-room-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: -3px 0 21px; padding: 8px; border: 1px solid #e8d9ef; border-radius: 15px; background: #fff; box-shadow: 0 9px 23px #35164e0c; }
.party-room-nav a { display: inline-flex; align-items: center; gap: 9px; min-height: 39px; padding: 8px 13px; border-radius: 9px; color: #6c4d7e; font-size: .74rem; font-weight: 800; text-decoration: none; }
.party-room-nav a:hover,.party-room-nav a:focus-visible { background: #f4e9fa; color: #6e1e9c; }
.party-room-nav i { color: #8b48af; }
.party-detail-grid { grid-template-columns: minmax(0,1fr) 320px; gap: 21px; }
.party-main-column,.party-side-column { gap: 21px; }
.party-session-panel { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 17px; border-color: #ebd9ef; background: radial-gradient(circle at 92% 15%,#f7e8fc,transparent 30%),#fff; scroll-margin-top: 20px; }
.party-session-panel.is-active { border-color: #b8e1cb; background: radial-gradient(circle at 94% 9%,#e5f8ed,transparent 32%),#fff; }
.party-session-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 16px; background: #f0dff9; color: #7d2da5; font-size: 1.27rem; }
.party-session-panel.is-active .party-session-icon { background: #def5e9; color: #218058; }
.party-session-copy h2 { margin: 6px 0 5px; font-size: 1.17rem; }
.party-session-copy p { max-width: 560px; margin: 0; color: #796b82; font-size: .77rem; line-height: 1.6; }
.party-session-panel .party-actions { justify-content: flex-end; }
.party-session-panel .party-button { min-height: 42px; white-space: nowrap; font-size: .73rem; }
.party-room-section-heading { align-items: center; margin-bottom: 17px; }
.party-room-section-heading h2 { margin: 6px 0 0; color: #39234b; font-size: clamp(1.3rem,2vw,1.7rem); }
.party-room-section-heading p { margin: 6px 0 0; color: #85778d; font-size: .75rem; }
.party-table-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #e6d7ec; border-radius: 50px; background: #faf6fc; color: #775988; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.party-dice-notice { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 11px 13px; border: 1px solid #e8d5ef; border-radius: 10px; background: #faf5fc; color: #6b4a7c; font-size: .73rem; font-weight: 700; line-height: 1.5; }
.party-dice-notice i { color: #9a5ab7; }
.party-roll-panel { scroll-margin-top: 20px; }
.party-dice .dice-controls,.party-dice .dice-stage { border-radius: 16px; background: #fdfbfe; }
.party-dice .dice-controls { border-color: #ead8f2; }
.party-dice .dice-stage { border-color: #ead8f2; }
.party-dice .panel-heading h2 { margin-top: 6px; font-size: 1.25rem; }
.party-dice .dice-table { border-width: 9px; border-radius: 19px; }
.party-dice .party-field { margin-top: 17px; }
.party-secret-check { align-items: flex-start; padding: 11px; border: 1px solid #ebd9f2; border-radius: 10px; background: #faf6fc; cursor: pointer; }
.party-secret-check input { flex: 0 0 18px; margin-top: 3px; }
.party-secret-check > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; line-height: 1.35; }
.party-secret-check > span > strong,.party-secret-check > span > small { display: block; width: 100%; white-space: normal; }
.party-secret-check > span > small { color: #8e7f98; font-size: .65rem; font-weight: 500; }
.party-history-panel { scroll-margin-top: 20px; }
.party-history-filter { display: flex; align-items: center; gap: 9px; width: fit-content; margin: 0 0 12px; color: #746183; font-size: .72rem; font-weight: 800; }
.party-history-filter select { min-height: 35px; padding: 6px 10px; border: 1px solid #e1ceeb; border-radius: 9px; background: #fff; color: #58346e; font-size: .72rem; font-weight: 700; }
.party-sync-status { display: inline-flex; align-items: center; gap: 7px; color: #32845c !important; font-size: .68rem !important; white-space: nowrap; }
.party-sync-status i { font-size: .42rem; }
.party-rolls li { grid-template-columns: 130px minmax(0,1fr) auto; padding: 15px 3px; }
.party-roll-total { display: grid !important; min-width: 48px; min-height: 41px; place-items: center; padding: 5px 9px; border-radius: 10px; background: #f3e4fa; color: #7425a2; }
.party-history-empty { display: flex !important; align-items: center; gap: 12px !important; padding: 24px !important; border: 1px dashed #dec7e8 !important; border-radius: 12px; background: #fcf9fe; color: #7c6988; font-size: .76rem; }
.party-history-empty i { color: #9d6bb5; font-size: 1.2rem; }
.party-side-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.party-side-heading h2 { margin: 5px 0 0; }
.party-member-count { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #f2e3f9; color: #7724a5; font-size: .76rem; font-weight: 800; }
.party-side-intro { margin: -6px 0 17px; color: #85778b; font-size: .73rem; line-height: 1.6; }
.party-members-panel { scroll-margin-top: 20px; }
.party-member-row { display: grid; gap: 6px; padding: 12px 0 !important; }
.party-member-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.party-member-avatar { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border: 1px solid #e3c8f0; border-radius: 12px; object-fit: cover; }
.party-member-initial { background: linear-gradient(145deg,#e9cff8,#cf9be8); color: #552074; font-size: .93rem; font-weight: 800; }
.party-member-copy { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.party-member-copy strong { max-width: 100%; overflow: hidden; color: #412c4e; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.party-member-badge { display: inline-flex !important; align-items: center; gap: 5px; width: fit-content; padding: 3px 7px; border-radius: 50px; font-size: .59rem; font-weight: 800; line-height: 1.3; }
.party-member-badge.role-owner { background: #fff0c8; color: #85530a; }
.party-member-badge.role-master { background: #f0e1f9; color: #6d2498; }
.party-member-badge.role-player { background: #e4f6f3; color: #1d7469; }
.party-member-actions { margin: 4px 0 0 49px; }
.party-member-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 0; background: transparent; font-size: .62rem; }
.party-member-actions button:hover { background: #f4e9fa; }
.party-leave { margin-top: 14px; color: #a3425e; font-size: .68rem; }
.party-admin-panel { border-color: #e6d4ed; background: linear-gradient(160deg,#fff,#fcf7ff); }
.party-admin-panel h2 { margin: 6px 0 12px; }
.party-admin-primary { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px !important; border: 1px solid #d8b9e8 !important; border-radius: 12px !important; background: #f3e4fb !important; color: #572078 !important; text-align: left; }
.party-admin-primary>i:first-child { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 9px; background: #dfbef0; }
.party-admin-primary>i:last-child { margin-left: auto; font-size: .6rem; }
.party-admin-primary span { display: grid; gap: 4px; }
.party-admin-primary strong { font-size: .68rem; }
.party-admin-primary small { color: #80638e; font-size: .59rem; font-weight: 600; line-height: 1.4; }
.party-admin-actions>button:not(.party-admin-primary) { display: flex; align-items: center; gap: 9px; min-height: 36px; width: 100%; border-color: #e9d9ef; background: #fff; }
.party-admin-actions>button:not(.party-admin-primary):hover { background: #f5eafa; }
.party-admin-more { border-top: 1px solid #eaddf0; padding-top: 10px; }
.party-admin-more summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #6a4b7b; font-size: .7rem; font-weight: 800; list-style: none; }
.party-admin-more summary::-webkit-details-marker { display: none; }
.party-admin-more[open] summary i { transform: rotate(180deg); }
.party-admin-more button { display: block; width: 100%; margin-top: 8px; padding: 8px 9px; border: 1px solid #e7d7ed; border-radius: 8px; background: #fff; color: #6d4c7f; font-size: .66rem; font-weight: 700; text-align: left; cursor: pointer; }
.party-admin-more button:hover { background: #f6edfa; }
.party-admin-more .danger { border-color: #f0c5d0; background: #fff5f7; color: #a5284d; }
.party-invite { min-width: 0; }
.party-invite input { min-width: 0; }
.party-invite-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.party-invite-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 8px 4px; font-size: .6rem; }
.party-master-permissions { margin-top: 12px; padding: 13px; border: 1px solid #e8d6ef; border-radius: 11px; background: #fcf8fe; }
.party-master-permissions p { margin: 0 0 9px; color: #593b6c; font-size: .75rem; font-weight: 800; }
.party-master-permissions .party-check { margin: 10px 0; }

@media (max-width: 1150px) { .party-detail-grid { grid-template-columns: minmax(0,1fr) 280px; } .party-session-panel { grid-template-columns: 50px minmax(0,1fr); } .party-session-panel .party-actions { grid-column: 2; justify-content: start; } }
@media (max-width: 800px) { .party-detail-grid { grid-template-columns: 1fr; } .party-detail-head { grid-template-columns: 95px minmax(0,1fr); } .party-room-emblem { width: 95px; height: 95px; border-radius: 22px; } .party-room-ornament { display: none; } .party-side-column { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; } }
@media (max-width: 620px) { .party-detail-head { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 12px; padding: 22px; } .party-room-emblem { width: 65px; height: 65px; border-radius: 17px; } .party-room-emblem span { font-size: 2.1rem; } .party-detail-head h1 { margin-top: 10px; font-size: 2rem; } .party-detail-head p { font-size: .77rem; } .party-room-meta { margin-top: 12px; } .party-room-nav { gap: 2px; } .party-room-nav a { flex: 1 1 43%; justify-content: center; padding: 8px 6px; font-size: .66rem; } .party-session-panel { grid-template-columns: 42px minmax(0,1fr); } .party-session-icon { width: 42px; height: 42px; font-size: 1rem; } .party-session-panel .party-actions { grid-column: 1/-1; } .party-side-column { grid-template-columns: 1fr; } .party-room-section-heading { display: block; } .party-table-tag,.party-sync-status { margin-top: 10px; } .party-dice .dice-controls,.party-dice .dice-stage { padding: 12px; } .party-panel { padding: 19px; } }

/* Shared dice table and battle grid */
.party-view-switch { display: flex; flex-wrap: wrap; gap: 7px; width: fit-content; max-width: 100%; margin: 2px 0 17px; padding: 6px; border: 1px solid #ead9f0; border-radius: 14px; background: #f7f0fa; }
.party-view-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #755e80; font: 800 .72rem Montserrat,sans-serif; cursor: pointer; }
.party-view-switch button:hover { color: #67228c; background: #fff9; }
.party-view-switch button.is-active { border-color: #dfc7eb; background: #fff; color: #682191; box-shadow: 0 5px 13px #32124814; }
.party-view-switch button:focus-visible,.party-map-button:focus-visible { outline: 3px solid #d7a351; outline-offset: 2px; }
.party-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin: 0 0 12px; padding: 12px 13px; border: 1px solid #e5d7ec; border-radius: 13px; background: #fbf8fd; }
.party-map-toolbar[hidden],.party-map-button[hidden] { display: none; }
.party-map-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.party-map-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 9px; background: #ead9f3; color: #742f9a; }
.party-map-copy strong,.party-map-copy small { display: block; }
.party-map-copy strong { color: #4d315d; font-size: .76rem; }
.party-map-copy small { margin-top: 3px; color: #887590; font-size: .64rem; line-height: 1.4; }
.party-map-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: end; gap: 7px; }
.party-map-size { display: grid; gap: 3px; color: #7c6687; font-size: .6rem; font-weight: 800; }
.party-map-size select { width: auto; min-height: 32px; padding: 5px 8px; border: 1px solid #dec9e8; border-radius: 8px; background: #fff; color: #57356b; font: 700 .65rem Montserrat,sans-serif; }
.party-map-button { display: inline-flex; align-items: center; gap: 6px; min-height: 33px; padding: 7px 10px; border: 1px solid #cfafe0; border-radius: 8px; background: #fff; color: #682590; font: 800 .65rem Montserrat,sans-serif; cursor: pointer; }
.party-map-button:hover { background: #f2e5f8; }
.party-map-remove { border-color: #ead4dd; color: #a34864; }
.party-map-remove:hover { background: #fff2f5; }
.party-dice .dice-table.is-battlemap { height: clamp(460px, 50vw, 620px); border-color: #e5d9eb; background: #fff; box-shadow: inset 0 0 0 1px #d9cddf,0 15px 30px #32124815; }
.dice-table.is-battlemap::before,.dice-table.is-battlemap::after,.dice-table.is-battlemap .table-grain,.dice-table.is-battlemap .dice-empty { display: none; }
.party-battlemap-image,.party-grid-lines { display: none; position: absolute; inset: 0; pointer-events: none; }
.dice-table.is-battlemap .party-battlemap-image { display: block; z-index: 0; background: #fff; }
.party-battlemap-image img { width: 100%; height: 100%; object-fit: contain; }
.party-battlemap-image img[hidden] { display: none; }
.dice-table.is-battlemap .party-grid-lines { display: block; z-index: 1; background-image: linear-gradient(to right,rgba(66,52,76,.23) 1px,transparent 1px),linear-gradient(to bottom,rgba(66,52,76,.23) 1px,transparent 1px); background-size: var(--party-grid-size,44px) var(--party-grid-size,44px); box-shadow: inset 0 0 0 1px #55425f35; }
.dice-table.is-battlemap .table-mark { z-index: 2; right: 10px; bottom: 9px; padding: 5px 7px; border-radius: 5px; background: #ffffffe0; color: #664875; }
.dice-table.is-battlemap .dice-pieces { z-index: 3; }
.dice-table.is-battlemap .dice-effect { z-index: 5; }
#partyMapError { margin: 0 0 10px; }
.party-piece-panel { margin: 0 0 12px; padding: 13px; border: 1px solid #e5d7ec; border-radius: 13px; background: #fff; }
.party-piece-panel[hidden] { display: none; }
.party-piece-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.party-piece-heading strong,.party-piece-heading small { display: block; }
.party-piece-heading strong { color: #3d2849; font-size: .8rem; }
.party-piece-heading small { margin-top: 4px; color: #7a6b83; font-size: .65rem; line-height: 1.4; }
.party-piece-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.party-piece-row { display: flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 7px; border: 1px solid #e6dcea; border-radius: 10px; background: #fbf9fc; }
.party-piece-row.is-selected { border-color: #7926a0; box-shadow: 0 0 0 2px #7926a027; }
.party-piece-chip { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--piece-color); color: #fff; font-size: .88rem; box-shadow: 0 1px 5px #0003; }
.party-piece-chip img,.party-piece-on-map img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.party-piece-copy { display: grid; max-width: 118px; line-height: 1.3; }
.party-piece-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3f3247; font-size: .67rem; font-weight: 800; }
.party-piece-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a788f; font-size: .58rem; }
.party-piece-row button { border: 0; border-radius: 6px; background: transparent; color: #702b8d; font-size: .64rem; font-weight: 800; cursor: pointer; }
.party-piece-row button:hover { background: #f0e5f5; }
.party-piece-layer { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.dice-table.is-battlemap .party-piece-layer { display: block; }
.party-piece-on-map { position: absolute; display: grid; width: 42px; height: 42px; place-items: center; transform: translate(-50%,-50%); border: 3px solid #fff; border-radius: 50%; background: var(--piece-color); color: #fff; font-size: 1.18rem; box-shadow: 0 3px 9px #0006; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; }
.party-piece-on-map:active { cursor: grabbing; }
.party-piece-on-map:focus-visible { outline: 3px solid #ffcd57; outline-offset: 3px; }
.party-piece-on-map.is-locked { cursor: default; opacity: .88; }
.party-piece-on-map.is-moving { z-index: 1; box-shadow: 0 6px 15px #0008,0 0 0 3px #ffcd57; }
.party-piece-empty { color: #8c7d94; font-size: .67rem; }

@media (max-width: 620px) {
  .party-view-switch { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .party-view-switch button { min-height: 45px; padding: 7px; font-size: .62rem; line-height: 1.3; }
  .party-map-toolbar { align-items: start; flex-direction: column; }
  .party-map-actions { justify-content: start; }
  .party-dice .dice-table.is-battlemap { height: clamp(350px, 63vh, 500px); }
}

/* Party dashboard and room: keep content within a phone viewport. */
@media (max-width: 800px) {
  .party-main { min-width: 0; }
  .party-hero { min-width: 0; }
  .party-hero-copy, .party-hero-art { min-width: 0; }
  .party-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .party-detail-head h1, .party-card h3 { overflow-wrap: anywhere; }
}

@media (max-width: 620px) {
  .party-main { padding-inline: 12px; }
  .party-hero { min-height: 0; }
  .party-hero-copy { padding: 28px 20px 0; }
  .party-hero h1 { margin: 18px 0 12px; font-size: clamp(2rem, 9vw, 2.8rem); overflow-wrap: anywhere; }
  .party-hero p { line-height: 1.65; }
  .party-hero .party-title-actions { gap: 9px; }
  .party-hero .party-title-actions .party-button { width: 100%; }
  .party-hero-note { gap: 8px 15px; margin-top: 20px; }
  .party-hero-art { min-height: 0; max-height: none; padding: 20px 28px 29px; }
  .party-hero-art img { width: 100%; max-height: 220px; }
  .party-list-section { margin-top: 28px; }
  .party-section-heading > div { min-width: 0; }
  .party-section-count { flex: 0 0 34px; }
  .party-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .party-card { min-width: 0; }
  .party-card small { overflow-wrap: anywhere; }
  .party-how { margin-top: 32px; padding: 20px; }
  .party-detail-head { min-height: 0; padding: 18px; }
  .party-detail-head h1 { font-size: clamp(1.5rem, 8vw, 2rem); line-height: 1.12; }
  .party-room-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .party-room-nav a { min-width: 0; min-height: 44px; padding: 8px 5px; text-align: center; }
  .party-dice { min-width: 0; }
  .party-dice .dice-controls, .party-dice .dice-stage { min-width: 0; }
  .party-piece-heading { align-items: flex-start; flex-wrap: wrap; }
  .party-map-actions { width: 100%; }
  .party-rolls li > * { min-width: 0; overflow-wrap: anywhere; }
  .party-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .party-dialog form { padding: 22px 18px; }
  .party-dialog-actions .party-button { flex: 1 1 100%; }
}

@media (max-width: 360px) {
  .party-hero-copy { padding-inline: 17px; }
  .party-detail-head { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
  .party-room-emblem { width: 54px; height: 54px; }
  .party-invite-actions { grid-template-columns: 1fr; }
  .party-code-field input { font-size: 1.35rem !important; letter-spacing: .25em; }
}