@media (hover:hover) and (pointer:fine){
  .play-button:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(95,232,154,0.45);}
  .restart-button:hover{transform:translateY(-2px);}
  .mode-btn:not(.active):hover{background:rgba(255,255,255,0.08);color:var(--text-primary);}
  .swatch:hover{transform:scale(1.08);}
  .action-btn.ghost:hover{color:var(--text-primary);background:rgba(255,255,255,0.09);}
  .icon-btn:hover{background:rgba(255,255,255,0.1);}
}
@media (pointer:coarse){
  .swatch{width:clamp(28px, 7vw, 40px);height:clamp(28px, 7vw, 40px);}
  .mode-btn{min-height:40px;}
}
@media (max-width:359px){
  .app{gap:6px;}
  .score-chip{min-width:0;padding:4px 7px;}
  .control-group{padding:8px 8px;}
  .controls-panel{max-height:34vh;gap:6px;}
  .hint-text{display:none;}
}
@media (max-height:740px) and (orientation:portrait){
  .app{gap:6px;}
  .controls-panel{max-height:32vh;gap:6px;}
  .hint-text,.overlay-hint{display:none;}
  .control-group{padding:8px 10px;}
  .control-group-title{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .mode-btn{min-height:36px;padding:6px 2px;}
  .action-btn{min-height:40px;}
  .dpad{--dpad-size:clamp(36px, 11vw, 44px);}
}
@media (max-height:600px) and (orientation:portrait){
  .controls-panel{max-height:28vh;}
  .dpad{--dpad-size:32px;gap:3px;}
  .mode-btn{min-height:32px;padding:5px 2px;}
  .action-btn{min-height:34px;font-size:0.72rem;}
  .score-chip{padding:3px 6px;}
  .score-chip-value{font-size:1rem;}
  .app-title{font-size:1.05rem;}
}

@media (orientation:landscape) and (max-height:520px){
  .app{
    gap:4px;
    padding:
      max(4px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(4px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
  }
  .app-title{font-size:1rem;letter-spacing:0.06em;}
  .score-chip{padding:2px 8px;min-width:0;}
  .score-chip-label{font-size:0.55rem;}
  .score-chip-value{font-size:0.95rem;}
  .icon-btn{width:32px;height:32px;}
  .workspace{flex-direction:row;align-items:stretch;gap:8px;}
  .controls-panel{
    width:clamp(128px, 26vw, 188px);
    flex:0 0 clamp(128px, 26vw, 188px);
    max-height:100%;
    gap:6px;
    justify-content:center;
  }
  .control-group{padding:6px 8px;}
  .control-group-title{font-size:0.6rem;letter-spacing:0.08em;margin-bottom:4px;}
  .mode-selector{grid-template-columns:repeat(2, minmax(0, 1fr));gap:4px;}
  .mode-btn{min-height:0;padding:5px 2px;font-size:0.7rem;}
  .swatch{width:22px;height:22px;}
  .action-btn{min-height:32px;padding:6px 6px;font-size:0.7rem;}
  .button-group{flex-direction:column;}
  .hint-text,.overlay-hint{display:none;}
  .lbl-full{display:none;}
  .lbl-tiny{display:inline;}
  .dpad{--dpad-size:clamp(30px, 16vh, 42px);gap:3px;}
}
@media (orientation:landscape) and (max-height:340px){
  .dpad{--dpad-size:clamp(26px, 18vh, 34px);gap:2px;}
  .app-header{gap:6px;}
}

@media (min-width:700px) and (orientation:portrait){
  .controls-panel{
    display:grid;
    grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.15fr);
    align-content:start;
    gap:12px;
    width:min(920px, 100%);
    max-height:32vh;
    align-self:center;
  }
  .controls-panel .control-group:nth-child(1){grid-column:1;grid-row:1;}
  .controls-panel .control-group:nth-child(2){grid-column:2;grid-row:1;}
  .controls-panel .button-group{grid-column:1 / -1;grid-row:2;}
  .controls-panel .hint-text{grid-column:1 / -1;text-align:center;}
  .swatch{width:34px;height:34px;}
  .dpad{--dpad-size:clamp(52px, 7vmin, 68px);}
}

@media (orientation:landscape) and (min-width:700px) and (min-height:521px){
  .workspace{flex-direction:row;align-items:stretch;gap:clamp(14px, 2vw, 28px);}
  .controls-panel{
    display:flex;
    flex-direction:column;
    width:clamp(230px, 22vw, 340px);
    flex:0 0 clamp(230px, 22vw, 340px);
    max-height:100%;
    justify-content:center;
    gap:clamp(10px, 1.6vh, 16px);
  }
  .hint-text{text-align:start;}
  .swatch{width:clamp(26px, 2vw, 34px);height:clamp(26px, 2vw, 34px);}
  .dpad{--dpad-size:clamp(48px, 6vmin, 64px);}
}
@media (min-width:1400px) and (min-height:800px){
  .controls-panel{flex-basis:clamp(280px, 18vw, 360px);width:clamp(280px, 18vw, 360px);}
  .app-title{font-size:1.9rem;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}
@media (forced-colors:active){
  .app-title{
    background:none;
    color:CanvasText;
    filter:none;
    -webkit-text-fill-color:CanvasText;
  }
}