/* puzuru 共通の見た目（build.py が assets/ へ写す） */ :root{ --bg:#f4f4f7; --card:#ffffff; --ink:#1d2433; --sub:#5f6673; --line:#d6d3cc; --thick:#1d2433; --sel:#dbe7ff; --peer:#eef2f8; --same:#c7d7fb; --given:#1d2433; --input:#2457c5; --err:#d93a2b; --errbg:#fde8e6; --btn:#ffffff; --btnline:#d6d3cc; --accent:#2457c5; --gold:#a8790a; --red:#e53b2c; --navy:#1d2433; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#14171d; --card:#1c2029; --ink:#e7e9ee; --sub:#a3aab6; --line:#353b47; --thick:#c9ced8; --sel:#24365e; --peer:#1f2532; --same:#2c4373; --given:#e7e9ee; --input:#8fb1ff; --err:#ff7a6b; --errbg:#3a2220; --btn:#1c2029; --btnline:#353b47; --accent:#8fb1ff; --gold:#e0b84a; --navy:#0e1117; } } :root[data-theme="dark"]{ --bg:#14171d; --card:#1c2029; --ink:#e7e9ee; --sub:#a3aab6; --line:#353b47; --thick:#c9ced8; --sel:#24365e; --peer:#1f2532; --same:#2c4373; --given:#e7e9ee; --input:#8fb1ff; --err:#ff7a6b; --errbg:#3a2220; --btn:#1c2029; --btnline:#353b47; --accent:#8fb1ff; --gold:#e0b84a; --navy:#0e1117; } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg);color:var(--ink);font-family:-apple-system,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;-webkit-tap-highlight-color:transparent} body{min-height:100vh} a{color:var(--accent)} /* 上の帯 */ .top{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px} .logo{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none} .logo .lw{height:24px;width:auto;margin-top:5px} .logo i{width:30px;height:30px;border-radius:8px;background:var(--ink);display:flex;align-items:center;justify-content:center} .logo i svg{stroke:var(--bg)} .logo em{font-style:normal;color:var(--red)} .nav{display:flex;align-items:center;gap:6px} .menu{position:relative} .menu>button{border:none;background:none;color:var(--ink);font-size:14px;padding:8px;cursor:pointer;display:flex;align-items:center;gap:4px} .drop{display:none;position:absolute;right:0;top:40px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:230px} .drop.show{display:block} .drop a,.drop span.off{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px} .drop span.off{color:var(--sub)} .drop a:hover{background:var(--peer)} .soon{font-size:11px;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:1px 8px} .lang{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;text-decoration:none} .prem{border:none;background:var(--red);color:#fff;font-weight:700;font-size:13px;border-radius:8px;padding:8px 12px;cursor:pointer} .menu>button .m,.lang .ls{display:none} .logo span,.menu>button,.lang,.prem{white-space:nowrap} /* 見出し */ .hero{padding:20px 16px 8px;text-align:center} .crumb{font-size:12px;color:var(--sub);margin-bottom:10px} .crumb a{color:var(--sub);text-decoration:none} .ttl{display:flex;align-items:center;justify-content:center;gap:10px} .ttl i{width:40px;height:40px;border-radius:10px;background:#2457c5;display:flex;align-items:center;justify-content:center;flex:none} h1{font-size:28px;font-weight:800;letter-spacing:.02em} .lead{font-size:14px;color:var(--sub);margin-top:6px;line-height:1.6} /* ゲーム本体 */ .wrap{width:100%;max-width:480px;margin:0 auto;padding:12px 16px 8px} .game{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px} .levels{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:10px} .levels button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 0;font-size:13px;white-space:nowrap;min-width:0;font-weight:700;cursor:pointer} .levels button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .levels button.god{color:var(--gold)} .levels button.god.on{background:var(--gold);color:#fff;border-color:var(--gold)} .bar{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--sub);margin:4px 2px 8px} .bar b{color:var(--ink);font-variant-numeric:tabular-nums} .bar button{border:none;background:none;color:var(--sub);font-size:13px;cursor:pointer;padding:2px 4px} .board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));aspect-ratio:1/1;background:var(--card);border:2px solid var(--thick);border-radius:6px;overflow:hidden;user-select:none} .cell{position:relative;min-height:0;min-width:0;line-height:1;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(20px,6.4vw,30px);font-weight:600;color:var(--input);cursor:pointer;font-variant-numeric:tabular-nums} .cell:nth-child(9n){border-right:none} .cell.c3,.cell.c6{border-left:2px solid var(--thick)} .cell.r3,.cell.r6{border-top:2px solid var(--thick)} .cell.r8{border-bottom:none} .cell.given{color:var(--given);font-weight:700} .cell.peer{background:var(--peer)} .cell.same{background:var(--same)} .cell.sel{background:var(--sel)} .cell.err{color:var(--err);background:var(--errbg)} .notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:clamp(8px,2.3vw,11px);font-weight:500;color:var(--sub)} .notes span{display:flex;align-items:center;justify-content:center} .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 8px} .tools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 0;font-size:13px;cursor:pointer} .tools button.on{border-color:var(--accent);color:var(--accent);font-weight:700} .pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px} .pad button{border:1px solid var(--btnline);background:var(--btn);color:var(--input);border-radius:10px;padding:12px 0;font-size:22px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums} .pad button.done{opacity:.3} .new{width:100%;margin-top:22px;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:12px;padding:12px 0;font-size:15px;font-weight:700;cursor:pointer} .note{font-size:12px;color:var(--sub);text-align:center;margin-top:10px;line-height:1.6} /* 下の説明 */ .sec{max-width:880px;margin:0 auto;padding:28px 16px 4px} .sec p,.sec li{overflow-wrap:break-word} /* 長いURLなど切れ目の無い文字列でスマホの横にはみ出さない（10/14 プライバシーの privacy.microsoft.com で43px） */ .sec h2{font-size:20px;font-weight:800;margin-bottom:12px} .sec h3{font-size:16px;font-weight:800;margin:18px 0 6px} .sec>p,.sec li{font-size:15px;color:var(--ink);line-height:1.8} .sec ul,.sec ol{padding-left:1.4em;margin:6px 0} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px} .step b{display:block;font-size:15px;margin-bottom:6px} .step p{font-size:14px;color:var(--sub);line-height:1.7} .tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14px} .tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.6} .tbl th{background:var(--peer);font-weight:700} .tbl td:first-child{white-space:nowrap} details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px} summary{font-weight:700;font-size:15px;cursor:pointer} details p{font-size:14px;color:var(--sub);line-height:1.7;margin-top:8px} /* カード */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .gcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--ink);text-decoration:none} a.gcard:hover{border-color:var(--accent)} .gcard i{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px} .gcard b{display:block;font-size:16px;margin-bottom:4px} .gcard span{font-size:13px;color:var(--sub);line-height:1.6} .gcard .soon{display:inline-block;margin-top:8px} .gcard.off{opacity:.75} /* トップ */ .phero{padding:36px 16px 12px;text-align:center} .phero h1{font-size:30px} .today{max-width:880px;margin:16px auto 0;padding:0 16px} .today a{display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;border-radius:16px;padding:18px;text-decoration:none} .today a i{width:44px;height:44px;border-radius:12px;background:var(--gold);display:flex;align-items:center;justify-content:center;flex:none} .today a b{display:block;font-size:17px} .today a span{font-size:13px;opacity:.85} footer{max-width:880px;margin:28px auto 0;padding:20px 16px 40px;border-top:1px solid var(--line);font-size:12px;color:var(--sub);line-height:1.8} footer a{color:var(--sub)} /* 窓 */ .modal{position:fixed;inset:0;background:rgba(10,12,16,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:10} .modal.show{display:flex} .box{background:var(--card);color:var(--ink);border-radius:16px;padding:24px 20px;max-width:360px;width:100%;text-align:center} .box h2{font-size:20px;margin-bottom:8px} .box p{font-size:14px;color:var(--sub);line-height:1.7;margin-bottom:16px} .box .price{font-size:28px;font-weight:800;color:var(--gold);margin-bottom:4px} .box ul{list-style:none;text-align:left;font-size:14px;line-height:1.9;margin:0 auto 18px;max-width:260px} .box ul li::before{content:"✓ ";color:var(--gold);font-weight:700} .box button{width:100%;border:none;border-radius:12px;padding:12px 0;font-size:15px;font-weight:700;cursor:pointer;margin-top:6px} .box .pri{background:var(--gold);color:#fff} .box .sec2{background:transparent;color:var(--sub);border:1px solid var(--btnline)} @media (max-width:640px){.logo .lw{height:20px} .steps{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}h1{font-size:24px}.phero h1{font-size:24px} .menu>button .t{display:none}.menu>button .m{display:inline}.lang .lt{display:none}.lang .ls{display:inline} .top{padding:0 10px}.logo{font-size:17px;gap:6px}.logo i{width:26px;height:26px}.nav{gap:4px}.lang{padding:5px 9px;font-size:12px}.prem{padding:7px 9px;font-size:12px}.menu>button{font-size:13px;padding:6px 4px} .tbl td:first-child{white-space:normal} } /* ランキング・クリアの窓 */ .wrank{font-size:14px;color:var(--ink);font-weight:700;margin:-6px 0 12px;line-height:1.6} .wnick{text-align:left;margin-bottom:10px} .wnick p{margin-bottom:8px;font-size:13px} .wnick input,.nrow input{width:100%;border:1px solid var(--btnline);background:var(--bg);color:var(--ink);border-radius:10px;padding:11px 12px;font-size:16px} .box .nerr,.nerr{color:var(--err);font-size:13px;margin:6px 0 0;min-height:0} .wlink{margin:10px 0 0 !important;font-size:14px} .rtabs,.rlv{display:grid;gap:6px;margin-bottom:8px} .rtabs{grid-template-columns:repeat(4,1fr)} .rlv{grid-template-columns:repeat(6,1fr)} .rlv button{font-size:13px;min-width:0;white-space:nowrap} .rtabs button,.rlv button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 0;font-size:14px;font-weight:700;cursor:pointer} .rtabs button.on,.rlv button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .rlv[hidden]{display:none} .rme{background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:10px 12px;font-size:14px;margin:6px 0 10px} .rtbl td,.rtbl th{white-space:nowrap} .rtbl td:nth-child(2){white-space:normal;word-break:break-all;width:100%} .rtbl td:first-child,.rtbl td:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums} .rtbl tr.me td{background:var(--sel);font-weight:700} .nrow{display:flex;gap:8px;max-width:480px} .nrow button{flex:none;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:0 14px;font-size:14px;font-weight:700;cursor:pointer} /* ヒント・成績・設定 */ .cell.hl{box-shadow:inset 0 0 0 2px var(--gold);background:rgba(224,184,74,.18)} .hmsg{font-size:13px;line-height:1.6;background:var(--peer);border:1px solid var(--gold);border-radius:10px;padding:8px 10px;margin:0 0 8px} .bar>span:first-child{display:flex;align-items:center;gap:2px} .bar b#t-lvname{color:var(--sub);font-weight:400;margin-right:4px} .bar button{text-decoration:underline;text-underline-offset:3px} .cal{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;margin:0 0 12px} .cal i{aspect-ratio:1/1;border-radius:3px;background:var(--peer);border:1px solid var(--line)} .cal i.on{background:#1f8a5b;border-color:#1f8a5b} .stbl{font-size:13px;margin-bottom:8px} .stbl th,.stbl td{padding:7px 6px;text-align:right} .stbl th:first-child,.stbl td:first-child{text-align:left} .box .snote{font-size:12px;margin-bottom:10px} .box.set{text-align:left} .box.set label{display:block;font-size:14px;margin:0 0 12px} .box.set select{display:block;width:100%;margin-top:6px;border:1px solid var(--btnline);background:var(--bg);color:var(--ink);border-radius:10px;padding:10px;font-size:15px} .box.set .chk{display:flex;align-items:center;gap:8px} .box.set .chk input{width:20px;height:20px} .wcopied{font-size:12px !important;margin:4px 0 0 !important;word-break:break-all;white-space:pre-line} .box{max-height:calc(100vh - 32px);overflow:auto} .cell.hl.sel{background:var(--sel);box-shadow:inset 0 0 0 3px var(--accent)} /* 印刷用 */ .pform{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .pform label{font-size:14px} .pform select{display:block;width:100%;margin-top:6px;border:1px solid var(--btnline);background:var(--card);color:var(--ink);border-radius:10px;padding:10px;font-size:15px} .pform .chk{grid-column:1/-1;display:flex;align-items:center;gap:8px} .sheets{display:none} .psheet{break-after:page;page-break-after:always;padding:8mm 0} .psheet h3{font-size:14pt;margin:0 0 4mm;font-weight:700} .psheet .pgrid{display:grid;gap:8mm} .psheet.n1 .pgrid{grid-template-columns:1fr;max-width:150mm;margin:0 auto} .psheet.n2 .pgrid{grid-template-columns:1fr;max-width:110mm;margin:0 auto} .psheet.n4 .pgrid{grid-template-columns:1fr 1fr} .pp{break-inside:avoid} .pp p{font-size:10pt;margin:0 0 2mm;color:#333} .pp .g9{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);aspect-ratio:1/1;border:2px solid #000} .pp .g9>div{display:flex;align-items:center;justify-content:center;border-right:1px solid #888;border-bottom:1px solid #888;font-size:var(--pfs,16pt);font-weight:600;color:#000;min-height:0} .pp .g9>div:nth-child(9n){border-right:none} .pp .g9>div:nth-child(n+73){border-bottom:none} .pp .g9>div.c3{border-left:2px solid #000} .pp .g9>div.r3{border-top:2px solid #000} .pp.ans .g9>div{color:#555;font-weight:400} .pp.ans .g9>div.g{color:#000;font-weight:700} @media print{ @page{size:A4;margin:12mm} body{background:#fff !important} body>*:not(.sheets){display:none !important} .sheets{display:block !important;color:#000} } /* ロゴ（B・10/2 チカ決定） */ .plogo{display:flex;justify-content:center;margin:0 auto 6px} .plogo svg{width:min(320px,80vw);height:auto;color:var(--ink)} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 文字の大きさ・5つ目のボタン（10/4 仮想プレイヤーの指摘） */ .notes{font-size:clamp(11px,2.6vw,12px)} :root[data-fs="l"] .cell{font-size:clamp(23px,7.2vw,34px)} :root[data-fs="l"] .notes{font-size:clamp(12px,3vw,14px)} :root[data-fs="xl"] .cell{font-size:clamp(26px,8vw,38px)} :root[data-fs="xl"] .notes{font-size:clamp(13px,3.3vw,15px);font-weight:600} :root[data-fs="l"] .pad button,:root[data-fs="xl"] .pad button{font-size:25px} .tools.t5{grid-template-columns:repeat(5,1fr)} .tools.t5 button{font-size:12px} .steps.n4{grid-template-columns:repeat(2,1fr)} @media (max-width:640px){.steps.n4{grid-template-columns:1fr}} footer .pzin{color:#1f8a5b;font-weight:700} .rtbl td[colspan]{white-space:normal !important;text-align:left !important;line-height:1.7} .nok{color:#1f8a5b;font-size:13px;margin:6px 0 0;font-weight:700} .rtbl td.tbest,.mini td.tbest{white-space:nowrap} @media (max-width:640px){.rtbl th,.rtbl td{padding:8px 5px;font-size:12px}} @media (max-width:640px){.rtbl th{white-space:normal;line-height:1.3}.rtbl td,.rtbl th{padding:8px 4px}} .rtbl tr.gap td{text-align:center !important;color:var(--sub);padding:2px} /* ゲームの下（10/4 チカ「キットベンチみたいに」）：白い帯に説明をたたむ → 紺の帯でほかのゲーム */ .lower{background:var(--card);border-top:1px solid var(--line);margin-top:40px;padding:4px 0 0} .lower details{background:var(--bg);border-color:transparent} .lower .step{background:var(--bg);border-color:transparent} .fold{max-height:0;overflow:hidden} .fold.open{max-height:none;padding-bottom:28px} .more-w{max-width:880px;margin:28px auto;padding:0 16px;text-align:center} .more{font:inherit;font-size:15px;font-weight:700;padding:12px 28px;border-radius:999px;border:1px solid var(--btnline);background:var(--card);color:var(--ink);cursor:pointer} .relband{background:#23263A;padding:8px 0 44px} .relband h2{color:#fff} .relband .gcard{background:#fff;border-color:transparent;color:#1d2433} .relband .gcard span{color:#5f6673} .relband .gcard .soon{color:#5f6673;border-color:#d6d3cc} footer{margin-top:0} .lower+footer{border-top:none} @media (max-width:640px){.cards.rel{grid-template-columns:1fr}} .relband .gcard.off{opacity:1} /* ナビ（10/4 チカ B案）：パソコン＝上の帯に全部／狭い時＝ロゴと≡（中に全部） */ .nav-pc{display:flex;align-items:center;gap:2px} .nav-pc .nl{border:none;background:none;color:var(--ink);font:inherit;font-size:14px;padding:8px 10px;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap} .nav-pc .nl:hover{background:var(--peer)} .nav-pc .lang{margin-left:6px} .navbtn{display:none;border:none;background:none;color:var(--ink);padding:8px;cursor:pointer;align-items:center} .drawer{position:fixed;inset:0;background:rgba(10,12,16,.45);z-index:20} .drawer[hidden]{display:none} .dpanel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--card);overflow:auto;padding:16px 16px 40px;display:flex;flex-direction:column} .dpanel a,.dpanel button:not(.dclose),.dpanel span.off{display:flex;justify-content:space-between;align-items:center;text-align:left;border:none;background:none;font:inherit;font-size:16px;color:var(--ink);padding:12px 8px;border-radius:10px;text-decoration:none;cursor:pointer} .dpanel span.off{color:var(--sub)} .dpanel a:hover,.dpanel button:not(.dclose):hover{background:var(--peer)} .dpanel .dmain{font-weight:800;font-size:17px;background:var(--peer);margin-bottom:6px} .dpanel .dh{font-size:12px;color:var(--sub);margin:14px 8px 2px;font-weight:700} .dclose{align-self:flex-end;border:none;background:none;font-size:28px;line-height:1;color:var(--sub);cursor:pointer;padding:0 6px 6px} body.noscroll{overflow:hidden} @media (max-width:899px){.nav-pc{display:none}.navbtn{display:flex}} /* スマホの上の帯：今日・順位・設定のアイコン（10/5 チカ C案） */ .sp-ico{display:none;align-items:center;gap:2px;margin-left:auto} .sp-ico a,.sp-ico button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:44px;padding:4px 4px 2px;border:none;background:none;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer;border-radius:8px} .sp-ico span{font-size:10px;line-height:1.1;color:var(--sub)} @media (max-width:899px){.sp-ico{display:flex}.navbtn{margin-left:2px}} /* メニューのアイコン（10/5 チカ：左にアイコン・塗りの箱はやめる） */ .li{display:flex;align-items:center;gap:12px} .li svg{color:var(--sub);flex:none} .gi{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex:none;font-style:normal} .dpanel .dmain{background:none;font-weight:800;font-size:17px;margin:0} .dpanel .dmain svg{color:var(--ink)} .dpanel .dmain+.dh,.dpanel .dmain:nth-of-type(2){margin-bottom:4px} .dpanel .dh{border-top:1px solid var(--line);padding-top:14px;margin-top:10px} .dpanel span.off .gi{opacity:.55} .drop .li{gap:10px} .drop span.off .gi{opacity:.55} .drop{min-width:310px} .drop a,.drop span.off{white-space:nowrap;gap:12px} .soon{white-space:nowrap} /* パソコンの上の帯にもアイコン（10/5 チカ） */ .nav-pc .nl,.nav-pc .lang{display:inline-flex;align-items:center;gap:6px} .nav-pc .nl svg,.nav-pc .lang svg{width:18px;height:18px;color:var(--sub)} .nav-pc .lang svg{width:16px;height:16px} @media (max-width:1099px){.nav-pc .nl{padding:8px 7px;font-size:13px}.nav-pc .nl svg{width:16px;height:16px}} /* 今日〇人が挑戦 */ .tcount{font-size:13px;font-weight:700;color:#1f8a5b;margin-top:6px} .today .tcount{display:block;color:#ffd96b;font-style:normal;margin-top:4px} .tcount[hidden]{display:none !important} /* クリア画面のシェア（X・Threads・ほか） */ .wshare{margin:14px 0 4px;padding:12px;border:1px solid var(--btnline);border-radius:12px} .wshare .wsh-t{font-weight:700;margin:0 0 8px !important} .wsh-b{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .wsh-b button{flex:1 1 0;min-width:80px;min-height:44px;border-radius:10px;font-weight:700;cursor:pointer;border:1px solid var(--btnline);background:transparent;color:var(--ink)} .wsh-b .shx,.wsh-b .sht{background:#111;color:#fff;border-color:#111} :root[data-theme="dark"] .wsh-b .shx,:root[data-theme="dark"] .wsh-b .sht{background:#fff;color:#111;border-color:#fff} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wsh-b .shx,:root:not([data-theme="light"]) .wsh-b .sht{background:#fff;color:#111;border-color:#fff}} .wshare .wsh-n{font-size:12px !important;color:var(--sub);margin:8px 0 0 !important} /* 解き方のページの図（英語 strategies・10/5） */ .sfig{margin:0 auto;max-width:520px} .sfig figcaption{text-align:center} .sdg{width:100%;height:auto;display:block;font-family:inherit} .sdg .bg{fill:var(--card)} .sdg .unit{fill:var(--peer)} .sdg .pat{fill:var(--same)} .sdg .thn{stroke:var(--line)} .sdg .thk{stroke:var(--thick)} .sdg .lab{font-size:11px;fill:var(--sub);text-anchor:middle} .sdg .gv{font-size:26px;font-weight:700;fill:var(--given);text-anchor:middle} .sdg .fl{font-size:26px;font-weight:500;fill:var(--input);text-anchor:middle} .sdg .ans{font-size:26px;font-weight:700;fill:var(--accent);text-anchor:middle} .sdg .cn{font-size:13px;fill:var(--sub);text-anchor:middle} .sdg .ck{font-size:11.5px;font-weight:700;fill:var(--card);text-anchor:middle} .sdg .kc{fill:var(--accent)} .sdg .ce{font-size:13px;font-weight:700;fill:var(--err);text-anchor:middle} .sdg .cel{stroke:var(--err);stroke-width:1.6} .sfig figcaption{font-size:13px;color:var(--sub);margin-top:8px} .sleg{margin:0 0 4px !important;line-height:1.9} .lg{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:5px;border:1px solid var(--line)} .lg.pat{background:var(--same)} .lg.fl{background:var(--input);border-color:var(--input)} .lg.unit{background:var(--peer)} .lg.ce{background:var(--errbg);border-color:var(--err)} .snote2{display:block} .cta{margin:8px 0 14px;text-align:center} .ctab{display:block;max-width:420px;margin:0 auto;padding:16px 20px;border-radius:12px;color:#fff !important;font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.12)} .ctab:hover{filter:brightness(1.08)} .snav{text-align:center} .tcard .tlv{display:table;margin-top:10px;font-style:normal;font-size:12px;font-weight:700;color:var(--sub);background:var(--peer);border-radius:999px;padding:3px 10px} .sleg .li1{display:inline-block;white-space:nowrap;margin:0 8px} @media(max-width:640px){.cards.tcards{grid-template-columns:1fr}.tcards .tcard{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:start}.tcards .tcard i{grid-row:1/4;margin:0}.tcards .tcard .tlv{margin-top:6px;justify-self:start}} /* キラー数独（10/5）：点線の囲み（ケージ）と合計 */ :root{--kline:#5b6170} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--kline:#8a92a3}} :root[data-theme="dark"]{--kline:#8a92a3} .cell.kc::before{content:"";position:absolute;pointer-events:none;top:-1px;bottom:-1px;left:-1px;right:-1px;border:0 dashed var(--kline)} .cell.kc[data-kc*="t"]::before{top:3px;border-top-width:2px} .cell.kc[data-kc*="b"]::before{bottom:3px;border-bottom-width:2px} .cell.kc[data-kc*="l"]::before{left:3px;border-left-width:2px} .cell.kc[data-kc*="r"]::before{right:3px;border-right-width:2px} .ksum{position:absolute;top:1px;left:2px;z-index:1;font-style:normal;font-weight:700;font-size:clamp(9px,2.5vw,12px);line-height:1;padding:1px;color:var(--ink);background:inherit} .cell.kc{background:var(--card)} .cell.kc.peer{background:var(--peer)} .cell.kc.same{background:var(--same)} .cell.kc.sel{background:var(--sel)} .cell.kc.err{background:var(--errbg)} .cell.kc.incage:not(.sel){background:rgba(180,35,90,.10)} .cell.kc.hl{box-shadow:inset 0 0 0 2px #b4235a} .kboard .kv{position:relative;top:2px} .kboard .notes{inset:13px 3px 3px} .kinfo{min-height:20px;margin:6px 0 0;font-size:13px;color:var(--sub);text-align:center} .levels.k4{grid-template-columns:repeat(4,1fr)} .kboard .cell{font-size:clamp(17px,5.2vw,26px)} .kboard .kv{top:4px} /* ゲームが5つ（10/5 キラー数独を追加）：トップは先頭の数独を2マス分に＝パソコン2+1/3・スマホ2/2/2で余りなし。ほかのゲームの帯は4つ＝パソコン4列 */ .cards.pcards>.gcard:first-child{grid-column:span 2} @media(min-width:900px){.cards.pcards{grid-template-columns:repeat(4,1fr)}.cards.pcards>.gcard:first-child{grid-column:auto}} /* 10/16 チカ「4カードにしたら？3カードだとスクロール長い」＝パソコンは4列・スマホは2列のまま */ @media(min-width:641px){.relband .cards.rel{grid-template-columns:repeat(var(--n,4),1fr)}} .sdg .kl{stroke:var(--kline);stroke-width:1.6;stroke-dasharray:4 3} .sdg .ksm{font-size:11px;font-weight:700;fill:var(--ink)} .levels .ksoon{opacity:.55;cursor:default;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1} .levels .ksoon small{font-size:10px;font-weight:500} .gsw{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 12px}.gsw a,.gsw b{padding:7px 16px;border-radius:999px;border:1px solid var(--btnline);font-size:14px;text-decoration:none;color:var(--ink)}.gsw b{background:var(--ink);color:var(--bg);border-color:var(--ink)} /* トップの「今日の1問」の帯を2つ（数独・キラー数独）：パソコンは横に2つ、スマホは縦に（10/5） */ .today.t2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .today.t2 a.tk i{background:#b4235a} @media(max-width:640px){.today.t2{grid-template-columns:1fr}} /* 上海（麻雀ソリティア）10/6：牌は白い板に厚み（下と右の影）。取れない牌は少し暗く・取れる牌ははっきり */ .mgame{max-width:none} .mwrap{width:100%;overflow:hidden;display:flex;justify-content:center;padding:4px 0 8px} .mwrap.scroll{overflow-x:auto;justify-content:flex-start} .mboard{position:relative;flex:none;margin:0 auto} .mt{position:absolute;padding:0;border:1px solid #b9b3a6;border-radius:calc(var(--tw)*.12);background:linear-gradient(#fffdf7,#f3eee2); box-shadow:calc(var(--tw)*-.08) calc(var(--tw)*.1) 0 #cfc6b4,calc(var(--tw)*-.08) calc(var(--tw)*.1) 1px 1px rgba(0,0,0,.25);cursor:pointer;line-height:0} .mt svg{width:100%;height:100%;display:block} .mt:not(.free){filter:brightness(.82)} .mt.sel{outline:3px solid var(--accent);outline-offset:-2px;background:linear-gradient(#e8f0ff,#d6e3fb)} .mt.hl{outline:3px solid var(--gold);outline-offset:-2px;background:linear-gradient(#fff3d6,#fbe7b5)} .mt.no{animation:mtno .25s} @keyframes mtno{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}} :root[data-theme="dark"] .mt:not(.free){filter:brightness(.7)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mt:not(.free){filter:brightness(.7)}} .levels.m6{grid-template-columns:repeat(6,1fr)} .levels.m6 button{display:flex;flex-direction:column;align-items:center;line-height:1.15} .levels.m6 button small{font-size:10px;opacity:.7;font-weight:500} @media(max-width:640px){.levels.m6{grid-template-columns:repeat(3,1fr)}} .tools.t3{grid-template-columns:repeat(3,1fr)} .wrap.mwide{max-width:1000px} .levels.m3{grid-template-columns:repeat(3,1fr)}.levels.m3 button{display:flex;flex-direction:column;align-items:center;line-height:1.15}.levels.m3 button small{font-size:10px;opacity:.7;font-weight:500} /* 言語の一覧（10/6）：今の言語を押すと全言語。今いる言語は太字・チェック */ .lmenu{margin-left:6px} .lmenu .lang{cursor:pointer;font:inherit;font-size:13px;gap:6px} .lmenu .lang svg:last-child{width:14px;height:14px} .ldrop{min-width:170px!important} .ldrop a[aria-current]{font-weight:800} .ldrop a[aria-current]::after{content:"✓";color:var(--sub)} .dpanel a[aria-current]{font-weight:800} /* ドイツ語は語が長い（10/6 麻雀ランキング@360で「Zwillingsberge」「Schildkröte 05:00」がはみ出した）。日本語・英語の見た目は変えない */ @media (max-width:640px){html[lang=de] .rlv{grid-template-columns:repeat(3,1fr)}html[lang=de] .rtbl td.tbest{white-space:normal}} /* ソリティア（クロンダイク）10/6：カードは数字とマークを大きく（高齢の人でも読める）。緑の台は使わず、サイトの色のまま */ .wrap.kwide{max-width:820px} .kgame{max-width:none} .levels.k2{grid-template-columns:repeat(2,1fr)} .kwrap{width:100%;padding:4px 0 8px} .kld{position:relative;isolation:isolate;width:100%;touch-action:none;user-select:none;-webkit-user-select:none} .kld .slot{position:absolute;border:2px dashed var(--line);border-radius:calc(var(--kw)*.1);box-sizing:border-box} .kld .slot.fd::after{content:attr(data-s);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--kw)*.45);color:var(--line)} .kld .slot.sk.recycle::after{content:"↻";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--kw)*.5);color:var(--sub);cursor:pointer} .kcard{position:absolute;width:var(--kw);height:var(--kh);padding:0;border:1px solid #c9ccd3;border-radius:calc(var(--kw)*.1);background:#fff;color:#1d2433; font-family:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:left .12s,top .12s;overflow:hidden} .kcard.red{color:#c62828} .kcard .kr{position:absolute;left:calc(var(--kw)*.06);top:calc(var(--kw)*.02);font-size:calc(var(--kw)*.38);font-weight:800;line-height:1;letter-spacing:-.05em;display:flex;align-items:center;gap:calc(var(--kw)*.02)} .kcard .kr i{font-style:normal;font-size:calc(var(--kw)*.3);font-weight:400} /* 数字を大きく・マークは数字の横（読者チェック 10/6：390pxで数字が小さい） */ .kcard .kb{position:absolute;left:0;right:0;bottom:calc(var(--kh)*.1);text-align:center;font-size:calc(var(--kw)*.5);line-height:1;font-weight:700} .kcard.back{background:repeating-linear-gradient(45deg,#4f46e5 0 6px,#6366f1 6px 12px);border-color:#3730a3} .kcard.hl{outline:3px solid var(--gold);outline-offset:-1px;background-color:#fff3d6} .kcard.lift{transition:none;box-shadow:0 8px 18px rgba(0,0,0,.3)} .kcard.no{animation:mtno .25s} .tools .kauto{background:var(--gold);color:#fff;border-color:var(--gold)} :root[data-theme="dark"] .kcard:not(.back){background:#f2f2f2} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kcard:not(.back){background:#f2f2f2}} .kgame .tools.t3:has(#kauto:not([hidden])) #kre{display:none} /* 片付けが出たら「最初から」と入れ替え */ .kld .slot.sk.hl{outline:3px solid var(--gold);outline-offset:-2px} @media(max-width:430px){.kgame .bar #t-lvname{display:none}} /* 狭い画面ではルール名を隠す（上の切り替えで分かる・英語の Draw 3 が折れた） */ /* ソリティアの台を緑のフェルトに（10/6 チカ「カジノで使う緑に」）。枠の点線と組札のマークは緑の上で見える明るさに */ .kgame .kwrap{background:radial-gradient(ellipse at 50% 30%,#1f7a4d 0%,#176a41 55%,#115234 100%);border-radius:14px;padding:10px 8px 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 2px 10px rgba(0,0,0,.25)} .kgame .kld .slot{border-color:rgba(255,255,255,.35)} .kgame .kld .slot.fd::after{color:rgba(255,255,255,.35)} .kgame .kld .slot.sk.recycle::after{color:rgba(255,255,255,.75)} .kgame .kcard{border-color:#9aa3ad;box-shadow:0 1px 3px rgba(0,0,0,.35)} .kgame .kcard.back{background:repeating-linear-gradient(45deg,#7f1d1d 0 6px,#991b1b 6px 12px);border-color:#5b1414;outline:2px solid #fff;outline-offset:-4px} /* スパイダー（10/6）：10列なのでカードが小さい。重なって見える上の端の数字を大きめに。要素は並べた順に割り当て直すので動きの演出は付けない */ .sgame .kcard{transition:none} .sgame .kcard .kr{font-size:calc(var(--kw)*.44*var(--kfs,1));left:calc(var(--kw)*.05)} .sgame .kcard .kr i{font-size:calc(var(--kw)*.34)} .sgame .kcard .kb{font-size:calc(var(--kw)*.55)} .sgame .kld .slot.fd8{border-style:dashed} .sgame .kld .slot.sk.hl{outline:3px solid var(--gold);outline-offset:-2px} @media(max-width:430px){.sgame .bar{font-size:12px}} /* フリーセル（10/6）：空きマスの枠 */ .fgame .kld .slot.fcell{border-style:solid;border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.08)} .fgame .kcard .kr{font-size:calc(var(--kw)*.4*var(--kfs,1))} /* ピラミッド・ゴルフ・トライピークスもソリティアと同じ緑の台（10/14 チカ「盤面緑の方が良くない？」＝ .kgame を付けた）。空の枠の点線は緑の上で見える白、ヒントの枠は緑に埋もれないよう黄色 */ .kgame #pyboard .kcard.empty,.kgame #gfboard .kcard.empty,.kgame #tpboard .kcard.empty{border-color:rgba(255,255,255,.55);color:rgba(255,255,255,.8)} .kgame #pyboard .kcard.tip,.kgame #gfboard .kcard.tip,.kgame #tpboard .kcard.tip{outline:3px solid #facc15;outline-offset:-1px} /* 神経衰弱 10/14（緑の台＝.kgame。上は段の選び方＋手数・残り・時間。取ったカードはうすく残す） */ .mmwrap{max-width:760px}.mmwrap .game{width:100%;max-width:760px} .mmopts{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:6px;margin-bottom:8px;align-items:stretch} .mmopts select{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:8px 6px;min-width:0;width:100%} .mmopts > span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 4px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;display:flex;align-items:center;justify-content:center} @media(max-width:520px){.mmopts{grid-template-columns:.8fr 1.4fr auto}.mmopts label{grid-column:1/-1}.mmopts > span{font-size:13px}} #mmboard{position:relative;width:100%;isolation:isolate} #mmboard .kcard{transition:transform .15s} #mmboard .kcard.gone{opacity:.35;cursor:default} /* 絵合わせ 10/14（神経衰弱と同じ台。上はテーマ・段の選び方＋手数・残り・時間。絵は絵文字を大きく） */ .mtwrap{max-width:760px}.mtwrap .game{width:100%;max-width:760px} .mtopts{display:grid;grid-template-columns:1fr 1.3fr .8fr 1.1fr auto;gap:6px;margin-bottom:8px;align-items:stretch} .mtopts select{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:8px 6px;min-width:0;width:100%} .mtopts > span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 4px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;display:flex;align-items:center;justify-content:center} @media(max-width:640px){.mtopts{grid-template-columns:.8fr 1.4fr auto}.mtopts .mtsel:first-child{grid-column:1/2}.mtopts .mtsel:nth-child(2){grid-column:2/-1}.mtopts > span{font-size:13px}} #mtboard{position:relative;width:100%;isolation:isolate} #mtboard .kcard{display:flex;align-items:center;justify-content:center} #mtboard .kcard .emo{font-size:calc(var(--kw)*.62);line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif} #mtboard .kcard.gone{opacity:.35;cursor:default} /* ノノグラム 10/14（盤は grid。5マスごとに太線。そろった手がかりはうすく。塗る＝濃い色・✕＝灰色の×） */ .ngwrap{max-width:820px}.ngwrap .game{width:100%;max-width:820px} .ngopts{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:6px;margin-bottom:8px;align-items:stretch} .ngopts select{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:8px 6px;min-width:0;width:100%} .ngopts button,.ngopts > span{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:8px 4px;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums} .ngopts button{cursor:pointer}.ngopts button:disabled{opacity:.45;cursor:default} .ngopts #ngmode.xon{background:#475569;color:#fff;border-color:#475569} @media(max-width:480px){.ngopts{grid-template-columns:1.2fr 1fr auto}.ngopts label{grid-column:1/-1}.ngopts button,.ngopts > span{font-size:13px}} /* スマホは大きさの選び方を1段に・ボタン3つを下の段に（仏・独などで切れた 10/14） */ .ngscroll{overflow-x:auto;padding:2px 0 6px;display:flex;justify-content:safe center} /* 入りきらない時（スマホの20×20）は横に送れる。マスの上は塗る、数字の所でなぞると送れる */ #ngboard{display:grid;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums;width:max-content} #ngboard .ngcorner{} #ngboard .ngcc{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:1px;padding-bottom:3px;font-size:calc(var(--cs)*.42);font-weight:700;color:var(--ink);line-height:1.05} #ngboard .ngrc{display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--cs)*.22);padding-right:4px;font-size:calc(var(--cs)*.42);font-weight:700;color:var(--ink)} #ngboard .ngcc.ok,#ngboard .ngrc.ok{opacity:.35} #ngboard .ngc{touch-action:none;background:#fff;border-right:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1;cursor:pointer;position:relative} #ngboard .ngc[data-i]:nth-child(1){} #ngboard .ngc.bR{border-right:2px solid #475569} #ngboard .ngc.bB{border-bottom:2px solid #475569} #ngboard .ngc.on{background:#1e293b} #ngboard .ngc.x::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:calc(var(--cs)*.6)} #ngboard.solved .ngc{border-color:transparent}#ngboard.solved .ngc.on{background:#0f766e} /* 迷路 10/14（盤は canvas。印刷する時は迷路の画像だけを出す） */ .mzwrap{max-width:820px}.mzwrap .game{width:100%;max-width:820px} .mzopts{display:grid;grid-template-columns:1.1fr 1.2fr .9fr auto;gap:6px;margin-bottom:8px;align-items:stretch} .mzopts select{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:8px 6px;min-width:0;width:100%} .mzopts button,.mzopts > span{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:8px 4px;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums} .mzopts button{cursor:pointer}.mzopts button:disabled{opacity:.45;cursor:default} @media(max-width:480px){.mzopts{grid-template-columns:1.2fr 1fr auto}.mzopts label{grid-column:1/-1}.mzopts button,.mzopts > span{font-size:13px}} .mzbox{display:flex;justify-content:center;padding:2px 0 8px} @media(max-width:480px){.mzgame{padding-left:5px;padding-right:5px}} /* スマホは迷路を横いっぱいに（縦長30×53で1マス11px・10/15） */ #mzcanvas{touch-action:none;display:block;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.15)} .mzimg{display:none} .mzclip{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.15);touch-action:none}.mzclip #mzcanvas{transform-origin:0 0;box-shadow:none;border-radius:0} .mzbar{position:absolute;background:rgba(15,23,42,.10);touch-action:none;cursor:pointer}.mzbar[hidden]{display:none}.mzbar-v{right:0;top:0;bottom:24px;width:24px}.mzbar-h{left:0;bottom:0;right:24px;height:24px} /* 拡大中に1本の指で見る場所を動かす帯（10/15） */ .mzbar i{position:absolute;display:block;background:rgba(37,99,235,.55);border-radius:12px}.mzbar-v i{left:4px;right:4px}.mzbar-h i{top:4px;bottom:4px} /* ピンチの拡大は枠の中だけ（10/15） */ .mzhint{font-size:13px;color:var(--sub);text-align:center;margin:0 0 8px}.mzhint[hidden]{display:none} /* 大きい迷路の「はらう」の説明（§62） */ @media print{body.mzp *{visibility:hidden}body.mzp .mzimg{visibility:visible;display:block;position:absolute;left:0;top:0;width:100%;height:auto}} /* 迷路の「印刷」を押した時だけ（body.mzp）。ほかのページ（数独の印刷など）の印刷には効かない */ /* スマホではトランプの台を画面の端まで広げる（10/6 チカ「スマホだとちょっと小さい？」）：ページ16px＋枠15pxの余白を台だけ外へ出す＝カードが約2割大きくなる。数字も少し大きく */ @media(max-width:640px){ .kgame .kwrap{width:auto;margin-left:-31px;margin-right:-31px;border-radius:0;padding:8px 3px 10px} .kgame:not(.sgame):not(.fgame) .kcard .kr{font-size:calc(var(--kw)*.42)} .fgame .kcard .kr{font-size:calc(var(--kw)*.44*var(--kfs,1))} } /* 意見箱（10/6） */ .fb{display:grid;gap:16px;max-width:640px;margin:0 auto} .fb label{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--ink)} .fb select,.fb input,.fb textarea{width:100%;border:1px solid var(--btnline);background:var(--card);color:var(--ink);border-radius:10px;padding:11px 12px;font:inherit;font-size:16px;font-weight:400} .fb textarea{min-height:240px;resize:vertical;line-height:1.7} .fb .fcount,.fb .note{text-align:left;font-size:12px;font-weight:400;color:var(--sub)} .fb .fcount{justify-self:end} .fb .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .fb button,.fbok button{border:none;border-radius:12px;padding:13px 0;font-size:15px;font-weight:700;cursor:pointer;background:var(--accent);color:#fff;width:100%;max-width:640px} .fb button:disabled{opacity:.6;cursor:default} .fb .ferr{color:var(--err);font-size:14px;font-weight:700} .fbok{max-width:640px;margin:0 auto;display:grid;gap:14px} .fbok p{font-size:15px;line-height:1.8} .fbok button{background:var(--btn);color:var(--ink);border:1px solid var(--btnline)} :root[data-theme="dark"] .fb button{color:#14171d} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fb button{color:#14171d}} /* ポーランド語（10/6）：段の名前が長い（Ekstremalny）→ スマホでは段を3列×2段に。ランキングの見出しも折り返す（360pxで2px・18pxはみ出していた） */ @media (max-width:640px){html[lang=pl] .levels,html[lang=pl] .rlv{grid-template-columns:repeat(3,1fr)}html[lang=pl] .rtbl th{white-space:normal;hyphens:auto}html[lang=pl] .rtbl td.tbest{white-space:normal}} /* 日本語以外はその国の標準の文字を先に（ヒラギノが先だと ń の点が離れて描かれる環境があった・10/6） */ html:not([lang=ja]),html:not([lang=ja]) body{font-family:-apple-system,system-ui,"Segoe UI",Roboto,"Noto Sans",sans-serif} @media (max-width:640px){html[lang=pl] .tools button{font-size:12px}} /* hidden を付けた部品は、見た目の指定（display:grid・flex 等）より優先して必ず隠す（10/6：ご意見・ご要望の「届きました」と、トランプの設定に数独専用の項目が出ていた） */ [hidden]{display:none!important} /* フランス語（10/7）：ランキングの「Record」列の段の名前（Tirer 3 cartes）が長い → 見出しと記録の列を折り返す（360pxで7pxはみ出していた） */ @media (max-width:640px){html[lang=fr] .rlv{grid-template-columns:repeat(3,1fr)}html[lang=fr] .rtbl th{white-space:normal;hyphens:auto}html[lang=fr] .rtbl td.tbest{white-space:normal}} /* 印刷ハブ（10/7）：段ごとのPDFのボタン・紹介用リンクのコピー欄 */ .pdfs{display:grid;gap:8px;margin:10px 0 14px} .pdfrow{display:grid;grid-template-columns:6em 1fr 1fr;gap:8px;align-items:center} .pdfrow b{font-size:15px} .pdfl{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--btnline);background:var(--card);color:var(--ink);border-radius:10px;padding:9px 6px;text-decoration:none;font-weight:700;font-size:14px;min-width:0} .pdfl span{font-size:11px;font-weight:400;color:var(--sub)} .pdfl:hover{border-color:var(--accent)} .pcode{display:flex;gap:8px;align-items:stretch;margin-top:8px} .pcode code{flex:1;min-width:0;overflow-wrap:anywhere;background:var(--card);border:1px solid var(--btnline);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5} .pcode button{flex:none;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:0 14px;font-weight:700;cursor:pointer} /* 貼れる部品の中（10/7）：余白を詰める・下に小さく出典 */ .emb .wrap{padding-top:8px} .eby{text-align:center;font-size:12px;margin:6px 0 10px}.eby a{color:var(--sub)} .emb .game .note{display:none} html:has(body.emb),body.emb{background:transparent} /* 部品の中ではランキングへの名前の登録・共有を出さない（10/7 子ども向けのサイトに貼られても名前が公開されないように） */ .emb #w-nick,.emb #w-share,.emb #w-rank,.emb .wlink{display:none!important} /* ミニ数独（10/7）：4×4・6×6 */ .mnlv{grid-template-columns:repeat(2,1fr)} .mnboard{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr));aspect-ratio:1/1;background:var(--card);border:2px solid var(--thick);border-radius:6px;overflow:hidden;user-select:none;max-width:380px;margin:0 auto} .mncell{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(26px,9vw,44px);font-weight:600;color:var(--input);cursor:pointer;min-width:0;min-height:0} .mncell.bl{border-left:2px solid var(--thick)}.mncell.bt{border-top:2px solid var(--thick)} .mncell.given{color:var(--given);font-weight:700} .mncell.sel{background:var(--sel)}.mncell.same{background:var(--same)}.mncell.err{color:var(--err);background:var(--errbg)} .mntools{grid-template-columns:repeat(2,1fr);max-width:380px;margin:10px auto 0} .mnpad{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px;max-width:380px;margin:10px auto 0} .mnpad button{border:1px solid var(--btnline);background:var(--btn);color:var(--input);border-radius:10px;padding:12px 0;font-size:24px;font-weight:700;cursor:pointer} .mnwin{text-align:center;margin-top:12px}.mnwin p{font-size:18px;font-weight:800;margin-bottom:6px} .mncell.nr{border-right:none}.mncell.nb{border-bottom:none} /* ハーツ（10/7）：名前は ht* （既存とぶつからないことを確認済み） */ .htwrap{max-width:560px} .htscores{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px} .htscores div{display:flex;flex-direction:column;align-items:center;border:1px solid var(--btnline);border-radius:10px;padding:5px 0;background:var(--btn)} .htscores div span{font-size:12px;color:var(--sub)}.htscores div b{font-size:18px} .htscores div.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} .httable{position:relative;height:280px;border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#1f7a4d 0%,#176a41 55%,#115234 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)} .htseat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-size:12px} .htseat em{font-style:normal;font-weight:800;font-size:15px;background:rgba(0,0,0,.25);border-radius:8px;padding:1px 8px} .htseat.s2{top:8px;left:50%;transform:translateX(-50%)}.htseat.s1{left:8px;top:50%;transform:translateY(-50%)}.htseat.s3{right:8px;top:50%;transform:translateY(-50%)} .httrick{position:absolute;left:50%;top:50%;width:170px;height:170px;transform:translate(-50%,-42%)} .httrick .htc{position:absolute;--cw:50px} .httrick .p0{left:60px;bottom:0}.httrick .p1{left:0;top:52px}.httrick .p2{left:60px;top:0}.httrick .p3{right:0;top:52px} .htc{flex:none;width:var(--cw,56px);height:calc(var(--cw,56px)*1.4);padding:0;border:1px solid #c9ccd3;border-radius:calc(var(--cw,56px)*.12);background:#fff;color:#1d2433;cursor:pointer;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.18);font-family:inherit;transition:transform .12s} .htc.red{color:#c62828} .htc b{position:absolute;left:calc(var(--cw,56px)*.08);top:calc(var(--cw,56px)*.04);font-size:calc(var(--cw,56px)*.36);font-weight:800;line-height:1} .htc i{position:absolute;left:0;right:0;bottom:calc(var(--cw,56px)*.14);text-align:center;font-style:normal;font-size:calc(var(--cw,56px)*.5);line-height:1} .htc:disabled{cursor:default} .htmsg{min-height:1.6em;text-align:center;font-size:14px;font-weight:700;margin:8px 0 2px;color:var(--ink)} .hthand{display:flex;justify-content:center;padding:16px 0 10px;min-height:110px} .hthand .htc+.htc{margin-left:calc(var(--ov,0px)*-1)} .hthand .htc.up{transform:translateY(-14px);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .hthand .htc.dim{filter:brightness(.72);cursor:not-allowed} .hthand .htc.no{animation:mtno .25s} .httbl td,.httbl th{text-align:center}.httbl tr.me td{font-weight:800} .htscores div small{font-size:12px;font-weight:800;color:#c62828;min-height:1.1em;line-height:1.1} @media (max-width:350px){.httrick{transform:translate(-50%,-42%) scale(.88)}} /* フランス語の上の帯（10/7）：Classement・Réglages が長く、320px で ≡ が16pxはみ出していた */ /* 上の帯のアイコンの字が長い言語（仏・伊…）で≡が押し出される（10/6 仏16px・10/8 伊29px）→ 日英以外はまとめて詰める（言語を足すたびに直さない） */ @media (max-width:360px){html:not([lang=ja]):not([lang=en]) .sp-ico a,html:not([lang=ja]):not([lang=en]) .sp-ico button{min-width:0;padding:4px 2px 2px}html:not([lang=ja]):not([lang=en]) .sp-ico span{font-size:9px}} /* スペード（10/7）：名前は spd* （既存とぶつからないことを確認済み）。カード・台・手札はハーツ（ht*）と共通 */ .spdscores{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px} .spdscores div{display:flex;flex-direction:column;align-items:center;border:1px solid var(--btnline);border-radius:10px;padding:5px 0;background:var(--btn)} .spdscores div.me{border-color:var(--accent)} .spdscores span{font-size:12px;color:var(--sub)}.spdscores b{font-size:20px}.spdscores small{font-size:11px;color:var(--sub)} .spdgame .htseat small{font-size:11px;background:rgba(0,0,0,.25);border-radius:6px;padding:0 6px;min-height:1.2em;white-space:nowrap} .spdme{text-align:center;font-size:13px;color:var(--sub);min-height:1.3em;margin:0} .spdbid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:8px 0} .spdbid button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:9px;padding:9px 0;font-size:15px;font-weight:700;cursor:pointer;min-width:0} .spdlines{font-size:13px;line-height:1.7} @media (max-width:360px){.sleg .li1{white-space:normal}} /* 解き方の図の凡例が320pxで7pxはみ出していた（10/7） */ /* スペードの席の「ビッド・取った」が場の札に重なっていた（10/7）→ 左右は2行に折り返し・台を高く・場を下げる */ .spdgame .httable{height:310px} .spdgame .htseat.s1 small,.spdgame .htseat.s3 small{white-space:normal;max-width:62px;text-align:center;line-height:1.3} .spdgame .httrick{transform:translate(-50%,-36%)} @media (max-width:350px){.spdgame .httrick{transform:translate(-50%,-36%) scale(.86)}} .spdgame .htseat.s1,.spdgame .htseat.s3{top:10px;transform:none} /* オランダ語（10/7）：computertegenstanders のような長い合成語でゲームのカードが320pxで29pxはみ出した → カードの説明は単語の途中でも折り返す */ .gcard{min-width:0}.gcard span,.gcard b{overflow-wrap:break-word;hyphens:auto} /* ランキングの表の折り返し（仏と同じ）を蘭・土にも */ @media (max-width:640px){html[lang=nl] .rlv,html[lang=tr] .rlv{grid-template-columns:repeat(3,1fr)}html[lang=nl] .rtbl th,html[lang=tr] .rtbl th{white-space:normal;hyphens:auto}html[lang=nl] .rtbl td.tbest,html[lang=tr] .rtbl td.tbest{white-space:normal}} /* リバーシ（10/7）：名前は rv* （既存とぶつからないことを確認済み） */ .rvwrap{max-width:520px} .rvopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .rvopts label{display:flex;flex-direction:column;gap:3px;min-width:0} .rvopts span{font-size:12px;color:var(--sub)} .rvopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .rvscore{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .rvscore div{display:flex;align-items:center;gap:8px;border:1px solid var(--btnline);border-radius:10px;padding:6px 10px;background:var(--btn);min-width:0} .rvscore div.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} .rvscore i{flex:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111);box-shadow:0 1px 2px rgba(0,0,0,.4)} .rvscore .w i{background:radial-gradient(circle at 35% 30%,#fff,#d9dce1);border:1px solid #b9bec7} .rvscore span{flex:1;min-width:0;font-size:13px;line-height:1.25}.rvscore small{display:block;font-size:11px;color:var(--sub)} .rvscore b{font-size:22px} .rvboard{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:6px;border-radius:12px;background:#0d4f30;aspect-ratio:1/1;max-width:480px;margin:0 auto} .rvsq{position:relative;border:0;padding:0;margin:0;background:#1f8a5b;border-radius:3px;aspect-ratio:1/1;cursor:default;min-width:0} .rvsq:not(:disabled){cursor:pointer} .rvsq i{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111);box-shadow:0 2px 3px rgba(0,0,0,.45)} .rvsq.w i{background:radial-gradient(circle at 35% 30%,#fff,#d9dce1)} .rvsq.can::after{content:"";position:absolute;inset:38%;border-radius:50%;background:rgba(0,0,0,.28)} .rvsq.can:hover::after{inset:14%;background:rgba(0,0,0,.18)} .rvsq.last::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:16%;height:16%;transform:translate(-50%,-50%);border-radius:50%;background:#e53935} .rvsq.fl i{animation:rvfl .32s ease-out} @keyframes rvfl{0%{transform:scaleX(.1)}100%{transform:scaleX(1)}} .rvmsg{min-height:1.6em;text-align:center;font-size:14px;font-weight:700;margin:8px 0 2px;color:var(--ink)} .rvtools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .rvtools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .rvtools button:disabled{opacity:.45;cursor:default} .rvtools button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)} .rvgame .new{margin-top:12px} .rvtm{font-size:12px;color:var(--sub)} @media (prefers-reduced-motion:reduce){.rvsq.fl i{animation:none}} /* チェッカー（10/8）：欄・駒の数・ボタン・時間・成績の見た目はリバーシと同じ（ck*）。盤だけ別 */ .ckwrap{max-width:520px} .ckopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .ckopts label{display:flex;flex-direction:column;gap:3px;min-width:0} .ckopts span{font-size:12px;color:var(--sub)} .ckopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .ckscore{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .ckscore div{display:flex;align-items:center;gap:8px;border:1px solid var(--btnline);border-radius:10px;padding:6px 10px;background:var(--btn);min-width:0} .ckscore div.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} .ckscore i{flex:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111);box-shadow:0 1px 2px rgba(0,0,0,.4)} .ckscore .w i{background:radial-gradient(circle at 35% 30%,#fff,#d9dce1);border:1px solid #b9bec7} .ckscore span{flex:1;min-width:0;font-size:13px;line-height:1.25} .ckscore b{font-size:22px} .ckmsg{min-height:1.6em;text-align:center;font-size:14px;font-weight:700;margin:8px 0 2px;color:var(--ink)} .cktools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .cktools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .cktools button:disabled{opacity:.45;cursor:default} .cktools button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)} .ckgame .new{margin-top:12px} .cktime{text-align:right;font-size:13px;color:var(--sub);margin:0 2px 4px;font-variant-numeric:tabular-nums} .ckstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} @media (max-width:520px){.ckopts{grid-template-columns:1fr;gap:6px}.ckopts label{flex-direction:row;align-items:center;gap:8px}.ckopts span{flex:none;width:6.5em;line-height:1.3}.ckopts select{flex:1}} .ckboard{display:grid;grid-template-columns:repeat(8,1fr);padding:6px;border-radius:12px;background:#5b3a1f;aspect-ratio:1/1;max-width:480px;margin:0 auto} .cksq{position:relative;border:0;padding:0;margin:0;aspect-ratio:1/1;min-width:0;cursor:default} .cksq.lt{background:#f0d9b5}.cksq.dk{background:#b58863} .cksq:not(:disabled){cursor:pointer} .cksq i{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111);box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 0 0 3px rgba(255,255,255,.08)} .cksq.w i{background:radial-gradient(circle at 35% 30%,#fff,#d9dce1);box-shadow:0 2px 3px rgba(0,0,0,.35),inset 0 0 0 3px rgba(0,0,0,.06)} .cksq.kg i::after{content:"♛";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,4.2vw,24px);color:#e0b43c;line-height:1} .cksq.w.kg i::after{color:#b8860b} .cksq.can i{box-shadow:0 0 0 3px #facc15,0 2px 3px rgba(0,0,0,.45)} .cksq.sel i{box-shadow:0 0 0 4px #22c55e,0 2px 3px rgba(0,0,0,.45)} .cksq.tgt::after{content:"";position:absolute;inset:36%;border-radius:50%;background:rgba(34,197,94,.75)} .cksq.via{box-shadow:inset 0 0 0 3px rgba(34,197,94,.7)} .cksq.last{box-shadow:inset 0 0 0 3px rgba(229,57,53,.75)} @media (max-width:360px){.ckwrap{padding-left:6px;padding-right:6px}.ckboard{padding:3px;border-radius:8px}} @media (max-width:520px){.rvopts{grid-template-columns:1fr;gap:6px}.rvopts label{flex-direction:row;align-items:center;gap:8px}.rvopts span{flex:none;width:6.5em;line-height:1.3}.rvopts select{flex:1}} /* スマホで欄の文字が切れていた（10/7・7言語とも）→ 縦2段で欄を広く */ @media (max-width:360px){.rvwrap{padding-left:6px;padding-right:6px}.rvboard{padding:3px;gap:1px;border-radius:8px}} /* 320pxでマスが29pxだった（10/7） */ .rvtime{text-align:right;font-size:13px;color:var(--sub);margin:0 2px 4px;font-variant-numeric:tabular-nums} .rvstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} #rvresTime{font-variant-numeric:tabular-nums} /* 1〜2文字だけ次の行に落ちる折り返しを防ぐ（10/7 高齢者の脳トレ プリントの写真で「答えつ／き）」「ん。」を見つけた）。対応していないブラウザは今までどおり */ h1,h2,h3{text-wrap:balance} .sec p,.sec li,.lead,.note,details p{text-wrap:pretty} /* 印刷・脳トレのページのブロック（10/7）：名前は lp* （既存とぶつからないことを確認済み） */ .lpi{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)} .sec .lpcards,.sec .lpsteps{list-style:none;padding:0;margin:12px 0 0} .lpcards{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:720px){.lpcards{grid-template-columns:repeat(var(--n,2),1fr)}} .lpcards li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--btnline);background:var(--btn);border-radius:12px;padding:14px;margin:0} .lpcards p,.lpsteps p{margin:0;line-height:1.7} .lpsteps{display:grid;gap:10px} .lpsteps li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--btnline);background:var(--btn);border-radius:12px;padding:14px 14px 14px 12px;margin:0;position:relative} .lpn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font-size:14px;display:inline-flex;align-items:center;justify-content:center;margin-top:6px} .lpterms{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px} @media (min-width:720px){.lpterms{grid-template-columns:1fr 1fr}} .lpok,.lpng{border-radius:12px;padding:14px 16px;border:1px solid} .lpok{border-color:color-mix(in srgb,#1f8a5b 35%,transparent);background:color-mix(in srgb,#1f8a5b 6%,transparent)} .lpng{border-color:color-mix(in srgb,#b45309 35%,transparent);background:color-mix(in srgb,#b45309 6%,transparent)} .lpok h3,.lpng h3{display:flex;align-items:center;gap:10px;font-size:16px;margin:0 0 8px} .lpok h3 .lpi,.lpng h3 .lpi{width:30px;height:30px;border-radius:50%} .lpok ul,.lpng ul{margin:0;padding-left:1.2em}.lpok li,.lpng li{margin:6px 0;line-height:1.7} /* 関連ページのリンク（10/7）：「もっと見る」でたたまず、ボタンの上に小さいボタンで並べる */ .pzrel{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:0 auto;padding:22px 16px 0} /* 10/7 チカ「色全部同じでもっと見るがわからん」→ リンクは枠なし・薄い青の背景に青い文字。「もっと見る」は白いボタン＋▼ */ .pzrel a{display:inline-flex;align-items:center;border:0;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;text-decoration:none;line-height:1.3} .pzrel a:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)} .more::after{content:"";display:inline-block;width:7px;height:7px;margin:0 0 3px 10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);vertical-align:middle} .more[aria-expanded=true]::after{transform:rotate(-135deg);margin-bottom:-2px} /* ランキングの「勝ちに行く」（10/7）：あなたの順位のすぐ下。金色で目立たせる */ .rgo{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--gold);color:#fff;border-radius:14px;padding:12px 16px;margin:10px 0 14px;text-decoration:none;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.15)} .rgo[hidden]{display:none} .rgo span{font-size:14px;font-weight:700;line-height:1.5} .rgo b{font-size:18px;font-weight:800} .rgo:hover{filter:brightness(1.05)} /* ランキングの表（10/7）：名前なしの人も並ぶようになり、名前の列が幅を取りすぎて、スマホで見出しが1文字ずつ縦に折れた → 名前の列に上限（長い名前は…）・見出しは言葉の途中で折らない */ @media (max-width:640px){.rtbl td:nth-child(2){width:auto;max-width:7.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}html[lang=ja] .rtbl th{word-break:keep-all}} @media (max-width:360px){.rtbl th,.rtbl td{padding:6px 3px;font-size:11px}.rtbl td:nth-child(2){max-width:6em;white-space:normal;word-break:break-all;overflow:visible}.rtbl th{hyphens:auto}} /* ランキングの表（10/7 チカ）：PCは広い表で全部の列を1行に。スマホは1人2行（名前の下に小さく残りの列）＝見出しが縦に折れない */ .rmeta{display:none} @media (min-width:900px){.wrap.rk{max-width:760px}} @media (max-width:640px){ .rtbl th:nth-child(n+4),.rtbl td:nth-child(n+4){display:none} .rtbl td.rnm{max-width:none;white-space:normal;word-break:break-all;overflow:visible;width:100%} .rmeta{display:block;font-size:11px;font-weight:400;color:var(--sub);margin-top:3px;white-space:normal;word-break:normal;line-height:1.4} .rtbl td.rv{font-size:16px;font-weight:800} .rtbl th{white-space:nowrap} } /* 国・地域（10/7）：名前の欄の下で選ぶ・ランキングの名前の前に国旗 */ .ccsel{width:100%;border:1px solid var(--btnline);background:var(--bg);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:15px;margin-top:8px;font-family:inherit} .nrow{flex-wrap:wrap}.nrow input{flex:1 1 60%}.nrow .ccsel{order:3;flex:1 1 100%;margin-top:0} .rflag{width:20px;height:15px;border-radius:2px;vertical-align:-2px;margin-right:6px;box-shadow:0 0 0 1px rgba(0,0,0,.12);object-fit:cover} /* 数独の段が7つに（10/8 激ムズ）：6列・3列だと1つ余る（6＋1・3＋3＋1）→ どの言語も4列（4＋3） */ .levels.l7,.rlv.l7,html[lang] .levels.l7,html[lang] .rlv.l7{grid-template-columns:repeat(4,1fr)} @media (max-width:360px){.levels.l7 button,.rlv.l7 button{font-size:11px;white-space:normal;line-height:1.2;padding:8px 2px;hyphens:auto}} .ckscore small{display:block;font-size:11px;color:var(--sub)} /* 「あなた」「相手」を色の名前の下に（10/8・写した時に漏れていた） */ .cksq i{inset:14%} /* 国を文字で探す（10/8）：欄に国旗と名前・打つと候補 */ .cchide{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none} .ccbox{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--btnline);background:var(--bg);border-radius:10px;padding:0 12px;margin-top:8px;width:100%} .nrow .ccbox{order:3;flex:1 1 100%;margin-top:0} .ccbox .ccf .rflag{margin:0;display:block} .ccq{flex:1;min-width:0;border:0!important;background:transparent!important;padding:10px 0!important;font-size:15px;color:var(--ink);font-family:inherit;outline:none} .cclist{position:absolute;left:0;right:0;top:100%;z-index:20;list-style:none;margin:4px 0 0;padding:4px;background:var(--card);border:1px solid var(--btnline);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.15);max-height:280px;overflow:auto} .cclist li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:15px} .cclist li .rflag{margin:0} .cclist li.on,.cclist li:hover{background:var(--sel)} /* クリアを褒める（10/8）：見出しの下の一言が弾む＋紙吹雪（画面の上から落ちる・押しても邪魔にならない） */ .cheer,.modal .box p.cheer{margin:.2rem 0 .5rem;font-weight:800;font-size:1.25rem;color:var(--gold);text-align:center} .cheer.soft,.modal .box p.cheer.soft{color:var(--sub);font-size:1.05rem;font-weight:700} .cheer.pop{animation:cheerpop .6s cubic-bezier(.2,1.6,.4,1) both} @keyframes cheerpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}} .confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999} .confetti i{position:absolute;top:-14px;width:8px;height:14px;border-radius:2px;opacity:.95;animation-name:confall;animation-timing-function:cubic-bezier(.25,.6,.5,1);animation-fill-mode:forwards} @keyframes confall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x),105vh) rotate(var(--r));opacity:.9}} @media (prefers-reduced-motion: reduce){.cheer.pop{animation:none}} /* ランキングの「もっと見る」（10/9）：表の最後の行に横いっぱいのボタン */ .rtbl tr.rmore td{padding:10px 0 2px;text-align:center !important} .rtbl tr.rmore button{width:100%;padding:10px 12px;border:1px solid var(--btnline);border-radius:10px;background:var(--btn);color:var(--accent);font-weight:700;font-size:14px;cursor:pointer} .rtbl tr.rmore button:hover{border-color:var(--accent)} /* バックギャモン（10/9）：盤は上下2段×（6点・バー・6点・上がり）。駒は点の幅いっぱいの丸、5個より多い時は一番上に数 */ .bgwrap{max-width:640px} .bgopts{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin-bottom:8px} .bgopts label{display:flex;flex-direction:column;gap:3px;min-width:0} .bgopts span{font-size:12px;color:var(--sub)} .bgopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .bgopts .cktime{margin:0 0 8px} .bgtop{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;margin-bottom:6px} .bgdice{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex:none} .bgdice .who{font-size:13px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--peer)} .bgdice .who.w{color:var(--ink)} .bgdice .who.r{color:#b91c1c} .bgdie{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:32px;height:32px;padding:4px;border-radius:7px;background:#fff;border:1px solid #c9c4b8;box-shadow:0 1px 2px rgba(0,0,0,.15)} .bgdie i{width:6px;height:6px;border-radius:50%;background:#1d2433;margin:auto} .bgdie b{width:6px;height:6px} .bgdie.used{opacity:.3} .bgpips{font-size:12px;color:var(--sub);margin:0;text-align:right;min-width:0;flex:1 1 auto} .bgboard{--bw:#7a4a1e;--bf:#e9d3a8;--pa:#a0522d;--pb:#d9b67c;background:var(--bw);border-radius:12px;padding:6px;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px;aspect-ratio:13.6/11.6;user-select:none;-webkit-user-select:none} .bgh{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) .75fr repeat(6,minmax(0,1fr)) .85fr;grid-template-rows:100%;height:100%;background:var(--bf);border-radius:6px;min-height:0;overflow:hidden} .bgpt,.bgbar,.bgoff{position:relative;height:100%;align-self:stretch;box-sizing:border-box;border:0;background:none;padding:0;margin:0;min-width:0;min-height:0;font:inherit;color:inherit;cursor:pointer} .bgpt .tri{position:absolute;inset:0 4%;background:var(--pa)} .bgpt.b .tri{background:var(--pb)} .bgpt.top .tri{clip-path:polygon(0 0,100% 0,50% 86%)} .bgpt.bot .tri{clip-path:polygon(0 100%,100% 100%,50% 14%)} .bgpt .stk,.bgbar .stk{position:absolute;left:0;right:0;display:flex;align-items:center;gap:1px} .bgh.top .stk{top:2px;flex-direction:column} .bgh.bot .stk{bottom:2px;flex-direction:column-reverse} .bgpt em{position:absolute;left:0;right:0;font-style:normal;font-size:9px;line-height:1;text-align:center;color:rgba(40,25,10,.55);pointer-events:none} .bgh.top .bgpt em{bottom:1px} .bgh.bot .bgpt em{top:1px} .bgc{display:flex;align-items:center;justify-content:center;width:86%;aspect-ratio:1;border-radius:50%;font-style:normal;font-size:11px;font-weight:800;flex:none} .bgc.w{background:radial-gradient(circle at 35% 30%,#fff,#e7e2d6 70%);border:1px solid #9b958a;color:#1d2433} .bgc.r{background:radial-gradient(circle at 35% 30%,#ef4444,#b91c1c 70%);border:1px solid #7f1d1d;color:#fff} .bgbar{background:var(--bw);cursor:default} .bgbar.can,.bgbar.sel{cursor:pointer} .bgoff{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#5b3714;color:#f5e9d3;cursor:default} .bgoff span{font-size:9px;line-height:1.1;text-align:center;padding:0 1px;white-space:nowrap;overflow:hidden;max-width:100%} .bgoff b{font-size:15px} .bgpt.can .stk .bgc:last-child,.bgbar.can .stk .bgc:last-child{box-shadow:0 0 0 2px var(--accent)} .bgh.top .bgpt.can .stk .bgc:last-child{box-shadow:0 0 0 2px var(--accent)} .bgpt.sel,.bgbar.sel{background:rgba(36,87,197,.22)} .bgpt.sel .stk .bgc:last-child,.bgbar.sel .stk .bgc:last-child{box-shadow:0 0 0 3px #f59e0b} .bgpt.tgt::after,.bgoff.tgt::after{content:"";position:absolute;left:50%;width:44%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:rgba(22,163,74,.85);box-shadow:0 0 0 3px rgba(22,163,74,.3)} .bgh.top .bgpt.tgt::after{bottom:14%} .bgh.bot .bgpt.tgt::after{top:14%} .bgoff.tgt{cursor:pointer;background:#166534} .bgoff.tgt::after{top:auto;bottom:6px;width:30%} .bgpt.last .tri{filter:brightness(1.12) saturate(1.2)} .bgtools{grid-template-columns:repeat(3,1fr)} .bgtools .pri{grid-column:1/-1;background:var(--accent);color:#fff;border-color:var(--accent)} .bgtools .pri[hidden]{display:none} @media (max-width:400px){.bgboard{padding:4px;gap:6px}.bgc{font-size:9px}.bgdie{width:28px;height:28px}.bgpips{font-size:11px}.bgoff span{font-size:8px}.bgdice .who{padding:3px 6px}} /* 対戦のゲームで「成績」を押した時、盤の下の成績の行を少しの間だけ目立たせる（10/12） */ .pzflash{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px;transition:outline-color .3s} @media (prefers-reduced-motion:reduce){.pzflash{transition:none}} /* メニュー上の欄の「成績」（ボタン）を、今日の数独・ランキング（リンク）と同じ太さに（10/12） */ .dpanel button.dmain{font-weight:800;font-size:17px} .dpanel a.dmain:nth-of-type(2){margin-bottom:0} /* ---------------- 2048（10/13・tw*） ---------------- */ .twwrap .game{max-width:520px} .twopts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;align-items:stretch} .twopts label{display:flex;flex-direction:column;font-size:12px;color:var(--sub);font-weight:700;gap:4px} .twopts select{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:8px 6px} .twsc{background:#bbada0;color:#fff;border-radius:10px;padding:6px 8px;text-align:center;display:flex;flex-direction:column;justify-content:center} .twsc span{font-size:11px;font-weight:700;opacity:.9;text-transform:uppercase;letter-spacing:.04em} .twsc b{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2} .twboard{--n:4;--g:clamp(6px,2vw,12px);position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--g);padding:var(--g);background:#bbada0;border-radius:12px;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none} .twcell{background:rgba(238,228,218,.35);border-radius:8px} .twtiles{position:absolute;inset:var(--g);pointer-events:none} .twt{position:absolute;left:0;top:0;width:calc((100% - (var(--n) - 1) * var(--g)) / var(--n));height:calc((100% - (var(--n) - 1) * var(--g)) / var(--n));transition:transform .1s ease-in-out;will-change:transform} .twt span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:8px;font-weight:800;color:#776e65;background:#eee4da;font-size:calc(var(--f,.5) * 100cqw);letter-spacing:-.02em} .twt{container-type:inline-size} .twt.born span{animation:twborn .18s ease-out .08s both} .twt.pop span{animation:twpop .18s ease-out} @keyframes twborn{from{transform:scale(0)}to{transform:scale(1)}} @keyframes twpop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}} .twt[data-v="4"] span{background:#ede0c8} .twt[data-v="8"] span{background:#f2b179;color:#fff} .twt[data-v="16"] span{background:#f59563;color:#fff} .twt[data-v="32"] span{background:#f67c5f;color:#fff} .twt[data-v="64"] span{background:#f65e3b;color:#fff} .twt[data-v="128"] span{background:#edcf72;color:#fff} .twt[data-v="256"] span{background:#edcc61;color:#fff} .twt[data-v="512"] span{background:#edc850;color:#fff} .twt[data-v="1024"] span{background:#edc53f;color:#fff} .twt[data-v="2048"] span{background:#edc22e;color:#fff;box-shadow:0 0 18px rgba(237,194,46,.6)} .twt[data-v="big"] span{background:#3c3a32;color:#fff} .twboard.nudge{animation:twnudge .2s} @keyframes twnudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} .twtools{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px} @media (prefers-reduced-motion:reduce){.twt{transition:none}.twt.born span,.twt.pop span,.twboard.nudge{animation:none}} /* 2048：狭い画面では「盤の大きさ」を1段まるごと使い、点数とベストを下の段に（10/13 幅320で選ぶ欄がはみ出した） */ .twopts select{min-width:0;width:100%} @media (max-width:480px){.twopts{grid-template-columns:1fr 1fr}.twopts label{grid-column:1/-1}} /* ---------------- マインスイーパー（10/13・mw*） ---------------- */ .mwwrap{max-width:760px}.mwwrap .game{width:100%;max-width:760px} /* 盤は中身から幅を決められない＝幅いっぱいを先に決める（10/13 30px に縮んだ） */ .mwopts{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;margin-bottom:10px;align-items:stretch} .mwopts select{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:8px 6px;min-width:0;width:100%} .mwbox{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:6px 4px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;font-size:16px;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--ink)} .mwbox small{font-size:11px;color:var(--sub);font-weight:700} #mwflag{cursor:pointer} #mwflag.on{background:#fde68a;border-color:#d97706} .mwboard{max-width:calc(var(--c) * 34px + 8px);margin:0 auto;display:grid;grid-template-columns:repeat(var(--c),1fr);gap:2px;padding:4px;background:#9ca3af;border-radius:10px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .mwc{aspect-ratio:1;border:0;padding:0;margin:0;border-radius:3px;background:linear-gradient(#e5e7eb,#cbd5e1);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);font:inherit;font-weight:900;color:#111;cursor:pointer;container-type:inline-size;font-size:clamp(10px,2.4vw,20px);display:flex;align-items:center;justify-content:center;min-width:0;line-height:1} .mwc:hover{filter:brightness(1.05)} .mwc.open{background:#f8fafc;box-shadow:none;cursor:default} .mwc.n1{color:#1d4ed8}.mwc.n2{color:#15803d}.mwc.n3{color:#dc2626}.mwc.n4{color:#1e3a8a}.mwc.n5{color:#7f1d1d}.mwc.n6{color:#0f766e}.mwc.n7{color:#111827}.mwc.n8{color:#6b7280} .mwc.flag{color:#dc2626} .mwc.flag.wrong{background:#fecaca;text-decoration:line-through} .mwc.mine{background:#f1f5f9;color:#111} .mwc.mine.boom{background:#ef4444;color:#fff} .mwboard[style*="--c: 9"] .mwc,.mwboard[style*="--c:9"] .mwc{font-size:clamp(14px,4.5vw,24px)} @media (max-width:520px){.mwopts{grid-template-columns:1fr 1fr 1fr}.mwopts label{grid-column:1/-1}} /* ---------------- ピラミッド（10/13・py*。カードはソリティアの kcard・台は kwrap） ---------------- */ .pywrap{max-width:720px}.pywrap .game{width:100%;max-width:720px} .pyopts{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-bottom:8px}.pyopts span{white-space:nowrap;overflow:hidden}@media(max-width:480px){.pyopts span{font-size:13px;padding:7px 4px}} .pyopts span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 4px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)} #pyboard{position:relative;width:100%;isolation:isolate} /* カードの重なり順を台の中に閉じる＝結果の窓の上にカードが出ない（10/13 ゴルフの負けの窓で発見） */ #pyboard .kcard.dim{filter:brightness(.82)} #pyboard .kcard.dim .kb{visibility:hidden} #pyboard .kcard.tip{outline:3px solid #22c55e;outline-offset:-1px} #pyboard .kcard.empty{background:transparent;border:2px dashed rgba(100,116,139,.55);box-shadow:none;color:#64748b} #pyboard .kcard.empty .kb{font-size:calc(var(--kw)*.6)} /* ゴルフ 10/13（ピラミッドと同じ形） */ .gfwrap{max-width:720px}.gfwrap .game{width:100%;max-width:720px} .gfopts{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-bottom:8px}.gfopts span{white-space:nowrap;overflow:hidden}@media(max-width:480px){.gfopts span{font-size:13px;padding:7px 4px}} .gfopts span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 4px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)} #gfboard{position:relative;width:100%;isolation:isolate} #gfboard .kcard.dim{filter:brightness(.82)} #gfboard .kcard.dim .kb{visibility:hidden} #gfboard .kcard.tip{outline:3px solid #22c55e;outline-offset:-1px} #gfboard .kcard.empty{background:transparent;border:2px dashed rgba(100,116,139,.55);box-shadow:none;color:#64748b} #gfboard .kcard.empty .kb{font-size:calc(var(--kw)*.6)} .pytools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .pytools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer} .gftools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .gftools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer} /* トライピークス 10/14（ゴルフと同じ形） */ .tpwrap{max-width:720px}.tpwrap .game{width:100%;max-width:720px} .tpopts{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-bottom:8px}.tpopts span{white-space:nowrap;overflow:hidden}@media(max-width:480px){.tpopts span{font-size:13px;padding:7px 4px}} .tpopts span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 4px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)} #tpboard{position:relative;width:100%;isolation:isolate} #tpboard .kcard.dim{filter:brightness(.82)} #tpboard .kcard.dim .kb{visibility:hidden} #tpboard .kcard.tip{outline:3px solid #22c55e;outline-offset:-1px} #tpboard .kcard.empty{background:transparent;border:2px dashed rgba(100,116,139,.55);box-shadow:none;color:#64748b} #tpboard .kcard.empty .kb{font-size:calc(var(--kw)*.6)} .tptools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .tptools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer} /* 五目並べ（10/15）：欄・石の数・ボタン・時間・成績の見た目はリバーシと同じ（gm*）。盤は 15×15 の交点。スマホは盤を広く（周りの余白を細く） */ .gmwrap{max-width:600px} .gmopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .gmopts label{display:flex;flex-direction:column;gap:3px;min-width:0} .gmopts span{font-size:12px;color:var(--sub)} .gmopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .gmscore{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px} .gmscore div{display:flex;align-items:center;gap:8px;border:1px solid var(--btnline);border-radius:10px;padding:6px 10px;background:var(--btn);min-width:0} .gmscore div.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} .gmscore i{flex:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111);box-shadow:0 1px 2px rgba(0,0,0,.4)} .gmscore .w i{background:radial-gradient(circle at 35% 30%,#fff,#d9dce1);border:1px solid #b9bec7} .gmscore span{flex:1;min-width:0;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gmscore small{display:block;font-size:11px;color:var(--sub)} .gmscore b{font-size:20px;font-variant-numeric:tabular-nums} .gmtime{text-align:right;font-size:13px;color:var(--sub);margin:0 2px 4px;font-variant-numeric:tabular-nums} .gmboard{position:relative;isolation:isolate;aspect-ratio:1/1;max-width:560px;margin:0 auto;border-radius:8px;background:linear-gradient(135deg,#e8bf78,#d9a75a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.18);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:3px} .gmboard.mine{cursor:pointer} .gmlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .gmlines g line{stroke:#5a3d17;stroke-width:.045} .gmlines circle{fill:#5a3d17} .gmlines .gmwin{stroke:#e53935;stroke-width:.16;stroke-linecap:round;opacity:.85} .gmstones{position:absolute;inset:0;pointer-events:none} .gmst,.gmghost,.gmhintm{position:absolute;width:5.9%;height:5.9%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none} .gmst.k{background:radial-gradient(circle at 35% 30%,#666,#111 70%);box-shadow:0 1px 2px rgba(0,0,0,.5)} .gmst.w{background:radial-gradient(circle at 35% 30%,#fff,#d4d7dc 75%);box-shadow:0 1px 2px rgba(0,0,0,.45)} .gmst.last::after{content:"";position:absolute;left:50%;top:50%;width:32%;height:32%;transform:translate(-50%,-50%);border-radius:50%;background:#e53935} .gmst.win{box-shadow:0 0 0 2px #e53935,0 1px 2px rgba(0,0,0,.5)} .gmghost{display:none;opacity:.5;z-index:2} .gmghost.k{background:#111}.gmghost.w{background:#fff;box-shadow:0 0 0 1px #555} .gmghost.big{width:7.6%;height:7.6%;opacity:.55} .gmch{display:none;position:absolute;background:rgba(229,57,53,.55);pointer-events:none;z-index:1} .gmchh{left:3.33%;right:3.33%;height:2px;transform:translateY(-1px)} .gmchv{top:3.33%;bottom:3.33%;width:2px;transform:translateX(-1px)} .gmhintm{display:none;width:6.6%;height:6.6%;box-shadow:0 0 0 3px #2563eb;animation:gmhint 1s ease-in-out infinite alternate;z-index:1} @keyframes gmhint{0%{box-shadow:0 0 0 2px #2563eb}100%{box-shadow:0 0 0 5px rgba(37,99,235,.55)}} .gmmsg{min-height:1.6em;text-align:center;font-size:14px;font-weight:700;margin:8px 0 2px;color:var(--ink)} .gmtools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .gmtools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .gmtools button:disabled{opacity:.45;cursor:default} .gmgame .new{margin-top:12px} .gmstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} @media (max-width:520px){.gmopts{grid-template-columns:1fr;gap:6px}.gmopts label{flex-direction:row;align-items:center;gap:8px}.gmopts span{flex:none;width:6.5em;line-height:1.3}.gmopts select{flex:1} .gmwrap{padding-left:6px;padding-right:6px}.gmgame{padding:10px 6px}.gmgame .gmopts,.gmgame .gmscore,.gmgame .gmtools,.gmgame .new,.gmgame .note,.gmgame .gmmsg,.gmgame .gmtime{margin-left:4px;margin-right:4px}} @media (prefers-reduced-motion:reduce){.gmhintm{animation:none}} /* マンカラ（10/15）：欄・数の札・ボタン・時間・成績は五目並べと同じ形（mc*）。盤＝左右のストア＋上下6つずつの穴（木の盤・石は色ガラス玉） */ .mcwrap{max-width:640px} .mcopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .mcopts label{display:flex;flex-direction:column;gap:3px;min-width:0} .mcopts span{font-size:12px;color:var(--sub)} .mcopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .mcscore{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px} .mcscore div{display:flex;align-items:center;gap:8px;border:1px solid var(--btnline);border-radius:10px;padding:6px 10px;background:var(--btn);min-width:0} .mcscore div.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} .mcscore span{flex:1;min-width:0;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mcscore small{display:block;font-size:11px;color:var(--sub);white-space:normal} .mcscore b{font-size:20px;font-variant-numeric:tabular-nums} .mctime{text-align:right;font-size:13px;color:var(--sub);margin:0 2px 4px;font-variant-numeric:tabular-nums} .mcboard{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.8fr) repeat(6,minmax(0,1fr)) minmax(0,.8fr);gap:6px 4px;padding:8px;border-radius:18px; background:linear-gradient(160deg,#c98a4b,#a86a33 60%,#8f5627);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.2);max-width:600px;margin:0 auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .mcrow{display:contents} .mctop>.mcpit{grid-row:1}.mcbot>.mcpit{grid-row:2} .mcs1{grid-column:1;grid-row:1/span 2}.mcs0{grid-column:8;grid-row:1/span 2} .mcpit{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:0;margin:0;font:inherit;color:#3b2410;min-width:0;cursor:default;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .mctop>.mcpit{flex-direction:column-reverse} .mcpit:disabled{opacity:1;color:#3b2410} .mchole{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#7a4519,#5c3210 75%);box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.25);transition:box-shadow .15s} .mcseeds{position:absolute;inset:0;pointer-events:none} .mcseeds i{position:absolute;width:24%;height:24%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.8),rgba(255,255,255,0) 55%),var(--c);box-shadow:inset -1px -1px 2px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.4)} .mcseeds i.mcnw{animation:mcpop .22s ease-out} @keyframes mcpop{0%{transform:translate(-50%,-50%) scale(1.9);opacity:.3}100%{transform:translate(-50%,-50%) scale(1);opacity:1}} .mcn{font-size:14px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:#fff7e6;text-shadow:0 1px 1px rgba(0,0,0,.5)} .mcstore{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:999px;background:radial-gradient(ellipse at 50% 40%,#7a4519,#5c3210 75%);box-shadow:inset 0 3px 8px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.25);padding:6px 0;min-height:100%} .mcstore .mcseeds{inset:14% 8%} .mcstore .mcseeds i{width:auto;height:auto;aspect-ratio:1/1;width:26%} .mcstore .mcn{position:relative;z-index:1;font-size:17px} .mcpit.mccan{cursor:pointer} .mcpit.mccan .mchole{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 2px rgba(255,236,190,.85)} @media (hover:hover){.mcpit.mccan:hover .mchole{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 3px #fde68a}} .mcpit:focus-visible{outline:none}.mcpit:focus-visible .mchole{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 3px #fff,0 0 0 5px var(--accent)} .mcpit.mcfrom .mchole{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 3px #fb923c} .mcpit.mcdrop .mchole,.mcstore.mcdrop{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 3px #fef08a} .mcpit.mccapt .mchole{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 3px #ef4444;animation:mccap .5s ease-in-out infinite alternate} @keyframes mccap{to{transform:scale(1.06)}} .mcstore.mcglow,.mcstore.mcwin{box-shadow:inset 0 3px 8px rgba(0,0,0,.55),0 0 0 3px #facc15} .mcpit.mchl .mchole{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 3px #2563eb;animation:mchint 1s ease-in-out infinite alternate} @keyframes mchint{0%{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 2px #2563eb}100%{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 0 5px rgba(37,99,235,.6)}} .mcmsg{min-height:3em;text-align:center;font-size:14px;font-weight:700;margin:8px 0 2px;color:var(--ink);line-height:1.45} .mcmsg.again{color:#15803d}.mcmsg.cap{color:#c2410c} [data-theme="dark"] .mcmsg.again{color:#4ade80}[data-theme="dark"] .mcmsg.cap{color:#fb923c} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mcmsg.again{color:#4ade80}:root:not([data-theme="light"]) .mcmsg.cap{color:#fb923c}} .mctools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .mctools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .mctools button:disabled{opacity:.45;cursor:default} .mcgame .new{margin-top:12px} .mcstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} @media (max-width:520px){.mcopts{grid-template-columns:1fr;gap:6px}.mcopts label{flex-direction:row;align-items:center;gap:8px}.mcopts span{flex:none;width:6.5em;line-height:1.3}.mcopts select{flex:1} .mcwrap{padding-left:6px;padding-right:6px}.mcgame{padding:10px 6px}.mcgame .mcopts,.mcgame .mcscore,.mcgame .mctools,.mcgame .new,.mcgame .note,.mcgame .mcmsg,.mcgame .mctime{margin-left:4px;margin-right:4px} .mcboard{padding:6px 5px;gap:5px 3px;border-radius:14px}.mcn{font-size:13px}} @media (max-width:380px){.mcboard{grid-template-columns:minmax(0,.62fr) repeat(6,minmax(0,1fr)) minmax(0,.62fr);padding:5px 4px;gap:4px 2px}.mcstore .mcn{font-size:15px}} @media (prefers-reduced-motion:reduce){.mcpit.mchl .mchole,.mcpit.mccapt .mchole,.mcseeds i.mcnw{animation:none}} /* 4目並べ（10/15）：欄・石の数・ボタン・時間・成績は五目並べと同じ形（fw*）。盤＝7列×6段・紫の枠に穴（SVG）・石は枠の後ろで上から落ちる・印は枠の上 */ .fwwrap{max-width:600px} .fwopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .fwopts label{display:flex;flex-direction:column;gap:3px;min-width:0} .fwopts span{font-size:12px;color:var(--sub)} .fwopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .fwscore{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px} .fwscore div{display:flex;align-items:center;gap:8px;border:1px solid var(--btnline);border-radius:10px;padding:6px 10px;background:var(--btn);min-width:0} .fwscore div.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} .fwscore i{flex:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a8a,#dc2626 55%,#991b1b);box-shadow:0 1px 2px rgba(0,0,0,.4)} .fwscore .y i{background:radial-gradient(circle at 35% 30%,#fff3b0,#facc15 55%,#ca8a04)} .fwscore span{flex:1;min-width:0;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fwscore small{display:block;font-size:11px;color:var(--sub)} .fwscore b{font-size:20px;font-variant-numeric:tabular-nums} .fwtime{text-align:right;font-size:13px;color:var(--sub);margin:0 2px 4px;font-variant-numeric:tabular-nums} .fwboard{position:relative;isolation:isolate;aspect-ratio:7/6;max-width:540px;margin:0 auto;border-radius:12px;overflow:hidden;background:#efeaf8;box-shadow:0 3px 8px rgba(0,0,0,.25);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:3px} .fwboard.mine{cursor:pointer} .fwcols{position:absolute;inset:0;z-index:0} .fwcol{position:absolute;top:0;bottom:0;width:14.2857%;background:transparent;transition:background .1s} .fwcol.on{background:rgba(124,58,237,.18)} @media (hover:hover){.fwboard.mine .fwcol:hover{background:rgba(124,58,237,.12)}} .fwdiscs{position:absolute;inset:0;z-index:1;pointer-events:none} .fwd,.fwghost{position:absolute;width:12.4%;height:14.4%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none} .fwd.r{background:radial-gradient(circle at 35% 30%,#ff8a8a,#dc2626 55%,#991b1b);box-shadow:inset 0 -2px 3px rgba(0,0,0,.3)} .fwd.y{background:radial-gradient(circle at 35% 30%,#fff3b0,#facc15 55%,#ca8a04);box-shadow:inset 0 -2px 3px rgba(0,0,0,.25)} .fwd.fwfall{animation:fwfall .3s cubic-bezier(.45,0,1,1) both} @keyframes fwfall{from{transform:translate(-50%,calc(-50% + var(--fall)))}to{transform:translate(-50%,-50%)}} .fwghost{display:none;z-index:1;opacity:.42} .fwghost.r{background:#dc2626}.fwghost.y{background:#facc15} .fwframe{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none} .fwframe path{fill:#5b3fa8} .fwrims circle{fill:none;stroke:#3f2a7a;stroke-width:.05} .fwmarks{position:absolute;inset:0;z-index:3;pointer-events:none} .fwlast,.fwwin,.fwhint{position:absolute;transform:translate(-50%,-50%);border-radius:50%} .fwlast{width:3.4%;height:3.9%;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.35);animation:fwin .15s linear both} @keyframes fwin{from{opacity:0}to{opacity:1}} .fwwin{width:12.6%;height:14.7%;box-shadow:0 0 0 3px #fff,0 0 0 5px #16a34a;animation:fwwin .35s ease-out both} @keyframes fwwin{from{opacity:0;transform:translate(-50%,-50%) scale(1.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .fwhint{width:12.6%;height:14.7%;box-shadow:0 0 0 3px #2563eb;animation:fwhintp 1s ease-in-out infinite alternate} .fwhcol{position:absolute;top:0;bottom:0;width:14.2857%;box-shadow:inset 0 0 0 3px rgba(37,99,235,.75);border-radius:6px} @keyframes fwhintp{0%{box-shadow:0 0 0 2px #2563eb}100%{box-shadow:0 0 0 5px rgba(37,99,235,.55)}} .fwmsg{min-height:2.9em;text-align:center;font-size:14px;font-weight:700;margin:8px 0 2px;color:var(--ink);line-height:1.45} .fwtools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .fwtools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .fwtools button:disabled{opacity:.45;cursor:default} .fwgame .new{margin-top:12px} .fwstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} @media (max-width:520px){.fwopts{grid-template-columns:1fr;gap:6px}.fwopts label{flex-direction:row;align-items:center;gap:8px}.fwopts span{flex:none;width:6.5em;line-height:1.3}.fwopts select{flex:1} .fwwrap{padding-left:6px;padding-right:6px}.fwgame{padding:10px 6px}.fwgame .fwopts,.fwgame .fwscore,.fwgame .fwtools,.fwgame .new,.fwgame .note,.fwgame .fwmsg,.fwgame .fwtime{margin-left:4px;margin-right:4px}} @media (prefers-reduced-motion:reduce){.fwhint,.fwwin,.fwlast,.fwd.fwfall{animation:none}} /* ファイブダイス（10/15）：欄・ボタン・時間・成績は4目並べと同じ形（fd*）。サイコロ＝CSS の目（3×3）・押すと「残す」・振ると短く転がる。スマホではサイコロと振るボタンを上に貼り付ける */ .fdwrap{max-width:720px} .fdopts{margin-bottom:8px} .fdopts label{display:flex;align-items:center;gap:8px;min-width:0} .fdopts span{flex:none;font-size:12px;color:var(--sub)} .fdopts select{flex:1;width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .fdscore{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px} .fdscore div{display:flex;align-items:center;gap:8px;border:1px solid var(--btnline);border-radius:10px;padding:6px 10px;background:var(--btn);min-width:0} .fdscore div.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} .fdscore div.best{opacity:.85} .fdscore span{flex:1;min-width:0;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fdscore small{display:block;font-size:11px;color:var(--sub)} .fdscore b{font-size:20px;font-variant-numeric:tabular-nums} .fdtime{text-align:right;font-size:13px;color:var(--sub);margin:0 2px 4px;font-variant-numeric:tabular-nums} .fdbar{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 6px;border-radius:14px;background:#0c4a6e;box-shadow:inset 0 2px 6px rgba(0,0,0,.35)} .fddice{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,2.4vw,14px);width:100%;max-width:400px} .fdd{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;min-width:0;font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .fdd:disabled{cursor:default} .fdf{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;aspect-ratio:1;padding:16%;border-radius:18%;background:linear-gradient(145deg,#fff,#e9eef3);box-shadow:0 3px 0 #94a3b8,0 4px 8px rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s} .fdf i{width:72%;height:72%;margin:auto;border-radius:50%;background:#1e293b;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)} .fdf b{display:block} .fdd.blank .fdf{opacity:.55} .fdk{position:relative;z-index:1;margin-top:3px;font-size:11px;font-weight:700;line-height:1.3;padding:1px 5px;border-radius:6px;color:transparent;white-space:nowrap} @media (max-width:400px){.fdk{font-size:10px;padding:1px 3px;letter-spacing:-.01em}} .fdd.on .fdf{transform:translateY(3px);box-shadow:0 0 0 3px #facc15,0 1px 0 #94a3b8,0 2px 4px rgba(0,0,0,.35);background:linear-gradient(145deg,#fffbe6,#fdf2c4)} .fdd.on .fdk{color:#1e293b;background:#facc15} .fdd.fdhd .fdf{box-shadow:0 0 0 3px #38bdf8,0 3px 0 #94a3b8,0 4px 8px rgba(0,0,0,.35);animation:fdhint 1s ease-in-out infinite alternate} .fdd.fdhd.on .fdf{box-shadow:0 0 0 3px #38bdf8,0 0 0 6px #facc15} @keyframes fdhint{from{filter:brightness(1)}to{filter:brightness(1.12)}} .fdd.fdspin .fdf{animation:fdspin .42s cubic-bezier(.2,.7,.3,1) both} @keyframes fdspin{0%{transform:translateY(-14px) rotate(-200deg) scale(.85)}60%{transform:translateY(2px) rotate(12deg) scale(1.03)}100%{transform:none}} .fdrollw{display:flex;align-items:center;gap:10px;width:100%;max-width:400px} .fdroll{flex:1;min-height:46px;border:0;border-radius:12px;background:#facc15;color:#1e293b;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 3px 0 #a16207;padding:8px 10px;min-width:0} .fdroll:disabled{opacity:.45;cursor:default;box-shadow:none} .fdleft{display:flex;gap:5px;flex:none} .fdleft i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)} .fdleft i.on{background:#facc15} .fdmsg{min-height:2.9em;text-align:center;font-size:14px;font-weight:700;margin:8px 0 2px;color:var(--ink);line-height:1.45} .fdtools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px} .fdtools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .fdtools button:disabled{opacity:.45;cursor:default} .fdcard{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:700px){.fdcard{grid-template-columns:1fr 1fr;align-items:start}} .fdt{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--btnline);border-radius:10px;overflow:hidden;font-size:14px;table-layout:fixed} .fdt th,.fdt td{border-top:1px solid var(--line);padding:3px 6px;text-align:left;vertical-align:middle} .fdt tr:first-child th{border-top:0;background:var(--btn);font-size:12px;color:var(--sub);font-weight:700;padding:6px} .fdt tr:first-child th:first-child{width:auto} .fdt tr:first-child th+th{width:24%;text-align:center} .fdcard.two .fdt tr:first-child th+th{width:22%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fdt tr:first-child th.on{color:var(--accent)} .fdt th[scope=row]{font-weight:700;line-height:1.25;overflow-wrap:anywhere} .fdt th[scope=row] small{display:block;font-size:11px;font-weight:400;color:var(--sub);line-height:1.25} .fdt td{text-align:center;height:40px;font-variant-numeric:tabular-nums} .fdv{font-size:16px;font-weight:700} .fdv.last{color:var(--accent)} .fdc{width:100%;min-height:34px;border:1px dashed var(--btnline);background:transparent;border-radius:8px;color:var(--sub);font-size:15px;font-weight:700;font-family:inherit;opacity:.75;cursor:pointer;font-variant-numeric:tabular-nums} .fdc:not(:disabled){border-style:solid;border-color:var(--accent);color:var(--accent);opacity:1;background:var(--card)} .fdc.zero{opacity:.55} .fdc:not(:disabled).zero{opacity:.7;color:var(--sub);border-color:var(--btnline)} @media (hover:hover){.fdc:not(:disabled):hover{background:var(--accent);color:#fff;opacity:1}} .fdc:disabled{cursor:default} .fdc.fdhc{box-shadow:0 0 0 3px #2563eb;opacity:1;animation:fdhint 1s ease-in-out infinite alternate} .fdt tr.sum th,.fdt tr.sum td{background:var(--btn);font-size:13px} .fdt tr.sum td small{display:block;font-size:10px;color:var(--sub);font-weight:400} .fdt tr.tot th,.fdt tr.tot td{font-size:16px;font-weight:800} .fdgame .new{margin-top:12px} .fdstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} @media (max-width:520px){.fdwrap{padding-left:6px;padding-right:6px}.fdgame{padding:10px 6px}.fdgame .fdopts,.fdgame .fdscore,.fdgame .fdtools,.fdgame .new,.fdgame .note,.fdgame .fdmsg,.fdgame .fdtime{margin-left:4px;margin-right:4px} .fdbar{position:sticky;top:56px;z-index:4;padding:10px 8px}.fdt th,.fdt td{padding:3px 4px}.fdt{font-size:13px}} @media (prefers-reduced-motion:reduce){.fdd.fdspin .fdf,.fdd.fdhd .fdf,.fdc.fdhc{animation:none}} /* まるばつ（三目並べ・10/15）：欄・ボタン・時間・成績は4目並べと同じ形（tt*）。盤＝3×3 の大きなマス（すき間が線）・印は SVG（○は円・×は2本の線）を短く書く・そろった3つに線 */ .ttwrap{max-width:540px} .ttgame{--tto:#e0393e;--ttx:#2457c5;--ttgrid:#5f6673} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ttgame{--tto:#ff7276;--ttx:#86a9ff;--ttgrid:#a3aab6}} :root[data-theme="dark"] .ttgame{--tto:#ff7276;--ttx:#86a9ff;--ttgrid:#a3aab6} .ttopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .ttopts label{display:flex;flex-direction:column;gap:3px;min-width:0} .ttopts span{font-size:12px;color:var(--sub)} .ttopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .ttscore{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:6px} .ttscore div{display:flex;align-items:center;gap:8px;border:1px solid var(--btnline);border-radius:10px;padding:6px 10px;background:var(--btn);min-width:0} .ttscore div.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset} .ttscore .d{flex-direction:column;justify-content:center;gap:0;padding:4px 10px;text-align:center} .ttscore .d span{flex:none;font-size:11px;color:var(--sub)}.ttscore .d b{font-size:18px} .ttsi{flex:none;width:22px;height:22px;display:block}.ttsi svg{width:100%;height:100%;display:block} .ttscore span{flex:1;min-width:0;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttscore small{display:block;font-size:11px;color:var(--sub)} .ttscore b{font-size:20px;font-variant-numeric:tabular-nums} .tttime{text-align:right;font-size:13px;color:var(--sub);margin:0 2px 4px;font-variant-numeric:tabular-nums} .ttboard{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(5px,1.6vw,8px);aspect-ratio:1;width:100%;max-width:440px;margin:0 auto;background:var(--ttgrid);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .ttc{appearance:none;-webkit-appearance:none;border:0;border-radius:0;background:var(--card);color:inherit;font:inherit;padding:0;margin:0;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;touch-action:manipulation;cursor:default} .ttboard.mine .ttc.ttmine,.ttboard.over .ttc{cursor:pointer} @media (hover:hover){.ttboard.mine .ttc.ttmine:hover{background:var(--peer)}} .ttc:focus-visible{outline:3px solid var(--accent);outline-offset:-3px} .ttm{width:70%;height:70%;fill:none;stroke-linecap:round;overflow:visible;pointer-events:none} .ttm.o circle{stroke:var(--tto);stroke-width:11} .ttm.x line{stroke:var(--ttx);stroke-width:12} .ttm.draw circle{stroke-dasharray:100;animation:ttdraw .22s ease-out both} .ttm.draw line{stroke-dasharray:100;animation:ttdraw .12s ease-out both}.ttm.draw line.b{animation-delay:.11s} @keyframes ttdraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} .ttc.win{background:linear-gradient(rgba(22,163,74,.17),rgba(22,163,74,.17)),var(--card)} .ttc.hint::after{content:"";position:absolute;inset:7%;border-radius:12px;box-shadow:0 0 0 3px #2563eb;animation:tthintp 1s ease-in-out infinite alternate;pointer-events:none} @keyframes tthintp{0%{box-shadow:0 0 0 2px #2563eb}100%{box-shadow:0 0 0 6px rgba(37,99,235,.5)}} .ttline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .ttline line{stroke:var(--ink);stroke-width:9;stroke-linecap:round;opacity:.82} .ttline.anim line{stroke-dasharray:100;animation:ttdraw .3s ease-out both} .ttmsg{min-height:2.9em;text-align:center;font-size:14px;font-weight:700;margin:8px 0 2px;color:var(--ink);line-height:1.45} .tttools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .tttools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .tttools button:disabled{opacity:.45;cursor:default} .ttgame .new{margin-top:12px} .ttstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} @media (max-width:520px){.ttopts{grid-template-columns:1fr;gap:6px}.ttopts label{flex-direction:row;align-items:center;gap:8px}.ttopts span{flex:none;width:6.5em;line-height:1.3}.ttopts select{flex:1} .ttwrap{padding-left:6px;padding-right:6px}.ttgame{padding:10px 6px}.ttgame .ttopts,.ttgame .ttscore,.ttgame .tttools,.ttgame .new,.ttgame .note,.ttgame .ttmsg,.ttgame .tttime{margin-left:4px;margin-right:4px} .ttscore{gap:5px}.ttscore div{padding:6px 7px;gap:5px}} @media (max-width:400px){.ttscore span{font-size:12px}.ttscore b{font-size:18px}.ttsi{width:18px;height:18px}.ttscore .d{padding:4px 6px}.ttscore .d span{font-size:10px}} @media (max-width:340px){.ttscore{gap:4px}.ttscore div{padding:5px 5px;gap:4px}.ttscore span{font-size:11px}.ttscore b{font-size:17px}.ttsi{width:16px;height:16px}} @media (prefers-reduced-motion:reduce){.ttm.draw circle,.ttm.draw line,.ttline.anim line,.ttc.hint::after{animation:none}} /* ---- 今日のパズル・連続記録・トップの札と検索（§81 10/15） ---- */ .today.tdtop a{background:linear-gradient(135deg,#1f8a5b,#0f766e);padding:16px 18px} .today.tdtop a i{background:rgba(255,255,255,.18)} .today.tdtop a>div{flex:1;min-width:0} .today.tdtop a b{font-size:19px} .today.tdtop a span{display:block;font-size:14px;opacity:.95;overflow-wrap:break-word} .tdpill{flex:none;background:#fff;color:#0f766e;border-radius:999px;padding:6px 14px;font-size:18px;font-weight:800;white-space:nowrap} .tdsum{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px} .tdprog{font-size:18px;font-weight:700;margin:0} .tdprog b{font-size:30px;color:#1f8a5b;margin:0 2px} .tdstreak{margin:0;font-size:14px;color:var(--sub)} .tdstreak.on{font-size:16px;font-weight:800;color:#c2410c} .cards.tdcards{grid-template-columns:repeat(4,1fr)} .tdc{position:relative} .tdc .tdst{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:700;color:var(--sub)} .tdc .tdck{display:inline-flex;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);align-items:center;justify-content:center;color:transparent;font-style:normal;flex:none} .tdc .tddone{display:none} .tdc.done .tdck{background:#1f8a5b;border-color:#1f8a5b;color:#fff} .tdc.done .tddone{display:inline;color:#1f8a5b} .tdc.done{border-color:#1f8a5b} .tdnext{margin-top:12px;font-size:14px;color:var(--sub)} .tdall{margin-top:8px;font-size:16px;font-weight:800;color:#1f8a5b} .tdhome p{font-size:15px;line-height:1.7} .tdhome[hidden],.tdhome p[hidden],#tdInstall[hidden]{display:none} .pztl{margin:12px 0 0;font-size:14px;font-weight:700} .pztl a{color:#1f8a5b;text-decoration:none;overflow-wrap:break-word} .pztl a:hover{text-decoration:underline} .emb .pztl{display:none!important} .gfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px} .gftabs{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0} .gft{padding:7px 14px;border-radius:999px;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap} .gft.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .gq{display:flex;align-items:center;gap:6px;border:1px solid var(--btnline);background:var(--btn);border-radius:999px;padding:6px 12px;color:var(--sub);flex:0 1 200px;min-width:0} .gq input{border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;outline:0;width:100%;min-width:0} .gq:focus-within{border-color:var(--accent)} .cards .gcard[hidden]{display:none} .cards.pcards.flt>.gcard:first-child{grid-column:auto} .gcard{position:relative} .gnew{position:absolute;top:10px;right:10px;background:#e0457b;color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;text-decoration:none;border-radius:6px;padding:2px 7px} .gnone{color:var(--sub);font-size:15px;padding:8px 0} .gnone[hidden]{display:none} @media(max-width:900px){.cards.tdcards{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.gq{flex:1 1 100%}.today.tdtop a b{font-size:17px}.tdpill{font-size:16px;padding:5px 11px}.tdprog b{font-size:26px}} @media(max-width:430px){.gft{padding:6px 10px;font-size:13px}.gftabs{gap:5px}} .tdinst{display:inline-block;background:#1f8a5b;color:#fff;border:0;border-radius:12px;padding:12px 20px;font:inherit;font-size:16px;font-weight:700;cursor:pointer} .tdinst[hidden]{display:none} @media(max-width:900px){.cards.tdcards>.tdc:last-child:nth-child(odd){grid-column:1/-1}} /* 四川省（二角取り／Mahjong Connect）10/16：牌の絵は麻雀ソリティアの .mt。盤は全体が見える大きさ（スマホの縦長では盤を縦に置き直す） */ .sswrap{max-width:960px}.sswrap .game{width:100%;max-width:960px} .levels.m3{grid-template-columns:repeat(3,1fr)} .sslv button{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}.sslv button small{font-size:11px;font-weight:600;opacity:.75} .ssopts{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-bottom:8px}.ssopts span{white-space:nowrap;overflow:hidden} .ssopts span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 6px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)} @media(max-width:480px){.ssopts span{font-size:13px;padding:7px 4px}} .ssbox{width:100%;display:flex;justify-content:center;overflow:hidden;padding:2px 0} #ssboard{position:relative;flex:none;isolation:isolate;border-radius:12px;background:rgba(180,83,9,.07);box-shadow:inset 0 0 0 1px rgba(180,83,9,.18)} #ssboard .sst{transition:opacity .3s,transform .3s} #ssboard .sst.gone{opacity:0;transform:scale(.7);pointer-events:none} #ssboard .ssline{position:absolute;left:0;top:0;pointer-events:none;z-index:5000;opacity:0;transition:opacity .18s} #ssboard .ssline.show{opacity:1} .sstools{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px} .sstools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sstools button:disabled{opacity:.45;cursor:default} .sstools button.pulse{border-color:#b45309;color:#b45309;box-shadow:0 0 0 3px rgba(180,83,9,.25);animation:sspulse 1.2s ease-in-out infinite} @keyframes sspulse{50%{box-shadow:0 0 0 6px rgba(180,83,9,.08)}} .ssgame .new{margin-top:12px} @media(max-width:360px){.sstools button{font-size:12.5px;padding:10px 2px}.sstools{gap:6px}} /* 大富豪（10/16・df*）。カードの絵はハーツの .htc を使い回す */ .dfwrap{max-width:600px} .dfopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;align-items:start} .dfopts>label{display:flex;flex-direction:column;gap:3px;min-width:0} .dfopts>label span{font-size:12px;color:var(--sub)} .dfopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .dfrules{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:0 10px;min-width:0;align-self:end} .dfrules summary{cursor:pointer;font-size:14px;font-weight:700;padding:9px 0;list-style-position:inside} .dfrules[open]{grid-column:1/-1;padding-bottom:8px} .dfrules p{font-size:12px;color:var(--sub);margin:6px 0 0;line-height:1.5} .dfo{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;padding:6px 0;border-top:1px solid var(--btnline);cursor:pointer} .dfo input{flex:none;width:18px;height:18px;margin:1px 0 0} .dfscores div small{color:var(--sub);font-size:11px;font-weight:700;white-space:nowrap} .dftable{position:relative;height:300px;border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#1f7a4d 0%,#176a41 55%,#115234 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);color:#fff} .dfinfo{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:11px;font-weight:700;max-width:30%} .dfinfo span{background:rgba(0,0,0,.28);border-radius:7px;padding:2px 7px;white-space:nowrap} .dfinfo .rev{background:#dc2626}.dfinfo .jb{background:#7c3aed}.dfinfo .lk{background:#0369a1} .dfseat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;text-align:center} .dfseat em{font-style:normal;font-weight:800;font-size:14px;background:rgba(0,0,0,.25);border-radius:8px;padding:1px 8px;white-space:nowrap} .dfseat small{font-size:11px;font-weight:800;background:#facc15;color:#1d2433;border-radius:6px;padding:0 6px;white-space:nowrap} .dfseat.on em{background:#facc15;color:#1d2433}.dfseat.out{opacity:.8} .dfseat.s2{top:8px;left:50%;transform:translateX(-50%)}.dfseat.s1{left:8px;top:46%;transform:translateY(-50%)}.dfseat.s3{right:8px;top:46%;transform:translateY(-50%)} .dfpile{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;display:flex;flex-direction:column;align-items:center;gap:4px} .dfpile.fade{opacity:.55;transition:opacity .3s} .dfprow{display:flex;justify-content:center;--cw:44px} .dfprow .htc+.htc{margin-left:-12px} .dfby{margin:0;font-size:12px;opacity:.9;text-align:center} .dfme{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;font-size:12px} .dfme small{font-size:11px;font-weight:800;background:rgba(0,0,0,.28);border-radius:6px;padding:0 6px}.dfme small:empty{display:none} .dfme.on span{background:#facc15;color:#1d2433;border-radius:8px;padding:1px 8px;font-weight:800} .dfbar{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0} .dfmsg{flex:1;min-height:2.9em;margin:0;font-size:14px;font-weight:700;line-height:1.45;color:var(--ink)} .dftime{flex:none;margin:0;font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap} .dfhand{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0 6px} .dfrow{display:flex;justify-content:center;width:100%} .dfrow .htc+.htc{margin-left:calc(var(--ov,0px)*-1)} .dfhand .htc.up{transform:translateY(-14px);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .dfhand .htc.tip{outline:3px solid #22c55e;outline-offset:-1px} .dfhand .htc.got{box-shadow:0 0 0 2px #f59e0b}.dfhand .htc.got::after{content:"";position:absolute;left:calc(var(--cw,56px)*.1);bottom:calc(var(--cw,56px)*.06);width:9px;height:9px;border-radius:50%;background:#f59e0b} .dfhand .htc.dim{filter:brightness(.8) saturate(.7)} .dfhand .htc.no{animation:mtno .25s} .htc.jk{color:#7c3aed}.htc.jk b{font-size:calc(var(--cw,56px)*.3)} .dfact{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin-top:6px} .dfact button{border-radius:12px;padding:12px 6px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;min-width:0} .dfgo{background:#854d0e;color:#fff;border:1px solid #854d0e} .dfps{background:var(--btn);color:var(--ink);border:1px solid var(--btnline)} .dfact button:disabled{opacity:.45;cursor:default} .dfact:has(.dfps[hidden]){grid-template-columns:1fr}.dfps[hidden]{display:none} .dftools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .dftools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .dftools button:disabled{opacity:.45;cursor:default} .dfstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} .dftbl td,.dftbl th{text-align:center;padding:5px 4px} @media (max-width:520px){.dfopts{grid-template-columns:1fr 1fr;gap:6px}.dfwrap{padding-left:6px;padding-right:6px}.dfgame{padding:10px 6px} .dfgame .dfopts,.dfgame .dfscores,.dfgame .dfbar,.dfgame .dfact,.dfgame .dftools,.dfgame .new,.dfgame .note,.dfgame .dfstat{margin-left:4px;margin-right:4px} .dftable{height:270px}.dfprow{--cw:38px}.dfprow .htc+.htc{margin-left:-14px}.dfpile{width:58%}} @media (max-width:350px){.dfseat em{font-size:12px;padding:1px 5px}.dfinfo{font-size:10px}.dfprow{--cw:34px}.dftable{height:255px}} /* ジンラミー（10/16）：カードの絵はハーツの .htc。手札は組・階段ごとのまとまり（緑の下線）→デッドウッド */ .grwrap{max-width:600px} .gropts{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:8px} .gropts>label{display:flex;flex-direction:column;gap:3px;min-width:0} .gropts>label span{font-size:12px;color:var(--sub)} .gropts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .grscores{grid-template-columns:1fr 1fr 1fr} .grscores div small{color:var(--sub);font-size:11px;font-weight:700;white-space:nowrap;min-height:1.1em} .grscores div span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .grscores .grgoal b{color:var(--sub)} .grtable{position:relative;border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#1f7a4d 0%,#176a41 55%,#115234 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);color:#fff;padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:10px} .grop{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px} .grop span{font-weight:700}.grop.on span{background:#facc15;color:#1d2433;border-radius:8px;padding:1px 8px} .grop em{font-style:normal;font-weight:800;font-size:13px;background:rgba(0,0,0,.25);border-radius:8px;padding:0 8px;white-space:nowrap} .grbacks{display:flex;justify-content:center} .grbacks i{display:block;width:22px;height:31px;border-radius:3px;border:1px solid #e2e8f0;background:repeating-linear-gradient(45deg,#1e40af 0 3px,#2563eb 3px 6px)} .grbacks i+i{margin-left:-11px} .grmid{display:flex;justify-content:center;gap:22px} .grpile{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:#fff;padding:4px;border-radius:10px;cursor:pointer;font-family:inherit;--cw:52px} .grpile small{font-size:12px;font-weight:700;white-space:nowrap;background:rgba(0,0,0,.25);border-radius:7px;padding:0 7px} .grpile:disabled{cursor:default} .grpile:not(:disabled){box-shadow:0 0 0 2px #facc15} .grpile.tip{box-shadow:0 0 0 3px #22c55e} .grpile .htc{cursor:inherit} .grback,.grempty{display:block;width:var(--cw);height:calc(var(--cw)*1.4);border-radius:calc(var(--cw)*.12);border:1px solid #e2e8f0;background:repeating-linear-gradient(45deg,#1e40af 0 4px,#2563eb 4px 8px);box-shadow:0 1px 2px rgba(0,0,0,.25)} .grempty{background:rgba(0,0,0,.18);border-style:dashed} .grbar{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0} .grmsg{flex:1;min-height:2.9em;margin:0;font-size:14px;font-weight:700;line-height:1.45;color:var(--ink)} .grtime{flex:none;margin:0;font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap} .grdw{display:flex;justify-content:center;align-items:baseline;gap:6px;font-size:14px;font-weight:800;margin-top:4px;color:var(--ink)} .grdw small{font-size:12px;font-weight:700;color:var(--sub)} .grdw.ok span{color:#15803d} .grhand{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0 6px} .grrow{display:flex;justify-content:center;width:100%;gap:8px} .grg{display:flex;padding-bottom:5px;border-bottom:3px solid transparent} .grg.meld{border-bottom-color:#22c55e} .grg .htc+.htc{margin-left:calc(var(--ov,0px)*-1)} .grhand .htc.up{transform:translateY(-14px);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .grhand .htc.tip{outline:3px solid #22c55e;outline-offset:-1px} .grhand .htc.fresh::after,.grhand .htc.got::after{content:"";position:absolute;left:calc(var(--cw,56px)*.1);bottom:calc(var(--cw,56px)*.06);width:9px;height:9px;border-radius:50%;background:#f59e0b} .grhand .htc.got{box-shadow:0 0 0 2px #f59e0b} .grhand .htc:disabled{cursor:default;opacity:1} .grhand .htc.no{animation:mtno .25s} .gract{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .gract button{border-radius:12px;padding:12px 6px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;min-width:0} .grgo{background:#1e40af;color:#fff;border:1px solid #1e40af} .grkn{background:var(--btn);color:var(--ink);border:1px solid var(--btnline)} .grkn.ok{background:#15803d;color:#fff;border-color:#15803d} .gract button:disabled{opacity:.45;cursor:default} .grtools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .grtools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .grtools button:disabled{opacity:.45;cursor:default} .grgame .new{margin-top:12px} .grstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} .grbox{max-width:560px;width:100%;max-height:92vh;overflow:auto} .grresb{display:flex;flex-direction:column;gap:10px;margin:6px 0} .grrside p{display:flex;justify-content:space-between;gap:8px;margin:0 0 4px;font-size:13px} .grrside p span{font-weight:800;white-space:nowrap} .grrcards{display:flex;flex-wrap:wrap;gap:6px 8px} .grrg{display:flex;padding-bottom:3px;border-bottom:3px solid #22c55e} .grrg.dead{border-bottom-color:transparent} .grrg .htc+.htc{margin-left:-10px} .htc.sm{--cw:30px;display:inline-block;cursor:default} .htc.sm.lay{box-shadow:0 0 0 2px #f59e0b;background:#fff7ed} .grrg.dead .htc.sm{filter:saturate(.8);background:#f1f5f9} .grresm{white-space:pre-line;font-weight:700;line-height:1.5} .grtbl td,.grtbl th{text-align:center;padding:5px 4px} @media (max-width:520px){.grwrap{padding-left:6px;padding-right:6px}.grgame{padding:10px 6px} .grgame .gropts,.grgame .grscores,.grgame .grbar,.grgame .gract,.grgame .grtools,.grgame .new,.grgame .note,.grgame .grstat,.grgame .grdw{margin-left:4px;margin-right:4px} .grpile{--cw:46px}.grrow{gap:6px}} @media (max-width:350px){.grpile{--cw:42px}.gract button{font-size:15px}.grtools button{font-size:13px}.htc.sm{--cw:27px}} .grrside p b small{font-weight:700;color:var(--sub);font-size:12px} .grtbl td,.grtbl th{white-space:nowrap;font-size:14px} @media (max-width:400px){.grtbl td,.grtbl th{font-size:13px;padding:5px 2px}} /* ワードサーチ（文字探し・10/16）：盤＝文字のマス（CSS grid）＋上に重ねた SVG（見つけた単語の帯・なぞっている線）。盤はいつも画面の幅と高さに収める（wordsearch.js layout） */ .wdwrap{max-width:720px}.wdwrap .game{width:100%;max-width:720px} .wdlv button{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}.wdlv button small{font-size:11px;font-weight:600;opacity:.75} .wdopts{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:6px;margin-bottom:8px;align-items:stretch} .wdopts label{display:flex;align-items:center;gap:4px;min-width:0;border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:0 6px;font-weight:700;font-size:13px;color:var(--ink)} .wdopts label span{white-space:nowrap}.wdopts select{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-weight:800;font-size:14px;padding:7px 0} .wdopts>span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 6px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden} @media(max-width:480px){.wdopts>span{font-size:13px;padding:7px 4px}.wdopts label{font-size:12px}} .wdbox{width:100%;display:flex;justify-content:center;padding:2px 0} #wdboard{position:relative;flex:none;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:10px;background:#fffdf7;box-shadow:inset 0 0 0 1px rgba(13,148,136,.35);cursor:pointer} #wdgrid{position:absolute;inset:0;display:grid;z-index:2} .wdc{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--cs) * .56);color:#1d2433;line-height:1;font-family:inherit} .wdc.hl{color:#fff;background:#0d9488;border-radius:50%;animation:wdpulse 1s ease-in-out infinite} @keyframes wdpulse{50%{box-shadow:0 0 0 5px rgba(13,148,136,.25)}} #wdsvg{position:absolute;left:0;top:0;z-index:1;pointer-events:none} #wdsvg .wdfnd{opacity:.38}#wdsvg .wdsel{opacity:.3} .wdlist{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 4px} .wdw{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:999px;padding:4px 11px;font-weight:700;font-size:14px} .wdw.got{text-decoration:line-through;text-decoration-thickness:2px;opacity:.7;border-color:var(--wc);box-shadow:inset 0 0 0 2px var(--wc)} .wddirs{text-align:center;font-size:13px;color:var(--sub);margin:2px 0} .wdtools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .wdtools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wdgame .new{margin-top:12px} .wdprint{display:none} @media print{body.wdp *{visibility:hidden}body.wdp #wdprintbox,body.wdp #wdprintbox *{visibility:visible}body.wdp #wdprintbox{display:block;position:absolute;left:0;top:0;width:100%;color:#000;background:#fff} .wdpt{border-collapse:collapse;margin:10px auto}.wdpt td{width:9mm;height:9mm;text-align:center;font:700 15pt/1 sans-serif;border:1px solid #bbb} .wdpl{columns:3;font-size:13pt;margin:8px 0;padding-left:18px}#wdprintbox h2{font-size:16pt;text-align:center;margin:0}#wdprintbox p{font-size:10pt;margin:4px 0}.wdpu{text-align:right}} @media(max-width:600px){.wdopts{grid-template-columns:minmax(0,1fr) auto}.wdopts label{grid-column:1/-1}} /* スマホ：お題の箱を1行に（Instrumentos musicales など長いお題の名前を切らない） */ @media(max-width:370px){.wdwrap{padding-left:8px;padding-right:8px}.wdwrap .wdgame{padding:10px 6px}} /* 320〜360px：まわりの余白を詰めて上級の1マスを19px以上に */ /* シェアのお誘い・秘密のステージ（§93・§95 10/17）：ふだんの結果の窓と見た目を変える＝濃い紺＋金の縁・星・少しだけ動く出方 */ .modal.pzinv{z-index:10000;background:rgba(6,8,20,.72)} .pzinv .box{background:linear-gradient(160deg,#1d2257 0%,#0e1230 100%);color:#f6f1e1;border:2px solid #d4a63a;box-shadow:0 0 0 4px rgba(212,166,58,.2),0 18px 50px rgba(0,0,0,.5);position:relative;overflow:hidden;animation:pzinvIn .5s cubic-bezier(.2,.9,.3,1.25) both;max-height:calc(100vh - 32px);overflow-y:auto} .pzinv .box h2{color:#f5cf6b;font-size:21px;margin-bottom:6px} .pzinv .box p{color:#dcd9ee;margin-bottom:12px} .pzinv-ic{display:flex;justify-content:center;color:#f5cf6b;margin:0 0 4px} .pzinv-ic .pzst{animation:pzstTw 2.4s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(245,207,107,.55))} .pzinv-ic.pzlk svg{width:34px;height:34px} .pzinv .box p.pzinv-txt{background:rgba(255,255,255,.08);border:1px dashed rgba(245,207,107,.55);border-radius:10px;padding:10px 12px;color:#fff;text-align:left;font-size:13.5px;line-height:1.6;overflow-wrap:anywhere} .pzinv .pzinv-go{display:block;width:100%;box-sizing:border-box;background:linear-gradient(180deg,#f7d77c,#d4a63a);color:#2a1d00;border:none;border-radius:12px;padding:12px 8px;font-size:15px;font-weight:800;cursor:pointer;margin-top:6px;text-decoration:none;text-align:center} .pzinv .pzinv-go[hidden]{display:none} .pzinv .pzinv-later{background:transparent;color:#dcd9ee;border:1px solid rgba(255,255,255,.28)} .pzinv .pzinv-never{background:transparent;color:#aaa7c4;font-size:12px;font-weight:600;padding:6px 0;text-decoration:underline} .pzinv .pzinv-never[hidden]{display:none} .pzinv .box p.pzinv-ok{color:#a7ecb9;font-size:13px;margin:6px 0 0;overflow-wrap:anywhere} .pzinv .box p.pzinv-ok:empty{display:none} .pzinv .box p.pzrev-k{letter-spacing:.4em;font-weight:800;color:#f5cf6b;font-size:12px;margin:0 0 4px} .pzinv .box p.pzrev-1{font-size:15px;color:#fff;margin:0 0 2px} .pzinv .box p.pzrev-2{color:#f5cf6b;font-weight:700} .pzinv-rev{border-top:1px solid rgba(245,207,107,.35);margin-top:12px;padding-top:12px;animation:pzinvIn .5s both} .pzinv-rev[hidden]{display:none} .pzw{display:flex;gap:6px;margin:2px 0 0} .pzw-i{flex:1;min-width:0;border:1px solid rgba(245,207,107,.7);background:#fff;color:#111;border-radius:10px;padding:10px 12px;font-size:16px} .pzinv .box .pzw-b{width:auto;flex:none;margin:0;padding:0 18px;background:#f5cf6b;color:#2a1d00;border-radius:10px} .pzinv .box p.pzw-e{color:#ffaaaa;font-size:13px;margin:6px 0 0} .pzinv .box p.pzw-e:empty{display:none} .pzinv .box p.pzw-h{font-size:12px;margin:6px 0 10px;color:#aaa7c4} @keyframes pzinvIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}} @keyframes pzstTw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(10deg)}} @media (prefers-reduced-motion:reduce){.pzinv .box,.pzinv-rev,.pzinv-ic .pzst,.pzsh-toast{animation:none}} /* 入口：数独の段の並びの「悪魔級の隣」＝鍵つきの「？？？」（開いたら「秘密」） */ .levels .seclv{display:flex;align-items:center;justify-content:center;gap:4px;background:#1d2257;color:#f5cf6b;border:1px dashed #d4a63a} .levels .seclv.open{background:linear-gradient(135deg,#6d28d9,#c58f1f);color:#fff;border:1px solid #d4a63a} .levels .seclv svg{flex:none} .levels.x3,.rlv.x3,html[lang] .levels.x3,html[lang] .rlv.x3{grid-template-columns:repeat(3,1fr)} .levels .xlv{color:#b07d10} html[data-theme=dark] .levels .xlv{color:#f5cf6b} .levels .xlv.on{background:linear-gradient(135deg,#6d28d9,#c58f1f);color:#fff;border-color:#c58f1f} /* シェアのリンクから来た人への一言（下） */ .pzsh-toast{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;background:#1d2257;border:2px solid #d4a63a;border-radius:14px;padding:6px 6px 6px 12px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:pzToast .5s both} .pzsh-toast a{display:flex;align-items:center;gap:8px;color:#f6f1e1;text-decoration:none;font-size:14px;font-weight:700;line-height:1.4;min-width:0} .pzsh-toast a svg{color:#f5cf6b;flex:none}.pzsh-toast a b{color:#f5cf6b;flex:none} .pzsh-toast button{flex:none;background:transparent;border:none;color:#aaa7c4;font-size:20px;line-height:1;padding:4px 8px;cursor:pointer} @keyframes pzToast{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}} /* 秘密のページ：開いていない時は中身を隠して入口だけ */ .sechero .ttl i.secic{background:linear-gradient(135deg,#6d28d9,#c58f1f);display:inline-flex;align-items:center;justify-content:center;color:#fff} .secgate{display:none;max-width:420px;margin:8px auto 24px;padding:24px 20px;text-align:center;background:linear-gradient(160deg,#1d2257,#0e1230);color:#f6f1e1;border:2px solid #d4a63a;border-radius:16px} .secgate p{margin:8px 0}.secgate a{color:#f5cf6b} .secgate .pzinv-go{display:block;width:100%;background:linear-gradient(180deg,#f7d77c,#d4a63a);color:#2a1d00;border:none;border-radius:12px;padding:12px 0;font-size:15px;font-weight:800;cursor:pointer;margin-top:10px} .secgate .pzinv-ic{display:flex;justify-content:center;color:#f5cf6b}.secgate .pzinv-ic svg{width:34px;height:34px} body.seclocked .secgate{display:block} body.seclocked .wrap,body.seclocked .mini,body.seclocked .secbody{display:none!important} .levels .xlv{white-space:normal;line-height:1.2;hyphens:auto;padding:7px 2px} .emb .levels .seclv{display:none} .secbody .tbl td,.secbody .tbl th{overflow-wrap:anywhere;hyphens:auto} .secgate{margin:8px 16px 24px}@media(min-width:452px){.secgate{margin:8px auto 24px}} body.secret .board .cell.given{color:#c0265e} html[data-theme=dark] body.secret .board .cell.given{color:#ff7aa8} body.secret .game > .note{display:none} /* 七並べ（10/17・sv*）：場はマークごとの列（A〜K）。手札の絵はハーツの .htc */ .svwrap{max-width:600px} .svopts{display:flex;gap:8px;margin-bottom:8px;align-items:flex-end} .svopts>label{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .svopts>label span{font-size:12px;color:var(--sub)} .svopts select{width:100%;min-width:0;border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:9px 8px;font-size:14px;font-family:inherit} .svinfo{flex:none;font-size:13px;font-weight:700;color:var(--sub);white-space:nowrap;padding-bottom:9px} .svscores div small{color:var(--sub);font-size:11px;font-weight:700;white-space:nowrap;min-height:1.1em;line-height:1.3} .svscores div small.svout{color:#15803d}.svscores div small.svdead{color:#c62828} .svp{display:flex;gap:3px;margin-top:2px;height:8px} .svp em{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--sub);box-sizing:border-box} .svp em.u{background:#c62828;border-color:#c62828} .svtable{border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#1f7a4d 0%,#176a41 55%,#115234 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);padding:8px 6px} .svboard{display:flex;flex-direction:column;gap:4px} .svrow{display:grid;grid-template-columns:14px repeat(13,minmax(0,1fr));gap:2px;align-items:center} .svsu{color:#fff;font-size:14px;font-weight:800;text-align:center;line-height:1}.svsu.red{color:#fecaca} .svcell{aspect-ratio:5/7;border-radius:4px;background:rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;min-width:0;box-sizing:border-box} .svcell.open{border:1.5px dashed rgba(255,255,255,.45);background:rgba(255,255,255,.06)} .svcell.mine{border:2px dashed #facc15;background:rgba(250,204,21,.18)} .svcard{background:#fff;color:#1d2433;font-weight:800;font-size:clamp(10px,3.2vw,16px);box-shadow:0 1px 1px rgba(0,0,0,.25);letter-spacing:-.04em} .svcard.red{color:#c62828} .svcard.dd{background:#d6d3cc;color:#57534e}.svcard.dd.red{color:#9f4040} .svcard.last{box-shadow:0 0 0 2.5px #f59e0b;position:relative;z-index:1} .svlog{min-height:1.45em;margin:8px 0 0;font-size:13px;color:var(--sub);line-height:1.45} .svbar{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0} .svmsg{flex:1;min-height:2.9em;margin:0;font-size:14px;font-weight:700;line-height:1.45;color:var(--ink)} .svtime{flex:none;margin:0;font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap} .svhand{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 6px} .svhrow{display:flex;justify-content:center;width:100%} .svhrow .htc+.htc{margin-left:calc(var(--ov,0px)*-1)} .svhand .htc.can{transform:translateY(-8px);border-color:#15803d;box-shadow:0 0 0 1.5px #15803d} .svhand .htc.dim{filter:brightness(.86) saturate(.55);cursor:default} .svhand .htc.tip{outline:3px solid #22c55e;outline-offset:-1px} .svhand .htc.no{animation:mtno .25s} .svact{display:grid;grid-template-columns:1fr;margin-top:6px} .svact button{border-radius:12px;padding:12px 6px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;min-width:0;background:var(--btn);color:var(--ink);border:1px solid var(--btnline)} .svact button.lose{background:#c62828;border-color:#c62828;color:#fff} .svact button:disabled{opacity:.45;cursor:default} .svtools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .svtools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0} .svtools button:disabled{opacity:.45;cursor:default} .svstat{white-space:pre-line;text-align:center;font-size:13px;color:var(--sub);margin-top:10px;line-height:1.5} .svtbl td,.svtbl th{text-align:center;padding:5px 4px}.svtbl td.svlost{color:#c62828;font-weight:700} @media (max-width:520px){.svwrap{padding-left:6px;padding-right:6px}.svgame{padding:10px 6px} .svgame .svopts,.svgame .svscores,.svgame .svlog,.svgame .svbar,.svgame .svact,.svgame .svtools,.svgame .new,.svgame .note,.svgame .svstat{margin-left:4px;margin-right:4px} .svtable{padding:6px 4px}.svrow{grid-template-columns:12px repeat(13,minmax(0,1fr));gap:1.5px}.svsu{font-size:12px}} html[data-theme=dark] .svcard{background:#f4f4f2} /* ---- ハノイの塔（10/20）hn* ---- */ .hnwrap{max-width:720px}.hnwrap .game{width:100%;max-width:720px} .hnopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px} .hnopts>span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 4px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden} #hnboard{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:12px;background:#f1e7d6;border:1px solid #d9c6a5;padding:0 4px;touch-action:none;user-select:none;-webkit-user-select:none;isolation:isolate;min-height:120px} .hnpeg{position:relative;height:100%;cursor:pointer;outline:none;border-radius:10px} .hnpeg:focus-visible{box-shadow:inset 0 0 0 3px var(--accent,#2563eb)} .hnpeg.on{background:rgba(37,99,235,.08)} .hnpeg.tgt{background:rgba(234,179,8,.18)} .hnpeg::after{content:"";position:absolute;left:4%;right:4%;bottom:14px;height:6px;border-radius:3px;background:#8b6b43} .hnrod{position:absolute;left:50%;bottom:14px;top:22px;width:8px;transform:translateX(-50%);border-radius:4px 4px 0 0;background:#a07c50} .hnd{position:absolute;left:50%;bottom:calc(20px + var(--b));width:calc(var(--w) * .92);height:calc(var(--dh) - 3px);transform:translateX(-50%);border-radius:999px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.25);transition:bottom .12s} .hnd.up{bottom:calc(100% - var(--dh) - 2px)} .hnd.hl{outline:3px solid #facc15;outline-offset:2px} .hnd.drag{z-index:5;transition:none;opacity:.92} .hnarr{position:absolute;left:50%;top:0;transform:translateX(-50%);color:#ca8a04;font-size:16px;line-height:1} .hnbar{display:flex;justify-content:center} .hntools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .hntools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hntools button:disabled{opacity:.45;cursor:default} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #hnboard{background:#3a3226;border-color:#5a4a35}} :root[data-theme="dark"] #hnboard{background:#3a3226;border-color:#5a4a35} @media(max-width:380px){.hnopts>span{font-size:13px;padding:7px 2px}.hntools button{font-size:13px;padding:10px 2px}.hnwrap{padding-left:8px;padding-right:8px}.hnwrap .hngame{padding:10px 6px}} /* 320〜360px：Movimientos・Ongedaan maken を切らない／円盤を大きく */ /* ---- スライドパズル（15パズル）10/20 sl* ---- */ .slwrap{max-width:560px}.slwrap .game{width:100%;max-width:560px} .slopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px} .slopts>span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 4px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden} .slbox{display:flex;justify-content:center} #slboard{position:relative;width:min(100%,460px);aspect-ratio:1;border-radius:12px;background:#d6dbe4;border:1px solid #c3cad6;padding:4px;box-sizing:border-box;touch-action:manipulation;user-select:none;-webkit-user-select:none;isolation:isolate} .slt{position:absolute;left:4px;top:4px;width:calc((100% - 8px) / var(--n));height:calc((100% - 8px) / var(--n));padding:3px;border:0;background:none;cursor:pointer;transition:transform .12s ease;-webkit-tap-highlight-color:transparent} .slt::before{content:"";position:absolute;inset:3px;border-radius:9px;background:#fff;border:1px solid #b9c1ce;box-shadow:0 2px 0 #b9c1ce} .slt{font:800 calc(min(100vw,460px) / var(--n) * .36)/1 system-ui,sans-serif;color:#1f2937;font-variant-numeric:tabular-nums} .slt.ok::before{background:#fef3c7;border-color:#f59e0b;box-shadow:0 2px 0 #f59e0b} .slt{display:flex;align-items:center;justify-content:center}.slt>*{position:relative} .slt{z-index:0}.slt::before{z-index:-1} .sltools{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px} .sltools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sltools button:disabled{opacity:.45;cursor:default} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #slboard{background:#2b3240;border-color:#3b4454}} :root[data-theme="dark"] #slboard{background:#2b3240;border-color:#3b4454} /* ---- ユーコン・スコーピオン（10/21）tb*：台とカードはソリティアと同じ（kgame・kwrap・kld・kcard） ---- */ .tbwrap{max-width:760px}.tbwrap .game{width:100%;max-width:760px} .tbopts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px} .tbopts span{border:1px solid var(--btnline);background:var(--btn);border-radius:10px;padding:7px 4px;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden} .tbtools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px} .tbtools button{border:1px solid var(--btnline);background:var(--btn);color:var(--ink);border-radius:10px;padding:10px 4px;font-size:14px;font-weight:700;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tbtools button:disabled{opacity:.45;cursor:default} .tbtools:has(#tbauto:not([hidden])) #tbre{display:none} .tbdone{position:absolute;top:0;display:flex;align-items:center;justify-content:flex-end;color:rgba(255,255,255,.85);font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden} .kgame #tbboard .slot.sk{cursor:pointer} .kgame #tbboard .slot.sk.empty{opacity:.35;cursor:default} @media(max-width:430px){.tbtools button{white-space:normal;line-height:1.15;font-size:13px;padding:8px 2px;hyphens:auto;overflow-wrap:anywhere}.tbopts span{font-size:13px;padding:9px 2px}} /* 狭い画面：Ongedaan maken・Suggerimento などは2行に折り返す。台の余白はソリティア共通の決まり（スマホは緑の台を画面の端まで）に任せる */ /* 結果の窓の「明日も」（10/21）：明日の0時に入れ替わる一言＋ホーム画面に置く */ .pzback{margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;color:var(--sub)} .pzback p{margin:0 0 6px} .pzback .pzinst{margin:4px auto 6px;display:block} .pzback .pzhow{font-size:12px} /* 今日の帯（10/21）：数独の入口・今日の数独の盤の上。日付・全員同じ1問・今週7日の印・連続日数 */ .tdstrip{border:1px solid var(--btnline);background:var(--btn);border-radius:12px;padding:10px 12px;margin-bottom:10px} .tdstrip .tds-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:16px;color:var(--ink)} .tdstrip .tds-h span{font-weight:700;color:#1f8a5b} .tdstrip .tds-s{margin:2px 0 8px;font-size:12px;color:var(--sub)} .tdstrip .tds-r{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .tdstrip .tds-w{display:flex;gap:5px} .tdstrip .tds-w i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--btnline);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;color:var(--sub)} .tdstrip .tds-w i.on{background:#1f8a5b;border-color:#1f8a5b;color:#fff} .tdstrip .tds-w i.tds0{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #f59e0b} .tdstrip .tds-w i.gold{border-color:#d4a017;color:#a8790a;width:28px;height:28px;font-size:13px} .tdstrip .tds-w i.gold.on{background:linear-gradient(135deg,#f7d14a,#d4a017);border-color:#b8860b;color:#fff} .tdstrip .tds-w i.pop{animation:tdsPop .6s ease-out} @keyframes tdsPop{0%{transform:scale(2.2) rotate(-18deg);opacity:0}60%{transform:scale(.9) rotate(4deg);opacity:1}100%{transform:scale(1)}} .tdstrip .tds-m{margin:6px 0 0;font-size:12px;color:var(--sub)} .tdstrip .tds-sh{margin-left:8px;color:var(--ink);font-weight:700;white-space:nowrap} .hmsg .shbtn{border:1px solid #d4a017;background:#fff8e1;color:#7a5a00;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700;cursor:pointer} .tdstrip .tds-m.gold{color:#a8790a;font-weight:700} .tdstrip .tds-sk{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px;font-size:12px;color:var(--sub)} .tdstrip .tds-sk span{margin-right:2px} .tdstrip .tds-sk button{border:1px solid var(--btnline);background:var(--card);color:var(--ink);border-radius:999px;padding:3px 9px;font-size:12px;cursor:pointer} .tdstrip .tds-sk button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);font-weight:700} .tdstrip .tds-sk button:disabled{opacity:.5;cursor:default} /* 盤の着せ替え（金のハンコで開く・盤の色だけ。暗い表示を手で選んだ時はいつもの色。端末の暗い表示では着せ替えの色＝字の色も全部ここで決める） */ :root[data-skin="sakura"]:not([data-theme="dark"]) .board{--given:#1d2433;--sub:#5f6673;--err:#d93a2b;--errbg:#fde8e6;--accent:#2457c5;--gold:#a8790a;--card:#fff7f9;--line:#f0cdd6;--thick:#b4536e;--sel:#ffd6e0;--peer:#fdeef2;--same:#f9c3d1;--input:#c2416a} :root[data-skin="matcha"]:not([data-theme="dark"]) .board{--given:#1d2433;--sub:#5f6673;--err:#d93a2b;--errbg:#fde8e6;--accent:#2457c5;--gold:#a8790a;--card:#f7faf2;--line:#d3e0c4;--thick:#4d6b2f;--sel:#d9ebc4;--peer:#eef5e6;--same:#c8e0ad;--input:#3f7d20} :root[data-skin="umi"]:not([data-theme="dark"]) .board{--given:#1d2433;--sub:#5f6673;--err:#d93a2b;--errbg:#fde8e6;--accent:#2457c5;--gold:#a8790a;--card:#f3f9fc;--line:#c6dfeb;--thick:#1d5b7a;--sel:#cbe8f5;--peer:#e8f4fa;--same:#b5dcef;--input:#0f72a3} :root[data-skin="momiji"]:not([data-theme="dark"]) .board{--given:#1d2433;--sub:#5f6673;--err:#d93a2b;--errbg:#fde8e6;--accent:#2457c5;--gold:#a8790a;--card:#fffaf3;--line:#ecd3b8;--thick:#9a3b12;--sel:#ffdcc0;--peer:#fbefe2;--same:#f7c9a3;--input:#c2410c} :root[data-skin="yozora"]:not([data-theme="dark"]) .board{--sub:#b9bfe0;--err:#ff7a6b;--errbg:#4a2430;--accent:#ffd76a;--card:#1b2140;--line:#3a4270;--thick:#c9cff5;--sel:#36407a;--peer:#252c52;--same:#454f94;--input:#ffd76a;--given:#eef0ff} :root[data-skin="yuki"]:not([data-theme="dark"]) .board{--given:#1d2433;--sub:#5f6673;--err:#d93a2b;--errbg:#fde8e6;--accent:#2457c5;--gold:#a8790a;--card:#fbfdff;--line:#dde6ee;--thick:#5b7083;--sel:#e1ecf7;--peer:#f1f6fb;--same:#d3e3f3;--input:#3b6d99} .tdstrip .tds-k{font-size:14px;font-weight:800;color:#b45309;white-space:nowrap}