.iline-hm{max-width:1180px;margin:24px auto;padding:24px;border:1px solid #e7dfd0;border-radius:22px;background:linear-gradient(180deg,#fffdf8,#fff9ef);box-shadow:0 10px 28px rgba(80,55,30,.08);font-family:system-ui,-apple-system,"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif}
.iline-hm-head{display:flex;gap:24px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.iline-hm h2{margin:0 0 6px;font-size:clamp(26px,4vw,40px)}
.iline-hm p{margin:0}
.iline-hm-controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.iline-hm-controls label{font-size:13px;font-weight:700}
.iline-hm select,.iline-hm button{min-height:44px;border-radius:12px;border:1px solid #cdbd9f;padding:0 14px;font-size:15px;background:#fff}
.iline-hm button{cursor:pointer;font-weight:800;background:#4b2f20;color:#fff;border-color:#4b2f20}
.iline-hm-status{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.iline-hm-status span{background:#fff;border:1px solid #eadfca;border-radius:999px;padding:8px 13px}
.iline-hm-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;justify-items:center}
.hm-card{position:relative;width:100%;max-width:106px;aspect-ratio:2 / 3.4;border:0;background:none;padding:0;perspective:900px;cursor:pointer}
.hm-card-inner{position:absolute;inset:0;transition:transform .42s;transform-style:preserve-3d}
.hm-card.is-flipped .hm-card-inner,.hm-card.is-matched .hm-card-inner{transform:rotateY(180deg)}
.hm-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:10px 8px;border:1px solid #b89d78;box-shadow:0 5px 12px rgba(65,45,22,.08)}
.hm-card.hm-kami .hm-back{background:linear-gradient(180deg,#2f7d33,#3f9844)}
.hm-card.hm-shimo .hm-back{background:linear-gradient(180deg,#7c3936,#964643)}
.hm-back{color:#fff;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:700;font-size:22px;letter-spacing:.08em;overflow:hidden}
.hm-back-label{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;z-index:2;writing-mode:vertical-rl;text-orientation:mixed}
.hm-back::before,.hm-back::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.28);border-radius:999px;pointer-events:none}
.hm-back::before{width:64px;height:64px;left:50%;top:20px;transform:translateX(-50%)}
.hm-back::after{width:64px;height:64px;left:50%;bottom:20px;transform:translateX(-50%)}
.hm-card.hm-kami .hm-front{background:linear-gradient(180deg,#3b9641,#2f7f35)}
.hm-card.hm-shimo .hm-front{background:linear-gradient(180deg,#9a4b47,#7d3734)}
.hm-front{transform:rotateY(180deg);color:#fff;text-align:center;overflow:hidden}
.hm-front-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.hm-type{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);font-weight:800;white-space:nowrap;color:#fff}
.hm-text{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;width:100%;height:100%;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;line-height:1.12;font-weight:700}
.hm-poem-col{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;letter-spacing:.02em}
.hm-no{font-size:10px;opacity:.92;white-space:nowrap}
.hm-card.hm-kami.is-matched .hm-front{outline:3px solid #d9b45b;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);background:linear-gradient(180deg,#57ae5d,#3e9445)}
.hm-card.hm-shimo.is-matched .hm-front{outline:3px solid #d9b45b;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);background:linear-gradient(180deg,#b4605b,#954742)}
.iline-hm-message{margin-top:18px;text-align:center;padding:18px;border-radius:16px;background:#fff2bf;font-weight:800;font-size:20px}
.iline-hm-note{margin-top:14px!important;font-size:12px;color:#786b5f}
@media(max-width:980px){
  .iline-hm-board{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
@media(max-width:780px){
  .iline-hm{padding:16px}
  .iline-hm-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hm-card{max-width:94px}
  .hm-back{font-size:18px}
  .hm-back::before,.hm-back::after{width:48px;height:48px}
  .hm-text{gap:5px;font-size:14px;line-height:1.08}
}
@media(max-width:480px){
  .iline-hm-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hm-card{max-width:84px}
  .hm-text{font-size:12px}
  .hm-back{font-size:16px}
  .hm-back::before,.hm-back::after{width:42px;height:42px}
}