.role-card{user-select:none;-webkit-user-select:none;perspective:1000px;position:relative;flex:0 0 auto;container-type:inline-size;max-width:100%;touch-action:pan-y}.role-card--normal{width:min(43.6vw,170px);aspect-ratio:170 / 240}.role-card--big{aspect-ratio:240 / 340;width:min(61.5vw,260px)}.role-card--stage{width:var(--big-card-w);height:var(--big-card-h)}.role-card__flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .4s cubic-bezier(.6,.2,.3,1);will-change:transform}.role-card__flip.is-peeking{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}.role-card__side{position:absolute;top:0;right:0;bottom:0;left:0;opacity:1;transform:rotateY(0);-webkit-transform:rotateY(0deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:opacity 80ms linear;pointer-events:auto}.role-card__flip.is-peeking .role-card__side{opacity:0;pointer-events:none}.role-card__side--back{opacity:0;transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}.role-card__flip.is-peeking .role-card__side--back{opacity:1;pointer-events:auto}.role-card .role-card-face{width:100%;height:100%;position:relative;overflow:hidden;border:2.5px solid var(--ink);border-radius:clamp(15px,4vw,20px);box-shadow:var(--shadow-card);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:clamp(10px,6cqw,18px);backface-visibility:hidden;-webkit-backface-visibility:hidden}.role-card .role-card-front{background:#fffcf0}.role-card .role-card-back{background-color:var(--paper-2);color:var(--ink)}.role-card .card-meta,.role-card .card-footer{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;font-family:var(--font-hand);color:var(--ink-muted);min-width:0;gap:6px;flex-wrap:wrap;line-height:1.35}.role-card .card-meta{font-size:clamp(11px,5.8cqw,14px)}.role-card .card-center{min-height:0;position:relative;z-index:1;display:block}.role-card .card-word{max-width:100%;font-family:var(--font-display);text-align:center;width:100%;font-size:clamp(26px,20cqw,52px);line-height:1.18;letter-spacing:.035em;text-shadow:.07em .07em 0 var(--mint);overflow-wrap:anywhere;text-wrap:balance}.role-card .card-question-image{border:2px solid rgba(26,20,16,.28);border-radius:8px;background:#fff;width:auto;max-width:100%;max-height:130px;object-fit:contain}.role-card .hint-list{width:100%;display:flex;flex-direction:column;padding:0;gap:4px}.role-card .hint-line{display:flex;gap:4px;color:var(--ink-soft);font-family:var(--font-hand);line-height:1.3;font-size:clamp(12px,5.8cqw,14px)}.role-card .hint-line span,.role-card .hint-empty{color:var(--tomato-deep)}.role-card .hint-empty{text-align:center;font-family:var(--font-hand);font-size:clamp(11px,5.8cqw,14px);overflow-wrap:anywhere}.role-card .card-footer{border-top:2px dashed rgba(26,20,16,.2);padding-top:6px;font-size:clamp(10px,5.3cqw,12px)}.role-card .card-footer span:first-child{font-family:var(--font-display);color:var(--ink)}.role-card .card-private{position:relative;z-index:1;font-family:var(--font-hand);font-size:clamp(13px,3.8vw,15px);color:var(--ink-soft)}.role-card .role-heading{display:flex;position:relative;z-index:1;flex:none;align-items:flex-start;gap:8px}.role-card .role-icon{line-height:1;flex:none;font-size:clamp(28px,16cqw,46px)}.role-card .role-name{font-family:var(--font-display);text-shadow:2px 2px 0 rgba(255,255,255,.55);font-size:clamp(20px,10cqw,30px);line-height:1.18;letter-spacing:0;overflow-wrap:anywhere}.role-card .role-desc{color:var(--ink-soft);line-height:1.34;max-width:none;margin-top:4px;font-size:clamp(11px,5.6cqw,13px);overflow-wrap:anywhere}.role-card .answer-box{min-height:0;background:#fffcf0;border:2px solid var(--ink);border-radius:12px;position:relative;z-index:1;display:flex;flex-direction:column;flex:1 0 auto;padding:clamp(8px,4cqw,12px)}.role-card .answer-label{font-family:var(--font-hand);color:var(--ink-muted);font-size:clamp(12px,3.6vw,14px);margin-bottom:4px}.role-card .answer-text{font-family:var(--font-display);line-height:1.48;letter-spacing:.3px;overflow:visible;overflow-wrap:anywhere;font-size:clamp(13px,6cqw,16px)}.role-card .answer-image{display:block;margin:8px auto 0;object-fit:contain;border-radius:8px;max-width:100%;width:auto;height:auto;max-height:180px}.role-card .redacted-answer{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:100px}.role-card .redacted-line{height:clamp(13px,3.8vw,17px);position:relative}.role-card .redacted-line:before{content:"";position:absolute;left:0;top:50%;width:88%;height:78%;transform:translateY(-50%) rotate(-1.2deg);background:var(--ink);border-radius:3px}.role-card .redacted-line:nth-child(2):before{width:96%;transform:translateY(-50%) rotate(.8deg)}.role-card .redacted-line:nth-child(3):before{width:62%;transform:translateY(-50%) rotate(-.6deg)}.role-card .redacted-line i{position:absolute;left:4%;top:50%;width:78%;height:2px;background:#1a1410b3;transform:translateY(-50%) rotate(1.2deg)}.role-card .redacted-note{margin-top:6px;text-align:center;color:var(--tomato-deep);font-family:var(--font-hand);font-weight:700;transform:rotate(-2deg);font-size:clamp(12px,3.5vw,14px)}.role-card .release-note{position:relative;z-index:1;text-align:center;color:var(--ink-soft);font-family:var(--font-hand);font-size:clamp(11px,5.5cqw,13px);line-height:1.3}.role-card--interactive{touch-action:none;cursor:pointer}.role-card:focus-visible{outline:3px solid var(--ink);outline-offset:7px;border-radius:20px}.role-card .card-meta .stars{flex:none;margin-left:auto}.role-card .role-card-scroll{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(26,20,16,.35) transparent;-webkit-overflow-scrolling:touch}.role-card .card-content{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;gap:8px;padding:3px 3px 5px}.role-card .card-content>*{flex-shrink:0;max-width:100%}.role-card--word-medium .card-word{font-size:clamp(22px,14cqw,38px)}.role-card--word-long .card-word{font-size:clamp(18px,10cqw,28px)}.role-card .hint-line strong{min-width:0;overflow-wrap:anywhere}.role-card .card-back-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding-right:2px}.role-card .role-heading>div{min-width:0}