.item-tile.xcard{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:var(--xclues-border-radius);min-width:44px;min-height:44px;box-shadow:var(--xclues-card-shadow);background:var(--xclues-card-bg);-webkit-backdrop-filter:blur(var(--xclues-blur-md));border:1px solid var(--xclues-primary-6);transition:transform var(--xclues-transition), box-shadow var(--xclues-transition), background var(--xclues-transition), border-color var(--xclues-transition)}.item-tile.xcard.xcard--shake,.item-tile.xcard.xcard--jump{transition:none}.item-tile.xcard:hover{box-shadow:var(--xclues-card-shadow-hover);background:var(--xclues-card-bg-hover);border-color:var(--xclues-primary-15);transform:translateY(-3px)scale(1.03)}.item-tile.xcard[aria-pressed=true]{background:var(--xclues-card-selected);color:var(--xclues-card-selected-text);box-shadow:var(--xclues-card-shadow-selected);border-color:#0000;transform:scale(1.04)}.item-tile.xcard[aria-pressed=true] *{color:var(--xclues-card-selected-text)}.item-tile.xcard[aria-pressed=true]:hover{box-shadow:var(--xclues-card-shadow-selected), var(--xclues-glow);transform:scale(1.06)}.item-tile:focus{outline:none}.item-tile:focus-visible{outline:var(--xclues-focus-ring-style,3px solid) var(--xclues-focus-ring-color,var(--xclues-primary));outline-offset:2px;z-index:1}.item-tile-content{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.item-tile .xcard__body{padding:var(--xclues-spacing-2);overflow:hidden}@media (min-width:640px){.item-tile .xcard__body{padding:var(--xclues-spacing-3)}}@media (min-width:1025px){.item-tile .xcard__body{padding:var(--xclues-spacing-4)}}.item-tile--long .xcard__body,.item-tile--very-long .xcard__body{padding:0}.item-tile .xtext{font-weight:var(--xclues-font-weight-semibold);overflow-wrap:break-word;word-break:normal;-webkit-hyphens:auto;hyphens:auto;text-align:center;width:100%;overflow:hidden}.item-tile.xcard:active:not(.xcard--shake):not(.xcard--jump){transform:scale(.96)}@media (prefers-reduced-motion:reduce){.item-tile.xcard{transition:none}.item-tile.xcard:hover,.item-tile.xcard:active,.item-tile.xcard[aria-pressed=true]{transform:none}}
.stats-container{justify-content:space-around;gap:var(--xclues-spacing-md);padding-left:var(--xclues-spacing-5);padding-right:var(--xclues-spacing-5);padding-top:var(--xclues-spacing-2);-webkit-backdrop-filter:blur(var(--xclues-blur-md));display:flex}.stat-item{align-items:center;gap:var(--xclues-spacing-1);flex-direction:column;min-width:70px;display:flex}.stat-number{font-size:var(--xclues-font-size-3xl);line-height:1;font-weight:var(--xclues-font-weight-extrabold);background:linear-gradient(135deg, var(--xclues-primary) 0%, var(--xclues-accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.stat-label{font-size:var(--xclues-font-size-xs);font-weight:var(--xclues-font-weight-semibold);text-transform:uppercase;letter-spacing:var(--xclues-tracking-wide);color:var(--xclues-text-tertiary);text-align:center;line-height:1.3}
.game-result-display{flex-direction:column;align-items:center;gap:2px;display:flex}.guess-row{gap:var(--xclues-spacing-2);display:flex}.guess-square{border-radius:var(--xclues-border-radius-xs);width:36px;height:36px;box-shadow:var(--xclues-shadow-sm);animation:.3s ease-out both squareAppear}.guess-row:first-child .guess-square{animation-delay:50ms}.guess-row:nth-child(2) .guess-square{animation-delay:.15s}.guess-row:nth-child(3) .guess-square{animation-delay:.25s}.guess-row:nth-child(4) .guess-square{animation-delay:.35s}.guess-row:nth-child(5) .guess-square{animation-delay:.45s}.guess-row:nth-child(6) .guess-square{animation-delay:.55s}.guess-row:nth-child(7) .guess-square{animation-delay:.65s}.guess-row:nth-child(8) .guess-square{animation-delay:.75s}@keyframes squareAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.guess-square--yellow{background-color:var(--xclues-yellow);background-image:none}.guess-square--green{background-color:var(--xclues-green);background-image:repeating-linear-gradient(45deg,#0000,#0000 3px,#ffffff4d 3px 5px)}.guess-square--blue{background-color:var(--xclues-blue);background-image:radial-gradient(circle,#ffffff59 1.5px,#0000 1.5px);background-size:8px 8px}.guess-square--purple{background-color:var(--xclues-purple);background-image:repeating-linear-gradient(45deg,#0000,#0000 3px,#ffffff4d 3px 5px),repeating-linear-gradient(-45deg,#0000,#0000 3px,#ffffff4d 3px 5px)}@media (min-width:640px){.guess-square{border-radius:var(--xclues-border-radius-sm);width:40px;height:40px}}@media (prefers-reduced-motion:reduce){.guess-square{animation:none}}
.countdown-container{flex-direction:column;line-height:1.1;display:flex}.countdown-time{font-variant-numeric:tabular-nums;letter-spacing:var(--xclues-tracking-wider);font-size:var(--xclues-font-size-xl);font-weight:var(--xclues-font-weight-bold);background:linear-gradient(135deg, var(--xclues-primary) 0%, var(--xclues-accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:3s ease-in-out infinite countdownPulse}@keyframes countdownPulse{0%,to{opacity:1}50%{opacity:.7}}@media (prefers-reduced-motion:reduce){.countdown-time{animation:none}}
.results-panel{justify-content:center;align-items:center;gap:var(--xclues-spacing-3);flex-direction:column;flex:1;display:flex}.results-panel__heading{font-size:var(--xclues-font-size-xl);font-weight:var(--xclues-font-weight-extrabold);background:linear-gradient(135deg, var(--xclues-primary) 0%, var(--xclues-accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.results-panel__actions{align-items:center;gap:var(--xclues-spacing-3);display:flex}.results-panel__share-btn-content{align-items:center;gap:.25rem;display:flex}@media (min-width:640px){.results-panel__heading{font-size:var(--xclues-font-size-2xl)}}.results-panel__view-toggle{all:unset;cursor:pointer;color:var(--xclues-text-secondary);font-size:var(--xclues-font-size-sm);text-underline-offset:2px;text-decoration:underline}.results-panel__view-toggle:hover{color:var(--xclues-text-primary)}
.game-board{padding-top:var(--xclues-spacing-md);flex-direction:column;flex:1;display:flex}.game-board__empty{justify-content:center;align-items:center;gap:var(--xclues-spacing-lg);padding:var(--xclues-spacing-xl) 0;flex-direction:column;display:flex}.game-grid{gap:var(--xclues-spacing-sm);flex:1;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(4,1fr);max-width:100%;padding:0 .5rem;display:grid}.game-grid>.group-card{grid-column:1/-1}.game-grid>.item-tile.xcard{aspect-ratio:unset}@media (min-width:640px){.game-grid{--grid-row-height:calc((var(--xclues-board-width-tablet) - 3 * .625rem) / 4);grid-template-rows:repeat(4, var(--grid-row-height));max-width:var(--xclues-board-width-tablet);flex:0;gap:.625rem;margin:0 auto}.game-grid>.item-tile.xcard{aspect-ratio:1}}@media (min-width:1025px){.game-grid{--grid-row-height:calc((var(--xclues-board-width-desktop) - 3 * .75rem) / 4);max-width:var(--xclues-board-width-desktop);gap:.75rem}}
.game-skeleton{display:contents}.game-skeleton__tile{aspect-ratio:1;border-radius:var(--xclues-border-radius);background:var(--xclues-card-bg);animation:1.5s ease-in-out infinite skeletonShimmer}.game-skeleton__tile:nth-child(odd){animation-delay:.15s}.game-skeleton__mistakes{align-items:center;gap:var(--xclues-spacing-2);padding:var(--xclues-spacing-3) 0;flex-direction:column;display:flex}.game-skeleton__text-line{border-radius:var(--xclues-border-radius-xs);background:var(--xclues-card-bg);width:180px;height:16px;animation:1.5s ease-in-out infinite skeletonShimmer}.game-skeleton__dots-line{border-radius:var(--xclues-border-radius-xs);background:var(--xclues-card-bg);width:200px;height:18px;animation:1.5s ease-in-out .2s infinite skeletonShimmer}.game-skeleton__controls{justify-content:center;gap:var(--xclues-spacing-3);display:flex}.game-skeleton__button{border-radius:var(--xclues-border-radius-sm);background:var(--xclues-card-bg);width:120px;height:48px;animation:1.5s ease-in-out .3s infinite skeletonShimmer}@keyframes skeletonShimmer{0%,to{opacity:.4}50%{opacity:.7}}@media (prefers-reduced-motion:reduce){.game-skeleton__tile,.game-skeleton__button{opacity:.5;animation:none}}
.win-celebration{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.win-particle{font-size:2rem;animation:2s ease-out forwards winParticle;position:absolute}.win-particle--0{animation-delay:0s;top:50%;left:10%}.win-particle--1{animation-delay:.1s;top:50%;left:25%}.win-particle--2{animation-delay:50ms;top:50%;left:40%}.win-particle--3{animation-delay:.15s;top:50%;left:55%}.win-particle--4{animation-delay:80ms;top:50%;left:70%}.win-particle--5{animation-delay:.12s;top:50%;left:85%}.win-particle--6{animation-delay:.2s;top:50%;left:15%}.win-particle--7{animation-delay:.25s;top:50%;left:30%}.win-particle--8{animation-delay:.18s;top:50%;left:50%}.win-particle--9{animation-delay:.22s;top:50%;left:65%}.win-particle--10{animation-delay:.3s;top:50%;left:80%}.win-particle--11{animation-delay:.28s;top:50%;left:45%}@keyframes winParticle{0%{opacity:1;transform:translateY(0)scale(.5)}50%{opacity:1;transform:translateY(-200px)scale(1.2)rotate(180deg)}to{opacity:0;transform:translateY(-400px)scale(.3)rotate(360deg)}}@media (prefers-reduced-motion:reduce){.win-particle{animation:none;display:none}}
.how-to-play-banner{justify-content:center;align-items:center;gap:var(--xclues-spacing-2);padding:var(--xclues-spacing-2) var(--xclues-spacing-3);font-size:var(--xclues-font-size-sm);color:var(--xclues-text-secondary);text-align:center;display:flex}.how-to-play-banner__dismiss{all:unset;cursor:pointer;color:var(--xclues-text-tertiary);font-size:var(--xclues-font-size-sm);border-radius:var(--xclues-border-radius-xs);justify-content:center;align-items:center;min-width:24px;min-height:24px;display:flex}.how-to-play-banner__dismiss:hover{color:var(--xclues-text-primary)}
.game-controls{gap:var(--xclues-spacing-sm,.5rem);padding:var(--xclues-spacing-1) 0;justify-content:center;display:flex}.game-controls .xbtn{min-width:44px;min-height:48px;padding-left:var(--xclues-spacing-5);padding-right:var(--xclues-spacing-5);border-radius:var(--xclues-radius-pill,999px);font-weight:var(--xclues-font-weight-semibold);letter-spacing:var(--xclues-tracking-tight)}.game-controls .xbtn--outline{border-color:var(--xclues-primary-20);background:var(--xclues-card-bg);-webkit-backdrop-filter:blur(var(--xclues-blur-md));backdrop-filter:blur(var(--xclues-blur-md));color:inherit}.game-controls .xbtn--outline:hover:not(:disabled){box-shadow:var(--xclues-card-shadow-hover);border-color:var(--xclues-primary);background:var(--xclues-card-bg-hover);color:inherit;transform:translateY(-2px)}@media (hover:none){.game-controls .xbtn--outline:hover:not(:disabled){box-shadow:none;border-color:var(--xclues-primary-20);background:var(--xclues-card-bg);transform:none}}.game-controls .xbtn--primary{background:var(--xclues-btn-primary-bg);color:var(--xclues-card-selected-text);box-shadow:var(--xclues-btn-primary-shadow);font-weight:var(--xclues-font-weight-bold);letter-spacing:var(--xclues-tracking-normal);text-transform:uppercase;font-size:var(--xclues-font-size-md);border:none}.game-controls .xbtn--primary:hover:not(:disabled){background:var(--xclues-btn-primary-hover);box-shadow:var(--xclues-shadow-primary-glow);transform:translateY(-2px)scale(1.02)}.game-controls .xbtn--primary:active:not(:disabled){box-shadow:var(--xclues-shadow-primary-sm);transform:translateY(0)scale(.98)}.game-controls .xbtn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}@media (min-width:1025px){.game-controls{padding:var(--xclues-spacing-1) 0}}@media (max-width:360px){.game-controls{flex-wrap:wrap}}
.mistakes-container{padding-top:var(--xclues-spacing-2);flex-direction:column;align-items:center;display:flex}.mistakes-row{align-items:center;gap:var(--xclues-spacing-1);display:flex}.mistakes-dots{gap:var(--xclues-spacing-2);align-items:center;display:flex}.mistake-dot--filled{animation:2s ease-in-out infinite dotPulse}.mistake-dot--empty{animation:.5s ease-out dotLost}@keyframes dotPulse{0%,to{box-shadow:var(--xclues-dot-glow)}50%{box-shadow:var(--xclues-dot-glow)}}@keyframes dotLost{0%{opacity:1;transform:scale(1.3)}to{opacity:.6;transform:scale(1)}}@media (min-width:1025px){.mistakes-container{padding:var(--xclues-spacing-1) 0}}@media (prefers-reduced-motion:reduce){.mistake-dot{animation:none}}