.memory-match-object { position:absolute; overflow:visible; user-select:none; touch-action:manipulation; pointer-events:auto; }
.memory-match-design { position:absolute; width:1120px; height:650px; transform-origin:top left; color:#19334a; font-family:Arial,"Noto Sans JP",sans-serif; box-sizing:border-box; border-radius:18px; background:#f5f9fc; }
.memory-match-header { height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; gap:12px; font-size:20px; }
.memory-match-status { font-weight:700; }
.memory-match-tools { display:flex; gap:8px; font-size:15px; }
.memory-match-tools[hidden] { display:none; }
.memory-match-tools button { border:1px solid #b9cbd9; background:white; border-radius:7px; padding:5px 12px; color:#19334a; cursor:pointer; }
.memory-match-tables { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:4px 20px 12px; }
.memory-match-table { padding:12px; border:4px solid #c8d6e2; border-radius:16px; box-sizing:border-box; background:#edf3f8; transition:border-color .25s,box-shadow .25s; }
.memory-match-table.is-active { border-color:#21b9dd; box-shadow:0 0 0 4px #51d8ee55,0 0 24px #19badb99; animation:memory-frame-glow 1.6s ease-in-out infinite alternate; }
.memory-match-table.is-correct { border-color:#2cbd75; box-shadow:0 0 22px #43d99388; }
.memory-match-table.is-wrong { border-color:#e99567; }
.memory-match-table-title { text-align:center; font-size:18px; font-weight:700; margin:0 0 10px; }
.memory-match-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,120px); gap:9px; }
.memory-match-card { position:relative; appearance:none; border:0; background:transparent; padding:0; min-width:0; width:100%; height:100%; cursor:pointer; perspective:700px; border-radius:9px; color:#142c40; }
.memory-match-card:focus-visible { outline:4px solid #f6bd36; outline-offset:3px; }
.memory-match-card:disabled { cursor:default; opacity:1; }
.memory-match-card.is-matched { visibility:hidden; pointer-events:none; }
.memory-match-card-inner { display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .35s; position:relative; }
.memory-match-card.is-up .memory-match-card-inner { transform:rotateY(180deg); }
.memory-match-back,.memory-match-front { position:absolute; inset:0; border-radius:9px; overflow:hidden; box-sizing:border-box; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.memory-match-back { border:5px solid white; box-shadow:0 2px 5px #16314b33; background-color:#245e9a; background-image:repeating-linear-gradient(45deg,transparent 0 8px,#ffffff30 8px 10px),repeating-linear-gradient(-45deg,transparent 0 8px,#ffffff30 8px 10px); display:grid; place-items:center; }
.memory-match-back::after { content:"✦"; display:grid; place-items:center; width:42px; height:52px; color:white; font-size:34px; border:2px solid #ffffffbc; border-radius:50%; background:#245e9a; }
.memory-match-front { transform:rotateY(180deg); border:2px solid #becfdd; background:white; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.memory-match-card.is-revealed .memory-match-card-inner { transform:none; transition:none; transform-style:flat; }
.memory-match-card.is-revealed .memory-match-front { transform:none; backface-visibility:visible; -webkit-backface-visibility:visible; }
.memory-match-card.is-revealed .memory-match-back { visibility:hidden; }
.memory-match-front img { width:86px; height:86px; object-fit:contain; display:block; }
.memory-match-word { width:100%; padding:2px 1px 5px; box-sizing:border-box; text-align:center; white-space:nowrap; font-size:19px; font-weight:800; line-height:1.1; color:#152e48; }
.memory-match-note { padding:0 22px; font-size:14px; color:#5b6c7a; min-height:22px; }
.memory-match-progress { padding:0 22px 3px; font-size:18px; font-weight:700; color:#205986; }
.memory-match-progress[hidden] { display:none; }
.memory-match-practice .memory-match-grid { grid-template-rows:repeat(4,114px); }
.memory-match-practice .memory-match-card-inner { transition:none; transform:none; transform-style:flat; }
.memory-match-practice .memory-match-back { visibility:hidden; }
.memory-match-practice .memory-match-front { transform:none; backface-visibility:visible; -webkit-backface-visibility:visible; justify-content:center; gap:3px; }
.memory-match-practice .memory-match-card.is-selected { outline:5px solid #f3a51b; outline-offset:1px; box-shadow:0 0 0 8px #ffe8a6; }
.memory-match-practice .memory-match-card.is-selected::after { content:"✓"; position:absolute; top:-6px; right:-5px; z-index:2; width:26px; height:26px; border-radius:50%; background:#f3a51b; color:#142c40; font:700 22px/26px Arial,sans-serif; }
.memory-match-practice [data-presentation="image"] .memory-match-word { display:none; }
.memory-match-practice [data-presentation="image"] img { width:108px; height:108px; }
.memory-match-practice [data-presentation="word"] img,.memory-match-practice [data-presentation="japanese"] img { display:none; }
.memory-match-practice [data-presentation="word"] .memory-match-word,.memory-match-practice [data-presentation="japanese"] .memory-match-word { white-space:normal; overflow-wrap:anywhere; padding:8px; line-height:1.3; }
.memory-match-practice [data-presentation="word"] .memory-match-word { white-space:nowrap; overflow-wrap:normal; padding:4px; }
.memory-match-template .memory-match-card { cursor:default; }
.memory-match-config label { display:block; margin:12px 0; }
.memory-match-complete { position:fixed; inset:0; z-index:1500; display:grid; place-items:center; pointer-events:none; }
.memory-match-complete-label { box-sizing:border-box; max-width:94vw; padding:clamp(14px,3vw,32px) clamp(20px,5vw,70px); border:4px solid #ffdf70; border-radius:28px; background:linear-gradient(135deg,#1767ab,#103f7a); color:#ffdf70; font:900 clamp(44px,12vw,150px)/1.1 Arial,sans-serif; text-align:center; text-shadow:0 4px 0 #082d59; box-shadow:0 12px 45px #082d5966,0 0 36px #ffe69799; animation:memory-complete-appear .45s ease-out both; }
@keyframes memory-complete-appear { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
@keyframes memory-frame-glow { from { box-shadow:0 0 0 3px #51d8ee44,0 0 12px #19badb55; } to { box-shadow:0 0 0 5px #51d8ee66,0 0 24px #19badbaa; } }
@media(prefers-reduced-motion:reduce) { .memory-match-card-inner,.memory-match-table,.memory-match-complete-label { transition:none; animation:none!important; } }
@media print { .memory-match-tools,.memory-match-complete { display:none; } .memory-match-table { animation:none!important; } }