.tool-island { background: #fff; border-radius: 20px; box-shadow: 0 15px 50px rgba(0,0,0,0.1); max-width: 1150px; margin: -60px auto 80px; overflow: hidden; border: 1px solid #e2e8f0; font-family: sans-serif; }
.island-single-column { display: flex; flex-direction: column; }
.main-stage { padding: 30px 0; background: #f8fafc; position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; }

.island-scroll-container { 
    width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; 
    min-height: 405px; scrollbar-width: none; -ms-overflow-style: none;
    touch-action: pan-x;
}
.island-scroll-container::-webkit-scrollbar { display: none; }
.progress-info {font-size:0.8rem;}
#grid-rotator { width: fit-content; min-width: 100%; transition: transform 0.6s ease-in-out; }
.rotator-reverse { transform: rotate(180deg);min-height: 403px; }

.real-layout-root { display: flex !important; width: fit-content; min-width: 100%; margin: 0 auto; align-items: flex-start; }
.real-layout-root.justify-center { justify-content: center !important; }
.real-layout-root.justify-between { justify-content: space-between !important; min-width: 980px; }

.grid-12-center { display: grid !important; grid-template-columns: repeat(4, 95px) !important; grid-template-rows: repeat(3, 127px) !important; gap: 10px 0 !important; }
.side-block {  display:flex;
  flex-direction:column;
  gap:10px;}
.side-row{
  display:flex;
  gap:10px;
}

.card-slot, .card-missing { width: 95px; height: 130px; box-sizing: border-box; }
.card-slot img { width: 100%; height: 100%; object-fit: contain; display: block;}
.card-missing { background: rgba(0,0,0,0.03); border: 2px dashed #cbd5e1; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.card-missing::after { content: "？"; font-size: 33px; color: #94a3b8; font-weight: 900; }

.correct-flash { animation: flash-purple 0.8s ease-out !important; }
@keyframes flash-purple { 0% { background-color: rgba(167, 139, 250, 0.4); } 100% { background-color: transparent; } }
.wrong-choice { animation: shake-red 0.4s !important; border: 2px solid #ef4444 !important; }
@keyframes shake-red { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.control-panel-compact { padding: 15px 30px; background: #fff; border-top: 1px solid #f1f5f9; height: 160px; box-sizing: border-box; display: flex; align-items: center; }
.compact-flex-row { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: 10px; }
.interactive-zone-compact { flex: 2; display: flex; justify-content: center; align-items:flex-start; min-height: 120px; }
#timer-label { font-weight: 900; color: #a78bfa; font-family: monospace; font-size: 1.0rem; }
.settings-block {margin-left: 75px;}
.status-block {width: 150px;}

.choice-grid { display: flex; justify-content: center; gap: 10px; align-items: center; min-height: 115px; }
.choice-item { width: 85px; height: 115px; cursor: pointer; }

.gradient-btn-main, .gradient-btn-sub { background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%); color: #fff; border: none; border-radius: 50px; font-weight: 900; cursor: pointer; }
.gradient-btn-main { padding: 10px 32px; font-size: 14px; }
.gradient-btn-sub { padding: 12px 24px; font-size: 14px; }
.sub-btn { font-size: 12px; padding: 8px 12px; color: #64748b; border: 1px solid #e2e8f0; border-radius: 8px; font-weight: 800; background: #fff; }

.result-badge { background: #fdf2f8; border: 2px solid #fce7f3; border-radius: 20px; padding: 25px; margin: 15px 0; text-align: center; }
.score-value { font-size: 42px; color: #db2777; font-weight: 900; }
.result-stats { display: flex; justify-content: space-around; border-top: 1px solid #f1f5f9; padding-top: 15px; margin-top: 10px;margin-bottom: 15px; }
#user-nickname { width: 100%; padding: 12px; border-radius: 12px; border: 2px solid #e2e8f0; margin-bottom: 12px; text-align: center; font-weight: 800; }
.ranking-score {color:#fff;font-size: 1.3rem;font-weight: 600;margin: 0 0 15px;text-align: center;}
.ranking-section {padding: 20px;background: linear-gradient(135deg, #e3dbfc 0%, #f0c4db 100%);}
.rank-box { margin-bottom: 30px; background: #fff; border-radius: 10px; padding: 25px; border: 1px solid #e2e8f0; text-align: left; }
.ranking-item { display: flex; justify-content: space-between; padding: 12px 20px; background: #f8fafc; border-radius: 12px; font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.rank-title {font-weight: 600;margin-bottom: 10px;margin-left:10px;}
.start-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.95); z-index: 100; display: flex; align-items: center; justify-content: center; }
.setup-card { background: #fff; padding: 30px; border-radius: 24px; width: 340px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid #f1f5f9;margin-top: 160px; }
.setup-title {padding: 5px 0 25px;    font-size: 22px;    font-weight: 600;}
.setup-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: 800; }
.chip { padding: 8px 16px; background: #f1f5f9; border-radius: 10px; font-size: 13px; cursor: pointer; border: 1px solid transparent;margin-left: 5px; }
.chip:has(input:checked) { background: #fdf2f8; border-color: #f472b6; color: #db2777; }
.chip input { display: none; }

@media (max-width: 768px) {
    .main-stage { padding: 20px 0 10px; min-height: 320px; }
    .island-scroll-container { min-height: 360px; }
    .grid-12-center { grid-template-columns: repeat(4, 82px) !important; grid-template-rows: repeat(3, 110px) !important; }
    .side-block { grid-template-rows: repeat(3, 110px); }
    .card-slot, .card-missing, .choice-item { width: 82px; height: 112px; }
    .control-panel-compact { padding: 10px; height: auto; min-height: 120px; }
    .compact-flex-row { flex-direction: column; gap: 10px; text-align: center;align-items: center; }
.real-layout-root.justify-between {min-width: 720px;}
.rotator-reverse {min-height: 352px;}
.right-side {margin-right: 10px;margin-left: 50px;}
.left-side {margin-left: 10px;}
.settings-block {margin-left:0;}
}
/* ▼強制上書き：25枚レイアウトはgrid禁止（飛び出し原因） */
.side-block{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

.side-row{
  display:flex !important;
  flex-direction:row !important;
  gap:10px !important;
}
/* 内側に+1枚が出るように、段の寄せ方向を左右で変える */
.left-side  .side-row { justify-content: flex-start !important; }
.right-side .side-row { justify-content: flex-end   !important; }
/* 世界ランキングのコンテナ */
#ranking-global {
  display: flex;
  flex-direction: column; /* 基本は縦積み（スマホ用） */
  width: 100%;
  max-width: 1080px; /* PCでの最大幅 */
  margin: 0 auto;
}

.global-ranking-header h2 {
font-size: 1.3rem;
}

/* PCサイズ（画面幅が768px以上）のときだけ横並びにする */
@media (min-width: 768px) {
  #ranking-global {
    flex-direction: row; /* 横並びに変更 */
    justify-content: space-between; /* 左右に広げる */
    align-items: flex-start;
    gap: 40px;
  }

.global-ranking-header h2 {
font-size: 1.8rem; letter-spacing: 0.1em;
}

  #ranking-global .rank-box {
    flex: 1; /* 左右の幅を均等にする */
    min-width: 0; /* はみ出し防止 */
  }
}

/* ランクボックス内の微調整（必要に応じて） */
.rank-box {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}