html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
main {
background: #18e5ff;
margin: 0;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
}
section {
margin: 0 auto 53px;
width: 96%;
overflow: hidden;
}
article {
float: left;
width: 48%;
padding: 0.8em 0.5em;
box-sizing: border-box;
}
aside {
background: #d0f0ff;
float: right;
width: 50%;
margin-top: 10px;
box-sizing: border-box;
padding: 0.5em;
}
#selection_form button {
margin: 3px;
}
#roll_result {
background: white;
margin: 0 0 5px;
padding: 0.5em;
width: 100%;
min-height: 60px;
box-sizing: border-box;
}
.warning {
background: #ffff00;
}
.potential {
color: red;
}
hr.divider {
height: 4px;
border: 0;
background: #999;
margin: 20px 0px 20px 0px;
}
/* ---- event header / rules ---- */
#event_header {
display: flex;
align-items: center;
gap: 0.6em;
}
#event_icon {
width: 48px;
height: 48px;
object-fit: contain;
}
#event_header h1 {
margin: 0;
}
#event_rules {
background: white;
border: 1px solid #0090ff;
border-radius: 4px;
padding: 0.6em 0.8em;
margin: 0.5em 0;
}
#event_cheat {
display: block;
max-width: 100%;
height: auto;
margin: 0.5em 0;
padding: 4px;
background: white;
border: 1px solid #0090ff;
border-radius: 4px;
box-sizing: border-box;
}
#event_tracker {
font-weight: bold;
margin: 0.3em 0;
}
#event_score_line {
font-weight: bold;
}
#prompt {
background-color: #95d8c7;
padding: 0.4em 0.7em;
border-radius: 4px;
margin: 0.4em 0;
}
#event_extra:empty {
display: none;
}
#event_extra {
margin: 0.5em 0;
}
#event_extra label {
font-weight: bold;
margin-right: 0.4em;
}
#event_extra select {
font-size: 1em;
padding: 2px 5px;
}
/* ---- score sheet ---- */
#player_line {
margin: 0 0 0.5em;
}
#player_line input {
font-size: 1em;
padding: 2px 5px;
}
#score table {
width: 100%;
}
#score table,
#score th,
#score td {
border-collapse: collapse;
border: 1px solid black;
}
#score th,
#score td {
padding: 3px 7px 3px 7px;
}
#score thead {
background-color: #00d0ff;
}
#score th {
background-color: #0090ff;
}
#score .subtitle {
background-color: #00f0ff;
font-weight: bold;
}
#score tr.active-event {
background-color: #ffff99;
}
#score tr.coming-soon {
opacity: 0.55;
}
#score .soon {
font-size: 0.8em;
font-style: italic;
color: #555;
}
.row_icon {
width: 22px;
height: 22px;
object-fit: contain;
vertical-align: middle;
margin-right: 5px;
}
#score .atts {
display: flex;
gap: 4px;
margin-bottom: 2px;
}
#score .att {
display: inline-block;
min-width: 1.6em;
text-align: center;
padding: 1px 3px;
background: white;
border: 1px solid #999;
border-radius: 3px;
font-size: 0.85em;
}
#score .best {
font-weight: bold;
}
/* ---- history ---- */
#last_rolls {
margin: 0.5em 0;
clear: both;
}
#last_rolls details {
border: 1px solid #0090ff;
}
#last_rolls summary {
display: flex;
align-items: center;
justify-content: space-between;
background: #0090ff;
padding: 0.4em 0.8em;
cursor: pointer;
font-weight: bold;
list-style: none;
}
#last_rolls summary::-webkit-details-marker {
display: none;
}
#last_rolls summary .roll_title::before {
content: "\25B6";
display: inline-block;
margin-right: 0.5em;
}
#last_rolls details[open] > summary .roll_title::before {
content: "\25BC";
}
#history_form {
margin: 0;
}
#history_form fieldset {
border: none;
padding: 0;
margin: 0;
font-size: 0.85em;
font-weight: normal;
}
ol#last_list {
counter-reset: li -1;
padding-left: 0.5em;
margin: 0.5em;
}
ol#last_list li {
list-style: none;
}
ol#last_list li::before {
content: "L-" counter(li) " : ";
counter-increment: li;
}
/* ---- leaderboard ---- */
#leaderboard {
clear: both;
margin: 0.5em 0;
}
#leaderboard_scroll {
max-height: 14em;
overflow-y: auto;
border: 1px solid black;
background: white;
}
ol#score_list {
counter-reset: li 0;
list-style: none;
margin: 0;
padding: 0;
}
ol#score_list li {
display: flex;
gap: 0.5em;
padding: 2px 7px;
border-bottom: 1px solid #ddd;
}
ol#score_list li::before {
content: counter(li) ". ";
counter-increment: li;
min-width: 2em;
}
ol#score_list li .lb_name {
flex: 1;
}
ol#score_list li .lb_total {
font-weight: bold;
min-width: 3em;
text-align: right;
}
ol#score_list li .lb_date {
color: #666;
min-width: 6em;
text-align: right;
}
ol#score_list li.new_score {
background: #ffff00;
}
/* ---- die sizes ---- */
.Q {
width: 13px;
height: 13px;
}
.H {
width: 25px;
height: 25px;
}
.T {
width: 37px;
height: 37px;
}
.F {
width: 49px;
height: 49px;
}
.die {
position: relative;
display: inline-block;
}
.die span {
position: absolute;
width: 49px;
height: 49px;
}
/* ---- freeze affordance (Discus and future freeze-based events) ----
Scoped to #roll_result.has-freeze so non-freeze events (e.g. Hurdles),
whose dice never carry .freezable/.frozen, aren't dimmed by mistake. */
#roll_result.has-freeze .die {
cursor: default;
}
#roll_result.has-freeze .die.freezable {
cursor: pointer;
}
#roll_result.has-freeze .die:not(.freezable):not(.frozen) {
opacity: 0.55;
}
/* ---- hold/free hover overlays (carried for future freeze-based events) ---- */
.SS span.hold {
display: none;
background: url('data:image/svg+xml;utf8,')
no-repeat;
background-size: cover;
}
#roll_result.has-freeze .die.freezable span.free:hover {
background: url('data:image/svg+xml;utf8,')
no-repeat;
background-size: cover;
}