/* ============================================================
   LOSTZONE Manual Tester - Smartphone Compact Styles
   &#12473;&#12510;&#12540;&#12488;&#12501;&#12457;&#12531;&#29992;&#65306;&#22823;&#24133;&#32302;&#23567;&#65288;&#32004;30%&#12469;&#12452;&#12474;&#65289;
   
   &#20351;&#29992;&#26041;&#27861;:
   index.html&#12398;<head>&#20869;&#12395;&#12289;style-layout.css&#12398;&#24460;&#12395;&#36861;&#21152;:
   <link rel="stylesheet" href="css/style-smartphone-compact.css">
   ============================================================ */

/* &#12473;&#12510;&#12540;&#12488;&#12501;&#12457;&#12531;&#29992;&#65306;768px&#20197;&#19979; */
@media (max-width: 768px) {
  /* ============================================================
     &#22823;&#24133;&#32302;&#23567;&#35373;&#23450;&#65288;&#32004;30%&#12469;&#12452;&#12474;&#65289;
     ============================================================ */
  
  /* &#22522;&#26412;&#12501;&#12Â©;&#12531;&#12488;&#12469;&#12452;&#12474;&#12434;&#22823;&#24133;&#32302;&#23567; */
  body {
    font-size: 9px !important;
  }
  
  /* &#12459;&#12540;&#12489;&#12398;&#22522;&#26412;&#12469;&#12452;&#12474;&#22823;&#24133;&#32302;&#23567; */
  .card {
    font-size: 8px !important;
  }
  
  .card-header {
    padding: 6px 8px !important;
    font-size: 9px !important;
  }
  
  .card-body {
    padding: 8px !important;
  }
  
  /* ============================================================
     BOSS&#12456;&#12522;&#12450;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .boss-area {
    padding: 6px !important;
  }
  
  .boss-name {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  
  .boss-stats {
    gap: 3px !important;
    margin-bottom: 6px !important;
  }
  
  .boss-stat-item {
    padding: 3px 5px !important;
    font-size: 7px !important;
  }
  
  .boss-stat-value {
    font-size: 11px !important;
    margin-top: 1px !important;
  }
  
  .boss-image-container img {
    max-height: 100px !important;
  }
  
  /* ============================================================
     &#12503;&#12524;&#12452;&#12516;&#12540;&#12456;&#12522;&#12450;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  /* &#12456;&#12463;&#12473;&#12488;&#12521;&#12459;&#12540;&#12489;&#12398;&#22823;&#24133;&#32302;&#23567; */
  .extra-card {
    width: 42px !important;
    height: 60px !important;
  }
  
  .extra-card-name {
    font-size: 6px !important;
    padding: 1px 2px !important;
  }
  
  .extra-card-image {
    height: 42px !important;
  }
  
  .player-extras-cards {
    gap: 4px !important;
  }
  
  /* ============================================================
     &#12469;&#12452;&#12489;&#12497;&#12493;&#12523;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .player-side-panel {
    flex: 0 0 55px !important;
    gap: 4px !important;
  }
  
  .skill-counter-box {
    min-height: 32px !important;
    padding: 3px !important;
  }
  
  .skill-counter-label {
    font-size: 6px !important;
    margin-bottom: 1px !important;
  }
  
  .skill-counter-value {
    font-size: 14px !important;
  }
  
  .story-point-box {
    min-height: 42px !important;
    padding: 5px 3px !important;
  }
  
  .story-point-label {
    font-size: 7px !important;
    margin-bottom: 2px !important;
  }
  
  .story-point-value {
    font-size: 18px !important;
  }
  
  .story-point-display {
    min-width: 55px !important;
  }
  
  /* ============================================================
     &#12503;&#12524;&#12452;&#12516;&#12540;&#12473;&#12486;&#12540;&#12479;&#12473;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .player-status-grid {
    gap: 3px !important;
    font-size: 7px !important;
  }
  
  .status-item {
    padding: 2px 4px !important;
  }
  
  .status-label {
    font-size: 6px !important;
    margin-bottom: 1px !important;
  }
  
  .status-value {
    font-size: 10px !important;
  }
  
  /* ============================================================
     &#34892;&#21205;&#12459;&#12540;&#12489;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .action-card {
    font-size: 7px !important;
  }
  
  .action-card-title {
    font-size: 8px !important;
    padding: 4px !important;
  }
  
  .action-card-cost {
    font-size: 6px !important;
    padding: 2px 4px !important;
  }
  
  .action-card-description {
    font-size: 6px !important;
    padding: 4px !important;
  }
  
  /* ============================================================
     &#12525;&#12464;&#12456;&#12522;&#12450;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .log {
    font-size: 6px !important;
    padding: 5px !important;
  }
  
  .log-entry {
    margin-bottom: 2px !important;
  }
  
  /* ============================================================
     &#12508;&#12479;&#12531;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .primary-button,
  .secondary-button {
    padding: 6px 10px !important;
    font-size: 8px !important;
  }
  
  /* ============================================================
     &#12514;&#12540;&#12480;&#12523;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .modal-content {
    padding: 12px !important;
    max-width: 95% !important;
  }
  
  .modal-content h2 {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }
  
  .modal-content h3 {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  
  .modal-content p,
  .modal-content div,
  .modal-content li {
    font-size: 8px !important;
    line-height: 1.4 !important;
  }
  
  /* ============================================================
     &#12489;&#12521;&#12501;&#12488;&#30011;&#38754;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .draft-hero-title {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  
  .draft-hero-subtitle {
    font-size: 7px !important;
    margin-bottom: 8px !important;
  }
  
  .draft-player-name {
    font-size: 7px !important;
  }
  
  .draft-pick-count {
    font-size: 6px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#12503;&#12524;&#12452;&#12516;&#12540;&#12456;&#12522;&#12450;&#12398;&#32302;&#23567; */
  .draft-player-area {
    padding: 8px !important;
    min-height: 120px !important;
  }
  
  .draft-extras-grid {
    gap: 6px !important;
    margin-top: 8px !important;
  }
  
  .ex-card {
    flex: 0 0 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
  }
  
  .ex-card-name {
    font-size: 8px !important;
    padding: 3px !important;
  }
  
  .ex-card-skills {
    font-size: 6px !important;
    padding: 4px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#30011;&#38754;&#20840;&#20307;&#12398;&#39640;&#12373;&#35519;&#25972; */
  .draft-content {
    padding: 12px 8px !important;
    gap: 12px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#12498;&#12525;&#12540;&#12475;&#12463;&#12471;&#12519;&#12531;&#12398;&#32302;&#23567; */
  .draft-hero-section {
    margin-bottom: 12px !important;
    padding: 10px 8px !important;
  }
  
  .draft-player-status {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  
  .draft-player-card {
    padding: 8px !important;
  }
  
  .draft-player-picks {
    gap: 4px !important;
    margin-top: 6px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#20013;&#22830;&#12503;&#12524;&#12499;&#12517;&#12540;&#30011;&#38754;&#12398;&#32302;&#23567; */
  .draft-preview-container {
    max-height: 300px !important;
  }
  
  .ex-card-image {
    max-height: 250px !important;
    object-fit: contain !important;
  }
  
  /* &#12490;&#12499;&#12466;&#12540;&#12471;&#12519;&#12531;&#30691;&#21360;&#12398;&#32302;&#23567; */
  .nav-button {
    width: 35px !important;
    height: 35px !important;
    font-size: 16px !important;
  }
  
  /* ============================================================
     &#12463;&#12456;&#12473;&#12488;&#12459;&#12540;&#12489;&#12398;&#22823;&#24133;&#32302;&#23567;
     ============================================================ */
  
  .quest-card {
    font-size: 7px !important;
  }
  
  .quest-card-header {
    font-size: 8px !important;
    padding: 4px 6px !important;
  }
  
  .quest-card-content {
    padding: 5px !important;
  }
  
  /* ============================================================
     &#12466;&#12540;&#12512;&#12524;&#12452;&#12450;&#12454;&#12488;&#12398;&#35519;&#25972;
     ============================================================ */
  
  .game-layout {
    gap: 8px !important;
  }
  
  .game-main-area-full > .card:not(.boss-area-card) .card-body {
    padding: 8px !important;
    gap: 8px !important;
  }
}

/* &#23567;&#22411;&#12473;&#12510;&#12540;&#12488;&#12501;&#12Â©;&#12531;&#29992;: 480px&#20197;&#19979; */
@media (max-width: 480px) {
  /* &#12373;&#12425;&#12395;&#32302;&#23567; */
  body {
    font-size: 8px !important;
  }
  
  .card {
    font-size: 7px !important;
  }
  
  .card-header {
    padding: 5px 6px !important;
    font-size: 8px !important;
  }
  
  .boss-name {
    font-size: 10px !important;
  }
  
  .boss-stat-item {
    padding: 2px 4px !important;
    font-size: 6px !important;
  }
  
  .boss-stat-value {
    font-size: 10px !important;
  }
  
  .extra-card {
    width: 38px !important;
    height: 54px !important;
  }
  
  .extra-card-name {
    font-size: 5px !important;
  }
  
  .extra-card-image {
    height: 38px !important;
  }
  
  .skill-counter-value {
    font-size: 12px !important;
  }
  
  .story-point-value {
    font-size: 16px !important;
  }
  
  .status-value {
    font-size: 9px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#30011;&#38754;&#12398;&#12373;&#12425;&#12394;&#12427;&#32302;&#23567; */
  .draft-hero-title {
    font-size: 9px !important;
    margin-bottom: 5px !important;
  }
  
  .draft-hero-subtitle {
    font-size: 6px !important;
    margin-bottom: 6px !important;
  }
  
  .draft-hero-section {
    margin-bottom: 8px !important;
    padding: 8px 6px !important;
  }
  
  .draft-player-status {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  
  .draft-player-card {
    padding: 6px !important;
  }
  
  .draft-player-picks {
    gap: 3px !important;
    margin-top: 4px !important;
  }
  
  .draft-player-area {
    padding: 6px !important;
    min-height: 100px !important;
  }
  
  .ex-card {
    flex: 0 0 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }
  
  .ex-card-name {
    font-size: 7px !important;
  }
  
  .ex-card-skills {
    font-size: 5px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#20013;&#22830;&#12503;&#12524;&#12499;&#12517;&#12540;&#12398;&#32302;&#23567; */
  .draft-preview-container {
    max-height: 250px !important;
  }
  
  .ex-card-image {
    max-height: 200px !important;
  }
  
  .nav-button {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
}

/* iPhone 12 Pro Max&#23�;&#29992;: 428px&#24133;&#23�;&#29992; */
@media (max-width: 428px) and (min-width: 390px) {
  /* &#12489;&#12521;&#12501;&#12488;&#30011;&#38754;&#12398;&#22265;&#36895;&#35519;&#25972; */
  .draft-hero-title {
    font-size: 9px !important;
    margin-bottom: 4px !important;
    padding: 6px 8px !important;
  }
  
  .draft-hero-subtitle {
    font-size: 6px !important;
    margin-bottom: 6px !important;
  }
  
  .draft-hero-section {
    margin-bottom: 8px !important;
    padding: 8px 6px !important;
    border-radius: 8px !important;
  }
  
  .draft-player-status {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  
  .draft-player-card {
    padding: 5px !important;
  }
  
  .draft-player-picks {
    gap: 3px !important;
    margin-top: 4px !important;
  }
  
  .draft-player-area {
    padding: 6px !important;
    min-height: 95px !important;
    margin-bottom: 8px !important;
  }
  
  .draft-player-name {
    font-size: 7px !important;
    padding: 4px !important;
  }
  
  .draft-pick-count {
    font-size: 6px !important;
  }
  
  .draft-extras-grid {
    gap: 5px !important;
    margin-top: 6px !important;
  }
  
  .ex-card {
    flex: 0 0 135px !important;
    min-width: 135px !important;
    max-width: 135px !important;
    height: auto !important;
  }
  
  .ex-card-name {
    font-size: 7px !important;
    padding: 3px !important;
  }
  
  .ex-card-skills {
    font-size: 5.5px !important;
    padding: 4px !important;
    line-height: 1.3 !important;
  }
  
  .draft-content {
    padding: 10px 6px !important;
    gap: 10px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#20013;&#22830;&#12503;&#12524;&#12499;&#12517;&#12540;&#12434;&#22823;&#24133;&#32302;&#23567; */
  .draft-preview-container {
    max-height: 280px !important;
    margin: 6px 0 !important;
  }
  
  .ex-card-image {
    max-height: 230px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  
  /* &#12490;&#12499;&#12466;&#12540;&#12471;&#12519;&#12531;&#30691;&#21360;&#32302;&#23567; */
  .nav-button {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
    padding: 0 !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#12524;&#12452;&#12450;&#12454;&#12488;&#20840;&#20307;&#12398;&#39640;&#12373;&#35519;&#25972; */
  .draft-layout {
    gap: 8px !important;
  }
}

/* &#36229;&#23567;&#22411;&#12473;&#12510;&#12540;&#12488;&#12501;&#12Â©;&#12531;&#29992;: 360px&#20197;&#19979; */
@media (max-width: 360px) {
  body {
    font-size: 7px !important;
  }
  
  .extra-card {
    width: 35px !important;
    height: 50px !important;
  }
  
  .extra-card-image {
    height: 35px !important;
  }
  
  .player-side-panel {
    flex: 0 0 48px !important;
  }
  
  .skill-counter-value {
    font-size: 11px !important;
  }
  
  .story-point-value {
    font-size: 14px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#30011;&#38754;&#12398;&#26368;&#23567;&#12469;&#12452;&#12474; */
  .draft-hero-title {
    font-size: 8px !important;
    margin-bottom: 4px !important;
  }
  
  .draft-hero-subtitle {
    font-size: 5px !important;
    margin-bottom: 5px !important;
  }
  
  .draft-hero-section {
    margin-bottom: 6px !important;
    padding: 6px 4px !important;
  }
  
  .draft-player-status {
    gap: 5px !important;
    margin-bottom: 6px !important;
  }
  
  .draft-player-card {
    padding: 4px !important;
  }
  
  .draft-player-area {
    padding: 5px !important;
    min-height: 90px !important;
  }
  
  .ex-card {
    flex: 0 0 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }
  
  .ex-card-name {
    font-size: 6px !important;
  }
  
  .ex-card-skills {
    font-size: 5px !important;
  }
  
  /* &#12489;&#12521;&#12501;&#12488;&#20013;&#22830;&#12503;&#12524;&#12499;&#12517;&#12540;&#26368;&#23567;&#21270; */
  .draft-preview-container {
    max-height: 200px !important;
  }
  
  .ex-card-image {
    max-height: 180px !important;
  }
  
  .nav-button {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
}